/* UI Slice Studio — shared desktop editor visual system. */
:root{color-scheme:dark;--bg:#10141b;--panel:#1a202a;--line:#303846;--text:#e8edf5;--muted:#99a4b7;--accent:#59d9c6;--orange:#e6ae6b;--surface:#202733;--field:#141a23;--hover:#293342;--soft-accent:#203b3e;--checker:repeating-conic-gradient(#2b3340 0% 25%,#242b36 0% 50%) 50%/18px 18px}
body{background:var(--bg);font-family:Inter,'Segoe UI','Microsoft YaHei UI','Microsoft YaHei',sans-serif;font-size:calc(13px * var(--ui-density, 1));letter-spacing:calc(.1px * var(--ui-density, 1));-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea,select,summary{font-family:inherit}
button{background:var(--surface);border-color:var(--line);border-radius:calc(6px * var(--ui-density, 1));color:#d9e1ed;min-height:calc(32px * var(--ui-density, 1));padding:calc(6px * var(--ui-density, 1)) calc(11px * var(--ui-density, 1));font-size:calc(12px * var(--ui-density, 1));font-weight:500;transition:background .14s,border-color .14s,box-shadow .14s,color .14s}
button:hover:not(:disabled){background:var(--hover);border-color:#526074;color:#fff}
button:active:not(:disabled){background:#313d4c}
button:disabled{opacity:.38}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button.primary,.header #executeBtn{background:var(--accent);color:#0a292a;border-color:var(--accent);font-weight:700;box-shadow:0 2px 8px #0002}
button.primary:hover:not(:disabled),.header #executeBtn:hover{background:#80e8d9;border-color:#80e8d9;color:#092527}
button.quiet{background:transparent}
input,textarea,select{background:var(--field);border:1px solid #343e4e;border-radius:calc(6px * var(--ui-density, 1));color:var(--text);font-size:calc(12px * var(--ui-density, 1));line-height:1.5;padding:calc(8px * var(--ui-density, 1)) calc(10px * var(--ui-density, 1))}
input:hover,textarea:hover,select:hover{border-color:#4b596d}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:#778499}
input[type=checkbox]{accent-color:var(--accent);width:calc(14px * var(--ui-density, 1));height:calc(14px * var(--ui-density, 1));flex-shrink:0;vertical-align:middle}
input[type=range]{accent-color:var(--accent)}
input[type=number]{font-variant-numeric:tabular-nums}
*{scrollbar-width:thin;scrollbar-color:#485265 transparent}
::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#485265;border:2px solid transparent;background-clip:padding-box;border-radius:8px}::-webkit-scrollbar-thumb:hover{background:#667286}
/* Reduce only header height; keep controls at their original size. */
:root{--editor-header-height-factor:.7;--editor-header-height:calc(64px * var(--editor-header-height-factor));--editor-status-height:32px}
.header{height:var(--editor-header-height);padding:0 22px;gap:18px;background:#1b212b;border-bottom:1px solid #323b49;box-shadow:0 2px 14px #0002}
.brand{gap:11px;min-width:190px}.brand-icon{display:flex;align-items:center;justify-content:center;width:calc(32px * var(--ui-density, 1));height:calc(32px * var(--ui-density, 1));color:var(--accent)}.brand-icon svg{width:calc(29px * var(--ui-density, 1));height:calc(29px * var(--ui-density, 1))}
.brand strong{font-size:calc(18px * var(--ui-density, 1));letter-spacing:calc(2.4px * var(--ui-density, 1));font-weight:650}.brand small{color:#98a4b5;font-size:calc(11px * var(--ui-density, 1));max-width:270px;margin-top:2px}
.header-actions{gap:8px}.header-actions button{font-size:calc(12px * var(--ui-density, 1));min-height:calc(34px * var(--ui-density, 1));padding:calc(7px * var(--ui-density, 1)) calc(12px * var(--ui-density, 1))}.header-actions #saveState{font-size:calc(11px * var(--ui-density, 1));color:#a2b4b7;white-space:nowrap}.header-actions #saveState::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px}

.steps{gap:12px;font-size:calc(11px * var(--ui-density, 1))}.steps .active{color:var(--accent)}.steps .done{color:#adbac9}
.workspace{height:calc(100dvh - var(--editor-header-height) - var(--editor-status-height));padding:10px;gap:10px;grid-template-columns:clamp(220px,20vw,264px) minmax(0,1fr) clamp(246px,22vw,292px)}
.left-panel,.right-panel,.canvas-panel{background:var(--panel);border:1px solid #2b3442;border-radius:8px;min-height:0;box-shadow:0 3px 14px #0001}
.left-panel{overflow:hidden}.right-panel{padding:0;overflow:auto}.canvas-panel{isolation:isolate}
.panel-title{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 13px 12px;flex-shrink:0}.panel-title h2{grid-column:1/-1;margin:0 0 4px;font-size:calc(13px * var(--ui-density, 1));font-weight:650;color:#dce5f1}.panel-title h2 span{font-size:calc(11px * var(--ui-density, 1));background:#2a3341;color:#9caec5;border-radius:4px;padding:2px 6px;margin-left:7px;font-variant-numeric:tabular-nums}
.panel-title button{margin:0;padding:calc(8px * var(--ui-density, 1)) calc(6px * var(--ui-density, 1));min-height:calc(34px * var(--ui-density, 1));background:#222a36;color:#c1cedf;font-size:calc(11px * var(--ui-density, 1))}.panel-title #reanalyzeBtn{color:#82dfd2;background:#203136;border-color:#36565a}
.panel-title .reset-hint{grid-column:1/-1;margin:0;font-size:calc(10px * var(--ui-density, 1));line-height:1.7;color:#91a0b4}.sidebar-tabs{grid-column:1/-1;display:flex;gap:0;margin:0 0 4px;border-bottom:1px solid #36404f}
.panel-title .sidebar-tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;margin:0;padding:calc(9px * var(--ui-density, 1)) calc(12px * var(--ui-density, 1));color:#9ba8bb;font-size:calc(12px * var(--ui-density, 1))}
.panel-title .sidebar-tabs button.active{color:var(--accent);border-bottom-color:var(--accent);background:transparent}
.search-wrap{padding:0 13px 10px}.search-wrap input{height:calc(35px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));background:#141b25}.filters{padding:0 13px 10px;gap:4px;border-bottom:0}.filters button{font-size:calc(11px * var(--ui-density, 1));min-height:calc(28px * var(--ui-density, 1));border:1px solid transparent;padding:calc(4px * var(--ui-density, 1)) calc(9px * var(--ui-density, 1));color:#9facbf;background:transparent}.filters button.active{background:#263b42;border-color:#36575d;color:#88e4d7}.filters button span{font-size:calc(10px * var(--ui-density, 1));margin-left:3px}
.layer-follow-option{font-size:calc(10px * var(--ui-density, 1));color:#a4b2c5;padding:calc(8px * var(--ui-density, 1)) calc(13px * var(--ui-density, 1));margin:0;border-bottom:1px solid var(--line)}.tree-hint{font-size:calc(10px * var(--ui-density, 1));line-height:1.6;padding:9px 13px;color:#7f90a7;background:#171e28;border-bottom:1px solid var(--line)}
#elementList{padding:6px 0;min-height:0}#elementList .layer{height:auto;min-height:calc(45px * var(--ui-density, 1));padding-top:calc(7px * var(--ui-density, 1));padding-bottom:calc(7px * var(--ui-density, 1));padding-right:calc(12px * var(--ui-density, 1));border-bottom:1px solid #252e3b;background:transparent;gap:calc(5px * var(--ui-density, 1))}
#elementList .layer:hover{background:#242d3b}#elementList .layer.selected{background:#20383d;border-left-color:var(--accent);box-shadow:inset 0 1px #35525855,inset 0 -1px #35525855}
#elementList .layer strong{font-size:calc(11.5px * var(--ui-density, 1));line-height:1.5;color:#dbe3ee;font-weight:500}#elementList .layer small{font-size:calc(10px * var(--ui-density, 1));line-height:1.45;margin-top:2px;color:#8596ad}#elementList .layer .symbol{color:#6ed8cb;font-size:calc(16px * var(--ui-density, 1))}#elementList .layer.text .symbol{color:#e6ae6b}.tree-caret.has-children{color:#a4b5c8;font-size:calc(15px * var(--ui-density, 1))}.tree-caret.has-children:hover{background:#364250}.tree-caret{width:calc(15px * var(--ui-density, 1));color:#7f91a8}
.left-bottom{padding:10px 13px;font-size:calc(10px * var(--ui-density, 1));color:#8e9db2;background:#171e27;border-top:1px solid var(--line)}
.canvas-panel>.project-header{order:0;background:#1b232f;border-bottom:1px solid #303b4a}.canvas-panel>.toolbar{order:1;background:#1a222d;min-height:40px;height:40px;padding:4px 10px;border-bottom:1px solid #303b4a}
.project-header #projectBar{padding:9px 12px;min-height:46px;gap:7px;background:transparent;border-bottom:1px solid #2e3948;flex-wrap:nowrap}.project-header #projectBar label{font-size:0;min-width:100px;gap:0}.project-header #projectBar input{font-size:calc(13px * var(--ui-density, 1));height:calc(30px * var(--ui-density, 1));padding:calc(4px * var(--ui-density, 1)) calc(5px * var(--ui-density, 1));border-color:transparent;background:transparent;font-weight:600;color:#f0f3f8}.project-header #projectBar input:focus,.project-header #projectBar input:hover{background:#141c27;border-color:#3a485a}.project-header #projectBar button{min-height:calc(29px * var(--ui-density, 1));font-size:calc(10.5px * var(--ui-density, 1));padding:calc(5px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));background:#242e3c;border-color:#3a4657}.project-header #projectBar #batchRepairBtn{background:#224047;border-color:#3c646a;color:#8de6d8}
#projectSaveState{font-size:calc(10px * var(--ui-density, 1));color:#8aab9f}.project-header #qualityBar,.project-header #selectionBar{padding:5px 12px;min-height:27px;background:#18212c;color:#91a8be;font-size:calc(10px * var(--ui-density, 1))}.project-header #selectionBar{padding-left:0}.quality-bar #selectedCount{color:#9aabc1}
.toolbar .tools,.toolbar .zoom-tools{gap:3px}.toolbar button{border-color:transparent;background:transparent;font-size:calc(13px * var(--ui-density, 1));min-height:calc(29px * var(--ui-density, 1));padding:calc(4px * var(--ui-density, 1)) calc(7px * var(--ui-density, 1));color:#a8b7cb}.toolbar button.active{background:#29424a;border-color:#3d6269;color:#9ceadd}.toolbar .zoom-tools button{font-size:calc(11px * var(--ui-density, 1));padding:calc(4px * var(--ui-density, 1)) calc(7px * var(--ui-density, 1))}.toolbar .divider{background:#364152;height:18px;margin:0 4px}
.canvas-panel>.preview-controls{order:2;background:#1a222d;border-bottom:1px solid #303b4a;padding:6px 10px;gap:6px;min-height:41px}.preview-controls button{font-size:calc(10.5px * var(--ui-density, 1));min-height:calc(28px * var(--ui-density, 1));border-color:#364353;background:#222d3b;padding:calc(5px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));color:#b8c6d8}.preview-controls .active,.preview-controls #interactionPreviewBtn.active{background:#29444a;border-color:#426b72;color:#91e8dc}.preview-views,.preview-modes{background:#131c27;border:1px solid #374555;border-radius:5px;padding:2px;gap:1px}.preview-views button,.preview-modes button{border:0;border-radius:calc(3px * var(--ui-density, 1));min-height:calc(23px * var(--ui-density, 1));padding:calc(3px * var(--ui-density, 1)) calc(7px * var(--ui-density, 1));background:transparent}.preview-views button.active,.preview-modes button.active{background:#344455;color:#eef6ff}
.preview-more>summary{font-size:calc(10.5px * var(--ui-density, 1));min-height:calc(28px * var(--ui-density, 1));padding:calc(5px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));background:#232e3c;border-color:#3a4759;color:#b7c5d8}.preview-more>summary:after{color:#91a7bf}.preview-extra{background:#202a37;border-color:#435167;box-shadow:0 16px 44px #0008;color:#bfcedd;z-index:50;padding:16px}.preview-extra .compare-tools label,.preview-extra label{font-size:calc(11px * var(--ui-density, 1));color:#adbed0}.preview-extra .compare-tools select{height:calc(30px * var(--ui-density, 1));background:#141c27;border-color:#405067;font-size:calc(11px * var(--ui-density, 1))}.compact-repair-actions button,.compact-extra-actions button{font-size:calc(11px * var(--ui-density, 1))}
.canvas-info{order:3;min-height:26px;height:26px;padding:4px 12px;background:#141c26;border-bottom:1px solid #2a3443;gap:12px;font-size:calc(10px * var(--ui-density, 1));color:#8396ae}.canvas-info #imageName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}.canvas-info #imageSize{color:#a2b3ca;font-variant-numeric:tabular-nums}.canvas-info #aiState{margin-left:auto;font-size:calc(10px * var(--ui-density, 1));color:#7d95ac}
.canvas-panel>.viewport{order:4;min-height:0;background-color:#10161f;background-image:radial-gradient(#334051 1px,transparent 1px);background-size:20px 20px;box-shadow:inset 0 6px 22px #0002}
.stage{box-shadow:0 0 0 1px #4a586666,0 20px 50px #0006}.stage.cutout-stage:not(.alpha-light):not(.alpha-dark){background:var(--checker)}
.canvas-panel>.canvas-footer{order:5;min-height:29px;height:29px;padding:6px 12px;background:#19212c;border-top:1px solid #303c4d;font-size:calc(10px * var(--ui-density, 1));color:#8d9fb5;gap:12px}.canvas-footer #canvasHint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-footer #pointerPos{flex-shrink:0;color:#a5b7cc;font-variant-numeric:tabular-nums}
.inspector-heading{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:14px 16px;margin:0;border-bottom:1px solid var(--line);background:#1e2632}.inspector-heading h2{font-size:calc(13px * var(--ui-density, 1));font-weight:650}.inspector-heading #originBadge{font-size:calc(10px * var(--ui-density, 1));color:#91aec4}
#inspector{padding:16px}.empty-inspector{margin:68px 22px 0;text-align:center;padding:0}.empty-inspector>span{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border:1px solid #3c4c60;border-radius:12px;font-size:calc(29px * var(--ui-density, 1));color:#63c9c0;background:#202c39;margin-bottom:12px}.empty-inspector h3{font-size:calc(14px * var(--ui-density, 1));font-weight:600;color:#d3dfed;margin:12px 0 8px}.empty-inspector p{font-size:calc(11px * var(--ui-density, 1));line-height:1.9;color:#8d9eb5;margin:0}
.element-preview{background:var(--checker);border:1px solid #354354;border-radius:7px;min-height:130px;padding:12px;margin-bottom:16px}.element-preview canvas{max-height:160px;object-fit:contain}#previewNote{font-size:calc(10px * var(--ui-density, 1));line-height:1.7;color:#8e9eb2;margin:10px 0 18px}
.field{font-size:calc(11px * var(--ui-density, 1));color:#a9b9ce;margin-bottom:17px;line-height:1.6}.field>input,.field>select,.field>textarea{margin-top:7px}.field small{color:#768aa3}.field textarea{line-height:1.8;min-height:calc(80px * var(--ui-density, 1))}.tip,.layer-hint,.preview-note{color:#8e9fb6;font-size:calc(10.5px * var(--ui-density, 1));line-height:1.75}.tip{margin-top:12px}.coords{gap:8px;margin-top:9px}.coords label{background:#202a38;border:1px solid #3a485c;border-radius:6px;padding-left:8px;font-size:calc(10px * var(--ui-density, 1));color:#9aaec8}.coords input{background:transparent;border:0;font-size:calc(12px * var(--ui-density, 1));padding:calc(8px * var(--ui-density, 1)) calc(5px * var(--ui-density, 1));color:#e8eef8}.type-toggle,.shape-toggle{gap:5px}.type-toggle button,.shape-toggle button{font-size:calc(11px * var(--ui-density, 1));padding:calc(6px * var(--ui-density, 1))}.type-toggle button.active,.shape-toggle button.active{background:#274147;border-color:#476c72;color:#a0eadd}
.project-options,.resource-properties{border-color:#334154}.project-options h3,.resource-properties h3{color:#ccdfed;font-size:calc(12px * var(--ui-density, 1))}.project-grid label,.layer-project-controls{font-size:calc(11px * var(--ui-density, 1));color:#a3b4ca}.project-grid{gap:9px}.check{font-size:calc(11px * var(--ui-density, 1));color:#a4b6cb}.inspector-actions{gap:8px;margin-top:16px}.inspector-actions button{font-size:calc(11px * var(--ui-density, 1))}.danger,.resource-danger{color:#edb5ae;border-color:#684c50}
#resourceBrowser{padding:0 12px 16px}.resource-tools{gap:8px}.resource-tools button{font-size:calc(10.5px * var(--ui-density, 1));padding:calc(7px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1))}.resource-hint{font-size:calc(10px * var(--ui-density, 1));line-height:1.8;color:#8b9db5}.resource-dedup-tools{background:#171f2b;border-color:#344457;border-radius:6px;padding:10px}.resource-atlas-tree{padding:9px;background:#1a2533;border:1px solid #3a5266;border-radius:7px;margin:8px 0}.resource-atlas-tree summary{font-size:calc(11px * var(--ui-density, 1));color:#c0d7e9;line-height:1.65}.resource-atlas-tree .atlas-tree-toggle{min-height:26px;background:#263648;border-color:#425a70;color:#a8d5e4}.resource-atlas-cover{border:1px solid #354456;border-radius:5px;background:var(--checker);margin:10px 0;height:110px}.resource-atlas-sprites{padding-left:8px;border-left:1px solid #3b5369}.resource-grid{gap:8px}.resource-card{background:#222d3c;border:1px solid #36465c;border-radius:6px;padding:6px}.resource-card:hover{background:#2a394c}.resource-card img{background:var(--checker);height:82px;border-radius:4px}.resource-card strong{font-size:calc(10.5px * var(--ui-density, 1));color:#d2dfec;margin-top:7px}.resource-card small{font-size:calc(9.5px * var(--ui-density, 1));color:#8fa8c3}.resource-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px #59d9c633}.resource-select{background:#172330db}.resource-properties summary{color:#b7ccdf}.resource-dialog-image,#nineSliceCanvas{background:var(--checker);border-color:#3b4c61}
dialog{background:#1b2330;border:1px solid #46556b;border-radius:12px;padding:25px;box-shadow:0 24px 100px #000a;color:var(--text);max-height:92dvh;overflow:auto}dialog::backdrop{background:#080e19cc;backdrop-filter:blur(6px)}dialog[open]{animation:studio-dialog-in .14s ease-out}.dialog-top h2,dialog h2{font-size:calc(20px * var(--ui-density, 1));letter-spacing:calc(.1px * var(--ui-density, 1));font-weight:650}.dialog-top p{color:#99afc7;font-size:calc(12px * var(--ui-density, 1));line-height:1.8}.dialog-actions{gap:8px}.dialog-actions button{font-size:calc(12px * var(--ui-density, 1))}.dialog-actions a{color:#88e4d9;text-decoration:none;border-bottom:1px solid #3b6969}.dialog-actions a:hover{color:#c2fff7}.dialog-icon{color:var(--accent)}
#atlasEditDialog{width:min(1280px,96vw);max-width:1280px;padding:26px;max-height:94dvh}.atlas-workbench{grid-template-columns:minmax(0,1fr) 320px;gap:24px}.atlas-preview-actions button{font-size:calc(11px * var(--ui-density, 1))}.atlas-large-viewport{background:var(--checker);border:1px solid #40546b;border-radius:7px;margin:12px 0}.atlas-settings-pane>.tip{font-size:calc(11px * var(--ui-density, 1));line-height:1.8;color:#96abc2}.atlas-settings-pane .field{font-size:calc(12px * var(--ui-density, 1));margin-bottom:18px}.atlas-settings-pane textarea{min-height:calc(136px * var(--ui-density, 1));line-height:1.9}.atlas-settings-pane select{padding:calc(10px * var(--ui-density, 1));font-size:calc(12px * var(--ui-density, 1))}.atlas-close-top{background:#263244;border-color:#43566d;min-width:34px;height:34px;font-size:calc(22px * var(--ui-density, 1));line-height:1}
.atlas-sprite-selection{margin-top:20px;padding:16px 0;border-top:1px solid #3b4b60;gap:10px}.atlas-sprite-selection>p{color:#bdd7e7;font-size:calc(12px * var(--ui-density, 1))}.atlas-sprite-selection .dialog-actions{gap:7px}.atlas-sprite-descriptions>summary{font-size:calc(13px * var(--ui-density, 1));color:#b5cbe0;padding:calc(14px * var(--ui-density, 1)) 0}.atlas-sprite-descriptions #atlasSpriteDescriptions{grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:14px}.atlas-sprite-descriptions .atlas-sprite-description{padding:12px;background:#202b3a;border-color:#3a4b61;border-radius:7px;gap:10px}.atlas-sprite-thumbnail{height:128px;background:var(--checker);border:1px solid #3d5066;border-radius:5px}.atlas-sprite-description textarea{min-height:calc(100px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1))}.atlas-sprite-description .field>span{color:#d3e2f1;font-size:calc(12px * var(--ui-density, 1))}.atlas-sprite-description .check{font-size:calc(11px * var(--ui-density, 1));margin-top:0}.atlas-sprite-description button[data-repair-sprite]{font-size:calc(11px * var(--ui-density, 1));background:#2a394a}
.atlas-boards>details{padding:18px 0;border-top:1px solid #3a4a60}.atlas-boards summary{font-size:calc(13px * var(--ui-density, 1));color:#bed7ed;cursor:pointer}.atlas-boards p{font-size:calc(12px * var(--ui-density, 1));color:#a7bed8}.atlas-review{gap:16px}.atlas-item{background:#202a39;border:1px solid #40516a;border-radius:8px;padding:15px}.atlas-item>label{font-size:calc(12px * var(--ui-density, 1));color:#d7e5f5;margin-bottom:9px}.atlas-pair figcaption{font-size:calc(11px * var(--ui-density, 1));padding:9px 0;color:#a4bbd5}.atlas-pair img{background:var(--checker);border:1px solid #3a4d65;border-radius:5px;height:170px}.atlas-boards .atlas-pair img{height:280px}.atlas-warning{color:#e6ba83;font-size:calc(11px * var(--ui-density, 1));line-height:1.75}.atlas-item>button{font-size:calc(11px * var(--ui-density, 1));margin:5px 6px 0 0}#atlasDecisions{position:sticky;bottom:-26px;margin:20px -26px -26px;padding:16px 26px;background:#1b2735f5;border-top:1px solid #435870;box-shadow:0 -8px 25px #0003;z-index:4;align-items:center}#atlasCount{font-size:calc(11px * var(--ui-density, 1));color:#afc6df}#atlasStatus{font-size:calc(12px * var(--ui-density, 1));line-height:1.8;color:#9dded7}
.sprite-zoom-dialog{background:#1b2431;border-color:#475a72;border-radius:10px}.sprite-zoom-heading h2{font-size:calc(18px * var(--ui-density, 1))}.sprite-zoom-tools{gap:7px}.sprite-zoom-tools button{font-size:calc(11px * var(--ui-density, 1))}#spriteZoomViewport{background:var(--checker);border-color:#40536d;border-radius:6px}#atlasCropDialog{background:#1b2533;border-color:#4b607b}#atlasCropDialog>p,#atlasCropDialog>.dialog-body>p{font-size:calc(12px * var(--ui-density, 1));color:#a9bdd5;line-height:1.8}#atlasCropDialog canvas{border:1px solid #405570;border-radius:6px}#atlasCropDialog label{font-size:calc(11px * var(--ui-density, 1));color:#9fb6d3}#atlasCropDialog input{margin-left:5px}#atlasCropDialog .dialog-actions{flex-wrap:wrap;align-items:center;justify-content:flex-start}
#reviewLogConsole{color:#a8bad1;font-size:calc(11px * var(--ui-density, 1))}.review-log-bar{height:28px;padding:0 16px;background:#17202b;border-top:1px solid #354254;box-shadow:none;min-height:28px}.review-log-bar b{color:#91c9d3;font-size:calc(10px * var(--ui-density, 1))}.review-log-latest{font-size:calc(10px * var(--ui-density, 1));color:#90a3be}.review-log-count{font-size:calc(10px * var(--ui-density, 1));color:#7b90ad}.review-log-arrow{color:#8ca8c4}#reviewLogPanel{bottom:28px;background:#151e2a;border-color:#425670}.review-log-entry{border-color:#2e3d52;color:#adc1d9}.review-log-list{font-size:calc(11px * var(--ui-density, 1));line-height:1.8}.review-log-bar[data-level=error] .review-log-latest{color:#eeb1a8}
.toast{background:#223e45;border-color:#4f7d83;border-radius:8px;color:#d8f7f1;font-size:calc(12px * var(--ui-density, 1));box-shadow:0 10px 35px #0005}
body.large-preview .workspace{padding:0;gap:0;grid-template-columns:minmax(0,1fr);height:calc(100dvh - var(--editor-status-height))}body.large-preview .canvas-panel{border:0;border-radius:0}body.large-preview .left-panel,body.large-preview .right-panel{display:none}
@keyframes studio-dialog-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.workspace{grid-template-columns:270px minmax(0,1fr) 304px}.panel-title button{font-size:calc(12px * var(--ui-density, 1))}.project-header #projectBar button{font-size:calc(11px * var(--ui-density, 1))}.preview-controls button{font-size:calc(11px * var(--ui-density, 1))}}
@media(max-width:1100px){.header{padding:0 16px}.header-actions{gap:6px}.header-actions button{padding:calc(6px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1))}#saveState{display:none}.workspace{grid-template-columns:218px minmax(0,1fr) 242px;gap:8px;padding:8px}.brand strong{font-size:calc(16px * var(--ui-density, 1))}.brand small{max-width:220px}.project-header #projectBar{gap:5px;padding:7px 9px}.project-header #projectBar #projectSaveState{display:none}.project-header #projectBar button{padding:calc(4px * var(--ui-density, 1)) calc(6px * var(--ui-density, 1));font-size:calc(10px * var(--ui-density, 1))}.canvas-info #aiState{display:none}.atlas-workbench{grid-template-columns:minmax(0,1fr) 280px;gap:18px}}
@media(max-width:850px){.workspace{grid-template-columns:185px minmax(0,1fr) 220px;padding:6px;gap:6px}.brand{min-width:160px}.brand small{max-width:175px}.panel-title{padding:13px 10px;gap:6px}.panel-title .reset-hint{display:none}.project-header #projectBar{flex-wrap:wrap}.project-header #projectBar label{flex-basis:100%}.preview-controls #elementChatBtn{margin-left:0}.atlas-workbench{grid-template-columns:1fr}#atlasEditDialog{padding:18px}.atlas-sprite-descriptions #atlasSpriteDescriptions{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.atlas-boards .atlas-pair img{height:200px}#atlasDecisions{bottom:-18px;margin-inline:-18px;margin-bottom:-18px;padding:12px 18px}.toolbar .tools button{padding:calc(4px * var(--ui-density, 1)) calc(5px * var(--ui-density, 1))}.toolbar .divider{margin:0 2px}}
@media(prefers-reduced-motion:reduce){button,input,textarea,select{transition:none}dialog[open]{animation:none}}

/* Geometry stays visible above the advanced resource and binding controls. */
.geometry-section{border-top:1px solid #344154;border-bottom:1px solid #344154;padding:14px 0 16px;margin:18px 0}.geometry-section h3{font-size:calc(12px * var(--ui-density, 1));font-weight:600;color:#d5e3f1;margin:0 0 10px}.geometry-section>span,.geometry-section>small{font-size:calc(10px * var(--ui-density, 1));color:#8ea6c2}.geometry-section .coords{margin-top:9px;gap:8px}.geometry-section .coords label{min-height:36px}.element-list .layer .layer-copy{min-width:0}

.geometry-section .coords label{white-space:nowrap;gap:6px}.geometry-section .coords input{flex:1;width:0;min-width:0}

/* Reference layout: project navigation, compact tree, canvas-first editor. */
:root{--bg:#11171e;--panel:#1b222b;--line:#303b48;--text:#e8eef7;--muted:#a6b3c6;--accent:#3cddd0;--surface:#202934;--field:#161d26;--checker:repeating-conic-gradient(#343d49 0% 25%,#262e39 0% 50%) 50%/24px 24px}
.header{height:var(--editor-header-height);padding:0 24px;gap:22px;background:linear-gradient(105deg,#202732,#171e27);box-shadow:none}
.brand{min-width:178px;gap:13px}.brand strong{font-size:calc(22px * var(--ui-density, 1));letter-spacing:calc(3.2px * var(--ui-density, 1))}.brand small{display:none}.brand-icon svg{width:calc(32px * var(--ui-density, 1));height:calc(32px * var(--ui-density, 1))}
.header .steps{display:none}
.header #projectBar{display:flex;flex:1;align-items:center;gap:12px;padding:0 0 0 22px;border:0;border-left:1px solid #34404e;background:transparent;min-width:0}
.header #projectBar[hidden]{display:none}.header #projectBar label{flex:1;min-width:100px;font-size:0;display:flex;align-items:center;gap:0}
.header #projectBar input{font-size:calc(13px * var(--ui-density, 1));border:0;background:transparent;padding:calc(8px * var(--ui-density, 1)) 0;width:100%;font-weight:500;text-overflow:ellipsis}
.header #projectSaveState{font-size:calc(11px * var(--ui-density, 1));color:#aebed1;white-space:nowrap}.header #projectSaveState:before{content:'✓';border-radius:50%;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;box-sizing:border-box;padding:0;line-height:1;flex:0 0 18px;background:#36b486;color:#102621;margin-right:7px}
.header #saveProjectBtn{font-size:calc(12px * var(--ui-density, 1));min-height:calc(36px * var(--ui-density, 1));white-space:nowrap}.header #exportProjectBtn{min-height:calc(36px * var(--ui-density, 1));white-space:nowrap}.header-actions{flex-shrink:0;gap:8px}.header #executeBtn{min-height:calc(38px * var(--ui-density, 1));font-size:calc(14px * var(--ui-density, 1));padding:calc(8px * var(--ui-density, 1)) calc(20px * var(--ui-density, 1));background:#3cddd0}.header #saveState{display:none}

.workspace{padding:10px 6px;gap:10px;height:calc(100dvh - var(--editor-header-height) - var(--editor-status-height));grid-template-columns:clamp(236px,20vw,300px) minmax(0,1fr) clamp(260px,20vw,300px)}
.left-panel,.right-panel,.canvas-panel{border:0;border-radius:7px;background:linear-gradient(110deg,#1c242e,#19212a);box-shadow:0 0 0 1px #25303b55}
.panel-title{padding:0 12px 8px;gap:9px;grid-template-columns:1fr}.panel-title h2{display:none}.sidebar-tabs{margin:0 -12px 7px;height:48px;border-bottom:1px solid #303b48;grid-column:1/-1}.panel-title .sidebar-tabs button{font-size:calc(14px * var(--ui-density, 1));font-weight:600;padding:calc(12px * var(--ui-density, 1));min-height:calc(48px * var(--ui-density, 1))}.panel-title #uploadBtn{background:var(--accent);color:#082c2d;border-color:#70e9df;font-size:calc(14px * var(--ui-density, 1));font-weight:650;min-height:calc(38px * var(--ui-density, 1));border-radius:calc(5px * var(--ui-density, 1))}.panel-title #reanalyzeBtn{margin:0;background:#202a35;color:#d0dce9;border-color:#344251;font-size:calc(12px * var(--ui-density, 1));min-height:calc(34px * var(--ui-density, 1))}.panel-title .reset-hint{display:none}
.search-wrap{padding:6px 12px 10px}.search-wrap input{height:calc(36px * var(--ui-density, 1));font-size:calc(12px * var(--ui-density, 1));padding-left:calc(12px * var(--ui-density, 1))}.filters{padding:0 12px 6px}.filters button{font-size:calc(11px * var(--ui-density, 1));min-height:calc(25px * var(--ui-density, 1))}.layer-follow-option{font-size:calc(11px * var(--ui-density, 1));padding:calc(6px * var(--ui-density, 1)) calc(12px * var(--ui-density, 1));border:0}.tree-hint{display:none}
#elementList{padding:6px 0}#elementList .layer{min-height:calc(34px * var(--ui-density, 1));padding-top:calc(5px * var(--ui-density, 1));padding-bottom:calc(5px * var(--ui-density, 1));border-bottom:0;border-left:2px solid transparent;gap:calc(7px * var(--ui-density, 1));border-radius:0;position:relative}
#elementList .layer strong{font-size:calc(12px * var(--ui-density, 1));line-height:calc(22px * var(--ui-density, 1));font-weight:400}#elementList .layer small{display:none}#elementList .layer.selected{background:linear-gradient(90deg,#3c495a,#2b3643);border-left-color:var(--accent);box-shadow:none}#elementList .layer.selected small{display:block;font-size:calc(9px * var(--ui-density, 1));line-height:calc(12px * var(--ui-density, 1));margin:0;color:#a5bbcc}#elementList .layer.selected strong{line-height:calc(20px * var(--ui-density, 1));color:#fff}#elementList .layer:hover{background-color:#2b3644}.layer-copy{flex:1;min-width:0}.tree-caret{width:calc(16px * var(--ui-density, 1))}.left-bottom{padding:10px 13px}
.canvas-panel{position:relative}.canvas-panel>.toolbar{order:0;min-height:49px;height:49px;gap:9px;padding:6px 10px;background:linear-gradient(#202934,#1a222d);flex-wrap:nowrap;border-bottom:1px solid #34404e}.canvas-title{display:flex;align-items:baseline;gap:12px;flex:1;min-width:80px;white-space:nowrap}.canvas-title strong{font-size:calc(17px * var(--ui-density, 1));font-weight:600}.canvas-title #imageSize{font-size:calc(11px * var(--ui-density, 1));color:#a2b1c5}.toolbar .tools{gap:1px;flex-shrink:0}.toolbar .tools button{min-height:calc(28px * var(--ui-density, 1));padding:calc(4px * var(--ui-density, 1)) calc(6px * var(--ui-density, 1));background:transparent;border-color:transparent;font-size:calc(15px * var(--ui-density, 1))}.toolbar .tools button.active{color:var(--accent);background:#30484c;border-color:#3e6368}.toolbar .tools button span{display:none}.toolbar .zoom-tools{gap:3px;flex-shrink:0}.toolbar .zoom-tools button{font-size:calc(11px * var(--ui-density, 1));padding:calc(4px * var(--ui-density, 1)) calc(6px * var(--ui-density, 1));min-height:calc(29px * var(--ui-density, 1))}.toolbar .divider{margin:0 2px}
.canvas-panel>.preview-controls{order:1;min-height:38px;padding:4px 10px;background:#1b2430;gap:6px;border-bottom:1px solid #303d4a}.preview-controls button{font-size:calc(11px * var(--ui-density, 1));min-height:calc(28px * var(--ui-density, 1))}.preview-controls #batchRepairBtn{font-size:calc(10px * var(--ui-density, 1));padding:calc(5px * var(--ui-density, 1)) calc(7px * var(--ui-density, 1));background:#253c40;color:#a1eee4;border-color:#3a6266}.preview-controls #elementChatBtn{font-size:0;padding:calc(5px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));min-width:calc(30px * var(--ui-density, 1));margin-left:auto}.preview-controls #elementChatBtn:after{content:'✦';font-size:calc(15px * var(--ui-density, 1))}.preview-controls #elementChatBtn:disabled{display:none}
.canvas-panel>.viewport{order:2;background:var(--checker);box-shadow:inset 0 2px 12px #0003}.stage{box-shadow:0 0 0 1px #3cddd055,0 8px 25px #0004}.stage.cutout-stage:not(.alpha-light):not(.alpha-dark){background:var(--checker)}
.canvas-panel>.canvas-info{order:3;min-height:24px;height:24px;padding:3px 10px;background:#1c2530;font-size:calc(10px * var(--ui-density, 1));border:0}.canvas-info #imageName{max-width:65%}.canvas-info #aiState{font-size:calc(9px * var(--ui-density, 1))}
.canvas-panel>.project-header{order:0;min-height:23px;background:#1c2530;border-top:0;border-bottom:1px solid #303b48}.project-header #qualityBar,.project-header #selectionBar{padding:2px 10px;min-height:23px;font-size:calc(9px * var(--ui-density, 1))}.canvas-panel>.canvas-footer{order:5;height:25px;min-height:25px;padding:5px 10px;font-size:calc(9px * var(--ui-density, 1));background:#18212b}
.inspector-heading{min-height:43px;padding:12px 16px;background:transparent}.inspector-heading h2{font-size:calc(14px * var(--ui-density, 1))}.inspector-heading #originBadge{font-size:calc(10px * var(--ui-density, 1))}#inspector{padding:14px 16px}.element-preview{height:126px;min-height:126px;border:0;border-radius:3px;margin:0 0 12px;background:var(--checker)}.element-preview canvas{max-height:116px}.preview-help{margin:0 0 10px;font-size:calc(10px * var(--ui-density, 1));color:#8f9fb5}.preview-help summary{cursor:pointer;list-style:none}.preview-help summary:after{content:' ⌄'}.preview-help #previewNote{margin:8px 0;font-size:calc(10px * var(--ui-density, 1))}.field{font-size:calc(12px * var(--ui-density, 1));line-height:1.5;margin-bottom:16px}.field>input{font-size:calc(13px * var(--ui-density, 1));padding:calc(8px * var(--ui-density, 1)) calc(10px * var(--ui-density, 1));height:calc(36px * var(--ui-density, 1))}.geometry-section{margin:16px -16px;padding:16px;border-color:#303b48}.geometry-section h3{font-size:calc(13px * var(--ui-density, 1));margin-bottom:12px}.geometry-section>span,.geometry-section>small{font-size:calc(10px * var(--ui-density, 1))}.geometry-section .coords label{background:#171f29;min-height:34px;border-color:#364453}.geometry-section .coords input{font-size:calc(12px * var(--ui-density, 1))}.project-options h3,.resource-properties h3{padding:10px;background:#25303c;border-radius:5px;font-size:calc(12px * var(--ui-density, 1))}
.review-log-bar{height:36px;min-height:36px;padding:0 24px;background:linear-gradient(90deg,#1c2530,#17202a)}#reviewLogPanel{bottom:36px}.review-log-bar b{font-size:calc(11px * var(--ui-density, 1))}.review-log-latest{font-size:calc(11px * var(--ui-density, 1))}
@media(min-width:1450px){.workspace{grid-template-columns:290px minmax(0,1fr) 290px}.header #projectBar input{font-size:calc(14px * var(--ui-density, 1))}.toolbar .tools{gap:3px}.canvas-title strong{font-size:calc(19px * var(--ui-density, 1))}#elementList .layer strong{font-size:calc(13px * var(--ui-density, 1))}}
@media(max-width:1350px){.canvas-title #imageSize{display:none}.header{gap:14px;padding-inline:18px}.brand{min-width:166px}.brand strong{font-size:calc(20px * var(--ui-density, 1))}.header #projectBar{padding-left:14px;gap:8px}.canvas-title strong{font-size:calc(15px * var(--ui-density, 1))}.toolbar .tools button{padding:calc(4px * var(--ui-density, 1))}.canvas-panel>.toolbar{gap:5px}.preview-controls #interactionPreviewBtn{font-size:0;min-width:calc(28px * var(--ui-density, 1))}.preview-controls #interactionPreviewBtn:after{content:'▷';font-size:calc(15px * var(--ui-density, 1))}.preview-controls #batchRepairBtn{font-size:calc(10px * var(--ui-density, 1))}}
@media(max-width:1100px){.workspace{grid-template-columns:220px minmax(0,1fr) 242px;gap:8px}.header #projectSaveState{display:none}.canvas-title{min-width:66px}.canvas-title strong{font-size:calc(13px * var(--ui-density, 1))}.toolbar .tools .divider{display:none}.toolbar .tools button{padding:calc(3px * var(--ui-density, 1));font-size:calc(13px * var(--ui-density, 1))}.toolbar .zoom-tools button{padding:calc(3px * var(--ui-density, 1)) calc(4px * var(--ui-density, 1))}.preview-controls #batchRepairBtn{font-size:0}.preview-controls #batchRepairBtn:after{content:'✦ 批量补全';font-size:calc(10px * var(--ui-density, 1))}}
@media(max-width:850px){.workspace{grid-template-columns:180px minmax(0,1fr) 215px;gap:6px}.header{padding-inline:12px;gap:10px}.brand{min-width:145px}.brand strong{font-size:calc(17px * var(--ui-density, 1))}.header #saveProjectBtn{display:none}.header #executeBtn{font-size:calc(12px * var(--ui-density, 1));padding:calc(7px * var(--ui-density, 1)) calc(10px * var(--ui-density, 1))}.header #exportProjectBtn{font-size:calc(11px * var(--ui-density, 1))}.header #projectBar{padding-left:10px}.toolbar .tools button[data-shape]{display:none}.preview-controls{flex-wrap:wrap}.preview-controls #batchRepairBtn{font-size:0}.canvas-title strong{font-size:calc(12px * var(--ui-density, 1))}}

/* Functional layer controls: visibility, folders, type icons and actions. */
#elementList .layer{cursor:pointer;gap:calc(5px * var(--ui-density, 1));min-height:calc(34px * var(--ui-density, 1));padding-right:calc(7px * var(--ui-density, 1));font:inherit;transition:background .12s;outline-offset:-2px}
#elementList .layer:focus-visible{outline:1px solid var(--accent);background:#293945}
#elementList .layer-eye,#elementList .layer-more,#elementList .tree-caret{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:calc(20px * var(--ui-density, 1));height:calc(26px * var(--ui-density, 1));min-height:calc(26px * var(--ui-density, 1));padding:0;margin-block:0;border:0;border-radius:calc(4px * var(--ui-density, 1));background:transparent;color:#aebed3;box-shadow:none}
#elementList .layer-eye{width:calc(22px * var(--ui-density, 1))}#elementList .tree-caret{width:calc(13px * var(--ui-density, 1))}#elementList .layer-eye svg{width:calc(17px * var(--ui-density, 1));height:calc(17px * var(--ui-density, 1))}#elementList .tree-caret svg{width:calc(12px * var(--ui-density, 1));height:calc(12px * var(--ui-density, 1))}#elementList .layer-more svg{width:calc(13px * var(--ui-density, 1));height:calc(16px * var(--ui-density, 1))}
#elementList .layer-eye:hover:not(:disabled),#elementList .layer-more:hover,#elementList .tree-caret:hover:not(:disabled){color:#63e7da;background:#ffffff12}
#elementList .tree-caret:disabled{opacity:0;pointer-events:none}#elementList .layer-eye:disabled{opacity:.35;cursor:default}
#elementList .symbol{display:inline-flex;align-items:center;justify-content:center;width:calc(20px * var(--ui-density, 1));height:calc(22px * var(--ui-density, 1));flex-shrink:0;color:#47cec5}
#elementList .symbol svg{width:calc(19px * var(--ui-density, 1));height:calc(19px * var(--ui-density, 1))}#elementList .layer.text .symbol{color:#eea468}#elementList .layer.group .symbol,#elementList .layer:has(.has-children) .symbol{color:#b3c6df}
#elementList .layer-child-count{font-size:calc(10px * var(--ui-density, 1));color:#8398b2;min-width:calc(13px * var(--ui-density, 1));text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}
#elementList .layer-more{width:calc(17px * var(--ui-density, 1));color:#8092a9}#elementList .layer-copy{min-width:calc(24px * var(--ui-density, 1))}
#elementList .layer-hidden .layer-copy,#elementList .layer-hidden .symbol{opacity:.42}#elementList .layer-hidden .layer-eye{color:#71839a}
#elementList .layer strong{font-size:calc(12px * var(--ui-density, 1))}#elementList .layer.selected .layer-eye{color:#e0ebf8}
@media(min-width:1450px){#elementList .layer strong{font-size:calc(13px * var(--ui-density, 1))}#elementList .layer{gap:calc(6px * var(--ui-density, 1))}}
.layer-menu{background:#202c39;border-color:#4b6278;color:#d8e6f5}.layer-menu button:hover{background:#34475c}

#elementList .symbol svg[data-icon=image] rect{fill:#49c9c1;stroke:#49c9c1}#elementList .symbol svg[data-icon=image] path,#elementList .symbol svg[data-icon=image] circle{stroke:#183d43}
#elementList .symbol svg[data-icon=folder] path:first-child,#elementList .symbol svg[data-icon=folderOpen] path:last-child{fill:#aebfd638}

/* Lucide icons, vendored from lucide-static 1.62.0 (ISC). */
:root{--ui-upload:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-upload%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%203v12%22%20%2F%3E%20%3Cpath%20d%3D%22m17%208-5-5-5%205%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-sparkles:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-sparkles%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M11.017%202.814a1%201%200%200%201%201.966%200l1.051%205.558a2%202%200%200%200%201.594%201.594l5.558%201.051a1%201%200%200%201%200%201.966l-5.558%201.051a2%202%200%200%200-1.594%201.594l-1.051%205.558a1%201%200%200%201-1.966%200l-1.051-5.558a2%202%200%200%200-1.594-1.594l-5.558-1.051a1%201%200%200%201%200-1.966l5.558-1.051a2%202%200%200%200%201.594-1.594z%22%20%2F%3E%20%3Cpath%20d%3D%22M20%202v4%22%20%2F%3E%20%3Cpath%20d%3D%22M22%204h-4%22%20%2F%3E%20%3Ccircle%20cx%3D%224%22%20cy%3D%2220%22%20r%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-search:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-search%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m21%2021-4.34-4.34%22%20%2F%3E%20%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-download:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-download%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%2015V3%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%20%2F%3E%20%3Cpath%20d%3D%22m7%2010%205%205%205-5%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-save:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-save%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M15.2%203a2%202%200%200%201%201.4.6l3.8%203.8a2%202%200%200%201%20.6%201.4V19a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2z%22%20%2F%3E%20%3Cpath%20d%3D%22M17%2021v-7a1%201%200%200%200-1-1H8a1%201%200%200%200-1%201v7%22%20%2F%3E%20%3Cpath%20d%3D%22M7%203v4a1%201%200%200%200%201%201h7%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-grid-2x2:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-grid-2x2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%203v18%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2012h18%22%20%2F%3E%20%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-sliders-horizontal:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-sliders-horizontal%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M10%205H3%22%20%2F%3E%20%3Cpath%20d%3D%22M12%2019H3%22%20%2F%3E%20%3Cpath%20d%3D%22M14%203v4%22%20%2F%3E%20%3Cpath%20d%3D%22M16%2017v4%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2012h-9%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2019h-5%22%20%2F%3E%20%3Cpath%20d%3D%22M21%205h-7%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2010v4%22%20%2F%3E%20%3Cpath%20d%3D%22M8%2012H3%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-mouse-pointer-2:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-mouse-pointer-2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M4.037%204.688a.495.495%200%200%201%20.651-.651l16%206.5a.5.5%200%200%201-.063.947l-6.124%201.58a2%202%200%200%200-1.438%201.435l-1.579%206.126a.5.5%200%200%201-.947.063z%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-image:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-image%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%20ry%3D%222%22%20%2F%3E%20%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22m21%2015-3.086-3.086a2%202%200%200%200-2.828%200L6%2021%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-type:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-type%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%204v16%22%20%2F%3E%20%3Cpath%20d%3D%22M4%207V5a1%201%200%200%201%201-1h14a1%201%200%200%201%201%201v2%22%20%2F%3E%20%3Cpath%20d%3D%22M9%2020h6%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-square:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-square%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-circle:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-circle%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-pentagon:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-pentagon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M10.83%202.38a2%202%200%200%201%202.34%200l8%205.74a2%202%200%200%201%20.73%202.25l-3.04%209.26a2%202%200%200%201-1.9%201.37H7.04a2%202%200%200%201-1.9-1.37L2.1%2010.37a2%202%200%200%201%20.73-2.25z%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-undo-2:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-undo-2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M9%2014%204%209l5-5%22%20%2F%3E%20%3Cpath%20d%3D%22M4%209h10.5a5.5%205.5%200%200%201%205.5%205.5a5.5%205.5%200%200%201-5.5%205.5H11%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-redo-2:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-redo-2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m15%2014%205-5-5-5%22%20%2F%3E%20%3Cpath%20d%3D%22M20%209H9.5A5.5%205.5%200%200%200%204%2014.5A5.5%205.5%200%200%200%209.5%2020H13%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-zoom-in:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-zoom-in%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%20%2F%3E%20%3Cline%20x1%3D%2221%22%20x2%3D%2216.65%22%20y1%3D%2221%22%20y2%3D%2216.65%22%20%2F%3E%20%3Cline%20x1%3D%2211%22%20x2%3D%2211%22%20y1%3D%228%22%20y2%3D%2214%22%20%2F%3E%20%3Cline%20x1%3D%228%22%20x2%3D%2214%22%20y1%3D%2211%22%20y2%3D%2211%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-zoom-out:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-zoom-out%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%20%2F%3E%20%3Cline%20x1%3D%2221%22%20x2%3D%2216.65%22%20y1%3D%2221%22%20y2%3D%2216.65%22%20%2F%3E%20%3Cline%20x1%3D%228%22%20x2%3D%2214%22%20y1%3D%2211%22%20y2%3D%2211%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-expand:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-expand%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m15%2015%206%206%22%20%2F%3E%20%3Cpath%20d%3D%22m15%209%206-6%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2016v5h-5%22%20%2F%3E%20%3Cpath%20d%3D%22M21%208V3h-5%22%20%2F%3E%20%3Cpath%20d%3D%22M3%2016v5h5%22%20%2F%3E%20%3Cpath%20d%3D%22m3%2021%206-6%22%20%2F%3E%20%3Cpath%20d%3D%22M3%208V3h5%22%20%2F%3E%20%3Cpath%20d%3D%22M9%209%203%203%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-scissors:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-scissors%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20%2F%3E%20%3Cpath%20d%3D%22M8.12%208.12%2012%2012%22%20%2F%3E%20%3Cpath%20d%3D%22M20%204%208.12%2015.88%22%20%2F%3E%20%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%20%2F%3E%20%3Cpath%20d%3D%22M14.8%2014.8%2020%2020%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-play:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-play%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M5%205a2%202%200%200%201%203.008-1.728l11.997%206.998a2%202%200%200%201%20.003%203.458l-12%207A2%202%200%200%201%205%2019z%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-chevron-down:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-chevron-down%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m6%209%206%206%206-6%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-chevron-right:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-chevron-right%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-move:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-move%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%202v20%22%20%2F%3E%20%3Cpath%20d%3D%22m15%2019-3%203-3-3%22%20%2F%3E%20%3Cpath%20d%3D%22m19%209%203%203-3%203%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012h20%22%20%2F%3E%20%3Cpath%20d%3D%22m5%209-3%203%203%203%22%20%2F%3E%20%3Cpath%20d%3D%22m9%205%203-3%203%203%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-map:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-map%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M14.106%205.553a2%202%200%200%200%201.788%200l3.659-1.83A1%201%200%200%201%2021%204.619v12.764a1%201%200%200%201-.553.894l-4.553%202.277a2%202%200%200%201-1.788%200l-4.212-2.106a2%202%200%200%200-1.788%200l-3.659%201.83A1%201%200%200%201%203%2019.381V6.618a1%201%200%200%201%20.553-.894l4.553-2.277a2%202%200%200%201%201.788%200z%22%20%2F%3E%20%3Cpath%20d%3D%22M15%205.764v15%22%20%2F%3E%20%3Cpath%20d%3D%22M9%203.236v15%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-layers:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-layers%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12.83%202.18a2%202%200%200%200-1.66%200L2.6%206.08a1%201%200%200%200%200%201.83l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%200-1.83z%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2012a1%201%200%200%200%20.58.91l8.6%203.91a2%202%200%200%200%201.65%200l8.58-3.9A1%201%200%200%200%2022%2012%22%20%2F%3E%20%3Cpath%20d%3D%22M2%2017a1%201%200%200%200%20.58.91l8.6%203.91a2%202%200%200%200%201.65%200l8.58-3.9A1%201%200%200%200%2022%2017%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-folder-open:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-folder-open%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22m6%2014%201.5-2.9A2%202%200%200%201%209.24%2010H20a2%202%200%200%201%201.94%202.5l-1.54%206a2%202%200%200%201-1.95%201.5H4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h3.9a2%202%200%200%201%201.69.9l.81%201.2a2%202%200%200%200%201.67.9H18a2%202%200%200%201%202%202v2%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-settings-2:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-settings-2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M14%2017H5%22%20%2F%3E%20%3Cpath%20d%3D%22M19%207h-9%22%20%2F%3E%20%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%223%22%20%2F%3E%20%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%223%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-focus:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-focus%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%20%2F%3E%20%3Cpath%20d%3D%22M3%207V5a2%202%200%200%201%202-2h2%22%20%2F%3E%20%3Cpath%20d%3D%22M17%203h2a2%202%200%200%201%202%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2017v2a2%202%200%200%201-2%202h-2%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2021H5a2%202%200%200%201-2-2v-2%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-scan-line:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-scan-line%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M3%207V5a2%202%200%200%201%202-2h2%22%20%2F%3E%20%3Cpath%20d%3D%22M17%203h2a2%202%200%200%201%202%202v2%22%20%2F%3E%20%3Cpath%20d%3D%22M21%2017v2a2%202%200%200%201-2%202h-2%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2021H5a2%202%200%200%201-2-2v-2%22%20%2F%3E%20%3Cpath%20d%3D%22M7%2012h10%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-crop:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-crop%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M6%202v14a2%202%200%200%200%202%202h14%22%20%2F%3E%20%3Cpath%20d%3D%22M18%2022V8a2%202%200%200%200-2-2H2%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-terminal:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-terminal%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M12%2019h8%22%20%2F%3E%20%3Cpath%20d%3D%22m4%2017%206-6-6-6%22%20%2F%3E%20%3C%2Fsvg%3E");--ui-panel-right-close:url("data:image/svg+xml,%3Csvg%20class%3D%22lucide%20lucide-panel-right-close%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%20%2F%3E%20%3Cpath%20d%3D%22M15%203v18%22%20%2F%3E%20%3Cpath%20d%3D%22m8%209%203%203-3%203%22%20%2F%3E%20%3C%2Fsvg%3E");}
#uploadBtn::before,#reanalyzeBtn::before,#generateDesignBtn::before,#exportProjectBtn::before,#saveProjectBtn::before,#projectsPanelBtn::before,#executeBtn::before,#batchRepairBtn::before,#elementChatBtn::before,#adjustRectanglesBtn::before,#layerView::before,#compositionView::before,#fitBtn::before,#zoomIn::before,#zoomOut::before,#undoBtn::before,#redoBtn::before,#searchFilterBtn::before,#gridToggle::before,#interactionPreviewBtn::before,#largePreviewBtn::before,#focusLayerBtn::before,#downloadElementBtn::before,#openResourceBtn::before,#detachResourceBtn::before,#paintMaskBtn::before,#aiRepairBtn::before,#downloadEngineExport::before,[data-tool="select"]::before,[data-tool="image"]::before,[data-tool="text"]::before,[data-shape="rect"]::before,[data-shape="circle"]::before,[data-shape="polygon"]::before{content:"";display:inline-block;vertical-align:-3px;width:calc(16px * var(--ui-density, 1));height:calc(16px * var(--ui-density, 1));flex-shrink:0;background:currentColor;mask:var(--button-icon) center/contain no-repeat;-webkit-mask:var(--button-icon) center/contain no-repeat;margin-right:7px}
#uploadBtn{--button-icon:var(--ui-download)}
#reanalyzeBtn{--button-icon:var(--ui-sparkles)}
#generateDesignBtn{--button-icon:var(--ui-scan-line)}
#exportProjectBtn{--button-icon:var(--ui-upload)}
#saveProjectBtn{--button-icon:var(--ui-save)}
#executeBtn{--button-icon:var(--ui-play)}
#batchRepairBtn{--button-icon:var(--ui-sparkles)}
#elementChatBtn{--button-icon:var(--ui-sparkles)}
#adjustRectanglesBtn{--button-icon:var(--ui-move)}
#layerView{--button-icon:var(--ui-image)}
#compositionView{--button-icon:var(--ui-layers)}
#fitBtn{--button-icon:var(--ui-expand)}
#zoomIn{--button-icon:var(--ui-zoom-in)}
#zoomOut{--button-icon:var(--ui-zoom-out)}
#undoBtn{--button-icon:var(--ui-undo-2)}
#redoBtn{--button-icon:var(--ui-redo-2)}
#searchFilterBtn{--button-icon:var(--ui-sliders-horizontal)}
#gridToggle{--button-icon:var(--ui-grid-2x2)}
#interactionPreviewBtn{--button-icon:var(--ui-play)}
#largePreviewBtn{--button-icon:var(--ui-expand)}
#focusLayerBtn{--button-icon:var(--ui-focus)}
#downloadElementBtn{--button-icon:var(--ui-download)}
#openResourceBtn{--button-icon:var(--ui-folder-open)}
#detachResourceBtn{--button-icon:var(--ui-image)}
#paintMaskBtn{--button-icon:var(--ui-crop)}
#aiRepairBtn{--button-icon:var(--ui-sparkles)}
#downloadEngineExport{--button-icon:var(--ui-download)}
[data-tool="select"]{--button-icon:var(--ui-mouse-pointer-2)}
[data-tool="image"]{--button-icon:var(--ui-image)}
[data-tool="text"]{--button-icon:var(--ui-type)}
[data-shape="rect"]{--button-icon:var(--ui-square)}
[data-shape="circle"]{--button-icon:var(--ui-circle)}
[data-shape="polygon"]{--button-icon:var(--ui-pentagon)}

.header #executeBtn::before{width:calc(17px * var(--ui-density, 1));height:calc(17px * var(--ui-density, 1))}.header .brand-icon{width:calc(34px * var(--ui-density, 1));height:calc(34px * var(--ui-density, 1))}.brand-icon svg{width:calc(34px * var(--ui-density, 1));height:calc(34px * var(--ui-density, 1))}
.panel-title{grid-template-columns:1fr 1fr}.panel-title #uploadBtn{grid-column:1/-1}.panel-title #reanalyzeBtn,.panel-title #generateDesignBtn{font-size:calc(11px * var(--ui-density, 1));padding:calc(8px * var(--ui-density, 1)) calc(5px * var(--ui-density, 1));color:#c7d8e9;background:#202a36;border:1px solid #344454;min-height:calc(36px * var(--ui-density, 1))}.panel-title #reanalyzeBtn::before{color:#4bded1}.panel-title #generateDesignBtn{margin:0;width:100%}.panel-title button::before{width:calc(16px * var(--ui-density, 1));height:calc(16px * var(--ui-density, 1));margin-right:6px}
.search-wrap{position:relative;display:flex;align-items:center;gap:5px}.search-wrap::before{content:'';position:absolute;left:23px;top:16px;width:16px;height:16px;background:#a8bbd1;mask:var(--ui-search) center/contain no-repeat;pointer-events:none}.search-wrap #search{padding-left:33px;min-width:0;flex:1}.search-wrap #searchFilterBtn{width:calc(28px * var(--ui-density, 1));min-width:calc(28px * var(--ui-density, 1));height:calc(34px * var(--ui-density, 1));padding:0;background:transparent;border-color:transparent}.search-wrap #searchFilterBtn::before{margin:0;width:calc(17px * var(--ui-density, 1));height:calc(17px * var(--ui-density, 1))}.search-wrap #searchFilterBtn[aria-expanded=false]{color:var(--accent)}
.toolbar .tools button,.toolbar .zoom-tools #zoomIn,.toolbar .zoom-tools #zoomOut{font-size:0!important;min-width:calc(24px * var(--ui-density, 1));padding:calc(4px * var(--ui-density, 1))!important}.toolbar .tools button::before,.toolbar .zoom-tools #zoomIn::before,.toolbar .zoom-tools #zoomOut::before{margin:0;width:calc(16px * var(--ui-density, 1));height:calc(16px * var(--ui-density, 1))}.toolbar .tools button span{display:none}.toolbar .tools{gap:2px}.toolbar .divider{margin-inline:4px}
.preview-controls #elementChatBtn::after,.preview-controls #interactionPreviewBtn::after{content:none!important}.preview-controls #elementChatBtn::before,.preview-controls #interactionPreviewBtn::before{margin:0}.preview-controls #elementChatBtn{font-size:0!important}.preview-controls #interactionPreviewBtn{font-size:0!important;width:calc(29px * var(--ui-density, 1));padding:calc(4px * var(--ui-density, 1))}.preview-controls #batchRepairBtn::before{width:calc(13px * var(--ui-density, 1));height:calc(13px * var(--ui-density, 1));margin-right:4px}.preview-controls #adjustRectanglesBtn::before{width:calc(13px * var(--ui-density, 1));height:calc(13px * var(--ui-density, 1));margin-right:4px}.preview-controls #layerView::before,.preview-controls #compositionView::before{display:none}
.preview-more>summary::after{content:'';display:inline-block;width:calc(12px * var(--ui-density, 1));height:calc(12px * var(--ui-density, 1));margin-left:8px;background:currentColor;mask:var(--ui-chevron-down) center/contain no-repeat}.preview-more[open]>summary::after{transform:rotate(180deg)}
.review-status-row{display:flex;align-items:center;height:var(--editor-status-height);background:linear-gradient(90deg,#1d2631,#17202a);border-top:1px solid #34414f}.review-status-row>.review-log-bar{width:auto;min-width:0;flex:1;border:0;background:transparent;box-shadow:none;height:calc(var(--editor-status-height) - 1px);min-height:0;padding-block:0}.review-status-row>.review-log-bar b::before{content:'';display:inline-block;vertical-align:-3px;width:14px;height:14px;margin-right:7px;background:currentColor;mask:var(--ui-terminal) center/contain no-repeat}.studio-grid-controls{display:flex;align-items:center;gap:10px;flex-shrink:0;padding:0 18px;border-left:1px solid #34414f;height:24px;font-size:calc(11px * var(--ui-density, 1));color:#b9c8db}.studio-grid-controls button{background:transparent;border:0;padding:calc(2px * var(--ui-density, 1)) 0;min-height:calc(25px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));color:#b9c8db}.studio-grid-controls button[aria-pressed=true]{color:var(--accent)}.studio-grid-controls button::before{width:calc(15px * var(--ui-density, 1));height:calc(15px * var(--ui-density, 1));margin-right:6px}.studio-grid-controls select{margin:0;width:calc(72px * var(--ui-density, 1));padding:calc(3px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));height:calc(27px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));border-color:#374756;background:#222e3c}.studio-grid-controls label{display:flex;align-items:center;gap:6px;white-space:nowrap}.studio-grid-controls input{margin:0;width:calc(13px * var(--ui-density, 1));height:calc(13px * var(--ui-density, 1))}
.workspace{height:calc(100dvh - var(--editor-header-height) - var(--editor-status-height))}#reviewLogPanel{bottom:var(--editor-status-height)}.show-canvas-grid .stage::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;background-image:linear-gradient(to right,#7eabcc44 1px,transparent 1px),linear-gradient(to bottom,#7eabcc44 1px,transparent 1px);background-size:calc(var(--grid-size,32px)*var(--grid-scale,1)) calc(var(--grid-size,32px)*var(--grid-scale,1))}.show-canvas-guides .stage::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(to right,transparent calc(50% - .5px),#3cddd088 50%,transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),#3cddd088 50%,transparent calc(50% + .5px))}
.inspector-section{margin:0 -16px;border-bottom:1px solid #303e4d;padding:0}.inspector-section>summary{list-style:none;display:flex;align-items:center;gap:calc(9px * var(--ui-density, 1));padding:calc(13px * var(--ui-density, 1)) calc(16px * var(--ui-density, 1));font-size:calc(12px * var(--ui-density, 1));font-weight:600;color:#d3e0ef;cursor:pointer;user-select:none;background:#202b37}.inspector-section>summary::-webkit-details-marker{display:none}.inspector-section>summary::before{content:'';width:calc(13px * var(--ui-density, 1));height:calc(13px * var(--ui-density, 1));flex-shrink:0;background:currentColor;mask:var(--section-icon,var(--ui-settings-2)) center/contain no-repeat}.inspector-section>summary::after{content:'';width:calc(12px * var(--ui-density, 1));height:calc(12px * var(--ui-density, 1));margin-left:auto;background:#a3b5cc;mask:var(--ui-chevron-right) center/contain no-repeat}.inspector-section[open]>summary::after{transform:rotate(90deg)}.inspector-section>summary:hover{background:#293747}.inspector-section>summary:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}.inspector-section>.inspector-section-body{padding:15px 16px 2px}.inspector-section-body>.project-options{border:0;padding:0;margin:0}.inspector-section-body>.resource-properties{border:0;padding:0;margin:0}.inspector-section-body>.resource-properties>h3{display:none}.inspector-section-body .fill-preview-options>h3{display:none}.inspector-section-body>.tip{margin-top:0}.geometry-section{margin:16px -16px 0;padding:0;border-top:1px solid #344154}.geometry-section>summary{background:transparent}.geometry-section>summary h3{font:inherit;margin:0;color:inherit}.geometry-section .coords{margin-top:8px}.geometry-section>summary::before{--section-icon:var(--ui-crop)}
#projectImageOptions{border:0;padding:0;margin:0}#projectTextOptions{border:0;padding:0;margin:0}.inspector-section:has(> .inspector-section-body > #projectTextOptions[hidden]){display:none}.inspector-section-body>.field{margin-bottom:14px}.image-section{--section-icon:var(--ui-image)}.binding-section{--section-icon:var(--ui-layers)}.text-section{--section-icon:var(--ui-type)}.repair-section{--section-icon:var(--ui-sparkles)}.export-section{--section-icon:var(--ui-download)}
#projectImageOptions>.inspector-section:first-child{margin-top:0}.resource-properties .resource-grid{gap:7px}
@media(max-width:1100px){.studio-grid-controls{gap:6px;padding-inline:10px;font-size:calc(10px * var(--ui-density, 1))}.review-status-row .review-log-latest{max-width:180px}.studio-grid-controls .guide-toggle{display:none}.header #saveProjectBtn{font-size:0;width:calc(32px * var(--ui-density, 1));min-width:calc(32px * var(--ui-density, 1));padding:calc(6px * var(--ui-density, 1))}.header #saveProjectBtn::before{margin:0}.panel-title #reanalyzeBtn,.panel-title #generateDesignBtn{font-size:calc(10px * var(--ui-density, 1))}.panel-title button::before{width:calc(13px * var(--ui-density, 1));height:calc(13px * var(--ui-density, 1));margin-right:3px}}

#inspectorExportBtn::before{content:'';display:inline-block;vertical-align:-3px;width:calc(15px * var(--ui-density, 1));height:calc(15px * var(--ui-density, 1));margin-right:7px;background:currentColor;mask:var(--ui-download) center/contain no-repeat}.geometry-section .inspector-section-body>small{float:right;color:#8fa5bd;font-size:calc(10px * var(--ui-density, 1))}.geometry-section .inspector-section-body>span{font-size:calc(10px * var(--ui-density, 1));color:#8fa5bd}.geometry-section .inspector-section-body{padding-bottom:15px}.inspector-section>summary{border-bottom:1px solid #ffffff03}.inspector-section[hidden]{display:none}

#screenPreviewBtn{font-size:calc(11px * var(--ui-density, 1));padding:calc(5px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));min-height:calc(28px * var(--ui-density, 1));background:#263c48;border-color:#456172;color:#b1deec}#screenPreviewBtn::before{content:'';display:inline-block;vertical-align:-3px;width:calc(14px * var(--ui-density, 1));height:calc(14px * var(--ui-density, 1));margin-right:6px;background:currentColor;mask:var(--ui-expand) center/contain no-repeat}
#screenPreviewDialog{width:min(1500px,96vw);max-width:1500px;max-height:94dvh;padding:0;overflow:hidden}#screenPreviewDialog .screen-preview-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #3b4d61}#screenPreviewDialog h2{font-size:calc(18px * var(--ui-density, 1));margin:0}#screenPreviewDialog header p{font-size:calc(11px * var(--ui-density, 1));color:#91a8be;margin:5px 0 0}.screen-preview-body{display:grid;grid-template-columns:260px minmax(0,1fr);height:min(760px,78dvh)}.screen-preview-settings{overflow:auto;padding:18px;border-right:1px solid #3b4d61}.screen-preview-settings h3{font-size:calc(13px * var(--ui-density, 1));margin-top:20px}.screen-preview-settings .field{font-size:calc(11px * var(--ui-density, 1));margin-bottom:15px}.screen-preview-settings select{margin-top:6px}.screen-preview-settings .project-grid{display:grid;grid-template-columns:1fr 1fr;font-size:calc(11px * var(--ui-density, 1))}.screen-preview-settings input{margin-top:6px}.screen-preview-settings .tip{font-size:calc(10px * var(--ui-density, 1));line-height:1.7}.screen-metrics,.screen-texture-info{display:block;white-space:pre-line;font-size:calc(11px * var(--ui-density, 1));line-height:1.9;border-top:1px solid #3c4b60;padding-top:12px;margin-top:12px;color:#b5e1da}.screen-texture-info{color:#bacfe7}.screen-preview-main{display:flex;flex-direction:column;min-width:0;min-height:0}.screen-preview-toolbar{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:52px;border-bottom:1px solid #35465a;flex-wrap:wrap}.screen-preview-toolbar>span{flex:1;font-size:calc(11px * var(--ui-density, 1));color:#9ab8cd}.screen-preview-toolbar label{display:flex;align-items:center;gap:6px;font-size:calc(11px * var(--ui-density, 1))}.screen-preview-toolbar select{width:calc(160px * var(--ui-density, 1));margin:0;padding:calc(5px * var(--ui-density, 1))}.screen-preview-toolbar button{font-size:calc(11px * var(--ui-density, 1))}.screen-viewport{flex:1;min-height:0;overflow:auto;position:relative;display:grid;align-items:start;justify-items:start;padding:20px;background:var(--checker)}#screenRenderCanvas{max-width:none;max-height:none;display:block;image-rendering:pixelated;box-shadow:0 0 0 1px #67949a,0 10px 25px #0006}.screen-preview-main>p{font-size:calc(10px * var(--ui-density, 1));line-height:1.7;margin:0;padding:8px 14px;border-top:1px solid #35465a;color:#a1bbcd;min-height:34px}@media(max-width:1000px){.screen-preview-body{grid-template-columns:225px minmax(0,1fr)}.screen-preview-toolbar{gap:6px}.screen-preview-toolbar>span{flex-basis:100%}.preview-controls #screenPreviewBtn{font-size:calc(10px * var(--ui-density, 1));padding:calc(5px * var(--ui-density, 1))}}

.background-upload-tools{padding:10px 0;border-top:1px solid #3c4b5f;border-bottom:1px solid #3c4b5f}.background-upload-tools>div{display:flex;gap:7px;align-items:center}.background-upload-tools button{font-size:calc(11px * var(--ui-density, 1))}.background-upload-tools p{font-size:calc(10px * var(--ui-density, 1));line-height:1.7;color:#94aac3;margin:7px 0 0}#replaceBackgroundBtn::before{content:'';display:inline-block;vertical-align:-3px;width:calc(14px * var(--ui-density, 1));height:calc(14px * var(--ui-density, 1));margin-right:6px;background:currentColor;mask:var(--ui-upload) center/contain no-repeat}#restoreBackgroundBtn::before{content:'';display:inline-block;vertical-align:-3px;width:calc(14px * var(--ui-density, 1));height:calc(14px * var(--ui-density, 1));margin-right:6px;background:currentColor;mask:var(--ui-undo-2) center/contain no-repeat}

/* Design generation workspace */
dialog.design-generation{box-sizing:border-box;width:min(1440px,96vw);max-width:1440px;max-height:90vh;overflow:auto;background:#1d2530;color:#e5edf4;border:1px solid #465260;border-radius:14px;padding:24px} .design-generation::backdrop{background:#080e18b8}.design-generation header,.design-generation footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.design-generation header{margin-bottom:20px}.design-generation h2{margin:6px 0}.design-generation small{color:#69d5e7;letter-spacing:calc(2px * var(--ui-density, 1))}.design-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}.design-generation label{display:flex;flex-direction:column;gap:7px;margin:12px 0}.design-generation input,.design-generation textarea,.design-generation select{box-sizing:border-box;width:100%;padding:calc(9px * var(--ui-density, 1));background:#131c26;color:#e5edf4;border:1px solid #465260;border-radius:calc(6px * var(--ui-density, 1));font:inherit}.design-generation textarea{resize:vertical}.design-dimensions{display:flex;align-items:center;gap:12px}.design-dimensions label{flex:1;min-width:0}.design-muted,.design-generation footer span{color:#a4b3c2;font-size:calc(12px * var(--ui-density, 1));line-height:1.6}.design-result{display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-width:0;background:#131b24;padding:20px;border-radius:8px}.design-result img{max-width:100%;max-height:420px;object-fit:contain}.design-result-actions{display:flex;align-items:center;gap:16px}.design-result a{color:#69d5e7}.design-generation footer{border-top:1px solid #465260;padding-top:16px;margin-top:20px}.design-generation button{padding:calc(9px * var(--ui-density, 1)) calc(14px * var(--ui-density, 1))}.design-generation #designSubmit,.design-generation #designAdopt{background:#236c7a;color:white}.design-generation [hidden]{display:none!important}#designPlaceholder{text-align:center;color:#a4b3c2;padding:60px 0}#designStatus{white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:760px){.design-columns{grid-template-columns:1fr}.design-generation footer{flex-wrap:wrap}}

.design-result-actions{flex-wrap:wrap}.design-result-actions label{width:100%}

@media(min-width:1000px){.design-generation .design-columns{grid-template-columns:minmax(360px,0.9fr) minmax(0,1.1fr)}.design-generation .design-result img{max-height:600px}}

/* Compact layer filter row. */
.filters{display:flex;align-items:center;flex-wrap:nowrap;gap:2px;padding:0 8px 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex-shrink:0}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:0 0 auto;padding:calc(4px * var(--ui-density, 1)) calc(4px * var(--ui-density, 1));min-height:calc(26px * var(--ui-density, 1));line-height:1}
.filters .layer-icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:calc(4px * var(--ui-density, 1)) calc(5px * var(--ui-density, 1));line-height:0;color:#a9c2d6;border:1px solid transparent;border-radius:calc(5px * var(--ui-density, 1))}
.filters .layer-icon-btn svg{width:calc(14px * var(--ui-density, 1));height:calc(14px * var(--ui-density, 1))}
.filters .layer-icon-btn:hover:not(:disabled){background:#24383a;border-color:#3f615a;color:#d3ece4}
.filters .layer-icon-danger{color:#f2f7fa}
.filters .layer-icon-danger:hover:not(:disabled){background:#24383a;border-color:#3f615a;color:#ffffff}
.filters .layer-icon-btn:disabled{opacity:.32;border-color:transparent;background:transparent}
.show-resources #selectAllLayersBtn,.show-resources #deleteLayersBtn{display:none}
/* 全选、删除、聚焦三件挨在同一行：聚焦靠右，放不下时整行横向滚动而不是换行。 */
.filters .layer-follow-option{display:flex;align-items:center;flex:0 0 auto;margin:0 0 0 auto;gap:calc(2px * var(--ui-density, 1));padding:0 0 0 calc(3px * var(--ui-density, 1));border:0;font-size:calc(10px * var(--ui-density, 1));white-space:nowrap;cursor:pointer}
.filters .layer-follow-option input{width:calc(13px * var(--ui-density, 1));height:calc(13px * var(--ui-density, 1));margin:0}
.filters[hidden]{display:none!important}

.layout-builder-actions{grid-column:1/-1;display:flex;gap:7px}.panel-title .layout-builder-actions button{margin:0;flex:1;min-width:0;width:auto;font-size:calc(11px * var(--ui-density, 1));padding:calc(7px * var(--ui-density, 1)) calc(5px * var(--ui-density, 1))}.layout-builder-dialog{max-width:760px!important}.layout-builder-dialog h3{font-size:calc(15px * var(--ui-density, 1))}.layout-builder-dialog>p,.layout-builder-dialog form>p,.layout-builder-dialog>.dialog-body>p{line-height:1.8;color:#b5c4d4}.layout-builder-dialog [hidden]{display:none!important}.layout-builder-dialog #layoutBuilderStatus{white-space:pre-wrap;color:#e5b997}

.layout-builder-dialog{width:min(1440px,96vw)!important;max-width:1440px!important}#layoutBoardWorkspace{margin-top:22px}.layout-board-card{border:1px solid var(--line);border-radius:8px;padding:16px;margin:16px 0;background:var(--field)}.layout-board-card h4{margin:0 0 14px;font-size:calc(15px * var(--ui-density, 1))}.layout-board-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.layout-board-columns section{min-width:0}.layout-board-columns strong{display:block;margin-bottom:10px}.layout-board-columns img{display:block;width:100%;height:280px;object-fit:contain;background:var(--checker);border:1px solid var(--line);margin:10px 0}.layout-board-columns p{font-size:calc(12px * var(--ui-density, 1));line-height:1.7;overflow-wrap:anywhere}.layout-board-columns a{color:var(--accent);display:inline-block;margin-bottom:10px}.layout-board-columns textarea{width:100%;font-size:calc(12px * var(--ui-density, 1))}.layout-board-columns input[type=file]{width:100%;margin:12px 0}.layout-board-columns button{margin-top:10px}.layout-board-columns [hidden]{display:none!important}@media(max-width:760px){.layout-board-columns{grid-template-columns:1fr}.layout-board-columns img{height:220px}}

.board-crop-editor canvas{display:block;width:100%;height:auto;background:var(--checker);touch-action:none;margin:12px 0;border:1px solid #4d6877;cursor:crosshair}.board-crop-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.board-crop-fields input{width:100%;min-width:0}.board-crop-editor p{font-size:calc(11px * var(--ui-density, 1));color:var(--muted)}

.layout-board-columns img[role=button]{cursor:zoom-in}.layout-sprite-dialog{box-sizing:border-box;width:min(1600px,97vw);max-width:1600px;max-height:96dvh;padding:18px;background:var(--panel);color:var(--text);border:1px solid var(--line)}.layout-sprite-dialog>header,.layout-sprite-dialog>footer,.sprite-dialog-tools{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:12px}.layout-sprite-dialog h2{font-size:calc(18px * var(--ui-density, 1));margin:0}.sprite-dialog-tools{justify-content:flex-start}.sprite-dialog-info{color:var(--muted);font-size:calc(12px * var(--ui-density, 1))}.layout-sprite-dialog .board-crop-viewport{height:54dvh;min-height:220px;overflow:auto;background:var(--checker);padding:12px;border:1px solid var(--line)}.layout-sprite-dialog .board-crop-editor canvas{max-width:none;margin:0;display:block}.layout-sprite-dialog .board-crop-fields{max-width:720px}.layout-sprite-dialog .board-crop-editor>select{max-width:calc(600px * var(--ui-density, 1))}.layout-sprite-dialog footer{margin:14px 0 0}.sprite-dialog-status{color:#e5c17f;font-size:calc(12px * var(--ui-density, 1))}.layout-sprite-dialog::backdrop{background:#08111bd9}

.board-nine-slice-controls{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}.board-nine-slice-controls>label{display:flex;align-items:center;gap:7px}.board-nine-slice-controls>label input{width:calc(14px * var(--ui-density, 1));height:calc(14px * var(--ui-density, 1))}.board-nine-slice-controls>span{color:var(--muted);font-size:calc(12px * var(--ui-density, 1))}.board-nine-slice-controls .board-crop-fields{margin-top:8px}.board-slice-sync{display:flex;gap:8px;align-items:flex-end;margin-top:8px}.board-slice-sync label{display:flex;flex-direction:column;gap:4px;flex:0 0 150px;min-width:0;font-size:calc(11px * var(--ui-density, 1));color:var(--muted)}.board-slice-sync input{width:100%;box-sizing:border-box;padding:calc(6px * var(--ui-density, 1))}.board-slice-sync button{padding:calc(6px * var(--ui-density, 1)) calc(10px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));white-space:nowrap}

.board-crop-space{position:relative;min-width:1px;min-height:1px}.board-crop-space canvas{position:absolute;margin:0!important}.board-crop-viewport.panning,.board-crop-viewport.panning *{cursor:grabbing!important;user-select:none}.board-crop-viewport{overscroll-behavior:contain;overflow-anchor:none}

#resourceDialog .resource-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}#resourceDialog .resource-dialog-heading h2{margin:0}#resourceDialog #closeResourceDialog{width:34px;height:34px;padding:0;font-size:calc(22px * var(--ui-density, 1));flex-shrink:0}#resourceDialog .dialog-actions{flex-wrap:wrap}.sprite-edit-dialog .sprite-edit-save[hidden]{display:none}.sprite-edit-dialog.hide-slice .board-nine-slice-controls{display:none}.sprite-edit-extra{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sprite-edit-dialog .sprite-edit-body .board-crop-editor>select{max-width:calc(600px * var(--ui-density, 1))}.sprite-edit-dialog.single .board-crop-editor>select{display:none}

#overlay .box.recut-pending, .box.recut-pending.selected {stroke:#ff5252 !important;fill:rgba(255,82,82,.12);stroke-dasharray:6 3;}

/* Annotation and cutout modes share the same menu slots. */
#exitPreview {display:none;}

.show-resources #generateDesignBtn,.show-resources .layout-builder-actions{display:none!important}
.resource-search-wrap{position:relative;grid-column:1/-1;display:flex;align-items:center;min-width:0}
.resource-search-wrap::before{content:'';position:absolute;left:11px;top:calc(50% - 8px);width:16px;height:16px;background:#a8bbd1;mask:var(--ui-search) center/contain no-repeat;-webkit-mask:var(--ui-search) center/contain no-repeat;pointer-events:none}
.resource-search-wrap #resourceSearch{width:100%;min-width:0;height:36px;font-size:calc(12px * var(--ui-density, 1));padding-left:33px}

/* 项目管理：与「保存项目」同高同字号，图标走统一的 Lucide mask 方案（不再用内联 svg） */
#projectsPanelBtn{--button-icon:var(--ui-folder-open)}
.header #projectBar #projectsPanelBtn{font-size:calc(12px * var(--ui-density, 1));min-height:calc(36px * var(--ui-density, 1));white-space:nowrap}
@media(max-width:1100px){.header #projectBar #projectsPanelBtn{font-size:0;width:calc(32px * var(--ui-density, 1));min-width:calc(32px * var(--ui-density, 1));padding:calc(6px * var(--ui-density, 1))}.header #projectBar #projectsPanelBtn::before{margin:0}}

/* 项目管理：没有项目时挂到页头操作区，同样保持图标与尺寸一致 */
.header-actions #projectsPanelBtn{font-size:calc(12px * var(--ui-density, 1));min-height:calc(36px * var(--ui-density, 1));white-space:nowrap}
@media(max-width:1100px){.header-actions #projectsPanelBtn{font-size:0;width:calc(32px * var(--ui-density, 1));min-width:calc(32px * var(--ui-density, 1));padding:calc(6px * var(--ui-density, 1))}.header-actions #projectsPanelBtn::before{margin:0}}

/* Keep the project controls inside the header on laptop-sized windows. */
.design-style-filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(130px,1fr);column-gap:12px}
.design-style-filters p{grid-column:1/-1;margin:0 0 6px}
dialog.design-generation-compact{width:min(760px,96vw)}
.design-generation-compact .design-columns{display:block}
.generation-scans{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}
.generation-scan{position:absolute;overflow:hidden;box-sizing:border-box;border:1px solid #68e5d4;background:repeating-linear-gradient(0deg,transparent 0 23px,#68e5d40b 23px 24px);box-shadow:inset 0 0 24px #3cddd020;pointer-events:none}
.generation-scan::after{content:'';position:absolute;left:0;top:-35%;width:100%;height:35%;background:linear-gradient(180deg,transparent,#55dfd238);border-bottom:2px solid #9effed;box-shadow:0 5px 22px #5cebd866;animation:generation-sweep 2.4s linear infinite;will-change:transform}
.generation-scan span{position:absolute;top:10px;left:10px;max-width:calc(100% - 20px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:4px 8px;border-radius:4px;color:#bbfff1;background:#102b30dc;font-size:calc(11px * var(--ui-density, 1))}
@keyframes generation-sweep{from{transform:translateY(0)}to{transform:translateY(390%)}}
@media(prefers-reduced-motion:reduce){.generation-scan::after{animation:none;top:45%;height:1px;will-change:auto}}
@media(max-width:1450px){
 :root{--editor-header-height:calc(104px * var(--editor-header-height-factor))}
 .header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:calc(54px * var(--editor-header-height-factor)) minmax(0,1fr);height:var(--editor-header-height);column-gap:14px;row-gap:0}
 .header .brand{grid-column:1;grid-row:1}
 .header #accountButton{grid-column:2;grid-row:1;justify-self:start;max-width:100%}
 .header .header-actions{grid-column:3;grid-row:1}
 .header #projectBar{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;height:100%;padding:0;gap:10px;border-left:0;border-top:1px solid var(--line)}
 .header #projectBar label{flex:1;min-width:70px}
 .header #projectBar #projectsPanelBtn{font-size:calc(12px * var(--ui-density, 1));width:auto;min-width:0;padding:calc(6px * var(--ui-density, 1)) calc(10px * var(--ui-density, 1))}
 .workspace{height:calc(100dvh - var(--editor-header-height) - var(--editor-status-height))}
}

/* 页头 AI 对话入口：没有项目时也要看得见，做成有边框的强调按钮 */
.header-actions #headerChatLauncher{font-size:calc(12px * var(--ui-density, 1));min-height:36px;padding:0 12px;border-radius:8px;border:1px solid #4b7d72;background:#20342f;color:var(--accent);white-space:nowrap}
.header-actions #headerChatLauncher:hover{background:#274440;border-color:#6ea492;color:#b6f0e2}
.header-actions #headerChatLauncher[hidden]{display:none}
@media(max-width:1100px){.header-actions #headerChatLauncher{font-size:calc(11px * var(--ui-density, 1));padding:0 9px;min-height:32px}}

/* 用已生成素材拼版：勾选清单 */
.layout-library{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#141d29}
.layout-library legend{padding:0 6px;font-size:calc(11px * var(--ui-density, 1));color:#8fb6cf;letter-spacing:calc(.4px * var(--ui-density, 1))}
.layout-library .design-muted{margin:0 0 8px;font-size:calc(11px * var(--ui-density, 1));line-height:1.7;color:#93a9bd}
.layout-library-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;max-height:190px;overflow:auto;padding:8px;border:1px solid #2c3b4d;border-radius:8px;background:#101821}
.layout-library .layout-library-item{display:flex;flex-direction:row;align-items:center;gap:7px;margin:0;font-size:calc(11px * var(--ui-density, 1));color:#c3d5e6;padding:3px 4px;border-radius:5px;cursor:pointer}
.layout-library-item:hover{background:#1d2a3a}
.layout-library-item input{width:calc(13px * var(--ui-density, 1));height:calc(13px * var(--ui-density, 1));margin:0;flex-shrink:0;accent-color:var(--accent)}
.layout-library-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layout-library-actions{display:flex;gap:6px;margin-top:8px}
.layout-library-actions button{font-size:calc(11px * var(--ui-density, 1));padding:calc(4px * var(--ui-density, 1)) calc(9px * var(--ui-density, 1));min-height:calc(26px * var(--ui-density, 1))}
@media(max-width:760px){.layout-library-list{grid-template-columns:1fr}}

/* 生成素材面板：分区卡片 + 两端吸附的操作条。 */
.layout-builder-dialog .gen-block{margin:0 0 14px;padding:14px 16px;border:1px solid #33414f;border-radius:10px;background:#1a2330}
.layout-builder-dialog .gen-block h4{margin:0 0 10px;font-size:calc(13px * var(--ui-density, 1));font-weight:600;color:#c8d8e8}
.layout-builder-dialog .gen-block>p{margin:10px 0 0}
.layout-builder-dialog .gen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px}
.layout-builder-dialog .gen-grid label{margin:0;min-width:0}
.layout-builder-dialog .gen-actions{position:sticky;bottom:-20px;z-index:5;display:flex;gap:14px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin:16px -20px -20px;padding:13px 20px;background:#182231;border-top:1px solid #33414f;border-radius:0 0 12px 12px}
.layout-builder-dialog .gen-actions .design-muted{margin:0;flex:1 1 320px;min-width:0}
.layout-builder-dialog .gen-actions [type=submit]{flex-shrink:0}
@media(max-width:1100px){.layout-builder-dialog .gen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Sprite 编辑面板：紧凑排版——输入框按固定小宽对齐，说明文字收小，编辑区留白收窄。 */
.sprite-edit-dialog{width:min(1200px,94vw);max-width:1200px;max-height:86dvh;padding:14px 16px;flex-direction:column}
.sprite-edit-dialog[open]{display:flex}
.sprite-edit-dialog .sprite-edit-body{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column}
.sprite-edit-dialog .sprite-edit-body>.board-crop-editor{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:7px}
.sprite-edit-dialog .sprite-edit-body>.board-crop-editor>p{margin:0}
.sprite-edit-dialog>footer{flex:0 0 auto}
.sprite-edit-dialog>header{margin-bottom:8px;gap:10px}
.sprite-edit-dialog>header>h2{font-size:calc(15px * var(--ui-density, 1));font-weight:600}
.sprite-edit-dialog .sprite-dialog-info{font-size:calc(11px * var(--ui-density, 1))}
.sprite-edit-dialog>header>.sprite-edit-close{position:static;flex:0 0 auto}
.sprite-edit-dialog .sprite-dialog-tools{gap:6px;margin-bottom:6px}
.sprite-edit-dialog .sprite-dialog-tools>button{padding:calc(3px * var(--ui-density, 1)) calc(9px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));border-radius:calc(6px * var(--ui-density, 1))}
.sprite-edit-dialog .sprite-edit-body .board-crop-viewport{flex:1 1 auto;height:auto;min-height:160px;padding:8px}
.sprite-edit-dialog .board-crop-editor>select{max-width:calc(320px * var(--ui-density, 1));padding:calc(4px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));font-size:calc(12px * var(--ui-density, 1));height:calc(28px * var(--ui-density, 1));box-sizing:border-box}
.sprite-edit-dialog .board-crop-fields{grid-template-columns:repeat(4,76px);gap:6px;justify-content:flex-start}
.sprite-edit-dialog .board-crop-fields label{font-size:calc(10px * var(--ui-density, 1));gap:2px;color:var(--muted)}
.sprite-edit-dialog .board-crop-fields input{width:calc(76px * var(--ui-density, 1));box-sizing:border-box;padding:calc(3px * var(--ui-density, 1)) calc(6px * var(--ui-density, 1));font-size:calc(12px * var(--ui-density, 1));height:calc(26px * var(--ui-density, 1))}
.sprite-edit-dialog .board-nine-slice-controls{margin-top:10px;padding-top:8px}
.sprite-edit-dialog .board-nine-slice-controls>label{font-size:calc(12px * var(--ui-density, 1));gap:5px}
.sprite-edit-dialog .board-nine-slice-controls>span{font-size:calc(11px * var(--ui-density, 1))}
.sprite-edit-dialog .board-slice-sync{margin-top:6px;gap:5px;align-items:flex-end}
.sprite-edit-dialog .board-slice-sync label{flex:0 0 86px;font-size:calc(10px * var(--ui-density, 1));gap:2px}
.sprite-edit-dialog .board-slice-sync input{width:calc(86px * var(--ui-density, 1));box-sizing:border-box;padding:calc(3px * var(--ui-density, 1)) calc(6px * var(--ui-density, 1));font-size:calc(12px * var(--ui-density, 1));height:calc(26px * var(--ui-density, 1))}
.sprite-edit-dialog .board-slice-sync>button{padding:calc(3px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));height:calc(26px * var(--ui-density, 1))}
.sprite-edit-dialog .board-crop-editor>p{font-size:calc(10.5px * var(--ui-density, 1));line-height:1.65;margin:6px 0}
.sprite-edit-dialog>footer{margin-top:10px;gap:10px}
.sprite-edit-dialog .sprite-edit-save{padding:5px 14px;font-size:calc(12px * var(--ui-density, 1))}
.sprite-edit-dialog .sprite-edit-note{font-size:calc(10.5px * var(--ui-density, 1));line-height:1.6;margin:6px 0 0}
/* 矩形设置与九宫格设置：同一行两组，各带小标题，外面套一张设置卡片。 */
.board-crop-settings{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:6px}
.board-crop-settings .board-crop-group{display:flex;flex-direction:column;gap:5px;min-width:0}
.board-crop-settings .board-crop-group-title{font-size:calc(9.5px * var(--ui-density, 1));letter-spacing:calc(1.3px * var(--ui-density, 1));color:#6f8399}
.sprite-edit-dialog .board-crop-settings{display:flex!important;align-items:flex-end;gap:16px;flex-wrap:nowrap;margin:0!important;padding:9px 14px 10px;background:#151d26;border:1px solid #2c3a47;border-radius:9px}
.sprite-edit-dialog .board-crop-settings .board-crop-group{flex:0 0 auto}
.sprite-edit-dialog .board-crop-settings .board-crop-group+.board-crop-group{flex:0 1 auto;min-width:0;border-left:1px solid #2b3947;padding-left:14px}
.sprite-edit-dialog .board-crop-settings .board-crop-group-title{font-size:calc(9.5px * var(--ui-density, 1));letter-spacing:calc(1.4px * var(--ui-density, 1));color:#68809a}
.sprite-edit-dialog .board-crop-settings>.board-crop-group>.board-crop-fields{display:flex!important;gap:6px;margin:0;grid-template-columns:none}
.sprite-edit-dialog.hide-slice .board-crop-settings .board-crop-group:last-child{display:none}
/* 九宫格一行排开：开关 + 四个边距 + 同值/四边/上下/左右 */
.sprite-edit-dialog .board-crop-settings .board-nine-slice-controls{display:flex!important;align-items:flex-end;gap:6px;flex-wrap:nowrap!important;margin:0!important;padding:0!important;border:0!important;min-width:0}
.sprite-edit-dialog .board-crop-settings .board-nine-slice-controls>.board-crop-fields{display:flex!important;gap:6px;margin:0;flex:0 0 auto;grid-template-columns:none}
.sprite-edit-dialog .board-crop-settings .board-nine-slice-controls>label{align-self:center;white-space:nowrap;font-size:calc(11px * var(--ui-density, 1));color:#c0cfdf;gap:5px;padding:0 4px 0 0}
.sprite-edit-dialog .board-crop-settings .board-nine-slice-controls>label input{width:calc(13px * var(--ui-density, 1));height:calc(13px * var(--ui-density, 1));margin:0;accent-color:#42d9cb}
.sprite-edit-dialog .board-crop-settings .board-nine-slice-controls>span{flex:0 1 auto;min-width:0;max-width:120px;align-self:center;font-size:calc(10px * var(--ui-density, 1));color:#7b8ea3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sprite-edit-dialog .board-crop-settings .board-slice-sync{margin:0!important;gap:5px;align-items:flex-end;flex:0 0 auto}
.sprite-edit-dialog .board-crop-settings .board-slice-sync label{flex:0 0 auto;width:auto}
.sprite-edit-dialog .board-crop-settings .board-slice-sync input{width:calc(96px * var(--ui-density, 1))}
/* 统一控件规格：标签在上、输入在下，输入框同一套配色与聚焦态 */
.sprite-edit-dialog .board-crop-settings .board-crop-fields label,
.sprite-edit-dialog .board-crop-editor>.board-crop-fields label{display:flex;flex-direction:column;gap:3px;font-size:calc(10px * var(--ui-density, 1));color:#8497ad;letter-spacing:calc(.2px * var(--ui-density, 1))}
.sprite-edit-dialog .board-crop-settings input,
.sprite-edit-dialog .board-crop-editor>.board-crop-fields input{width:calc(76px * var(--ui-density, 1));height:calc(26px * var(--ui-density, 1));padding:calc(2px * var(--ui-density, 1)) calc(7px * var(--ui-density, 1));font-size:calc(12px * var(--ui-density, 1));color:#dce7f3;background:#0f171f;border:1px solid #33424f;border-radius:calc(5px * var(--ui-density, 1));box-sizing:border-box;transition:border-color .12s,box-shadow .12s}
.sprite-edit-dialog .board-crop-settings .board-nine-slice-controls .board-crop-fields input{width:calc(64px * var(--ui-density, 1))}
.sprite-edit-dialog .board-crop-settings input:focus,
.sprite-edit-dialog .board-crop-editor>.board-crop-fields input:focus{outline:none;border-color:#48cbbd;box-shadow:0 0 0 2px #48cbbd26}
/* 自动识别工具条 */
.sprite-edit-dialog .board-crop-editor>.board-crop-fields{display:flex!important;align-items:flex-end;gap:8px;flex-wrap:wrap;grid-template-columns:none;margin:0!important;padding:9px 14px;background:#151d26;border:1px solid #2c3a47;border-radius:9px}
.sprite-edit-dialog .board-crop-editor>.board-crop-fields button{height:calc(26px * var(--ui-density, 1));min-height:calc(26px * var(--ui-density, 1));padding:0 calc(11px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));border-radius:calc(6px * var(--ui-density, 1));background:#22303d;border:1px solid #38495a;color:#c6d6e5;transition:background .12s,border-color .12s,color .12s}
.sprite-edit-dialog .board-crop-editor>.board-crop-fields button:hover:not(:disabled){background:#2b3d4c;border-color:#4a6076;color:#e6f1fa}
.sprite-edit-dialog .board-crop-editor>.board-crop-fields button:first-of-type{border-color:#3d6f74;color:#8fe6da;background:#1b3038}
.sprite-edit-dialog .board-crop-editor>.board-crop-fields button:disabled{opacity:.36}
.sprite-edit-dialog .board-crop-editor>button{align-self:flex-end;width:auto;min-height:calc(26px * var(--ui-density, 1));height:calc(26px * var(--ui-density, 1));margin:0;padding:0 calc(12px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));border-radius:calc(6px * var(--ui-density, 1));background:#1d2833;border:1px solid #33424f;color:#a8bccd}
.sprite-edit-dialog .board-crop-editor>button:hover:not(:disabled){background:#26333f;border-color:#43606f;color:#dcecf6}
/* 面板其余部件：画布、下拉、顶部缩放条、状态与保存键 */
.sprite-edit-dialog .sprite-edit-body .board-crop-viewport{border-radius:9px;border:1px solid #2c3a47;box-shadow:inset 0 1px 6px #05090ecc}
.sprite-edit-dialog .sprite-edit-body .board-crop-editor>select{background:#0f171f;border:1px solid #33424f;border-radius:calc(6px * var(--ui-density, 1));color:#dce7f3;height:calc(28px * var(--ui-density, 1));font-size:calc(12px * var(--ui-density, 1));padding:0 calc(8px * var(--ui-density, 1));max-width:calc(340px * var(--ui-density, 1));width:calc(340px * var(--ui-density, 1))}
.sprite-edit-dialog .board-crop-editor>select:focus{outline:none;border-color:#48cbbd}
.sprite-edit-dialog .sprite-dialog-tools>button{min-height:calc(26px * var(--ui-density, 1));padding:0 calc(11px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));border-radius:calc(6px * var(--ui-density, 1));background:#1a242f;border:1px solid #32414e;color:#b6c8d9;transition:background .12s,border-color .12s,color .12s}
.sprite-edit-dialog .sprite-dialog-tools>button:hover{background:#243342;border-color:#456073;color:#e2eef8}
.sprite-edit-dialog .board-crop-editor>p[role=status]{color:#8fe0d2;font-size:calc(10.5px * var(--ui-density, 1));line-height:1.6;min-height:0}
.sprite-edit-dialog .sprite-edit-save{min-height:28px;padding:0 18px;font-size:calc(12px * var(--ui-density, 1));font-weight:600;border-radius:6px;background:linear-gradient(#43dccf,#2fb9ae);border:1px solid #63e7dc;color:#062826}
.sprite-edit-dialog .sprite-edit-save:hover:not(:disabled){background:linear-gradient(#54e6d9,#37c5b9)}
/* 处理方式选择：设计图采用 / 新建布局都要先选新项目还是覆盖当前项目。 */
dialog.target-project{width:min(640px,94vw);max-width:640px}
.target-project .target-choices{display:flex;flex-direction:column;gap:10px;margin:8px 0 0}
.target-project .target-choice{display:flex;flex-direction:row;align-items:flex-start;gap:11px;margin:0;padding:13px 15px;border:1px solid #3b4a5c;border-radius:10px;background:#18212c;cursor:pointer;transition:background .15s,border-color .15s}
.target-project .target-choice:hover{border-color:#4d6478;background:#1b2634}
.target-project .target-choice:has(input:checked){border-color:#2e8f92;background:#16292c;box-shadow:inset 0 0 0 1px #2e8f92}
.target-project .target-choice:has(input:disabled){opacity:.55;cursor:not-allowed}
.target-project .target-choice input{width:auto;flex:0 0 auto;margin:3px 0 0;padding:0;accent-color:#3fb0a6}
.target-project .target-choice>span{display:flex;flex-direction:column;gap:5px;min-width:0}
.target-project .target-choice b{font-size:calc(13px * var(--ui-density, 1));font-weight:600;color:#e8f1f8}
.target-project .target-choice small{font-size:calc(11px * var(--ui-density, 1));line-height:1.7;color:#9ab0c4}
.target-project .target-fields{margin-top:15px}
.target-project .target-warn{margin-top:14px;padding:11px 13px;border:1px solid #a35a4c;border-left-width:3px;border-radius:8px;background:#33201d;color:#ffc9bd}
.target-project #targetError:empty{display:none}

/* ===== 无限画布：移动模式下画布脱离画板、铺满视口 ===== */
.viewport.infinite{--ruler-left:22px;--ruler-bottom:0px;overflow:hidden!important;padding:0!important}
.viewport.infinite .zoom-scroll-space{width:100%!important;height:100%!important;position:static!important}
.viewport.infinite .stage{display:none!important}
.viewport.infinite>#cutoutCanvas{position:absolute;top:0;right:0;bottom:var(--ruler-bottom);left:var(--ruler-left);width:calc(100% - var(--ruler-left));height:calc(100% - var(--ruler-bottom));z-index:2;cursor:default;outline:none}
.viewport.infinite[data-tool="pan"]>#cutoutCanvas{cursor:grab}
.viewport.is-panning,.viewport.is-panning *{cursor:grabbing!important}
.viewport.infinite.alpha-dark{background:#111a23!important}
.viewport.infinite.alpha-light{background:#f3f3f0!important}
body.show-canvas-grid .viewport.infinite::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background-image:linear-gradient(to right,#7eabcc40 1px,transparent 1px),linear-gradient(to bottom,#7eabcc40 1px,transparent 1px);background-size:calc(var(--grid-size,32px)*var(--grid-scale,1)) calc(var(--grid-size,32px)*var(--grid-scale,1));background-position:calc(var(--grid-ox,0px) + var(--ruler-left,0px)) var(--grid-oy,0px)}

/* ===== 无限画布标尺：顶部/左侧刻度 ===== */
.canvas-ruler,#rulerCorner{display:none}
.viewport.infinite .canvas-ruler{position:absolute;display:block;pointer-events:none}
.viewport.infinite #rulerTop{bottom:0;left:var(--ruler-left);width:calc(100% - var(--ruler-left));height:var(--ruler-bottom);z-index:3}
.viewport.infinite #rulerLeft{top:0;bottom:0;left:0;width:var(--ruler-left);height:100%;z-index:3}
.viewport.infinite #rulerCorner{position:absolute;bottom:0;left:0;width:var(--ruler-left);height:var(--ruler-bottom);display:block;z-index:4;background:#161d26;border-right:1px solid #2c353a;border-top:1px solid #2c353a;pointer-events:none}
/* 图层锁定：行内锁图标 + 锁定/继承状态 */
#elementList .layer-lock{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:calc(22px * var(--ui-density, 1));height:calc(26px * var(--ui-density, 1));min-height:calc(26px * var(--ui-density, 1));padding:0;margin-block:0;border:0;border-radius:calc(4px * var(--ui-density, 1));background:transparent;color:#8b9bb0;box-shadow:none}
#elementList .layer-lock svg{width:calc(16px * var(--ui-density, 1));height:calc(16px * var(--ui-density, 1))}
#elementList .layer-lock:hover{color:#ffcf76;background:#ffffff12}
#elementList .layer-lock.active{color:#ffcf76}
#elementList .layer-lock.inherited{color:#6f7d8c;opacity:.8}
#elementList .layer-locked .layer-copy strong{color:#9aa9b8}
#elementList .layer-locked .symbol{opacity:.6}

/* 底部标尺贴住信息栏上沿，画布与标尺之间不留额外底边。 */
.canvas-panel>.viewport{order:2;flex:1;min-height:0}
.canvas-panel>.viewport.infinite{padding:0!important;border-bottom:0}
.canvas-panel>.canvas-info{order:3}
.canvas-panel>.canvas-footer{order:5}

/* 标注与拆图共用底部、左侧标尺以及无滚动条的画布外观。 */
.viewport.annotating{overflow:hidden;padding:0!important;background:var(--checker)}
.viewport.annotating .canvas-ruler{position:absolute;display:block;pointer-events:none;z-index:3}
.viewport.annotating #rulerTop{width:calc(100% - 22px);height:18px}
.viewport.annotating #rulerLeft{width:22px;height:100%}
.viewport.annotating #rulerCorner{position:absolute;display:block;width:22px;height:18px;z-index:4;background:#161d26;pointer-events:none}
#overlay.composition-view .box:not(.selected){stroke:transparent;fill:transparent}

/* Compact resource browser: search, three filters, then a quiet action row. */
#resourceBrowser .resource-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px 0 8px}
#resourceBrowser .resource-search-wrap{grid-column:1/3;grid-row:1;min-width:0}
#resourceBrowser #importResourceBtn{grid-column:3;grid-row:1;margin:0;background:#294047;border-color:#3d6067;color:#b8ece5}
#resourceBrowser .resource-tools>select{width:100%;min-width:0;margin:0;padding:0 calc(5px * var(--ui-density, 1));height:calc(28px * var(--ui-density, 1));font-size:calc(10px * var(--ui-density, 1));border-radius:calc(5px * var(--ui-density, 1));background-color:var(--field);border-color:var(--line);text-overflow:ellipsis}
#resourceBrowser #resourceSearch{height:30px;min-height:30px;margin:0;padding-block:4px;font-size:calc(11px * var(--ui-density, 1));border-radius:6px}
#resourceBrowser .resource-tools>button{height:calc(30px * var(--ui-density, 1));min-height:calc(30px * var(--ui-density, 1));padding:0 calc(6px * var(--ui-density, 1));font-size:calc(10px * var(--ui-density, 1));border-radius:calc(6px * var(--ui-density, 1))}
#resourceBrowser .resource-dedup-tools{display:grid;grid-template-columns:auto auto 1fr;align-items:start;gap:4px;margin:0 0 6px;padding:4px 0 7px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
#resourceBrowser .resource-dedup-tools>button,#resourceBrowser .resource-organize>summary{height:calc(26px * var(--ui-density, 1));min-height:calc(26px * var(--ui-density, 1));padding:calc(3px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));border:1px solid transparent;border-radius:calc(5px * var(--ui-density, 1));background:transparent;color:var(--muted);font-size:calc(11px * var(--ui-density, 1));font-weight:400;line-height:calc(18px * var(--ui-density, 1));cursor:pointer}
#resourceBrowser .resource-dedup-tools>button:hover,#resourceBrowser .resource-organize>summary:hover{background:var(--surface);border-color:var(--line);color:var(--text)}
#resourceBrowser .resource-organize{min-width:0;justify-self:end}
#resourceBrowser .resource-organize>summary{list-style:none;display:flex;align-items:center;gap:calc(7px * var(--ui-density, 1))}
#resourceBrowser .resource-organize>summary::-webkit-details-marker{display:none}
#resourceBrowser .resource-organize>summary::after{content:'';display:block;flex:0 0 5px;width:calc(5px * var(--ui-density, 1));height:calc(5px * var(--ui-density, 1));border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-1px) rotate(45deg)}
#resourceBrowser .resource-organize[open]{grid-column:1/-1;justify-self:stretch}
#resourceBrowser .resource-organize[open]>summary{justify-content:space-between;background:var(--surface);color:var(--text)}
#resourceBrowser .resource-organize[open]>summary::after{transform:translateY(1px) rotate(225deg)}
#resourceBrowser .resource-organize-content{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 0 2px}
#resourceBrowser .resource-organize-content>button{width:100%;min-width:0;min-height:calc(28px * var(--ui-density, 1));padding:calc(5px * var(--ui-density, 1)) calc(6px * var(--ui-density, 1));font-size:calc(10px * var(--ui-density, 1));border-radius:calc(5px * var(--ui-density, 1));white-space:normal;line-height:1.5}
#resourceBrowser .resource-organize-content>.resource-scan-row,#resourceBrowser #analyzeSimilarResources,#resourceBrowser #regroupResourceAtlases{grid-column:1/-1}
#resourceBrowser .resource-scan-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0}
#resourceBrowser .resource-scan-row label{display:flex;align-items:center;gap:4px;font-size:calc(10px * var(--ui-density, 1));color:var(--muted);white-space:nowrap}
#resourceBrowser #resourceSimilarityThreshold{width:44px;height:28px;margin:0;padding:3px 5px;font-size:calc(11px * var(--ui-density, 1))}
#resourceBrowser #scanSimilarResources{height:28px;min-height:28px;padding:3px 8px;font-size:calc(10px * var(--ui-density, 1))}
#resourceBrowser #resourceCount{margin:4px 0 8px;font-size:calc(10px * var(--ui-density, 1));line-height:1.6}
#resourceBrowser summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

#resourceBrowser .resource-tools #resourceFilter{grid-column:1;grid-row:2}
#resourceBrowser .resource-tools #resourceOwner{grid-column:2;grid-row:2}
#resourceBrowser .resource-tools #resourceType{grid-column:3;grid-row:2}

#resourceBrowser .resource-dedup-tools>button{display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0}

#elementList .pending-layer-badge{flex-shrink:0;font-size:calc(9px * var(--ui-density, 1));color:#ffb66f;margin-left:auto;padding-right:5px}

/* Selected-image labels and contextual actions stay in screen pixels while zooming. */
.canvas-selection-chrome{position:absolute;z-index:6;pointer-events:none;overflow:hidden;clip-path:inset(0 0 0 22px);user-select:none}
.canvas-selection-chrome[hidden]{display:none!important}
.selection-image-frame{position:absolute;border:1px solid #ac8bf4;box-sizing:border-box}
.selection-image-meta{position:absolute;display:flex;align-items:center;justify-content:space-between;gap:8px;height:22px;color:#d6bfff;font:calc(11px * var(--ui-density, 1))/20px 'Segoe UI','Microsoft YaHei',sans-serif}
.selection-image-name,.selection-image-size{background:#241f32f5;border:1px solid #795ba8;border-radius:4px;padding:0 6px;white-space:nowrap}
.selection-image-name{min-width:0;max-width:65%;overflow:hidden;text-overflow:ellipsis}
.selection-image-name::before{content:'';display:inline-block;width:12px;height:12px;vertical-align:-2px;margin-right:5px;background:currentColor;mask:var(--ui-image) center/contain no-repeat}
.selection-image-size{flex-shrink:0;font-variant-numeric:tabular-nums}
.canvas-selection-toolbar{position:absolute;display:flex;align-items:center;gap:2px;height:36px;padding:3px 5px;box-sizing:border-box;background:#242730f5;border:1px solid #525365;border-radius:8px;box-shadow:0 6px 20px #0005;pointer-events:auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap}
.canvas-selection-toolbar::-webkit-scrollbar{display:none}
.canvas-selection-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:calc(5px * var(--ui-density, 1));height:calc(28px * var(--ui-density, 1));min-height:calc(28px * var(--ui-density, 1));flex:0 0 auto;margin:0;padding:calc(3px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));border:1px solid transparent;border-radius:calc(5px * var(--ui-density, 1));background:transparent;color:#e4e3eb;font-size:calc(11px * var(--ui-density, 1));line-height:calc(18px * var(--ui-density, 1))}
.canvas-selection-toolbar button::before{content:'';width:calc(14px * var(--ui-density, 1));height:calc(14px * var(--ui-density, 1));flex-shrink:0;background:currentColor;mask:var(--selection-action-icon) center/contain no-repeat}
.canvas-selection-toolbar button:hover{background:#ffffff12;border-color:#777184;color:#fff}
.canvas-selection-toolbar button:first-child{color:#d7c2ff}
.canvas-selection-toolbar button:focus-visible{outline:2px solid #ac8bf4;outline-offset:-2px}
.canvas-selection-toolbar button:disabled{opacity:.38;cursor:default}

.canvas-selection-toolbar.compact button:not(:first-child){font-size:0;gap:0;width:calc(30px * var(--ui-density, 1));padding-inline:calc(6px * var(--ui-density, 1))}

#batchRepairBtn{display:none!important}

/* Horizontal ruler occupies its own fixed row, flush with the information bar. */
.canvas-panel>.canvas-ruler-row{order:2;display:flex;position:relative;flex:0 0 18px;height:18px;min-height:18px;padding:0;margin:0;background:#161d26;overflow:hidden}
.canvas-panel>.canvas-ruler-row>#rulerTop{position:static;display:block;flex:1;min-width:0;width:calc(100% - 22px);height:18px;margin:0;padding:0;border:0}
.canvas-panel>.canvas-ruler-row>#rulerCorner{position:static;display:block;flex:0 0 22px;width:22px;height:18px;margin:0;padding:0;background:#161d26;border-right:1px solid #2c353a}
.canvas-panel>.viewport.infinite,.canvas-panel>.viewport.annotating{margin-bottom:0;padding-bottom:0!important;border-bottom:0}

/* The vertical ruler reaches the top edge of the bottom ruler row. */
.canvas-panel>.viewport>#rulerLeft{display:block;position:absolute;top:0;left:0;width:22px;height:100%!important;max-height:none;margin:0;padding:0;border:0;box-sizing:border-box;background:#161d26;outline:none}

/* Keep the viewport and ruler join opaque, even before a canvas redraw.
   Plain selectors also work in browsers without :focus-visible support. */
.canvas-panel>#viewport{outline:none!important}
#viewport>#cutoutCanvas,#viewport .stage>#overlay{outline:none!important}
.canvas-panel>.canvas-ruler-row{outline:none;background:#161d26}
.canvas-panel>.canvas-ruler-row>#rulerCorner{border:0;outline:none;box-shadow:none}
.canvas-panel>.canvas-ruler-row>#rulerTop{background:#161d26;outline:none}

/* Canvas actions share the second row; the old summary row has no layout. */
.canvas-panel>#projectHeader{display:none!important}
.canvas-panel>#previewControls{display:flex;align-items:center;flex-wrap:wrap}
#previewControls>.canvas-toolstrip{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto;padding:0;min-height:29px;height:auto;border:0;background:transparent;flex:0 0 auto}
#previewControls>.canvas-toolstrip .tools,#previewControls>.canvas-toolstrip .zoom-tools{display:flex;align-items:center;flex-shrink:0}
#previewControls>#elementChatBtn{margin-left:0}
#previewControls>.canvas-toolstrip button{background:transparent;border-color:transparent}
#previewControls>.canvas-toolstrip button.active{color:var(--accent);background:#30484c;border-color:#3e6368}
@media(max-width:850px){#previewControls>.canvas-toolstrip{flex:1 1 100%;flex-wrap:wrap}#previewControls>.canvas-toolstrip .tools button[data-shape]{display:inline-flex}}

/* Shared material canvas: tool rail, large viewport, focused properties. */
#resourceSpriteDialog.material-studio{width:min(1440px,96vw);height:min(900px,94vh);max-height:94vh;padding:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:0;overflow:hidden;background:#171e28;border:1px solid #364354;border-radius:14px;box-shadow:0 24px 90px #0009}
#resourceSpriteDialog.material-studio:not([open]){display:none}
#resourceSpriteDialog.material-studio>header{padding:18px 20px;border-bottom:1px solid #2e3a49;background:#1c2531}
#resourceSpriteDialog.material-studio .sprite-edit-title{font-size:calc(15px * var(--ui-density, 1));letter-spacing:calc(.2px * var(--ui-density, 1))}
#resourceSpriteDialog.material-studio>.sprite-dialog-tools{padding:10px 20px;margin:0;background:#19212c;border-bottom:1px solid #293746}
#resourceSpriteDialog.material-studio>.sprite-edit-body{display:block!important;min-height:0;overflow:hidden;padding:0;margin:0}
#resourceSpriteDialog.material-studio>.sprite-edit-note{display:none}
#resourceSpriteDialog.material-studio>footer{padding:12px 18px;background:#1b2430;border-top:1px solid #324050;display:flex;gap:10px;align-items:center}
#resourceSpriteDialog.material-studio>footer .sprite-edit-status{flex:1;color:#83d6cd}
.material-workspace{height:100%;display:grid;grid-template-columns:76px minmax(0,1fr) 310px;min-height:0}
.material-tools{padding:14px 8px;display:flex;flex-direction:column;gap:8px;border-right:1px solid #303d4b;background:#19222d}
.material-section-label{font-size:calc(10px * var(--ui-density, 1));text-align:center;letter-spacing:calc(2px * var(--ui-density, 1));color:#74879b;margin-bottom:4px}
.material-tools button{min-height:calc(48px * var(--ui-density, 1));padding:calc(6px * var(--ui-density, 1)) calc(3px * var(--ui-density, 1));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(3px * var(--ui-density, 1));font-size:calc(12px * var(--ui-density, 1));background:transparent;border:1px solid transparent;border-radius:calc(8px * var(--ui-density, 1));color:#aabacd}
.material-tools button:hover{background:#253343;border-color:#3c5268}.material-tools button.active{background:#1d4949;border-color:#42c6b8;color:#a1fff0;box-shadow:inset 3px 0 #49d9c6}
.material-canvas{min-width:0;min-height:0;position:relative;padding:16px;background:#101720;display:flex}
.material-canvas .board-crop-viewport{width:100%;height:100%!important;max-height:none!important;min-height:0!important;border:1px solid #303e4e;border-radius:10px}
.material-properties{min-height:0;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px;border-left:1px solid #303d4b;background:#19222d}
#resourceSpriteDialog.material-studio .board-crop-settings{display:flex!important;flex-direction:column;align-items:stretch;gap:12px;background:transparent;border:0;padding:0;margin:0}
#resourceSpriteDialog.material-studio .board-crop-group,.material-card{padding:13px;background:#202b38;border:1px solid #344355;border-radius:10px;min-width:0}
#resourceSpriteDialog.material-studio .board-crop-group-title,.material-card h3{color:#dce8f4;font-size:calc(12px * var(--ui-density, 1));font-weight:600;letter-spacing:0;margin:0 0 10px;display:block}
#resourceSpriteDialog.material-studio .board-nine-slice-controls{display:flex!important;flex-wrap:wrap!important;gap:9px}
#resourceSpriteDialog.material-studio .board-crop-fields{flex-wrap:wrap!important;gap:8px;display:flex}
#resourceSpriteDialog.material-studio .board-crop-fields label{width:calc(50% - 4px)}
#resourceSpriteDialog.material-studio .board-crop-fields input{width:100%!important;height:calc(30px * var(--ui-density, 1))}
#resourceSpriteDialog.material-studio .board-nine-slice-controls .board-crop-fields{width:100%}
#resourceSpriteDialog.material-studio .board-slice-sync{display:flex;flex-wrap:wrap;gap:6px}
.material-card{display:flex;flex-direction:column;gap:9px;font-size:calc(12px * var(--ui-density, 1))}
.material-card h3 small{float:right;font-size:calc(10px * var(--ui-density, 1));color:#7ee1c4;font-weight:400}.material-card p{font-size:calc(11px * var(--ui-density, 1));color:#8fa3b8;line-height:1.6;margin:0}
.material-card label{display:flex;flex-direction:column;gap:5px;font-size:calc(11px * var(--ui-density, 1));color:#9db0c5}.material-card input,.material-card textarea,.material-card select{box-sizing:border-box;width:100%;min-height:calc(32px * var(--ui-density, 1));background:#121b25;border:1px solid #3b4c60;border-radius:calc(6px * var(--ui-density, 1));color:#e1eaf5;padding:calc(7px * var(--ui-density, 1))}
.material-card textarea{min-height:calc(88px * var(--ui-density, 1));resize:vertical}.material-card #confirmDirectEdit{width:100%;background:#37cdbd;color:#092b29;border:1px solid #69e0d2;font-weight:600;min-height:36px}
.material-card #eraseDirectSelection{border-color:#b77b53;background:#41302b;color:#ffd2ad;min-height:32px}
.material-properties details summary{font-size:calc(12px * var(--ui-density, 1));color:#a9bfd4;cursor:pointer}
@media(max-width:1000px){.material-workspace{grid-template-columns:64px minmax(0,1fr) 260px}.material-properties{padding:9px}.material-canvas{padding:10px}}

/* Keep parameters relevant to the active canvas tool visible without scrolling. */
#resourceSpriteDialog.material-studio:not(.repair-mode) .material-card:not(details){display:none}
#resourceSpriteDialog.material-studio.repair-mode .board-crop-settings,#resourceSpriteDialog.material-studio.repair-mode .material-properties>details{display:none!important}
#resourceSpriteDialog.material-studio.repair-mode .material-properties{gap:10px}
#resourceSpriteDialog.material-studio.repair-mode .material-card{gap:7px;padding:12px}
#resourceSpriteDialog.material-studio.repair-mode .material-card textarea{min-height:calc(72px * var(--ui-density, 1))}

#resourceSpriteDialog.material-studio.repair-mode .material-selection{display:grid;grid-template-columns:1fr 1fr;align-items:start}
#resourceSpriteDialog.material-studio .material-selection h3,#resourceSpriteDialog.material-studio .material-selection #directEditStatus{grid-column:1/-1}
#resourceSpriteDialog.material-studio .material-card h3{margin:0 0 3px}
#resourceSpriteDialog.material-studio .material-selection #directEditStatus:empty{display:none}
#resourceSpriteDialog.material-studio .material-card .field{margin:0}
#resourceSpriteDialog.material-studio .material-selection button{padding:calc(6px * var(--ui-density, 1)) calc(4px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));min-height:calc(32px * var(--ui-density, 1))}

/* Compact, consistent material tools with solid outline icons. */
#resourceSpriteDialog .material-tools{padding:16px 9px;gap:10px}
#resourceSpriteDialog .material-tools button{min-height:calc(62px * var(--ui-density, 1));gap:calc(7px * var(--ui-density, 1));transition:background .15s,border-color .15s,color .15s}
#resourceSpriteDialog .material-tools button svg{width:calc(20px * var(--ui-density, 1));height:calc(20px * var(--ui-density, 1));fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
#resourceSpriteDialog .material-tools button:focus-visible{outline:2px solid #7ce3d4;outline-offset:3px}
#resourceSpriteDialog .material-tools button.active{background:linear-gradient(135deg,#214747,#183638);border-color:#50c6b8;color:#bcfff5;box-shadow:inset 3px 0 #6be1ce,0 3px 10px #0002}
#resourceSpriteDialog .material-card,#resourceSpriteDialog .board-crop-group{box-shadow:0 2px 8px #0001}
#resourceSpriteDialog .material-properties{scrollbar-width:thin;scrollbar-color:#3e5063 transparent}
.material-selection-modes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.material-selection-options{grid-column:1/-1;display:flex;flex-direction:column;gap:7px}
.material-history{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.material-background-control{margin-left:auto;display:flex;align-items:center;gap:7px;color:#9db0c5;font-size:calc(11px * var(--ui-density, 1));white-space:nowrap}
.material-background-control select{width:auto;min-width:calc(78px * var(--ui-density, 1));padding:calc(5px * var(--ui-density, 1));background:#15202c;color:#dce8f4;border:1px solid #405065;border-radius:calc(5px * var(--ui-density, 1))}
#resourceSpriteDialog .board-crop-viewport[data-material-background="black"]{background:#000!important}
#resourceSpriteDialog .board-crop-viewport[data-material-background="white"]{background:#fff!important}
#resourceSpriteDialog .board-crop-viewport[data-material-background="checker"]{background:var(--checker)!important}
#resourceSpriteDialog .material-mirror button{width:100%;color:#b5f9e7;border-color:#4c8e80;background:#244d46;touch-action:none}
#resourceSpriteDialog .material-mirror button:active{background:#367467}
#resourceSpriteDialog .material-selection-modes button{display:flex;flex-direction:column;align-items:center;gap:calc(5px * var(--ui-density, 1));padding:calc(8px * var(--ui-density, 1)) calc(2px * var(--ui-density, 1));min-height:calc(56px * var(--ui-density, 1));background:#17222e;border:1px solid #3b4c60;border-radius:calc(6px * var(--ui-density, 1));color:#aabacd}
#resourceSpriteDialog .material-selection-modes button.active{background:#204743;border-color:#50c6b8;color:#bcfff5}
.material-selection-modes svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.material-fill{grid-column:1/-1;display:flex;flex-direction:column;gap:9px}
.material-fill [hidden]{display:none!important}
.material-color-host{display:flex;flex-direction:column;gap:7px;min-width:0}
.color-label{font-size:calc(11px * var(--ui-density, 1));color:#9db0c5}
#resourceSpriteDialog .color-swatch{display:flex;align-items:center;gap:8px;background:#131c27;border:1px solid #3b4c60;border-radius:6px;padding:7px 9px;font-variant-numeric:tabular-nums}
.color-swatch i{width:30px;height:22px;border:1px solid #738497;border-radius:3px;box-shadow:0 0 0 1px #0004}.color-swatch small{margin-left:auto;color:#91a6bc;font-size:calc(10px * var(--ui-density, 1))}
.unity-color-panel{padding:10px;background:#17212c;border:1px solid #405065;border-radius:8px;display:flex;flex-direction:column;gap:10px}
.color-sv{height:140px;position:relative;touch-action:none;border-radius:3px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);cursor:crosshair}
.color-sv i{position:absolute;width:10px;height:10px;box-sizing:border-box;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;transform:translate(-50%,-50%);pointer-events:none}
.color-sv:focus-visible{outline:2px solid #7ce3d4;outline-offset:2px}
.unity-color-panel input[type=range]{padding:0;min-height:calc(16px * var(--ui-density, 1));height:calc(16px * var(--ui-density, 1));accent-color:#75dbce}
.color-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}
.unity-color-panel input[type=range]{appearance:none;border:0;border-radius:calc(3px * var(--ui-density, 1));background-color:#253545}
.unity-color-panel input[type=range]::-webkit-slider-thumb{appearance:none;width:calc(12px * var(--ui-density, 1));height:calc(18px * var(--ui-density, 1));border:2px solid #efffff;border-radius:calc(3px * var(--ui-density, 1));background:#536778;box-shadow:0 1px 3px #0009;cursor:ew-resize}
.unity-color-panel input[type=range]::-moz-range-thumb{width:calc(9px * var(--ui-density, 1));height:calc(15px * var(--ui-density, 1));border:2px solid #efffff;border-radius:calc(3px * var(--ui-density, 1));background:#536778}
.color-rgba{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.color-rgba input{padding:calc(5px * var(--ui-density, 1))!important;font-size:calc(11px * var(--ui-density, 1))}
.material-mirror{padding:10px;border:1px solid #405065;border-radius:6px;background:#17212c;display:flex;flex-direction:column;gap:8px}
.material-mirror-map{display:grid;grid-template-columns:1fr 24px 1fr;align-items:stretch;text-align:center;min-height:62px}
.material-mirror-map span{display:grid;place-items:center;font-size:calc(11px * var(--ui-density, 1));border-radius:4px;background:#24584f;color:#b9ffe5}
.material-mirror-map span:last-child{background:#28425f;color:#c3e1ff}.material-mirror-map b{display:grid;place-items:center;border-left:1px dashed #8ca2b9;color:#b4e9df;font-size:calc(20px * var(--ui-density, 1))}
.material-mirror.vertical .material-mirror-map{grid-template-columns:1fr;grid-template-rows:38px 24px 38px}
.material-mirror.vertical b{border-left:0;border-top:1px dashed #8ca2b9}
.material-mirror-map span.is-source{background:#24584f;color:#b9ffe5}.material-mirror-map span.is-target{background:#28425f;color:#c3e1ff}
.material-mirror .mirror-live-status{color:#a3eddb}
#resourceDialog #editResourceSpriteBtn{color:#aff6e9;background:#233e43;border-color:#49766f;font-weight:600}
#resourceDialog .dialog-actions{gap:8px}

/* 拆图进度：独立状态层级与全宽原生进度条。 */
.inspector-removed-controls{display:none!important}
.inspector-section>summary .remove-component{margin-left:auto;padding:2px 7px;min-height:22px;height:auto;font-size:11px;color:#9babbc;background:transparent;border:0}
.inspector-section>summary .remove-component:hover{color:#ffb8b8;background:#a33a3a25}
.add-component{display:grid;gap:9px;padding:14px 0;border-top:1px solid #ffffff15}
.add-component .tip{margin:0;line-height:1.6}
.add-component select,.add-component>button{width:100%}
.inspector-identity{display:grid;gap:8px;margin:12px 0}
.inspector-identity>.field,.inspector-identity>.tip{margin:0}
.image-fill-section{margin:12px 0 0;border:1px solid #303e4d;border-radius:6px;overflow:hidden}
.image-fill-section>summary{padding:10px 12px}
.image-fill-section>.inspector-section-body{padding:10px 12px}
.inspector-section[hidden]{display:none!important}
dialog.selection-mode-dialog{box-sizing:border-box;width:420px;max-width:calc(100vw - 32px);padding:24px;border:1px solid #3b4b5d;border-radius:12px;background:#202b39;color:var(--text,#e8edf5);box-shadow:0 24px 80px #0009}
.selection-mode-dialog::backdrop{background:#080f1baa}
.selection-mode-dialog h2{margin:0 0 10px;font-size:18px}
.selection-mode-dialog p{margin:0 0 18px;color:#a4b3c4;line-height:1.6}
.selection-mode-dialog .selection-mode-choice{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;height:auto;margin:0 0 12px;padding:14px;text-align:left;white-space:normal}
.selection-mode-choice span{font-size:12px;color:#a4b3c4}
dialog.split-progress-dialog{box-sizing:border-box;width:460px;max-width:calc(100vw - 32px);padding:0;overflow:hidden;border:1px solid #3b4b5d;border-radius:16px;background:linear-gradient(145deg,#222d3b,#19222e 70%);color:var(--text,#e8edf5);box-shadow:0 24px 80px #0009,0 1px 0 #ffffff0a inset}
dialog.split-progress-dialog::backdrop{background:#080f1baa;backdrop-filter:blur(5px)}
dialog.split-progress-dialog>.split-progress-heading{display:flex;align-items:center;gap:14px;padding:26px 56px 22px 26px;margin:0;border-bottom:1px solid #ffffff0b;background:transparent}
.split-progress-dialog .split-progress-icon{display:grid;place-items:center;flex:0 0 46px;height:46px;border:1px solid #59d9c633;border-radius:13px;background:#59d9c610;color:var(--accent,#59d9c6)}
.split-progress-icon svg{width:26px;height:26px}
/* 拆图是最典型的耗时操作：图标外圈持续转，配下方阶段进度条。 */
.split-progress-dialog .split-progress-icon{position:relative}
.split-progress-dialog .split-progress-icon:after{content:"";position:absolute;inset:-5px;border:2px solid transparent;border-top-color:#59d9c6;border-radius:17px;animation:split-progress-orbit 1.1s linear infinite;pointer-events:none}
@keyframes split-progress-orbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.split-progress-dialog .split-progress-icon:after{animation-duration:3.2s;animation-timing-function:steps(8,end)}}
dialog.split-progress-dialog .split-progress-heading h2{margin:0;font-size:calc(19px * var(--ui-density, 1));line-height:1.5;font-weight:650;letter-spacing:calc(.3px * var(--ui-density, 1))}
dialog.split-progress-dialog .split-progress-heading p{margin:4px 0 0;color:#97a8bc;font-size:calc(12px * var(--ui-density, 1));line-height:1.6}
dialog.split-progress-dialog>.dialog-body{padding:0}
.split-progress-dialog .split-progress-content{padding:24px 26px 25px}
.split-progress-summary{display:flex;align-items:center;justify-content:space-between;gap:calc(16px * var(--ui-density, 1));margin-bottom:14px;font-size:calc(13px * var(--ui-density, 1));line-height:1.6}
.split-progress-stage{color:#d7e3ee;min-width:0;overflow-wrap:anywhere}
.split-progress-count{flex-shrink:0;color:#aabccc;font-size:calc(12px * var(--ui-density, 1));font-variant-numeric:tabular-nums}
.split-progress-dialog progress{display:block;appearance:none;-webkit-appearance:none;box-sizing:border-box;width:100%;height:7px;overflow:hidden;border:0;border-radius:10px;background:#101923;accent-color:var(--accent,#59d9c6)}
.split-progress-dialog progress::-webkit-progress-bar{background:#101923;border-radius:10px}
.split-progress-dialog progress::-webkit-progress-value{border-radius:10px;background:linear-gradient(90deg,#329eb2,#65e3cb);transition:width .35s ease}
.split-progress-dialog progress::-moz-progress-bar{border-radius:10px;background:linear-gradient(90deg,#329eb2,#65e3cb)}
.split-progress-dialog progress:indeterminate{background:linear-gradient(90deg,#101923 15%,#459f9e 50%,#101923 85%);background-size:200% 100%;animation:split-progress-wait 2s linear infinite}
.split-progress-dialog progress:indeterminate::-webkit-progress-bar{background:transparent}
.split-progress-meta{display:flex;justify-content:space-between;margin-top:11px;color:#8ca0b5;font-size:calc(11px * var(--ui-density, 1));font-variant-numeric:tabular-nums}
.split-progress-meta i{display:inline-block;width:5px;height:5px;margin:0 7px 2px 0;border-radius:50%;background:var(--accent,#59d9c6);box-shadow:0 0 8px #59d9c644}
dialog.split-progress-dialog .split-progress-note{margin:23px 0 0;padding-top:18px;border-top:1px solid #ffffff0b;color:#a4b3c4;font-size:calc(12px * var(--ui-density, 1));line-height:1.9}
.split-progress-note span{color:#7f92a8}
@keyframes split-progress-wait{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.split-progress-dialog progress:indeterminate{animation:none}.split-progress-dialog progress::-webkit-progress-value{transition:none}}

/* Compact recognition controls, scoped to this dialog. */
.recognition-regions-dialog .region-tools{display:flex;flex-direction:column;gap:7px;margin:0 0 12px;padding:10px 12px;background:var(--field,#161d26);border:1px solid var(--line,#303b48);border-radius:8px}
.recognition-regions-dialog .region-tools-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0}
.recognition-regions-dialog .region-tools button{font-size:calc(12px * var(--ui-density, 1));line-height:calc(18px * var(--ui-density, 1));min-height:calc(28px * var(--ui-density, 1));padding:calc(4px * var(--ui-density, 1)) calc(9px * var(--ui-density, 1));border-radius:calc(5px * var(--ui-density, 1));margin:0;width:auto}
.recognition-regions-dialog .region-tools-caption{font-size:calc(11px * var(--ui-density, 1));color:var(--muted);margin-right:3px}
.recognition-regions-dialog .region-number{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;margin:0;font-size:calc(11px * var(--ui-density, 1));color:var(--muted);white-space:nowrap}
.recognition-regions-dialog .region-number input{display:inline-block;box-sizing:border-box;width:calc(48px * var(--ui-density, 1));min-width:0;height:calc(28px * var(--ui-density, 1));padding:calc(3px * var(--ui-density, 1)) calc(5px * var(--ui-density, 1));font-size:calc(12px * var(--ui-density, 1));line-height:calc(20px * var(--ui-density, 1));margin:0}
.recognition-regions-dialog .region-position input{width:calc(66px * var(--ui-density, 1))}
.recognition-regions-dialog .region-tools-divider{width:1px;height:18px;background:var(--line);margin:0 4px;flex:0 0 auto}
.recognition-regions-dialog .region-mode-switch{display:inline-flex;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.recognition-regions-dialog .region-mode-switch button{border:0;background:transparent;padding:calc(2px * var(--ui-density, 1)) calc(9px * var(--ui-density, 1));min-height:calc(24px * var(--ui-density, 1));color:var(--muted)}
.recognition-regions-dialog .region-mode-switch button.active{background:#214342;color:#9cf2e7}
.recognition-regions-dialog .region-mode-switch [data-exclude].active{background:#4d4022;color:#ffda78}
.recognition-regions-dialog .region-inline-hint{font-size:calc(11px * var(--ui-density, 1));color:var(--muted);margin-left:3px;line-height:1.5}
.recognition-regions-dialog .region-auto-settings{display:flex;align-items:center;gap:calc(8px * var(--ui-density, 1));flex-wrap:wrap;padding:calc(6px * var(--ui-density, 1));border:1px solid var(--line);border-radius:7px;background:rgba(0,0,0,.14)}
.recognition-regions-dialog .region-field{display:inline-flex;align-items:center;gap:calc(5px * var(--ui-density, 1));margin:0;font-size:calc(11px * var(--ui-density, 1));color:var(--muted);white-space:nowrap;cursor:pointer}
.recognition-regions-dialog .region-field select{box-sizing:border-box;width:auto;min-width:calc(96px * var(--ui-density, 1));height:calc(28px * var(--ui-density, 1));padding:0 calc(24px * var(--ui-density, 1)) 0 calc(8px * var(--ui-density, 1));border:1px solid var(--line);border-radius:calc(6px * var(--ui-density, 1));background:var(--panel) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238fa3b8' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right calc(8px * var(--ui-density, 1)) center/9px 6px;-webkit-appearance:none;appearance:none;color:var(--text,#e6edf5);font-size:calc(12px * var(--ui-density, 1));line-height:calc(26px * var(--ui-density, 1));margin:0;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.recognition-regions-dialog .region-field select:hover{border-color:#4a5a6d}
.recognition-regions-dialog .region-field select:focus-visible,.recognition-regions-dialog .region-field input:focus-visible{outline:0;border-color:#54ffe1;box-shadow:0 0 0 2px rgba(84,255,225,.18)}
.recognition-regions-dialog .region-count-field input{box-sizing:border-box;width:calc(46px * var(--ui-density, 1));height:calc(28px * var(--ui-density, 1));padding:0 2px;border:1px solid var(--line);border-radius:calc(6px * var(--ui-density, 1));background:var(--panel);color:var(--text,#e6edf5);font-size:calc(12px * var(--ui-density, 1));text-align:center;margin:0;-moz-appearance:textfield;appearance:textfield;transition:border-color .15s,box-shadow .15s}
.recognition-regions-dialog .region-count-field input::-webkit-outer-spin-button,.recognition-regions-dialog .region-count-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.recognition-regions-dialog .region-count-field input:disabled{opacity:.4;cursor:not-allowed}
.recognition-regions-dialog .region-tools .region-auto-button,.recognition-regions-dialog .region-tools .region-run-button{min-height:calc(28px * var(--ui-density, 1));height:calc(28px * var(--ui-density, 1));padding:0 calc(12px * var(--ui-density, 1));border-radius:calc(6px * var(--ui-density, 1))}
.recognition-regions-dialog .region-tools .region-auto-button{border:1px solid #3d5a70;background:#1b2733;color:#cfe4f4}
.recognition-regions-dialog .region-tools .region-auto-button:hover:not(:disabled){background:#22313f;border-color:#54748c}
.recognition-regions-dialog .region-tools .region-run-button{border:1px solid #2f9c8d;background:linear-gradient(180deg,#2f9c8d,#248174);color:#f2fffb;font-weight:600}
.recognition-regions-dialog .region-tools .region-run-button:hover{background:linear-gradient(180deg,#37b1a0,#2a8f81)}
.recognition-regions-dialog .region-tools .region-run-button:disabled{opacity:.5;cursor:not-allowed}
.recognition-regions-dialog .region-tools-note{margin:0;padding-top:5px;border-top:1px solid var(--line);font-size:calc(11px * var(--ui-density, 1));line-height:1.5;color:var(--muted)}
.recognition-regions-dialog .region-canvas{overflow:hidden;border:1px solid var(--line);border-radius:6px}
.recognition-regions-dialog .region-status{margin:8px 0;font-size:calc(11px * var(--ui-density, 1));color:var(--muted);line-height:1.5}
.recognition-regions-dialog .region-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
@media(max-width:700px){.recognition-regions-dialog .region-tools{padding:8px}.recognition-regions-dialog .region-inline-hint{flex-basis:100%;margin-left:0}}

.recognition-regions-dialog .region-canvas{display:block!important;max-height:48.6vh;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;overflow-anchor:none}
.recognition-regions-dialog .region-canvas canvas{margin:0 auto}
.recognition-regions-dialog [data-line-menu] button[hidden]{display:none}

.recognition-regions-dialog .region-context-menu{position:fixed;z-index:20;min-width:180px;padding:5px;background:#232d3a;border:1px solid #46566b;border-radius:8px;box-shadow:0 10px 30px #0008}
.recognition-regions-dialog .region-context-menu[hidden]{display:none}
.recognition-regions-dialog .region-context-menu button{display:flex;align-items:center;gap:calc(10px * var(--ui-density, 1));width:100%;margin:0;padding:calc(8px * var(--ui-density, 1)) calc(12px * var(--ui-density, 1));border:0;border-radius:calc(4px * var(--ui-density, 1));text-align:left;background:transparent;font-size:calc(12px * var(--ui-density, 1));color:var(--text);line-height:calc(18px * var(--ui-density, 1))}
.recognition-regions-dialog .region-context-menu button:hover,.recognition-regions-dialog .region-context-menu button:focus-visible{background:#35465a;color:#dcfff9}
.recognition-regions-dialog .region-context-menu button span{width:calc(14px * var(--ui-density, 1));text-align:center;color:#99b8ca}
.recognition-regions-dialog .region-context-menu [data-region-toggle]{border-top:1px solid #3b495a;border-radius:0;margin-top:4px;color:#ffda78}

/* Scrollable gutters keep the image point under the mouse fixed, including at fit size. */
.recognition-regions-dialog .region-canvas{height:48.6vh;max-height:48.6vh;scrollbar-gutter:auto;scroll-behavior:auto}
.recognition-regions-dialog .region-canvas-space{position:relative;min-width:100%;min-height:100%}

.chat-region-progress{display:grid;gap:7px;margin:10px 0}.chat-region-row{display:grid;grid-template-columns:60px 60px minmax(80px,1fr);gap:5px 8px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:6px}.chat-region-row small{grid-column:1/-1;color:var(--muted);overflow-wrap:anywhere}.chat-region-row progress{width:100%;height:6px;margin:0}

/* The ruler has its own bottom row and never overlays the image. */
.canvas-panel>.viewport{margin-bottom:0;padding-bottom:0!important;border-bottom:0}
.canvas-panel>.canvas-ruler-row{position:relative;inset:auto;display:flex;flex:0 0 18px;height:18px;min-height:18px;margin:0;padding:0;order:2;background:#161d26;overflow:hidden;border:0;box-shadow:none;pointer-events:none}
.canvas-panel>.viewport>#rulerLeft{height:100%!important;bottom:0}
.canvas-panel>.viewport>#cutoutCanvas{bottom:0;height:100%}

.viewport.infinite>.zoom-scroll-space{display:none!important;margin:0!important;padding:0!important}

#retiredPreviewControls{display:none!important}
#previewMore .preview-extra{width:240px;padding:10px;gap:8px}
#previewMore .compact-extra-actions{margin:0;padding:0;border:0}

.header #projectBar .project-name-tag{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(13px * var(--ui-density, 1));font-weight:500;line-height:calc(20px * var(--ui-density, 1));padding:5px 12px;border:1px solid #344b54;border-radius:8px;background:#20313a;color:#d7e9e7;cursor:default}
.header #projectSaveState{display:inline-flex;align-items:center;flex-shrink:0}

.no-open-project .header #projectSaveState:before{content:"—";background:#34404e;color:#aebed1}
.no-open-project .workspace{opacity:.55}

/* Project management is the entry page, before the editor is drawn. */
#projectManagementMain{display:none}
.project-management-active #projectManagementMain{display:block;max-width:1200px;margin:24px auto;padding:0 24px}
.project-management-active .workspace,.project-management-active .review-log-console,.project-management-active .steps{display:none}
.project-management-active .header-actions{display:none}
#projectManagementMain #projectsPanelDialog[open]{display:block;position:static;inset:auto;width:100%;max-width:none;max-height:none;margin:0;box-sizing:border-box;box-shadow:none}
.project-entry-pending .workspace{display:none}

.chat-task-response{white-space:pre-wrap;overflow-wrap:anywhere;margin:10px 0;line-height:1.6}

.viewport.is-image-drop{outline:2px solid var(--accent);outline-offset:-3px;}

.cached-layer-preview #viewport,.cached-layer-preview .toolbar{pointer-events:none;}

.sprite-slice-menu{position:relative}.sprite-slice-menu[hidden]{display:none!important}.sprite-slice-menu>summary{cursor:pointer;padding:calc(5px * var(--ui-density, 1)) calc(12px * var(--ui-density, 1));border:1px solid var(--line);border-radius:calc(5px * var(--ui-density, 1));list-style:none}
.sprite-slice-settings{position:absolute;z-index:20;top:100%;left:0;width:300px;max-height:65vh;overflow:auto;padding:12px;background:#202a34;border:1px solid #52616e;border-radius:6px;box-shadow:0 8px 24px #0008}
.sprite-slice-settings label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0;font-size:calc(12px * var(--ui-density, 1))}.sprite-slice-settings select,.sprite-slice-settings input{width:calc(185px * var(--ui-density, 1));min-width:0}.sprite-slice-settings p{font-size:calc(11px * var(--ui-density, 1));color:#aebbc6;line-height:1.6}.sprite-slice-settings [hidden]{display:none!important}.sprite-slice-settings>button{width:100%}

/* Sprite editor: allocate the window to the image, keep properties in a compact strip. */
.sprite-edit-dialog:not(.material-studio){width:min(1600px,97vw);max-width:1600px;height:min(86.4dvh,990px);max-height:86.4dvh;padding:10px 12px}
.sprite-edit-dialog:not(.material-studio) .sprite-edit-body{overflow:hidden}
.sprite-edit-dialog:not(.material-studio) .sprite-edit-body>.board-crop-editor{overflow:hidden;gap:5px}
.sprite-edit-dialog:not(.material-studio) .sprite-edit-body .board-crop-viewport{flex:1 1 0;min-height:220px;max-height:none;padding:5px}
.sprite-properties-strip{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;flex:0 0 auto;max-height:24dvh;overflow:auto;padding:3px 2px}
.sprite-edit-dialog .sprite-properties-strip>.board-crop-settings{flex:1 1 100%;flex-wrap:wrap!important;gap:8px;padding:6px 9px}
.sprite-edit-dialog .sprite-properties-strip .board-crop-group{flex:0 1 auto}
.sprite-edit-dialog .sprite-properties-strip .board-nine-slice-controls{flex-wrap:wrap!important;gap:5px}
.sprite-edit-dialog .sprite-properties-strip .board-crop-fields{display:flex;flex-wrap:wrap;gap:5px;margin:0;align-items:flex-end}
.sprite-edit-dialog .sprite-properties-strip .board-crop-fields label{font-size:calc(10px * var(--ui-density, 1));gap:2px}
.sprite-edit-dialog .sprite-properties-strip .board-crop-fields input{height:calc(25px * var(--ui-density, 1));width:calc(66px * var(--ui-density, 1));padding:calc(2px * var(--ui-density, 1)) calc(5px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1))}
.sprite-edit-dialog .sprite-properties-strip .board-crop-fields select{height:calc(25px * var(--ui-density, 1));max-width:calc(180px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));padding:calc(2px * var(--ui-density, 1)) calc(5px * var(--ui-density, 1))}
.sprite-edit-dialog .sprite-properties-strip button{min-height:calc(25px * var(--ui-density, 1));padding:calc(3px * var(--ui-density, 1)) calc(8px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1))}
.sprite-properties-strip>p{margin:0;font-size:calc(10px * var(--ui-density, 1))}.sprite-property-help{font-size:calc(10px * var(--ui-density, 1));color:var(--muted)}.sprite-property-help>summary{cursor:pointer}.sprite-property-help>p{max-width:650px;line-height:1.5;margin:4px 0}
.sprite-edit-dialog:not(.material-studio)>.sprite-edit-note{margin:3px 0;font-size:calc(10px * var(--ui-density, 1));line-height:1.3}
.sprite-edit-dialog:not(.material-studio)>footer{margin-top:5px}
@media(max-height:650px){.sprite-properties-strip{max-height:22dvh}.sprite-edit-dialog:not(.material-studio) .sprite-edit-body .board-crop-viewport{min-height:160px}}
@media(max-width:760px){.sprite-edit-dialog .sprite-properties-strip>.board-crop-settings{gap:6px}.sprite-edit-dialog .sprite-properties-strip .board-crop-group+.board-crop-group{border-left:0;padding-left:0}.sprite-properties-strip{max-height:28dvh}}

/* Keep rectangle, nine-slice and recognition properties in one horizontal toolbar. */
.sprite-edit-dialog .sprite-properties-strip{flex-wrap:nowrap;align-items:center;max-height:none;overflow-x:auto;overflow-y:auto;gap:8px;padding:4px 2px}
.sprite-edit-dialog .sprite-properties-strip>*{flex:0 0 auto}
.sprite-edit-dialog .sprite-properties-strip>.board-crop-settings{flex:0 0 auto;flex-wrap:nowrap!important;align-items:center;padding:5px 7px;gap:8px}
.sprite-edit-dialog .sprite-properties-strip .board-crop-group{flex:0 0 auto;flex-direction:row;align-items:center;gap:6px}
.sprite-edit-dialog .sprite-properties-strip .board-crop-group-title{white-space:nowrap;letter-spacing:0}
.sprite-edit-dialog .sprite-properties-strip .board-crop-fields,.sprite-edit-dialog .sprite-properties-strip .board-nine-slice-controls,.sprite-edit-dialog .sprite-properties-strip .board-slice-sync{flex-wrap:nowrap!important;align-items:center;white-space:nowrap}
.sprite-edit-dialog .sprite-properties-strip .board-crop-fields label{display:flex;flex-direction:row;align-items:center;white-space:nowrap;gap:4px}
.sprite-edit-dialog .sprite-properties-strip .board-crop-fields input{width:calc(52px * var(--ui-density, 1));flex:0 0 52px;height:calc(25px * var(--ui-density, 1))}
.sprite-edit-dialog .sprite-properties-strip .board-crop-fields select{width:calc(155px * var(--ui-density, 1));max-width:calc(155px * var(--ui-density, 1))}
.sprite-edit-dialog .sprite-properties-strip>p,.sprite-edit-dialog .sprite-properties-strip>button,.sprite-edit-dialog .sprite-property-help>summary{white-space:nowrap}

/* Compact hierarchy with continuous ancestor rails and parent-child elbows. */
#elementList{--ui-density:1}
#elementList .layer{height:calc(28px * var(--ui-density, 1));min-height:calc(28px * var(--ui-density, 1));padding-top:calc(2px * var(--ui-density, 1));padding-bottom:calc(2px * var(--ui-density, 1));gap:calc(4px * var(--ui-density, 1))}
#elementList .layer strong,#elementList .layer.selected strong{font-size:calc(11px * var(--ui-density, 1));line-height:calc(20px * var(--ui-density, 1))}
#elementList .layer small,#elementList .layer.selected small{display:none}
#elementList .layer-eye,#elementList .layer-lock,#elementList .layer-more,#elementList .tree-caret{height:calc(22px * var(--ui-density, 1));min-height:calc(22px * var(--ui-density, 1));width:calc(18px * var(--ui-density, 1))}
#elementList .tree-caret{width:calc(12px * var(--ui-density, 1))}#elementList .layer-more{width:calc(15px * var(--ui-density, 1))}
#elementList .layer-eye svg,#elementList .layer-lock svg{width:calc(14px * var(--ui-density, 1));height:calc(14px * var(--ui-density, 1))}
#elementList .symbol{width:calc(16px * var(--ui-density, 1));height:calc(20px * var(--ui-density, 1))}#elementList .symbol svg{width:calc(15px * var(--ui-density, 1));height:calc(15px * var(--ui-density, 1))}
#elementList .layer-parent .layer-copy strong{font-weight:600;color:#d4e4f4}
#elementList .layer-child-count{min-width:calc(16px * var(--ui-density, 1));padding:0 calc(3px * var(--ui-density, 1));border-radius:calc(3px * var(--ui-density, 1));background:#91adc51a;font-size:calc(9px * var(--ui-density, 1));color:#a5bed4;line-height:calc(16px * var(--ui-density, 1))}
#elementList .tree-branches{display:flex;align-self:stretch;flex:none;gap:0;margin-right:calc(-4px * var(--ui-density, 1));pointer-events:none;color:#637f92}
#elementList .tree-branch{position:relative;display:block;width:calc(14px * var(--ui-density, 1));flex:0 0 calc(14px * var(--ui-density, 1))}
#elementList .tree-branch::before{content:'';position:absolute;left:calc(6px * var(--ui-density, 1));top:calc(-2px * var(--ui-density, 1));bottom:calc(-2px * var(--ui-density, 1));border-left:1px solid currentColor}
#elementList .tree-branch.is-last::before{display:none}
#elementList .tree-branch.is-joint.is-last::before{display:block;bottom:50%}
#elementList .tree-branch.is-joint::after{content:'';position:absolute;left:calc(6px * var(--ui-density, 1));top:50%;width:calc(14px * var(--ui-density, 1));border-top:1px solid currentColor}
#elementList .tree-branch.is-active,#elementList .layer.selected .tree-branches{color:#72cfc4}
#elementList .cached-layer strong{font-weight:400}
#uiExtractionOptions{margin:12px 0;padding:12px;border:1px solid var(--border,#3b4655);border-radius:6px}
#uiExtractionOptions[hidden]{display:none}
#uiExtractionOptions>label{display:block;margin:8px 0}
#uiExtractionOptions .field input[type=number]{width:100%}
#aiModelDialog{max-height:90vh;overflow-y:auto}
.atlas-preview-pane .image-viewport{height:55vh;max-height:55vh;min-height:150px;padding:0;overscroll-behavior:contain;overflow:auto;position:relative;touch-action:none;overflow-anchor:none}
#spriteZoomViewport.image-viewport{padding:0;position:relative;overscroll-behavior:contain;overflow-anchor:none}
.image-viewport-space{position:relative;min-width:100%;min-height:100%}
.image-viewport .image-viewport-space>img{position:absolute;display:block;margin:0;max-width:none;max-height:none;object-fit:fill;user-select:none}
.atlas-preview-pane .image-viewport .image-viewport-space>img{max-height:none}
.image-viewport.panning{cursor:grabbing}
#atlasZoomLabel{align-self:center;min-width:45px}
@media(max-width:800px){.atlas-preview-pane .image-viewport{height:36vh;max-height:36vh}}

/* 浮动工具条的“AI 工具”下拉：智能框选 / AI 修补 / 提取 UI 元素 / 去除背景 */
.ai-tools-menu{position:fixed;z-index:9000;min-width:calc(132px * var(--ui-density, 1));padding:4px;border:1px solid #33404f;border-radius:8px;background:#161f29;box-shadow:0 12px 30px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px}
.ai-tools-menu button{display:block;width:100%;text-align:left;padding:calc(6px * var(--ui-density, 1)) calc(10px * var(--ui-density, 1));border:0;border-radius:6px;background:transparent;color:#dbe6f2;font-size:calc(12px * var(--ui-density, 1));line-height:calc(18px * var(--ui-density, 1));cursor:pointer}
.ai-tools-menu button:hover,.ai-tools-menu button:focus-visible{background:#22303e;color:#eaf5ff;outline:0}

/* 图片视口检查底色：识别范围 / 去除背景，与素材编辑面板选项一致 */
.recognition-regions-dialog .region-canvas[data-check-background="checker"]{background:var(--checker)}
.recognition-regions-dialog .region-canvas[data-check-background="black"]{background:#000}
.recognition-regions-dialog .region-canvas[data-check-background="white"]{background:#fff}
.recognition-regions-dialog .material-background-control{margin-left:auto}

/* 检查底色下拉：高度/宽度/字号各缩 10%，并与同排按钮垂直居中 */
.recognition-regions-dialog .region-auto-settings [data-check-bg],
.recognition-regions-dialog .material-background-control [data-check-bg]{
 box-sizing:border-box;align-self:center;height:calc(25px * var(--ui-density, 1));min-width:calc(86px * var(--ui-density, 1));
 padding:0 calc(21px * var(--ui-density, 1)) 0 calc(7px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));
 line-height:calc(23px * var(--ui-density, 1));background-position:right calc(7px * var(--ui-density, 1)) center;
}
.background-removal-dialog .material-background-control{display:inline-flex;align-items:center;align-self:center;gap:calc(5px * var(--ui-density, 1));margin-left:auto;height:100%}
.background-removal-dialog .material-background-control [data-check-bg]{
 box-sizing:border-box;align-self:center;height:calc(25px * var(--ui-density, 1));min-width:calc(70px * var(--ui-density, 1));
 padding:0 calc(20px * var(--ui-density, 1)) 0 calc(6px * var(--ui-density, 1));font-size:calc(10px * var(--ui-density, 1));
 background:#15202c url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238fa3b8' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right calc(7px * var(--ui-density, 1)) center/8px 5px;
 -webkit-appearance:none;appearance:none;border:1px solid #405065;border-radius:calc(5px * var(--ui-density, 1));color:#dce8f4;cursor:pointer;
}

/* 检查底色：标签文字与下拉框同一基线、同高居中 */
.recognition-regions-dialog .region-field:has([data-check-bg]),
.background-removal-dialog .material-background-control{
 display:inline-flex;align-items:center;align-self:center;line-height:calc(25px * var(--ui-density, 1));height:calc(25px * var(--ui-density, 1));vertical-align:middle
}
.recognition-regions-dialog .region-field>span,
.background-removal-dialog .material-background-control>span,
.background-removal-dialog .material-background-control{font-size:calc(11px * var(--ui-density, 1))}
.recognition-regions-dialog .region-field [data-check-bg],
.background-removal-dialog .material-background-control [data-check-bg]{vertical-align:middle;margin:0;flex:0 0 auto}

/* 检查底色：全局面板统一（素材编辑 / 识别范围 / 去除背景 / 图集 / 屏幕预览 / 资源详情） */
.material-background-control{display:inline-flex;align-items:center;align-self:center;gap:calc(5px * var(--ui-density, 1));margin:0;line-height:calc(25px * var(--ui-density, 1));height:calc(25px * var(--ui-density, 1));font-size:calc(11px * var(--ui-density, 1));color:#9db0c5;white-space:nowrap;vertical-align:middle}
.material-background-control select{box-sizing:border-box;width:auto;min-width:calc(70px * var(--ui-density, 1));height:calc(25px * var(--ui-density, 1));padding:0 calc(20px * var(--ui-density, 1)) 0 calc(6px * var(--ui-density, 1));border:1px solid #405065;border-radius:calc(5px * var(--ui-density, 1));background:#15202c url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238fa3b8' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right calc(7px * var(--ui-density, 1)) center/8px 5px;color:#dce8f4;font-size:calc(10px * var(--ui-density, 1));line-height:calc(23px * var(--ui-density, 1));margin:0;flex:0 0 auto;vertical-align:middle;-webkit-appearance:none;appearance:none;cursor:pointer}
.material-background-control select:focus-visible{outline:0;border-color:#54ffe1;box-shadow:0 0 0 2px rgba(84,255,225,.18)}
.board-crop-viewport[data-check-background="checker"],.atlas-large-viewport[data-check-background="checker"],.screen-viewport[data-check-background="checker"],.resource-dialog-image[data-check-background="checker"]{background:var(--checker)!important}
.board-crop-viewport[data-check-background="black"],.atlas-large-viewport[data-check-background="black"],.screen-viewport[data-check-background="black"],.resource-dialog-image[data-check-background="black"]{background:#000!important}
.board-crop-viewport[data-check-background="white"],.atlas-large-viewport[data-check-background="white"],.screen-viewport[data-check-background="white"],.resource-dialog-image[data-check-background="white"]{background:#fff!important}
/* Sprite 大图（图集 / 素材编辑的放大查看）也是一个独立看图视口 */
#spriteZoomViewport[data-check-background="checker"]{background:var(--checker)!important}
#spriteZoomViewport[data-check-background="black"]{background:#000!important}
#spriteZoomViewport[data-check-background="white"]{background:#fff!important}
.resource-check-background{margin:0 0 6px}

/* 图集面板：整体高度收 10%，右侧选项收紧并统一视觉 */
#atlasEditDialog{max-height:84.6dvh;padding:22px}
.atlas-workbench{grid-template-columns:minmax(0,1fr) 286px;gap:18px}
.atlas-preview-pane .atlas-large-viewport{max-height:49.5vh}
.atlas-preview-pane .atlas-large-viewport img{max-height:49.5vh}
.atlas-settings-pane{font-size:12px}
.atlas-settings-pane .field{margin-bottom:12px;gap:4px}
.atlas-settings-pane .field>span{font-size:11px;color:#93a9c0;letter-spacing:.02em}
.atlas-settings-pane select{padding:7px 9px;font-size:12px;border-radius:6px;background:#1b2534;border:1px solid #3b4d63;color:#dbe7f3}
.atlas-settings-pane select:focus{border-color:#54ffe1;outline:none;box-shadow:0 0 0 2px #54ffe133}
.atlas-settings-pane textarea{min-height:104px;font-size:12px;line-height:1.75;border-radius:6px;padding:8px 10px;background:#1b2534;border:1px solid #3b4d63;color:#dbe7f3}
.atlas-settings-pane textarea:focus{border-color:#54ffe1;outline:none;box-shadow:0 0 0 2px #54ffe133}
.atlas-settings-pane>.tip{font-size:11px;line-height:1.6;color:#849bb3}
.atlas-settings-pane .dialog-actions{margin-top:12px}
.atlas-sprite-descriptions textarea{min-height:56px;font-size:11px}

/* Inspector section layout; shared field metrics live in property-rows.css. */
.right-panel :is(.coords,.project-grid,.slice-grid){display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0}
.right-panel .layer-project-controls{display:block;margin:4px 0;padding:0}
.right-panel .layer-order-buttons{display:flex;gap:4px;margin-top:4px}
.right-panel :is(.inspector-identity,.add-component){gap:var(--property-spacing);margin:6px 0;padding:0}
.right-panel .add-component{padding-top:6px}
.right-panel #inspector{padding:8px 12px}
.right-panel .inspector-section{margin:6px -12px 0}
.right-panel .inspector-section>summary{min-height:18px;padding:2px 12px;font-size:12px;line-height:18px;gap:6px}
.right-panel .inspector-section>.inspector-section-body{padding:6px 12px}
.right-panel .geometry-section .inspector-section-body>span{display:inline-block;margin-bottom:4px}
.right-panel .inspector-section>summary .remove-component{min-height:18px;height:18px;padding:0 4px;font-size:11px;line-height:16px}
.right-panel .image-fill-section{margin:6px 0 0}
.right-panel .image-fill-section>.inspector-section-body{padding:6px 8px}
.right-panel :is(.tip,.resource-hint,.layer-hint){font-size:10px;line-height:15px;margin:4px 0 6px}
.right-panel .inspector-identity>.tip{margin:0 0 4px}
.right-panel .inspector-identity>label.property-row{margin:0}
.right-panel :is(.layer-order-buttons,.add-component,.resource-properties,.fill-preview-options,.text-section) button{
 min-height:18px;padding:0 5px;font-size:11px;line-height:16px;border-radius:2px;
}
.right-panel .add-component>select{box-sizing:border-box;min-height:18px;height:18px;padding:0 4px;font-size:12px;line-height:16px;border-radius:2px}