/* ===== 框架对比 Demo 通用样式：代码 + 实时预览，框架 Tab 切换 ===== */
.fd {
  border: 1px solid #2c5364;
  border-radius: 10px;
  overflow: hidden;
  margin: 1rem 0;
  background: #0d161d;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.fd-tabs {
  display: flex;
  gap: 2px;
  background: linear-gradient(90deg, #0f2027, #203a43);
  padding: 6px 6px 0;
  flex-wrap: wrap;
}
.fd-tab {
  border: none;
  background: #16242e;
  color: #9fb3c8;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  transition: all .15s;
}
.fd-tab:hover { color: #cfe8f5; }
.fd-tab.fd-active {
  background: #00e5ff;
  color: #06222b;
  box-shadow: 0 0 10px rgba(0,229,255,.35);
}
.fd-body { display: flex; flex-direction: row; gap: 0; }
@media (max-width: 720px) { .fd-body { flex-direction: column; } }
.fd-code {
  flex: 1 1 50%;
  margin: 0;
  padding: 14px 16px;
  background: #0a1219;
  color: #d6e6f2;
  font-size: 13px;
  line-height: 1.55;
  overflow: auto;
  max-height: 420px;
  border-right: 1px solid #20323d;
  white-space: pre;
}
.fd-code code { font-family: "Fira Code", "Cascadia Code", Consolas, monospace; }
.fd-preview {
  flex: 1 1 50%;
  padding: 18px 16px;
  color: #e6f1f7;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,229,255,.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(124,77,255,.06), transparent 40%),
    #0d161d;
}
.fd-preview pre { color: #ff7b7b; white-space: pre-wrap; }

/* 预览内通用控件风格 */
.fd-preview button {
  font-size: 1rem; padding: .35rem .9rem; margin: .2rem;
  cursor: pointer; border: none; border-radius: 6px;
  background: #203a43; color: #fff;
}
.fd-preview button:hover { background: #2c5364; }
.fd-preview input, .fd-preview select {
  font-size: 1rem; padding: .35rem .6rem; margin: .2rem;
  border: 1px solid #2c5364; border-radius: 6px;
  background: #0a1219; color: #e6f1f7;
}
.fd-preview .row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.fd-preview .big { font-size: 1.6rem; font-weight: 700; color: #00e5ff; }
.fd-preview ul { text-align: left; margin: .2rem 0; padding-left: 1.1rem; }
.fd-preview li { margin: .15rem 0; }
.fd-preview .muted { color: #8aa3b8; font-size: .85rem; }