/** Demo panel — deliberately looks like a tool, not like the product. */
.devpanel {
  position: fixed; right: 10px; bottom: 52px; z-index: var(--z-chrome);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2);
  max-width: min(340px, calc(100vw - 20px));
}
.devpanel-toggle { background: var(--surface); color: var(--ink); border: 1px dashed var(--ink); }
.devpanel.on .devpanel-toggle { background: var(--ink); color: var(--surface); border-style: solid; }
.devpanel-body {
  width: 340px; max-width: calc(100vw - 20px);
  max-height: min(70vh, 620px); overflow-y: auto;
  background: var(--surface); border: 1px dashed var(--ink);
  padding: var(--s-3);
}
.devpanel-note { margin: 0 0 var(--s-3); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.devpanel-section { border-top: 1px solid var(--line); padding-top: var(--s-2); margin-top: var(--s-2); }
.devpanel-section:first-of-type { border-top: 0; margin-top: 0; }
.devpanel-section h4 {
  margin: 0 0 var(--s-2); font-size: var(--fs-xs); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
}
.devpanel-row { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; margin-bottom: var(--s-1); }
.devpanel-label { flex: 1 1 100%; font-size: var(--fs-sm); color: var(--ink-2); }
.devpanel-input { width: 92px; padding: 5px 6px; font-size: var(--fs-sm); }
.devpanel-hint, .devpanel-empty { margin: var(--s-1) 0 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.devpanel-reset { margin-top: var(--s-2); }
.devpanel .kv { font-size: var(--fs-sm); }

@media (max-width: 700px) {
  .devpanel { right: 6px; bottom: 46px; }
  .devpanel-body { width: calc(100vw - 12px); }
}