:root {
  --brand-primary: #2c3e50;
  --brand-accent: #4ca1af;
}

.navbar .workspace-name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  margin-left: 0.35rem;
  color: var(--brand-primary, #1f4e79);
  white-space: nowrap;
  max-width: min(46vw, 280px);
  overflow: hidden;
  text-overflow: ellipsis;
}

a.sidebar-link:hover {
  border-left-color: var(--brand-accent);
}

#sidebar a.sidebar-link.active,
#sidebar .sidebar-link.active {
  border-left-color: var(--brand-accent);
}

.card-header.bg-primary,
.btn-primary,
.badge.bg-primary {
  background-color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.design-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 10px;
  background: linear-gradient(to right, var(--brand-primary), var(--brand-accent));
  color: #fff;
}

.design-preview img {
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
}

.design-logo-current {
  max-height: 80px;
  max-width: 220px;
  object-fit: contain;
}