:root {
  --app-bg: #ece7f3;
  --surface: #ffffff;
  --surface-soft: #f7f5fb;
  --text-main: #2d2a35;
  --text-soft: #666177;
  --stroke: #ddd6ea;

  --primary: #7b4ca1;
  --primary-rgb: 123, 76, 161;
  --primary-soft: #ede2f7;
  --primary-dark: #5c2f82;
  --accent: #f0b42e;
  --accent-rgb: 240, 180, 46;

  --shadow-soft: 0 12px 30px rgba(64, 35, 94, 0.14);
}

body {
  background:
    radial-gradient(circle at 5% 0%, rgba(var(--accent-rgb), 0.16) 0, rgba(var(--accent-rgb), 0) 38%),
    radial-gradient(circle at 100% -5%, rgba(var(--primary-rgb), 0.2) 0, rgba(var(--primary-rgb), 0) 42%),
    linear-gradient(180deg, #f5f1fb 0%, var(--app-bg) 100%);
}

.app-header {
  background: rgba(255, 255, 255, 0.93);
  border-bottom-color: #e1d8ee;
}

.app-footer {
  background: rgba(255, 255, 255, 0.95);
  border-top-color: #e1d8ee;
}

.brand-logo {
  background: linear-gradient(145deg, #f38f36 0%, #f0cc2c 30%, #39a67f 62%, #4d46a3 100%);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(71, 38, 108, 0.24);
}

.app-sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f8f4fc 100%);
  border-right-color: #e1d8ee;
}

.app-nav-link:hover,
.app-nav-link.active {
  color: var(--primary-dark);
  background: var(--primary-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}

.page-title {
  background: linear-gradient(90deg, #ffffff 0%, #f4ebfb 100%);
  border-color: #e5d9f1;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15);
  color: var(--primary-dark);
}

.page-title::before {
  background: linear-gradient(145deg, var(--primary), #aa69c4);
}

.card {
  border-color: #e2d9ee;
}

.card-highlight {
  background: #faf5ff;
  border-color: #e8d6fb;
}

.card-floating-title {
  background: linear-gradient(145deg, var(--primary), #ad64c8);
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.3);
}

.card-floating-title-soft {
  background: #ffffff;
  color: var(--primary-dark);
  border-color: #e5d9f1;
}

.kpi-icon {
  background: linear-gradient(145deg, var(--primary), #ad64c8);
  box-shadow: 0 8px 16px rgba(var(--primary-rgb), 0.28);
}

.kpi-icon-soft {
  background: #f1e4ff;
  color: var(--primary-dark);
}

.home-action-footer {
  background: linear-gradient(180deg, #f8f0ff 0%, #efe2fb 100%);
  border-top-color: #e5d9f1;
}

.help-card {
  background: linear-gradient(120deg, #ffffff 0%, #f7eeff 100%);
}

.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
}

.supply-code-pill {
  background: #efe1fb;
  color: var(--primary-dark);
}

.supply-switch-btn.active {
  background: linear-gradient(140deg, var(--primary), #af6ac6);
  box-shadow: 0 6px 14px rgba(var(--primary-rgb), 0.3);
}

.profile-btn {
  color: var(--primary-dark);
}

.mobile-nav-link.active {
  color: var(--primary);
}

.mobile-nav-link.active i {
  color: var(--primary);
  border-color: #e7d6fa;
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.28);
}