/* ── Playground controls (Start / Mute / Hide info) ─────────────────── */
#toggle {
  padding: .5rem 1.25rem; background: var(--purple); border-color: var(--purple);
  color: #fff; font-weight: 600;
}
#toggle:hover:not(:disabled) { background: var(--purple-lite); border-color: var(--purple-lite); }
#mute.muted { background: #7f1d1d; border-color: #b91c1c; color: #fff; }
#mute.muted:hover:not(:disabled) { background: #991b1b; border-color: #dc2626; }
#hide { font-size: .8rem; padding: .4rem .7rem; }

/* ── Test-view control header (sits above the Cart) ─────────────────── */
.testbar {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  padding-bottom: 1rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.testbar .field { display: inline-flex; align-items: center; gap: .4rem; }
.testbar .field label { font-size: .78rem; }
.testbar select { font-size: .85rem; padding: .35rem .45rem; }
/* Provider is read-only here (it comes from config); style it as a pill, not a control. */
.provider-label {
  font-size: .85rem; font-weight: 600;
  padding: .3rem .55rem; border-radius: .35rem;
  background: rgba(124,58,237,.14); color: var(--purple-lite);
  border: 1px solid var(--border-soft);
}
.testbar .spacer { flex: 1 1 auto; }

/* ── App layout: left nav + content ────────────────────────────────── */
.layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.sidenav {
  position: sticky; top: 4.5rem;   /* tucks just under the sticky appbar */
  flex: 0 0 11rem; display: flex; flex-direction: column; gap: .25rem;
}
.nav-item {
  width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  font-size: .9rem; font-weight: 500; padding: .55rem .8rem; border-radius: .55rem;
}
.nav-item:hover:not(.active) { background: #161619; color: var(--text); }
.nav-item.active {
  background: var(--card); border-color: var(--border);
  color: var(--text); font-weight: 600;
}

/* Menu customization sections: smaller, indented items nested under Menu. */
.nav-sub { display: flex; flex-direction: column; gap: .1rem; margin: .1rem 0 .3rem; }
.nav-subitem {
  width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; color: var(--muted);
  font-size: .8rem; font-weight: 500; padding: .32rem .8rem .32rem 1.5rem;
  border-radius: .5rem;
}
.nav-subitem:hover:not(.active) { background: #161619; color: var(--text); }
.nav-subitem.active {
  background: var(--card); border-color: var(--border);
  color: var(--text); font-weight: 600;
}
.content { flex: 1 1 auto; min-width: 0; }
.view { display: none; }
.view.active { display: block; }
.view-placeholder {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 2rem;
}
.view-placeholder h1 { margin: .2rem 0 .4rem; }