:root {
  /* 颜色系统 - 颠覆性设计：更柔和的现代配色 */
  --primary-color: #0f172a;
  --primary-hover: #1e293b;
  --accent-color: #6366f1;
  --bg-color: #fafafa;
  --sidebar-width: 380px;
  --sidebar-bg: rgba(255, 255, 255, 0.85);
  --sidebar-bg-blur: rgba(255, 255, 255, 0.95);
  --border-color: rgba(0, 0, 0, 0.06);
  --border-hover: rgba(0, 0, 0, 0.12);
  --text-color: #0f172a;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;

  /* 玻璃态效果 */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.18);

  /* 阴影系统 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* 圆角系统 */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* 间距系统 - 基于 8px 网格系统优化 */
  --spacing-xs: 4px; /* 0.5x 基础单位，用于紧密元素 */
  --spacing-sm: 8px; /* 1x 基础单位，用于相关元素 */
  --spacing-md: 16px; /* 2x 基础单位，用于分组内元素 */
  --spacing-lg: 20px; /* 2.5x 基础单位，用于分组间距（优化：从24px改为20px） */
  --spacing-xl: 24px; /* 3x 基础单位，用于大间距（优化：从32px改为24px） */
  --spacing-2xl: 32px; /* 4x 基础单位，用于页面级间距 */

  /* 过渡动画 */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
  background-attachment: fixed;
  color: var(--text-color);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-container {
  display: flex;
  height: 100vh;
  position: relative;
}

/* Sidebar Styles - 颠覆性设计：右侧浮动抽屉面板 */
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg-blur);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 100;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
  transform: translateX(0);
  transition: transform var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.resizing {
  transition: none; /* 拖动时禁用过渡动画 */
}

/* 可拖动的分隔条 */
.sidebar-resizer {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  cursor: ew-resize;
  background: transparent;
  z-index: 101;
  transition: background-color var(--transition-base);
  user-select: none;
  -webkit-user-select: none;
}

.sidebar-resizer:hover {
  background: var(--accent-color);
}

.sidebar-resizer:active {
  background: var(--accent-color);
  cursor: ew-resize;
}

/* 拖动时的视觉反馈 */
.sidebar.resizing .sidebar-resizer {
  background: var(--accent-color);
  width: 4px;
}

.sidebar-header {
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px; /* 符合 Material Design 最小触摸目标 */
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  letter-spacing: -0.5px;
}

.logo svg {
  color: var(--text-color);
  opacity: 0.8;
  width: 20px;
  height: 20px;
}

.subtitle {
  display: none; /* 极简设计：隐藏副标题 */
}

/* 收起/展开按钮 */
/* 侧边栏切换按钮已移除 */

.controls-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-xl);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  /* 优化：增加顶部和底部内边距，改善滚动体验 */
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg); /* 统一所有直接子元素的间距 */
}

.controls-scroll::-webkit-scrollbar {
  width: 4px;
}

.controls-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.controls-scroll::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

.controls-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* 控制分组 - 卡片式设计 */
.control-section {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin: 0; /* 移除 margin，由父容器的 gap 统一控制 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow var(--transition-base);
  /* 优化：增加分组之间的视觉分离 */
}

.control-section:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.control-section:last-child {
  margin-bottom: 0; /* 保持，虽然已经由 gap 控制 */
}

/* 分组标题 */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm); /* 优化：从 xs 改为 sm，增加图标和文字间距 */
  font-size: 13px; /* 优化：从 14px 改为 13px，更精致 */
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--spacing-lg); /* 优化：从 md 改为 lg，增加标题和内容间距 */
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.section-header svg {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  flex-shrink: 0;
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg); /* 优化：从 md 改为 lg，增加分组内元素间距 */
}

.control-group {
  margin-bottom: 0; /* 优化：移除底部间距，使用 gap 统一管理 */
}

.control-group:last-child {
  margin-bottom: 0;
}

