/* 保持原有样式不变 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); color: #333; min-height: 100vh; padding: 10px; }
.container { max-width: 1200px; margin: 0 auto; background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden; }
header { background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); color: white; padding: 20px 30px; text-align: center; }
header h1 { font-size: 1.8rem; margin-bottom: 8px; }
.app-content { display: flex; flex-wrap: wrap; padding: 20px; }
.controls, .preview { flex: 1; min-width: 300px; padding: 20px; }
.controls { border-right: 1px solid #eee; max-height: calc(100vh - 150px); overflow-y: auto; }
.preview { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.control-group { margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.control-group h3 { margin-bottom: 12px; color: #4b6cb7; border-bottom: 1px solid #eaeaea; padding-bottom: 8px; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: 500; }
input, select, button, textarea { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; }
textarea { resize: vertical; min-height: 80px; line-height: 1.4; }
button { background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); color: white; border: none; cursor: pointer; font-weight: 600; transition: all 0.3s ease; margin-top: 10px; }
button:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
#uploadFontBtn { background: linear-gradient(90deg, #e67e22 0%, #d35400 100%); }
.color-input { display: flex; align-items: center; }
.color-input input { flex: 1; }
.color-preview { width: 30px; height: 30px; border-radius: 5px; margin-left: 10px; border: 1px solid #ddd; }
.shape-options, .size-options { display: flex; flex-wrap: wrap; gap: 10px; }
.position-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.shape-option, .size-option { flex: 1; min-width: 80px; text-align: center; padding: 10px; border: 2px solid #ddd; border-radius: 5px; cursor: pointer; transition: all 0.2s; }
.position-option { padding: 12px 5px; font-size: 0.9rem; border: 2px solid #ddd; border-radius: 5px; cursor: pointer; transition: all 0.2s; text-align: center; background: #f8f9fa; }
.shape-option:hover, .size-option:hover, .position-option:hover { border-color: #4b6cb7; }
.shape-option.active, .size-option.active, .position-option.active { border-color: #4b6cb7; background: rgba(75,108,183,0.1); }
.checkbox-group { display: flex; align-items: center; margin-bottom: 10px; }
.checkbox-group input { width: auto; margin-right: 10px; }
#transparentBgGroup { padding: 8px; background: rgba(75,108,183,0.05); border-radius: 5px; margin-top: 5px; }
.char-count { font-size: 0.8rem; color: #666; margin-top: 5px; }
.max-chars { color: #e74c3c; }
.stretch-controls, .font-size-controls { display: flex; gap: 15px; margin-top: 10px; }
.stretch-control, .font-size-control { flex: 1; text-align: center; }
.stretch-control label, .font-size-control label { font-size: 0.9rem; margin-bottom: 5px; }
.font-size-note, .stretch-note { font-size: 0.8rem; color: #e67e22; margin-top: 5px; padding: 5px; background: rgba(230,126,34,0.05); border-radius: 4px; }
.stretch-value, .font-size-value { font-size: 0.8rem; color: #666; margin-top: 5px; }
.preview-area { width: 256px; height: 256px; border: 1px solid #ddd; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.1s ease; }
canvas { max-width: 100%; max-height: 100%; }
.download-options { display: flex; gap: 10px; width: 100%; max-width: 400px; }
.download-options button { flex: 1; }
.size-preview { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; max-width: 400px; }
.size-preview-item { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.size-preview-canvas { border: 1px solid #ddd; margin-bottom: 5px; background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 8px 8px; background-position: 0 0, 0 4px, 4px -4px, -4px 0px; }
footer { text-align: center; padding: 15px; color: #666; font-size: 0.9rem; border-top: 1px solid #eee; }
.font-upload-area, .image-upload-area { margin: 15px 0; padding: 15px; border: 2px dashed #e67e22; border-radius: 5px; text-align: center; transition: all 0.3s; }
.image-upload-area { border-color: #3498db; }
.font-upload-area:hover, .image-upload-area:hover { background: rgba(230,126,34,0.05); }
.image-upload-area:hover { background: rgba(52,152,219,0.05); }
#fontFileInput, #imageFileInput { display: none; }
.upload-hint { font-size: 0.85rem; color: #666; margin-top: 8px; }
.upload-success { margin-top: 10px; padding: 8px; background: rgba(46,204,113,0.1); color: #27ae60; border-radius: 4px; font-size: 0.9rem; display: none; }
.progress-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.progress-modal.active { opacity: 1; visibility: visible; }
.progress-container { background: white; padding: 20px; border-radius: 10px; width: 90%; max-width: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.progress-title { font-size: 1.1rem; font-weight: 600; color: #333; margin-bottom: 15px; text-align: center; }
.progress-bar-container { width: 100%; height: 12px; background: #f1f1f1; border-radius: 6px; overflow: hidden; margin-bottom: 15px; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); width: 0%; border-radius: 6px; transition: width 0.5s ease; }
.progress-text { font-size: 0.9rem; color: #666; text-align: center; }
.progress-success { color: #27ae60; font-weight: 600; display: none; }
.manual-wrap-hint { font-size: 0.8rem; color: #666; margin-top: 5px; padding: 5px; background: rgba(52,152,219,0.05); border-radius: 4px; display: none; }
.manual-wrap-hint.active { display: block; }

/* 新增样式 */
.tab-container { display: flex; margin-bottom: 20px; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; }
.tab-button { flex: 1; padding: 12px; text-align: center; background: #f8f9fa; border: none; cursor: pointer; transition: all 0.2s; font-weight: 600; color: #666; margin-top: 0; }
.tab-button.active { background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); color: white; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.image-preview-container { width: 100%; height: 150px; border: 1px solid #ddd; border-radius: 8px; margin-top: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f8f9fa; }
#uploadedImagePreview { max-width: 100%; max-height: 100%; display: none; }
.image-processing-options { margin-top: 15px; padding: 10px; background: rgba(52,152,219,0.05); border-radius: 5px; }
.image-clear-btn { background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%); margin-top: 10px; }

/* 新增的示例和提示区域样式 */
.examples-section { padding: 20px; background: #f8f9fa; margin: 20px; border-radius: 10px; }
.examples-section h2 { color: #4b6cb7; margin-bottom: 15px; text-align: center; }
.example-code { background: #2d2d2d; color: #f8f8f2; padding: 10px; border-radius: 5px; font-family: monospace; margin: 10px 0; overflow-x: auto; }

.tips-section { padding: 20px; margin: 0 20px 20px; }
.tips-section h2 { color: #4b6cb7; margin-bottom: 15px; text-align: center; }
.tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.tip-card { background: #f8f9fa; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.tip-card h3 { color: #333; margin-bottom: 8px; font-size: 1.1rem; }
.tip-card p { color: #666; font-size: 0.9rem; }

@media (max-width: 768px) {
.app-content { flex-direction: column; }
.controls { border-right: none; border-bottom: 1px solid #eee; max-height: none; }
.preview { min-height: 500px; justify-content: flex-start; padding-top: 30px; }
.stretch-controls, .font-size-controls { flex-direction: column; }
.download-options { flex-direction: column; max-width: 100%; }
.tips-grid { grid-template-columns: 1fr; }
}