:root{
  --cg-bg: #f4f7fb;
  --cg-card: rgba(255,255,255,.9);
  --cg-border: rgba(15,23,42,.12);
  --cg-shadow: 0 10px 30px rgba(2,6,23,.08);
  --cg-sidebar: #0b1220;
  --cg-sidebar2:#0f1b33;
  --cg-text: #0f172a;
}
html[data-bs-theme="dark"]{
  --cg-bg: #070b14;
  --cg-card: rgba(15,23,42,.7);
  --cg-border: rgba(148,163,184,.18);
  --cg-shadow: 0 10px 30px rgba(0,0,0,.35);
  --cg-sidebar: #050815;
  --cg-sidebar2:#0b1220;
  --cg-text: #e2e8f0;
}

.cg-body{ background: radial-gradient(1200px 600px at 20% 0%, rgba(13,110,253,.15), transparent 60%),
                    radial-gradient(900px 500px at 90% 10%, rgba(32,201,151,.10), transparent 55%),
                    var(--cg-bg); color: var(--cg-text); min-height:100vh; }

.cg-sidebar{
  position:fixed; inset:0 auto 0 0; width:280px; z-index:1030;
  background: linear-gradient(180deg, var(--cg-sidebar), var(--cg-sidebar2));
  color:#e2e8f0; border-right:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column;
  transition: width .25s ease;
}
.cg-sidebar.is-collapsed{ width:88px; }
.cg-sidebar-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 14px; }
.cg-brand{ display:flex; gap:12px; align-items:center; }
.cg-logo{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background: rgba(13,110,253,.15); border:1px solid rgba(255,255,255,.12); box-shadow: 0 12px 26px rgba(0,0,0,.25);}
.cg-brand-title{ font-weight:800; letter-spacing:.2px; }
.cg-brand-subtitle{ font-size:12px; opacity:.75; margin-top:-2px; }
.cg-sidebar-toggle{ border-color: rgba(255,255,255,.2) !important; color:#e2e8f0 !important; }
.cg-nav{ padding:6px 10px; overflow:auto; }
.cg-nav-section{ font-size:11px; letter-spacing:.12em; opacity:.7; padding:12px 10px 8px; text-transform:uppercase; }
.cg-nav-link{
  display:flex; gap:12px; align-items:center;
  padding:10px 12px; border-radius:12px; color:#e2e8f0; text-decoration:none;
  border:1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.cg-nav-link i{ width:18px; text-align:center; opacity:.95; }
.cg-nav-link:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); transform: translateY(-1px); }
.cg-nav-link.active{ background: rgba(13,110,253,.16); border-color: rgba(13,110,253,.35); }
.cg-sidebar.is-collapsed .cg-nav-link span,
.cg-sidebar.is-collapsed .cg-brand-text,
.cg-sidebar.is-collapsed .cg-nav-section{ display:none; }

.cg-sidebar-footer{ padding:12px; border-top:1px solid rgba(255,255,255,.08); }
.cg-user{ display:flex; gap:10px; align-items:center; }
.cg-user-avatar{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background: rgba(32,201,151,.15); border:1px solid rgba(255,255,255,.12);}
.cg-user-name{ font-weight:700; font-size:13px; }
.cg-user-role{ font-size:11px; opacity:.8; }
.cg-sidebar.is-collapsed .cg-user-meta{ display:none; }

.cg-main{ margin-left:280px; min-height:100vh; transition: margin-left .25s ease; }
.cg-main.is-collapsed{ margin-left:88px; }

.cg-topbar{
  position:sticky; top:0; z-index:1020;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.6);
  border-bottom:1px solid var(--cg-border);
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
html[data-bs-theme="dark"] .cg-topbar{ background: rgba(2,6,23,.5); }
.cg-page-title{ display:flex; gap:12px; align-items:center; }
.cg-page-title-icon{ width:40px; height:40px; border-radius:14px; display:grid; place-items:center;
  background: rgba(13,110,253,.12); border:1px solid var(--cg-border); box-shadow: var(--cg-shadow); }
.cg-page-title-text{ font-weight:800; line-height:1.1; }
.cg-page-title-sub{ font-size:12px; opacity:.75; }

.cg-card{
  background: var(--cg-card);
  border:1px solid var(--cg-border);
  box-shadow: var(--cg-shadow);
  border-radius:18px;
  overflow:hidden;
  animation: cgPop .35s ease both;
}
@keyframes cgPop{ from{ transform: translateY(8px); opacity:.0;} to{ transform: translateY(0); opacity:1;} }

.cg-kpi{ display:flex; align-items:center; justify-content:space-between; padding:16px; }
.cg-kpi .meta{ display:flex; flex-direction:column; gap:2px; }
.cg-kpi .label{ font-size:12px; opacity:.75; }
.cg-kpi .value{ font-weight:900; font-size:22px; }
.cg-kpi .icon{ width:46px; height:46px; border-radius:16px; display:grid; place-items:center;
  border:1px solid var(--cg-border); background: rgba(13,110,253,.12); }

.cg-table thead th{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.75; }

@media (max-width: 992px){
  .cg-sidebar{ transform: translateX(-100%); width:280px; }
  .cg-sidebar.is-open{ transform: translateX(0); }
  .cg-main{ margin-left:0; }
  .cg-main.is-collapsed{ margin-left:0; }
}