.controls-scroll > .control-group:first-child {
  margin-top: 0;
}

/* 确保控制行和相邻元素的间距统一 */
.control-row {
  margin: 0; /* 移除所有 margin，由父容器的 gap 控制 */
}

/* 印章落款输入框宽度限制，与书名/出处保持一致（使用较小的宽度） */
#seal-text {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 确保印章落款控制组的宽度不超过控制行中单个输入框的宽度 */
.control-group:has(#seal-text) {
  max-width: calc(50% - var(--spacing-sm) / 2);
}

/* 隐藏特定控制组的标签 - 已通过添加 control-label 解决 */

/* 控制组内的标签样式 */
.section-content .control-label {
  font-size: 13px; /* 优化：统一字体大小 */
  font-weight: 500;
  color: var(--text-color); /* 优化：统一颜色 */
  margin-bottom: var(--spacing-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.width-value {
  font-weight: 600;
  color: var(--text-color);
}

/* 卡片宽度提示信息 */
.width-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-top: -4px;
  margin-bottom: var(--spacing-sm);
}

/* 卡片宽度滑块容器 */
.width-slider-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
  padding: 0 2px;
}

.control-row {
  display: flex;
  gap: var(--spacing-md); /* 优化：从 sm 改为 md，增加输入框之间的间距 */
  margin: 0; /* 统一移除 margin，由父容器的 gap 控制 */
  align-items: flex-end; /* 底部对齐，确保输入框在同一水平线 */
}

/* 确保控制行中的输入框宽度一致 */
.control-row .control-group.half {
  flex: 1;
  min-width: 0;
}

.control-group.half {
  flex: 1;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-width: 0; /* 防止 flex 子元素溢出 */
  margin-top: 0; /* 确保顶部对齐 */
  padding-top: 0; /* 确保顶部对齐 */
}

.control-group.half label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-sm) 0;
  padding: 0;
  letter-spacing: 0;
  line-height: 1.5;
}

.control-group.half input[type="text"] {
  width: 100%;
  min-height: 44px; /* 优化：从 42px 改为 44px，符合触摸目标标准 */
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px; /* 优化：统一使用标准内边距 */
}

label {
  display: block;
  font-size: 13px; /* 优化：从 12px 改为 13px，改善可读性 */
  font-weight: 500;
  color: var(--text-color); /* 优化：从 secondary 改为 primary，更清晰 */
  margin-bottom: var(--spacing-sm);
  letter-spacing: -0.01em; /* 优化：添加轻微字距调整 */
  line-height: 1.5;
}

/* Control label for non-form elements (like card-width-options) */
.control-label {
  display: block;
  font-size: 13px; /* 优化：从 12px 改为 13px */
  font-weight: 500;
  color: var(--text-color); /* 优化：从 secondary 改为 primary */
  margin-bottom: var(--spacing-sm);
  letter-spacing: -0.01em; /* 优化：添加轻微字距调整 */
  line-height: 1.5;
}

.value-display {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-color);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

input[type="text"],
select,
textarea {
  width: 100%;
  padding: 12px 16px; /* 优化：增加内边距，改善触摸体验和视觉舒适度 */
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md); /* 优化：从 sm 改为 md，更现代 */
  font-size: 14px;
  color: var(--text-color);
  background: #fff;
  transition: all var(--transition-base); /* 优化：添加 all，支持更多过渡效果 */
  font-family: inherit;
  box-sizing: border-box;
  min-height: 44px; /* 优化：符合 iOS HIG 最小触摸目标 44x44px */
}

/* 印章落款输入框使用与书名/出处相同的宽度 */
#seal-text {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

