*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:#0f0f1a;color:#e0e0e0;height:100vh;overflow:hidden}
.app{display:flex;height:100vh}
.sidebar{width:350px;min-width:350px;background:#1a1a2e;display:flex;flex-direction:column;border-right:1px solid #2a2a4a}
.sidebar-header{padding:20px 24px;border-bottom:1px solid #2a2a4a}
.sidebar-header h1{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.3px}
.sidebar-header p{font-size:12px;color:#888;margin-top:4px}
.sidebar-content{flex:1;overflow-y:auto;padding:16px}
.sidebar-content::-webkit-scrollbar{width:6px}
.sidebar-content::-webkit-scrollbar-track{background:transparent}
.sidebar-content::-webkit-scrollbar-thumb{background:#3a3a5a;border-radius:3px}
.sidebar-footer{padding:16px;border-top:1px solid #2a2a4a}
.section{margin-bottom:16px}
.section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:10px}
.btn-group{display:flex;gap:6px;margin-bottom:12px}
.btn-group button{flex:1;padding:8px 12px;border:1px solid #3a3a5a;background:#252542;color:#ccc;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
.btn-group button:hover{background:#2e2e52;border-color:#5a5a8a}
.btn-group button.active{background:#4361ee;border-color:#4361ee;color:#fff}
.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.template-btn{padding:6px;border:1px solid #3a3a5a;background:#252542;color:#ccc;border-radius:8px;font-size:11px;font-weight:500;cursor:pointer;text-align:center;transition:all .15s}
.template-btn:hover{border-color:#4361ee;background:#2e2e52}
.template-preview{height:20px;border-radius:4px;margin-bottom:4px}
.bg-upload-area{border:2px dashed #3a3a5a;border-radius:10px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:12px;position:relative;overflow:hidden}
.bg-upload-area:hover{border-color:#4361ee;background:rgba(67,97,238,.05)}
.bg-upload-area.has-image{padding:8px;border-style:solid}
.bg-upload-area .upload-icon{font-size:28px;margin-bottom:6px;opacity:.5}
.bg-upload-area .upload-text{font-size:13px;color:#888}
.bg-upload-area input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.bg-preview-thumb{width:100%;height:80px;object-fit:cover;border-radius:6px;display:none}
.bg-upload-area.has-image .bg-preview-thumb{display:block}
.bg-upload-area.has-image .upload-icon,.bg-upload-area.has-image .upload-text{display:none}
.btn-remove{padding:6px 12px;background:#3a1a1a;border:1px solid #5a2a2a;color:#e88;border-radius:6px;font-size:12px;cursor:pointer;transition:all .15s;width:100%;display:none}
.btn-remove:hover{background:#4a1a1a}
.btn-remove.visible{display:block}
.slider-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.slider-row label{font-size:12px;color:#999;min-width:70px}
.slider-row input[type="range"]{flex:1;-webkit-appearance:none;height:4px;background:#3a3a5a;border-radius:2px;outline:none}
.slider-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#4361ee;border-radius:50%;cursor:pointer}
.slider-row .slider-value{font-size:12px;color:#aaa;min-width:30px;text-align:right}
.element-card{background:#252542;border:1px solid #2a2a4a;border-radius:10px;margin-bottom:10px;overflow:hidden;transition:border-color .15s}
.element-card:hover{border-color:#3a3a6a}
.element-card.disabled{opacity:.5}
.element-card-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;user-select:none;gap:8px}
.element-card-title{display:flex;align-items:center;gap:6px;flex:1;min-width:0;overflow:hidden}
.element-card-label{font-size:13px;font-weight:600;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chevron{display:inline-block;font-size:10px;color:#888;transition:transform .15s;flex-shrink:0;width:10px}
.element-card:not(.collapsed) .chevron{transform:rotate(90deg)}
.element-card-kind{font-size:9px;color:#aaa;background:#1a1a2e;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.element-card-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.element-card.collapsed .element-card-body{display:none}
.element-card-body .label-input{font-weight:600;font-size:12px;color:#ccc;background:#151528}
.toggle{position:relative;width:38px;height:20px;cursor:pointer}
.toggle input{display:none}
.toggle-slider{position:absolute;inset:0;background:#3a3a5a;border-radius:20px;transition:background .2s}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:2px;bottom:2px;background:#ccc;border-radius:50%;transition:all .2s}
.toggle input:checked+.toggle-slider{background:#4361ee}
.toggle input:checked+.toggle-slider::before{transform:translateX(18px);background:#fff}
.element-card-body{padding:0 14px 14px}
.element-card-body .text-input{width:100%;padding:8px 10px;background:#1a1a2e;border:1px solid #3a3a5a;border-radius:6px;color:#e0e0e0;font-size:13px;font-family:inherit;resize:vertical;margin-bottom:8px}
.element-card-body .text-input:focus{outline:none;border-color:#4361ee}
.control-row{display:flex;gap:8px;margin-bottom:6px}
.control-group{display:flex;flex-direction:column;gap:4px}
.control-group.full{flex:1}
.control-group label{font-size:11px;color:#888}
.control-group input[type="number"]{width:70px;padding:6px 8px;background:#1a1a2e;border:1px solid #3a3a5a;border-radius:6px;color:#e0e0e0;font-size:13px}
.control-group input[type="number"]:focus{outline:none;border-color:#4361ee}
.control-group input[type="color"]{width:36px;height:30px;border:1px solid #3a3a5a;border-radius:6px;background:#1a1a2e;cursor:pointer;padding:2px}
.control-group select{padding:6px 8px;background:#1a1a2e;border:1px solid #3a3a5a;border-radius:6px;color:#e0e0e0;font-size:13px;cursor:pointer}
.control-group select:focus{outline:none;border-color:#4361ee}
.compound-control{display:flex;gap:4px;align-items:center}
.compound-control input[type="number"]{width:52px}
.mini-btn-group,.style-btn-group{display:flex;gap:2px}
.mini-btn-group button,.style-btn-group button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid #3a3a5a;background:#1a1a2e;color:#888;border-radius:6px;cursor:pointer;transition:all .15s;padding:0;font-size:13px}
.mini-btn-group button:hover,.style-btn-group button:hover{background:#2e2e52;color:#ddd}
.mini-btn-group button.active,.style-btn-group button.active{background:#4361ee;border-color:#4361ee;color:#fff}
.style-btn-group .btn-bold{font-weight:700}
.style-btn-group .btn-italic{font-style:italic;font-family:Georgia,serif}
.img-thumb{width:40px;height:40px;object-fit:cover;border-radius:4px;margin-right:8px}
.btn-img-remove{background:none;border:none;color:#e88;font-size:16px;cursor:pointer;padding:4px 8px;border-radius:4px}
.btn-img-remove:hover{background:rgba(255,100,100,.15)}
.img-upload-area{border:2px dashed #3a3a5a;border-radius:10px;padding:14px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:10px;position:relative;overflow:hidden;font-size:13px;color:#888}
.img-upload-area:hover{border-color:#4361ee;background:rgba(67,97,238,.05)}
.img-upload-area input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}
.btn-download{width:100%;padding:14px;background:#4361ee;border:none;border-radius:10px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;letter-spacing:.3px}
.btn-download:hover{background:#3651de;transform:translateY(-1px);box-shadow:0 4px 15px rgba(67,97,238,.4)}
.btn-download:active{transform:translateY(0)}
.btn-download.loading{opacity:.7;pointer-events:none}
.footer-row{display:flex;gap:6px;margin-top:8px}
.btn-secondary{flex:1;padding:10px;background:#252542;border:1px solid #3a3a5a;border-radius:8px;color:#ccc;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
.btn-secondary:hover{background:#2e2e52;border-color:#5a5a8a}
.preview-area{flex:1;display:flex;align-items:center;justify-content:center;background:#0f0f1a;padding:30px;position:relative}
.preview-hint{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:12px;color:#555;pointer-events:none}
.flyer-scaler{box-shadow:0 8px 40px rgba(0,0,0,.5);border-radius:2px;overflow:hidden}
.flyer{position:relative;overflow:hidden;transform-origin:top left}
.flyer-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.flyer-bg.visible{display:block}
.flyer-overlay{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.flyer-element{position:absolute;cursor:move;padding:6px 10px;border:2px solid transparent;border-radius:4px;transition:border-color .15s,box-shadow .15s;word-wrap:break-word;overflow-wrap:break-word;user-select:none;white-space:pre-wrap}
.flyer-element:hover{border-color:rgba(255,255,255,.35)}
.flyer-element.dragging{border-color:rgba(255,255,255,.6);border-style:dashed;opacity:.9;z-index:999!important}
.flyer-element.hidden{display:none}
.flyer-element-inner{display:block;width:100%;pointer-events:none}
.flyer.exporting .flyer-element{border-color:transparent!important;cursor:default;box-shadow:none!important}
.flyer-element ul{list-style:none;padding:0;margin:0;text-align:inherit}
.flyer-element ul li{padding:3px 0}
.flyer-element ul li::before{content:'\2022';margin-right:10px;font-weight:bold}
.flyer-image{position:absolute;cursor:move;user-select:none;border:2px solid transparent;border-radius:2px;transition:border-color .15s}
.flyer-image:hover{border-color:rgba(255,255,255,.35)}
.flyer-image.dragging{border-color:rgba(255,255,255,.6);border-style:dashed;z-index:999!important}
.flyer.exporting .flyer-image{border-color:transparent!important;cursor:default}
.flyer-shape{position:absolute;cursor:move;user-select:none;border:2px solid transparent;transition:border-color .15s}
.flyer-shape:hover{border-color:rgba(255,255,255,.35)}
.flyer-shape.dragging{border-color:rgba(255,255,255,.6);border-style:dashed;z-index:999!important}
.flyer.exporting .flyer-shape{border-color:transparent!important;cursor:default}
.flyer-grid{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:9997;background-image:linear-gradient(to right,rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.12) 1px,transparent 1px);background-size:40px 40px;transition:opacity .15s}
.flyer-grid.visible{opacity:1}
.flyer.exporting .flyer-grid{display:none}
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:4px;margin-bottom:8px}
.toggle-row-label{font-size:12px;color:#ccc;font-weight:500}
.snap-guide-v{position:absolute;top:0;bottom:0;left:50%;width:1px;background:#00e5ff;opacity:0;pointer-events:none;z-index:9998;transition:opacity .1s}
.snap-guide-h{position:absolute;left:0;right:0;top:50%;height:1px;background:#00e5ff;opacity:0;pointer-events:none;z-index:9998;transition:opacity .1s}
.flyer.exporting .snap-guide-v,.flyer.exporting .snap-guide-h{display:none}
.resize-handle{position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;background:#4361ee;border:2px solid #fff;border-radius:2px;cursor:nwse-resize;z-index:9999;opacity:0;transition:opacity .15s}
.flyer-image:hover .resize-handle,.flyer-shape:hover .resize-handle,.flyer-image.resizing .resize-handle,.flyer-shape.resizing .resize-handle{opacity:1}
.flyer.exporting .resize-handle{display:none}
.flyer-image .resize-img{width:100%;height:auto;display:block;pointer-events:none}
.flyer-element .resize-handle{right:-4px;bottom:-4px}
.flyer-element:hover .resize-handle,.flyer-element.resizing .resize-handle,.flyer-element.selected .resize-handle{opacity:1}
.flyer.exporting .flyer-element .resize-handle{display:none}
.flyer-element.selected,.flyer-image.selected,.flyer-shape.selected{border-color:#4361ee!important;box-shadow:0 0 0 2px rgba(67,97,238,.4)}
.flyer-element.hovered,.flyer-image.hovered,.flyer-shape.hovered{border-color:rgba(67,97,238,.7)}
.flyer.exporting .selected,.flyer.exporting .hovered{border-color:transparent!important;box-shadow:none!important}
.element-card.selected{border-color:#4361ee!important;box-shadow:0 0 0 1px rgba(67,97,238,.3)}
.element-card-header[draggable="true"]{cursor:grab}
.element-card-header[draggable="true"]:active{cursor:grabbing}
.element-card.dragging-card{opacity:.4}
.element-card.drop-before{box-shadow:0 -2px 0 0 #4361ee!important}
.element-card.drop-after{box-shadow:0 2px 0 0 #4361ee!important}
.align-toolbar{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:none;background:#1a1a2e;border:1px solid #3a3a5a;border-radius:10px;padding:6px;gap:4px;z-index:1000;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.align-toolbar.visible{display:flex;align-items:center}
.align-toolbar button{width:34px;height:34px;border:1px solid #3a3a5a;background:#252542;color:#ccc;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all .15s}
.align-toolbar button:hover{background:#2e2e52;border-color:#4361ee;color:#fff}
.align-toolbar button svg{display:block}
.align-sep{width:1px;align-self:stretch;background:#3a3a5a;margin:0 4px}
.align-toolbar-label{font-size:11px;color:#888;padding:0 6px;text-transform:uppercase;letter-spacing:.5px}
.btn-img-dup{background:none;border:none;color:#8af;font-size:14px;cursor:pointer;padding:4px 8px;border-radius:4px}
.btn-img-dup:hover{background:rgba(100,150,255,.15)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(2px)}
.modal-overlay.visible{display:flex}
.modal{background:#1a1a2e;border:1px solid #3a3a5a;border-radius:12px;padding:24px;min-width:320px;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:modalIn .15s ease-out}
@keyframes modalIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.modal-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:8px}
.modal-message{font-size:13px;color:#aaa;line-height:1.5;margin-bottom:20px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end}
.btn-modal{padding:9px 18px;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid #3a3a5a;transition:all .15s}
.btn-modal-cancel{background:#252542;color:#ccc}
.btn-modal-cancel:hover{background:#2e2e52;border-color:#5a5a8a}
.btn-modal-danger{background:#c53030;border-color:#c53030;color:#fff}
.btn-modal-danger:hover{background:#e53e3e;border-color:#e53e3e}
.sidebar-tabs{display:flex;gap:0;padding:0 16px;border-bottom:1px solid #2a2a4a;background:#1a1a2e}
.sidebar-tabs button{flex:1;padding:12px 10px;background:transparent;border:none;color:#888;font-size:12px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.6px;border-bottom:2px solid transparent;transition:all .15s}
.sidebar-tabs button:hover{color:#ccc}
.sidebar-tabs button.active{color:#fff;border-bottom-color:#4361ee}
.sidebar-tabs button .tab-badge{display:inline-block;min-width:16px;padding:1px 5px;margin-left:6px;background:#4361ee;color:#fff;border-radius:8px;font-size:10px;font-weight:700;letter-spacing:0}
.tab-panel{display:none}
.tab-panel.active{display:block}
.add-subtitle{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:.6px;margin:10px 0 6px}
.element-empty-state{display:none;text-align:center;padding:40px 20px;color:#888}
.element-empty-state.visible{display:block}
.element-empty-state .empty-icon{font-size:40px;opacity:.4;margin-bottom:12px}
.element-empty-state .empty-title{font-size:14px;font-weight:600;color:#bbb;margin-bottom:6px}
.element-empty-state .empty-desc{font-size:12px;color:#777;line-height:1.5}
.element-empty-state strong{color:#aaa}