:root{
  --bg:#07080B;
  --panel:#0D0F14;
  --surface:#12151B;
  --surface-hover:#181C24;
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.16);
  --ink:#F1F3F7;
  --ink-soft:#868D9C;
  --accent:#8B5CFF;
  --accent-2:#00E8B8;
  --i7:#F1F3F7;
  --i7-soft:rgba(241,243,247,0.08);
  --ancora:#3E8CFF;
  --ancora-soft:rgba(62,140,255,0.12);
  --consultoria:#FF9C42;
  --consultoria-soft:rgba(255,156,66,0.12);
  --ok:#2FE28A;
  --ok-soft:rgba(47,226,138,0.12);
  --warn:#FFC94D;
  --warn-soft:rgba(255,201,77,0.12);
  --danger:#FF5C7A;
  --danger-soft:rgba(255,92,122,0.12);
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Inter', sans-serif;
  background: radial-gradient(680px 420px at 88% -8%, rgba(139,92,255,0.16), transparent 60%),
              radial-gradient(600px 380px at 8% 108%, rgba(0,232,184,0.10), transparent 60%),
              var(--bg);
  color:var(--ink);
  display:flex;
  min-height:100vh;
  font-size:14px;
}
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; letter-spacing:-0.01em; }
.mono{ font-family:'IBM Plex Mono', monospace; }
a{ color:inherit; }

.sidebar{ width:216px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--border); color:#fff; display:flex; flex-direction:column; padding:22px 14px; }
.brand{ font-family:'Space Grotesk'; font-weight:700; font-size:16px; padding:0 10px 22px 10px; border-bottom:1px solid var(--border); margin-bottom:14px; }
nav{ display:flex; flex-direction:column; gap:2px; }
nav a{ text-decoration:none; color:#8b8f99; padding:9px 10px; border-radius:8px; font-size:13px; font-weight:500; display:block; }
nav a:hover{ background:var(--surface-hover); color:#fff; }
nav a.active{ background:rgba(139,92,255,0.14); color:#fff; font-weight:600; box-shadow:inset 0 0 0 1px rgba(139,92,255,0.35); }

main{ flex:1; padding:28px 34px; max-width:1180px; }
.view-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; }
.view-head h1{ font-size:22px; font-weight:600; }
.view-head p{ color:var(--ink-soft); font-size:13px; margin-top:4px; }

.grid{ display:grid; gap:14px; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; }
.kpi .label{ font-size:11.5px; color:var(--ink-soft); font-weight:500; text-transform:uppercase; letter-spacing:0.06em;}
.kpi .value{ font-family:'Space Grotesk'; font-size:26px; font-weight:600; margin-top:6px; color:var(--accent-2); }
.kpi .sub{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; }
.kpi.warn .value{ color:var(--warn); }
.kpi.danger .value{ color:var(--danger); }

.badge{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; display:inline-block; }
.badge.ok{ background:var(--ok-soft); color:var(--ok); }
.badge.warn{ background:var(--warn-soft); color:var(--warn); }
.badge.danger{ background:var(--danger-soft); color:var(--danger); }
.badge.op-i7{ background:var(--i7-soft); color:var(--i7); border:1px solid var(--border-strong); }
.badge.op-ancora{ background:var(--ancora-soft); color:var(--ancora); }
.badge.op-consultoria{ background:var(--consultoria-soft); color:var(--consultoria); }

table{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); background:var(--panel); padding:10px 14px; border-bottom:1px solid var(--border); }
td{ padding:11px 14px; border-bottom:1px solid var(--border); font-size:13px; }
tr:last-child td{ border-bottom:none; }
.cell-mono{ font-family:'IBM Plex Mono'; }

.btn{ display:inline-block; cursor:pointer; background:var(--accent); color:#fff; font-size:12.5px; font-weight:600; padding:9px 15px; border-radius:9px; border:none; text-decoration:none; }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--border-strong); }

.login-wrap{ display:flex; align-items:center; justify-content:center; width:100%; }
.login-card{ width:340px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px; }
.login-card h1{ font-size:20px; margin-bottom:6px; }
.login-card p{ color:var(--ink-soft); font-size:12.5px; margin-bottom:20px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:11.5px; color:var(--ink-soft); margin-bottom:5px; }
.field input{ width:100%; background:var(--panel); border:1px solid var(--border-strong); border-radius:8px; padding:10px 12px; color:var(--ink); font-size:13px; }
.error{ background:var(--danger-soft); color:var(--danger); padding:10px 12px; border-radius:8px; font-size:12.5px; margin-bottom:14px; }