.step-indicator{background:var(--surface);border-bottom:1px solid var(--border);padding:16px 24px}.step-track{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:0}.step-node{display:flex;align-items:center;gap:10px;flex-shrink:0}.step-bubble{width:32px;height:32px;border-radius:50%;background:var(--paper-dark);color:var(--muted);font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-family:Space Grotesk,sans-serif}.step-node.active .step-bubble{background:var(--gold);color:#fff;box-shadow:0 0 0 4px #b8960c33}.step-node.done .step-bubble{background:var(--success);color:#fff}.step-info{display:flex;flex-direction:column}.step-label{font-size:.85rem;font-weight:600;color:var(--ink);line-height:1;font-family:Space Grotesk,sans-serif}.step-node:not(.active):not(.done) .step-label{color:var(--muted)}.step-sub{font-size:.72rem;color:var(--muted);margin-top:2px}.step-line{flex:1;height:2px;background:var(--border);margin:0 12px;border-radius:1px;transition:background .3s}.step-line.done{background:var(--success)}@media(max-width:600px){.step-sub{display:none}.step-node{gap:6px}}.step1{width:100%}.step1-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.step1-left{display:flex;flex-direction:column;gap:16px}.step1-right{max-height:600px;overflow:hidden;display:flex;flex-direction:column}.error-box{background:#fdedec;border:1px solid #F5B7B1;color:var(--accent);padding:12px 16px;border-radius:8px;font-size:.85rem}.format-hint{padding:20px}.format-hint h4{font-size:.85rem;margin-bottom:12px;color:var(--muted)}.sample-table{width:100%;border-collapse:collapse;font-size:.8rem;margin-bottom:10px}.sample-table th,.sample-table td{border:1px solid var(--border);padding:6px 10px;text-align:left}.sample-table th{background:var(--paper-dark);font-weight:600}.hint-note{font-size:.75rem;color:var(--muted);line-height:1.4}.preview-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}.preview-header h4{font-size:.9rem}.data-preview{overflow-y:auto;max-height:480px}.data-preview table{width:100%;border-collapse:collapse;font-size:.8rem}.data-preview th{position:sticky;top:0;background:var(--surface);z-index:1;border-bottom:2px solid var(--border);padding:8px 10px;text-align:left;font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.data-preview td{padding:6px 10px;border-bottom:1px solid var(--border)}.row-num{color:var(--muted);font-variant-numeric:tabular-nums;width:40px}.row-url{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gold-dim)}.row-name{font-weight:500}.more-rows{text-align:center;color:var(--muted);font-style:italic;padding:10px}@media(max-width:800px){.step1-layout{grid-template-columns:1fr}}.step2{width:100%}.template-editor{display:flex;flex-direction:column;gap:0;position:relative}.canvas-wrap{border:2px solid var(--border);border-radius:12px;overflow:hidden;background:var(--paper-dark);margin-bottom:80px}.template-canvas{position:relative;width:100%;cursor:crosshair;min-height:300px;-webkit-user-select:none;user-select:none}.template-canvas.moving{cursor:grabbing}.template-canvas.resizing{cursor:inherit}.zone-box{position:absolute;border:2px dashed;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;animation:zonePop .2s ease;gap:4px}.zone-box.moving{opacity:.85;box-shadow:0 4px 20px #0003;z-index:10}.zone-box.resizing{z-index:10}@keyframes zonePop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.zone-qr{border-color:var(--accent);background:#c0392b14}.zone-name{border-color:var(--success);background:#27ae6014}.zone-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:#ffffffd9;padding:2px 8px;border-radius:4px;pointer-events:none}.zone-dim{font-size:.65rem;color:var(--muted);background:#ffffffd9;padding:2px 6px;border-radius:3px;font-family:Courier New,monospace;cursor:text;pointer-events:auto;border:1px solid transparent;transition:all .15s}.zone-dim:hover{border-color:var(--gold);background:#fdf8ec;color:var(--gold-dim)}.resize-handle{position:absolute;z-index:20;transition:all .15s}.resize-handle.nw,.resize-handle.ne,.resize-handle.se,.resize-handle.sw{width:14px;height:14px;background:transparent;border-color:var(--gold)}.resize-handle.nw{top:-2px;left:-2px;border-top:3px solid var(--gold);border-left:3px solid var(--gold);cursor:nwse-resize}.resize-handle.ne{top:-2px;right:-2px;border-top:3px solid var(--gold);border-right:3px solid var(--gold);cursor:nesw-resize}.resize-handle.se{bottom:-2px;right:-2px;border-bottom:3px solid var(--gold);border-right:3px solid var(--gold);cursor:nwse-resize}.resize-handle.sw{bottom:-2px;left:-2px;border-bottom:3px solid var(--gold);border-left:3px solid var(--gold);cursor:nesw-resize}.resize-handle.n,.resize-handle.s{width:20px;height:3px;background:var(--gold);left:50%;transform:translate(-50%);cursor:ns-resize;border-radius:2px}.resize-handle.n{top:-3px}.resize-handle.s{bottom:-3px}.resize-handle.e,.resize-handle.w{width:3px;height:20px;background:var(--gold);top:50%;transform:translateY(-50%);cursor:ew-resize;border-radius:2px}.resize-handle.e{right:-3px}.resize-handle.w{left:-3px}.resize-handle:hover{background:var(--gold-light);border-color:var(--gold-light)}.resize-handle.n:hover,.resize-handle.s:hover{height:5px}.resize-handle.e:hover,.resize-handle.w:hover{width:5px}.align-float{position:absolute;top:-32px;right:0;display:flex;gap:4px;opacity:1;pointer-events:auto}.align-float-btn{width:26px;height:26px;border-radius:6px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;line-height:1;transition:all .15s}.align-float-btn:hover{border-color:var(--gold);background:#fdf8ec;color:var(--gold-dim)}.drawing-dim-label{position:absolute;background:#1a1410d9;color:#fff;padding:4px 10px;border-radius:6px;font-size:.75rem;font-family:Courier New,monospace;pointer-events:none;white-space:nowrap;z-index:30;transform:translateY(-50%)}.canvas-hint{position:absolute;bottom:12px;left:50%;transform:translate(-50%);background:#1a1410cc;color:#fff;padding:6px 16px;border-radius:20px;font-size:.8rem;pointer-events:none;white-space:nowrap}.floating-toolbar{position:fixed;bottom:80px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:10px 20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);z-index:100}.toolbar-section{display:flex;align-items:center;gap:8px}.toolbar-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}.toolbar-zone-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;border:1.5px solid var(--border);background:var(--paper);color:var(--ink);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s}.toolbar-zone-btn.active{border-color:var(--gold);background:#fdf8ec;color:var(--gold-dim)}.toolbar-zone-btn .zone-dot{width:8px;height:8px;border-radius:2px}.toolbar-zone-btn .zone-check{margin-left:2px;color:var(--success);font-size:.7rem}.toolbar-divider{width:1px;height:24px;background:var(--border)}.toolbar-action-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;border:1.5px solid var(--border);background:var(--paper);color:var(--muted);font-size:.78rem;font-weight:500;cursor:pointer;transition:all .15s}.toolbar-action-btn:hover{background:var(--paper-dark);color:var(--ink)}.toolbar-action-btn.replace:hover{border-color:var(--accent);color:var(--accent)}.dim-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:200}.dim-modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;width:280px;box-shadow:var(--shadow-lg)}.dim-modal h4{font-size:1rem;margin-bottom:4px}.dim-modal-hint{font-size:.8rem;color:var(--muted);margin-bottom:16px}.dim-modal input{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;background:var(--paper);color:var(--ink);font-size:.9rem;font-family:Courier New,monospace;margin-bottom:16px}.dim-modal input:focus{outline:2px solid var(--gold);outline-offset:1px}.dim-modal-actions{display:flex;gap:10px;justify-content:flex-end}@media(max-width:600px){.floating-toolbar{bottom:70px;padding:8px 14px;gap:8px}.toolbar-label{display:none}.align-float{top:-28px}.align-float-btn{width:22px;height:22px;font-size:.65rem}}.step3{width:100%}.step3-layout{display:grid;grid-template-columns:380px 1fr;gap:24px;align-items:start}.style-panel{display:flex;flex-direction:column;gap:20px}.style-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px}.section-title{font-size:.9rem;font-weight:700;margin-bottom:16px;color:var(--ink);display:flex;align-items:center;gap:6px}.field-group{margin-bottom:16px}.field-group:last-child{margin-bottom:0}.color-hex{font-size:.8rem;font-family:Courier New,monospace;color:var(--muted);text-transform:uppercase}.bg-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bg-option{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:10px;border:1.5px solid var(--border);background:var(--paper);color:var(--ink);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .15s;position:relative}.bg-option:hover{border-color:var(--gold);background:#fdf8ec}.bg-option.active{border-color:var(--gold);background:#fdf8ec;color:var(--gold-dim);box-shadow:0 0 0 3px #b8960c26}.bg-icon{font-size:1.4rem;line-height:1}.bg-label{font-size:.7rem;font-weight:600}.bg-loading{position:absolute;top:4px;right:6px;font-size:1rem;animation:pulse 1s infinite}.bg-smart-color{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);position:absolute;top:6px;right:6px}.bg-smart-desc{margin-top:8px;font-size:.75rem;color:var(--muted);line-height:1.4}.bg-smart-desc code{background:var(--paper-dark);padding:1px 6px;border-radius:4px;font-family:Courier New,monospace;font-size:.7rem}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.radio-group{display:flex;flex-direction:column;gap:8px}.radio-label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink);cursor:pointer}.radio-label input{accent-color:var(--gold)}.align-buttons{display:flex;gap:6px}.align-btn{width:36px;height:36px;border-radius:8px;border:1.5px solid var(--border);background:var(--paper);color:var(--muted);font-size:.8rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.align-btn.active{border-color:var(--gold);background:#fdf8ec;color:var(--gold-dim)}.toggle-row{display:flex;gap:8px}.toggle-btn{width:40px;height:40px;border-radius:8px;border:1.5px solid var(--border);background:var(--paper);color:var(--muted);font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}.toggle-btn.active{border-color:var(--gold);background:#fdf8ec;color:var(--gold-dim)}.field-slider{width:100%;margin-top:6px;accent-color:var(--gold)}.preview-panel{position:sticky;top:20px;display:flex;flex-direction:column;gap:12px}.preview-title{font-size:.85rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.preview-img-wrap{border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--paper-dark)}.preview-img{width:100%;height:auto;display:block}.preview-placeholder{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;background:var(--paper-dark);border-radius:8px;color:var(--muted);font-size:.85rem}.preview-info{display:flex;justify-content:center}@media(max-width:900px){.step3-layout{grid-template-columns:1fr}.preview-panel{position:static}.bg-options{grid-template-columns:repeat(3,1fr)}}.step4{width:100%}.step4-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.error-banner{background:#fdedec;border:1px solid #F5B7B1;color:var(--accent);padding:12px 16px;border-radius:8px;font-size:.85rem;margin-bottom:16px}.summary-card,.generate-card{padding:28px}.summary-title{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:20px}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.summary-item{display:flex;flex-direction:column;gap:4px}.summary-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}.summary-val{font-size:.9rem;font-weight:600;color:var(--ink)}.color-dot{width:20px;height:20px;border-radius:4px;border:1px solid var(--border)}.generate-ready,.generate-progress,.generate-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:20px 0}.generate-icon{font-size:3rem;margin-bottom:4px}.generate-ready h3,.generate-progress h3,.generate-done h3{font-size:1.2rem}.generate-ready p,.generate-progress p,.generate-done p{color:var(--muted);font-size:.85rem;max-width:320px;line-height:1.5}.warning-text{color:var(--accent)!important;font-size:.8rem!important;background:#fdedec;padding:8px 12px;border-radius:6px}.generate-btn{margin-top:8px;padding:14px 36px;font-size:1rem}.progress-bar{width:100%;max-width:300px;height:8px;background:var(--paper-dark);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .2s ease}.progress-stats{display:flex;gap:12px;font-size:.8rem;color:var(--muted)}.progress-pct{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}.progress-pages{font-variant-numeric:tabular-nums}.eta-text{font-size:.8rem;color:var(--gold-dim);font-weight:500}.live-preview{position:relative;width:100%;max-width:280px;border-radius:8px;overflow:hidden;border:2px solid var(--border);background:var(--paper-dark);margin:8px 0}.live-preview img{width:100%;height:auto;display:block}.live-preview-label{position:absolute;bottom:6px;right:6px;background:#1a1410bf;color:#fff;font-size:.65rem;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.05em}.done-preview{border-color:var(--success)}.done-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:260px}@media(max-width:800px){.step4-layout{grid-template-columns:1fr}}.finishing-spinner{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 0}.finishing-spinner p{color:var(--muted);font-size:.85rem}.spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:var(--ink);color:var(--paper);padding:0}.header-inner{max-width:1100px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:20px}.logo{font-family:Space Grotesk,sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--gold-light);display:flex;align-items:center;gap:8px}.logo-mark{font-size:1.2rem}.logo em{font-style:italic;font-weight:400;color:var(--paper)}.header-sub{font-size:.8rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}.app-main{flex:1;max-width:1100px;width:100%;margin:0 auto;padding:32px 24px 24px}.app-nav{position:sticky;bottom:0;background:#f7f3edf2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:100%}.nav-hint{flex:1;text-align:center;font-size:.8rem;color:var(--muted)}.btn-primary{background:var(--gold);color:#fff;font-weight:600;font-size:.9rem;padding:10px 24px;border-radius:var(--radius);letter-spacing:.01em;box-shadow:0 2px 8px #b8960c59}.btn-primary:hover:not(.disabled){background:var(--gold-light);transform:translateY(-1px)}.btn-primary.disabled{background:var(--border);color:var(--muted);cursor:not-allowed;box-shadow:none}.btn-secondary{background:transparent;border:1.5px solid var(--border);color:var(--ink);font-weight:500;font-size:.9rem;padding:10px 20px;border-radius:var(--radius)}.btn-secondary:hover{background:var(--paper-dark)}.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px;box-shadow:var(--shadow)}.step-title{font-size:1.4rem;font-weight:700;margin-bottom:6px;color:var(--ink)}.step-desc{font-size:.875rem;color:var(--muted);margin-bottom:28px}.field-label{display:block;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}.field-input{width:100%;padding:9px 13px;border:1.5px solid var(--border);border-radius:8px;background:var(--paper);color:var(--ink);font-size:.9rem}.field-input:focus{border-color:var(--gold)}.field-select{width:100%;padding:9px 32px 9px 13px;border:1.5px solid var(--border);border-radius:8px;background:var(--paper);color:var(--ink);font-size:.9rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A7F6E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.color-row{display:flex;align-items:center;gap:10px}.color-swatch{width:38px;height:38px;border-radius:8px;border:1.5px solid var(--border);padding:2px;cursor:pointer;background:none}.color-swatch input[type=color]{width:100%;height:100%;border:none;background:none;cursor:pointer;padding:0}.upload-zone{border:2px dashed var(--border);border-radius:12px;padding:40px 24px;text-align:center;cursor:pointer;transition:all .2s;background:var(--paper)}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--gold);background:#fdf8ec}.upload-zone-icon{font-size:2.5rem;margin-bottom:12px}.upload-zone h3{font-size:1rem;margin-bottom:4px}.upload-zone p{font-size:.8rem;color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:600}.badge-gold{background:#fdf3c8;color:var(--gold-dim)}.badge-green{background:#d4edda;color:#155724}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--gold: #B8960C;--gold-light: #E8C84A;--gold-dim: #7A6308;--ink: #1A1410;--paper: #F7F3ED;--paper-dark: #EDE7DC;--surface: #FFFFFF;--border: #D9CEBC;--muted: #8A7F6E;--accent: #C0392B;--success: #27AE60;--radius: 10px;--shadow: 0 2px 12px rgba(0,0,0,.08);--shadow-lg: 0 8px 40px rgba(0,0,0,.14)}html{font-size:16px}body{font-family:Inter,sans-serif;background:var(--paper);color:var(--ink);min-height:100vh;line-height:1.5}h1,h2,h3,h4{font-family:Space Grotesk,sans-serif;font-weight:600;line-height:1.2}button{cursor:pointer;font-family:Inter,sans-serif;border:none;outline:none;transition:all .15s ease}input,select,textarea{font-family:Inter,sans-serif;font-size:.875rem}input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--paper-dark)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}