/* ==========================================================================
   Cllick Solutions - Acesso  ("Folha")
   Superficies chapadas, fonte do sistema, formulario compacto.
   Todo o movimento que importa e dirigido por gesto (modulo inline no HTML);
   o CSS aqui so define materiais, estados e os poucos fallbacks.
   Contrato preservado para login.js / login_destino.js: ids, classes de
   estado e as variaveis --ok --warn --danger --muted --line (lidas inline).
   ========================================================================== */

/* -- 1. Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
html,body{height:100%}
body{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
svg{display:block}
[hidden]{display:none !important}

/* o tilt 3D do login.js e desligado aqui: `transform` no #card conflita com
   o arrasto da folha, e a inclinacao nao cabe neste desenho.
   O mesmo script continua publicando --mx/--my, que reaproveitamos no realce. */
#card{transform:none !important}
.card-scene{perspective:none}

/* -- 2. Tokens ------------------------------------------------------------ */
:root{
  --blue-400:#5b92ff; --blue-500:#1f5cf0; --blue-600:#1547cc;
  --r-field:12px; --r-group:14px; --r-sheet:22px; --r-pill:999px;
  --ease:cubic-bezier(.32,.72,0,1);
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",sans-serif;
  --f-num:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --tap:44px;
}

/* -- 3. Tema claro -------------------------------------------------------- */
:root,:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f0f1f5;
  --bg-2:#e7e9ef;
  --surface:#ffffff;
  --surface-2:#f6f7f9;
  --surface-3:#eceef2;
  --sep:rgba(60,60,67,.14);
  --sep-2:rgba(60,60,67,.26);
  --line:rgba(60,60,67,.14);
  --text:#0b0c0f;
  --text-2:#43474f;
  --muted:#656a75;
  --accent:#1f5cf0;
  --on-accent:#ffffff;
  --accent-soft:rgba(31,92,240,.10);
  --ok:#0f9d63; --warn:#b6700a; --danger:#d2362d;
  --ok-soft:rgba(15,157,99,.12); --warn-soft:rgba(182,112,10,.12); --danger-soft:rgba(210,54,45,.10);
  --hair:inset 0 1px 0 rgba(255,255,255,.9);
  --lift:0 -1px 0 var(--sep),0 -24px 60px -30px rgba(12,18,38,.35);
  --route:rgba(31,92,240,.15);
  --route-2:rgba(31,92,240,.08);
  --scrim:rgba(8,10,18,.34);
}

/* -- 4. Tema escuro ------------------------------------------------------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000;
  --bg-2:#0a0a0c;
  --surface:#1c1c1e;
  --surface-2:#2c2c2e;
  --surface-3:#3a3a3c;
  --sep:rgba(235,235,245,.16);
  --sep-2:rgba(235,235,245,.30);
  --line:rgba(235,235,245,.16);
  --text:#ffffff;
  --text-2:#d5d7dd;
  --muted:#9ea3ae;
  --accent:#5b92ff;
  --on-accent:#04102c;
  --accent-soft:rgba(91,146,255,.16);
  --ok:#2ed08a; --warn:#f0ad3e; --danger:#ff6b60;
  --ok-soft:rgba(46,208,138,.16); --warn-soft:rgba(240,173,62,.16); --danger-soft:rgba(255,107,96,.16);
  --hair:inset 0 1px 0 rgba(255,255,255,.07);
  --lift:0 -1px 0 var(--sep),0 -30px 70px -30px rgba(0,0,0,.9);
  --route:rgba(120,165,255,.18);
  --route-2:rgba(120,165,255,.09);
  --scrim:rgba(0,0,0,.52);
}

/* -- 5. Casca ------------------------------------------------------------- */
body{font-family:var(--f);color:var(--text);background:var(--bg);
  font-size:15px;line-height:1.45;letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;touch-action:manipulation}

.page{position:fixed;inset:0}

/* o palco recua 1:1 enquanto a folha sobe (o modulo escreve --lift-p: 0..1) */
.stage{position:absolute;inset:0;display:flex;flex-direction:column;
  transform:scale(calc(1 - .055 * var(--lift-p,0)));
  opacity:calc(1 - .42 * var(--lift-p,0));
  transform-origin:50% 22%;
  will-change:transform,opacity}

:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:8px}

/* -- 5.1 Barra superior --------------------------------------------------- */
.top{position:relative;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:12px;
  padding:max(14px,env(safe-area-inset-top)) 16px 0}

.brand{display:inline-flex;align-items:center;gap:9px;
  padding:6px;margin:-6px;border-radius:12px}
.brand-mark,.brand-radar{display:none}
.brand-text{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand-text em{font-style:normal;color:var(--accent)}
.brand-sub{display:none}

.top-actions{display:flex;align-items:center;gap:8px}
.uplink{display:none}

.icon-btn{position:relative;display:grid;place-items:center;
  width:var(--tap);height:var(--tap);border-radius:var(--r-pill);color:var(--text-2);
  transition:background .14s linear,color .14s linear}
.icon-btn:hover{background:var(--surface-3)}
.icon-btn:active{background:var(--sep-2);transform:scale(.92);transition-duration:0s}
.icon-btn svg{position:absolute;transition:opacity .22s var(--ease),rotate .35s var(--ease)}
[data-theme="light"] .icon-btn .moon{opacity:0;rotate:-60deg}
[data-theme="light"] .icon-btn .sun{opacity:1;rotate:0deg}
[data-theme="dark"] .icon-btn .sun{opacity:0;rotate:60deg}
[data-theme="dark"] .icon-btn .moon{opacity:1;rotate:0deg}

/* pastilha de status (login.js pinta o ponto e escreve o texto) */
.status{display:inline-flex;align-items:center;height:34px;padding:0 12px;
  border-radius:var(--r-pill);font-size:12.5px;font-weight:500;color:var(--text-2);
  background:var(--surface);box-shadow:0 0 0 1px var(--sep)}
.status-inner{display:inline-flex;align-items:center;gap:7px}
.status:hover{background:var(--surface-3)}
.status:active{opacity:.6;transition-duration:0s}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;
  animation:breath 2.6s ease-in-out infinite}

/* -- 5.15 Rota animada ---------------------------------------------------- */
.bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg-route{width:100%;height:100%}
.route{fill:none;stroke:var(--route);stroke-width:1.25;stroke-linecap:round;
  stroke-dasharray:1 7}
.route-dim{stroke:var(--route-2);stroke-dasharray:1 9}
.t0{stop-color:var(--accent);stop-opacity:0}
.t1{stop-color:var(--accent);stop-opacity:.85}
.t1-dim{stop-opacity:.5}
.rider .dot{fill:var(--accent)}
.rider .halo{fill:var(--accent);opacity:.16;animation:halo 3.2s ease-in-out infinite}
.rider-dim{opacity:.62}
.rider-dim .halo{animation-duration:4.4s}

/* -- 5.2 Marca no palco --------------------------------------------------- */
/* a marca fica ancorada logo acima da folha, nao boiando no centro */
.main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:8px;text-align:center;
  padding:0 16px min(calc(var(--sheet-peek,300px) + clamp(22px,4vh,44px)),64vh)}

.lockup{position:relative;width:min(330px,62vw);aspect-ratio:1086 / 362}
.lockup .logo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;transition:opacity .3s var(--ease)}
.logo-w{opacity:0}
:root[data-theme="dark"] .logo-b{opacity:0}
:root[data-theme="dark"] .logo-w{opacity:1}
.lockup-sub{font-size:14px;color:var(--muted);letter-spacing:-.005em;max-width:30ch}

/* elementos do desenho anterior que o JS nao exige: fora */
.bg-stage,.orb,.hero,.rail,.eyebrow,.lead,.bottom,.card-logo,.beam,.beam-glow,
.secure-tag,.session-live,.status-orbit-ring,.status-orbit-dot,.status-aurora{display:none}

/* -- 6. A folha ----------------------------------------------------------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;justify-content:center;pointer-events:none}

.sheet{position:relative;width:min(452px,100%);pointer-events:auto;
  transform:translate3d(0,100%,0);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  background:var(--surface);box-shadow:var(--lift),var(--hair);
  will-change:transform;touch-action:none;
  transform-origin:50% 100%}
/* recuo quando um modal se empilha por cima */
body.stacked .sheet{scale:.965;filter:brightness(.94)}
.sheet{transition:scale .34s var(--ease),filter .34s var(--ease)}