input[type="text"]:hover,
select:hover,
textarea:hover {
  border-color: var(--text-tertiary);
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

textarea {
  resize: vertical;
  min-height: 120px; /* 优化：从 100px 增加到 120px，提供更好的输入体验 */
  line-height: 1.7; /* 优化：从 1.6 增加到 1.7，改善可读性 */
  font-family: inherit;
  padding: var(--spacing-md); /* 优化：统一使用间距变量 */
}

input[type="text"]::placeholder,
textarea::placeholder {
  color: var(--text-tertiary);
}

/* Layout Select - 专业设计：图标+文字卡片式选择 */
.layout-select-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.layout-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  min-height: 64px; /* 优化：移除文字后，减少高度 */
  text-align: center;
}

.layout-option:hover {
  border-color: var(--accent-color);
  background: rgba(99, 102, 241, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.layout-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.layout-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; /* 优化：从 32px 增加到 40px，图标更突出 */
  height: 40px;
  color: var(--text-secondary);
  transition: all var(--transition-base);
}

.layout-option input[type="radio"]:checked ~ .layout-option-icon,
.layout-option:has(input[type="radio"]:checked) .layout-option-icon {
  color: var(--accent-color);
}

.layout-option:has(input[type="radio"]:checked) {
  border-color: var(--accent-color);
  background: rgba(99, 102, 241, 0.1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Color Grid - 字体颜色选择器 */
.color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md); /* 优化：从 sm 改为 md，增加颜色块间距 */
  align-items: flex-start;
  justify-content: flex-start;
}

/* 导出格式选项组 */
.export-format-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: flex-start;
  justify-content: flex-start;
}

.export-format-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 12px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-width: 70px;
  position: relative;
}

.export-format-option:hover {
  border-color: var(--text-tertiary);
  background: var(--bg-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.export-format-option input[type="checkbox"] {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  accent-color: var(--primary-color);
  z-index: 2;
  opacity: 0;
}

.export-format-option::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  background: #fff;
  transition: all var(--transition-base);
  z-index: 1;
  pointer-events: none;
}

.export-format-option:has(input[type="checkbox"]:checked)::before {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.export-format-option:has(input[type="checkbox"]:checked)::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  z-index: 2;
  pointer-events: none;
  line-height: 1;
}

.export-format-option svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  color: var(--text-secondary);
  transition: color var(--transition-base);
  margin-top: 4px;
}

.export-format-option span {
  font-size: 12px;
  transition: color var(--transition-base);
}

.export-format-option:has(input[type="checkbox"]:checked) svg {
  color: var(--primary-color);
}

.export-format-option:has(input[type="checkbox"]:checked) span {
  color: var(--primary-color);
  font-weight: 600;
}

.export-format-option:has(input[type="checkbox"]:checked) {
  border-color: var(--primary-color);
  background: rgba(15, 23, 42, 0.05);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1);
}

.color-option {
  width: 40px; /* 优化：从 36px 改为 40px，增加触摸目标 */
  height: 40px;
  border-radius: var(--radius-md); /* 优化：从 sm 改为 md */
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
  background: none;
}

.color-option::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.color-option:hover {
  transform: scale(1.05);
  border-color: var(--border-hover);
}

.color-option.active {
  border-color: var(--text-color);
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.color-option.active::after {
  display: none;
}

/* Theme Grid - 极简设计 */
.theme-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md); /* 优化：从 sm 改为 md，增加主题块间距 */
  align-items: flex-start;
  justify-content: flex-start;
}

