:root{
  --brand1:#6d28d9;
  --brand2:#2563eb;
}
body{ background:#f5f7fb; }
.app-shell{ min-height:100vh; }

/* Sidebar - flat professional + mobile drawer */
.sidebar{
  position:fixed;
  top:0; left:0;
  height:100vh;
  width:260px;
  background: linear-gradient(180deg,#0f172a,#020617);
  color:#cbd5f5;
  border-radius:0 !important;
  transition: transform .28s ease;
  z-index:1045;
  overflow-y:auto;
}
@media(min-width:992px){
  .sidebar{ transform:translateX(0); }
  .content-area{ margin-left:260px; }
}
@media(max-width:991px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.show{ transform:translateX(0); }
  .content-area{ margin-left:0; }
}

/* overlay */
.sidebar-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  z-index:1040;
}
.sidebar-overlay.show{ display:block; }

.sidebar .nav-link{
  color:#cbd5f5;
  border-radius:8px;
  padding:12px 14px;
  font-size:15px;
}
.sidebar .nav-link.active,
.sidebar .nav-link:hover{
  background:#1e293b;
  color:#fff;
}
.brand-badge{
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  color:#fff; border-radius:999px; padding:.25rem .7rem; font-size:.8rem;
}
.card-soft{
  border-radius:8px !important;
  border:1px solid #e5e7eb;
  box-shadow:none;
}
.btn-grad{
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  border:0;
}
.btn-grad:hover{ filter:brightness(1.05); }
.topbar{
  background:#fff;
  border-radius:0;
  border-bottom:1px solid #e2e8f0;
  box-shadow:none;
}
.muted{ color:#64748b; }