/* Painel SofTCHÊ — estilos. Escuro por padrão do sistema; claro quando o aparelho pede. */
:root {
  color-scheme: dark;
  --fundo: #0b0f0d;
  --sup: #131816;
  --sup-2: #1a211d;
  --sup-3: #222a26;
  --linha: rgba(255, 255, 255, 0.09);
  --linha-forte: rgba(255, 255, 255, 0.16);
  --texto: #eef2ef;
  --texto-2: #bcc5bf;
  --apagado: #8a948d;
  --marca: #17936f;
  --marca-forte: #2fc596;
  --foco: #7fe0bf;
  /* séries (identidade) */
  --s1: #3987e5;
  --s2: #d95926;
  --s3: #199e70;
  --s4: #c98500;
  /* estado (reservadas, nunca usadas como série) */
  --ok: #0ca30c;
  --aviso: #fab219;
  --serio: #ec835a;
  --critico: #d03b3b;
  --critico-texto: #ff8f8f;
  --ok-texto: #5fd35f;
  --aviso-texto: #fbc54e;
  --grade: #2c2c2a;
  --raio: 12px;
  --raio-p: 8px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --fundo: #f3f5f2;
    --sup: #ffffff;
    --sup-2: #f6f8f5;
    --sup-3: #ecefeb;
    --linha: rgba(11, 20, 15, 0.1);
    --linha-forte: rgba(11, 20, 15, 0.2);
    --texto: #0d1410;
    --texto-2: #46504a;
    --apagado: #6c766f;
    --marca: #0f7a50;
    --marca-forte: #0f7a50;
    --foco: #0f7a50;
    --s1: #2a78d6;
    --s2: #eb6834;
    --s3: #1baf7a;
    --s4: #eda100;
    --critico-texto: #b42323;
    --ok-texto: #006300;
    --aviso-texto: #8a5a00;
    --grade: #e1e0d9;
    --sombra: 0 10px 30px rgba(20, 30, 25, 0.16);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 108px; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.num, .tabela td.n, .tabela th.n, time, .relogio { font-variant-numeric: tabular-nums; }

.pular { position: absolute; left: -999px; top: 8px; background: var(--sup); padding: 8px 12px; border-radius: 6px; z-index: 50; }
.pular:focus { left: 8px; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fundo) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
  padding-top: env(safe-area-inset-top);
}
.topo-dentro { display: flex; align-items: center; gap: 12px; max-width: 1560px; margin: 0 auto; padding: 10px 16px 8px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marca-icone { width: 30px; height: 30px; flex: none; }
.marca-nome { font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }
.marca-nome b { font-weight: 700; }
.topo-estado { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; }
.relogio { color: var(--apagado); font-size: 13px; white-space: nowrap; }
.topo-acoes { display: flex; gap: 4px; }

.vivo { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); white-space: nowrap; }
.vivo-ponto { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--apagado); flex: none; }
.vivo[data-estado="vivo"] .vivo-ponto { background: var(--ok); }
.vivo[data-estado="vivo"] .vivo-ponto::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ok);
  animation: pulso 2s ease-out infinite;
}
.vivo[data-estado="caiu"] .vivo-ponto { background: var(--critico); }
.vivo[data-estado="pausado"] .vivo-ponto { background: var(--aviso); }
@keyframes pulso { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3.2); opacity: 0; } }

.atalhos {
  display: flex; gap: 4px; max-width: 1560px; margin: 0 auto; padding: 0 12px 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.atalhos::-webkit-scrollbar { display: none; }
.atalhos a {
  flex: none; text-decoration: none; font-size: 13px; color: var(--texto-2);
  padding: 6px 11px; border-radius: 999px; min-height: 32px; display: inline-flex; align-items: center;
}
.atalhos a:hover { background: var(--sup-2); color: var(--texto); }

/* ---------- estrutura ---------- */
main { max-width: 1560px; margin: 0 auto; padding: 16px 16px 40px; display: grid; gap: 28px; }
main:focus { outline: none; }
.bloco { min-width: 0; }
.bloco-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bloco-cab h2 { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; }
.bloco-acoes { display: flex; gap: 8px; }
.sub { font-size: 13px; font-weight: 400; color: var(--apagado); margin-left: 6px; }
.duas { display: grid; gap: 28px; min-width: 0; }
@media (min-width: 1100px) { .duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } }

.cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; min-width: 0; }
.cartao h3 { font-size: 13px; font-weight: 600; color: var(--texto-2); letter-spacing: 0.01em; }
.cartao-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.heroi { font-size: 34px; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; margin-top: 4px; }
.heroi.m { font-size: 26px; }
.heroi .un { font-size: 0.55em; font-weight: 500; color: var(--texto-2); margin-left: 2px; }
.heroi-sub { font-size: 13px; font-weight: 400; color: var(--apagado); letter-spacing: 0; }
.detalhe { font-size: 12.5px; color: var(--apagado); margin-top: 6px; }
.nota { font-size: 12.5px; color: var(--texto-2); margin-top: 10px; line-height: 1.5; }
.vazio { color: var(--apagado); font-size: 13px; padding: 14px 0; }

/* ---------- botões e abas ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: var(--raio-p);
  border: 1px solid var(--linha-forte); background: var(--sup-2); cursor: pointer;
  font-size: 14px; font-weight: 550; white-space: nowrap; transition: background 0.15s, border-color 0.15s;
}
.botao:hover { background: var(--sup-3); }
.botao:disabled { opacity: 0.5; cursor: not-allowed; }
.botao.pequeno { min-height: 34px; padding: 0 11px; font-size: 13px; }
.botao.fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.botao.fantasma:hover { background: var(--sup-2); color: var(--texto); }
.botao.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.botao.primario:hover { filter: brightness(1.1); }
.botao.perigo { color: var(--critico-texto); border-color: color-mix(in srgb, var(--critico) 55%, transparent); background: color-mix(in srgb, var(--critico) 12%, transparent); }
.botao.perigo:hover { background: color-mix(in srgb, var(--critico) 22%, transparent); }
.botao.icone { width: 40px; padding: 0; }

.abas { display: inline-flex; background: var(--sup-2); border: 1px solid var(--linha); border-radius: 9px; padding: 3px; gap: 2px; }
.abas button {
  border: 0; background: transparent; cursor: pointer; font-size: 13px; color: var(--texto-2);
  padding: 0 11px; min-height: 30px; border-radius: 6px; white-space: nowrap;
}
.abas button[aria-selected="true"] { background: var(--sup-3); color: var(--texto); font-weight: 600; box-shadow: 0 0 0 1px var(--linha); }

/* ---------- selos de estado (sempre ícone + texto, nunca só cor) ---------- */
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--sup-3); color: var(--texto-2); white-space: nowrap; }
.selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--apagado); flex: none; }
.selo.ok { color: var(--ok-texto); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.selo.ok::before { background: var(--ok); }
.selo.aviso { color: var(--aviso-texto); background: color-mix(in srgb, var(--aviso) 15%, transparent); }
.selo.aviso::before { background: var(--aviso); border-radius: 2px; transform: rotate(45deg); }
.selo.critico { color: var(--critico-texto); background: color-mix(in srgb, var(--critico) 18%, transparent); }
.selo.critico::before { background: var(--critico); border-radius: 1px; }
.selo.info::before { background: var(--s1); }

.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--apagado); flex: none; position: relative; display: inline-block; }
.ponto.ok { background: var(--ok); }
.ponto.aviso { background: var(--aviso); border-radius: 2px; transform: rotate(45deg); }
.ponto.critico { background: var(--critico); border-radius: 1px; }
.ponto.vivo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulso 2.4s ease-out infinite; }