.grip{display:flex;align-items:center;justify-content:center;width:100%;height:26px;
  padding:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  cursor:grab;touch-action:none}
.grip:active{cursor:grabbing}
.grip-bar{width:38px;height:5px;border-radius:3px;background:var(--sep-2);
  transition:width .22s var(--ease),background .14s linear}
.grip:hover .grip-bar{width:48px}
.sheet.dragging .grip-bar{background:var(--muted);width:48px}

.card-scene{width:100%}
.card{width:100%}
.card-inner{position:relative;padding:2px 16px max(16px,env(safe-area-inset-bottom)) 16px}

/* realce discreto que segue o ponteiro (--mx/--my vem do login.js) */
.sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.5;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
    var(--accent-soft) 0%,transparent 70%)}

.sheet-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding:2px 2px 14px}
.sheet-head h2{font-size:21px;font-weight:600;letter-spacing:-.024em}
.sheet-head p{font-size:13px;color:var(--muted);letter-spacing:-.003em}

/* -- 7. Erro global ------------------------------------------------------- */
.card-error{display:none;align-items:center;gap:8px;margin:0 0 10px;
  padding:10px 12px;border-radius:var(--r-field);font-size:13px;font-weight:500;
  color:var(--danger);background:var(--danger-soft)}
.card-error svg{flex:none}
.card-error.show{display:flex}

/* -- 8. Formulario: lista agrupada --------------------------------------- */
.form{display:flex;flex-direction:column;gap:10px}

.group{border-radius:var(--r-group);background:var(--surface-2);
  box-shadow:0 0 0 1px var(--sep);overflow:hidden}

.input-wrap{position:relative;display:flex;align-items:center;height:48px;
  background:transparent;
  transition:background .14s linear}
.input-wrap + .input-wrap::before,
.field-error + .input-wrap::before{content:"";position:absolute;left:40px;right:0;top:0;
  height:1px;background:var(--sep)}
.input-wrap:focus-within{background:var(--surface)}

.input-wrap .ico{display:grid;place-items:center;width:40px;flex:none;color:var(--muted);
  transition:color .14s linear}
.input-wrap .ico svg{width:17px;height:17px}
.input-wrap:focus-within .ico{color:var(--accent)}

.input-wrap input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;
  padding:0 6px 0 0;font-size:15px;font-weight:450;letter-spacing:-.008em;color:var(--text)}
.input-wrap input::placeholder{color:var(--muted);font-weight:400}
.input-wrap input:-webkit-autofill{-webkit-text-fill-color:var(--text);
  transition:background-color 9999s ease-in-out 0s}

.input-wrap .end{display:flex;align-items:center;padding-right:4px;flex:none}
.toggle-pw{display:grid;place-items:center;width:var(--tap);height:var(--tap);
  border-radius:var(--r-pill);color:var(--muted);
  transition:color .14s linear,background .14s linear}
.toggle-pw:hover{color:var(--text-2);background:var(--surface-3)}
.toggle-pw:active{transform:scale(.9);transition-duration:0s}
.wick{display:none}

.input-wrap.error{background:var(--danger-soft)}
.input-wrap.error .ico{color:var(--danger)}
.input-wrap.error input::placeholder{color:var(--danger)}

.field-error{display:block;max-height:0;overflow:hidden;
  font-size:12.5px;font-weight:500;color:var(--danger);
  padding:0 14px 0 40px;
  transition:max-height .26s var(--ease),padding .26s var(--ease)}
.input-wrap.error + .field-error{max-height:34px;padding:7px 14px 9px 40px}

/* -- 8.1 Linha de opcoes -------------------------------------------------- */
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:36px;padding:0 2px}

.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:13.5px;color:var(--text-2);user-select:none;
  padding:6px 4px;margin:-6px -4px;border-radius:9px}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{display:grid;place-items:center;width:20px;height:20px;flex:none;
  border-radius:50%;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--sep-2);
  transition:background .14s linear,box-shadow .14s linear}
