/* PURPLE THEME TOKENS */
:root{
  --space1:#0b1221;
  --space2:#111a34;

  --card:#0f172a;
  --card-2:#132243;
  --card-border:#243456;

  --text:#e5e7eb;

  --accent:#8b5cf6;                         /* main purple */
  --accent-border:#4c1d95;                  /* darker edge for definition */
  --accent-glow: rgba(139, 92, 246, .55);   /* glow for hover/focus */
}

/* Subtle ink for active “Step” label */
.side-item.active .mi-step{ color:#2e1065 }

/* Chevron buttons centered & themed */
.unit-main .nav-bar button{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--accent-border);
  background:var(--accent); color:#fff;
  font-weight:900; font-size:20px; line-height:1;
  cursor:pointer; opacity:.95;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.unit-main .nav-bar button:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 12px var(--accent-glow);
}
.unit-main .nav-bar button:disabled{
  opacity:.25; cursor:not-allowed; box-shadow:none;
}

/* Purple chip dot (next to the PURPLE label) */
.brand .chip .dot{
  background:
    radial-gradient(circle at 35% 35%,
      #e9d5ff 0 26%,     /* light lavender highlight */
      #c4b5fd 27% 58%,   /* mid purple */
      var(--accent) 59% 100%);  /* main purple */
  box-shadow: 0 0 10px rgba(139, 92, 246, .35);
}