:root {
  --primary: #7c3aed;
  --primary-dark: #5b21b6;
  --primary-soft: #ede9fe;
  --mint: #faf5ff;
  --canvas: #faf7ff;
  --surface: #ffffff;
  --ink: #312e4b;
  --muted: #6f6885;
  --line: #e4dcf3;
  --danger: #7e22ce;
  --warning: #8b5cf6;
  --bs-primary: #7c3aed;
  --bs-primary-rgb: 124, 58, 237;
  --bs-link-color: #6d28d9;
  --bs-link-hover-color: #5b21b6;
}

body { background-color: var(--canvas); color: var(--ink); }
.app-topbar, .demo-topbar { background: linear-gradient(100deg, #fdfaff, #eee7ff) !important; border-color: var(--line) !important; }
.app-sidebar, .demo-sidebar { background: linear-gradient(180deg, #fdfaff, #eee7ff) !important; border-color: var(--line) !important; }

/* Menu Nav Items & Icons */
.app-nav a,
.demo-sidebar .app-nav a,
.app-sidebar .app-nav a {
  color: #312e4b !important;
  border-color: transparent !important;
}

.app-nav a i,
.app-nav a svg,
.app-nav a .lucide,
.app-nav a [data-lucide],
.app-nav a > svg,
.app-nav a > .lucide,
.app-nav a > i,
.app-nav a > [data-lucide],
.demo-sidebar .app-nav a i,
.demo-sidebar .app-nav a svg,
.demo-sidebar .app-nav a .lucide,
.demo-sidebar .app-nav a [data-lucide],
.demo-sidebar .app-nav a > svg,
.demo-sidebar .app-nav a > .lucide,
.demo-sidebar .app-nav a > i,
.demo-sidebar .app-nav a > [data-lucide],
.app-sidebar .app-nav a i,
.app-sidebar .app-nav a svg,
.app-sidebar .app-nav a .lucide,
.app-sidebar .app-nav a [data-lucide],
.app-sidebar .app-nav a > svg,
.app-sidebar .app-nav a > .lucide,
.app-sidebar .app-nav a > i,
.app-sidebar .app-nav a > [data-lucide] {
  color: #7c3aed !important;
  stroke: #7c3aed !important;
}

.app-nav a:hover,
.demo-sidebar .app-nav a:hover,
.app-sidebar .app-nav a:hover,
.user-menu-toggle:hover,
.user-menu-toggle[aria-expanded="true"] {
  background: #f3edff !important;
  border-color: #c4b5fd !important;
  color: #5b21b6 !important;
}

.app-nav a:hover i,
.app-nav a:hover svg,
.app-nav a:hover .lucide,
.app-nav a:hover [data-lucide],
.app-nav a:hover > svg,
.app-nav a:hover > .lucide,
.app-nav a:hover > i,
.demo-sidebar .app-nav a:hover i,
.demo-sidebar .app-nav a:hover svg,
.demo-sidebar .app-nav a:hover .lucide,
.demo-sidebar .app-nav a:hover [data-lucide],
.demo-sidebar .app-nav a:hover > svg,
.demo-sidebar .app-nav a:hover > .lucide,
.demo-sidebar .app-nav a:hover > i {
  color: #6d28d9 !important;
  stroke: #6d28d9 !important;
}

.app-nav a.active,
.app-nav a.active:hover,
.demo-sidebar .app-nav a.active,
.demo-sidebar .app-nav a.active:hover,
.app-sidebar .app-nav a.active,
.app-sidebar .app-nav a.active:hover {
  background: #ede9fe !important;
  color: #4c1d95 !important;
  border-color: #c4b5fd !important;
  box-shadow: inset 3px 0 #7c3aed !important;
}

.app-nav a.active i,
.app-nav a.active svg,
.app-nav a.active .lucide,
.app-nav a.active [data-lucide],
.app-nav a.active > svg,
.app-nav a.active > .lucide,
.app-nav a.active > i,
.demo-sidebar .app-nav a.active i,
.demo-sidebar .app-nav a.active svg,
.demo-sidebar .app-nav a.active .lucide,
.demo-sidebar .app-nav a.active [data-lucide],
.demo-sidebar .app-nav a.active > svg,
.demo-sidebar .app-nav a.active > .lucide,
.demo-sidebar .app-nav a.active > i {
  color: #5b21b6 !important;
  stroke: #5b21b6 !important;
}

.sidebar-footer { border-color: #ded3f0 !important; }

.btn-primary {
  --bs-btn-bg: #7c3aed; --bs-btn-border-color: #7c3aed;
  --bs-btn-hover-bg: #5b21b6; --bs-btn-hover-border-color: #5b21b6;
  --bs-btn-active-bg: #4c1d95; --bs-btn-active-border-color: #4c1d95;
  --bs-btn-disabled-bg: #a78bfa; --bs-btn-disabled-border-color: #a78bfa;
}
.btn-outline-primary, .btn-outline-success, .btn-outline-warning, .btn-outline-danger {
  --bs-btn-color: #6d28d9; --bs-btn-border-color: #bda8ef;
  --bs-btn-hover-bg: #ede9fe; --bs-btn-hover-color: #4c1d95; --bs-btn-hover-border-color: #8b5cf6;
  --bs-btn-active-bg: #ddd0fb; --bs-btn-active-color: #4c1d95; --bs-btn-active-border-color: #7c3aed;
  color: #6d28d9; border-color: #bda8ef;
}
.form-control:focus, .form-select:focus { border-color: #9f7aea; box-shadow: 0 0 0 3px rgba(167,139,250,.28); }

.avatar, .stat-icon, .heading-icon, .metric-icon, .page-icon, .section-icon,
.icon-green, .icon-blue, .icon-yellow, .icon-red, .icon-teal, .icon-slate,
.person-avatar, .ranking > div span, .import-rules > div > span {
  background: #ede9fe !important; color: #6d28d9 !important; border-color: #c4b5fd !important;
}
.page-heading .page-icon, .section-header .section-icon, .curriculum-analysis .section-icon { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
.heading-icon, .login-system-icon, .login-card-icon { background: #7c3aed !important; color: #fff !important; }
.preview-mode-banner {
  background: #f5f0ff !important;
  border-bottom: 1px solid #ddd6fe !important;
  color: #5b21b6 !important;
}
.preview-mode-banner a {
  color: #7c3aed !important;
}
.preview-mode-banner svg, .preview-mode-banner i, .preview-mode-banner .lucide {
  color: #7c3aed !important;
  stroke: #7c3aed !important;
}

.metric, .stat-card,
.stat-grid .stat-card, .compact-stats .metric {
  border-top-width: 3px !important;
  border-top-style: solid !important;
  border-top-color: #7c3aed !important;
}
.metric:nth-child(1), .stat-card:nth-child(1),
.stat-grid .stat-card:nth-child(1), .compact-stats .metric:nth-child(1) {
  border-top-color: #7c3aed !important;
}
.metric:nth-child(2), .stat-card:nth-child(2),
.stat-grid .stat-card:nth-child(2), .compact-stats .metric:nth-child(2) {
  border-top-color: #8b5cf6 !important;
}
.metric:nth-child(3), .stat-card:nth-child(3),
.stat-grid .stat-card:nth-child(3), .compact-stats .metric:nth-child(3) {
  border-top-color: #a78bfa !important;
}
.metric:nth-child(4), .stat-card:nth-child(4),
.stat-grid .stat-card:nth-child(4), .compact-stats .metric:nth-child(4) {
  border-top-color: #c4b5fd !important;
}

.metric .metric-icon, .stat-card .stat-icon,
.stat-grid .stat-card .stat-icon, .compact-stats .metric .metric-icon {
  background: #ede9fe !important;
  color: #6d28d9 !important;
}
.metric:nth-child(2) .metric-icon, .stat-card:nth-child(2) .stat-icon,
.compact-stats .metric:nth-child(2) .metric-icon {
  background: #f3edff !important;
  color: #8b5cf6 !important;
}
.metric:nth-child(3) .metric-icon, .stat-card:nth-child(3) .stat-icon,
.compact-stats .metric:nth-child(3) .metric-icon {
  background: #ede9fe !important;
  color: #6d28d9 !important;
}
.metric:nth-child(4) .metric-icon, .stat-card:nth-child(4) .stat-icon,
.compact-stats .metric:nth-child(4) .metric-icon {
  background: #f5f0ff !important;
  color: #5b21b6 !important;
}

.menu-count {
  background: #ede9fe !important;
  color: #5b21b6 !important;
}

.status.success, .status.pending, .status.danger, .status.warning, .status,
.alert-success, .alert-warning, .alert-danger, .alert-info, .alert,
.validation-grid .valid, .validation-grid .invalid, .validation-grid .warning,
.notice, .notice.success, .notice.warning, .notice.danger, .analysis-notice,
.exam-import-validation, .exam-import-validation.has-errors,
.prerequisite-notice, .login-demo-note {
  background: #f2ebff !important; border-color: #c4b5fd !important; color: #5b21b6 !important;
}
.text-success, .text-danger, .text-warning, .positive { color: #6d28d9 !important; }
.progress-bar { background: linear-gradient(90deg, #c4b5fd, #7c3aed); }
.score-table thead th, .item-entry-table thead .sticky-col, .data-table thead th { background: #f0eaff !important; color: #3f3658; }
.data-table tbody tr:hover, .selectable .selected, .selected-row { background: #f7f2ff !important; }
.score-chip, .ref, .subject-result, .panel-subtle { background-color: #faf7ff; border-color: #e4dcf3; color: #5b21b6; }
.score-chip.low { background: #eee6ff; color: #6d28d9; }
.stepper .active span, .exam-import-steps .active span, .switch.on, .page.active { background: #7c3aed; color: #fff; }
.stepper .active, .exam-import-steps li.active, .ranking h2, .ranking.needs h2 { color: #6d28d9; }
.exam-import-steps li.active:not(:last-child)::after { background: #a78bfa; }
.notification-item.unread::after, .notification-dot { background: #7c3aed; }
.user-manual-button { background: #f5f0ff; border-color: #c4b5fd; color: #6d28d9; }

.login-page, .login-experience { background: #faf7ff; }
.login-topbar { background: #fdfaff; border-color: #e4dcf3; }
.login-topbar h1, .login-card-heading h2 { color: #40365f; }
.login-quote { color: #5b21b6; }
.login-card { border-color: #ddd1f3; box-shadow: 0 18px 50px rgba(76,29,149,.20); }
.login-hero::before { background: rgba(247,242,255,.28); }
.login-footer { background: #f7f2ff; border-color: #e4dcf3; }

.analysis-guide, .import-help, .setup-step.complete { background: #f2ebff; border-color: #c4b5fd; color: #5b21b6; }
.individual-profile .person-avatar { color: #6d28d9; background: #ede9fe; }

@media print {
  body { background: #fff !important; }
  .print-report-brand { border-color: #c4b5fd !important; }
  .print-report-brand strong { color: #5b21b6 !important; }
}

.account-page-grid.account-page-single,
.preview-account-grid.preview-account-single {
  grid-template-columns: minmax(0, 760px);
  max-width: 760px;
}

/* Login form inputs and password toggle button styling */
.login-card .input-group-text,
.login-card .input-group .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.login-card .input-group-text svg,
.login-card .input-group-text i,
.login-card .input-group .btn svg,
.login-card .input-group .btn i {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.login-card .input-group .btn[data-password-toggle] {
  min-width: 44px;
  padding: 0 10px;
  color: #64748b;
  border-color: #cdd9df;
  background-color: #f8fafc;
}
.login-card .input-group .btn[data-password-toggle]:hover {
  background-color: #ede9fe;
  color: #6d28d9;
  border-color: #c4b5fd;
}