:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html{height:100%}body{color:#e5e7eb;background:#0b1020;height:100vh;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;overflow:hidden}h1{margin:0 0 10px;font-size:18px}
body[data-theme=light]{color:#0f172a;background:#f8fafc}body[data-theme=light] .panel{background:#fff;border-color:#cbd5e1}body[data-theme=light] .section-compact{background:#f8fafc;border-color:#cbd5e1}body[data-theme=light] input,body[data-theme=light] textarea,body[data-theme=light] select{color:#0f172a;background:#fff;border-color:#cbd5e1}body[data-theme=light] button.secondary{color:#0f172a;background:#e2e8f0}body[data-theme=light] input[type=radio],body[data-theme=light] input[type=checkbox]{accent-color:#7c3aed}body[data-theme=light] .topbar{color:#0f172a;background:#fff;border-bottom:1px solid #cbd5e1}body[data-theme=light] .logo-dot{box-shadow:0 0 0 6px #7c3aed14}body[data-theme=light] .canvas-wrap{background:#f1f5f9;border-color:#cbd5e1}body[data-theme=light] .modal{color:#0f172a;background:#fff;border-color:#cbd5e1}body[data-theme=light] .settings-nav-item{color:#0f172a;background:#f8fafc;border-color:#cbd5e1}body[data-theme=light] .settings-nav-item.active{color:#f8fafc;background:#7c3aed;border-color:#7c3aed}body[data-theme=light] .settings-content{color:#0f172a;background:#f8fafc;border-color:#cbd5e1}body[data-theme=light] .sprite-item{background:#fff;border-color:#cbd5e1}body[data-theme=light] .sprite-item.active{background:#7c3aed1f;border-color:#7c3aed}body[data-theme=light] .zoom-hud{color:#0f172a;background:#ffffffe6;border-color:#cbd5e1}body[data-theme=light] .section-compact h3,body[data-theme=light] .icon-btn{color:#0f172a}
.page-frame{flex-direction:column;height:100vh;display:flex}.topbar{box-sizing:border-box;background:#0b1020;border-bottom:1px solid #263057;justify-content:space-between;align-items:center;height:46px;padding:10px 14px;display:flex}.brand-mark{letter-spacing:.3px;align-items:center;gap:8px;font-weight:800;display:flex}.topbar img{width:auto;height:26px;display:block}.logo-dot{background:#7c3aed;border-radius:50%;width:10px;height:10px;box-shadow:0 0 0 6px #7c3aed26}.page-shell{box-sizing:border-box;flex:1;grid-template-rows:minmax(0,1fr);grid-template-columns:280px 1fr 320px;gap:12px;height:calc(100vh - 46px);padding:12px;display:grid;overflow:hidden}.panel{background:#101827;border:1px solid #263057;border-radius:12px;flex-direction:column;min-height:0;padding:12px;display:flex}.controls-panel{box-sizing:border-box;height:100%;display:block;overflow:hidden auto}.controls-panel .section-compact{margin-bottom:12px}.controls-panel .setting-row{grid-template-columns:108px minmax(0,1fr);align-items:center;gap:10px;display:grid}.controls-panel .setting-row .label{color:#cbd5e1;flex:none;font-size:12px}.controls-panel .setting-row .control{justify-content:flex-start;min-width:0}.controls-panel .setting-row .control>input:not([type=checkbox]):not([type=radio]),.controls-panel .setting-row .control>select,.controls-panel .setting-row .control>button,.controls-panel .setting-row .control>.button-like{width:164px;max-width:100%}.controls-panel .setting-row .control>button,.controls-panel .setting-row .control>.button-like{justify-content:center}.controls-panel .download-mode-group{align-items:center;gap:12px;width:164px;display:flex}.controls-panel .download-mode-group label{align-items:center;gap:4px;display:inline-flex}.controls-panel .sprite-info-title{align-items:center;gap:6px;display:flex}.controls-panel .sprite-bounds{grid-template-columns:repeat(2,minmax(72px,1fr));gap:6px;width:164px;display:grid}.controls-panel .sprite-metric{justify-content:flex-start;align-items:center;gap:6px;font-size:12px;display:flex}.controls-panel .sprite-metric input{width:60px}.controls-panel .sprite-actions{gap:8px;width:164px;display:flex}.controls-panel .sprite-actions>button{flex:1;min-width:0}.panel.fill{flex:1;height:100%}.panel h2{margin:0 0 8px;font-size:14px}.scroll{flex:1;min-height:0;overflow:auto}.sprite-list{flex-direction:column;gap:6px;display:flex}.sprite-search{margin-bottom:10px;position:relative}.sprite-search input{width:100%;padding-right:28px}button.sprite-search-clear{color:#94a3b8;background:0 0;border:none;border-radius:999px;width:16px;height:16px;padding:0;font-size:10px;font-weight:700;line-height:1;position:absolute;top:50%;right:6px;transform:translateY(-50%)}button.sprite-search-clear:not(:disabled):hover{color:#e5e7eb;background:#334155}button.sprite-search-clear:disabled{opacity:.45;cursor:default}.sprite-item{cursor:pointer;background:#0f172a;border:1px solid #263057;border-radius:8px;justify-content:space-between;align-items:center;gap:8px;padding:8px;display:flex}.sprite-item.active{background:#7c3aed1a;border-color:#7c3aed}.sprite-index{color:#94a3b8;text-align:end;font-size:12px}.sprite-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.sprite-dim{flex-shrink:0}

input,textarea,select,button{font-size:14px}input,textarea,select{color:#e5e7eb;box-sizing:border-box;background:#0f172a;border:1px solid #334155;border-radius:8px;padding:8px}input[type=number]{width:68px}textarea{width:100%;max-width:100%}button{color:#fff;cursor:pointer;background:#7c3aed;border:none;border-radius:8px;padding:8px 12px;font-weight:700}.button-like{color:#fff;cursor:pointer;background:#7c3aed;border:1px solid #7c3aed;border-radius:8px;justify-content:center;align-items:center;padding:8px 12px;font-weight:700;display:inline-flex}.button-like:hover{filter:brightness(1.05)}button.secondary{background:#334155}button.danger{color:#fff;background:#aa2626}.btn-icon{align-items:center;gap:6px;display:inline-flex}.btn-icon svg{width:14px;height:14px;display:block}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;width:100%;display:flex}.setting-row{align-items:center;gap:10px;width:100%;display:flex}.setting-row .label{text-align:left;flex:1}.setting-row .control{justify-content:flex-end;align-items:center;gap:6px;display:flex}.section-compact{background:#0f172a;border:1px solid #263057;border-radius:10px;margin-bottom:10px;padding:10px;overflow:hidden}.section-compact h3{color:#e5e7eb;margin:0 0 6px;font-size:13px}.section{background:#0f172a;border:1px solid #263057;border-radius:12px;margin-top:12px;padding:12px}.section-title{color:#e5e7eb;align-items:center;gap:8px;margin-bottom:8px;font-weight:700;display:flex}.section-title .pill,.optTitle .pill{color:#a5b4fc;border:1px solid #334155;border-radius:999px;padding:2px 6px;font-size:12px}.row{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.seg{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;display:flex}.seg button{color:#cbd5e1;cursor:pointer;background:#334155;border:none;border-radius:999px;padding:6px 10px;font-weight:700}.seg button.active{color:#0b1020;background:#7c3aed}.notice{color:#cbd5e1;background:#0f172a;border:1px solid #334155;border-radius:10px;margin-bottom:12px;padding:10px 12px}.notice strong{color:#e5e7eb}
.canvas-wrap{background:0 0;border:1px solid #263057;border-radius:0;flex:1;justify-content:center;align-items:center;height:100%;min-height:0;display:flex;position:relative;overflow:hidden}.canvas-wrap.panning{cursor:grab}.canvas-wrap.panning:active{cursor:grabbing}.canvas-wrap canvas{width:auto;max-width:100%;height:auto;max-height:100%;display:block}.canvas-wrap canvas.base,.canvas-wrap canvas.overlay{background:0 0}.zoom-hud{z-index:20;color:#e5e7eb;background:#0f172ad9;border:1px solid #334155;border-radius:8px;align-items:center;gap:6px;padding:6px 8px;font-size:12px;display:flex;position:absolute;bottom:10px;right:10px}.zoom-hud .tiny{padding:4px 6px;font-size:11px}.overlay{pointer-events:none;position:absolute;inset:0}.grid{width:100%;min-height:260px;display:block;position:relative}.grid canvas{width:100%;height:auto;display:block}.cell{border:1px dashed #7c3aedb3;position:absolute}.comp{border:2px dashed #34d399;border-radius:6px;position:absolute;box-shadow:inset 0 0 0 1px #14ff9633}.compLabel{color:#e5e7eb;background:#0f172abf;border:1px solid #334155;border-radius:999px;padding:2px 6px;font-size:11px;position:absolute;top:-18px;left:-2px}.handle{background:#34d399;border:1px solid #065f46;border-radius:2px;width:14px;height:14px;position:absolute}.handle.nw{top:-5px;left:-5px}.handle.n{top:-5px;left:50%;transform:translate(-50%)}.handle.ne{top:-5px;right:-5px}.handle.e{top:50%;right:-5px;transform:translateY(-50%)}.handle.se{bottom:-5px;right:-5px}.handle.s{bottom:-5px;left:50%;transform:translate(-50%)}.handle.sw{bottom:-5px;left:-5px}.handle.w{top:50%;left:-5px;transform:translateY(-50%)}.handle.nw,.handle.se{cursor:nwse-resize}.handle.ne,.handle.sw{cursor:nesw-resize}.handle.n,.handle.s{cursor:ns-resize}.handle.e,.handle.w{cursor:ew-resize}.grid.editing{outline-offset:6px;background:#60a5fa0f;border-radius:12px;outline:2px dashed #60a5fa}.btn-icon.active{color:#fff;background:#2563eb}.btn-icon.active svg{stroke:#fff}.editFlag .chip{color:#e5e7eb;background:#0f172a;border:1px solid #334155;border-radius:999px;padding:4px 10px;font-size:12px;position:absolute;top:8px;left:8px;box-shadow:0 4px 10px #0003}.grid.dropactive{outline-offset:6px;background:#7c3aed0d;border-radius:12px;outline:2px dashed #7c3aed}.dropLayer{text-align:center;color:#94a3b8;pointer-events:auto;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.dropLayer.empty{border:2px dashed #334155;border-radius:12px}.dropLayer .hint{background:#0f172a99;border:1px solid #263057;border-radius:10px;padding:10px 14px}.dropLayer.loaded .hint{display:none}#detectCCL{color:#0b1020!important;background:#34d399!important;border:1px solid #065f46!important}#detectCCL svg{stroke:#0b1020!important}#detectCCL:hover{filter:brightness(.95)}
.modal-backdrop{z-index:999;background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:#0f172a;border:1px solid #263057;border-radius:12px;min-width:320px;padding:16px;box-shadow:0 20px 50px #00000080}.modal.modal-large{width:900px;max-width:90vw}.modal-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.modal-header.with-grid{grid-template-columns:1fr 1fr 1fr;align-items:center;display:grid}.modal-header.with-grid h3{text-align:center;margin:0}.icon-btn{color:#e5e7eb;cursor:pointer;text-align:right;background:0 0;border:none;justify-self:end;font-size:18px}.settings-layout{grid-template-columns:160px 1fr;gap:12px;height:100%;min-height:500px;margin-top:14px;display:grid}.settings-nav{flex-direction:column;gap:8px;display:flex}.settings-nav-item{color:#cbd5e1;text-align:left;cursor:pointer;background:#0b1224;border:1px solid #263057;border-radius:8px;padding:10px 12px}.settings-nav-item.active{color:#0b1020;background:#7c3aed;border-color:#7c3aed}.settings-content{box-sizing:border-box;background:#0b1224;border:1px solid #263057;border-radius:10px;height:100%;min-height:0;padding:14px;overflow:auto}.setting-column{flex-direction:column;gap:12px;display:flex}
.help{color:#94a3b8;font-size:11px}.hidden{display:none}.modeCards{flex-wrap:wrap;gap:12px;margin-top:8px;display:flex}.modeCard{cursor:pointer;background:#101827;border:1px solid #263057;border-radius:12px;flex:220px;align-items:center;gap:10px;padding:12px;display:flex}.modeCard.active{outline-offset:2px;outline:2px solid #7c3aed}.modeCard img{object-fit:contain;box-sizing:border-box;border-radius:8px;width:40px;height:40px;padding:2px}.subCard{background:#0b1224;border:1px solid #263057;border-radius:10px;margin-top:10px;padding:8px}.subCardHeader{align-items:center;gap:8px;margin-bottom:6px;display:flex}.subCardHeader .subTitle{color:#e5e7eb;font-weight:700}.subIcon{width:20px;height:20px;display:block}.modeCard .title{color:#e5e7eb;font-weight:800}.optGroup{background:#0b1224;border:1px dashed #334155;border-radius:10px;margin-top:10px;padding:8px}.optTitle{color:#a5b4fc;align-items:center;gap:6px;margin-bottom:6px;font-size:12px;display:flex}.optRow{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.brand{align-items:center;gap:10px;margin-bottom:10px;display:flex}.brand .brandLogo{width:auto;height:48px}.rightIcons{align-items:center;gap:8px;margin-left:auto;display:flex}.brand .fun{background:#0f172a;border:1px solid #263057;border-radius:8px;width:auto;height:48px;box-shadow:0 6px 20px #00000040}.card{background:#101827;border:1px solid #263057;border-radius:12px;margin-bottom:12px;padding:12px}.site-footer{color:#94a3b8;border-top:1px solid #263057;flex-wrap:wrap;gap:12px;margin:24px 0 40px;padding-top:12px;font-size:13px;display:flex}.site-footer a{color:#cbd5e1;text-decoration:none}.site-footer a:hover{text-decoration:underline}.mt-6{margin-top:6px}.mb-6{margin-bottom:6px}.mb-12{margin-bottom:12px}