/* O estilo base é o do celular. O computador ganha o que muda no fim do arquivo. */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fontes/schibsted-grotesk.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fontes/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --fundo: #070504;
  --superficie: #100c0a;
  --superficie-2: #17120f;
  --borda: rgba(242, 237, 230, .1);
  --borda-forte: rgba(242, 237, 230, .2);
  --texto: #f2ede6;
  --suave: #aba59e;
  --apagado: #86807a;
  --laranja: #ff7a1a;
  --laranja-claro: #ff9a4d;
  --tinta: #120700;
  --ganho: #2bd57f;
  --perda: #ff4d3a;
  --alerta: #ffb020;
  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --suavidade: cubic-bezier(.16, 1, .3, 1);
  --canto: 4px;
  --barra-acao: 76px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, p, dl, dd, ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button, input, select, summary { touch-action: manipulation; }

.fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 45% at 60% -8%, rgba(255, 122, 26, .16), transparent 70%);
}

.faixa-demo {
  flex: none;
  padding: 5px 12px;
  padding-top: max(5px, env(safe-area-inset-top));
  background: rgba(255, 176, 32, .12);
  border-bottom: 1px solid rgba(255, 176, 32, .24);
  color: #ffd27a;
  font-size: 12px;
  text-align: center;
}

.rotulo {
  display: block;
  color: var(--apagado);
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.texto-apoio { color: var(--suave); font-size: 13px; line-height: 1.45; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--canto);
  padding: 14px;
}

.cartao-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 24px; }

/* Marca */

.marca { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; min-width: 0; }
.marca h1 { font-size: 15px; font-weight: 700; white-space: nowrap; }

.marca-simbolo { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--laranja); stroke-width: 1.8; }

.selo {
  padding: 1px 6px;
  border: 1px solid var(--laranja);
  border-radius: 2px;
  color: var(--laranja);
  font: 500 10px/1.5 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Login */

.login {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: clip;
}

/* No celular a tela é uma coluna: marca, título, globo e o cartão embaixo. */
.login-conteudo { display: contents; }
.login-topo { order: 0; }
.login-intro { order: 1; }
.palco-login { order: 2; }
.login-cartao { order: 3; }

/* O globo ocupa o espaço que sobra, com os anéis e os segundos do minuto girando. */
.palco-login {
  position: relative;
  flex: 1 1 auto;
  min-height: 190px;
  pointer-events: none;
}

.login-topo {
  flex: none;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 14px 16px;
}

.login-intro { position: relative; z-index: 2; padding: 2px 20px 0; text-align: center; }

.login-titulo {
  font-size: clamp(28px, 8.4vw, 40px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-shadow: 0 2px 20px rgba(7, 5, 4, .95);
}

.login-titulo span { color: var(--suave); font-weight: 600; }

.login-passos {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.login-passos li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: rgba(23, 18, 15, .88);
  color: var(--suave);
  font-size: 12px;
  line-height: 1.3;
}

.login-passos b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 122, 26, .16);
  color: var(--laranja);
  font-size: 11px;
}

.login-cartao {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  width: calc(100% - 24px);
  max-width: 460px;
  margin: 0 auto max(12px, env(safe-area-inset-bottom));
  padding: 22px 18px 18px;
  border: 1px solid rgba(255, 154, 77, .18);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(30, 22, 17, .95), rgba(16, 12, 10, .97));
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.login-cartao h2 { margin-bottom: 2px; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }

.login-campo { display: grid; gap: 6px; }
.login-rotulo { font-size: 13px; font-weight: 600; }

.login-entrada { position: relative; display: block; }

.login-icone {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--apagado);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
  pointer-events: none;
  transition: stroke .15s;
}

.login-entrada:focus-within .login-icone { stroke: var(--laranja); }

/* Só os campos com ícone abrem espaço à esquerda. */
.login-icone + input { padding-left: 46px; }

.login-entrada input {
  min-height: 52px;
  border-radius: 14px;
  background: rgba(7, 5, 4, .6);
  font-family: var(--sans);
}

.login-entrada input::placeholder { color: var(--apagado); opacity: .7; }
.login-entrada .botao-olho { border-radius: 14px; }

