*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d0d;--surface: #141414;--surface2: #1e1e1e;--border: #2a2a2a;--text: #e0e0e0;--text-dim: #777;--accent: #00d4ff;--accent-fg: #000;--danger: #ff4d4d;--radius: 5px;--sidebar-w: 190px}html,body,#root{height:100%;overflow:hidden;font-family:Inter,system-ui,sans-serif;font-size:13px;color:var(--text);background:var(--bg)}button{cursor:pointer;font-family:inherit;font-size:12px}input{font-family:inherit}.app{display:flex;flex-direction:column;height:100%}.app-header{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 1rem;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;gap:1rem}.header-brand{display:flex;align-items:center;gap:8px}.brand-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}.app-header h1{font-size:15px;font-weight:700;letter-spacing:.05em;color:#fff}.header-right{display:flex;align-items:center;gap:8px}.skin-name-input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:.3rem .6rem;font-size:12px;width:130px;outline:none}.skin-name-input:focus{border-color:var(--accent)}.btn-export{background:var(--accent);color:var(--accent-fg);border:none;border-radius:var(--radius);padding:.35rem .9rem;font-size:12px;font-weight:600;transition:opacity .15s}.btn-export:hover{opacity:.85}.btn-export:disabled{opacity:.4;cursor:not-allowed}.app-main{flex:1;display:grid;grid-template-columns:var(--sidebar-w) 1fr 1fr;overflow:hidden}.sidebar{background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0}.map-list{padding:.5rem 0}.map-group{margin-bottom:.25rem}.map-group-header{padding:.45rem .75rem .2rem;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}.map-list ul{list-style:none}.map-item{display:flex;align-items:center;gap:7px;width:100%;padding:.3rem .75rem;background:none;border:none;color:var(--text-dim);text-align:left;transition:background .1s,color .1s;border-left:2px solid transparent}.map-item:hover{background:var(--surface2);color:var(--text)}.map-item.active{background:#00d4ff12;color:var(--accent);border-left-color:var(--accent)}.map-badge{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:3px;font-size:9px;font-weight:700;flex-shrink:0;background:var(--surface2);color:var(--text-dim)}.map-item.active .map-badge{background:var(--accent);color:#000}.map-item.type-color .map-badge{color:#f4a261}.map-item.type-normal .map-badge{color:#9b8ee8}.map-list-legend{display:flex;gap:.5rem;flex-wrap:wrap;padding:.5rem .75rem;font-size:10px;color:var(--text-dim);border-top:1px solid var(--border);margin-top:.25rem}.editor-section{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}.map-editor{flex:1;display:flex;flex-direction:column;overflow:hidden}.map-editor-header{padding:.5rem .75rem;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.map-editor-title{font-size:12px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:.5rem}.map-editor-file{font-size:10px;font-weight:400;color:var(--text-dim);font-family:monospace}.map-editor-body{flex:1;display:flex;flex-direction:column;overflow:hidden}.map-editor-controls{padding:.65rem .75rem;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.map-editor-canvas{flex:1;overflow:hidden;display:flex;flex-direction:column}.color-controls{display:flex;flex-direction:column;gap:.6rem}.type-toggle{display:flex;gap:4px}.type-toggle button{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-dim);padding:.25rem 0;transition:color .15s,border-color .15s}.type-toggle button.active{color:var(--accent);border-color:var(--accent)}.picker-row{position:relative;display:flex;align-items:center;gap:8px}.picker-label{flex:1;font-size:11px;color:var(--text-dim)}.color-preview-btn{width:28px;height:28px;border-radius:var(--radius);border:2px solid var(--border);cursor:pointer;flex-shrink:0;transition:border-color .15s}.color-preview-btn:hover{border-color:var(--accent)}.picker-popover{position:absolute;top:calc(100% + 6px);right:0;z-index:200;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:7px;box-shadow:0 8px 24px #0009;min-width:210px}.hex-input{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:.25rem .4rem;font-size:11px;font-family:monospace;outline:none;width:100%}.hex-input:focus{border-color:var(--accent)}.picker-close{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);border-radius:var(--radius);padding:.25rem .6rem;align-self:flex-end}.picker-close:hover{color:var(--text)}.angle-row{display:flex;flex-direction:column;gap:4px}.angle-input-row{display:flex;align-items:center;gap:6px}.angle-input-row input[type=range]{flex:1;accent-color:var(--accent)}.angle-value{font-size:11px;color:var(--text-dim);min-width:28px;text-align:right}.decal-editor{flex:1;display:flex;flex-direction:column;overflow:hidden}.decal-toolbar{display:flex;align-items:center;gap:5px;padding:6px 10px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.btn-tool{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:.25rem .6rem;transition:border-color .15s}.btn-tool:hover{border-color:var(--accent);color:var(--accent)}.btn-tool.btn-danger{color:var(--danger)}.btn-tool.btn-danger:hover{border-color:var(--danger)}.btn-tool.zoom-label{min-width:3.2rem;text-align:center;font-variant-numeric:tabular-nums}.decal-canvas-wrap{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px;background:repeating-conic-gradient(#1a1a1a,#1a1a1a 25%,#141414 0%,#141414 50%) 0 0 / 18px 18px}.decal-canvas-wrap .canvas-container{max-width:100%;max-height:100%}.decal-canvas-wrap canvas{max-width:100%;max-height:100%;display:block}.decal-hint{padding:5px 10px;font-size:10px;color:var(--text-dim);background:var(--surface);border-top:1px solid var(--border);flex-shrink:0}.grayscale-editor{flex:1;display:flex;flex-direction:column;gap:0;overflow:hidden}.gs-preview{flex:1;display:flex;align-items:flex-end;justify-content:flex-end;padding:1rem;min-height:120px;transition:background .15s}.gs-value-label{background:#0000008c;color:#fff;padding:.2rem .5rem;border-radius:4px;font-size:11px;font-family:monospace}.gs-controls{padding:1rem;background:var(--surface);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.5rem}.gs-controls input[type=range]{width:100%;accent-color:var(--accent)}.gs-gradient-bar{height:8px;border-radius:4px;background:linear-gradient(to right,#000,#fff);border:1px solid var(--border)}.map-description{padding:.75rem 1rem;font-size:11px;color:var(--text-dim);background:var(--surface);border-top:1px solid var(--border)}.normal-map-info{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;text-align:center;color:var(--text-dim)}.normal-icon{width:56px;height:56px;border-radius:50%;background:#9b8ee820;border:2px solid #9b8ee8;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#9b8ee8}.normal-map-info h3{color:var(--text);font-size:15px}.normal-map-info p{font-size:12px;max-width:340px;line-height:1.6}.normal-note strong{color:var(--text);font-family:monospace}.viewer-section{display:flex;overflow:hidden}.viewer-3d{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.viewer-controls{position:absolute;bottom:12px;right:12px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:10}.viewer-ctrl-group{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.viewer-btn{background:#0e0e0ee0;border:1px solid var(--border);color:var(--text-dim);border-radius:var(--radius);padding:.3rem .65rem;font-size:11px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .15s,border-color .15s}.viewer-btn:hover{color:var(--text);border-color:var(--accent)}.viewer-btn.active{color:var(--accent);border-color:var(--accent)}.bloom-panel{background:#0e0e0eeb;border:1px solid var(--border);border-radius:var(--radius);padding:.65rem .75rem;display:flex;flex-direction:column;gap:.5rem;min-width:200px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.bloom-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);cursor:pointer}.bloom-toggle input{accent-color:var(--accent)}.bloom-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim)}.bloom-row input[type=range]{flex:1;accent-color:var(--accent)}.bloom-row span:last-child{min-width:24px;text-align:right}.bloom-hint{font-size:10px;color:var(--text-dim);line-height:1.5;border-top:1px solid var(--border);padding-top:.4rem}.bloom-hint strong{color:var(--accent)}.gs-control-row{display:flex;align-items:center;gap:8px}.gs-mini-swatch{width:20px;height:20px;border-radius:3px;border:1px solid var(--border);flex-shrink:0;cursor:default}.gs-inline-slider{flex:1;accent-color:var(--accent)}.toolbar-sep{width:1px;height:18px;background:var(--border);flex-shrink:0}.btn-tool.active{color:var(--accent);border-color:var(--accent);background:#00d4ff14}.brush-size-slider{width:70px;accent-color:var(--accent)}.brush-size-label{font-size:11px;color:var(--text-dim);min-width:28px}.react-colorful{width:100%!important}