/* Shared visual language for every Lemon Workspace tool. */
:root {
  --lemon-ink: #26352d;
  --lemon-muted: #718078;
  --lemon-paper: #f7f6f0;
  --lemon-panel: rgba(255,255,252,.88);
  --lemon-line: #e2e7de;
  --lemon-green: #56735b;
  --lemon-green-deep: #35583f;
  --lemon-yellow: #e4c94f;
  --lemon-radius: 16px;
  --lemon-shadow: 0 12px 36px rgba(42, 67, 49, .08);
}
html { background: var(--lemon-paper); }
body {
  color: var(--lemon-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", sans-serif;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(228,201,79,.75); outline-offset: 3px; }
.sidebar, .music-sidebar {
  border-right: 1px solid var(--lemon-line);
  background: rgba(250,251,247,.92);
  box-shadow: 8px 0 30px rgba(42,67,49,.035);
}
.brand, .logo, .music-brand { color: var(--lemon-ink); }
.sidebar-nav, .music-nav { gap: 6px; }
.nav-item, .nav, .music-nav-item {
  border-radius: 11px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-item:hover, .nav:hover, .music-nav-item:hover {
  background: #eef3e9;
  color: var(--lemon-green-deep);
  transform: translateX(2px);
}
.nav-item.active, .nav.active, .music-nav-item.active {
  background: #e5efdf;
  color: var(--lemon-green-deep);
  font-weight: 700;
}
.main-panel, .workspace > main, .music-main { background: var(--lemon-paper); }
.card, .panel, .workspace-card, .guide-card, .task-card, .music-card,
.studio-card, .surface {
  border: 1px solid var(--lemon-line);
  border-radius: var(--lemon-radius);
  box-shadow: var(--lemon-shadow);
}
@media (max-width: 760px) {
  .sidebar, .music-sidebar { position: sticky; top: 0; z-index: 20; }
  .sidebar-nav, .music-nav { overflow-x: auto; }
  .nav-item, .nav, .music-nav-item { white-space: nowrap; }
}