.demo-body { height: 100vh; overflow: hidden; background: #e8ece9; }
.demo-toolbar { height: 68px; padding: 0 16px; border-bottom: 1px solid var(--line-strong); background: var(--surface); display: grid; grid-template-columns: minmax(260px, 1fr) auto minmax(420px, 1fr); align-items: center; gap: 18px; }
.demo-title { display: flex; align-items: center; gap: 10px; }
.demo-title div, .demo-status div { display: grid; gap: 2px; }
.demo-title small, .demo-status small { font-size: 10px; }
.demo-status { min-width: 260px; padding: 8px 12px; border: 1px solid #a8ceb6; border-radius: 6px; background: var(--green-soft); display: flex; align-items: center; gap: 9px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(24,121,78,0.12); }
.demo-status strong { color: var(--green); font-size: 12px; }
.demo-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.demo-actions .segmented button { min-width: 72px; }
.demo-actions .btn { font-size: 11px; }
.demo-stage { height: calc(100vh - 68px); padding: 10px; display: grid; grid-template-columns: minmax(0, 58fr) 8px minmax(0, 42fr); gap: 0; }
.demo-stage.balanced { grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr); }
.demo-stage.flow { grid-template-columns: minmax(0, 42fr) 8px minmax(0, 58fr); }
.demo-pane { min-width: 0; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); overflow: hidden; display: grid; grid-template-rows: 38px 1fr; }
.demo-pane > header { padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--surface-soft); display: flex; align-items: center; justify-content: space-between; }
.demo-pane > header > div { display: flex; align-items: center; gap: 8px; }
.demo-pane > header span { color: var(--muted); font-size: 10px; }
.demo-pane > header strong { font-size: 11px; }
.demo-pane > header a { color: var(--green); font-size: 10px; text-decoration: none; }
.demo-pane iframe { width: 100%; height: 100%; border: 0; background: var(--bg); }
.demo-divider { display: grid; place-items: center; }
.demo-divider span { width: 2px; height: 46px; border-radius: 1px; background: #9fb0a7; }

@media (max-width: 1100px) {
  .demo-toolbar { grid-template-columns: 1fr auto; }
  .demo-status { display: none; }
  .demo-actions .btn { display: none; }
}

@media (max-width: 760px) {
  .demo-toolbar { height: 60px; }
  .demo-title small { display: none; }
  .demo-actions .segmented button { min-width: 54px; padding: 0 7px; font-size: 10px; }
  .demo-stage, .demo-stage.balanced, .demo-stage.flow { height: calc(100vh - 60px); grid-template-columns: 1fr; grid-template-rows: 1fr 6px 1fr; }
  .demo-divider span { width: 46px; height: 2px; }
}