:root {
  --jsi-purple:#25003e;
  --jsi-gold:#ffc600;
  --ink:#1f1830;
  --bg:#faf8ff;
  --card:#ffffff;
  --muted:#7e6aa8;
}

/* Cards / wrappers */
.jsi-royalties-box, .jsi-admin-wrap .card, .card {
  background:var(--card);
  border-radius:16px;
  padding:16px;
  border:1px solid #efe9ff;
  box-shadow:0 14px 36px rgba(37,0,62,.06);
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Table */
.jsi-table { width:100%; border-collapse:collapse; min-width:320px; }
.jsi-table thead th {
  background:#f7f2ff;
  color:var(--jsi-purple);
  font-size:12px;
  text-transform:uppercase;
  padding:10px;
  border-bottom:1px solid #eadfff;
  text-align:left;
}
.jsi-table tbody td {
  padding:10px;
  border-bottom:1px solid #f1eaff;
  color:var(--ink);
}
.table-wrap { overflow:auto; }

/* Titles & badges */
.jsi-royalties-box h2 { margin:0; color:var(--jsi-purple); }
.jsi-royalties-box p { margin:.5rem 0; color:#4b3b68; }
.badge-jsi { display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(37,0,62,.06); color:var(--jsi-purple); font-weight:700; font-size:12px; }

/* KPI row */
.jsi-kpis { display:flex; gap:12px; flex-wrap:wrap; margin: 6px 0 14px; }
.jsi-kpi { background: rgba(255,255,255,0.5); border:1px solid #eadfff; border-radius:12px; padding:10px 14px; min-width:180px; }
.jsi-kpi h3 { margin:0; font-size:13px; color:#f7e6a3; text-transform:uppercase; letter-spacing:.02em; }
.jsi-kpi p { margin:6px 0 0; font-size:20px; font-weight:800; color:#fff; }

/* Chart wrap keeps height on responsive */
.jsi-chart-wrap { background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:10px; height:220px; }

/* Month range form */
.jsi-month-form {
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.jsi-month-form input {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
}
.jsi-month-form button {
  background: var(--jsi-gold);
  color: var(--jsi-purple);
  font-weight: 700;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
}

/* Dark mode / JSI look */
body .jsi-royalties-box, body .jsi-admin-wrap .card, body .card {
  color: #fff;
  background: linear-gradient(180deg, rgba(37,0,62,0.95), rgba(45,0,74,0.95));
  border: 1px solid rgba(255,198,0,0.06);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}
body .jsi-royalties-box .jsi-table thead th {
  background: rgba(255,255,255,0.03);
  color: #ffea9a;
}
body .jsi-royalties-box .jsi-table tbody td {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Utility */
.center { text-align:center; }