.login-botao {
  min-height: 54px;
  margin-top: 2px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--laranja), #ffa04d);
  box-shadow: 0 8px 24px rgba(255, 122, 26, .28);
  color: var(--tinta);
  font: 700 16px/1 var(--sans);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}

.login-botao:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 4px 14px rgba(255, 122, 26, .25); }
.login-botao:disabled { opacity: .6; cursor: progress; }
.login-botao:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }

.login-selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  color: var(--apagado);
  font-size: 12px;
}

.login-selos li::before { content: '✓'; margin-right: 5px; color: var(--ganho); }

.login-rodape { display: none; }

/* Celular baixo: o globo encolhe e o texto de apoio sai, para tudo caber. */
@media (max-height: 700px) {
  .palco-login { min-height: 130px; }
  .login-cartao .texto-apoio { display: none; }
}

/* Painel */

.cabine {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 12px calc(var(--barra-acao) + 12px + env(safe-area-inset-bottom));
}

.topo {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
}

.topo-conta { display: flex; align-items: center; gap: 12px; min-width: 0; }
#conta-email { display: none; overflow-wrap: anywhere; }

.grade { display: flex; flex-direction: column; gap: 12px; }

.coluna-dados { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Palco do globo */

.palco {
  position: relative;
  height: clamp(300px, 46dvh, 430px);
  min-width: 0;
  contain: layout paint;
}

.palco-globo { position: absolute; inset: 0; display: grid; place-items: center; }
.globo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.globo-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, currentColor 45%, transparent);
  color: #96603a;
  opacity: .15;
  transition: color .7s, opacity .7s;
  animation: respirar-halo 3.2s ease-in-out infinite;
  will-change: transform;
}

.canto { position: absolute; display: grid; gap: 1px; pointer-events: none; max-width: 50%; }
.canto-1 { top: 2px; left: 2px; }
.canto-2 { top: 2px; right: 2px; text-align: right; }
.canto-3 { bottom: 2px; left: 2px; }
.canto-4 { bottom: 2px; right: 2px; text-align: right; justify-items: end; }

.canto-valor { font: 600 19px/1.2 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.canto-texto { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }
.canto-detalhe { color: var(--apagado); font: 400 11px/1.4 var(--mono); }

.canto-estado { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; line-height: 1.3; letter-spacing: -.01em; }

.ponto { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--apagado); }
.canto-estado.ligado .ponto { background: var(--laranja); }

.canto-estado.ligado .ponto::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--laranja);
  animation: pulsar-ponto 1.6s ease-out infinite;
}

.positivo { color: var(--ganho); }
.negativo { color: var(--perda); }

.resultado-flutuante { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }

.resultado-flutuante span {
  padding: 4px 14px;
  background: rgba(7, 5, 4, .82);
  border-radius: var(--canto);
  font: 700 28px/1.2 var(--mono);
  letter-spacing: -.03em;
  animation: subir 2.4s var(--suavidade) both;
}

/* Configuração */

.coluna-config { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.config-campos { display: flex; flex-direction: column; gap: 14px; }

.campo { display: grid; gap: 6px; min-width: 0; }
.campo-tempo legend { margin-bottom: 6px; }

.campos-duplos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

/* 16 px evita o zoom automático do celular ao tocar no campo. */
input, select {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  background: rgba(7, 5, 4, .7);
  color: var(--texto);
  border: 1px solid var(--borda-forte);
  border-radius: var(--canto);
  font: 500 16px/1.3 var(--mono);
}

select { font-family: var(--sans); }
select option, select optgroup { background: var(--superficie-2); color: var(--texto); }

input:focus-visible, select:focus-visible, .botao:focus-visible, .botao-olho:focus-visible, summary:focus-visible {
  outline: none;
  border-color: var(--laranja);
  box-shadow: 0 0 0 2px rgba(255, 122, 26, .3);
}

input:disabled, select:disabled { opacity: .55; }

.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 48px; }

.botao-olho {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--canto);
  background: none;
  color: var(--suave);
  cursor: pointer;
}

.botao-olho svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.botao-olho[aria-pressed='true'] { color: var(--laranja); }

