.workspace-nav {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid #ded9f7;
  border-radius: 12px;
  background: #f7f5ff;
}

.workspace-nav a {
  padding: 8px 15px;
  border-radius: 8px;
  color: #3f4b63;
  font-weight: 900;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s, background .16s, border-color .16s, box-shadow .16s, transform .16s;
}

.workspace-nav a.active {
  background: linear-gradient(115deg,#6542df,#8a5cf0);
  color: #fff;
  box-shadow: 0 7px 18px rgba(92,58,204,.31), inset 0 0 0 1px rgba(255,255,255,.18);
  transform: translateY(-1px);
}

.workspace-nav a:not(.active):hover {
  background: #ece9fb;
  color: #5d3dc7;
}

.workspace-nav a.workspace-layer-link {
  position: relative;
  border: 1px solid rgba(95, 66, 210, .28);
  background: linear-gradient(115deg, #f0edff, #e7fbff);
  color: #40308e;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 4px 12px rgba(77,53,177,.1);
}

.workspace-nav a.workspace-layer-link span {
  color: #00aeb8;
  text-shadow: 0 0 10px rgba(0,174,184,.45);
}

.workspace-nav a.workspace-layer-link:hover,
.workspace-nav a.workspace-layer-link.active {
  border-color: #6846da;
  background: linear-gradient(115deg, #6741d9, #1b83c8 58%, #08a99c);
  color: #fff;
  box-shadow: 0 8px 20px rgba(56,73,190,.36), inset 0 0 0 1px rgba(255,255,255,.2);
  transform: translateY(-1px);
}

.workspace-nav a.workspace-layer-link.active span { color: #bffff6; }

.workspace-nav a.workspace-canvas-link {
  border: 1px solid rgba(111, 69, 224, .3);
  background: linear-gradient(115deg, #f6edff, #fff1fa);
  color: #6632b7;
  font-weight: 950;
}

.workspace-nav a.workspace-canvas-link span { font-size: 17px; color: #c33fc4; }
.workspace-nav a.workspace-canvas-link:hover {
  color: #fff;
  background: linear-gradient(115deg, #6b43df, #c44bc8);
  box-shadow: 0 8px 20px rgba(91, 54, 190, .28);
}

@media (max-width: 900px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px;
  }

  .workspace-nav {
    order: 3;
    width: 100%;
  }

  .workspace-nav a {
    flex: 1;
    text-align: center;
  }
}