*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#1a1a1a;color:#ddd;height:100vh;overflow:hidden}.app{display:flex;height:100vh;position:relative}.canvas-area{flex:1;display:flex;align-items:center;justify-content:center;background:#1a1a1a;position:relative;overflow:hidden}.canvas-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:auto}.canvas-wrap canvas{cursor:grab;background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;flex-shrink:0}.canvas-wrap canvas:active{cursor:grabbing}.resize-handle{width:4px;background:#333;cursor:col-resize;flex-shrink:0;transition:background .15s}.resize-handle.active,.resize-handle:hover{background:#2563eb}aside{width:300px;background:#222;padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;flex-shrink:0;position:relative;transition:width .1s}aside.hidden{display:none}.sidebar-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);width:24px;height:60px;background:#333;color:#999;border-radius:6px 0 0 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;z-index:100}.sidebar-tab:hover{background:#444;color:#ddd}.panel-section{background:#2a2a2a;border-radius:8px;padding:10px}.panel-section.collapsed{padding:6px 10px}.panel-section.collapsed>:not(.section-title){display:none}.panel-section.collapsed .collapse-btn::before{content:'+'}.section-title{font-size:11px;color:#888;font-weight:600;margin-bottom:6px;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;gap:6px}.panel-section.collapsed .section-title{margin-bottom:0}.collapse-btn{margin-right:4px;cursor:pointer;font-size:14px;color:#666;line-height:1;user-select:none;order:-1}.collapse-btn::before{content:'−'}.collapse-btn:hover{color:#ddd}.desel-dot{width:10px;height:10px;border-radius:50%;background:#555;cursor:pointer;flex-shrink:0;transition:background .15s}.desel-dot:hover{background:#888}.btn-row{display:flex;gap:6px}.label-row{font-size:10px;color:#666;font-weight:600;margin-bottom:4px;letter-spacing:1px;text-transform:uppercase}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;display:flex;align-items:center;justify-content:center}.modal{background:#2a2a2a;border-radius:12px;max-width:420px;width:90%;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.modal-header h3{margin:0;font-size:16px;color:#ddd}.modal-close{width:28px;height:28px;border:none;background:#444;color:#999;border-radius:6px;cursor:pointer;font-size:16px;line-height:1}.modal-close:hover{background:#555;color:#fff}.align-btn,.anchor-btn,.btn,.confirm-btn,.lock-btn,.toggle-btn{white-space:nowrap}.btn{flex:1;padding:5px 7px;border:1px solid #555;border-radius:5px;background:#3a3a3a;color:#ddd;cursor:pointer;font-size:13px;transition:.15s;text-align:center;height:30px;display:flex;align-items:center;justify-content:center}.btn:hover{background:#4a4a4a}.btn.primary{border-color:#2563eb;background:0 0;color:#2563eb}.btn.primary:hover{background:#2563eb;color:#fff}.confirm-btn{flex:1;padding:5px 7px;border:1px solid #16a34a;border-radius:5px;background:0 0;color:#16a34a;font-size:13px;cursor:pointer;transition:.15s;height:30px;display:flex;align-items:center;justify-content:center}.confirm-btn:hover{background:#16a34a;color:#fff}.layer-list{display:flex;flex-direction:column;gap:2px}.layer-item{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:6px;cursor:pointer;font-size:13px;transition:background .1s;user-select:none}.layer-item:hover{background:#333}.layer-item.active{background:#1e3a5f}.layer-item.drag-before{box-shadow:inset 0 2px 0 #2563eb}.layer-item.drag-after{box-shadow:inset 0 -2px 0 #2563eb}.layer-item .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.layer-item .dot.text{background:#60a5fa}.layer-item .dot.image{background:#34d399}.layer-item .dot.shape{background:#f59e0b}.layer-item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-item .act{color:#888;cursor:pointer;font-size:11px;padding:1px 3px}.layer-item .act:hover{color:#fff}.layer-item .lock-act{border:1px dashed #555;border-radius:3px;color:#888}.layer-item .lock-act.on{color:#86efac;border-color:#16a34a}.layer-item .del{color:#888;cursor:pointer;font-size:15px;line-height:1;padding:0 2px}.layer-item .del:hover{color:#f87171}.field{margin-bottom:7px}.field label{display:block;font-size:11px;color:#999;margin-bottom:2px}.field input,.field select{width:100%;padding:5px 7px;border-radius:5px;border:1px solid #444;background:#1a1a1a;color:#ddd;font-size:13px;font-family:inherit;outline:0;height:30px}.field textarea{width:100%;padding:5px 7px;border-radius:5px;border:1px solid #444;background:#1a1a1a;color:#ddd;font-size:13px;font-family:inherit;outline:0;resize:vertical;min-height:44px}.field input:focus,.field select:focus{border-color:#2563eb}.field-row{display:flex;gap:6px}.field-row .field{flex:1}.field input[type=color]{padding:2px 4px;height:30px;cursor:pointer}.lock-btn{flex:1;padding:5px 7px;border:1px dashed #444;border-radius:5px;background:#1a1a1a;color:#666;font-size:13px;cursor:pointer;transition:.15s;height:30px;display:flex;align-items:center;justify-content:center}.anchor-btn{width:30px;padding:0;border:1px dashed #444;border-radius:5px;background:#1a1a1a;color:#666;font-size:13px;cursor:pointer;flex-shrink:0;transition:.15s;height:30px;display:flex;align-items:center;justify-content:center}.anchor-btn.on{border-style:solid;border-color:#16a34a;color:#86efac;background:#14532d}.anchor-btn:hover{border-color:#555}.lock-btn.on{border-style:solid;border-color:#16a34a;background:#14532d;color:#86efac}.lock-btn:hover{border-color:#555}.align-btn{flex:1;padding:5px 7px;border:1px solid #555;border-radius:5px;background:#3a3a3a;color:#ddd;font-size:13px;cursor:pointer;transition:.15s;height:30px;display:flex;align-items:center;justify-content:center}.align-btn:hover{background:#4a4a4a}.toggle-btn{width:100%;padding:5px 7px;border-radius:5px;border:1px dashed #444;background:#1a1a1a;color:#666;font-size:13px;cursor:pointer;transition:.15s;text-align:center;font-family:inherit;height:30px;display:flex;align-items:center;justify-content:center}.btn-row .toggle-btn{flex:1;width:auto}.toggle-btn.on{border-style:solid;border-color:#16a34a;background:#14532d;color:#86efac}.toggle-btn:hover{border-color:#555}.toggle-btn.on:hover{border-color:#22c55e}