:root{
  --brand-50: #FAF5FF;
  --brand-100: #F3E8FF;
  --brand-200: #E9D5FF;
  --brand-300: #D8B4FE;
  --brand-400: #C084FC;
  --brand-500: #A855F7;
  --brand-600: #7C3AED;
  --brand-700: #6D28D9;
  --brand-800: #5B21B6;
  --brand-900: #4C1D95;

  --surface-50: #FFFFFF;
  --surface-100: #F5F7FC;
  --surface-200: #EEF1F7;
  --surface-300: #E4E9F3;

  --ink-50: #8A90A2;
  --ink-100: #4A5268;
  --ink-200: #1F2937;

  --appbg-900: #EAF0FF;
  --appbg-800: #F7F9FE;
}

body{
  background: var(--appbg-800);
  color: var(--ink-200);
}

.metric-card{
  background: linear-gradient(180deg, rgba(168,85,247,0.06), rgba(124,58,237,0.03));
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  display:flex;
  flex-direction:column;
}
.metric-card span{font-size:.85rem;color:var(--ink-50)}
.metric-card strong{font-size:1.35rem;color:var(--brand-700)}

.panel{
  background: #fff;
  border-radius: .75rem;
  padding: 1rem;
  box-shadow: 0 8px 24px rgba(16,24,40,0.06);
}
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.75rem;
}
.panel-header h2{margin:0}

.empty-state{
  padding:2rem;text-align:center;color:var(--ink-50);
}

/* Buttons with brand accent */
.btn-primary{
  background: linear-gradient(90deg,var(--brand-500),var(--brand-600));
  border-color: transparent;
}
.btn-outline-primary{
  border-color: var(--brand-500);
  color: var(--brand-600);
}

/* Small responsive tweaks */
@media (max-width:768px){
  .metric-card{padding:.75rem}
}

/* Login page */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:60vh}
.login-card{max-width:420px;padding:1.5rem;border-radius:.75rem}
.login-card .form-label{font-weight:600;color:var(--ink-100)}

/* Navbar tweaks to use brand gradient */
.navbar-dark.bg-primary{background:linear-gradient(90deg,var(--brand-600),var(--brand-700));}
.navbar-brand{color:#fff!important}