.check .box svg{width:11px;height:11px;color:var(--on-accent);opacity:0;
  transition:opacity .14s linear}
.check input:checked + .box{background:var(--accent);box-shadow:none}
.check input:checked + .box svg{opacity:1}
.check:active .box{transform:scale(.88);transition-duration:0s}
.check input:focus-visible + .box{outline:2.5px solid var(--accent);outline-offset:3px}

.forgot{font-size:13.5px;font-weight:500;color:var(--accent);
  padding:6px 4px;margin:-6px -4px;border-radius:9px}
.forgot:active{opacity:.5;transition-duration:0s}

/* -- 8.2 Botao primario --------------------------------------------------- */
.submit{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:48px;border-radius:var(--r-field);
  font-size:16px;font-weight:600;letter-spacing:-.012em;
  color:var(--on-accent);background:var(--accent);
  transition:transform .12s var(--ease),opacity .12s linear}
.submit:hover{opacity:.92}
/* resposta no pointer-down, nao na soltura */
.submit:active{transform:scale(.975);opacity:.86;transition-duration:0s}
.submit .arrow{display:none}
.submit .spinner{display:none;width:17px;height:17px;border-radius:50%;flex:none;
  border:2px solid color-mix(in srgb,var(--on-accent) 32%,transparent);
  border-top-color:var(--on-accent);animation:spin .7s linear infinite}
.submit.loading .spinner{display:block}
.submit:disabled{opacity:.45;transform:none;cursor:not-allowed}
.submit.compact{width:auto;height:44px;padding:0 18px;font-size:15px}
.submit.ghost{background:var(--surface-2);color:var(--accent);
  box-shadow:0 0 0 1px var(--sep)}

/* -- 9. Sessao ativa ------------------------------------------------------ */
.session{display:flex;flex-direction:column;gap:10px}
.session-user{display:flex;align-items:center;gap:11px;padding:10px 12px;
  border-radius:var(--r-group);background:var(--surface-2);
  box-shadow:0 0 0 1px var(--sep)}
.session-avatar{display:grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:50%;font-size:15px;font-weight:600;
  color:var(--on-accent);background:var(--accent)}
.session-copy{display:flex;flex-direction:column;min-width:0}
.session-hello{font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.session-name{font-size:15px;font-weight:600;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-name span{font-weight:400;color:var(--muted)}

.logout-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;padding:8px 12px;border-radius:10px;
  font-size:13.5px;font-weight:500;color:var(--muted)}
.logout-link:hover{color:var(--danger);background:var(--danger-soft)}
.logout-link:active{opacity:.5;transition-duration:0s}
.logout-link.centered{align-self:center}

/* -- 10. Regiao revelada pelo arrasto ------------------------------------- */
.sheet-extra{opacity:calc(.15 + .85 * var(--lift-p,0));
  transform:translateY(calc(6px * (1 - var(--lift-p,0))));
  will-change:opacity,transform}

.divider{display:flex;align-items:center;gap:10px;margin:14px 0 10px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--sep)}

.secondary{display:flex;align-items:center;gap:10px;height:48px;padding:0 12px;
  border-radius:var(--r-group);font-size:14.5px;color:var(--text-2);
  background:var(--surface-2);box-shadow:0 0 0 1px var(--sep)}
.secondary:active{background:var(--surface-3);transition-duration:0s}
.secondary-ico{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:9px;color:var(--accent);background:var(--accent-soft)}
.secondary-txt{flex:1}
.secondary .plus{font-weight:600;color:var(--text)}
.secondary .plus em{font-style:normal;color:var(--accent)}
.secondary-go{color:var(--muted);font-size:15px}

.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;font-size:12.5px;color:var(--muted)}
.card-foot a{color:var(--accent)}
.card-foot .version{font-family:var(--f-num);font-size:11px}
.status-link{font-size:12.5px;font-weight:500;color:var(--accent);
  padding:6px 8px;margin:-6px -8px;border-radius:9px}
.status-link:active{opacity:.5;transition-duration:0s}

