:root {
  --navy: #17132a;
  --navy2: #211a38;
  --blue: #7447ee;
  --bg: #edeff1;
  --border: #e6e7eb;
  --text: #171923;
  --muted: #7e8490;
  --green: #11aa7b;
  --red: #e34850;
  --shadow: 0 3px 12px rgba(31, 35, 45, 0.035);
}
body {
  background: var(--bg);
  color: var(--text);
}
main {
  background: #edeff1;
}
.topbar {
  height: 66px;
  margin: 12px 14px 0 14px;
  border: 1px solid #e5e6e9;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 8px rgba(31, 35, 45, 0.035);
  top: 10px;
}
.content {
  padding-top: 25px;
}
.search {
  background: #f7f7f8;
  border-color: #e5e6e9;
}
.search:focus-within,
.table-search:focus-within,
.side-search:focus-within {
  border-color: #bdaaf8;
  box-shadow: 0 0 0 3px rgba(116, 71, 238, 0.09);
}
.quick-btn,
.module-primary {
  background: #7447ee;
  border-color: #7447ee;
  box-shadow: 0 4px 10px rgba(116, 71, 238, 0.18);
}
.quick-btn:hover,
.module-primary:hover {
  background: #6338d9;
}
.icon-btn,
.secondary {
  background: #fff;
}
.avatar {
  background: #eee9ff;
  color: #6840db;
}
.eyebrow {
  color: #847b9a;
}
.eyebrow span {
  background: #8359ee;
  box-shadow: 0 0 0 3px #eee9ff;
}
.page-head h1,
.module-head h1 {
  letter-spacing: -0.55px;
}
.kpi,
.panel,
.module-stat,
.data-panel {
  border-color: #e4e5e8;
  box-shadow: 0 3px 9px rgba(32, 36, 44, 0.028);
  border-radius: 13px;
}
.kpi:hover,
.module-stat:hover {
  transform: translateY(-1px);
  border-color: #d9d5e6;
  box-shadow: 0 8px 20px rgba(40, 34, 62, 0.06);
  transition: 0.18s;
}
.blue {
  background: #eee9ff;
  color: #7447ee;
}
.violet,
.purple {
  background: #f3eaff;
  color: #8c4de8;
}
.cyan {
  background: #e7f8f4;
  color: #0aa47b;
}
.amber,
.orange {
  background: #fff1df;
  color: #ef921b;
}
.trend.up {
  background: #e8f8f1;
  color: #07966c;
}
.bars i {
  background: #e0d6ff;
}
.bars i:nth-child(8) {
  background: #7447ee;
}
.progress {
  background: #eee9fa;
}
.progress i {
  background: #8c60ed;
}
.line-spark path {
  stroke: #7447ee;
}
.panel-head h3 {
  letter-spacing: -0.1px;
}
.legend i.actual,
.funnel i,
.table-progress i {
  background: #7447ee;
}
.legend i.forecast {
  background: #d6c8fc;
}
.funnel i {
  background: linear-gradient(90deg, #7447ee, #a788f5);
}
.panel-head a,
.module-tab.active {
  color: #7447ee;
}
.module-tab.active:after {
  background: #7447ee;
}
.approve {
  border-color: #d4c6fb;
  color: #7044e5;
  background: #faf8ff;
}
.data-badge.blue {
  background: #eee9ff;
  color: #6840dc;
}
.data-badge.purple {
  background: #f6eaff;
  color: #8a3dd4;
}
.stat-icon.blue {
  background: #eee9ff;
  color: #7447ee;
}
.stat-icon.purple {
  background: #f4eaff;
  color: #9748dc;
}
.stat-icon.green {
  background: #e5f8f1;
  color: #0b9e73;
}
.stat-icon.orange {
  background: #fff1df;
  color: #e4840d;
}
.stat-icon.red {
  background: #fde8e9;
  color: #dc3841;
}
.table-tools > button:hover,
.secondary:hover,
.icon-btn:hover {
  background: #f7f5fc;
  border-color: #dcd4ed;
  color: #6338d9;
}
.table-tools button b {
  background: #eee9ff;
  color: #7044e5;
}
.table-wrap thead th {
  background: #f8f8f9;
}
.table-wrap tbody tr:hover {
  background: #fbfaff;
}
.pagination button.active {
  background: #7447ee;
  border-color: #7447ee;
}
.command {
  border: 1px solid #e3deef;
}
.command > button:hover {
  background: #f7f4ff;
}
.toast {
  background: #29213e;
}
.quick-menu {
  border-color: #e3deef;
}
.quick-menu button:hover {
  background: #f8f5ff;
}
.mini-donut {
  border-color: #e4f6ee;
  border-top-color: #10aa7b;
  border-right-color: #10aa7b;
  border-bottom-color: #10aa7b;
}
@media (max-width: 760px) {
  .topbar {
    margin: 8px 8px 0;
    border-radius: 10px;
    top: 6px;
  }
  .content {
    padding-top: 20px;
  }
}