:root {
  --jc-ink: #172033;
  --jc-muted: #667085;
  --jc-primary: #635bff;
  --jc-primary-dark: #5148e5;
  --jc-surface: #ffffff;
  --jc-bg: #f6f7fb;
  --jc-border: #e8eaf2;
  --jc-shadow: 0 14px 38px rgba(20, 28, 55, .08);
}
* { box-sizing: border-box; }
body { background: var(--jc-bg); color: var(--jc-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.01em; }
a { color: var(--jc-primary); }
.navbar { background: linear-gradient(135deg, #1d2540 0%, #302c68 58%, #5148e5 100%) !important; min-height: 68px; box-shadow: 0 4px 18px rgba(31, 36, 76, .18); }
.navbar-brand { letter-spacing: -.035em; font-size: 1.2rem; }
.sidebar-link { color: #667085; border-radius: 10px; padding: .7rem .85rem; font-weight: 500; transition: .18s ease; }
.sidebar-link:hover { background: #f0efff; color: var(--jc-primary); transform: translateX(2px); }
.sidebar-link.active { background: #eeecff; color: var(--jc-primary); font-weight: 700; }
main { min-width: 0; }
.card { border: 1px solid var(--jc-border); border-radius: 16px; box-shadow: var(--jc-shadow); }
.card-header, .card-body { border-radius: inherit; }
.card h1, .card h2, .card h3 { letter-spacing: -.03em; }
.metric-card { border: 0; overflow: hidden; position: relative; box-shadow: var(--jc-shadow); }
.metric-card::after { content: ""; position: absolute; width: 92px; height: 92px; border-radius: 50%; right: -28px; top: -28px; background: rgba(99, 91, 255, .1); }
.metric-card .display-6 { color: var(--jc-ink); letter-spacing: -.06em; }
.btn-primary { background: var(--jc-primary); border-color: var(--jc-primary); box-shadow: 0 8px 18px rgba(99, 91, 255, .22); }
.btn-primary:hover, .btn-primary:focus { background: var(--jc-primary-dark); border-color: var(--jc-primary-dark); }
.btn-outline-primary { color: var(--jc-primary); border-color: #bdb8ff; }
.btn-outline-primary:hover { background: var(--jc-primary); border-color: var(--jc-primary); }
.form-control, .form-select { border-color: #dfe2ec; border-radius: 10px; padding: .68rem .8rem; }
.form-control:focus, .form-select:focus { border-color: #9b95ff; box-shadow: 0 0 0 .22rem rgba(99, 91, 255, .12); }
.table { --bs-table-bg: transparent; }
.table thead th { color: var(--jc-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; border-bottom-color: var(--jc-border); }
.table tbody td { border-bottom-color: #f0f1f5; vertical-align: middle; }
.badge { border-radius: 999px; padding: .45em .72em; font-weight: 650; }
.login-card { max-width: 440px; margin: 10vh auto; border: 0; box-shadow: 0 24px 70px rgba(31, 36, 76, .16); }
.login-card::before { content: ""; display: block; height: 7px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, #635bff, #9b95ff); }
.client-tabs { display: flex; gap: .4rem; flex-wrap: wrap; padding: .45rem; margin-bottom: 1.35rem; background: #fff; border: 1px solid var(--jc-border); border-radius: 14px; box-shadow: 0 8px 24px rgba(20, 28, 55, .05); }
.client-tab { border: 0; background: transparent; border-radius: 10px; color: var(--jc-muted); padding: .68rem 1rem; font-weight: 650; transition: .18s ease; }
.client-tab:hover { background: #f2f1ff; color: var(--jc-primary); }
.client-tab.active { background: var(--jc-primary); color: #fff; box-shadow: 0 6px 14px rgba(99, 91, 255, .2); }
.client-section-hidden { display: none !important; }
.section-kicker { color: var(--jc-primary); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
@media (max-width: 767.98px) {
  .desktop-table { display: none; }
  .mobile-card { display: block; }
  .sidebar-link { padding: .55rem .7rem; }
  .client-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
  .client-tab { white-space: nowrap; padding: .62rem .8rem; }
}
@media (min-width: 768px) { .mobile-card { display: none; } }