/* ============================================================================
   ui.css — base visual compartilhada por TODAS as telas da ferramenta.

   Existia um CSS colado dentro de cada página, e elas foram divergindo: três
   cores de marca (rosa, roxo, azul), quatro pretos de fundo diferentes e o
   mesmo conceito com três nomes (--border-2 / --border2 / --line-2). Trocar de
   página parecia trocar de site.

   Este arquivo é a fonte única. Cada página o importa ANTES do seu próprio
   <style> e não declara mais :root — então herda a paleta daqui e continua
   podendo ajustar o que é só dela.

   Semântica das cores (decisão do dono do produto):
     ROSA  = ação    -> botão de postar/minerar/salvar, chip ativo, link
     ROXO  = dados   -> gráfico, série, KPI, indicador de métrica
   ========================================================================= */

:root{
  /* --- superfícies --- */
  --bg:#0A0D14;
  --bg-2:#0E121B;
  --panel:#141924;
  --panel-2:#1B2130;
  --panel-3:#232D40;
  --panel-solid:#141924;      /* algumas telas usavam vidro translúcido */

  /* --- linhas --- */
  --line:#222A3A;
  --line-2:#2E3849;

  /* --- texto --- */
  --text:#EDF1F8;
  --muted:#93A0B5;
  --muted-dim:#5F6B82;

  /* --- ação (rosa) --- */
  --accent:#FF3B6B;
  --accent-2:#FF7A3D;
  --accent-soft:rgba(255,59,107,.16);
  --accent-line:rgba(255,59,107,.42);

  /* --- dados (roxo) --- */
  --data:#7C5CFF;
  --data-2:#FF5C8A;
  --data-soft:rgba(124,92,255,.18);

  /* --- estado --- */
  --ok:#22C55E;
  --warn:#F5A524;
  --bad:#EF4444;
  --info:#38BDF8;

  /* --- plataformas --- */
  --ig1:#FEDA75; --ig2:#D62976; --ig3:#962FBF;
  --fb:#0866FF;
  --tt:#25F4EE;

  /* --- ritmo: um só compasso de espaçamento e canto --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  --shadow-1:0 2px 10px rgba(0,0,0,.28);
  --shadow-2:0 14px 34px -10px rgba(0,0,0,.62);
  --shadow-3:0 22px 52px -12px rgba(0,0,0,.78);

  --sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);

  --nav-w:78px;      /* trilho lateral no desktop */
  --nav-h:66px;      /* barra inferior no celular */

  /* --- APELIDOS -----------------------------------------------------------
     As páginas nasceram com nomes diferentes pro mesmo conceito. Em vez de
     reescrever centenas de regras (arriscado, com 61 posts agendados rodando),
     todos os nomes antigos apontam para a mesma paleta. A unificação é
     instantânea e nenhuma regra existente quebra. */
  --bg2:var(--bg-2);
  --panel2:var(--panel-2);
  --raise:var(--panel-3);
  --border:var(--line);
  --border-2:var(--line-2);
  --border2:var(--line-2);
  --txt:var(--text);
  --dim:var(--muted-dim);
  --up:var(--ok);
  --down:var(--bad);
  --green:var(--ok);      /* a Central usava --green sem nunca declarar: era cor morta */
  --amber:var(--warn);
  --del:var(--bad);
  --err:var(--bad);
  --cy:var(--tt);
  --ghost:#B088FF;        /* modo fantasma */
  --purple:var(--ghost);  /* mesma cor que --ghost, com outro nome */
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* constantes de layout que nasceram dentro de uma tela só */
  --side:248px;   /* painel lateral da tela de Comentários */
  --hh:56px;      /* altura do cabeçalho */
  --bh:64px;      /* altura da barra inferior própria da tela */
}

*{box-sizing:border-box}

/* ============================ NAVEGAÇÃO GLOBAL ============================
   Trilho à esquerda no desktop, barra inferior no celular — igual em todas as
   telas. É `fixed`, então nenhuma página precisa mudar sua estrutura: só ganha
   um respiro (padding) na borda correspondente. */