/* Interruptor do ativo automático */

.interruptor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  background: rgba(7, 5, 4, .7);
  border: 1px solid var(--borda-forte);
  border-radius: var(--canto);
  cursor: pointer;
}

.interruptor-texto { display: grid; min-width: 0; }
.interruptor-texto strong { font-size: 15px; line-height: 1.3; }
.interruptor-texto small { color: var(--suave); font-size: 12px; line-height: 1.35; }

.interruptor input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.interruptor i {
  flex: none;
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--borda-forte);
  transition: background .2s;
}

.interruptor i::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--texto);
  transition: transform .2s var(--suavidade);
}

.interruptor input:checked + i { background: var(--laranja); }
.interruptor input:checked + i::after { transform: translateX(20px); }
.interruptor input:focus-visible + i { box-shadow: 0 0 0 2px rgba(255, 122, 26, .4); }
.interruptor:has(input:disabled) { opacity: .55; }

/* M1 e M5 */

.segmentos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }

.segmento { position: relative; display: block; cursor: pointer; }
.segmento input { position: absolute; inset: 0; min-height: 0; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.segmento span {
  display: grid;
  place-items: center;
  min-height: 52px;
  background: rgba(7, 5, 4, .7);
  border: 1px solid var(--borda-forte);
  border-radius: var(--canto);
  font: 700 18px/1.15 var(--mono);
}

.segmento small { color: var(--apagado); font: 400 11px/1.2 var(--mono); }

.segmento input:checked + span { background: rgba(255, 122, 26, .14); border-color: var(--laranja); color: var(--laranja); }
.segmento input:checked + span small { color: var(--laranja-claro); }
.segmento input:focus-visible + span { box-shadow: 0 0 0 2px rgba(255, 122, 26, .3); }
.segmento input:disabled + span { opacity: .55; }

.resumo-config { color: var(--suave); font: 400 12px/1.5 var(--mono); }

/* Botões */

.botao {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--canto);
  font: 600 14px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:disabled { opacity: .45; cursor: not-allowed; }

.botao-principal { background: var(--laranja); color: var(--tinta); }
.botao-perigo { background: var(--fundo); color: var(--perda); border-color: var(--perda); }

.botao-discreto {
  min-height: 34px;
  padding: 4px 12px;
  background: transparent;
  color: var(--texto);
  border-color: var(--borda-forte);
  font-size: 11px;
}

/* O botão principal fica sempre ao alcance do polegar. */
.acoes {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(7, 5, 4, .96);
  border-top: 1px solid var(--borda);
  display: grid;
}

.acoes .botao { width: 100%; max-width: 616px; margin: 0 auto; }

/* Com o robô ligado, a configuração vira uma linha para dar lugar aos dados. */
.cabine.ligado .config-campos { display: none; }

/* Avisos */

.alerta {
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--canto);
  font-size: 13px;
  line-height: 1.4;
  animation: aparecer .4s var(--suavidade) both;
}

.alerta-aviso { background: rgba(255, 176, 32, .1); border-color: rgba(255, 176, 32, .36); }
.alerta-erro { background: rgba(255, 77, 58, .1); border-color: rgba(255, 77, 58, .4); }
.alerta-info { background: rgba(242, 237, 230, .05); border-color: var(--borda-forte); }
.alerta-topo { flex: none; border-radius: 0; border-width: 0 0 1px; text-align: center; }

/* Análise */

.grafico { position: relative; height: 84px; margin: 8px 0; overflow: hidden; }
.grafico canvas { display: block; width: 100%; height: 100%; }

.grafico-varredura {
  position: absolute;
  inset: 0 auto 0 0;
  width: 25%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 122, 26, .28));
  border-right: 1px solid var(--laranja);
  pointer-events: none;
}

.grafico-varredura.ativa { animation: varrer-grafico 1s ease-in-out; }

.analise-motivo { min-height: 21px; font-size: 14px; line-height: 1.45; }
.analise-motivo.digitando::after { content: '▌'; margin-left: 1px; color: var(--laranja); }
.analise-info { margin-top: 2px; color: var(--apagado); font: 400 11px/1.4 var(--mono); }

