:root{
  --bg:#0b0f14;
  --panel:#121922;
  --muted:#7a8aa0;
  --text:#e6eef7;
  --accent:#5ec1ff;
  --accent-2:#9d7bff;
  --ok:#32d583;
  --warn:#f79009;
  --danger:#f04438;
  --border: #1f2a37;
  --row-height: 40px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 70% -50%, rgba(94,193,255,0.15), transparent 60%) ,
             radial-gradient(1000px 500px at -20% 10%, rgba(157,123,255,0.12), transparent 60%),
             var(--bg);
}

.app-header{
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px; border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(18,25,34,0.8), rgba(18,25,34,0.4));
  position: sticky; top:0; z-index:10;
  backdrop-filter: blur(6px);
}
.app-header h1{ margin:0; font-weight:700; letter-spacing:0.3px; }

.controls{
  display:flex; flex-direction:column; align-items:center;
  gap:16px; padding:16px; border-bottom:1px solid var(--border);
}
.controls-row{
  display:flex; gap:20px; align-items:end; justify-content:center;
  flex-wrap:wrap;
}
.field{ display:flex; flex-direction:column; gap:6px; }
label{ font-size:12px; color:var(--muted); }
input, select{
  padding:10px 12px; background: var(--panel); color: var(--text);
  border:1px solid var(--border); border-radius:8px; outline:none;
}
input:focus, select:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94,193,255,0.15); }

.actions{ display:flex; align-items:end; }
button{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:white; border:none; border-radius:8px; padding:10px 14px; font-weight:600; cursor:pointer;
}
button:hover{ filter: brightness(1.08); }

.status{ padding:12px 16px; }
.status.hidden{ display:none; }
.status.error{ color: white; background: rgba(240,68,56,0.12); border-top:1px solid rgba(240,68,56,0.35); border-bottom:1px solid rgba(240,68,56,0.35); }
.status.info{ color: var(--text); background: rgba(94,193,255,0.08); border-top:1px solid rgba(94,193,255,0.3); border-bottom:1px solid rgba(94,193,255,0.3); }

main{ max-width: 1200px; margin: 0 auto; padding: 16px; }

.kpis{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-bottom: 16px; }
.kpi-card{ background: var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; }
.kpi-label{ font-size:12px; color: var(--muted); }
.kpi-value{ font-size:28px; font-weight:700; margin-top:6px; }
.kpi-sub{ font-size:12px; color: var(--muted); }
.kpi-count{ font-size:11px; color: var(--accent); margin-top:4px; font-weight:500; }

.panel{ background: rgba(18,25,34,0.7); border:1px solid var(--border); border-radius:14px; padding:16px; margin: 16px 0; }
.panel-grid{ display:grid; grid-template-columns: 1fr; gap:16px; }
@media (min-width: 900px){
  .panel-grid{ grid-template-columns: 1fr 1fr; }
}
.panel h2{ margin: 0 0 8px; font-size:20px; }
.panel h3{ margin: 12px 0 8px; font-size:16px; color: var(--muted); }

.chart-wrap{ background: var(--panel); border:1px solid var(--border); border-radius:12px; padding: 8px; height: 220px; }
.chart-wrap canvas{ height: 100% !important; }
.table-wrap{ overflow:auto; background: var(--panel); border:1px solid var(--border); border-radius:12px; margin-top:8px; }

table{ width:100%; border-collapse: collapse; }
thead th{ position: sticky; top:0; background: #0f1620; z-index:1; }
th, td{ padding: 10px 12px; border-bottom:1px solid var(--border); text-align:left; white-space: nowrap; }
tbody tr:hover{ background: rgba(94,193,255,0.05); }

/* Virtualization helpers */
tbody tr.spacer-row:hover{ background: transparent; }
tbody tr.spacer-row td{ padding: 0; border: none; height: var(--row-height); }

.accordion{ display:flex; flex-direction:column; gap:8px; }
.accordion-item{ border:1px solid var(--border); border-radius:10px; overflow:hidden; background: var(--panel); }
.accordion-header{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; cursor:pointer; }
.accordion-header:hover{ background: rgba(94,193,255,0.06); }
.accordion-title{ font-weight:600; }
.accordion-body{ padding:8px 10px; border-top:1px solid var(--border); display:none; }
.accordion-item.open .accordion-body{ display:block; }

.app-footer{ max-width:1200px; margin: 16px auto; padding: 0 16px; color: var(--muted); }

.skeleton{ position: relative; background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.12), rgba(255,255,255,0.06)); background-size: 200% 100%; animation: loading 1.2s infinite; }
@keyframes loading{ 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} }