/* Sentinela — mesma cara do protótipo aprovado em 19/10/2026
   (https://claude.ai/artifact/Q76FL6UVRpJJmLszsYu5YV) e do design system do painel:
   Inter + JetBrains Mono, roxo #6d12ff, cinza #f1f5f9, borda lilás #e9e3f5. */
:root{
  --bg:#f1f5f9; --surface:#ffffff; --surface-2:#f6f4fb; --line:#e9e3f5; --field:#e2e6ef;
  --text:#20243a; --strong:#0f172a; --muted:#64748b;
  --accent:#6d12ff; --accent-2:#8b2cff; --accent-ink:#ffffff;
  --ok:#15803d; --ok-soft:#e5f7ec; --warn:#b45309; --warn-soft:#fff3d9;
  --crit:#d61f45; --crit-soft:#ffe8ed; --off:#7b8496; --off-soft:#eef1f5;
  --shadow:0 6px 18px rgba(66,21,124,.08);
  --font:'Inter',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  /* uma cor por medida nos gráficos da VPS (cores do design system do painel) */
  --c-cpu:#079df2; --c-mem:#6d12ff; --c-disco:#f59e0b; --c-in:#15a35b; --c-out:#ec145a;
  color-scheme:light;
}
/* Tema escolhido pelo ADM (Claro / Escuro / Sistema, padrão Claro): o tema.js
   marca data-pmv-tema-efetivo no <html>, como o painel. Só a paleta muda. */
html[data-pmv-tema-efetivo="escuro"]{
  --bg:#100d18; --surface:#1a1626; --surface-2:#221c31; --line:#2e2642; --field:#3a3150;
  --text:#e7e3f2; --strong:#ffffff; --muted:#9d96b2;
  --accent:#a77bff; --accent-2:#c3a0ff; --accent-ink:#14101f;
  --ok:#35d483; --ok-soft:#10301f; --warn:#ffb020; --warn-soft:#33270d;
  --crit:#ff5a6e; --crit-soft:#3a1420; --off:#8a83a0; --off-soft:#262036;
  --shadow:0 6px 18px rgba(0,0,0,.35); color-scheme:dark;
  --c-cpu:#4cc2ff; --c-mem:#a77bff; --c-disco:#ffb020; --c-in:#35d483; --c-out:#ff5a8a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;font-weight:500;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:18px 48px}
[hidden]{display:none!important}
.shell{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
button,input{font-family:inherit}
:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent);outline-offset:2px;border-radius:8px}

