:root{
  --bg: #0b1220;
  --bg2: #060a14;
  --panel: rgba(17,24,39,.70);
  --panel2: rgba(17,24,39,.88);
  --border: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --muted2: rgba(255,255,255,.42);
  --shadow: 0 10px 35px rgba(0,0,0,.45);
  --purple: #7c3aed;
  --purple2:#a78bfa;
  --green:#22c55e;
  --red:#ef4444;
  --blue:#3b82f6;
  --tableHead: rgba(255,255,255,.06);
  --tableRow: rgba(255,255,255,.03);
  --tableRow2: rgba(255,255,255,.015);
  --inputBg: rgba(255,255,255,.06);
  --inputBorder: rgba(255,255,255,.10);
}

body[data-theme="light"]{
  --bg:#f7f7fb;
  --bg2:#eef0f7;
  --panel: rgba(255,255,255,.78);
  --panel2: rgba(255,255,255,.92);
  --border: rgba(0,0,0,.08);
  --text: rgba(0,0,0,.86);
  --muted: rgba(0,0,0,.55);
  --muted2: rgba(0,0,0,.40);
  --shadow: 0 10px 25px rgba(0,0,0,.10);
  --tableHead: rgba(0,0,0,.05);
  --tableRow: rgba(0,0,0,.03);
  --tableRow2: rgba(0,0,0,.015);
  --inputBg: rgba(0,0,0,.03);
  --inputBorder: rgba(0,0,0,.10);
}

html,body{height:100%;}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(124,58,237,.35), transparent 55%),
    radial-gradient(900px 600px at 85% 15%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(1000px 700px at 60% 95%, rgba(34,197,94,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

a{color:inherit;}
a:hover{color: var(--purple2);}

.cb-navbar{
  backdrop-filter: blur(12px);
  background: rgba(10,14,28,.55);
  border-bottom: 1px solid var(--border);
}
body[data-theme="light"] .cb-navbar{
  background: rgba(255,255,255,.75);
}

.cb-brand{
  font-weight: 800;
  letter-spacing: .2px;
}
.cb-pill{
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 999px;
  padding: .35rem .65rem;
}
.cb-btn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 12px;
  padding: .55rem .85rem;
  font-weight: 600;
}
.cb-btn:hover{border-color: rgba(124,58,237,.45); box-shadow: 0 0 0 3px rgba(124,58,237,.10);}

.cb-btn-primary{
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(167,139,250,.85));
  border-color: rgba(167,139,250,.45);
  color: #fff;
}
.cb-btn-primary:hover{filter: brightness(1.05);}

.cb-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.cb-card-header{
  padding: 1.1rem 1.1rem .4rem 1.1rem;
}
.cb-card-body{
  padding: 1.1rem;
}
.cb-card-glow{
  position: relative;
  overflow: hidden;
}
.cb-card-glow:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(700px 200px at 10% 10%, rgba(124,58,237,.35), transparent 55%),
              radial-gradient(600px 180px at 90% 20%, rgba(59,130,246,.18), transparent 60%);
  opacity:.65;
  pointer-events:none;
}
.cb-card-glow > *{ position:relative; }

.cb-kpi{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.cb-kpi .dot{
  width:10px;height:10px;border-radius:999px;background: var(--purple);
  box-shadow: 0 0 0 4px rgba(124,58,237,.18);
}
.cb-kpi .title{font-weight:700;font-size:1.05rem;}
.cb-kpi .bal{font-weight:800;font-size:1.55rem; letter-spacing:.2px;}
.cb-muted{color: var(--muted);}
.cb-muted2{color: var(--muted2);}

.cb-actions .btn{
  border-radius: 12px;
  font-weight: 700;
}

.cb-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.cb-table thead th{
  background: var(--tableHead);
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding: .7rem .75rem;
  font-size: .85rem;
}
.cb-table tbody td{
  padding: .7rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
body[data-theme="light"] .cb-table tbody td{ border-bottom: 1px solid rgba(0,0,0,.06); }
.cb-table tbody tr:nth-child(odd){ background: var(--tableRow); }
.cb-table tbody tr:nth-child(even){ background: var(--tableRow2); }
.cb-table tbody tr:hover{ outline: 1px solid rgba(124,58,237,.35); background: rgba(124,58,237,.08); }

.cb-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .15rem .55rem;
  font-size: .75rem;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.cb-badge.in{ background: rgba(34,197,94,.15); color: #b7f7cf; border-color: rgba(34,197,94,.35); }
.cb-badge.out{ background: rgba(239,68,68,.12); color: #ffd0d0; border-color: rgba(239,68,68,.35); }
.cb-badge.trf{ background: rgba(124,58,237,.14); color: #e7dcff; border-color: rgba(167,139,250,.45); }

.cb-input, .cb-select{
  background: var(--inputBg) !important;
  border: 1px solid var(--inputBorder) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  padding: .65rem .85rem !important;
}
.cb-input::placeholder{ color: var(--muted2) !important; }
.cb-select option{ color:#111; } /* browser requirement */

.cb-filter{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .75rem;
}
@media (max-width: 992px){
  .cb-filter{ grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 576px){
  .cb-filter{ grid-template-columns: repeat(2, 1fr); }
}
.cb-field{ grid-column: span 3; }
.cb-field.span-6{ grid-column: span 6; }
.cb-field.span-12{ grid-column: span 12; }

.cb-section-title{
  font-weight: 900;
  font-size: 1.45rem;
  letter-spacing: .2px;
}
.cb-subtitle{
  font-size:.92rem;
  color: var(--muted);
}

.cb-chart-wrap{
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: var(--shadow);
}