/* -- 11. Modais: a mesma folha, vindo do mesmo lugar ---------------------- */
.modal-backdrop{position:fixed;inset:0;z-index:60;display:flex;
  align-items:flex-end;justify-content:center;
  background:var(--scrim);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .34s var(--ease),visibility .34s}
.modal-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}

.modal{position:relative;width:min(520px,100%);max-height:88dvh;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  background:var(--surface);box-shadow:var(--lift),var(--hair);
  transform:translate3d(0,100%,0);touch-action:none;will-change:transform;
  transition:transform .42s var(--ease)}
.modal-backdrop.open .modal{transform:translate3d(0,0,0)}
.modal.dragging{transition:none}
.modal::before{content:"";position:absolute;top:10px;left:50%;translate:-50% 0;
  width:38px;height:5px;border-radius:3px;background:var(--sep-2);pointer-events:none;z-index:3}
.modal-beam{display:none}

.modal-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:26px 16px max(18px,env(safe-area-inset-bottom));
  scrollbar-width:thin;scrollbar-color:var(--sep-2) transparent}
.modal-scroll::-webkit-scrollbar{width:8px}
.modal-scroll::-webkit-scrollbar-thumb{background:var(--sep-2);border-radius:8px;
  border:2px solid transparent;background-clip:content-box}

.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:18px;touch-action:none}
.modal-user{display:flex;align-items:center;gap:11px;min-width:0}
.modal-avatar{display:grid;place-items:center;width:42px;height:42px;flex:none;
  border-radius:50%;font-size:16px;font-weight:600;
  color:var(--on-accent);background:var(--accent)}
.modal-hello{font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.modal-head h3{font-size:19px;font-weight:600;letter-spacing:-.022em;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:1px}
.role-pill{font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:2px 8px;border-radius:var(--r-pill);
  color:var(--accent);background:var(--accent-soft)}

.modal-close{display:grid;place-items:center;width:32px;height:32px;flex:none;
  border-radius:50%;color:var(--muted);background:var(--surface-3)}
.modal-close:hover{color:var(--text)}
.modal-close:active{transform:scale(.9);transition-duration:0s}

.modal-section{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;padding-left:2px}

.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:18px;padding-top:12px;border-top:1px solid var(--sep)}

/* -- 12. Destinos: lista agrupada ---------------------------------------- */
.dest-grid{display:flex;flex-direction:column;margin-bottom:20px;
  border-radius:var(--r-group);background:var(--surface-2);
  box-shadow:0 0 0 1px var(--sep);overflow:hidden}
.dest{position:relative;display:flex;align-items:center;gap:11px;
  padding:10px 12px;min-height:56px;
  transition:background .12s linear}
.dest + .dest::before{content:"";position:absolute;left:53px;right:0;top:0;height:1px;
  background:var(--sep)}
