*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#020617;color:#e5e7eb}.app{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:100vh;align-items:start}.controls{padding:24px;background:#020617;border-right:1px solid #1f2937;display:flex;flex-direction:column;gap:16px}.controls h1{font-size:1.5rem;margin:0}.subtitle{margin:0;font-size:.9rem;color:#9ca3af}.field{display:flex;flex-direction:column;gap:4px;font-size:.9rem}.field span{color:#d1d5db}.range-row{display:flex;align-items:center;gap:8px}.range-row input[type=range]{flex:1}input[type=file],input[type=text],select,input[type=range],input[type=color]{padding:6px 8px;border-radius:6px;border:1px solid #374151;background:#020617;color:#e5e7eb}input[type=range]{padding:0}input[type=color]{height:36px;cursor:pointer}.range-value{display:inline-block;min-width:50px;text-align:center;font-size:.85rem;color:#93c5fd}.inline-checkboxes{display:flex;gap:16px;margin-top:4px}.checkbox-inline{display:flex;align-items:center;gap:6px;cursor:pointer}.checkbox-inline input[type=checkbox]{cursor:pointer;width:16px;height:16px}.checkbox-inline span{font-size:.9rem;color:#d1d5db}.mode-toggle-field{gap:8px}.mode-toggle{display:flex;border-radius:8px;overflow:hidden;border:1px solid #374151}.mode-btn{flex:1;padding:7px 10px;border:none;border-radius:0;background:#111827;color:#9ca3af;font-size:.85rem;cursor:pointer;transition:background .15s ease,color .15s ease}.mode-btn+.mode-btn{border-left:1px solid #374151}.mode-btn.active{background:#1d4ed8;color:#fff}.mode-btn:hover:not(.active){background:#1f2937;color:#e5e7eb}.single-zone{border:1px solid #1e3a5f;border-radius:8px;padding:12px;background:#0a1628;display:flex;flex-direction:column;gap:10px;display:none}.single-zone.visible{display:flex}.zone-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#60a5fa}.buttons{display:flex;gap:8px;margin-top:4px}.status{min-height:1.1rem;margin:0;font-size:.85rem;color:#93c5fd}button{flex:1;padding:8px 10px;border-radius:999px;border:1px solid #4b5563;background:#1f2937;color:#e5e7eb;font-size:.9rem;cursor:pointer;transition:background .15s ease,transform .05s ease,box-shadow .15s ease}button:hover:not(:disabled){background:#374151;box-shadow:0 6px 18px #0f172a99}button:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 8px #0f172a99}button:disabled{opacity:.4;cursor:default}.hint{font-size:.8rem;color:#6b7280;margin-top:auto}.preview{display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at top,#111827 0,#020617 55%,#000);position:sticky;top:0;height:100vh}canvas{max-width:100%;max-height:80vh;background:#000;border-radius:12px;box-shadow:0 16px 40px #000000b3}.settings-section{display:flex;flex-direction:column;gap:12px;padding-bottom:16px;border-bottom:1px solid #1f2937}.settings-section h2{font-size:1rem;margin:0;color:#60a5fa}.image-list-section{display:flex;flex-direction:column;gap:8px}.image-list-header{display:flex;justify-content:space-between;align-items:center}.image-list-header h2{font-size:1rem;margin:0}.image-list{display:flex;flex-wrap:wrap;gap:8px;max-height:200px;overflow-y:auto}.image-thumb{position:relative;width:60px;height:60px;border-radius:8px;overflow:visible;cursor:pointer;transition:transform .15s}.image-thumb:before{content:"";position:absolute;inset:0;border-radius:8px;border:2px solid transparent;transition:border-color .15s;pointer-events:none}.image-thumb.selected:before{border-color:#3b82f6}.image-thumb:hover{transform:scale(1.05)}.image-thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}.image-thumb img{width:100%;height:100%;object-fit:cover}.image-thumb .thumb-remove{position:absolute;top:-4px;right:-4px;width:20px;height:20px;background:#dc2626e6;border:2px solid #020617;border-radius:50%;color:#fff;font-size:14px;font-weight:700;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,transform .1s;display:flex;align-items:center;justify-content:center;padding:0}.image-thumb:hover .thumb-remove{opacity:1}.image-thumb .thumb-remove:hover{background:#b91c1cf2;transform:scale(1.1)}.image-thumb.selected .thumb-remove{border-color:#3b82f6}.per-image-panel{background:#0a1628;border:1px solid #1e3a5f;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px}.per-image-panel .panel-header{display:flex;align-items:center;gap:8px}.per-image-panel .panel-header h2{flex:1;font-size:.9rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-small{padding:4px 10px;font-size:.8rem;border-radius:6px;flex:none}.btn-danger{background:#7f1d1d;border-color:#991b1b}.btn-danger:hover:not(:disabled){background:#991b1b}@media(max-width:768px){.app{grid-template-columns:1fr}.preview{padding-top:0}}