/* CRIITO Engage — Design System (HostFlow Dark / Glassmorphism)
   Paleta neutra do HostFlow: fundo navy neutro + superfícies slate translúcidas.
   Roxo (#8B5CF6) só como ACENTO. Nomes de classe preservados. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Fundos neutros (HostFlow dark, hue 222 ~neutro) */
  --bg-app:#0B101E; --bg-rail:#080D18; --bg-panel:#151D2C; --bg-glass:#172030; --bg-well:#101724; --bg-alt:#0E1420;
  /* Acentos */
  --violet:#8B5CF6; --violet-200:#C4B5FD; --violet-300:#A78BFA; --blue:#3B82F6; --cyan:#22D3EE;
  --fuchsia:#A855F7; --pink:#EC4899; --indigo:#6366F1;
  /* Texto */
  --t-100:#F9FAFC; --t-200:#E2E8F0; --t-300:#CBD5E1; --t-400:#94A3B8; --t-500:#64748B;
  /* Semânticas — HostFlow */
  --emerald:#10B981; --rose:#EF4444; --amber:#F59E0B;
  --line:rgba(255,255,255,.07);
  --radius:16px;
  /* Superfície "google glass" neutra (slate translúcido) */
  --glass-surface:rgba(30,41,59,.40);
  --glass-surface-hover:rgba(30,41,59,.58);
  --shadow-card:0 8px 32px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.24);
  --shadow-panel:0 24px 60px -22px rgba(0,0,0,.6);
  --shadow-glow:0 0 40px rgba(139,92,246,.16);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--bg-app); }
body {
  background:linear-gradient(135deg, hsl(222 47% 8%) 0%, hsl(222 47% 13%) 100%);
  background-attachment:fixed;
  color:var(--t-200);
  font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
.mono { font-family:'DM Mono',ui-monospace,monospace; }

/* Casca: painel central com glows */
.shell { max-width:1140px; margin:0 auto; padding:16px; }
.panel {
  position:relative; overflow:hidden; background:var(--glass-surface);
  border:1px solid rgba(255,255,255,.05); border-radius:24px; padding:22px;
  backdrop-filter:blur(22px); box-shadow:var(--shadow-panel);
}
.glow { position:absolute; pointer-events:none; border-radius:9999px; filter:blur(80px); z-index:0; }
.glow.v { background:rgba(139,92,246,.10); width:360px; height:360px; top:-140px; left:60px; }
.glow.b { background:rgba(59,130,246,.07); width:320px; height:320px; bottom:-140px; right:60px; }
.panel > *:not(.glow) { position:relative; z-index:1; }

/* Tipografia */
.title-grad {
  background:linear-gradient(135deg,var(--violet-300),#C084FC,#818CF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:700; letter-spacing:-.02em;
}
h1 { font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--t-100); }
.brand-logo { height:38px; width:auto; display:block; }
h2 {
  font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--t-500);
  font-weight:600; margin:30px 0 14px; padding-left:12px; border-left:2px solid var(--violet);
}
.sub { color:var(--t-500); font-size:12px; }
.muted { color:var(--t-400); }

/* Cards / KPI — glass neutro (google glass) */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:16px; }
.card {
  position:relative; overflow:hidden; border-radius:16px;
  border:1px solid rgba(255,255,255,.05);
  background:var(--glass-surface);
  backdrop-filter:blur(22px); padding:18px 20px;
  box-shadow:var(--shadow-card);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.card:hover { transform:translateY(-2px); background:var(--glass-surface-hover); border-color:rgba(139,92,246,.28); box-shadow:0 0 32px rgba(139,92,246,.12); }
.card .lbl { font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:var(--t-500); }
.card .val { font-size:1.5rem; font-weight:700; line-height:1.1; letter-spacing:-.02em; margin-top:8px; color:var(--t-100); }
.card .val.verde { color:var(--emerald); } .card .val.amar { color:var(--amber); }
.card .val.verm { color:var(--rose); } .card .val.roxo { color:var(--violet-300); } .card .val.azul { color:var(--blue); }

/* Glass section box (gráficos) */
.glass {
  border-radius:16px; background:var(--glass-surface); backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.05); padding:18px; box-shadow:var(--shadow-card);
}

/* Tabelas */
.wrap { overflow-x:auto; border-radius:16px; border:1px solid rgba(255,255,255,.05); background:rgba(30,41,59,.28); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:12px 14px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--line); }
th:first-child,td:first-child { text-align:left; }
th { color:var(--t-500); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
tbody tr { transition:background .15s; }
tbody tr:hover { background:rgba(139,92,246,.07); }
tbody tr:last-child td { border-bottom:0; }

/* Botões / pills */
.btn {
  display:inline-flex; align-items:center; gap:6px; border-radius:12px;
  border:1px solid var(--line); background:rgba(30,41,59,.55); color:var(--t-200);
  padding:9px 14px; font-size:13px; font-weight:500; cursor:pointer; text-decoration:none;
  backdrop-filter:blur(12px); transition:.2s;
}
.btn:hover { border-color:rgba(139,92,246,.45); background:rgba(139,92,246,.12); color:var(--t-100); }
.btn.primary {
  border:0; color:#fff; font-weight:600;
  background:linear-gradient(135deg,var(--violet),var(--fuchsia));
  box-shadow:0 4px 16px -4px rgba(139,92,246,.5);
}
.btn.primary:hover { opacity:.92; box-shadow:0 6px 22px -4px rgba(139,92,246,.6); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
select.btn { appearance:none; padding-right:14px; }

.badge { border-radius:9999px; padding:3px 10px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; border:1px solid; }
.badge.ok { background:rgba(16,185,129,.14); color:#6EE7B7; border-color:rgba(16,185,129,.30); }
.badge.wait { background:rgba(245,158,11,.14); color:#FCD34D; border-color:rgba(245,158,11,.30); }
.badge.off { background:rgba(148,163,184,.12); color:var(--t-300); border-color:rgba(148,163,184,.25); }

/* Inputs */
input {
  width:100%; border-radius:12px; background:rgba(30,41,59,.55); border:1px solid var(--line);
  padding:12px 14px; color:var(--t-200); font-size:14px; outline:none;
  backdrop-filter:blur(16px); transition:.2s; box-shadow:0 0 0 3px transparent;
}
input:focus { background:rgba(30,41,59,.80); box-shadow:0 0 0 3px rgba(139,92,246,.15); border-color:rgba(139,92,246,.5); }

/* progress */
.track { height:6px; width:100%; overflow:hidden; border-radius:9999px; background:rgba(148,163,184,.18); }
.fill { height:100%; border-radius:9999px; background:linear-gradient(90deg,var(--violet),var(--cyan)); }

.foot { color:var(--t-500); font-size:11px; margin-top:30px; text-align:center; }
.loading { text-align:center; padding:48px; color:var(--t-500); }
.hidden { display:none; }