*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:#0e0e0e;color:#d0d0d0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased}#app{display:grid;grid-template-columns:1fr 300px;height:100vh}#canvas-wrap{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#181818;background-image:repeating-conic-gradient(#1f1f1f,#1f1f1f 25%,#181818 0%,#181818 50%);background-size:24px 24px}#canvas-wrap .drop-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;opacity:1;transition:opacity .4s;-webkit-user-select:none;user-select:none}#canvas-wrap .drop-hint.hidden{opacity:0}#canvas-wrap .drop-hint svg{opacity:.2;display:block;margin:0 auto 10px}#canvas-wrap .drop-hint p{color:#555;font-size:13px;line-height:1.5}#preview{display:block;cursor:default;border-radius:4px;box-shadow:0 8px 48px #0009}#panel{background:#141414;border-left:1px solid #252525;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:0;scrollbar-width:thin;scrollbar-color:#333 transparent}#panel::-webkit-scrollbar{width:5px}#panel::-webkit-scrollbar-thumb{background:#333;border-radius:3px}#panel-header{padding:16px 16px 14px;border-bottom:1px solid #222;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#141414;z-index:10}#panel-header h1{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#888}#export-btn{background:#5b5bff;color:#fff;border:none;border-radius:5px;padding:6px 12px;font-size:12px;font-weight:500;cursor:pointer;transition:background .15s,transform .1s}#export-btn:hover{background:#6f6fff}#export-btn:active{transform:scale(.97)}#export-btn.copied{background:#3baa5c}.panel-section{border-bottom:1px solid #1e1e1e}.section-label{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:11px 16px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#555;transition:color .15s}.section-label::-webkit-details-marker{display:none}.section-label::marker{content:""}.section-label:hover{color:#777}.section-chevron{flex-shrink:0;transition:transform .2s ease;opacity:.5}details[open]>summary .section-chevron{transform:rotate(180deg)}.section-body{padding:2px 16px 14px}.image-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.image-row:last-child{margin-bottom:0}.image-row.drag-over{background:#1a1a3a;border-radius:5px;outline:1px dashed #5b5bff;outline-offset:2px}.status-dot{width:7px;height:7px;border-radius:50%;background:#333;flex-shrink:0;transition:background .2s,box-shadow .2s}.status-dot.loaded{background:#3baa5c;box-shadow:0 0 5px #3baa5c80}.image-label{flex:1;font-size:12px;color:#999;-webkit-user-select:none;user-select:none}.upload-btn{background:#1e1e1e;border:1px solid #2e2e2e;color:#aaa;border-radius:4px;padding:4px 10px;font-size:11px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;white-space:nowrap}.upload-btn:hover{border-color:#5b5bff;color:#ccc;background:#1a1a2e}.upload-btn.has-image{border-color:#3baa5c44;color:#3baa5c}.remove-btn{background:none;border:none;color:#444;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:3px;transition:color .15s,background .15s;flex-shrink:0}.remove-btn:hover{color:#e05555;background:#2a1a1a}.remove-btn.hidden{visibility:hidden;pointer-events:none}.url-toggle-btn{background:none;border:1px solid #444;border-radius:4px;color:#888;cursor:pointer;padding:3px 5px;margin-left:4px;display:inline-flex;align-items:center}.url-toggle-btn:hover{color:#fff;border-color:#666}.url-input.hidden,.file-input{display:none}.ar-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.ar-btn{background:#1e1e1e;border:1px solid #2e2e2e;color:#888;border-radius:5px;padding:7px 4px;font-size:11px;font-weight:500;cursor:pointer;text-align:center;transition:border-color .15s,color .15s,background .15s}.ar-btn:hover{border-color:#5b5bff55;color:#ccc}.ar-btn.active{background:#5b5bff22;border-color:#5b5bff;color:#aaf}.slider-row{display:grid;grid-template-columns:108px 1fr 44px;align-items:center;gap:8px;margin-bottom:10px}.slider-row:last-child{margin-bottom:0}.slider-row label{font-size:12px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slider-row input[type=range]{width:100%;height:3px;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;outline:none}.slider-row input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#5b5bff var(--pct, 50%),#2a2a2a var(--pct, 50%))}.slider-row input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:#2a2a2a}.slider-row input[type=range]::-moz-range-progress{height:3px;background:#5b5bff}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;margin-top:-5px;box-shadow:0 1px 4px #00000080;transition:transform .1s}.slider-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider-row input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:#fff;box-shadow:0 1px 4px #00000080}.slider-value{font-size:11px;color:#666;text-align:right;font-variant-numeric:tabular-nums}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.toggle-row:last-child{margin-bottom:0}.toggle-label{font-size:12px;color:#999;-webkit-user-select:none;user-select:none}.toggle-switch{position:relative;display:inline-block;width:34px;height:18px;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-track{position:absolute;top:0;left:0;right:0;bottom:0;background:#2a2a2a;border-radius:9px;transition:background .2s;pointer-events:none}.toggle-track:before{content:"";position:absolute;width:12px;height:12px;left:3px;bottom:3px;background:#666;border-radius:50%;transition:transform .2s,background .2s}.toggle-switch input:checked+.toggle-track{background:#5b5bff33;border:1px solid #5b5bff55}.toggle-switch input:checked+.toggle-track:before{transform:translate(16px);background:#5b5bff}.vis-btn{background:none;border:none;color:#555;cursor:pointer;padding:2px 4px;border-radius:3px;display:flex;align-items:center;transition:color .15s;flex-shrink:0}.vis-btn:hover{color:#aaa}.vis-btn.hidden-img{color:#333}.vis-btn.hidden-img svg{opacity:.35}#panel-footer{padding:12px 16px;border-top:1px solid #1e1e1e;margin-top:auto;font-size:10px;color:#3a3a3a;line-height:1.6}#panel-footer a{color:#5b5bff;text-decoration:none}