/* Rande ID — RDS 1.0 | Mobile authentication surface */
:root{
  color-scheme:dark;
  --bg:#0B0B0C;
  --surface:#151618;
  --raised:#1D1F23;
  --border:#2A2D31;
  --text:#F5F7FA;
  --muted:#A7ADB5;
  --dim:#747A82;
  --soft:#D7DADF;
  --control:#303338;
  --control-hover:#393C41;
  --danger:#EB8080;
  --focus:#A7ADB5;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --radius-sm:12px;--radius-md:16px;--radius-lg:20px;--radius-xl:24px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;background:var(--bg);overflow:hidden}
body{
  color:var(--text);font:400 14px/1.43 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.014em;
  -webkit-touch-callout:none;
}
button,input{font:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-appearance:none;appearance:none}
button:disabled{opacity:.58;cursor:default}
button:focus-visible,input:focus-visible,.photo-control:focus-within{outline:2px solid var(--focus);outline-offset:2px}
input,textarea{caret-color:var(--text)}
input:focus{outline:0}
input::selection,::selection{background:#686E78;color:#FFFFFF}
a,button,label{-webkit-tap-highlight-color:transparent}
svg{flex-shrink:0}
#app{height:100%;height:100dvh;min-height:0}
.shell{
  height:100%;height:100dvh;width:100%;max-width:480px;margin:auto;
  display:flex;flex-direction:column;min-height:0;justify-content:flex-start;
  padding:0 20px max(8px,env(safe-area-inset-bottom));
}
.auth-card{
  flex:1;min-height:0;display:flex;flex-direction:column;width:100%;
  padding:calc(22px + env(safe-area-inset-top)) 0 8px;background:transparent;
}
.screen-head{flex:none}
.brand{
  display:flex;align-items:center;gap:10px;color:var(--text);
  font-size:15px;font-weight:750;letter-spacing:-.045em;line-height:1.25;
}
.brand-icon{
  width:32px;height:32px;display:grid;place-items:center;background:var(--text);
  color:var(--bg);border-radius:9px;font-size:20px;font-weight:800;letter-spacing:-.09em;
}
.brand-accent{color:var(--muted);margin-left:3px;font-weight:650}
.topline{display:flex;align-items:center;gap:4px;min-height:48px}
.topline .brand{font-size:15px}
.topline .brand-icon{width:32px;height:32px;font-size:19px}
.back{
  display:grid;place-items:center;flex:none;width:48px;height:48px;border:0;
  background:transparent;border-radius:var(--radius-sm);color:var(--muted);margin-left:-12px;
}
.back:active{background:var(--raised)}
.heading{margin:32px 0 0}
.topline+.heading{margin-top:24px}
.heading h1{font-size:28px;line-height:1.16;letter-spacing:-.043em;font-weight:700;margin:0}
.heading p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.43}
.screen-body{display:flex;flex-direction:column;min-height:0;margin-top:32px}
.section-label{color:var(--muted);font-size:12px;font-weight:600;margin-bottom:12px}
.account-list{
  display:grid;gap:0;border:1px solid var(--border);border-radius:var(--radius-md);
  overflow:hidden;background:var(--surface);
}
.account-row{
  border:0;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:center;
  width:100%;background:transparent;color:var(--text);text-align:left;
  padding:10px 12px;min-height:68px;
}
.account-row:last-child{border-bottom:0}
.account-row:active{background:var(--raised)}
.account-meta{flex:1;min-width:0;display:grid;gap:3px}
.account-meta strong{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-meta small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-row>svg{color:var(--muted)}
.avatar{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  background:var(--control);font-size:16px;font-weight:650;color:var(--text);
  overflow:hidden;flex-shrink:0;
}
.avatar.small{width:40px;height:40px;font-size:14px}
.avatar.large{width:72px;height:72px;font-size:24px}
.avatar img{width:100%;height:100%;object-fit:cover}
.empty{
  height:112px;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:12px;color:var(--muted);font-size:12px;text-align:center;
  border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-md);padding:12px;
}
.empty-symbol{color:var(--muted)}
.list-action{
  display:flex;align-items:center;gap:12px;width:100%;height:56px;margin-top:8px;
  padding:0 8px;background:transparent;border:0;border-bottom:1px solid var(--border);
  color:var(--text);font-weight:600;text-align:left;font-size:14px;
}
.list-action svg:first-child{color:var(--muted)}
.list-action svg:last-child{margin-left:auto;color:var(--dim)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;color:var(--dim);font-size:12px}
.pager button{display:flex;align-items:center;gap:4px;color:var(--muted);background:none;border:0;padding:10px 6px;font-size:12px;min-height:44px}
.bottom-actions{
  display:flex;justify-content:flex-end;align-items:center;gap:12px;
  margin-top:auto;padding-top:24px;flex:none;
}
.bottom-actions.inside{margin-top:auto;padding-top:24px}
.bottom-actions.split{justify-content:space-between}
.bottom-actions .btn{flex:1;min-width:0}
.bottom-actions .text-button{flex:none}
.bottom-actions.split .btn{flex:1}
.btn{
  border:1px solid transparent;border-radius:var(--radius-md);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 20px;color:var(--bg);font-weight:650;
  font-size:14px;line-height:1.3;white-space:nowrap;
  transition:background-color .14s ease,transform .14s ease;
}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--soft);color:#111215}
.btn.primary:hover{background:var(--text)}
.btn.outline{background:var(--control);border-color:var(--border);color:var(--text)}
.btn.outline:hover{background:var(--control-hover)}
.text-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  color:var(--soft);border:0;background:none;border-radius:var(--radius-sm);
  padding:12px;min-height:48px;font-size:13px;font-weight:600;
}
.text-button:active{background:var(--raised)}
.foot{
  flex:none;min-height:48px;display:flex;align-items:center;justify-content:space-between;
  gap:8px;width:100%;padding:0 0 2px;color:var(--dim);font-size:12px;
}
.footer-version{opacity:.85}
.foot-link{
  border:0;background:transparent;color:var(--muted);font-size:12px;
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px;
  border-radius:var(--radius-sm);
}
.form{display:flex;flex-direction:column;gap:16px;flex:1}
.field{display:grid;gap:8px;min-width:0}
.field-label{font-size:13px;font-weight:600;line-height:1.3;color:var(--text)}
.field-inner{
  display:flex;align-items:center;gap:12px;height:56px;background:var(--raised);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:0 16px;color:var(--dim);
}
.field-inner:focus-within{border-color:#7F858C;box-shadow:0 0 0 1px #7F858C}
.field-inner input{
  height:100%;width:100%;min-width:0;flex:1;background:transparent;
  color:var(--text);border:0;font-size:16px;
}
.field-inner input::placeholder{color:#92979F}
.field-inner input[type=date]{color-scheme:dark}
.field-inner input::-webkit-calendar-picker-indicator{opacity:.8;filter:invert(1)}
.show-password{
  border:0;background:transparent;color:var(--muted);display:grid;place-items:center;
  height:48px;width:48px;margin-right:-14px;border-radius:var(--radius-sm);
}
.footnote{font-size:12px;line-height:1.4;color:var(--muted);margin:0}
.cpf-feedback{
  display:flex;align-items:center;gap:8px;min-height:36px;margin:0;
  color:var(--muted);font-size:12px;line-height:1.4;
}
.cpf-feedback.is-good{color:var(--soft)}
.cpf-note{display:flex;align-items:flex-start;gap:8px}
.cpf-note svg{margin-top:1px}
.progress{display:flex;gap:8px;margin:24px 0 0}
.progress span{width:33.333%;height:3px;background:var(--border);border-radius:8px}
.progress span.on{background:var(--soft)}
.progress+.heading{margin-top:24px}
.photo-control{
  display:flex;align-items:center;gap:12px;padding:12px;background:var(--raised);
  border:1px solid var(--border);border-radius:var(--radius-md);position:relative;cursor:pointer;
  min-height:68px;
}
.photo-circle{
  width:40px;height:40px;border-radius:50%;background:var(--control);
  display:grid;place-items:center;overflow:hidden;color:var(--muted);
}
.photo-circle img{width:100%;height:100%;object-fit:cover}
.photo-info{flex:1;min-width:0;display:grid;gap:3px}
.photo-info strong{font-size:13px;font-weight:600}
.photo-info small{font-size:12px;color:var(--muted)}
.photo-control input{position:absolute;opacity:0;width:1px;height:1px;left:0;bottom:0}
.consent{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:12px;line-height:1.4}
.consent input{margin:2px 0 0;accent-color:#9FA5AD;width:20px;height:20px;flex-shrink:0}
.consent strong{color:var(--text)}
.profile-summary{display:flex;align-items:center;flex-direction:column;text-align:center;gap:8px;padding:8px 0 24px}
.profile-summary strong{font-size:20px;font-weight:650;letter-spacing:-.035em;margin-top:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-summary small{color:var(--muted);font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.connected{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--soft);margin-top:8px;
  background:var(--raised);border:1px solid var(--border);border-radius:100px;padding:7px 12px;
}
.info-line{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-top:1px solid var(--border);padding:16px 0;color:var(--muted);font-size:13px;
}
.info-line strong{color:var(--text);font-weight:600;text-align:right}
.debug-lines{border-top:1px solid var(--border)}
.debug-line{display:grid;gap:4px;border-bottom:1px solid var(--border);padding:16px 0}
.debug-line span{font-size:12px;color:var(--muted)}
.debug-line strong{font-size:14px;font-weight:600}
.debug-line code{font:500 12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;color:var(--text)}
.screen-debug .footnote{margin-top:20px}
.debug-buttons{display:grid;gap:8px;margin-top:auto;padding-top:20px}
.mini-button{
  border:1px solid var(--border);background:var(--raised);color:var(--text);
  border-radius:var(--radius-md);min-height:48px;display:flex;align-items:center;
  justify-content:center;gap:8px;font-size:13px;font-weight:600;
}
.mini-button.danger{color:var(--danger)}
.retry{margin-top:24px}
#toast{
  position:fixed;z-index:100;left:50%;bottom:calc(60px + env(safe-area-inset-bottom));
  transform:translate(-50%,10px);background:var(--control);border:1px solid #51555A;
  border-radius:var(--radius-sm);color:var(--text);padding:12px 16px;
  font-size:13px;line-height:1.4;max-width:min(90vw,440px);width:max-content;
  opacity:0;pointer-events:none;transition:.2s;box-shadow:0 12px 40px #0008;
}
#toast.shown{opacity:1;transform:translate(-50%,0)}
.loading{display:grid;place-items:center;min-height:200px;font-size:13px;color:var(--muted)}
.spinner{
  width:25px;height:25px;border:2px solid #45484C;border-top-color:var(--soft);
  border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-height:720px){
  .auth-card{padding-top:calc(12px + env(safe-area-inset-top))}
  .heading{margin-top:20px}
  .topline+.heading{margin-top:16px}
  .heading p{margin-top:6px}
  .screen-body{margin-top:20px}
  .bottom-actions,.bottom-actions.inside{padding-top:12px}
  .form{gap:12px}
  .field-inner{height:48px}
  .photo-control{min-height:56px;padding:8px 12px}
  .progress{margin-top:12px}
  .progress+.heading{margin-top:14px}
  .debug-line{padding:10px 0}
  .screen-debug .footnote{margin-top:12px}
  .debug-buttons{gap:5px;padding-top:8px}
}
@media (max-height:610px){
  .heading{margin-top:16px}
  .screen-body{margin-top:16px}
  .form{gap:8px}
  .progress+.heading{margin-top:12px}
  .foot{min-height:44px}
  .heading p{font-size:12px}
  .field-label{font-size:12px}
  .field-inner{height:44px}
  .field-inner input{font-size:15px}
  .btn{min-height:48px}
  .photo-control{min-height:52px}
}
@media (min-width:600px){
  .shell{max-width:500px;padding:32px 0}
  .auth-card{
    border:1px solid var(--border);border-radius:var(--radius-xl);
    background:var(--surface);padding:32px;max-height:680px;flex:0 1 680px;
  }
  .foot{padding:0 12px}
}
@media (max-height:520px){
  /* Teclado virtual, paisagem e ampliação do texto exigem acesso ao conteúdo. */
  html,body{height:auto;min-height:100%;overflow-y:auto}
  #app{height:auto;min-height:100dvh}
  .shell{height:auto;min-height:100dvh}
  .auth-card{flex:1;min-height:470px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;transition-duration:0s!important}
}

/* Rande ID micro-motion: opacity/vertical travel only, never skew or rotation of screens. */
.brand{font-size:20px;letter-spacing:-.055em;font-weight:720;line-height:1.2}
.topline .brand{font-size:18px}
.brand-accent{font-weight:550;color:var(--muted);letter-spacing:-.035em}
.topline{gap:8px}
.screen-head{
  animation:screen-in 260ms cubic-bezier(.2,.75,.25,1) both;
}
.screen-body{
  animation:screen-in 320ms cubic-bezier(.2,.75,.25,1) both;
}
.bottom-actions{
  animation:actions-in 300ms cubic-bezier(.2,.75,.25,1) both;
}
.account-list,.photo-control{
  animation:surface-in 300ms cubic-bezier(.2,.75,.25,1) both;
}
@keyframes screen-in{
  from{opacity:0;transform:translate3d(0,7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes actions-in{
  from{opacity:0;transform:translate3d(0,5px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes surface-in{
  from{opacity:.35;filter:brightness(.85)}
  to{opacity:1;filter:brightness(1)}
}
@keyframes dot-flare{
  0%{opacity:.5;transform:scale(.93)}
  55%{opacity:1;transform:scale(1.03)}
  100%{opacity:.5;transform:scale(.93)}
}
.btn,.mini-button,.list-action,.account-row,.foot-link,.show-password,.back,.text-button{
  transition:background-color .17s ease,color .17s ease,border-color .17s ease,box-shadow .17s ease,transform .16s cubic-bezier(.2,.75,.3,1),opacity .17s ease;
}
.btn{position:relative}
.btn:active,.mini-button:active{transform:scale(.976)}
.account-row:active,.list-action:active{background:var(--raised);transform:scale(.996)}
.foot-link:active,.show-password:active,.back:active{background:var(--raised);transform:scale(.965)}
.btn svg,.list-action svg,.account-row svg,.mini-button svg{
  transition:transform .18s cubic-bezier(.2,.75,.3,1),opacity .18s ease;
}
@media (hover:hover){
  .btn:hover svg:not(.inline-spinner){transform:translateX(2px)}
  .account-row:hover>svg:last-child,.list-action:hover>svg:last-child{transform:translateX(3px)}
  .show-password:hover,.foot-link:hover{color:var(--text)}
}
.btn.is-working{cursor:progress}
.inline-spinner{
  display:inline-block;flex-shrink:0;
  width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:loading-spin .7s linear infinite;opacity:.75;
}
.account-row .inline-spinner{margin-left:auto}
@keyframes loading-spin{to{transform:rotate(360deg)}}
.cpf-feedback[hidden]{display:none}
.cpf-feedback.is-loading{color:var(--muted)}
.cpf-feedback.is-good svg{animation:dot-flare 420ms ease-out 1}
.password-feedback:empty{display:none}
.password-feedback:not(:empty){font-size:11px;line-height:1.4;color:var(--muted);margin-top:-9px}
.field-inner.locked{background:#191B1D;border-color:#34373C}
.field-inner.locked input{color:var(--muted);cursor:default}
.locked-note{display:flex;align-items:flex-start;gap:8px}
.locked-note svg{flex-shrink:0}
.select-inner{position:relative}
.select-inner select{
  font:inherit;font-size:16px;flex:1;min-width:0;width:100%;height:100%;
  color:var(--text);border:0;outline:none;appearance:none;-webkit-appearance:none;
  background:transparent;cursor:pointer;
}
.select-inner select option{background:var(--surface);color:var(--text)}
.select-inner>svg:last-child{transform:rotate(90deg);color:var(--dim);pointer-events:none}
.field-inner input:read-only{user-select:none}
.progress span.on{animation:surface-in .3s ease-out both}
.photo-control:active{background:var(--control-hover);transform:scale(.993)}
.consent input{transition:accent-color .18s ease}
@media (max-height:720px){
  .form{gap:10px}
  .password-feedback:not(:empty){margin-top:-7px}
  .photo-control{min-height:50px;padding:7px 12px}
  .photo-circle{width:34px;height:34px}
  .screen-register[data-step="2"] .screen-body{margin-top:15px}
  .screen-register[data-step="2"] .progress{margin-top:9px}
  .screen-register[data-step="2"] .progress+.heading{margin-top:11px}
  .screen-register[data-step="2"] .heading p{margin-top:4px}
  .screen-register[data-step="2"] .form{gap:8px}
  .screen-register[data-step="2"] .field{gap:5px}
}
@media (max-height:610px){
  .screen-register[data-step="2"] .screen-body{margin-top:12px}
  .screen-register[data-step="2"] .form{gap:6px}
  .screen-register[data-step="2"] .photo-control{min-height:45px;padding:4px 10px}
  .screen-register[data-step="2"] .photo-circle{width:30px;height:30px}
  .screen-register[data-step="2"] .field-inner{height:41px}
  .screen-register[data-step="2"] .field-label{line-height:1.15}
  .screen-register[data-step="2"] .consent{font-size:11px;line-height:1.22}
  .screen-register[data-step="2"] .heading h1{font-size:25px}
  .screen-register[data-step="2"] .bottom-actions{padding-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .screen-head,.screen-body,.bottom-actions,.account-list,.photo-control,.progress span.on,.cpf-feedback.is-good svg,.inline-spinner{
    animation:none!important
  }
  .btn,.mini-button,.list-action,.account-row,.foot-link,.show-password,.back,.text-button,.btn svg,.list-action svg,.account-row svg{
    transition:none!important
  }
}

/* Stable entry: motion does not move anchored controls or distort form fields. */
.screen-body{animation:content-appear 205ms ease-out both}
.bottom-actions{animation:action-appear 220ms ease-out both}
.screen-head{animation:headline-appear 245ms cubic-bezier(.2,.75,.25,1) both}
@keyframes content-appear{from{opacity:.82}to{opacity:1}}
@keyframes action-appear{from{opacity:.86}to{opacity:1}}
@keyframes headline-appear{
  from{opacity:.86;transform:translate3d(0,4px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .screen-head,.screen-body,.bottom-actions{animation:none!important}
}
.account-gender-line{min-height:54px}
.account-gender-line label{font-size:13px;color:var(--muted)}
.account-gender-picker{position:relative;display:flex;align-items:center;max-width:60%;color:var(--text)}
.account-gender-picker select{
  color:var(--text);font:600 13px Inter,-apple-system,sans-serif;
  border:1px solid var(--border);border-radius:10px;
  background:var(--raised);appearance:none;-webkit-appearance:none;
  padding:9px 30px 9px 11px;min-height:40px;min-width:0;width:100%;
  text-overflow:ellipsis;outline:none;cursor:pointer;
}
.account-gender-picker select option{background:var(--surface);color:var(--text)}
.account-gender-picker svg{position:absolute;right:9px;pointer-events:none;transform:rotate(90deg);color:var(--muted)}
.account-gender-picker select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}


/* Splash — viewport-centred independently from the auth layout. */
#app.is-booting{position:fixed;inset:0;width:100%;height:100dvh}
.boot-screen{
  position:absolute;inset:0;width:100%;height:100vh;height:100dvh;
  display:grid;place-items:center;background:var(--bg);
  padding:0 20px;
}
.boot-center{
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:19px;width:100%;
  animation:boot-arrive 420ms cubic-bezier(.2,.7,.25,1) both;
}
.boot-brand{display:flex;justify-content:center;align-items:baseline;gap:5px;font-size:25px;font-weight:700;letter-spacing:-.055em}
.boot-brand .brand-accent{margin:0;font-size:25px}
.boot-indicator{
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:var(--muted);font-size:12px;letter-spacing:.012em;
}
.boot-spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid var(--border);border-top-color:var(--soft);
  animation:loading-spin .8s linear infinite;
}
@keyframes boot-arrive{
  from{opacity:0;transform:translate3d(0,12px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* All page/step entrances use a straight horizontal slide with progressive fade. */
.shell{--page-enter-x:14px}
.shell.enter-backward{--page-enter-x:-14px}
.shell.enter-forward{--page-enter-x:14px}
@keyframes rande-page-enter{
  from{opacity:0;transform:translate3d(var(--page-enter-x),0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes rande-item-enter{
  from{opacity:0;transform:translate3d(0,7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes rande-footer-enter{
  from{opacity:0}to{opacity:1}
}
.auth-card .screen-head{
  animation:rande-page-enter 325ms cubic-bezier(.22,.75,.25,1) 0ms both;
}
.auth-card .screen-body{
  animation:rande-page-enter 360ms cubic-bezier(.22,.75,.25,1) 48ms both;
}
.auth-card .bottom-actions{
  animation:rande-item-enter 310ms cubic-bezier(.22,.75,.25,1) 115ms both;
}
.shell>.foot{
  animation:rande-footer-enter 350ms ease-out 165ms both;
}
.auth-card .form>.field,.auth-card .form>.photo-control,.auth-card .form>.consent,
.auth-card .form>.cpf-feedback,.auth-card .account-list,.auth-card .empty,
.auth-card .list-action,.auth-card .profile-summary,.auth-card .info-line,
.auth-card .progress,.auth-card .debug-lines{
  animation:rande-item-enter 310ms cubic-bezier(.22,.75,.25,1) 65ms both;
}
.auth-card .form>.field:nth-of-type(2),.auth-card .info-line:nth-of-type(2){animation-delay:95ms}
.auth-card .form>.field:nth-of-type(3),.auth-card .photo-control,.auth-card .info-line:nth-of-type(3){animation-delay:120ms}
.auth-card .form>.consent,.auth-card .info-line:nth-of-type(4){animation-delay:150ms}
.account-list .account-row{animation:rande-item-enter 285ms cubic-bezier(.22,.75,.25,1) both}
.account-list .account-row:nth-child(2){animation-delay:45ms}
.account-list .account-row:nth-child(3){animation-delay:85ms}
.account-list .account-row:nth-child(n+4){animation-delay:110ms}
@media (prefers-reduced-motion:reduce){
  .boot-center,.boot-spinner,
  .auth-card .screen-head,.auth-card .screen-body,.auth-card .bottom-actions,
  .shell>.foot,.auth-card .form>.field,.auth-card .form>.photo-control,
  .auth-card .form>.consent,.auth-card .form>.cpf-feedback,
  .auth-card .account-list,.auth-card .empty,.auth-card .list-action,
  .auth-card .profile-summary,.auth-card .info-line,.auth-card .progress,
  .auth-card .debug-lines,.account-list .account-row{animation:none!important}
}


/* Foto de perfil — escolha explícita entre câmera e galeria */
button.photo-control{
  width:100%;font:inherit;color:var(--text);text-align:left;
  -webkit-tap-highlight-color:transparent;
}
button.photo-control:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button.photo-control .photo-info{pointer-events:none}
.photo-backdrop{
  position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(0,0,0,.7);
  animation:photo-fade-in 190ms ease-out both;
  -webkit-tap-highlight-color:transparent;
}
.photo-sheet{
  width:100%;max-width:480px;max-height:80dvh;overflow-y:auto;
  border:1px solid #35383D;border-bottom:0;
  background:var(--surface);border-radius:24px 24px 0 0;
  padding:10px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -24px 80px #0008;
  animation:photo-slide-up 260ms cubic-bezier(.2,.75,.25,1) both;
}
.photo-grab{width:38px;height:4px;border-radius:6px;background:#51555C;margin:0 auto 18px}
.photo-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.photo-sheet-head h2{font-size:18px;font-weight:650;letter-spacing:-.035em;margin:0}
.photo-close{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:12px;color:var(--muted);background:var(--raised)}
.photo-choices{display:grid;gap:8px}
.photo-choice{
  width:100%;display:flex;align-items:center;gap:13px;text-align:left;
  min-height:59px;padding:14px 16px;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--raised);
  color:var(--text);font:600 14px Inter,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s ease,transform .16s ease;
}
.photo-choice:active{transform:scale(.985);background:var(--control)}
.photo-choice span{flex:1}
.photo-choice>svg:first-child{color:var(--muted)}
.photo-choice>svg:last-child{color:var(--dim)}
.photo-choice.photo-remove{color:var(--danger)}
.photo-choice.photo-remove>svg:first-child{color:var(--danger)}
.photo-hidden-input{position:fixed!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
@keyframes photo-fade-in{from{opacity:0}to{opacity:1}}
@keyframes photo-slide-up{from{opacity:.7;transform:translate3d(0,18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){
  .photo-backdrop,.photo-sheet{animation:none!important}
  .photo-choice{transition:none!important}
}

/* OAuth consent, permissions and service registration | RDS monochrome */
.oauth-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;gap:14px;padding:0 2px 16px;scrollbar-width:thin}
/* Filhos da coluna nao podem encolher: a lista deve rolar, nunca recortar permissoes. */
.oauth-scroll>*{flex-shrink:0}
.oauth-scroll .section-label{margin:0}
.oauth-selected{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:10px}
.oauth-account{display:flex;gap:12px;align-items:center;min-width:0}
.oauth-account>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.oauth-account strong{font-size:14px}
.oauth-account small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.oauth-selected .text-button{align-self:flex-start;min-height:34px;color:var(--muted);padding:0}
.oauth-permissions{display:grid;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);overflow:hidden}
.oauth-permission{display:flex;gap:12px;align-items:flex-start;padding:13px 12px;border-bottom:1px solid var(--border)}
.oauth-permission:last-child{border-bottom:0}
.oauth-permission svg{color:var(--muted);margin-top:3px}
.oauth-permission span{display:flex;flex-direction:column;gap:4px;min-width:0}
.oauth-permission strong{font-size:13px;font-weight:600}
.oauth-permission small{font-size:11px;color:var(--dim);overflow-wrap:anywhere}
.oauth-actions{display:flex;gap:10px;flex-shrink:0}
.oauth-actions .btn{flex:1;min-width:0}
.services-panel{margin-top:22px}
.service-section{margin-top:16px!important}
.service-item{display:flex;flex-direction:column;gap:7px;border:1px solid var(--border);padding:12px;border-radius:var(--radius-sm);background:var(--surface)}
.service-item strong{font-size:13px}
.service-item small{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.service-item code,.service-created code{font-size:11px;overflow-wrap:anywhere;color:var(--soft)}
.service-item .mini-button{align-self:flex-start}
.service-form{display:flex;flex-direction:column;gap:14px;padding-bottom:20px}
.service-form .field-inner input{font-size:13px}
.scope-choices{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface)}
.scope-choices label{display:flex;align-items:flex-start;gap:11px;padding:11px;border-bottom:1px solid var(--border)}
.scope-choices label:last-child{border-bottom:0}
.scope-choices input{width:17px;height:17px;flex-shrink:0;accent-color:var(--soft)}
.scope-choices span{display:flex;flex-direction:column;gap:3px}
.scope-choices strong{font-size:12px;font-weight:500}
.scope-choices small{font-size:10px;color:var(--dim)}
.service-created{display:flex;flex-direction:column;gap:7px;border:1px solid var(--muted);border-radius:var(--radius-sm);padding:12px}
.screen-services .heading,.screen-consent .heading{margin-top:20px}
.screen-consent .bottom-actions{margin-top:0;padding-top:14px}
@media(max-height:520px){
  .auth-card.screen-consent{min-height:0}
  .screen-consent .oauth-scroll{flex:none;max-height:none;overflow-y:visible;touch-action:auto}
  .screen-consent .oauth-actions{position:sticky;bottom:0;background:var(--bg);padding-bottom:calc(10px + env(safe-area-inset-bottom));z-index:1}
}
.screen-register[data-step="1"] .screen-body{margin-top:20px}
@media(max-height:680px){
 .screen-register[data-step="1"] .form{gap:10px}
 .screen-register[data-step="1"] .field-inner{height:42px}
 .screen-register[data-step="1"] .field{gap:4px}
 .screen-register[data-step="1"] .heading{margin-top:14px}
}

.docs-link{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:12px;padding:13px 14px;color:var(--soft);font-size:12px;font-weight:650;text-decoration:none;margin:8px 0 12px;background:var(--surface)}
.docs-link:hover{background:var(--raised)}

/* Rande ID · verificação em telas independentes · RDS 1.0 */
.screen-register[data-step="3"] .screen-body,
.screen-register[data-step="4"] .screen-body,
.screen-register[data-step="5"] .screen-body{gap:14px;margin-top:24px}
.screen-register[data-step="3"] .heading,
.screen-register[data-step="4"] .heading,
.screen-register[data-step="5"] .heading{margin-top:23px}
.progress span{flex:1;width:auto;min-width:0}
.otp-hero{width:92px;height:92px;position:relative;display:grid;place-items:center;margin:5px auto 7px;background:var(--raised);border:1px solid var(--border);border-radius:28px;color:var(--soft);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.otp-hero-check{position:absolute;bottom:-6px;right:-6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--bg);border:3px solid var(--bg)}
.otp-hero-small{width:88px;height:88px;margin:20px auto 22px}
.otp-section-title{font-size:14px;letter-spacing:-.015em;font-weight:700;margin:0}
.otp-channel{display:flex;align-items:center;gap:12px;padding:14px 12px;background:var(--surface);border:1px solid var(--border);border-radius:16px;min-width:0}
.otp-channel-icon{width:42px;height:42px;border:1px solid var(--border);background:var(--raised);border-radius:12px;color:var(--soft);display:grid;place-items:center;flex:none}
.otp-channel-detail{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}
.otp-channel-detail strong{font-size:13px;font-weight:700}
.otp-channel-detail small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.otp-channel-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#B9CEC2;font-weight:650}
.otp-channel.has-error .otp-channel-status{color:#F0A7A7}
.otp-channel .otp-error,.otp-error{font-size:12px;color:#F0A7A7;line-height:1.4}
.otp-retry{border:1px solid var(--border);border-radius:10px;background:var(--raised);color:var(--text);font-size:11px;font-weight:700;padding:10px;max-width:110px}
.otp-note{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:12px;line-height:1.5;margin:4px 0 0}
.otp-note svg{margin-top:1px}
.otp-assistance{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.otp-assistance .text-button{padding:6px;min-height:40px}
.screen-register[data-step="4"] .field-inner input,
.screen-register[data-step="5"] .field-inner input{letter-spacing:.18em;font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}
@media(max-height:730px){
 .screen-register[data-step="3"] .otp-hero{width:64px;height:64px;margin:0 auto}
 .screen-register[data-step="3"] .otp-channel{padding:10px}
 .screen-register[data-step="3"] .screen-body{gap:9px;margin-top:16px}
 .screen-register[data-step="4"] .otp-hero,.screen-register[data-step="5"] .otp-hero{margin:0 auto 4px;width:70px;height:70px}
}
@media(max-height:580px){
 .screen-register[data-step="3"] .screen-body,.screen-register[data-step="4"] .screen-body,.screen-register[data-step="5"] .screen-body{overflow-y:auto;padding-bottom:16px}
 .screen-register[data-step="3"] .bottom-actions,.screen-register[data-step="4"] .bottom-actions,.screen-register[data-step="5"] .bottom-actions{position:sticky;bottom:0;background:var(--bg);padding-top:10px}
}

/* OTP: WhatsApp/e-mail reconhecíveis e código logo após a solicitação. */
.rande-mark{display:inline-block;flex:none;vertical-align:middle;background:var(--soft);-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-position:center;mask-repeat:no-repeat;mask-size:contain}
.rande-mark-whatsapp{background:#25D366;-webkit-mask-image:url('/whatsapp.svg');mask-image:url('/whatsapp.svg')}
.rande-mark-mail{background:var(--soft);-webkit-mask-image:url('/email.svg');mask-image:url('/email.svg')}
.otp-hero .rande-mark{width:38px;height:38px}
.otp-delivery-state{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:12px 14px;font-size:12px;line-height:1.5;color:var(--muted);margin:0}
.otp-delivery-state.accepted svg{color:#A8CCB6}
.otp-delivery-state.failed{border-color:#78444B;color:#F0A7A7}
.screen-register .screen-body.form,.screen-login .screen-body.form,.screen-services .screen-body.form{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 2px 12px;scrollbar-width:thin}
.rande-field-help{margin:1px 0 0}
.field>.rande-field-help{margin-top:0}
@media(max-height:700px){.screen-register .screen-body.form{margin-top:15px;gap:11px}.screen-register .bottom-actions.inside{padding-top:12px}}

/* Opções de cadastro, login federado e identificador unificado. */
.signup-options{gap:12px}
.signup-option{display:flex;align-items:center;gap:14px;width:100%;padding:18px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);text-align:left;min-height:78px}
.signup-option:hover,.google-button:hover{background:var(--raised)}
.signup-option>span:nth-child(2){display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}
.signup-option strong{font-weight:650;font-size:14px}
.signup-option small{font-size:12px;color:var(--muted);line-height:1.4}
.signup-option>svg:last-child{color:var(--muted)}
.google-g{display:inline-grid;place-items:center;flex:none;width:23px;height:23px}
.google-g svg{display:block;width:100%;height:100%}
.google-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:650}
.google-divider{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:12px;margin:16px 0}
.google-divider:before,.google-divider:after{content:'';height:1px;background:var(--border);flex:1}
.privacy-accept{display:flex;align-items:flex-start;gap:12px;font-size:12px;color:var(--muted);line-height:1.45;margin:8px 0}
.privacy-accept input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--soft)}
@media(max-height:640px){.signup-options{overflow-y:auto}.google-divider{margin:9px 0}}

.identity-kind{font-size:11px;color:var(--dim);margin:0 0 4px 2px;min-height:16px}

/* Login acessível: um único fluxo, alvos amplos, escolhas explícitas e leitura confortável. */
.screen-login .topline{min-height:44px}
.screen-login .heading{margin-top:26px}
.screen-login .heading h1{font-size:30px;line-height:1.2}
.screen-login .heading p{font-size:16px;line-height:1.5}
.screen-login .login-form{margin-top:22px;gap:12px}
.screen-login .login-fast{flex:none}
.screen-login .google-button{min-height:56px;font-size:16px;border-radius:14px}
.screen-login .google-divider{margin:0 0 1px;font-size:13px;color:var(--muted)}
.screen-login .login-method-title{font-size:15px;color:var(--text);font-weight:650;margin:0}
.screen-login .login-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:5px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.screen-login .login-methods button{min-height:48px;padding:10px 3px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font-size:15px;font-weight:650}
.screen-login .login-methods button[aria-pressed="true"]{background:var(--control);color:var(--text);border-color:#565C64}
.screen-login .login-methods button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.screen-login .field{gap:6px}
.screen-login .field-label{font-size:15px;font-weight:650}
.screen-login .field-inner{height:58px;border-radius:14px}
.screen-login .field-inner input{font-size:17px}
.screen-login .login-hint{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.screen-login .login-password-toggle{display:grid;place-items:center;min-height:48px;padding:0 8px;border:0;background:transparent;color:var(--soft);font-size:14px;font-weight:700;border-radius:10px}
.screen-login .login-password-toggle:focus-visible{outline:2px solid var(--text);outline-offset:1px}
.screen-login .login-actions{margin-top:3px;padding-top:0}
.screen-login .login-actions .btn{width:100%;min-height:56px;font-size:16px}
.screen-login .login-signup{display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap;margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.screen-login .login-signup .text-button{font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:8px;min-height:44px}
.auth-inline-error:not([hidden]){display:block;margin:0;padding:12px 14px;border:1px solid #9B545E;border-radius:12px;background:rgba(155,84,94,.12);color:#FFE5E8;font-size:14px;line-height:1.55}
.screen-mfa .heading p{font-size:16px;line-height:1.5}
.screen-mfa .field-label{font-size:15px}
.screen-mfa .field-inner{min-height:56px}
.screen-mfa .otp-note{font-size:14px;line-height:1.55}
.screen-choose .account-row{min-height:74px}
.screen-choose .account-meta strong{font-size:15px}
.screen-choose .list-action{min-height:56px;font-size:15px}
@media(max-height:720px){
  .screen-login .heading{margin-top:14px}
  .screen-login .login-form{margin-top:12px;gap:9px}
  .screen-login .google-button{min-height:50px}
  .screen-login .login-methods button{min-height:44px}
  .screen-login .field-inner{height:52px}
  .screen-login .login-actions .btn{min-height:52px}
  .screen-login .google-divider{margin:0}
}
@media(min-width:600px){
  .screen-login.auth-card{max-height:740px;flex-basis:740px}
}

/* A ação de entrada permanece alcançável em celulares baixos e com zoom. */
.screen-login .login-actions{position:sticky;bottom:0;z-index:3;flex:none;padding:9px 0 4px;background:var(--bg)}
@media(min-width:600px){.screen-login .login-actions{background:var(--surface)}}


/* 2026-10-28 — Autenticacao em etapas: cada tela cabe integralmente no celular. */
.screen-login .screen-body.form,
.screen-register .screen-body.form,
.screen-mfa .screen-body.form{
  overflow:visible;overscroll-behavior:auto;padding:0;
}
.screen-login.auth-card,.screen-register.auth-card,.screen-signup-choice.auth-card,.screen-mfa.auth-card{
  padding-top:calc(12px + env(safe-area-inset-top));
  padding-bottom:4px;
}
.screen-login .topline,.screen-register .topline,.screen-mfa .topline,.screen-signup-choice .topline{min-height:36px}
.screen-login .back,.screen-register .back,.screen-mfa .back,.screen-signup-choice .back{height:40px;width:40px}
.screen-login .heading,.screen-register .heading,.screen-mfa .heading,.screen-signup-choice .heading{margin-top:10px}
.screen-login .heading h1,.screen-register .heading h1,.screen-mfa .heading h1,.screen-signup-choice .heading h1{font-size:clamp(21px,5.5vw,26px);line-height:1.18}
.screen-login .heading p,.screen-register .heading p,.screen-mfa .heading p,.screen-signup-choice .heading p{font-size:12px;line-height:1.35;margin-top:5px}
.screen-login .screen-body,.screen-register .screen-body,.screen-mfa .screen-body,.screen-signup-choice .screen-body{margin-top:14px}
.screen-login .form,.screen-register .form,.screen-mfa .form{gap:10px}
.screen-login .field,.screen-register .field,.screen-mfa .field{gap:5px}
.screen-login .field-label,.screen-register .field-label,.screen-mfa .field-label{font-size:12px}
.screen-login .field-inner,.screen-register .field-inner,.screen-mfa .field-inner{height:48px;border-radius:12px}
.screen-login .field-inner input,.screen-register .field-inner input,.screen-mfa .field-inner input{font-size:16px}
.screen-login .login-form{margin-top:14px;gap:12px}
.screen-login .google-button,.screen-register .google-button{min-height:46px;font-size:14px}
.screen-login .google-divider,.screen-register .google-divider{margin:0;font-size:11px}
.screen-login .login-methods{padding:3px;gap:4px;border-radius:12px}
.screen-login .login-methods button{min-height:44px;font-size:13px;padding:8px 2px}
.screen-login .login-actions{position:static;z-index:auto;margin-top:auto;padding:8px 0 0;background:transparent}
.screen-login .login-actions .btn,.screen-register .bottom-actions .btn,.screen-mfa .bottom-actions .btn{min-height:48px;font-size:14px}
.screen-login .login-signup{font-size:12px;gap:1px}
.screen-login .login-signup .text-button{font-size:13px;min-height:40px;padding:7px}
.screen-register .progress{margin:12px 0 0;gap:5px}
.screen-register .progress span{height:3px}
.screen-register .progress+.heading{margin-top:10px}
.screen-register .bottom-actions.inside,.screen-mfa .bottom-actions.inside{padding-top:10px}
.screen-register .form .footnote,.screen-register .otp-note{font-size:11px;line-height:1.35}
.screen-register .otp-delivery-state{padding:9px 10px;font-size:11px;line-height:1.35}
.screen-register .otp-assistance{font-size:11px}
.screen-register .photo-control{min-height:62px;padding:10px}
.screen-mfa .otp-hero-small{width:48px;height:48px;margin:3px auto}
.screen-mfa .heading p,.screen-mfa .otp-note{font-size:12px;line-height:1.4}
.screen-signup-choice .signup-options{gap:10px}
.screen-signup-choice .signup-option{min-height:64px;padding:12px}
.shell:has(.screen-login)>.foot,.shell:has(.screen-register)>.foot,
.shell:has(.screen-mfa)>.foot,.shell:has(.screen-signup-choice)>.foot{min-height:30px;font-size:11px}
.shell:has(.screen-login)>.foot .foot-link,.shell:has(.screen-register)>.foot .foot-link,
.shell:has(.screen-mfa)>.foot .foot-link,.shell:has(.screen-signup-choice)>.foot .foot-link{min-height:30px;padding:4px}
.login-identity-summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;
  padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);min-width:0}
.login-identity-summary span{grid-column:1;color:var(--muted);font-size:11px}
.login-identity-summary strong{grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:650}
.login-identity-summary button{grid-column:2;grid-row:1/3;border:0;background:transparent;color:var(--soft);padding:9px 2px;font-size:12px;font-weight:650}
.login-back-link{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:0;
  background:transparent;color:var(--muted);font-size:12px;font-weight:600}
@media(max-height:640px){
  .screen-login.auth-card,.screen-register.auth-card,.screen-signup-choice.auth-card,.screen-mfa.auth-card{padding-top:calc(7px + env(safe-area-inset-top))}
  .screen-login .heading,.screen-register .heading,.screen-mfa .heading{margin-top:6px}
  .screen-login .screen-body,.screen-register .screen-body,.screen-mfa .screen-body{margin-top:9px}
  .screen-register .progress{margin-top:7px}
  .screen-register .progress+.heading{margin-top:6px}
  .screen-login .form,.screen-register .form,.screen-mfa .form{gap:8px}
  .screen-login .field-inner,.screen-register .field-inner,.screen-mfa .field-inner{height:44px}
  .screen-login .login-form{margin-top:9px;gap:9px}
  .screen-login .google-button{min-height:44px}
  .screen-register .bottom-actions.inside{padding-top:6px}
}


/* Full-screen stacked horizontal transitions. The incoming screen covers the outgoing screen. */
#app:not(.is-booting){position:relative;isolation:isolate;overflow:hidden}
#app .shell.is-slide-under,#app .shell.is-slide-in{
  position:fixed;inset:0;width:100%;max-width:480px;height:100dvh;
  margin:0 auto;background:var(--bg);will-change:transform;overflow:hidden
}
#app .shell.is-slide-under{z-index:1;pointer-events:none}
#app .shell.is-slide-in{z-index:2;animation:auth-full-from-right .36s cubic-bezier(.2,.82,.22,1) both}
#app .shell.is-slide-in.slide-backward{animation-name:auth-full-from-left}
@keyframes auth-full-from-right{from{transform:translate3d(100vw,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes auth-full-from-left{from{transform:translate3d(-100vw,0,0)}to{transform:translate3d(0,0,0)}}
#app .shell.is-slide-in .screen-head,#app .shell.is-slide-in .screen-body,
#app .shell.is-slide-in .bottom-actions,#app .shell.is-slide-in .foot,
#app .shell.is-slide-in .auth-card .form>.field,
#app .shell.is-slide-in .auth-card .form>.photo-control,
#app .shell.is-slide-in .auth-card .form>.cpf-feedback,
#app .shell.is-slide-in .auth-card .progress,#app .shell.is-slide-in .auth-card .account-list,
#app .shell.is-slide-in .account-list .account-row{animation:none!important}
@media(min-width:600px){#app .shell.is-slide-under,#app .shell.is-slide-in{max-width:500px}}
@media(prefers-reduced-motion:reduce){
 #app .shell.is-slide-in{animation:none!important;will-change:auto}
}

/* Consistent centered composition, including splash, login and registration. */
#app.is-booting .boot-screen{display:flex;justify-content:center;align-items:center;min-height:100dvh;min-height:100svh}
.boot-center{width:min(100%,310px);margin:auto;text-align:center;align-items:center;justify-content:center;gap:16px}
.boot-brand{margin:0 auto;justify-content:center}
.boot-indicator{justify-content:center;width:100%;margin:0 auto}
.auth-card.screen-login,.auth-card.screen-register,.auth-card.screen-signup-choice,.auth-card.screen-mfa{
  justify-content:center;
}
.screen-login .screen-head,.screen-register .screen-head,.screen-signup-choice .screen-head,.screen-mfa .screen-head{flex:0 0 auto}
.screen-login .topline,.screen-register .topline,.screen-signup-choice .topline,.screen-mfa .topline{
  position:relative;justify-content:center;min-height:34px
}
.screen-login .topline>.back,.screen-register .topline>.back,.screen-signup-choice .topline>.back,.screen-mfa .topline>.back{
  position:absolute;left:0;top:50%;margin:0;transform:translateY(-50%)
}
.screen-login .heading,.screen-register .heading,.screen-signup-choice .heading,.screen-mfa .heading{text-align:center}
.screen-login .screen-body.form,.screen-register .screen-body.form,.screen-mfa .screen-body.form,
.screen-signup-choice .screen-body{flex:0 0 auto;min-height:0;margin-top:13px}
.screen-login .login-form{flex:0 0 auto;margin-top:13px;gap:9px}
.screen-login .bottom-actions.inside,.screen-register .bottom-actions.inside,.screen-mfa .bottom-actions.inside{
  margin-top:7px;padding-top:0;justify-content:center
}
.screen-login .login-actions{margin-top:7px;padding:0}
.screen-login .login-signup{margin-top:1px;justify-content:center}
.screen-login .field-label,.screen-register .field-label,.screen-mfa .field-label{text-align:left}
.screen-register .form,.screen-mfa .form{flex:0 0 auto;gap:10px}
.screen-register .progress{justify-content:center}
.screen-register .bottom-actions.inside{width:100%;gap:7px}
.screen-register .bottom-actions .text-button{min-width:62px}
.screen-signup-choice .signup-options{align-items:center}
.screen-signup-choice .signup-option{width:100%}
.screen-register .otp-assistance{justify-content:center}
.screen-register .footnote,.screen-register .otp-note{text-align:center;justify-content:center}
.screen-register .photo-control{width:100%}
.screen-register .cpf-feedback{justify-content:center}
.screen-mfa .otp-note{text-align:center;justify-content:center}
.screen-mfa .form>.text-button{align-self:center}

/* Keep the full login (identifier, password and Google) on one view even on short phones. */
.screen-login .heading{margin-top:8px}
.screen-login .heading h1{font-size:clamp(20px,5vw,25px)}
.screen-login .heading p{margin-top:3px;font-size:12px}
.screen-login .login-form{gap:8px}
.screen-login .login-methods{padding:3px}
.screen-login .login-methods button{min-height:42px}
.screen-login .field{gap:3px}
.screen-login .field-inner{height:44px}
.screen-login .google-button{min-height:44px}
.screen-login .google-divider{font-size:11px;margin:0}
.screen-login .login-actions .btn{min-height:46px}
.screen-login .login-signup .text-button{min-height:38px}
.screen-login .auth-inline-error:not([hidden]){padding:7px 9px;font-size:11px;line-height:1.25}
@media(max-height:620px){
 .auth-card.screen-login,.auth-card.screen-register,.auth-card.screen-signup-choice,.auth-card.screen-mfa{padding-top:calc(5px + env(safe-area-inset-top))}
 .screen-login .topline{min-height:29px}
 .screen-login .heading{margin-top:5px}
 .screen-login .heading p{margin-top:2px}
 .screen-login .login-form{gap:6px;margin-top:8px}
 .screen-login .google-button{min-height:41px;padding:8px}
 .screen-login .login-methods button{min-height:39px}
 .screen-login .field-inner{height:40px}
 .screen-login .field-label{font-size:11px}
 .screen-login .login-actions{margin-top:3px}
 .screen-login .login-actions .btn{min-height:42px}
 .screen-login .login-signup .text-button{min-height:34px}
 .screen-register .form{gap:7px}
 .screen-register .field-inner{height:42px}
 .screen-register .bottom-actions .btn{min-height:44px}
}
@media(max-height:535px){
 .screen-login .heading p{display:none}
 .screen-login .login-form{gap:5px}
 .screen-login .google-button{min-height:38px}
 .screen-login .login-methods button{min-height:36px}
 .screen-login .field-inner{height:38px}
 .screen-login .field-inner input{font-size:15px}
 .screen-login .login-actions .btn{min-height:40px}
}

/* Individual account revocation and explicit permanent sign-out. */
.account-choice{display:flex;align-items:stretch;min-height:68px;border-bottom:1px solid var(--border)}
.account-choice:last-child{border-bottom:0}
.account-choice .account-row{flex:1;min-width:0;border:0}
.account-forget{flex:none;align-self:center;min-height:40px;margin-right:6px;padding:7px 9px;border:0;
  border-radius:10px;color:var(--muted);background:transparent;font-size:11px;font-weight:650}
.account-forget:active{background:var(--control);color:var(--text)}
.permanent-logout{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;
  margin:8px auto 2px;padding:7px 12px;border:1px solid var(--border);
  background:var(--surface);color:var(--soft);border-radius:12px;font-size:12px;font-weight:650}
.permanent-logout:active{background:var(--raised)}

/* Keep validation feedback within the smallest common mobile viewport. */
@media(max-height:600px){
 .screen-login .heading p{display:none}
 .screen-login .login-form{gap:5px}
 .screen-login .google-divider{font-size:10px;line-height:11px}
 .screen-login .login-signup{font-size:11px}
 .screen-login .login-signup .text-button{padding:3px;min-height:30px}
 .screen-login .heading{margin-top:3px}
}

/* Account management is allowed to scroll; do not let its flexible detail list cover sign-out. */
.screen-account.auth-card{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;justify-content:flex-start;padding-bottom:15px}
.screen-account .screen-body{flex:0 0 auto;min-height:auto}
.screen-account .bottom-actions{margin-top:12px;padding-top:8px;flex:none}
.screen-account .permanent-logout{flex:none;position:relative;z-index:1}


/* CPF as a sensitive field: explicit reveal control, compact mobile tap target. */
.cpf-private-field .cpf-visibility{flex:none;width:44px;height:44px;margin-right:-12px}
.cpf-private-field input[type="password"]{font-variant-numeric:tabular-nums;letter-spacing:.075em}
.cpf-private-field input[type="text"]{font-variant-numeric:tabular-nums}
.cpf-private-field .cpf-visibility:focus-visible{outline:2px solid var(--soft);outline-offset:1px}
@media(max-height:600px){.cpf-private-field .cpf-visibility{height:38px;width:40px}}


/* 2026-10-28 — Login method changes are in-place, without screen flashes. */
.screen-login .login-methods{
  position:relative;isolation:isolate;gap:4px;padding:3px;
  --active-index:0;
}
.screen-login .login-methods::before{
  content:'';position:absolute;z-index:0;top:3px;bottom:3px;left:3px;
  width:calc((100% - 14px) / 3);
  background:var(--control);border:1px solid #565C64;border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.07);
  transform:translate3d(calc(var(--active-index,0) * (100% + 4px)),0,0);
  transition:transform 300ms cubic-bezier(.18,.82,.25,1);
  pointer-events:none;
}
.screen-login .login-methods button{position:relative;z-index:1}
.screen-login .login-methods button[aria-pressed="true"]{background:transparent;border-color:transparent}
.screen-login .login-identifier-slot{position:relative;min-width:0;overflow:hidden}
.screen-login .login-identifier-slot>.login-identifier-field{position:relative;min-width:0}
.screen-login .login-identifier-ghost{
  position:absolute;inset:0;width:100%;z-index:2;pointer-events:none;
}
.screen-login .login-identifier-icon{flex:none;display:inline-flex;align-items:center;justify-content:center}
.screen-login .login-identifier-field .cpf-visibility[hidden]{display:none!important}
/* Keep other controls fully stable during both mode changes and step transitions.
   The full page slide remains, but no nested opacity or delayed re-entry. */
#app:not(.is-booting) .auth-card .screen-head,
#app:not(.is-booting) .auth-card .screen-body,
#app:not(.is-booting) .auth-card .bottom-actions,
#app:not(.is-booting) .shell>.foot,
#app:not(.is-booting) .auth-card .form>.field,
#app:not(.is-booting) .auth-card .form>.photo-control,
#app:not(.is-booting) .auth-card .form>.cpf-feedback,
#app:not(.is-booting) .auth-card .form>.consent,
#app:not(.is-booting) .auth-card .account-list,
#app:not(.is-booting) .auth-card .account-row,
#app:not(.is-booting) .auth-card .empty,
#app:not(.is-booting) .auth-card .list-action,
#app:not(.is-booting) .auth-card .profile-summary,
#app:not(.is-booting) .auth-card .info-line,
#app:not(.is-booting) .auth-card .progress,
#app:not(.is-booting) .auth-card .debug-lines{animation:none!important}
@media(prefers-reduced-motion:reduce){
  .screen-login .login-methods::before{transition:none!important}
}

/* Snapshot used only during the 260 ms field slide must never affect form height. */
.screen-login .login-identifier-slot>.login-identifier-field.login-identifier-ghost{
  position:absolute;inset:0;width:100%;height:auto;z-index:2;pointer-events:none
}