*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{margin:0}:root{--bg: #0d0d0d;--surface: #141414;--surface-raised: #1c1c1c;--border: #2a2a2a;--border-subtle: #1f1f1f;--text: #e8e8e8;--text-muted: #888;--text-dim: #555;--accent: #c8a84b;--accent-hover: #b8963c;--error: #e06464;--error-bg: rgba(224,100,100,.1);--success: #5ec46a;--success-bg: rgba(94,196,106,.1);--radius: 5px}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}#root{height:100%}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.header-inner{max-width:100%;padding:0 24px;height:54px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px}.brand-name{font-size:17px;font-weight:700;letter-spacing:-.3px;color:var(--text)}.tagline{font-size:11px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase}.main{flex:1;min-height:0;display:flex}.layout{display:grid;grid-template-columns:1fr 310px;width:100%;min-height:0}.editor-section{display:flex;flex-direction:column;border-right:1px solid var(--border);min-height:0;transition:border-color .15s,background-color .15s}.editor-section.dragging{border-right-color:var(--accent);background-color:#c8a84b08}.section-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--border-subtle);background:var(--surface);flex-shrink:0}.section-label{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-muted)}.editor-actions{display:flex;gap:6px}.options-section{display:flex;flex-direction:column;background:var(--surface);min-height:0;overflow:hidden}.generate-area{padding:14px;border-top:1px solid var(--border);flex-shrink:0}.btn-generate{width:100%;padding:11px;font-size:14px;font-weight:600}.booklet-note{margin-top:7px;font-size:11px;color:var(--text-dim);text-align:center;line-height:1.4}.btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius);cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;transition:background .12s,opacity .12s;white-space:nowrap;padding:7px 13px}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);color:#0d0d0d}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--surface-raised);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:#232323}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:hover:not(:disabled){background:var(--surface-raised);color:var(--text)}.btn-sm{padding:4px 9px;font-size:12px}.status{padding:7px 11px;border-radius:var(--radius);font-size:12px;margin-bottom:10px;line-height:1.4}.status-error{background:var(--error-bg);color:var(--error)}.status-success{background:var(--success-bg);color:var(--success)}.footer{height:36px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-dim);border-top:1px solid var(--border-subtle);background:var(--surface);flex-shrink:0}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3a3a3a}.md-editor{flex:1;display:flex;min-height:0;overflow:hidden}.md-textarea{flex:1;resize:none;border:none;outline:none;background:#0a0a0a;color:#d8d8d8;font-family:Courier New,Courier,monospace;font-size:13px;line-height:1.65;padding:18px 20px;caret-color:#c8a84b;-moz-tab-size:2;tab-size:2;overflow-y:auto}.md-textarea::placeholder{color:#3a3a3a}.pdf-options{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.opt-header{padding:8px 14px;border-bottom:1px solid #1f1f1f;flex-shrink:0}.opt-title{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#888}.opt-body{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:14px}.opt-group{display:flex;flex-direction:column;gap:5px}.opt-label{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#666}.opt-val{font-weight:400;color:#c8a84b;text-transform:none;letter-spacing:0}.radio-row{display:flex;gap:14px}.radio-item{display:flex;align-items:center;gap:5px;font-size:13px;color:#e8e8e8;cursor:pointer}.radio-item input{accent-color:#c8a84b;cursor:pointer}.opt-select{background:#1a1a1a;border:1px solid #2a2a2a;color:#e8e8e8;font-size:13px;padding:5px 7px;border-radius:4px;outline:none;font-family:inherit;cursor:pointer}.opt-select:focus{border-color:#c8a84b55}.range-row{display:flex;align-items:center}.opt-range{width:100%;accent-color:#c8a84b;cursor:pointer}.color-grid{display:flex;flex-direction:column;gap:7px}.color-row{display:flex;align-items:center;justify-content:space-between}.color-label{font-size:12px;color:#777}.color-wrap{display:flex;align-items:center;gap:5px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:4px;padding:2px 6px}.color-swatch{width:20px;height:20px;border:none;padding:0;border-radius:2px;cursor:pointer;background:none}.color-hex{background:none;border:none;color:#d0d0d0;font-size:12px;font-family:Courier New,monospace;width:68px;outline:none}.opt-num{background:#1a1a1a;border:1px solid #2a2a2a;color:#e8e8e8;font-size:12px;padding:4px 6px;border-radius:4px;outline:none;width:100%;text-align:center;font-family:inherit}.opt-num:focus{border-color:#c8a84b44}.margin-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.margin-item{display:flex;flex-direction:column;gap:3px}.margin-side{font-size:11px;color:#555}.toggle-label{display:flex;align-items:flex-start;gap:8px;cursor:pointer}.toggle-check{accent-color:#c8a84b;cursor:pointer;flex-shrink:0;margin-top:2px;width:14px;height:14px}.toggle-title{font-size:13px;color:#e8e8e8;display:block;font-weight:500}.toggle-desc{font-size:11px;color:#4a4a4a;display:block;margin-top:2px;line-height:1.4}