.unav{
  position:fixed;z-index:900;display:flex;background:var(--panel);
  border-color:var(--line);border-style:solid;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.unav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--muted);text-decoration:none;font-family:var(--sans);
  font-size:9.5px;font-weight:700;letter-spacing:.02em;text-align:center;
  transition:color .15s var(--ease),background .15s var(--ease);
  position:relative;
}
.unav a .ui{font-size:19px;line-height:1;filter:grayscale(.35);transition:.15s var(--ease)}
.unav a:hover{color:var(--text)}
.unav a:hover .ui{filter:none;transform:translateY(-1px)}
.unav a[aria-current="page"]{color:var(--accent)}
.unav a[aria-current="page"] .ui{filter:none}
.unav .ubdg{
  position:absolute;top:5px;right:calc(50% - 20px);min-width:16px;height:16px;
  padding:0 4px;border-radius:var(--r-pill);background:var(--accent);color:#fff;
  font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;
}

/* --- celular e tablet: barra inferior --- */
@media(max-width:1023px){
  .unav .ulogo{display:none}   /* logo é só do trilho lateral */
  .unav{
    left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    border-width:1px 0 0 0;justify-content:space-around;align-items:stretch;
    box-shadow:0 -8px 26px rgba(0,0,0,.45);
  }
  .unav a{flex:1;padding:9px 2px 7px;min-width:0}
  .unav a[aria-current="page"]::before{
    content:"";position:absolute;top:0;left:22%;right:22%;height:2.5px;
    background:var(--accent);border-radius:0 0 3px 3px;
  }
  body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 6px)!important}
}

/* --- desktop: trilho lateral --- */
@media(min-width:1024px){
  .unav{
    top:0;bottom:0;left:0;width:var(--nav-w);
    border-width:0 1px 0 0;flex-direction:column;align-items:stretch;
    padding:14px 0 18px;gap:2px;
  }
  .unav a{padding:11px 4px;border-radius:0}
  .unav a[aria-current="page"]{background:var(--accent-soft)}
  .unav a[aria-current="page"]::before{
    content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
    background:var(--accent);border-radius:0 3px 3px 0;
  }
  .unav .ulogo{
    display:flex;align-items:center;justify-content:center;height:44px;margin-bottom:10px;
    font-size:21px;
  }
  body{padding-left:var(--nav-w)!important}
}

/* a navegação some quando não faz sentido (login, telas de foco) */
.unav[hidden]{display:none}

/* ====================== ACESSIBILIDADE E BASE COMUM ====================== */

/* alvo de toque decente no celular — regra do projeto */
@media(max-width:768px){
  button,.btn,[role="button"],select,input[type="date"],input[type="number"]{min-height:40px}
  /* O CARTAO DENSO DA GRADE E A EXCECAO, e ela e obrigatoria.
     A regra acima punha 40px de altura no `✕` de cancelar dentro do cartao da
     Semana; o cartao virava 44px, e tres posts na mesma hora empilhavam 138px
     numa faixa de 70px, invadindo as duas horas seguintes. Medido em 700px: 24
     pares de cartoes um por cima do outro.
     Nesses cartoes o alvo nao se ganha em altura de botao — o cartao INTEIRO e
     clicavel, e ele ja passa dos 40px. */
  .chip,.chip button,.chip [role="button"],.chipcancel{min-height:0}
}

/* foco visível pra quem navega por teclado */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm);
}

/* respeita quem pediu menos animação no sistema */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* nenhuma tela pode rolar de lado — o defeito nº1 em celular */
html,body{overflow-x:clip}

/* imagem e mídia nunca estouram o container */
img,video,canvas,svg{max-width:100%}

/* tabela larga rola dentro do próprio quadro, não empurra a página */
.utable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ========================== BARRA DA TELA (.ubar) =========================
   Toda tela tem o mesmo cabeçalho, nas mesmas posições. Antes cada uma tinha
   o seu: a Central com as abas dentro da barra, os Comentários com as abas
   soltas embaixo, o Minerador e o Painel com um cartão flutuante. Trocar de
   tela obrigava a reaprender onde ficava cada botão.

   Ordem, sempre a mesma:
     identidade (ícone + título + subtítulo) | abas da tela | ferramentas | ação

   Telas sem subseção simplesmente deixam o espaço das abas vazio — o resto
   continua no mesmo lugar. */

