:root{
  --bg:#0b1220; --card:#0f1a2f; --muted:#94a3b8; --text:#e5e7eb;
  --line:#20304d; --brand:#7c3aed;
  --green:#22c55e; --yellow:#f59e0b; --red:#ef4444;
}
body{background:linear-gradient(180deg,#070b14 0%, #0b1220 60%); color:var(--text);}
.ekpi-container{max-width:1200px;margin:0 auto;padding:18px;}
.ekpi-topbar{position:sticky;top:0;background:rgba(8,12,22,.85);backdrop-filter: blur(10px);border-bottom:1px solid var(--line);z-index:50}
.ekpi-topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ekpi-brand{font-weight:800;letter-spacing:.2px}
.ekpi-sub{font-size:12px;color:var(--muted)}
.ekpi-card{background:rgba(15,26,47,.9);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.ekpi-title{font-size:18px;font-weight:750}
.ekpi-muted{color:var(--muted);font-size:12px;margin-top:6px}
.ekpi-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.ekpi-grid>.ekpi-card{grid-column:span 12}
.ekpi-flex{display:flex;align-items:center}
.ekpi-between{justify-content:space-between}
.ekpi-gap{gap:8px}
.ekpi-mt{margin-top:12px}
.ekpi-btn{background:var(--brand);border:none;color:white;padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:650}
.ekpi-btn:hover{opacity:.92}
.ekpi-btn-secondary{background:transparent;border:1px solid var(--line)}
.ekpi-btn-small{padding:8px 10px;border-radius:10px;font-size:12px}
.ekpi-table-wrap{overflow:auto;margin-top:12px;border-radius:14px;border:1px solid var(--line)}
.ekpi-table{width:100%;border-collapse:separate;border-spacing:0;min-width:980px}
.ekpi-table th,.ekpi-table td{padding:12px;border-bottom:1px solid var(--line);font-size:13px}
.ekpi-table th{color:#cbd5e1;text-align:left;background:rgba(9,14,26,.6);position:sticky;top:0}
.ekpi-pill{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid var(--line)}
.ekpi-pill-neutral{background:rgba(148,163,184,.08);color:#cbd5e1;border-color:rgba(148,163,184,.2)}
.ekpi-green{background:rgba(34,197,94,.12);color:#86efac;border-color:rgba(34,197,94,.25)}
.ekpi-yellow{background:rgba(245,158,11,.12);color:#fde68a;border-color:rgba(245,158,11,.25)}
.ekpi-red{background:rgba(239,68,68,.12);color:#fecaca;border-color:rgba(239,68,68,.25)}
.ekpi-kpi-label{font-size:12px;color:var(--muted)}
.ekpi-kpi-value{font-size:26px;font-weight:850;margin-top:6px}
.ekpi-footer{border-top:1px solid var(--line);margin-top:18px;padding:18px 0;color:var(--muted);font-size:12px}
.ekpi-link{color:#c4b5fd;text-decoration:none}
.ekpi-link:hover{text-decoration:underline}

.ekpi-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(6px);z-index:100}
.ekpi-modal[aria-hidden="false"]{display:flex;align-items:center;justify-content:center;padding:18px}
.ekpi-modal-card{width:min(1100px, 96vw);max-height:88vh;overflow:auto;background:rgba(15,26,47,.98);border:1px solid var(--line);border-radius:18px;padding:16px}
.ekpi-input{width:120px;background:rgba(8,12,22,.6);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:8px}
@media (min-width: 900px){
  .ekpi-grid>.ekpi-card:nth-child(1){grid-column:span 3}
  .ekpi-grid>.ekpi-card:nth-child(2){grid-column:span 3}
  .ekpi-grid>.ekpi-card:nth-child(3){grid-column:span 3}
  .ekpi-grid>.ekpi-card:nth-child(4){grid-column:span 3}
}