.etiqueta {
  padding: 2px 8px;
  border: 1px solid var(--borda-forte);
  border-radius: 2px;
  color: var(--suave);
  font: 600 11px/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.etiqueta-up { color: var(--ganho); border-color: currentColor; }
.etiqueta-down { color: var(--perda); border-color: currentColor; }

/* Histórico de ordens */

.cartao-ordens { display: flex; flex-direction: column; gap: 8px; min-height: 0; }

.contagem { color: var(--suave); font: 500 12px/1.4 var(--mono); }

.ordens { display: grid; gap: 6px; }

.ordem {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  background: var(--superficie-2);
  border-left: 3px solid var(--borda-forte);
  border-radius: var(--canto);
}

.ordem.nova { animation: aparecer .5s var(--suavidade) both; }
.ordem-ganhou { border-left-color: var(--ganho); }
.ordem-perdeu { border-left-color: var(--perda); }
.ordem-aberta { border-left-color: var(--laranja); }

.ordem-seta {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.ordem-seta svg { width: 18px; height: 18px; fill: currentColor; }
.seta-up { background: rgba(43, 213, 127, .14); color: var(--ganho); }
.seta-down { background: rgba(255, 77, 58, .14); color: var(--perda); }

.ordem-info { display: grid; min-width: 0; }
.ordem-info strong { overflow: hidden; font-size: 15px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.ordem-info time { color: var(--apagado); font: 400 10px/1.3 var(--mono); }

.ordem-resultado { font: 700 15px/1.2 var(--mono); letter-spacing: -.02em; text-align: right; white-space: nowrap; }
.ordem-resultado.neutro { color: var(--suave); font-size: 12px; font-weight: 500; letter-spacing: 0; }
.ordem-aberta .ordem-resultado { color: var(--laranja); animation: pulso 1.4s ease-in-out infinite; }

/* Eventos */

.cartao-eventos summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 24px; }
.cartao-eventos summary::-webkit-details-marker { display: none; }
.cartao-eventos summary::after { content: '+'; color: var(--suave); font-size: 16px; }
.cartao-eventos[open] summary::after { content: '−'; }
.cartao-eventos[open] summary { margin-bottom: 8px; }

.eventos { max-height: 260px; }

.rolagem { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; -webkit-overflow-scrolling: touch; }

.evento {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(242, 237, 230, .06);
  font: 400 12px/1.45 var(--mono);
}

.evento:last-child { border-bottom: 0; }
.evento time { color: var(--apagado); }
.evento span { overflow-wrap: anywhere; color: var(--suave); }
.evento-sucesso span { color: var(--ganho); }
.evento-aviso span { color: var(--alerta); }
.evento-erro span { color: var(--perda); }

/* Animações: só transform e opacity, que não pesam no celular */

.surgir { animation: aparecer .6s var(--suavidade) both; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes pulsar-ponto {
  from { opacity: .6; transform: scale(1); }
  to { opacity: 0; transform: scale(3.2); }
}

@keyframes respirar-halo {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes varrer-grafico {
  0% { transform: translateX(-100%); opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(400%); opacity: 0; }
}

@keyframes subir {
  0% { opacity: 0; transform: translateY(16px) scale(.9); }
  12% { opacity: 1; transform: none; }
  70% { opacity: 1; transform: translateY(-20px); }
  100% { opacity: 0; transform: translateY(-34px); }
}

@keyframes pulso {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Celular deitado ou tela muito baixa */

@media (max-height: 560px) {
  .palco { height: 300px; }
}

/* Computador */

@media (min-width: 1100px) and (min-height: 640px) {
  html, body { height: 100%; }

  .fundo {
    background:
      radial-gradient(70% 55% at 62% -12%, rgba(255, 122, 26, .17), transparent 70%),
      linear-gradient(rgba(242, 237, 230, .028) 1px, transparent 1px) 0 0 / 56px 56px,
      linear-gradient(90deg, rgba(242, 237, 230, .028) 1px, transparent 1px) 0 0 / 56px 56px;
  }

  .faixa-demo { font-size: 13px; }
  .botao-principal:hover:not(:disabled) { background: var(--laranja-claro); }
  .botao-perigo:hover:not(:disabled) { background: rgba(255, 77, 58, .12); }

  /* Login: o globo no centro da tela e o cartão de vidro por cima dele */

  .login-topo { justify-content: flex-start; padding: 22px 40px; }

  .palco-login {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(92vh, 860px);
    aspect-ratio: 1;
    min-height: 0;
    transform: translate(-50%, -50%);
  }

  .login-conteudo {
    flex: 1;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px 12px;
  }

  .login-passos { display: flex; }
  .login-cartao { width: 100%; max-width: 440px; margin: 0 auto; }
  .login-titulo { font-size: 46px; }
  .login-passos li { font-size: 13px; }

  .login-cartao {
    padding: 28px 28px 22px;
    background: rgba(16, 12, 10, .74);
    backdrop-filter: blur(16px);
  }

  .login-botao:hover:not(:disabled) { box-shadow: 0 10px 30px rgba(255, 122, 26, .4); }

  .login-rodape {
    display: block;
    flex: none;
    position: relative;
    z-index: 2;
    padding: 14px 16px;
    color: var(--apagado);
    font-size: 12px;
    text-align: center;
  }

  /* Painel */

  .cabine { max-width: none; min-height: 0; padding: 0 16px 16px; }
  .topo { padding: 12px 2px; }
  #conta-email { display: inline; }

  .grade {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr) 380px;
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
  }

  .coluna-config { order: -1; min-height: 0; overflow-y: auto; }
  .palco { height: auto; min-height: 0; }
  .canto-1, .canto-2 { top: 6px; }
  .canto-1, .canto-3 { left: 8px; }
  .canto-2, .canto-4 { right: 8px; }
  .canto-3, .canto-4 { bottom: 6px; }
  .canto-valor { font-size: clamp(20px, 2vw, 28px); }
  .canto-texto, .canto-estado { font-size: clamp(17px, 1.5vw, 21px); }
  .resultado-flutuante span { font-size: 38px; }

  .cabine.ligado .config-campos { display: flex; }
  .acoes { position: static; padding: 0; margin-top: auto; background: none; border: 0; }
  .acoes .botao { max-width: none; }
  .resumo-config { display: none; }

  .coluna-dados { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
  .grafico { height: 104px; }
  .ordens { flex: 1; min-height: 0; align-content: start; }
  .eventos { max-height: 22dvh; }
}

/* Painel admin */

.admin-pagina {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 14px max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-topo { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px 4px; }

.admin-centro { flex: 1; display: grid; place-items: center; padding: 16px 0 40px; }
.admin-centro .login-cartao { width: 100%; max-width: 420px; margin: 0; }

.admin-painel { display: flex; flex-direction: column; gap: 12px; }

.admin-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.admin-numero {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--superficie);
}

.admin-numero strong { font: 700 24px/1.1 var(--mono); }

.admin-painel .cartao { border-radius: 18px; padding: 16px; display: grid; gap: 12px; }
.admin-titulo { font-size: 17px; letter-spacing: -.01em; }

.admin-linha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.admin-linha .login-botao { min-height: 52px; padding: 0 22px; }

.admin-busca { border-radius: 12px; font-family: var(--sans); }

.admin-lista { display: grid; gap: 8px; }

.admin-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: var(--superficie-2);
}

.admin-item-info { display: grid; min-width: 0; grid-column: 1 / -1; }
.admin-item-info strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.admin-item-info small { color: var(--apagado); font-size: 12px; }

.admin-chip {
  justify-self: start;
  padding: 3px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  color: var(--suave);
  font-size: 12px;
}

.admin-chip-ligado { border-color: rgba(43, 213, 127, .5); color: var(--ganho); }
.admin-chip-conectado { border-color: rgba(255, 122, 26, .5); color: var(--laranja); }

.admin-bloquear { color: var(--perda); border-color: rgba(255, 77, 58, .45); border-radius: 999px; }

@media (min-width: 640px) {
  .admin-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-item { grid-template-columns: minmax(0, 1fr) auto auto; }
  .admin-item-info { grid-column: auto; }
}