.theme-option {
  width: 40px; /* 优化：从 36px 改为 40px */
  height: 40px;
  border-radius: var(--radius-md); /* 优化：从 sm 改为 md */
  cursor: pointer;
  border: 2px solid var(--border-color);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.theme-option::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(0, 0, 0, 0.08);
  pointer-events: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.theme-option:hover {
  transform: scale(1.08);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

.theme-option.active {
  border-color: var(--text-color);
  border-width: 3px;
  box-shadow:
    var(--shadow-md),
    0 0 0 2px rgba(15, 23, 42, 0.1);
}

.theme-option.active::after {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Sliders */
input[type="range"] {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: background var(--transition-base);
}

input[type="range"]:hover {
  background: var(--border-hover);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-lg);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-lg);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
}

.sidebar-footer {
  padding: var(--spacing-lg) var(--spacing-xl); /* 优化：左右使用更大间距 */
  border-top: 1px solid var(--border-color);
  background: transparent;
  /* 优化：增加安全区域，避免按钮贴边 */
  padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
}

.primary-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  background: var(--text-color);
  color: #fff;
  border: none;
  padding: 14px 24px; /* 优化：从 12px 20px 改为 14px 24px，增加按钮高度和内边距 */
  border-radius: var(--radius-md); /* 优化：从 sm 改为 md，更现代 */
  font-size: 15px; /* 优化：从 14px 改为 15px，改善可读性 */
  font-weight: 600; /* 优化：从 500 改为 600，更突出 */
  cursor: pointer;
  transition: all var(--transition-base); /* 优化：支持更多过渡效果 */
  letter-spacing: 0.2px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px; /* 优化：明确最小高度，符合 Material Design */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 优化：添加轻微阴影，增加层次感 */
}

.primary-btn:hover {
  background: var(--text-secondary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 优化：悬停时增强阴影 */
  transform: translateY(-1px); /* 优化：添加轻微上移效果 */
}

.primary-btn:active {
  background: var(--text-color);
  outline: none;
}

.primary-btn:focus {
  outline: none;
}

.primary-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.primary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.primary-btn svg {
  transition: transform var(--transition-base);
}

.primary-btn:hover svg {
  transform: scale(1.1);
}

/* Preview Area - 颠覆性设计：全屏沉浸式 */
.preview-area {
  flex: 1;
  width: calc(100% - var(--sidebar-width));
  margin-right: var(--sidebar-width);
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--spacing-2xl); /* 优化：从 xl 改为 2xl，增加预览区域留白 */
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  transition:
    width var(--transition-base),
    margin-right var(--transition-base),
    transform var(--transition-slow),
    opacity var(--transition-slow);
  cursor: pointer;
}

.preview-area.resizing {
  transition: none; /* 拖动时禁用过渡动画 */
}

.preview-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.preview-wrapper {
  box-shadow: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  transition: transform var(--transition-slow);
  transform-origin: top left; /* 移动端从左上角缩放，桌面端从中心缩放 */
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 确保内容从顶部开始显示 */
  width: 100%;
  padding: var(--spacing-md) 0; /* 添加上下内边距，确保头部可见 */
  will-change: transform;
}

.preview-wrapper:hover {
  /* 移除悬停效果，确保预览一致性 */
  transform: none;
}

/* Font Size Group - 字体和字号组合 */
.font-size-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Font Grid - 标签墙样式 */
.font-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: flex-start;
  justify-content: flex-start;
}

/* Font Option Button - 极简设计 */
.font-option-btn {
  padding: 8px 14px; /* 优化：从 6px 12px 改为 8px 14px */
  border: 1.5px solid var(--border-color); /* 优化：从 1px 改为 1.5px */
  border-radius: var(--radius-md); /* 优化：从 sm 改为 md */
  cursor: pointer;
  transition: all var(--transition-base);
  background: #fff;
  text-align: center;
  font-size: 13px; /* 优化：从 12px 改为 13px */
  font-weight: 500;
  color: var(--text-color);
  font-family: inherit;
  min-height: 36px; /* 优化：从 28px 改为 36px，改善触摸体验 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.font-option-btn:hover {
  border-color: var(--text-tertiary);
  background: var(--bg-color);
}

.font-option-btn.active {
  border-color: var(--text-color);
  background: var(--text-color);
  color: #fff;
}

/* Card Styles */
.card {
  width: 400px; /* Default, controlled by JS */
  min-height: auto; /* 自适应内容高度 */
  background: #fff;
  padding: var(--spacing-xl);
  position: relative;
  transition: all var(--transition-slow);
  font-family: "Noto Serif SC", serif;
  border-radius: var(--radius-xl);
  animation: cardFadeIn 0.5s ease-out;
  /* 合并 card-inner 的布局功能 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 确保底部信息始终在底部 */
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-bottom: 40px;
  font-family: -apple-system, sans-serif;
  letter-spacing: 1px;
}

.card-body {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 内容从顶部开始，支持长内容 */
  min-height: 0; /* 允许内容超出时自动扩展 */
}

.quote-mark {
  font-size: 40px;
  color: rgba(0, 0, 0, 0.1);
  font-family: serif;
  line-height: 1;
}

.quote-mark.start {
  margin-bottom: 10px;
}

.quote-mark.end {
  align-self: flex-end;
  margin-top: 10px;
}

.text-content {
  font-size: 20px; /* Default, controlled by JS */
  line-height: 1.8;
  color: #333;
  text-align: justify;
  white-space: pre-wrap;
  transition:
    opacity var(--transition-base),
    font-size var(--transition-base);
  word-break: break-word;
  hyphens: auto;
}

.card-footer-info {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  width: 100%; /* 确保占满宽度 */
  flex-shrink: 0; /* 防止被压缩 */
}

.book-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: flex-end;
  flex-shrink: 0; /* 防止被压缩 */
}

