:root{
  --bg:#0b0d12; --card:#11141b; --muted:#a8b0c2; --text:#e8ecf8; --accent:#7c5cff;
  --good:#28d98b; --warn:#ffcc33; --bad:#ff5c7a;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text); background:radial-gradient(1200px 600px at 10% -10%,rgba(124,92,255,.15),transparent 50%),
           radial-gradient(1000px 500px at 110% 110%,rgba(40,217,139,.12),transparent 50%), var(--bg);
  overflow-x:hidden;
}

#bg{position:fixed;inset:0;z-index:-1}

.topbar{
  position:sticky; top:0; backdrop-filter: blur(12px);
  background:linear-gradient(180deg, rgba(11,13,18,.8), rgba(11,13,18,.35));
  border-bottom:1px solid rgba(124,92,255,.25);
  display:flex; align-items:center; justify-content:space-between; padding:12px 18px; z-index:10;
}

.brand{display:flex; align-items:center; gap:12px}
.brand h1{margin:0; font-size:20px; letter-spacing:.4px}
.brand small{opacity:.6; font-weight:400}
.glow-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent)}

.api{display:flex; gap:8px}
.api input{background:#0d1016;border:1px solid #1e2330;color:var(--text);padding:8px 10px;border-radius:10px;min-width:260px}
.api button{background:var(--accent);border:none;color:#fff;padding:8px 14px;border-radius:12px;cursor:pointer;box-shadow:0 6px 24px rgba(124,92,255,.35);transition:.2s}
.api button:hover{transform:translateY(-1px)}

.grid{display:grid;grid-template-columns: 1.2fr .8fr; gap:18px; padding:18px; max-width:1200px; margin:0 auto}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid #1a1f2b; border-radius:18px; padding:16px; box-shadow:0 10px 40px rgba(0,0,0,.3)}
.card h2{margin:0 0 10px 0}
.card h3{margin:16px 0 8px 0; opacity:.9}

.controls{display:flex; gap:8px; flex-wrap:wrap}
.controls.row input,.controls.row select{min-width:160px}
.controls input, .controls select, .controls textarea{
  background:#0d1016;border:1px solid #1e2330;color:var(--text);padding:10px;border-radius:12px; outline:none; transition:.2s;
}
.controls textarea{width:100%; min-height:64px}
.controls button{
  background:linear-gradient(90deg, var(--accent), #5b91ff);
  border:none; color:#fff; padding:10px 14px; border-radius:12px; cursor:pointer;
  box-shadow:0 6px 24px rgba(91,145,255,.35); transition:.2s
}
.controls button:hover{transform:translateY(-2px)}

.table{width:100%; overflow:auto; border:1px solid #1a1f2b; border-radius:12px}
.table table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px 12px; border-bottom:1px solid #1a1f2b; text-align:left}
.table th{color:#cbd3e9; font-weight:600; background:#0f1320; position:sticky; top:0}
.table tr:hover td{background:rgba(124,92,255,.06)}

.kpis{display:grid; grid-template-columns: repeat(5,1fr); gap:10px; margin:12px 0}
.kpis div{background:#0f1320;border:1px solid #1a1f2b;padding:10px;border-radius:12px;text-align:center}
.kpis span{display:block; font-size:12px; color:var(--muted)}
.kpis b{font-size:18px}

.userbox.hidden{display:none}

footer{opacity:.6; text-align:center; padding:20px}