/* ================= Aventa UI (light JS, pure CSS) ================= */
:root{
  --bg:#0b1220; --panel:#0f172a; --panel-2:#0b1220;
  --text:#e5e7eb; --muted:#9ca3af; --line:#1f2937;
  --brand:#22d3ee; --brand-ink:#001018;
  --ok:#22c55e; --danger:#ef4444;
  --shadow:0 16px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  background:var(--bg); color:var(--text);
  min-height:100dvh;
}

/* Topbar + nav */
.topbar{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, #0d1424 0%, rgba(13,20,36,0.92) 100%);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
}
.topbar .wrap{
  display:flex; align-items:center; gap:16px;
  padding:12px 18px; max-width:1200px; margin:0 auto;
}
.brand{font-weight:700; letter-spacing:.2px}
.brand .dot{color:var(--brand)}
.nav{display:flex; gap:12px; flex-wrap:wrap}
.nav a{
  color:var(--text); text-decoration:none; opacity:.9;
  padding:8px 10px; border-radius:10px; border:1px solid transparent;
}
.nav a:hover{border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.03)}
.user-pill{
  margin-left:auto; font-size:.9rem; color:var(--muted);
  padding:6px 10px; border:1px solid rgba(255,255,255,.08); border-radius:12px;
}

/* Layout */
.container{max-width:1200px; padding:20px; margin:0 auto}
h1,h2,h3{margin:12px 0 8px}

/* KPI cards */
#kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:16px 0 10px}
.kpi{
  background:linear-gradient(180deg, #0e172a 0%, #0b1220 100%);
  border:1px solid var(--line); border-radius:16px; padding:14px;
  box-shadow:var(--shadow);
}
.kpi .label{color:var(--muted); font-size:.9rem}
.kpi .value{font-weight:700; font-size:1.6rem; margin-top:4px}

/* Buttons & inputs */
.btn{padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.1); background:transparent; color:var(--text); cursor:pointer}
.btn.brand{background:var(--brand); color:var(--brand-ink); border-color:transparent; font-weight:700}
.input, select{background:#0a1220; border:1px solid var(--line); color:var(--text); border-radius:10px; padding:8px 10px; outline:none}
.input:focus, select:focus{border-color:var(--brand)}

/* Tables */
table{width:100%; border-collapse:collapse; background:#0a1220; border:1px solid var(--line); border-radius:14px; overflow:hidden}
thead th{background:#0f182b; color:#cbd5e1; font-weight:600; text-align:left; padding:10px; border-bottom:1px solid var(--line)}
tbody td{padding:10px; border-bottom:1px solid rgba(255,255,255,.06); color:#d1d5db}
tbody tr:hover{background:rgba(255,255,255,.02)}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.1); font-size:.8rem}
.badge.ok{border-color:#064e3b; background:#052e2a; color:#34d399}
.badge.warn{border-color:#4b2f05; background:#3b2504; color:#fbbf24}
.badge.danger{border-color:#3f0b0b; background:#2a0909; color:#f87171}

/* Cards */
.card{background:#0a1220; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.card .title{display:flex; align-items:center; justify-content:space-between; gap:10px}

/* Simple helpers */
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.grow{flex:1}
.muted{color:var(--muted)}
.center{text-align:center}
.small{font-size:.9rem}