.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.mark{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#3b82f6,#9002fc);display:grid;place-items:center;flex:none}
.mark svg{width:22px;height:22px}
.brand b{display:block;font-size:17px;font-weight:800;color:var(--strong);letter-spacing:-.01em}
.brand small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.user{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.tema{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tema button{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:800;padding:6px 10px;border-radius:9px;cursor:pointer}
.tema button[aria-pressed="true"]{background:var(--strong);color:var(--bg)}
.top-right{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:800;padding:8px 13px;border-radius:10px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.aviso-topo{font-size:12.5px;font-weight:700;color:var(--warn);background:var(--warn-soft);border-radius:12px;padding:9px 12px;margin:0}

.band{border-radius:22px;padding:20px 22px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface)}
.band.ok{background:color-mix(in srgb, var(--ok-soft) 70%, var(--surface));border-color:color-mix(in srgb, var(--ok) 30%, var(--line))}
.band.crit{background:color-mix(in srgb, var(--crit-soft) 85%, var(--surface));border-color:color-mix(in srgb, var(--crit) 45%, var(--line))}
.band.off{background:var(--surface)}
.band-main{display:flex;gap:14px;align-items:flex-start;min-width:0}
.dot{width:16px;height:16px;border-radius:50%;margin-top:6px;flex:none;position:relative;background:var(--off);color:var(--off)}
.dot.ok{background:var(--ok);color:var(--ok)} .dot.crit{background:var(--crit);color:var(--crit)}
.dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid currentColor;opacity:0}
.dot.pulse::after{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
.band h1{margin:0;font-size:24px;font-weight:900;color:var(--strong);letter-spacing:-.02em;text-wrap:balance}
.band p{margin:5px 0 0;font-size:13.5px;font-weight:600;color:var(--text);max-width:70ch}
.band ul{margin:8px 0 0;padding-left:18px;font-weight:700;color:var(--strong)}
.band ul small{font-family:var(--mono);font-weight:600;color:var(--muted);margin-left:6px}
.signal{text-align:right;padding-left:18px;border-left:1px solid color-mix(in srgb, var(--strong) 12%, transparent)}
.signal small{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.signal .clock{font-family:var(--mono);font-size:30px;font-weight:800;color:var(--strong);line-height:1.15;font-variant-numeric:tabular-nums}
.signal .clock.late{color:var(--crit)}
.signal .rule{font-size:11.5px;color:var(--muted);font-weight:600}

.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.tab{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:13px;font-weight:800;padding:10px 14px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tab[aria-selected="true"]{background:var(--strong);color:var(--bg);border-color:var(--strong)}
.count{font-family:var(--mono);font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.tab[aria-selected="true"] .count{background:color-mix(in srgb, var(--bg) 20%, transparent);color:var(--bg)}
.count.crit{background:var(--crit);color:#fff}

/* Painel da VPS: 6 quadros com gráfico, no estilo da visão geral da Hostinger
   (pedido do dono em 19/10/2026), com as cores do nosso painel. */
.vps-painel{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:16px 18px 18px;box-shadow:var(--shadow);margin-bottom:16px}
.vps-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.vps-cab h2{margin:0;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.vps-cab small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:2px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.tile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--surface);min-height:96px}
.tile.stale{opacity:.62}
.tile-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.tile-rot{font-size:12.5px;font-weight:700;color:var(--muted)}
.tile-val{font-size:24px;font-weight:900;color:var(--strong);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.tile-sub{font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.35}
.tile-dir{min-width:0;display:flex;justify-content:flex-end;align-items:center}
.tile-graf{display:block;width:100%;height:56px}
.tile-anel{width:64px;height:64px}
.tile-vazio{font-size:11.5px;color:var(--muted);font-weight:600}
.tile-estado .pill{font-size:12px}

/* Colunas que se encaixam (e não grade): cada cartão tem a altura do próprio
   conteúdo e o seguinte sobe para o espaço livre. Com grade, a fileira inteira
   esticava até o cartão mais alto (Robôs) e sobrava branco embaixo dos
   outros. Pedido do dono em 19/10/2026. */
.grid{columns:330px;column-gap:16px}
.grid > .card{break-inside:avoid;display:block;width:100%;margin:0 0 16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);min-width:0}
.card.stale{opacity:.62}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.card-head h2{margin:0;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.kv:first-of-type{border-top:0}
.kv span{font-weight:600;color:var(--text);min-width:0}
.kv b{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--strong);text-align:right;font-variant-numeric:tabular-nums}
.kv b.ok{color:var(--ok)} .kv b.warn{color:var(--warn)} .kv b.crit{color:var(--crit)} .kv b.off{color:var(--off)}
.spark{display:block;width:100%;height:46px;margin:4px 0 2px}
.spark-cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.crit{background:var(--crit-soft);color:var(--crit)} .pill.off{background:var(--off-soft);color:var(--off)}
.robot{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:7px 0;border-top:1px solid var(--line)}
.robot:first-of-type{border-top:0}
.robot .nm{font-weight:700;color:var(--strong);min-width:0}
.robot .nm small{display:block;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted)}
.robot .st{align-self:center;text-align:right}
.robot .st small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:2px}
.stale-note{font-size:12px;font-weight:700;color:var(--crit);margin:0 0 6px}
.section-note{font-size:13px;color:var(--muted);font-weight:600;margin:0 0 12px;max-width:80ch}
.section-note b{color:var(--text)}
.vazio{color:var(--muted);font-weight:600;padding:8px 0;margin:0}

.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:132px 1fr auto;gap:14px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .when{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.row .when b{display:block;color:var(--strong);font-size:12.5px}
.row .what{min-width:0;overflow-wrap:anywhere}
.row .what b{display:block;color:var(--strong);font-weight:700;white-space:pre-line}
.row .what small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.row .dur{font-family:var(--mono);font-weight:800;color:var(--strong);text-align:right;font-variant-numeric:tabular-nums}
.ch{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px;margin-bottom:14px}
.ch div{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface)}
.ch b{display:block;color:var(--strong);font-weight:800;margin-bottom:4px}
.ch small{display:block;color:var(--muted);font-size:12px;margin-top:6px}

.login{min-height:calc(100vh - 80px);display:grid;place-items:center}
.login form{width:min(100%,420px);background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.login h1{margin:4px 0 0;font-size:20px;font-weight:900;color:var(--strong)}
.login p{margin:0;color:var(--muted);font-size:13px;font-weight:600}
.login p.erro{color:var(--crit);background:var(--crit-soft);border-radius:10px;padding:9px 12px;font-weight:700}
.login label{font-size:12px;font-weight:800;color:var(--text);display:flex;flex-direction:column;gap:6px}
.login input{border:1px solid var(--field);background:var(--surface);color:var(--text);border-radius:12px;min-height:46px;padding:12px 14px;font-weight:600;font-size:14px}
.login input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.login .code{font-family:var(--mono);letter-spacing:.35em;font-weight:800}
.login .fine{font-size:11.5px;line-height:1.5}
.passos{font-size:13px;line-height:1.55;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.chave{display:block;font-family:var(--mono);font-size:15px;font-weight:800;letter-spacing:.06em;color:var(--strong);margin:8px 0;word-break:break-all}
.primary{border:0;cursor:pointer;border-radius:14px;padding:13px 18px;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,#6d12ff,#8b2cff);box-shadow:0 6px 14px rgba(109,18,255,.18)}

@media (max-width:640px){
  .band{grid-template-columns:1fr}
  .signal{text-align:left;padding-left:0;border-left:0;border-top:1px solid color-mix(in srgb, var(--strong) 12%, transparent);padding-top:12px}
  .row{grid-template-columns:1fr auto}
  .row .when{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.dot.pulse::after{animation:none}}