html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--zuoekai-font-family-sans);
  color: var(--zuoekai-color-text);
  background: var(--zuoekai-color-surface-page);
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* 全局隐藏工具类，替代 Tailwind/Flowbite 的 .hidden */
/* !important 保证权重高于同级组件样式（如 .zuoekai-empty { display:flex }），
   避免组件类在后续加载时覆盖此工具类 */
.hidden {
  display: none !important;
}

button, input, select, textarea {
  font: inherit;
}

:focus {
  outline: none;
}

:focus-visible {
  box-shadow: var(--zuoekai-focus-ring);
  border-radius: var(--zuoekai-radius-sm);
}

.zuoekai-demo-page {
  min-height: 100vh;
  display: flex;
}

.zuoekai-demo-main {
  flex: 1;
  padding: 24px 24px 24px 100px;
}

.zuoekai-demo-panel {
  background: var(--zuoekai-color-surface-panel);
  border: 1px solid var(--zuoekai-color-border);
  border-radius: var(--zuoekai-radius-lg);
  box-shadow: var(--zuoekai-shadow-sm);
  padding: 16px;
}

.zuoekai-demo-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
}

.zuoekai-demo-desc {
  margin: 0 0 16px;
  color: var(--zuoekai-color-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.zuoekai-demo-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.zuoekai-demo-button {
  appearance: none;
  border: 1px solid var(--zuoekai-color-border);
  background: var(--zuoekai-color-surface-panel);
  color: var(--zuoekai-color-text);
  border-radius: var(--zuoekai-radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  transition: background var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out),
    border-color var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out),
    transform var(--zuoekai-motion-duration-fast) var(--zuoekai-motion-ease-out);
}

.zuoekai-demo-button:hover {
  background: rgba(99, 102, 241, 0.08);
}

.zuoekai-demo-button:active {
  transform: translateY(1px);
}

@media (max-width: 768px) {
  .zuoekai-demo-main {
    /* 移动端侧边栏变为悬浮按钮，不再占用左侧空间 */
    padding-left: 16px;
    padding-right: 16px;
    /* 底部留出空间，避免内容被悬浮的 Sidebar Toggle (bottom: 100px) 或未来的 Dock 遮挡 */
    padding-bottom: 120px; 
  }
}