:root{--bg:#0f0f1a;--surface:#1a1a2e;--surface-hover:#222240;--accent:#6366f1;--accent-hover:#818cf8;--highlight:#e94560;--text:#e8e8f0;--text-muted:#8888a0;--border:#2a2a40;--radius:12px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh}#root,.app{flex-direction:column;min-height:100vh;display:flex}.header{border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:20px 32px;display:flex}.header h1{letter-spacing:-.5px;font-size:20px;font-weight:600}.header span{color:var(--text-muted);font-size:14px}.main-layout{flex:1;display:flex;position:relative;overflow:hidden}.sidebar{z-index:20;border-right:1px solid var(--border);background:#0f0f1af5;flex-direction:column;gap:24px;width:min(360px,100vw - 24px);padding:24px;transition:transform .24s;display:flex;position:absolute;inset:0 auto 0 0;overflow-y:auto;transform:translate(calc(-100% - 12px));box-shadow:18px 0 40px #00000059}.controls-open .sidebar{transform:translate(0)}.panel-toggle{z-index:30;border:1px solid var(--border);min-height:38px;color:var(--text);cursor:pointer;background:#1a1a2eeb;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;font-weight:600;transition:left .24s,background .2s,border-color .2s;display:inline-flex;position:absolute;top:16px;left:16px;box-shadow:0 10px 26px #0000003d}.panel-toggle:hover{border-color:var(--accent);background:var(--surface-hover)}.controls-open .panel-toggle{left:min(376px,100vw - 104px)}.panel-backdrop{z-index:10;pointer-events:none;background:0 0;border:0;position:absolute;inset:0}.selection-toolbar{z-index:15;border:1px solid var(--border);background:#1a1a2eeb;border-radius:8px;grid-template-columns:1fr 1fr;gap:4px;width:min(250px,100vw - 168px);min-width:190px;padding:4px;display:grid;position:absolute;top:16px;right:16px;box-shadow:0 10px 26px #0000003d}.canvas-area{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:relative;overflow:hidden}.upload-zone{border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;background:var(--surface);padding:24px;transition:all .2s}.upload-zone:hover{border-color:var(--accent);background:var(--surface-hover)}.upload-zone.has-image{border-style:solid;padding:0;overflow:hidden}.upload-zone img{object-fit:cover;width:100%;height:120px;display:block}.upload-zone p{color:var(--text-muted);margin-top:8px;font-size:13px}.upload-zone .icon{margin-bottom:4px;font-size:28px}.palette-options{flex-wrap:wrap;gap:10px;margin-top:10px;display:flex}.palette-btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:8px;place-items:center;width:34px;height:34px;padding:4px;transition:background .2s,border-color .2s,transform .2s;display:grid}.palette-btn:hover{border-color:var(--accent);background:var(--surface-hover);transform:translateY(-1px)}.palette-btn.active{border-color:var(--accent);box-shadow:0 0 0 2px #6366f138}.palette-swatch{border:1px solid #ffffff38;border-radius:5px;width:100%;height:100%}.section-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:8px;font-size:12px;font-weight:600}.controls{flex-direction:column;gap:12px;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--surface-hover)}.btn-danger{color:var(--highlight);border:1px solid var(--highlight);background:0 0}.btn-danger:hover{background:#e945601a}.canvas-container{max-width:100%;max-height:100%;position:relative}.canvas-container canvas{border-radius:var(--radius);cursor:crosshair;max-width:100%;max-height:calc(100vh - 240px);display:block}.palette-strip{scroll-snap-type:x proximity;scrollbar-width:thin;flex:none;gap:12px;width:100%;max-width:100%;padding:6px 4px 10px;display:flex;overflow:auto hidden}.palette-chip{cursor:pointer;scroll-snap-align:start;background:0 0;border:none;flex-direction:column;flex:none;align-items:center;gap:6px;width:72px;padding:0;display:flex}.palette-chip-swatch{border:2px solid var(--border);background-position:50%;background-size:cover;border-radius:12px;width:64px;height:64px;transition:border-color .15s,transform .15s,box-shadow .15s}.palette-chip:hover .palette-chip-swatch{border-color:var(--accent);transform:translateY(-2px)}.palette-chip.active .palette-chip-swatch{border-color:var(--accent);box-shadow:0 0 0 2px #6366f173}.palette-chip-name{color:var(--text-muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:72px;font-size:11px;line-height:1.2;overflow:hidden}.palette-chip.active .palette-chip-name{color:var(--text)}.corner-count{color:var(--text-muted);text-align:center;background:var(--surface);border-radius:8px;padding:8px;font-size:13px}.corner-count span{color:var(--accent);font-weight:600}.opacity-slider{color:var(--text-muted);align-items:center;gap:12px;font-size:13px;display:flex}.opacity-slider input[type=range]{accent-color:var(--accent);flex:1}.empty-state{color:var(--text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:48px;font-size:14px;display:flex}.empty-state .icon{opacity:.5;font-size:48px}.tile-settings{flex-direction:column;gap:8px;display:flex}.selection-settings{flex-direction:column;gap:10px;display:flex}.cursor-mode{border:1px solid var(--border);background:var(--surface);border-radius:8px;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.cursor-mode-btn{min-height:34px;color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-radius:6px;font-size:13px;font-weight:600;transition:background .2s,color .2s}.cursor-mode-btn:hover{color:var(--text);background:var(--surface-hover)}.cursor-mode-btn.active{background:var(--accent);color:#fff}.tile-setting-row{color:var(--text-muted);align-items:center;gap:8px;font-size:13px;display:flex}.tile-setting-row label{min-width:60px}.tile-setting-row input[type=range]{accent-color:var(--accent);flex:1}.tile-setting-row input[type=number]{border:1px solid var(--border);background:var(--surface);width:56px;color:var(--text);border-radius:6px;padding:4px 6px;font-size:12px}.toggle-row{min-height:34px;color:var(--text-muted);cursor:pointer;align-items:center;gap:10px;padding:8px 0;font-size:13px;display:flex}.toggle-row input{width:16px;height:16px;accent-color:var(--accent)}.status-bar{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);border-radius:8px;flex-direction:column;align-items:flex-start;gap:10px;padding:10px 14px;font-size:13px;display:flex}.status-bar strong{color:var(--text);font-size:13px;line-height:1.2}.status-bar span{line-height:1.35}.status-bar small{color:var(--text-muted);font-size:11px;line-height:1.35}.status-action{border:1px solid var(--accent);color:var(--text);cursor:pointer;background:#6366f11f;border-radius:7px;align-self:stretch;padding:8px 10px;font-size:12px;font-weight:700}.status-action:hover{background:#6366f138}.status-bar.loading{border-color:var(--accent);color:var(--accent);flex-direction:row;align-items:center}.status-bar.ready{background:#22c55e14;border-color:#22c55e73}.status-bar.ready strong{color:#86efac}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=768px){.sidebar{border-bottom:none;border-right:none;width:min(340px,100vw - 32px)}.panel-backdrop{pointer-events:auto;background:#0000005c}.controls-open .panel-toggle{left:min(356px,100vw - 104px)}.selection-toolbar{width:min(260px,100vw - 24px);min-width:0;top:auto;bottom:16px;right:12px}}