.ubar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:var(--sp-3);
  padding:10px 22px;min-height:60px;
  background:var(--panel);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-family:var(--sans);
}
.ubar-id{display:flex;align-items:center;gap:11px;min-width:0;flex:0 1 auto}
.ubar-id > div{min-width:0}
.ubar-ico{
  width:38px;height:38px;border-radius:11px;flex:none;
  display:grid;place-items:center;font-size:19px;
  background:linear-gradient(135deg,var(--accent),var(--data));
}
.ubar-id h1{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ubar-id .ubar-sub{
  font-size:11.5px;color:var(--muted);font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* abas da tela — o seletor de seção mora aqui, nunca solto no corpo */
.ubar-tabs{
  display:flex;gap:4px;padding:4px;flex:none;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r-md);
}
.ubar-tabs button,.ubar-tabs a{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;text-decoration:none;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:7px 15px;border-radius:9px;transition:.15s var(--ease);
}
.ubar-tabs button:hover,.ubar-tabs a:hover{color:var(--text);background:var(--panel-3)}
.ubar-tabs .on{background:var(--accent);color:#fff}
.ubar-tabs .on:hover{background:var(--accent);color:#fff}

.ubar-tools{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;min-width:0;flex-wrap:nowrap}
/* texto de status nunca estica a barra: corta com reticencias */
.ubar-tools > *{flex:none}
.ubar .live{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ubar-cta{flex:none}

/* botão comum da barra: mesma altura e mesmo peso em todas as telas */
.ubar .ubtn{
  border:1px solid var(--line-2);background:var(--panel-2);color:var(--text);
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 14px;border-radius:10px;white-space:nowrap;
  transition:.15s var(--ease);
}
.ubar .ubtn:hover{background:var(--panel-3);border-color:var(--accent-line)}
.ubar .ubtn.pri{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;color:#fff;
}
.ubar .ubtn.pri:hover{filter:brightness(1.08)}
.ubar .ubtn.ico{width:38px;padding:0;font-size:16px}

/* --- tablet: o subtítulo é o primeiro a sair --- */
@media(max-width:1100px){
  .ubar-id .ubar-sub{display:none}
  .ubar{gap:var(--sp-2);padding:10px 16px}
}

/* --- celular: duas linhas fixas ---------------------------------------
   Linha 1: quem é a tela, as ferramentas e a ação principal.
   Linha 2: as abas, ocupando a largura inteira.

   As abas precisam da linha só pra elas: dividindo espaço com o relógio e o
   fuso, "Contas" e "Comentários" apareciam cortados no meio da palavra num
   celular de 360px. */
@media(max-width:820px){
  .ubar{
    flex-wrap:wrap;padding:9px 14px;
    padding-top:calc(9px + env(safe-area-inset-top));row-gap:9px;
    column-gap:var(--sp-2);
  }
  .ubar-id{order:1;flex:1 1 0;min-width:0}
  .ubar-id h1{font-size:15px}
  .ubar-ico{width:32px;height:32px;font-size:16px;border-radius:9px}
  /* as ferramentas ganham a propria linha: disputando a primeira com o titulo e a
     acao, o seletor de datas do Painel espremia "Metricas" ate virar "M." */
  .ubar-tools{order:5;flex:1 0 100%;margin-left:0;justify-content:flex-end}
  .ubar-cta{order:2;flex:0 0 auto;min-width:0}
  .ubar-cta .ubtn{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block;
    line-height:36px;text-align:center}
  .ubar-tabs{
    order:3;flex:1 0 100%;width:100%;min-width:0;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .ubar-tabs::-webkit-scrollbar{display:none}
  .ubar-tabs button,.ubar-tabs a{flex:1 0 auto;justify-content:center;padding:8px 13px}
  .ubar .ubtn{height:36px;padding:0 11px;font-size:12.5px}
  .ubar .ubtn.ico{width:36px}
}

/* --- celular estreito (360px e afins): aperta o que dá pra apertar --- */
@media(max-width:480px){
  .ubar{padding-left:11px;padding-right:11px}
  .ubar-tabs button .ic,.ubar-tabs a .ic{display:none}  /* o rótulo importa mais que o emoji */
  .ubar-tabs button,.ubar-tabs a{padding:8px 10px;font-size:12px;gap:0}
  .ubar .ubtn{padding:0 9px;font-size:12px}
}

/* ===== relógio de fuso horário (todas as telas) =====
   Copiado do que a Central já usava, para o visual ser o mesmo em tudo. A
   Central continua com a cópia dela, declarada no <style> da própria página —
   como o <style> vem depois deste arquivo, ela ganha e nada muda lá. */
.tzcontrol{display:flex;align-items:center;gap:7px}
.tzsel{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--text);
  background:var(--panel);border:1px solid var(--border2);border-radius:10px;
  padding:7px 10px;cursor:pointer;
  /* Editor e Comentarios tem uma regra propria de largura pra `select` dentro de
     cartao, que esticava este seletor de fuso e deixava o relogio torto so
     nessas duas telas. Fixar aqui conserta as duas sem tocar nos HTML. */
  width:auto}
.tzsel:hover{border-color:var(--accent)}
.tzclock{min-width:74px;text-align:center;font-family:var(--mono);font-size:12px;
  font-weight:700;letter-spacing:.04em;color:var(--cy);background:rgba(58,240,234,.06);
  border:1px solid rgba(58,240,234,.24);border-radius:10px;padding:7px 9px;
  font-variant-numeric:tabular-nums}
/* tela sem cabeçalho conhecido: o relógio flutua no canto */
.tzcontrol.tzfloat{position:fixed;top:10px;right:12px;z-index:60}
@media(max-width:900px){
  .tzcontrol{order:5;display:flex;flex:1;min-width:0;max-width:330px}
  .tzsel{flex:1;min-width:0}
}
@media(max-width:560px){
  .tzcontrol{flex:1 0 100%;width:auto;max-width:none}
}

/* ---- a entrada do Cron na navegacao ----
   O botao vive no HTML de cada tela e o estilo vinha copiado junto, quatro
   vezes. Aqui ele fica UMA vez, no arquivo que todas ja carregam — e as telas
   que so tem o link (Minerador e Editor) herdam o mesmo desenho das que tem o
   painel, em vez de inventarem um proprio. */
.unavadm{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;background:none;border:0;cursor:pointer;color:var(--muted);
  font:700 9.5px/1 var(--sans);letter-spacing:.02em;padding:0;position:relative;
  text-decoration:none}
.unavadm:hover{color:var(--tx)}
.unavadm .rot{font-size:9.5px}
/* a orbita: o ponto da a volta do dia. `transform` e composto pela GPU — nao
   repinta nada, entao roda o dia inteiro sem custo perceptivel. */
.unavadm .orbsvg{overflow:visible}
.unavadm .orb{transform-origin:12px 12px;animation:admorb 9s linear infinite}
@keyframes admorb{to{transform:rotate(360deg)}}
.unavadm .rastro{opacity:0;transition:opacity .3s}
.unavadm:hover .orb{animation-duration:3.5s}
.unavadm:hover .rastro{opacity:.5}
@media (prefers-reduced-motion:reduce){ .unavadm .orb{animation:none} }
/* barra horizontal (ate 1023): o item divide o espaco como os <a> irmaos */
@media (max-width:1023px){ .unavadm{flex:1;min-width:0;padding:9px 2px 7px;height:auto} }
/* trilho lateral (1024+): ocupa a largura da coluna */
@media (min-width:1024px){ .unavadm{width:100%;padding:11px 4px;margin-bottom:6px} }


/* ---- o aquecimento, dentro da engrenagem da pagina -------------------- */
.engaqtop{display:flex;align-items:center;gap:8px;cursor:pointer;
  font:700 13px/1.2 var(--sans);margin:0 0 8px}
.engaqtop input{width:16px;height:16px;accent-color:var(--ig2,#c13584);cursor:pointer}
.engaqlado{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  transition:opacity .15s}
.engaqlado input[type=number]{width:74px}
.engaqrot{color:var(--muted,#8b93a7);font-size:12.5px}
#engAqDica{margin-top:7px;line-height:1.55}


/* ---- a marca de dia fora do normal, na Programacao ------------------
   Rodada extra de mineracao, manutencao, queda. Sem ela um dia atipico
   vira um dia comum no historico, e a leitura de "por que rendeu
   diferente?" comeca no escuro. */
.pgdianota{display:inline-flex;align-items:center;gap:5px;margin-left:10px;
  padding:4px 9px;border-radius:999px;font:600 11px/1 var(--sans);
  color:#f5a524;background:rgba(245,165,36,.13);
  border:1px solid rgba(245,165,36,.28);vertical-align:middle}
@media(max-width:768px){
  .pgdianota{display:flex;margin:8px 0 0;width:fit-content}
}


/* ---- o painel do Cron, compartilhado -----------------------------
   Copiado do web-central.html sem alterar uma regra, INCLUSIVE a tabela
   e a ficha de celular. Recortar so o overlay foi o erro da primeira
   versao: o menu injetado nascia sem estilo. */
  .unavadm{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;background:none;border:0;cursor:pointer;color:var(--muted);
    font:700 9.5px/1 var(--sans);letter-spacing:.02em;padding:0;position:relative}
  .unavadm:hover{color:var(--tx)}
  .unavadm .rot{font-size:9.5px}
  /* a orbita: o ponto da a volta do dia. Devagar sempre; rapido e verde quando
     alguma peca esta de pe. `transform` e composto pela GPU — nao repinta nada,
     entao roda o dia inteiro sem custo perceptivel. */
  .unavadm .orbsvg{overflow:visible}
  .unavadm .orb{transform-origin:12px 12px;animation:admorb 9s linear infinite}
  @keyframes admorb{to{transform:rotate(360deg)}}
  .unavadm .rastro{opacity:0;transition:opacity .3s}
  .unavadm:hover .orb{animation-duration:3.5s}
  .unavadm:hover .rastro{opacity:.5}
  /* alguma coisa rodando: acelera, acende e o miolo pulsa */
  .unavadm.viva{color:var(--ok,#34c759)}
  .unavadm.viva .orb{animation-duration:2.4s}
  .unavadm.viva .rastro{opacity:.6}
  .unavadm.viva .miolinho{animation:admmiolo 1.5s ease-in-out infinite}
  @keyframes admmiolo{0%,100%{opacity:.35;r:1.5}50%{opacity:1;r:2.4}}
  /* respeita quem pediu menos animacao no sistema */
  @media (prefers-reduced-motion:reduce){
    .unavadm .orb,.unavadm .miolinho{animation:none}
  }
  .unavadm .pt{display:none}
  /* barra horizontal (celular e notebook ate 1023): o botao e mais um item, e
     divide o espaco como os <a> irmaos — `flex:1` igual ao `.unav a` do ui.css */
  @media (max-width:1023px){
    .unavadm{flex:1;min-width:0;padding:9px 2px 7px;height:auto}
  }
  /* trilho lateral (1024+): ai sim ocupa a largura da coluna */
  @media (min-width:1024px){
    .unavadm{width:100%;padding:11px 4px;margin-bottom:6px}
  }

  /* ---- o menu ---- */
  .admov{position:fixed;inset:0;z-index:1200;background:rgba(5,7,12,.72);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;padding:22px}
  .admov.on{display:flex}
  .admpn{background:var(--panel);border:1px solid var(--line2,var(--line));
    border-radius:15px;width:100%;max-width:660px;max-height:84vh;display:flex;
    flex-direction:column;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);overflow:hidden}
  .admhd{display:flex;align-items:center;gap:10px;padding:16px 18px 12px}
  .admhd h3{margin:0;font:750 15px/1.2 var(--sans)}
  .admhd .qd{margin-left:auto;font:11px/1 var(--mono);color:var(--muted)}
  .admhd .x{background:none;border:0;color:var(--muted);font-size:19px;cursor:pointer;
    line-height:1;padding:0 2px}
  .admhd .x:hover{color:var(--tx)}
  .admsub{padding:0 18px 12px;font-size:11.5px;color:var(--muted);line-height:1.5}
  .admbd{overflow-y:auto;padding:0 8px 6px;flex:1}
  .admft{padding:12px 18px 16px;border-top:1px solid var(--line)}
  .admft a{display:block;text-align:center;padding:11px;border-radius:10px;
    background:var(--accent,#ff3b6b);color:#fff;text-decoration:none;
    font:700 13px/1 var(--sans)}
  .admft a:hover{filter:brightness(1.08)}

  /* ---- a lista do cron, no desenho do plano-automacao ---- */
  table.admtb{width:100%;border-collapse:collapse;font-size:13px}
  table.admtb th{text-align:left;font:600 11px/1 var(--mono);letter-spacing:.5px;
    text-transform:uppercase;color:var(--muted);padding:8px 10px;
    background:var(--panel);position:sticky;top:0;z-index:2;
    border-bottom:1px solid var(--line)}
  table.admtb td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;
    text-align:left}
  table.admtb tr:last-child td{border-bottom:0}
  table.admtb tr:hover td{background:var(--panel-2)}
  table.admtb tr.ag td{opacity:.5}
  table.admtb tr.viva td{background:rgba(59,130,246,.09)}
  /* a coluna da hora: o intervalo inteiro quando a peca dura, como no plano */
  td.admh{white-space:nowrap;font:550 13px/1.35 var(--mono);color:var(--tx);width:106px}
  td.admh small{display:block;font-size:10.5px;color:var(--muted);font-weight:400;
    margin-top:2px;letter-spacing:0}
  td.admq{width:74px}
  td.admo b{font-weight:650}
  td.admo small{display:block;font-size:11px;color:var(--muted);margin-top:3px;
    line-height:1.4}
  td.admes{width:112px;text-align:right;white-space:nowrap}
  /* o selo, igual ao .t2 do plano */
  .t2a{display:inline-block;white-space:nowrap;font:650 10.5px/1 var(--mono);
    letter-spacing:.3px;padding:4px 7px;border-radius:4px;text-transform:uppercase}
  .admvazio{padding:26px 16px;text-align:center;color:var(--muted);font-size:12px;line-height:1.6}

  /* ---- CELULAR: a tabela vira ficha ----
     Quatro colunas com 292px fixos (hora 106 + quem 74 + estado 112) nao cabem num
     telefone: num 430px sobram 94px pra descricao, e cada celula quebrava em cinco
     linhas com o selo de Estado cortado pela metade. Aqui cada linha vira uma
     ficha de duas alturas:

         00:20-05:00                    [SEM REGISTRO]
         [MAQUINA]  Minerar - sessao 1, a janela mais longa

     A hora e o estado sao o que se le de relance ("ja rodou?"), entao ficam na
     linha de cima, nas pontas. O nome e a descricao ganham a largura inteira. */
  /* A fronteira e 820 e nao 640 por medicao, nao por gosto: o painel fica com
     (janela - 44)px, e as quatro colunas so respiram a partir de ~710px de tabela.
     Num tablet de 768 o painel da 724 e o analytics ainda estourava 4px. Entre
     640 e 820 a tabela cabia so no papel. */
  @media (max-width:820px){
    .admov{padding:10px}
    .admpn{max-height:92vh}
    .admhd{padding:14px 14px 10px}
    .admsub{padding:0 14px 10px}
    .admbd{padding:0 12px 6px}
    .admft{padding:10px 14px 14px}

    table.admtb, table.admtb tbody{display:block;width:100%}
    table.admtb thead{display:none}
    table.admtb tr{
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      grid-template-areas:"hora estado" "quem oque";
      gap:6px 10px;
      padding:11px 4px;
      border-bottom:1px solid var(--line);
      border-radius:8px}
    table.admtb tr:last-child{border-bottom:0}
    table.admtb td{display:block;padding:0;border:0;width:auto;background:none}
    table.admtb tr:hover td{background:none}
    table.admtb tr.viva{background:rgba(59,130,246,.09)}

    /* `table.admtb td` e nao so `td`: no Painel havia uma regra mais especifica
       que ganhava daqui, e a fonte subia pra 13.5px. Como a coluna 1 e `auto`,
       o selo QUEM crescia junto e roubava largura da descricao — 180px contra
       220px na Central, e a mesma frase virava 4.8 linhas em vez de 3.1. */
    table.admtb td.admh{grid-area:hora;align-self:center;font-size:12.5px}
    table.admtb td.admq .t2a{font-size:10px;padding:3px 6px}
    td.admes{grid-area:estado;align-self:center;text-align:right;width:auto}
    td.admq{grid-area:quem;align-self:start;width:auto;padding-top:1px}
    table.admtb td.admo{grid-area:oque;align-self:start;font-size:12.5px;line-height:1.45}
    table.admtb td.admo b{font-size:12.5px}
    table.admtb td.admo small{font-size:11px;margin-top:4px}
  }