.app{display:flex;flex-direction:column;width:100vw;height:100vh;background:var(--color-bg)}.app-header{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--color-bg-elev);border-bottom:1px solid var(--color-border);flex-shrink:0}.app-header h1{font-size:16px;font-weight:600;color:var(--color-text);letter-spacing:.5px}.app-subtitle{color:var(--color-text-muted);font-size:12px}.reset-btn{padding:4px 12px;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:12px}.header-actions{margin-left:auto;display:flex;gap:8px}.reset-btn:hover{background:var(--color-bg-elev-2);color:var(--color-text)}.app-main{display:flex;flex:1;overflow:hidden;min-height:0}.app-sidebar{width:360px;flex-shrink:0;display:flex;flex-direction:column;background:var(--color-bg-elev);border-right:1px solid var(--color-border);overflow:hidden}.tab-bar{display:flex;background:var(--color-bg-elev);border-bottom:1px solid var(--color-border);flex-shrink:0}.tab-btn{flex:1;padding:8px 16px;background:transparent;color:var(--color-text-muted);font-size:13px;border-bottom:2px solid transparent;transition:all .15s}.tab-btn:hover{background:var(--color-bg-elev-2);color:var(--color-text)}.tab-btn.active{color:var(--color-text);border-bottom-color:var(--color-primary);background:var(--color-bg)}.settings-panel{flex:1;overflow-y:auto;padding:12px}.preview-panel{flex:1;overflow:auto;padding:16px;background:var(--color-bg)}@media (max-width: 899px){.app-main{flex-direction:column;gap:12px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.app-main::-webkit-scrollbar{display:none}.app-sidebar{width:100%;border-right:none;overflow:visible;order:2;margin-top:-12px;background:transparent}.preview-panel{order:1;flex:none;min-height:240px;overflow:hidden}.tab-bar{order:2;position:sticky;top:0;z-index:10;border-radius:12px 12px 0 0;border-top:1px solid var(--color-border);background:var(--color-bg-elev);overflow:hidden}.tab-btn{padding:20px 16px 8px}.tab-btn:first-child{border-top-left-radius:12px}.tab-btn:last-child{border-top-right-radius:12px}.settings-panel{order:3;flex:none;min-height:320px;background:var(--color-bg-elev);scrollbar-width:none;-ms-overflow-style:none}.settings-panel::-webkit-scrollbar{display:none}}@media (max-width: 899px){html,body{scrollbar-width:none;-ms-overflow-style:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}}.app-footer{display:flex;align-items:center;gap:8px;padding:6px 16px;background:var(--color-bg-elev);border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:11px;flex-shrink:0}@media (max-width: 899px){.app-footer{display:none}}.tab-content{display:flex;flex-direction:column;gap:14px}.tab-content.disabled{opacity:.5;pointer-events:none}.field-group{display:flex;flex-direction:column;gap:6px}.field-group.disabled{opacity:.6;pointer-events:none}.field-label{font-size:12px;font-weight:600;color:var(--color-text-muted);letter-spacing:.3px}.field-hint{color:var(--color-text-dim);font-size:11px;line-height:1.4}.warning-banner{padding:6px 10px;background:#f1c40f1a;border:1px solid rgba(241,196,15,.4);border-radius:var(--radius-sm);color:var(--color-warning);font-size:12px}.text-input{width:100%;min-height:90px;padding:6px 8px;resize:vertical;font-family:var(--font-mono);font-size:12px;line-height:1.5}.select-input{flex:1;min-width:0}.number-input{width:60px}.picker-row{display:flex;gap:6px;align-items:center}.upload-btn{display:inline-flex;align-items:center;padding:4px 10px;background:var(--color-bg-elev-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:12px;cursor:pointer;white-space:nowrap}.upload-btn:hover{background:var(--color-border);border-color:var(--color-border-strong)}.upload-btn.drag-over{border-color:var(--color-primary);background:var(--color-bg-elev);color:var(--color-primary);border-style:dashed}.transparent-color-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--color-text-muted)}.transparent-color-row small{color:var(--color-text-dim)}.radio-stack,.checkbox-stack{display:flex;flex-direction:column;gap:4px}.radio-row,.checkbox-row{display:flex;align-items:center;font-size:12px;color:var(--color-text);cursor:pointer}.radio-row small,.checkbox-row small{margin-left:4px;color:var(--color-text-dim)}.size-row{display:flex;align-items:center;gap:12px}.padding-cross{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;width:fit-content}.padding-cell{display:flex;align-items:center;gap:4px}.padding-label{font-size:12px;color:var(--color-text-muted);min-width:18px}.padding-row{display:flex;align-items:center;gap:8px}.padding-center{width:60px;height:32px}.padding-cross .number-input{width:52px}.tile-rect-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:6px}.tile-rect-row label{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--color-text-muted)}.action-btn{padding:5px 14px;background:var(--color-primary-dim);border-radius:var(--radius-sm);color:#fff;font-size:12px;font-weight:500}.action-btn:hover:not(:disabled){background:var(--color-primary)}.action-btn:disabled{background:var(--color-bg-elev-2);color:var(--color-text-dim)}.color-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}.color-swatch{position:relative;aspect-ratio:1;border:1px solid var(--color-border);border-radius:2px;cursor:pointer;font-size:9px;color:#fff;text-shadow:0 0 2px black;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border-color:var(--color-primary);transform:scale(1.1)}.color-swatch.selected{border-color:var(--color-accent);border-width:2px;box-shadow:0 0 4px var(--color-accent)}.system-preview{margin-top:4px;border:1px solid var(--color-border);padding:2px;background:#000;display:inline-block;border-radius:2px}.system-preview img{display:block}.image-preview{margin-top:4px;border:1px solid var(--color-border);padding:2px;background:#000;display:inline-block;border-radius:2px}.face-grid{position:relative;border:1px solid var(--color-border);background-color:#000;background-repeat:no-repeat;image-rendering:pixelated}.face-cell{position:absolute;border:1px solid transparent;background:transparent;cursor:pointer;transition:all .1s}.face-cell:hover{border-color:#4a8fe799;background:#4a8fe726}.face-cell.selected{border-color:var(--color-accent);background:#f0a04033;box-shadow:0 0 6px #f0a04080}.preview{display:flex;flex-direction:column;gap:12px;align-items:flex-start}.preview-toolbar{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--color-text-muted)}.zoom-label{display:flex;align-items:center;gap:4px}.zoom-label select{width:60px}.size-info{color:var(--color-text);font-family:var(--font-mono)}.canvas-wrapper{padding:12px;background-color:var(--checker-bg);background-image:linear-gradient(45deg,var(--checker-cell) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-cell) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-cell) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-cell) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;border:1px solid var(--color-border);border-radius:var(--radius-sm);display:inline-block}.color-palette{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--color-text-muted)}.palette-grid{display:flex;gap:2px}.palette-swatch{width:14px;height:14px;border:1px solid var(--color-border);border-radius:2px}.palette-swatch.selected{border-color:var(--color-accent);box-shadow:0 0 4px var(--color-accent)}.export-bar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--color-bg-elev);border:1px solid var(--color-border);border-radius:var(--radius-md)}.transparent-color-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-muted)}.recommend-btn{padding:2px 8px;background:var(--color-bg-elev-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:11px;color:var(--color-text-muted)}.recommend-btn:hover{background:var(--color-border);color:var(--color-text)}.export-btn{margin-left:auto;padding:6px 16px;background:#4a7dbd;color:#fff;border-radius:var(--radius-sm);font-size:12px;font-weight:600}.export-btn:hover{background:#3d6aa3}.export-msg{display:block;margin-top:8px;font-size:11px;color:var(--color-success, #27ae60);text-align:left}.export-msg.error{color:var(--color-danger)}.preview-hint{color:var(--color-text-dim);font-size:11px;line-height:1.5}.preview-hint p{margin-bottom:2px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100;animation:fade-in .15s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{background:var(--color-bg-elev);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-width:90vw;max-height:85vh;overflow:hidden;animation:modal-pop .15s ease}@keyframes modal-pop{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--color-bg-elev-2);border-bottom:1px solid var(--color-border)}.modal-title{font-size:13px;font-weight:600;color:var(--color-text)}.modal-close{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:16px}.modal-close:hover{background:var(--color-bg);color:var(--color-text)}.modal-body{flex:1;overflow:auto;padding:12px;display:flex;gap:12px;min-height:0}.color-overflow-body{display:block;width:100%}.color-overflow-body p{margin:0 0 12px;line-height:1.6;font-size:13px}.color-overflow-options{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}.color-overflow-options li{padding:10px 12px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:12px;line-height:1.5;color:var(--color-text-muted)}.color-overflow-options strong{color:var(--color-text)}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:8px 12px;background:var(--color-bg-elev-2);border-top:1px solid var(--color-border)}.modal-btn{padding:5px 14px;border-radius:var(--radius-sm);font-size:12px;border:1px solid var(--color-border);background:var(--color-bg-elev-2);color:var(--color-text)}.modal-btn:hover{background:var(--color-border)}.modal-btn.primary{background:var(--color-primary-dim);border-color:var(--color-primary-dim);color:#fff}.modal-btn.primary:hover{background:var(--color-primary)}.modal-btn:disabled{opacity:.5;cursor:not-allowed}.asset-list{width:200px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;overflow-y:auto;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);padding:4px;max-height:380px}.asset-list-header{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;font-size:11px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}.asset-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--radius-sm);font-size:12px;color:var(--color-text);cursor:pointer;border:1px solid transparent}.asset-item:hover{background:var(--color-bg-elev-2)}.asset-item.selected{background:var(--color-primary-dim);color:#fff;border-color:var(--color-primary)}.asset-item .asset-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.asset-item .asset-tag{font-size:10px;padding:1px 4px;border-radius:2px;background:#ffffff1a;color:var(--color-text-muted)}.asset-item .asset-tag.tag-workspace{background:#4a8fe726;color:#4a8fe7}.asset-item.selected .asset-tag{background:#fff3;color:#fff}.asset-add-btn{padding:6px 8px;border:1px dashed var(--color-border-strong);border-radius:var(--radius-sm);font-size:12px;color:var(--color-text-muted);text-align:center;cursor:pointer}.asset-add-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:#4a8fe70d}.asset-detail{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}.asset-preview-wrapper{position:relative;display:inline-block;padding:4px;background-color:#444;background-image:linear-gradient(45deg,#888 25%,transparent 25%),linear-gradient(-45deg,#888 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#888 75%),linear-gradient(-45deg,transparent 75%,#888 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;border:1px solid var(--color-border);border-radius:var(--radius-sm);align-self:flex-start}.asset-preview-wrapper img{display:block;image-rendering:pixelated}.asset-info{font-size:11px;color:var(--color-text-muted);display:flex;flex-direction:column;gap:2px}.transparent-color-picker{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-muted)}.transparent-color-picker .auto-detect-btn{padding:2px 8px;font-size:11px;background:var(--color-bg-elev-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted)}.transparent-color-picker .auto-detect-btn:hover{background:var(--color-border);color:var(--color-text)}.color-pick-overlay{position:absolute;top:0;right:0;bottom:0;left:0;cursor:crosshair}.color-pick-overlay .crosshair{position:absolute;width:12px;height:12px;border:1px solid white;box-shadow:0 0 0 1px #000;pointer-events:none;transform:translate(-50%,-50%)}.workspace-selector{position:relative}.workspace-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:12px;cursor:pointer;transition:all .15s;max-width:200px}.workspace-btn:hover{background:var(--color-bg-elev-2);color:var(--color-text)}.workspace-btn.active{background:var(--color-primary-dim);border-color:var(--color-primary);color:#fff}.workspace-btn.unsupported{opacity:.5;cursor:not-allowed}@media (max-width: 899px){.app-header{gap:8px;padding:8px 12px}.app-header h1{font-size:14px}.workspace-btn{max-width:120px;padding:4px 8px;font-size:11px}.reset-btn{padding:4px 10px;font-size:11px}}.workspace-icon{font-size:12px;filter:grayscale(1);opacity:.8}.workspace-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}.workspace-arrow{font-size:8px;opacity:.6}.workspace-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:220px;background:var(--color-bg-elev);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;z-index:100;display:flex;flex-direction:column;gap:2px}.workspace-info{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-bottom:1px solid var(--color-border);margin-bottom:2px}.workspace-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-muted)}.workspace-path{font-size:13px;font-weight:600;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-empty{padding:8px;font-size:12px;color:var(--color-text-dim);text-align:center}.workspace-dir-hint{padding:4px 8px;font-size:10px;color:var(--color-text-dim);text-align:center;border-bottom:1px solid var(--color-border);margin-bottom:2px}.workspace-menu-item{display:block;width:100%;padding:6px 8px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--color-text);font-size:12px;text-align:left;cursor:pointer}.workspace-menu-item:hover{background:var(--color-bg-elev-2)}.workspace-menu-item.danger{color:var(--color-danger)}.workspace-menu-item.danger:hover{background:#e74c3c1a}.workspace-loading{padding:8px;font-size:12px;color:var(--color-text-muted);text-align:center}.workspace-error{padding:6px 8px;font-size:11px;color:var(--color-warning);background:#f1c40f1a;border-radius:var(--radius-sm);margin-bottom:4px}.drawer-btn.active{background:var(--color-primary-dim);border-color:var(--color-primary);color:#fff}.picture-drawer{width:360px;flex-shrink:0;display:flex;flex-direction:column;background:var(--color-bg-elev);border-left:1px solid var(--color-border);overflow:hidden}.picture-drawer-header{display:flex;align-items:center;gap:8px;padding:9px 16px;font-size:13px;font-weight:600;color:var(--color-text);border-bottom:1px solid var(--color-border);flex-shrink:0}.picture-drawer-count{font-size:11px;font-weight:400;color:var(--color-text-dim)}.picture-refresh-btn{margin-left:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:12px;cursor:pointer}.picture-refresh-btn:hover{background:var(--color-bg-elev-2);color:var(--color-text)}.picture-drawer-body{flex:1;overflow-y:auto;padding:12px}.picture-drawer-hint{font-size:11px;color:var(--color-text-dim);line-height:1.5;margin-bottom:10px}.picture-empty{padding:24px 8px;text-align:center;font-size:12px;color:var(--color-text-dim)}.picture-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.picture-item{display:flex;flex-direction:column;gap:4px;padding:4px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s}.picture-item:hover{border-color:var(--color-primary)}.picture-item.selected{border-color:var(--color-accent);box-shadow:0 0 5px #f0a04080}.picture-thumb{display:block;width:100%;aspect-ratio:4 / 3;object-fit:contain;image-rendering:pixelated;background-color:var(--checker-bg);background-image:linear-gradient(45deg,var(--checker-cell) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-cell) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-cell) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-cell) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;border-radius:2px}.picture-name{display:block;width:100%;font-size:10px;line-height:1.3;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.compare-section{display:flex;flex-direction:column;gap:6px}.compare-label{font-size:12px;color:var(--color-text-muted)}.compare-warn{color:var(--color-warning)}.compare-img{display:block;image-rendering:pixelated}@media (max-width: 899px){.picture-drawer{width:100%;order:3;border-left:none;background:transparent;overflow:visible}.picture-drawer-header{border-top:1px solid var(--color-border);border-radius:12px 12px 0 0;background:var(--color-bg-elev)}.picture-drawer-body{background:var(--color-bg-elev);overflow:visible;scrollbar-width:none;-ms-overflow-style:none}.picture-drawer-body::-webkit-scrollbar{display:none}}:root{--color-bg: #1a1d23;--color-bg-elev: #252932;--color-bg-elev-2: #2f343f;--color-border: #3a3f4b;--color-border-strong: #4a5060;--color-text: #e1e4eb;--color-text-muted: #8a909c;--color-text-dim: #6a707c;--color-primary: #4a8fe7;--color-primary-hover: #5d9eff;--color-primary-dim: #2c5a9a;--color-accent: #f0a040;--color-danger: #e74c3c;--color-success: #2ecc71;--color-warning: #f1c40f;--color-pixel: #00ff00;--checker-bg: #444;--checker-cell: #888;--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--radius-sm: 3px;--radius-md: 5px;--radius-lg: 8px;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;--font-mono: "Cascadia Code", "Consolas", "Source Han Mono", monospace}[data-theme=light]{--color-bg: #f5f5f5;--color-bg-elev: #ffffff;--color-bg-elev-2: #e8e8e8;--color-border: #d0d0d0;--color-border-strong: #b8b8b8;--color-text: #222222;--color-text-muted: #666666;--color-text-dim: #999999;--color-primary: #357abd;--color-primary-hover: #4a8fe7;--color-primary-dim: #2c5a9a;--color-accent: #d4892a;--color-danger: #c0392b;--color-success: #27ae60;--color-warning: #d4a017;--color-pixel: #009900;--checker-bg: #ffffff;--checker-cell: #e0e0e0;--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--color-text);background:var(--color-bg);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer;border:none;background:transparent}button:disabled{cursor:not-allowed;opacity:.5}input,textarea,select{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:4px 8px;color:var(--color-text);outline:none;transition:border-color .15s}input:focus,textarea:focus,select:focus{border-color:var(--color-primary)}input[type=number]{width:64px}input[type=color]{width:32px;height:22px;padding:0;border:1px solid var(--color-border);background:transparent;cursor:pointer}input[type=checkbox],input[type=radio]{width:auto;margin:0 4px 0 0;cursor:pointer;accent-color:var(--color-primary)}select{cursor:pointer;min-width:120px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong)}