/* ============================================================
   组件：工作区布局 (Workspace Layout)
   ============================================================ */

/* ── 移动端切换器 ── */
.mobile-workspace-switch {
  display: none;
  margin-bottom: var(--space-4);
  padding: var(--space-1);
  border-radius: var(--border-radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(var(--blur-sm));
  gap: var(--space-2);
}

.mobile-workspace-button {
  flex: 1 1 0;
  border: 0;
  border-radius: var(--border-radius-md);
  background: transparent;
  color: var(--text-secondary);
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.mobile-workspace-button:hover {
  color: var(--color-primary);
  background: var(--color-primary-50);
}

.mobile-workspace-button.is-active {
  color: var(--text-inverse);
  background: var(--gradient-primary);
  box-shadow: var(--shadow-primary);
}

.mobile-workspace-hint {
  display: none;
  margin-top: calc(var(--space-1) * -1);
  margin-bottom: var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

/* ── 主工作区 ── */
.workspace {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(420px, 1fr);
  gap: var(--panel-gap);
  align-items: start;
}

.workspace.is-mobile-preview .editor-panel,
.workspace.is-mobile-editor .preview-panel { display: none; }

/* ── 面板通用 ── */
.editor-panel,
.preview-panel {
  background: var(--gradient-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border-radius: var(--border-radius-xl);
  transition: box-shadow var(--duration-normal) var(--ease-default);
}

.editor-panel:hover,
.preview-panel:hover {
  box-shadow: var(--shadow-card-hover);
}

.editor-panel { padding: var(--space-6); }
.preview-panel { padding: var(--space-5); position: sticky; top: var(--space-5); }

/* ── 面板标题行 ── */
.panel-title-row,
.preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.panel-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #0f172a;
  letter-spacing: var(--tracking-tight);
}

.panel-subtitle,
.preview-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  line-height: var(--leading-relaxed);
}

.preview-toolbar-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── 响应式 ── */
@media (max-width: 1280px) {
  .workspace { grid-template-columns: 1fr; }
  .preview-panel { position: static; }
}

@media (max-width: 768px) {
  body { padding: var(--space-3); }
  #app { max-width: 100%; }

  .hero-card,
  .editor-panel,
  .preview-panel { border-radius: var(--border-radius-lg); }

  .hero-card { padding: var(--space-5) var(--space-4); }
  .hero-title { font-size: var(--text-3xl); }

  .mobile-workspace-switch { display: flex; }
  .mobile-workspace-hint { display: block; }

  .workspace { gap: var(--space-3); }
  .editor-panel { padding: var(--space-4); }
  .preview-panel { padding: var(--space-3); }

  .panel-title { font-size: var(--text-xl); }

  .preview-toolbar,
  .panel-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── 暗色模式适配 ── */
[data-theme="dark"] .mobile-workspace-switch {
  background: var(--bg-card);
  border-color: var(--border-light);
}

[data-theme="dark"] .panel-title {
  color: #f1f5f9;
}

[data-theme="dark"] .mobile-workspace-button {
  color: var(--text-secondary);
}

[data-theme="dark"] .mobile-workspace-button:hover {
  background: rgba(59, 130, 246, 0.08);
  color: var(--color-primary-light);
}