/* 更改字体 页面样式 */
.page-content { padding: var(--spacing-8) 0; }
.page-header { text-align: center; margin-bottom: var(--spacing-8); }
.page-title { font-size: var(--font-size-3xl); color: #333333; margin-bottom: var(--spacing-4); }
.page-description { font-size: var(--font-size-lg); color: #666666; }

/* 预览字体类，替代内联 style */
.ff-system { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.ff-serif { font-family: Georgia, 'Times New Roman', serif; }
.ff-sans { font-family: Arial, Helvetica, sans-serif; }
.ff-mono { font-family: 'Courier New', Consolas, monospace; }

.font-settings-container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-8); max-width: 1000px; margin: 0 auto; }
.settings-panel, .preview-panel { background: #ffffff; border: 1px solid #e5e5e5; border-radius: var(--radius-lg); padding: var(--spacing-6); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.setting-group { margin-bottom: var(--spacing-6); }
.setting-group h3 { color: #333333; margin-bottom: var(--spacing-4); font-size: var(--font-size-lg); }
.font-options, .spacing-options { display: flex; flex-direction: column; gap: var(--spacing-3); }
.font-option, .spacing-option { display: flex; align-items: center; gap: var(--spacing-2); cursor: pointer; padding: var(--spacing-2); border-radius: var(--radius-base); transition: background-color var(--transition-base); }
.font-option:hover, .spacing-option:hover { background-color: #f9f9f9; }
.size-control { display: flex; flex-direction: column; gap: var(--spacing-3); }
.size-control input[type="range"] { width: 100%; }
.size-labels { display: flex; justify-content: space-between; font-size: var(--font-size-sm); color: #666666; }
.setting-actions { display: flex; gap: var(--spacing-3); margin-top: var(--spacing-6); }
.btn-apply, .btn-reset { flex: 1; padding: var(--spacing-3) var(--spacing-4); border: none; border-radius: var(--radius-base); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-base); }
.btn-apply { background: #FF4500; color: white; }
.btn-apply:hover { background: #e63e00; transform: translateY(-1px); }
.btn-reset { background: #f3f4f6; color: #374151; }
.btn-reset:hover { background: #e5e7eb; }
.preview-panel h3 { color: #333333; margin-bottom: var(--spacing-4); font-size: var(--font-size-lg); }
.preview-content { border: 1px solid #e5e5e5; border-radius: var(--radius-base); padding: var(--spacing-4); background: #fafafa; }
.preview-content h4 { color: #333333; margin-bottom: var(--spacing-3); }
.preview-content p { color: #555555; margin-bottom: var(--spacing-3); }
@media (max-width: 768px) { .font-settings-container { grid-template-columns: 1fr; } }