.book-info .line {
  width: 40px;
  height: 1px;
  background: #999;
  margin-bottom: 4px;
}

.book-info .meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: #666;
}

.book-info .book {
  font-weight: 700;
  color: #333;
}

/* Seal Styles - 右下角定位 */
.seal-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-end;
  margin-left: auto; /* 确保靠右对齐 */
  margin-top: 0; /* 确保与书籍信息底部对齐 */
}

.seal {
  width: 48px;
  height: 48px;
  border: 2.5px solid #b92b27;
  border-radius: 6px;
  color: #b92b27;
  font-family: "Ma Shan Zheng", cursive;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  letter-spacing: 2px;
  padding: 4px;
  box-shadow: 0 2px 4px rgba(185, 43, 39, 0.2);
  position: relative;
}

/* Vertical Layout Mode */
.card.vertical-mode .card-body {
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center; /* Center vertically */
}

.card.vertical-mode .text-content {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: left;
  height: auto;
  max-height: 450px; /* Limit height to force wrapping */
  width: auto;
  margin: 0 16px;
  display: block; /* Flex can cause issues with writing-mode wrapping sometimes */
  line-height: 1.8;
}

.card.vertical-mode .quote-mark.start {
  align-self: flex-start;
  margin-bottom: 0;
  margin-left: 10px;
}

.card.vertical-mode .quote-mark.end {
  align-self: flex-end;
  margin-top: 0;
  margin-right: 10px;
}

/* Themes */
/* 1. Clean White */
.theme-clean {
  background: #fff;
  color: #333;
}

/* 2. Warm Paper */
.theme-paper {
  background: #fdfbf7;
  color: #4a4a4a;
}

/* 3. Dark Night */
.theme-dark {
  background: #1a1a1a;
  color: #e0e0e0;
}
.theme-dark .card-header {
  color: #666;
}
.theme-dark .book-info .book {
  color: #e0e0e0;
}
.theme-dark .book-info .meta {
  color: #999;
}
.theme-dark .quote-mark {
  color: rgba(255, 255, 255, 0.1);
}

/* 4. Misty Blue */
.theme-mist {
  background: #e8ecef;
  color: #2c3e50;
}

/* 5. Soft Pink */
.theme-pink {
  background: #fff0f5;
  color: #5d4037;
}

/* 6. Green Tea */
.theme-green {
  background: #f1f8e9;
  color: #33691e;
}

/* 7. Parchment */
.theme-parchment {
  background-color: #f4e4bc;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 2.24 5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 2.24 5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d4c5a3' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
  color: #5d4037;
}

/* 8. Gradient Blue */
.theme-gradient-blue {
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  color: #2c3e50;
}