.dest:hover{background:var(--surface-3)}
.dest:active{background:var(--sep);transition-duration:0s}
.dest-ico{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px}
.dest-ico svg{width:17px;height:17px}
.dest-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.dest-txt strong{font-size:15px;font-weight:500;letter-spacing:-.012em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dest-txt em{font-style:normal;font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dest-go{color:var(--sep-2);flex:none;font-size:0;line-height:1}
/* o login_destino.js escreve uma seta; aqui ela vira o chevron de lista */
.dest-go::after{content:"\203A";font-size:19px;line-height:1}

.dest-ico[data-tone="blue"]  {color:#1f5cf0;background:rgba(31,92,240,.13)}
.dest-ico[data-tone="sky"]   {color:#0b7fa8;background:rgba(11,127,168,.13)}
.dest-ico[data-tone="green"] {color:#0f8f5c;background:rgba(15,143,92,.13)}
.dest-ico[data-tone="amber"] {color:#9d6a09;background:rgba(157,106,9,.14)}
.dest-ico[data-tone="orange"]{color:#b4540f;background:rgba(180,84,15,.13)}
.dest-ico[data-tone="red"]   {color:#bd352c;background:rgba(189,53,44,.12)}
.dest-ico[data-tone="violet"]{color:#6340d0;background:rgba(99,64,208,.13)}
[data-theme="dark"] .dest-ico[data-tone="blue"]  {color:#7aa9ff;background:rgba(122,169,255,.16)}
[data-theme="dark"] .dest-ico[data-tone="sky"]   {color:#4fd0f0;background:rgba(79,208,240,.15)}
[data-theme="dark"] .dest-ico[data-tone="green"] {color:#43dd9c;background:rgba(67,221,156,.15)}
[data-theme="dark"] .dest-ico[data-tone="amber"] {color:#f5c15c;background:rgba(245,193,92,.15)}
[data-theme="dark"] .dest-ico[data-tone="orange"]{color:#ff9a5c;background:rgba(255,154,92,.15)}
[data-theme="dark"] .dest-ico[data-tone="red"]   {color:#ff8378;background:rgba(255,131,120,.15)}
[data-theme="dark"] .dest-ico[data-tone="violet"]{color:#a98bff;background:rgba(169,139,255,.16)}

/* -- 13. Status dos servicos --------------------------------------------- */
.status-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;touch-action:none}
.status-orbit{display:grid;place-items:center;width:42px;height:42px;flex:none;
  border-radius:50%;color:var(--accent);background:var(--accent-soft)}
.status-orbit svg{width:20px;height:20px}
.status-heading{flex:1;min-width:0}
.status-heading h3{font-size:19px;font-weight:600;letter-spacing:-.022em;margin-top:1px}
#statusDescription{font-size:13px;color:var(--muted);margin-top:4px;max-width:40ch}

.status-overview{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:14px;
  border-radius:var(--r-group);background:var(--surface-2);box-shadow:0 0 0 1px var(--sep)}
.status-overview > div{flex:1;min-width:0;display:flex;flex-direction:column}
.status-overview strong{font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.status-overview span#statusChecked{font-size:12px;color:var(--muted)}
.status-overview-light{width:10px;height:10px;flex:none;border-radius:50%;
  background:var(--muted);transition:background .3s linear}
.status-overview.all-online .status-overview-light{background:var(--ok)}
.status-overview.has-issues .status-overview-light{background:var(--warn)}

.status-refresh{display:inline-flex;align-items:center;gap:6px;flex:none;
  height:34px;padding:0 12px;border-radius:var(--r-pill);
  font-size:13px;font-weight:500;color:var(--accent);background:var(--accent-soft)}
.status-refresh:active{opacity:.55;transition-duration:0s}
.status-refresh:disabled{opacity:.5;cursor:progress}
.status-refresh.loading svg{animation:spin .8s linear infinite}

.status-services{display:flex;flex-direction:column;
  border-radius:var(--r-group);background:var(--surface-2);
  box-shadow:0 0 0 1px var(--sep);overflow:hidden}
.status-service{position:relative;display:flex;align-items:center;gap:11px;
  padding:11px 12px;min-height:58px}
.status-service + .status-service::before{content:"";position:absolute;left:53px;right:0;
  top:0;height:1px;background:var(--sep)}
.service-visual{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:50%;background:var(--surface-3)}
.service-wave{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.service-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.service-copy strong{font-size:14.5px;font-weight:500;letter-spacing:-.012em}
.service-copy span{font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-state{font-size:12.5px;font-weight:500;flex:none;
  display:inline-flex;align-items:center;gap:6px}
.service-state-dot{display:none}
.service-latency{font-family:var(--f-num);font-size:11.5px;color:var(--muted);
  min-width:58px;text-align:right;flex:none}

.status-service.checking .service-wave{background:var(--muted);animation:breath 1.2s ease-in-out infinite}
.status-service.checking .service-state{color:var(--muted)}
.status-service.online .service-visual{background:var(--ok-soft)}
.status-service.online .service-wave{background:var(--ok)}
.status-service.online .service-state{color:var(--ok)}
.status-service.offline .service-visual{background:var(--danger-soft)}
.status-service.offline .service-wave{background:var(--danger);animation:breath 1.1s ease-in-out infinite}
.status-service.offline .service-state{color:var(--danger)}

.status-footnote{display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:12.5px;color:var(--muted)}
.secure-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}

/* -- 14. Meu usuario ------------------------------------------------------ */
.conta-block + .conta-block{margin-top:22px}
.conta-hint{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 10px;padding-left:2px}
.conta-code-row{display:flex;gap:8px}
.conta-fields{display:flex;flex-direction:column;margin-bottom:10px;
  border-radius:var(--r-group);background:var(--surface-2);
  box-shadow:0 0 0 1px var(--sep);overflow:hidden}
.conta-input{width:100%;height:48px;padding:0 14px;border:0;outline:none;
  font-size:15px;color:var(--text);background:var(--surface-2)}
.conta-fields .conta-input + .conta-input{box-shadow:inset 0 1px 0 var(--sep)}
.conta-input::placeholder{color:var(--muted)}
.conta-input:focus{background:var(--surface)}
.conta-input.code{flex:1;border-radius:var(--r-group);font-family:var(--f-num);
  letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 0 1px var(--sep)}
.conta-aviso{min-height:18px;margin:8px 0 0;font-size:12.5px;padding-left:2px}
.conta-dispositivos{margin:14px 0 2px}
.conta-dispositivos .modal-section{margin:12px 0 6px}
.conta-modal .modal-foot{justify-content:flex-start}

/* -- 15. Toast ------------------------------------------------------------ */
.toast{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));z-index:90;
  display:flex;align-items:center;gap:9px;padding:9px 15px 9px 10px;
  border-radius:var(--r-pill);font-size:14px;font-weight:500;letter-spacing:-.008em;
  color:var(--text);background:var(--surface);
  box-shadow:0 0 0 1px var(--sep),0 12px 30px -12px rgba(0,0,0,.35);
  transform:translate3d(-50%,-140%,0);opacity:0;pointer-events:none;
  max-width:calc(100vw - 32px);
  transition:transform .44s var(--ease),opacity .2s linear}
.toast.show{transform:translate3d(-50%,0,0);opacity:1}
.toast .ico{display:grid;place-items:center;width:22px;height:22px;flex:none;
  border-radius:50%;font-size:12px;color:#fff}
.toast.ok .ico{background:var(--ok)}
.toast.warn .ico{background:var(--warn)}
.toast.err .ico{background:var(--danger)}
[data-theme="dark"] .toast .ico{color:#04102c}

/* -- 16. Keyframes (poucos, de proposito) --------------------------------- */
@keyframes spin{to{rotate:360deg}}
@keyframes breath{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes halo{0%,100%{opacity:.10;transform:scale(.8)}50%{opacity:.26;transform:scale(1.25)}}

/* -- 17. Responsivo ------------------------------------------------------- */
@media (min-width:700px){
  .card-inner{padding:2px 22px max(20px,env(safe-area-inset-bottom))}
  .modal-scroll{padding:26px 22px max(20px,env(safe-area-inset-bottom))}
}
@media (max-height:620px){
  .lockup{width:min(230px,52vw)}
  .lockup-sub{display:none}
}
@media (max-width:560px){
  .top{gap:8px}
  .status{max-width:46vw;padding:0 11px}
  .status-inner{min-width:0}
  #statusText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:380px){
  .sheet-head h2{font-size:19px}
  .service-latency{min-width:0}
  .status-overview{flex-wrap:wrap}
  .status-refresh{width:100%;justify-content:center}
}

/* -- 18. Acessibilidade --------------------------------------------------- */
/* Movimento reduzido: o arrasto continua 1:1 (e resposta direta, nao animacao),
   mas as molas viram transicoes curtas e o recuo do palco sai de cena. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.14s !important}
  .stage{transform:none !important;opacity:1 !important}
  .rider{display:none}
  .sheet-extra{opacity:1 !important;transform:none !important}
  .toast{transition-duration:.15s !important}
}
@media (prefers-contrast:more){
  :root{--sep:rgba(60,60,67,.42);--sep-2:rgba(60,60,67,.62);--line:rgba(60,60,67,.42);--muted:#4a4f59}
  :root[data-theme="dark"]{--sep:rgba(235,235,245,.42);--sep-2:rgba(235,235,245,.66);
    --line:rgba(235,235,245,.42);--muted:#c3c7d0}
}
@media print{.dock,.modal-backdrop,.toast{display:none}}