/*
 * demo 控制栏样式（只在 GitHub Pages 的在线 demo 里加载）。
 *
 * 前 20 行是「让位」：管理台的 #app 是 min-height:100vh 的 flex 列，
 * 底部固定栏会盖住 iframe 与 toast，所以要把可视高度让出去，
 * 而不是浮在上面挡东西。除此之外不碰产品的任何选择器。
 */

:root {
  --demo-bar-h: 108px;
  --demo-bar-bg: #11151c;
  --demo-bar-fg: #e8ecf2;
  --demo-bar-dim: #97a0b0;
  --demo-bar-line: #2a313d;
  --demo-accent: #4f8cff;
}

body { padding-bottom: var(--demo-bar-h); }

#app { min-height: calc(100vh - var(--demo-bar-h)); }

/* toast 原本贴底 16px，会被控制栏压住 */
.toast-region { bottom: calc(var(--demo-bar-h) + 16px) !important; }

.demo-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90; /* 高于产品最高层 z-dialog(80) */
  min-height: var(--demo-bar-h);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--demo-bar-bg);
  color: var(--demo-bar-fg);
  border-top: 2px solid var(--demo-accent);
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.28);
  font: 13px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.demo-captions {
  flex: 1 1 380px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.demo-caption {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.demo-note {
  margin: 0;
  color: var(--demo-bar-dim);
  font-size: 12px;
}

.demo-note:empty { display: none; }

.demo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.demo-btn {
  font: inherit;
  font-size: 12.5px;
  color: var(--demo-bar-fg);
  background: #1b212c;
  border: 1px solid var(--demo-bar-line);
  border-radius: 7px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.demo-btn:hover:not(:disabled) { border-color: var(--demo-accent); }

.demo-btn:disabled { opacity: 0.42; cursor: not-allowed; }

.demo-btn.is-primary {
  background: var(--demo-accent);
  border-color: var(--demo-accent);
  color: #fff;
  font-weight: 600;
}

.demo-btn.is-link {
  background: transparent;
  border-color: transparent;
  color: var(--demo-bar-dim);
  text-decoration: none;
}

.demo-btn.is-link:hover { color: var(--demo-bar-fg); }

.demo-btn:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 2px; }

@media (max-width: 900px) {
  :root { --demo-bar-h: 150px; }
}