/* 9. Gradient Sunset */
.theme-gradient-sunset {
  background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  color: #5d4037;
}

/* 10. Gradient Mint */
.theme-gradient-mint {
  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
  color: #1b5e20;
}

/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {
  body {
    overflow: hidden; /* Prevent body scroll when preview is open */
    height: 100vh;
  }

  /* 移动端卡片式分组样式调整 */
  .control-section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-sm);
  }

  .section-header {
    font-size: 13px;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
  }

  .section-content {
    gap: var(--spacing-sm);
  }

  .app-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  /* 移动端预览区域：默认全屏样式，通过 scale(0.4) 缩小为缩略图 */
  .preview-area {
    /* 默认全屏样式 */
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important; /* 固定的缩略图高度 100vh */
    min-height: 100vh !important;
    max-height: 100vh !important; /* 最大高度为屏幕高度的 100% */
    padding: var(--spacing-xl) var(--spacing-md) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: rgba(0, 0, 0, 0.5) !important; /* 半透明背景 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important; /* 垂直居中显示 */

    /* 默认缩略图状态：scale(0.4)，位置在右下角 */
    /* 使用 transform-origin: top left 配合绝对坐标定位 */
    transform: scale(0.4) !important;
    transform-origin: top left !important;
    z-index: 199 !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--border-color);
    pointer-events: auto;
    cursor: pointer;

    /* 初始隐藏，等 JavaScript 设置好位置后再显示，避免闪现 */
    opacity: 0 !important;
    visibility: hidden !important;

    /* 位置由 JS 动态设置（右下角，下载按钮之上） */
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
  }

  .preview-area::before {
    display: none !important; /* 移除背景装饰 */
  }

  /* 注意：.preview-fullscreen 类仅作为状态标记，样式完全由 JavaScript 控制 */

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw;
    max-height: 100vh;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: none;
    z-index: 10;
    transition:
      transform var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1),
      opacity var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(0);
    box-shadow: none;
  }

  .sidebar.collapsed {
    transform: translateX(100%);
  }

  /* 移动端隐藏分隔条 */
  .sidebar-resizer {
    display: none !important;
  }

  .controls-scroll {
    flex: 1;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--spacing-md);
    /* 优化：增加底部内边距，避免被FAB遮挡（FAB高度56px + 间距24px + 安全边距） */
    padding-bottom: calc(var(--spacing-lg) + 56px + var(--spacing-lg));
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-header {
    flex-shrink: 0;
    padding: var(--spacing-md);
  }

  /* 移动端隐藏侧边栏底部的保存按钮，使用 FAB */
  .sidebar-footer {
    display: none;
  }

  /* 移动端浮动预览按钮样式 */
  /* 移动端：缩略图状态下隐藏保存按钮，预览状态下显示 */
  .floating-actions {
    position: fixed !important; /* 移动端保持固定定位 */
    display: none; /* 默认隐藏（缩略图状态） */
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    left: auto;
    top: auto;
    z-index: 1001 !important; /* 确保在预览图之上（预览图 z-index 为 1000） */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  /* 预览状态下显示保存按钮（由 JavaScript 控制显示/隐藏） */

  .save-fab {
    display: flex;
  }

  .sidebar-fab {
    display: none; /* 移动端不显示侧边栏切换按钮 */
  }

  /* 移动端隐藏侧边栏切换按钮 */
  .sidebar-toggle {
    display: none;
  }

  /* Preview wrapper for animation - 移动端默认缩小 */
  .preview-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    transform-origin: top left !important;
    justify-content: center;
    align-items: flex-start; /* 改为 flex-start，确保从顶部开始显示 */
    padding: var(--spacing-md) 0; /* 添加上下内边距，确保头部可见 */
    box-shadow: none; /* 移除阴影，与桌面端一致 */
    border: none; /* 移除边框 */
  }

  .card {
    /* 移除 scale(0.9)，与桌面端保持一致 */
    margin: 0 auto;
    box-shadow: var(--shadow-xl);
    max-width: calc(100vw - 32px);
  }

  /* 改进移动端滚动体验 */
  .controls-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* 移动端按钮优化 */
  .primary-btn {
    min-height: 48px; /* 符合触摸目标大小 */
    -webkit-tap-highlight-color: transparent;
  }

  /* 移动端输入框优化 */
  input[type="text"],
  select,
  textarea {
    font-size: 16px; /* 防止iOS自动缩放 */
    padding: 12px 14px;
  }

  /* 移动端触摸反馈 */
  .theme-option:active,

  /* 移动端预览区域滑动优化 */
  .preview-area {
    overscroll-behavior: contain;
  }

  /* 移动端字体选项优化 */
  .font-grid {
    display: flex; /* 确保使用 flex 布局 */
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  .font-option-btn {
    font-size: 11px;
    padding: 5px 10px;
    min-height: 28px;
  }

  .theme-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  .theme-option {
    width: 36px;
    height: 36px;
  }

  /* 移动端卡片底部布局优化 */
  /* 移除移动端 card-footer-info 的特殊样式，确保与桌面端预览完全一致 */
}

