:root{--color-primary: #1a1a2e;--color-secondary: #16213e;--color-surface: #fafaf8;--color-card: #ffffff;--color-text: #1a1a2e;--color-text-muted: #6b7280;--color-border: #e5e7eb;--color-border-active: #1a1a2e;--color-disabled: #d1d5db;--color-error: #dc2626;--color-error-bg: #fef2f2;--color-warn-bg: #fff7ed;--radius: 8px;--radius-input: 6px;--radius-btn: 10px;--shadow: 0 1px 3px rgba(0, 0, 0, .08);--shadow-hover: 0 4px 12px rgba(0, 0, 0, .12);--shadow-btn: 0 2px 8px rgba(26, 26, 46, .3);--space-page: 24px;--space-block: 32px;--space-card: 20px;--space-input: 12px 16px}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans TC,Microsoft JhengHei,sans-serif;font-size:14px;color:var(--color-text);background:var(--color-surface);line-height:1.5}.app-header{background:var(--color-card);border-bottom:1px solid var(--color-border);padding:24px var(--space-page);text-align:center}.app-header h1{font-family:Georgia,"Noto Serif TC",serif;font-size:24px;margin:0 0 4px;color:var(--color-text)}.app-header .subtitle{font-size:14px;color:var(--color-text-muted);margin:0}#app{max-width:720px;margin:0 auto;padding:var(--space-block) var(--space-page)}.main-content{display:flex;flex-direction:column;gap:var(--space-block)}.section-block{background:var(--color-card);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-card)}.section-block h2{font-size:16px;margin:0 0 16px;color:var(--color-text)}.mode-cards{display:flex;gap:24px;flex-wrap:wrap}.mode-card{width:240px;min-height:200px;border:2px solid var(--color-border);border-radius:var(--radius);padding:var(--space-card);cursor:pointer;transition:border-color .2s ease,background .2s ease}.mode-card:hover{border-color:var(--color-text-muted)}.mode-card.selected{border-color:var(--color-border-active);background:#1a1a2e0a}.mode-card .mode-preview{width:100%;height:80px;background:linear-gradient(to bottom,transparent 0%,var(--color-border) 1px),linear-gradient(to right,var(--color-border) 1px,transparent 1px);background-size:33.33% 33.33%;background-color:var(--color-surface);border-radius:var(--radius-input);margin-bottom:12px}.mode-card .mode-name{font-weight:500;margin-bottom:4px}.mode-card .mode-hint{font-size:12px;color:var(--color-text-muted)}.content-tabs{display:flex;gap:8px;margin-bottom:16px}.content-tab{padding:10px 20px;border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-card);cursor:pointer;font-size:14px;transition:border-color .2s,background .2s}.content-tab:hover{border-color:var(--color-text-muted)}.content-tab.selected{border-color:var(--color-border-active);background:#1a1a2e0f}.upload-zone{border:2px dashed var(--color-border);border-radius:var(--radius);padding:32px;text-align:center;color:var(--color-text-muted);margin-bottom:16px;cursor:pointer}.upload-zone.dragover{border-color:var(--color-primary);background:#1a1a2e0a}.upload-zone.error{border-color:var(--color-error);background:var(--color-error-bg);color:var(--color-error)}.preset-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.preset-btn{padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-card);cursor:pointer;font-size:13px;text-align:center;transition:border-color .2s,background .2s}.preset-btn:hover{border-color:var(--color-text-muted)}.preset-btn.selected{border-color:var(--color-border-active);background:#1a1a2e0f}.preset-btn .preset-label{font-weight:500}.preset-btn .preset-pages{font-size:11px;color:var(--color-text-muted)}.section-list{display:flex;flex-direction:column;gap:12px}.section-item{border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-card)}.section-item header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-item header .section-title{font-weight:500;margin:0}.section-item .field-row{margin-bottom:10px}.section-item .field-row label{display:block;font-size:12px;color:var(--color-text-muted);margin-bottom:4px}.section-item input[type=text],.section-item textarea{width:100%;padding:var(--space-input);border:1px solid var(--color-border);border-radius:var(--radius-input);font-size:14px}.section-item .section-stats{font-size:12px;color:var(--color-text-muted);margin-top:8px}.section-actions{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.btn-icon{padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-input);background:var(--color-card);cursor:pointer;font-size:13px}.btn-icon:disabled{opacity:.5;cursor:not-allowed}.global-stats{margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border);font-size:14px;color:var(--color-text-muted)}@font-face{font-family:PenPracticeDefaultKai;src:url(../fonts/default-kai.ttf) format("truetype")}.font-options{display:flex;gap:24px;flex-wrap:wrap}.font-option{border:2px solid var(--color-border);border-radius:var(--radius);padding:var(--space-card);min-width:200px;cursor:pointer;transition:border-color .2s,background .2s}.font-option.selected{border-color:var(--color-border-active);background:#1a1a2e0a}.font-preview{width:64px;height:64px;margin:12px 0;border:1px solid var(--color-border);border-radius:var(--radius-input);display:flex;align-items:center;justify-content:center;font-size:48px;background:var(--color-surface)}.font-preview-default{font-family:PenPracticeDefaultKai,"Noto Serif TC",serif}.font-warning{margin-top:12px;padding:10px;border-radius:var(--radius-input);background:var(--color-warn-bg);font-size:13px;color:#9a3412}.action-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.btn-primary{padding:16px 32px;min-width:240px;height:52px;border:none;border-radius:var(--radius-btn);background:var(--color-primary);color:#fff;font-size:16px;font-weight:500;cursor:pointer;box-shadow:var(--shadow-btn);transition:opacity .2s}.btn-primary:hover:not(:disabled){opacity:.9}.btn-primary:disabled{background:var(--color-disabled);color:var(--color-text-muted);cursor:not-allowed;box-shadow:none}.btn-secondary{padding:16px 24px;min-width:160px;height:52px;border:2px solid var(--color-primary);border-radius:var(--radius-btn);background:var(--color-card);color:var(--color-primary);font-size:14px;cursor:pointer;transition:background .2s,color .2s}.btn-secondary:hover:not(:disabled){background:#1a1a2e0f}.btn-secondary:disabled{border-color:var(--color-disabled);color:var(--color-disabled);cursor:not-allowed}.progress-bar{width:100%;max-width:400px;height:8px;background:var(--color-border);border-radius:4px;overflow:hidden;margin-top:8px}.progress-bar fill{display:block;height:100%;background:var(--color-primary);transition:width .2s}.error-message{margin-top:12px;padding:10px;border-radius:var(--radius-input);background:var(--color-error-bg);color:var(--color-error);font-size:13px}.app-footer{text-align:center;padding:24px var(--space-page);font-size:12px;color:var(--color-text-muted);border-top:1px solid var(--color-border)}.with-desc-only{display:none}body.mode-with-description .with-desc-only{display:block}