/* ---------- resumo ---------- */
.resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .resumo { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.resumo a {
  display: block; text-decoration: none; background: var(--sup); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 12px 14px; min-width: 0; transition: border-color 0.15s, transform 0.15s;
}
.resumo a:hover { border-color: var(--linha-forte); transform: translateY(-1px); }
.resumo .r-rotulo { font-size: 12.5px; color: var(--texto-2); display: flex; align-items: center; gap: 7px; }
.resumo .r-valor { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resumo .r-valor small { font-size: 13px; font-weight: 400; color: var(--apagado); }
.resumo .r-nota { font-size: 12px; color: var(--apagado); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resumo a[data-nivel="critico"] { border-color: color-mix(in srgb, var(--critico) 60%, transparent); background: color-mix(in srgb, var(--critico) 9%, var(--sup)); }
.resumo a[data-nivel="aviso"] { border-color: color-mix(in srgb, var(--aviso) 45%, transparent); }

/* ---------- alertas ---------- */
.alertas { display: grid; gap: 8px; }
.alerta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; }
.alerta[data-nivel="critico"] { background: color-mix(in srgb, var(--critico) 10%, var(--sup)); border-color: color-mix(in srgb, var(--critico) 50%, transparent); }
.alerta[data-nivel="aviso"] { border-color: color-mix(in srgb, var(--aviso) 40%, transparent); }
.alerta[data-resolvido] { opacity: 0.62; }
.alerta-titulo { font-weight: 600; font-size: 14.5px; }
.alerta-det { grid-column: 2; font-size: 13px; color: var(--texto-2); white-space: pre-line; }
.alerta-meta { grid-column: 2; font-size: 12px; color: var(--apagado); }
.alerta .botao { grid-row: 1 / span 2; grid-column: 3; align-self: start; }
@media (max-width: 560px) { .alerta { grid-template-columns: auto minmax(0, 1fr); } .alerta .botao { grid-row: auto; grid-column: 2; justify-self: start; order: 5; margin-top: 6px; } }

/* ---------- VPS ---------- */
.vps-grade { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.mini-grade { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .vps-grade { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .mini-grade { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .processos-cartao { grid-column: 1; }
  .hostinger-cartao { grid-column: 2; }
  .processos-cartao:last-child, .processos-cartao:has(+ .hostinger-cartao[hidden]) { grid-column: 1 / -1; }
}
.grafico { height: 220px; margin-top: 8px; position: relative; }
.grafico.baixo { height: 150px; }
.grafico.medio { height: 190px; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--texto-2); margin-top: 10px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.amostra { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.amostra.s1 { background: var(--s1); } .amostra.s2 { background: var(--s2); } .amostra.s3 { background: var(--s3); } .amostra.s4 { background: var(--s4); }
.nucleos { display: grid; gap: 6px; margin-top: 12px; }
.nucleo { display: grid; grid-template-columns: 62px minmax(0, 1fr) 46px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--texto-2); }
.nucleo .pilha { height: 8px; border-radius: 4px; background: var(--sup-3); position: relative; overflow: hidden; }
.nucleo .pilha i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nucleo .pilha .u { background: var(--s1); } .nucleo .pilha .r { background: var(--s2); }
.nucleo b { text-align: right; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }

.limite-estado { margin-top: 8px; }
.limite-cartao[data-nivel="critico"] { border-color: color-mix(in srgb, var(--critico) 60%, transparent); background: color-mix(in srgb, var(--critico) 8%, var(--sup)); }
.limite-cartao[data-nivel="aviso"] { border-color: color-mix(in srgb, var(--aviso) 45%, transparent); }
.medidor { margin-top: 12px; }
.medidor-trilho { position: relative; height: 10px; border-radius: 5px; background: var(--sup-3); }
.medidor-trilho { overflow: visible; }
.medidor-clip { position: absolute; inset: 0; border-radius: 5px; overflow: hidden; }
.medidor-valor { height: 100%; background: var(--s2); transform-origin: left; transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.medidor-marca { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--texto-2); left: 50%; }
.medidor-escala { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--apagado); margin-top: 6px; }
.pares { display: grid; gap: 6px; margin-top: 14px; }
.pares > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.pares dt { color: var(--texto-2); }
.pares dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.barra { height: 8px; border-radius: 4px; background: var(--sup-3); margin-top: 10px; overflow: hidden; }
.barra > div { height: 100%; background: var(--s1); transform-origin: left; transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s; }
.barra > div[data-nivel="aviso"] { background: var(--aviso); }
.barra > div[data-nivel="critico"] { background: var(--critico); }
.duplo { display: flex; gap: 14px; margin-top: 8px; font-size: 15px; flex-wrap: wrap; }
.duplo span { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.duplo b { font-weight: 650; font-variant-numeric: tabular-nums; }
.seta { font-style: normal; color: var(--apagado); }
.mini-graf { height: 34px; margin-top: 8px; }
.mini-graf svg, .faisca svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- tabelas ---------- */
.tabela-rolagem { overflow-x: auto; margin-top: 8px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-weight: 500; color: var(--apagado); font-size: 12px; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .n { text-align: right; padding-right: 0; white-space: nowrap; }
.tabela td.cmd { max-width: 340px; }
.cmd b { display: block; font-weight: 600; }
.cmd span { display: block; color: var(--apagado); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.sqltxt { font-family: var(--mono); font-size: 12px; color: var(--texto-2); word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- containers ---------- */
.containers { display: grid; gap: 6px; }
.ctn {
  display: grid; align-items: center; gap: 4px 14px; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 10px 12px; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "p nome acoes" ". cpu cpu" ". mem mem" ". meta meta";
}
.ctn[data-nivel="critico"] { border-color: color-mix(in srgb, var(--critico) 55%, transparent); background: color-mix(in srgb, var(--critico) 8%, var(--sup)); }
.ctn[data-nivel="aviso"] { border-color: color-mix(in srgb, var(--aviso) 40%, transparent); }
.ctn > .ponto { grid-area: p; }
.ctn-nome { grid-area: nome; min-width: 0; }
.ctn-nome b { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctn-nome span { display: block; font-size: 12px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctn-cpu { grid-area: cpu; display: grid; grid-template-columns: 38px minmax(0, 1fr) 54px; gap: 8px; align-items: center; font-size: 12px; color: var(--apagado); }
.ctn-mem { grid-area: mem; display: grid; grid-template-columns: 38px minmax(0, 1fr) 72px; gap: 8px; align-items: center; font-size: 12px; color: var(--apagado); }
.ctn-cpu b, .ctn-mem b { text-align: right; color: var(--texto); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctn .trilho { height: 6px; border-radius: 3px; background: var(--sup-3); overflow: hidden; }
.ctn .trilho i { display: block; height: 100%; background: var(--s1); transform-origin: left; transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ctn .trilho i[data-nivel="aviso"] { background: var(--aviso); }
.ctn .faisca { height: 22px; color: var(--s3); }
.ctn-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--apagado); align-items: center; }
.ctn-acoes { grid-area: acoes; display: flex; gap: 2px; }
.ctn-acoes .botao { min-height: 36px; padding: 0 9px; font-size: 12.5px; }
.tend { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--sup-3); color: var(--texto-2); white-space: nowrap; }
.tend.sobe { color: var(--aviso-texto); background: color-mix(in srgb, var(--aviso) 15%, transparent); }
@media (min-width: 1000px) {
  .ctn {
    grid-template-columns: 14px minmax(160px, 1.5fr) minmax(170px, 1fr) minmax(210px, 1.2fr) minmax(170px, 1.1fr) auto;
    grid-template-areas: "p nome cpu mem meta acoes"; padding: 8px 12px;
  }
}

/* ---------- sites ---------- */
.grupo-titulo { font-size: 12.5px; font-weight: 600; color: var(--texto-2); margin: 14px 0 8px; display: flex; gap: 8px; align-items: center; }
.grupo-titulo:first-child { margin-top: 0; }
.sites { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.site {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; text-align: left;
  background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 9px 12px; cursor: pointer; width: 100%; min-height: 52px;
}
.site:hover { border-color: var(--linha-forte); }
.site[data-nivel="critico"] { border-color: color-mix(in srgb, var(--critico) 60%, transparent); background: color-mix(in srgb, var(--critico) 10%, var(--sup)); }
.site[data-nivel="aviso"] { border-color: color-mix(in srgb, var(--aviso) 40%, transparent); }
.site-nome { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-ms { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-sub { grid-column: 2 / -1; font-size: 12px; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dominios { display: flex; flex-wrap: wrap; gap: 6px; }
.dominio { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: var(--sup); border: 1px solid var(--linha); color: var(--texto-2); white-space: nowrap; }
.dominio b { color: var(--texto); font-weight: 600; }
.dominio[data-nivel="aviso"] { border-color: color-mix(in srgb, var(--aviso) 50%, transparent); }
.dominio[data-nivel="critico"] { border-color: color-mix(in srgb, var(--critico) 60%, transparent); }

/* ---------- blocos de dados (SQL, n8n, backups, rede) ---------- */
.pilha-cartoes { display: grid; gap: 12px; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
.numero dt { font-size: 12px; color: var(--apagado); }
.numero dd { font-size: 21px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numero dd small { font-size: 12px; font-weight: 400; color: var(--apagado); }
.barras { display: grid; gap: 7px; margin-top: 10px; }
.barra-linha { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.barra-linha span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto-2); }
.barra-linha .trilho { height: 6px; border-radius: 3px; background: var(--sup-3); overflow: hidden; }
.barra-linha .trilho i { display: block; height: 100%; background: var(--s1); transform-origin: left; transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.barra-linha b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.subtitulo { font-size: 12.5px; font-weight: 600; color: var(--texto-2); margin: 16px 0 6px; }
.subtitulo:first-child { margin-top: 0; }
.lista { display: grid; }
.lista > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 13px; }
.lista > li:last-child { border-bottom: 0; }
.lista .l-titulo { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista .l-sub { grid-column: 2 / -1; font-size: 12px; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; }
.lista .l-dir { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }

.destaque { border: 1px solid var(--linha-forte); border-radius: var(--raio-p); padding: 12px; background: var(--sup-2); }
.destaque[data-nivel="critico"] { border-color: color-mix(in srgb, var(--critico) 60%, transparent); background: color-mix(in srgb, var(--critico) 9%, var(--sup-2)); }
.destaque-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.destaque-cab b { font-size: 14.5px; }
.execs { display: flex; gap: 3px; margin-top: 10px; flex-wrap: wrap; }
.exec { width: 14px; height: 22px; border-radius: 3px; background: var(--ok); border: 0; padding: 0; cursor: default; }
.exec.erro { background: var(--critico); height: 22px; position: relative; }
.exec.erro::after { content: "×"; position: absolute; inset: 0; color: #fff; font-size: 12px; line-height: 22px; text-align: center; font-weight: 700; }
.exec.outro { background: var(--apagado); }

.etapas { display: grid; gap: 0; }
.etapa { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--linha); align-items: center; }
.etapa:last-child { border-bottom: 0; }
.etapa b { font-weight: 600; font-size: 13.5px; }
.etapa .e-sub { grid-column: 2 / -1; font-size: 12.5px; color: var(--apagado); }
.etapa .e-dir { font-size: 12.5px; color: var(--texto-2); text-align: right; white-space: nowrap; }
.fichas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ficha { font-size: 12.5px; padding: 4px 9px; border-radius: 6px; background: var(--sup-2); border: 1px solid var(--linha); color: var(--texto-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ficha b { color: var(--texto); font-weight: 600; }
.ficha[data-nivel="critico"] { border-color: color-mix(in srgb, var(--critico) 60%, transparent); }
.colunas-2 { display: grid; gap: 16px; }
.numeros + .colunas-2, .numeros + .nota + .colunas-2 { margin-top: 18px; }
@media (min-width: 640px) { .colunas-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.mini-barras { height: 64px; margin-top: 8px; }
.mini-barras svg { width: 100%; height: 100%; display: block; }

/* ---------- linha do tempo ---------- */
.eventos { display: grid; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 4px 14px; margin-bottom: 10px; }
.evento { display: grid; grid-template-columns: 12px 92px minmax(0, 1fr); gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--linha); align-items: baseline; font-size: 13.5px; }
.evento:last-child { border-bottom: 0; }
.evento .ponto { align-self: center; }
.evento time { color: var(--apagado); font-size: 12.5px; white-space: nowrap; }
.evento-titulo { font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.evento-det { grid-column: 3; font-size: 12.5px; color: var(--apagado); overflow-wrap: anywhere; white-space: pre-line; }
.evento.novo { animation: chegou 1.2s ease-out; }
@keyframes chegou { from { background: color-mix(in srgb, var(--marca) 22%, transparent); } to { background: transparent; } }
@media (max-width: 520px) { .evento { grid-template-columns: 12px minmax(0, 1fr); } .evento time { grid-column: 2; grid-row: 2; } .evento-det { grid-column: 2; } }

/* ---------- rodapé ---------- */
.rodape .botao { min-height: 32px; margin: -6px 0; }
.rodape { max-width: 1560px; margin: 0 auto; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; font-size: 12.5px; color: var(--apagado); border-top: 1px solid var(--linha); }

/* ---------- diálogo ---------- */
.dialogo { border: 1px solid var(--linha-forte); border-radius: 14px; background: var(--sup); color: var(--texto); padding: 0; width: min(760px, calc(100vw - 20px)); max-height: min(88dvh, 900px); box-shadow: var(--sombra); }
.dialogo::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); }
.dialogo[open] { display: flex; flex-direction: column; animation: abre 0.18s ease-out; }
@keyframes abre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dialogo-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 10px 10px 18px; border-bottom: 1px solid var(--linha); }
.dialogo-cab h2 { font-size: 16px; font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.dialogo-corpo { padding: 16px 18px 18px; overflow: auto; }
.dialogo.largo { width: min(1100px, calc(100vw - 20px)); }
.campo { display: grid; gap: 6px; margin-top: 14px; }
.campo label { font-size: 13px; font-weight: 600; }
.campo input {
  font: inherit; font-size: 16px; color: var(--texto); background: var(--sup-2); border: 1px solid var(--linha-forte);
  border-radius: var(--raio-p); padding: 0 12px; min-height: 44px; width: 100%;
}
.campo input:focus { outline: 2px solid var(--foco); outline-offset: 1px; }
.campo small { font-size: 12.5px; color: var(--apagado); }
.acoes-dialogo { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.erro-form { color: var(--critico-texto); font-size: 13px; margin-top: 10px; min-height: 18px; }
.aviso-caixa { font-size: 13.5px; line-height: 1.5; padding: 11px 13px; border-radius: var(--raio-p); background: color-mix(in srgb, var(--aviso) 12%, transparent); border: 1px solid color-mix(in srgb, var(--aviso) 40%, transparent); }
.aviso-caixa.critico { background: color-mix(in srgb, var(--critico) 12%, transparent); border-color: color-mix(in srgb, var(--critico) 50%, transparent); }
.logs { font-family: var(--mono); font-size: 12px; line-height: 1.5; background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio-p); padding: 10px 12px; max-height: 52dvh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.logs .err { color: var(--critico-texto); }
.logs time { color: var(--apagado); margin-right: 8px; }
.dialogo-barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 10px; }

/* ---------- avisos flutuantes e dica ---------- */
.avisos { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.aviso-flutuante { background: var(--sup-3); border: 1px solid var(--linha-forte); border-radius: 10px; padding: 11px 14px; font-size: 14px; box-shadow: var(--sombra); animation: abre 0.2s ease-out; }
.aviso-flutuante.erro { border-color: color-mix(in srgb, var(--critico) 60%, transparent); }
.dica { position: fixed; z-index: 70; pointer-events: none; background: var(--sup-3); border: 1px solid var(--linha-forte); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; box-shadow: var(--sombra); max-width: 280px; font-variant-numeric: tabular-nums; }
.dica b { font-weight: 600; }
.dica .d-linha { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.dica .d-linha i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.dica .d-hora { color: var(--apagado); margin-bottom: 3px; }

/* ---------- uPlot ---------- */
.uplot { font-family: var(--fonte); width: 100%; }
.u-legend { display: none; }
.u-cursor-x { border-right: 1px solid var(--linha-forte) !important; }
.u-cursor-y { display: none; }

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .topo-acoes #abrir-auditoria { display: none; }
  .relogio { display: none; }
  .marca-nome { font-size: 15px; }
  .heroi { font-size: 30px; }
  .cartao { padding: 14px; }
  .grafico { height: 190px; }
  html { scroll-padding-top: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}