/* 改进焦点可见性 */
*:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* 改进按钮可访问性 */
button:not(:disabled) {
  cursor: pointer;
}

/* 移除按钮的默认点击高亮 */
button {
  -webkit-tap-highlight-color: transparent;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
}

/* 选择框样式 */
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  appearance: none;
}

/* Floating Action Buttons - 颠覆性设计：浮动操作区 */
.floating-actions {
  position: fixed;
  bottom: var(--spacing-xl);
  right: var(--spacing-xl); /* 默认右下角，桌面端会覆盖为左下角 */
  z-index: 1001; /* 确保在预览图之上（预览图 z-index 为 1000） */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  pointer-events: none;
}

.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--text-color);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-base);
  pointer-events: auto;
  position: relative;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.15);
}

.fab:active {
  transform: translateY(0) scale(0.98);
  outline: none;
}

.fab:focus {
  outline: none;
}

.fab:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* 侧边栏FAB已移除 - 桌面端侧边栏不可收起 */

.save-fab {
  display: flex;
}

/* Desktop Styles - 颠覆性设计 */
@media screen and (min-width: 769px) {
  /* 桌面端：侧边栏始终显示，不可收起 */
  .sidebar {
    transform: translateX(0);
  }

  /* 桌面端：预览区域正常布局 */
  .preview-area {
    position: relative !important;
    width: calc(100% - var(--sidebar-width)) !important;
    height: auto !important;
    min-height: 100vh !important;
    padding: var(--spacing-2xl) !important;
    margin-right: var(--sidebar-width) !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .preview-area::before {
    display: block !important; /* 恢复背景装饰 */
  }

  .preview-wrapper {
    transform: scale(1) !important;
    transform-origin: center center !important;
  }

  /* 侧边栏不可收起，无需处理 collapsed 状态 */

  /* 隐藏桌面端的保存按钮（使用 FAB） */
  .sidebar-footer {
    display: none;
  }

  /* 桌面端显示分隔条 */
  .sidebar-resizer {
    display: block;
  }

  /* 桌面端：保存按钮在右下角（固定定位） */
  .floating-actions {
    position: fixed !important;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
  }
}

/* 平板适配 - 移除固定宽度，使用可拖动宽度 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .card {
    width: 380px;
  }
}

/* 大屏幕优化 - 移除固定宽度，使用可拖动宽度 */
@media screen and (min-width: 1440px) {
  .preview-area {
    padding: 60px;
  }
}

/* 超小屏幕优化 (修复嵌套媒体查询) */
@media screen and (max-width: 380px) {
  .card {
    transform: scale(0.8);
    padding: var(--spacing-lg);
  }

  .controls-scroll {
    padding: var(--spacing-md);
  }

  .sidebar-header {
    padding: var(--spacing-md);
  }

  .theme-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}