*{margin:0;padding:0;box-sizing:border-box}html{font-size:13px}body{margin:0;padding:0;width:100%;height:100vh;background:var(--bg-canvas);color:var(--color-text-primary);font-family:var(--font-ui);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}#root{width:100%;height:100%}.app-fade-in{width:100%;height:100%;animation:app-fade-in 1.2s ease-out forwards}@keyframes app-fade-in{0%{opacity:0}to{opacity:1}}h1{font-size:var(--font-size-h1);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--spacing-md)}h2{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--spacing-sm)}h3,h4,h5,h6{font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);margin-bottom:var(--spacing-sm)}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-normal)}a:hover{color:var(--color-primary-hover)}a:active{color:var(--color-primary-active)}button{background:none;border:none;padding:0;margin:0;font-family:inherit;font-size:inherit;cursor:pointer;transition:all var(--transition-normal)}button:disabled{cursor:not-allowed;opacity:.5}input,textarea,select{font-family:var(--font-ui);font-size:var(--font-size-body);color:var(--color-text-primary);background-color:var(--bg-sidebar);border:1px solid var(--color-border-normal);border-radius:var(--radius-sm);padding:var(--input-padding);transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}input:disabled,textarea:disabled,select:disabled{background-color:var(--color-border-normal);color:var(--color-text-disabled);cursor:not-allowed}input::placeholder{color:var(--color-text-muted)}textarea::placeholder{color:var(--color-text-muted)}select{appearance:none;background-image:url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e');background-repeat:no-repeat;background-position:right 8px center;background-size:16px;padding-right:28px;cursor:pointer}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border-normal);border-radius:0}::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}::-webkit-scrollbar-thumb:active{background:var(--color-border-focus)}::-webkit-scrollbar-corner{background:transparent}code,pre{font-family:var(--font-mono);font-size:var(--font-size-mono);color:var(--color-text-secondary);background-color:var(--bg-sidebar);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm)}p{margin:0;margin-bottom:var(--spacing-md);color:var(--color-text-primary);line-height:1.6}p:last-child{margin-bottom:0}ul,ol{margin:0;padding:0;list-style:none}li{margin:0;padding:0}:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}::selection{background-color:var(--color-primary);color:#fff}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.truncate-lines-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.panel-header{height:32px;display:flex;align-items:center;padding:0 var(--spacing-md);border-bottom:1px solid var(--color-border-normal);color:var(--color-text-secondary);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);background:transparent}.panel-header-tabs{padding:0;gap:0}.panel-tab{height:100%;padding:0 var(--spacing-lg);border:none;border-right:1px solid var(--color-border-normal);background:transparent;color:var(--color-text-muted);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center}.panel-tab:hover{background:#ffffff08;color:var(--color-text-secondary)}.panel-tab.active{background:#4a90e21a;color:var(--color-primary);border-bottom:2px solid var(--color-primary)}.panel-tab:last-child{border-right:none}.tile-card,.collectible-card,.character-card{width:100%;aspect-ratio:1;background:transparent;border:2px solid transparent;border-radius:var(--radius-sm);padding:0;cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;overflow:hidden}.tile-card canvas,.collectible-card canvas,.character-card canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.tile-card:hover,.collectible-card:hover,.character-card:hover{border-color:var(--color-primary);transform:scale(1.05)}.tile-card.active,.collectible-card.active,.character-card.active{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-hover)}.characterset-card{width:100%;aspect-ratio:1;background:transparent;border:2px solid transparent;border-radius:var(--radius-sm);padding:0;cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;overflow:hidden}.characterset-card canvas{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.characterset-card:hover{border-color:var(--color-primary);transform:scale(1.05)}.characterset-card.active{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-hover)}.tileset-container{padding:var(--spacing-sm);display:grid;grid-template-columns:repeat(3,1fr);gap:4px;align-content:start}.tile-card-id{position:absolute;top:4px;right:4px;background:#0009;color:var(--color-text-muted);font-size:9px;padding:2px 4px;border-radius:var(--radius-sm);font-family:var(--font-mono)}.scenes-menu-container{padding:var(--spacing-sm);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm);align-content:start;overflow:auto;height:100%}.scenes-menu-create-btn{width:100%;aspect-ratio:1;background:transparent;border:2px dashed var(--color-border-normal);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-normal)}.scenes-menu-create-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.scenes-menu-create-btn:active{transform:scale(.98)}.scene-card{width:100%;aspect-ratio:1;background:transparent;border:2px solid var(--color-border-normal);border-radius:var(--radius-sm);padding:var(--spacing-sm);cursor:pointer;transition:all var(--transition-normal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xs)}.scene-card:hover{border-color:var(--color-primary)}.scene-card.active{border-color:var(--color-primary);background:var(--color-primary-hover)}.scene-card-name{font-size:12px;color:var(--color-text-primary);font-weight:var(--font-weight-medium);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.scene-card.active .scene-card-name{font-weight:var(--font-weight-bold)}.scene-card-dimensions{font-size:10px;color:var(--color-text-muted)}.canvas-grid-container{width:100%;height:100%;background:var(--bg-canvas);position:relative;overflow:auto;padding:var(--spacing-none);margin:var(--spacing-none)}.canvas-grid{display:block;cursor:crosshair;image-rendering:pixelated;image-rendering:crisp-edges;padding:var(--spacing-none);margin:var(--spacing-none)}.canvas-grid:active{cursor:pointer}.canvas-grid-container::-webkit-scrollbar{width:8px;height:8px}.canvas-grid-container::-webkit-scrollbar-track{background:var(--bg-canvas)}.canvas-grid-container::-webkit-scrollbar-thumb{background:var(--color-border-normal);border-radius:0}.canvas-grid-container::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}.canvas-grid-container::-webkit-scrollbar-corner{background:var(--bg-canvas)}.draw-tab{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);background:var(--bg-canvas);padding:0;overflow:visible;box-sizing:border-box}.draw-tab .canvas-grid-container{max-width:100%;max-height:100%;width:auto;height:auto;overflow:visible}.draw-tab-save-btn{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-accent);color:var(--color-text);border:none;border-radius:var(--border-radius);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}.draw-tab-save-btn:hover{background:var(--color-accent-hover)}.draw-tab-save-btn:active{background:var(--color-accent-active)}.draw-tab-actions{display:flex;gap:1rem;padding:1rem;justify-content:center}.draw-tab-actions button{padding:.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;font-size:1rem;transition:all .2s;font-weight:600}.draw-tab-actions .btn-primary{background:#4caf50;color:#fff}.draw-tab-actions .btn-primary:hover{background:#45a049;transform:scale(1.05)}.draw-tab-actions .btn-secondary{background:#f44336;color:#fff}.draw-tab-actions .btn-secondary:hover{background:#da190b;transform:scale(1.05)}.tileset-create-btn,.characterset-create-btn{width:100%;aspect-ratio:1;background:transparent;border:2px dashed var(--color-border-normal);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-normal)}.tileset-create-btn:hover,.characterset-create-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.tileset-create-btn:active,.characterset-create-btn:active{transform:scale(.98)}.characterset-container{padding:var(--spacing-sm);display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,80px));gap:4px;align-content:start;justify-content:start}.animation-editor{display:flex;height:100%;gap:var(--spacing-lg);padding:2px var(--spacing-lg) var(--spacing-lg) 2px;overflow:hidden}.animation-editor-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--color-text-secondary);padding:2rem;text-align:center}.animation-list{flex:0 0 var(--animation-list-width,200px);display:flex;flex-direction:column;gap:var(--spacing-sm);overflow-y:auto;padding:2px 4px 0 2px}.animation-list-item{border:1px solid var(--color-border-normal);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition-normal);background:var(--bg-secondary);display:flex;align-items:center;justify-content:space-between;gap:.15rem;cursor:pointer}.animation-list-item:hover{border-color:var(--color-primary);background:var(--bg-tertiary)}.animation-list-item.selected{border-color:var(--color-primary);background:#4a90e226;box-shadow:0 0 0 2px #4a90e24d;border-width:2px;font-weight:700}.animation-name{font-weight:600;color:var(--color-text-primary);font-size:var(--font-size-small);flex:1}.loop-checkbox{display:flex;align-items:center;gap:var(--spacing-xs);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--font-size-small);white-space:nowrap;flex-shrink:0}.loop-checkbox input[type=checkbox]{cursor:pointer}.animation-frames{flex:1;display:flex;flex-direction:column;overflow:hidden}.animation-frames-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--color-text-secondary)}.frame-slots{display:flex;gap:var(--spacing-lg);padding:7px var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);overflow-x:auto;overflow-y:hidden;align-items:flex-start;height:100%}.frame-slot{flex-shrink:0;width:var(--frame-slot-width,130px);height:var(--frame-slot-height,152px);border:2px dashed var(--color-border-normal);border-radius:var(--radius-sm);display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding:0;transition:all var(--transition-normal);background:var(--bg-secondary)}.frame-slot.add-new{cursor:pointer;border-style:dashed;justify-content:center;align-items:center}.frame-slot.add-new:hover{border-color:var(--color-primary);background:#4a90e20d}.frame-slot.filled{border-style:solid;border-color:var(--color-border-normal);padding:0}.frame-slot.filled:hover{border-color:var(--color-border-hover)}.frame-slot.filled.selected{border-color:var(--color-primary);box-shadow:0 0 0 2px #4a90e266;border-width:2px}.frame-slot canvas{width:100%;height:var(--frame-canvas-height,120px);image-rendering:pixelated;border:none;border-radius:0;display:block}.plus-icon{font-size:var(--icon-xlarge);color:var(--color-text-secondary);transition:color var(--transition-normal)}.frame-slot.add-new:hover .plus-icon{color:var(--color-primary)}.frame-actions{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;border-top:1px solid var(--color-border-normal)}.frame-actions button{padding:var(--spacing-sm);border:none;border-radius:0;background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-body);display:flex;align-items:center;justify-content:center;height:var(--btn-small-height)}.frame-actions button:first-child{border-right:1px solid var(--color-border-normal)}.frame-actions button:hover{background:var(--color-border-hover);color:var(--color-text-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-ui);font-weight:var(--font-weight-medium);transition:all var(--transition-normal);background:none;padding:0;margin:0}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.btn-icon{display:flex;align-items:center;justify-content:center}.btn-icon svg{width:1em;height:1em}.btn-small{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-small);min-height:var(--btn-small-height)}.btn-medium{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-body);min-height:var(--btn-medium-height)}.btn-large{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-h2);min-height:var(--btn-large-height)}.btn-icon-only.btn-small{padding:var(--spacing-xs);width:var(--btn-small-height);height:var(--btn-small-height)}.btn-icon-only.btn-medium{padding:var(--spacing-sm);width:var(--btn-medium-height);height:var(--btn-medium-height)}.btn-icon-only.btn-large{padding:var(--spacing-md);width:var(--btn-large-height);height:var(--btn-large-height)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-hover)}.btn-primary:active:not(:disabled){background:var(--color-primary-active);box-shadow:0 2px 6px #4a90e233}.btn-secondary{background:var(--bg-inspector);color:var(--color-text-secondary);border:1px solid var(--color-border-normal)}.btn-secondary:hover:not(:disabled){background:var(--color-border-hover);color:var(--color-text-primary);border-color:var(--color-border-hover)}.btn-secondary:active:not(:disabled){background:var(--color-border-normal)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background:#c0392b;box-shadow:0 4px 12px #e74c3c4d}.btn-danger:active:not(:disabled){background:#a93226}.btn-icon{background:transparent;color:var(--color-text-muted);border:1px solid transparent}.btn-icon:hover:not(:disabled){background:#ffffff0d;color:var(--color-text-secondary);border-color:var(--color-border-normal)}.btn-icon:active:not(:disabled){background:#ffffff14;color:var(--color-text-primary)}.selection-grid{display:grid;padding:4px;background:var(--bg-sidebar);border:1px solid var(--color-border-normal);border-radius:var(--radius-sm);width:100%}.selection-grid-item{position:relative;width:100%;border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);background-clip:padding-box;padding:0;background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden}.selection-grid-item-hoverable:hover:not(:disabled){border-color:var(--color-border-hover);transform:scale(1.05)}.selection-grid-item:active:not(:disabled){transform:scale(.98)}.selection-grid-item-selected{border-color:var(--color-text-primary)!important;box-shadow:0 0 0 1px var(--color-text-primary)}.selection-grid-disabled .selection-grid-item{cursor:not-allowed;opacity:.5}.selection-grid-item:disabled{cursor:not-allowed;opacity:.5}.selection-grid-compact{padding:3px;gap:3px}.selection-grid-compact .selection-grid-item{border-width:1px}.selection-grid-large .selection-grid-item{min-height:60px}.colour-picker{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%}.colour-swatch-inner{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.colour-swatch-indicator{position:absolute;top:2px;right:2px;width:6px;height:6px;background:var(--color-text-primary);border-radius:50%;box-shadow:0 0 2px #00000080;pointer-events:none}.colour-editor{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-sidebar);border:1px solid var(--color-border-normal);border-radius:var(--radius-sm)}.colour-editor-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-border-subtle)}.colour-editor-title{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.colour-editor-preview{width:32px;height:20px;border:1px solid var(--color-border-normal);border-radius:var(--radius-sm)}.colour-editor-channels{display:flex;flex-direction:column;gap:6px}.colour-channel{display:flex;align-items:center;gap:var(--spacing-sm)}.colour-channel label{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);min-width:12px;text-align:center}.colour-slider{flex:1;height:20px;-webkit-appearance:none;appearance:none;background:transparent;outline:none;cursor:pointer}.colour-slider::-webkit-slider-track{height:4px;background:var(--color-border-normal);border-radius:2px}.colour-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:var(--color-text-primary);border:1px solid var(--color-border-normal);border-radius:50%;cursor:pointer;transition:all var(--transition-fast)}.colour-slider::-webkit-slider-thumb:hover{background:var(--color-text-primary);box-shadow:0 0 4px #ffffff4d}.colour-slider::-moz-range-track{height:4px;background:var(--color-border-normal);border-radius:2px}.colour-slider::-moz-range-thumb{width:12px;height:12px;background:var(--color-text-primary);border:1px solid var(--color-border-normal);border-radius:50%;cursor:pointer;transition:all var(--transition-fast)}.colour-slider::-moz-range-thumb:hover{background:var(--color-text-primary);box-shadow:0 0 4px #ffffff4d}.colour-slider-red::-webkit-slider-track{background:linear-gradient(to right,#2d2d2d,#e74c3c4d)}.colour-slider-red::-moz-range-track{background:linear-gradient(to right,#2d2d2d,#e74c3c4d)}.colour-slider-green::-webkit-slider-track{background:linear-gradient(to right,#2d2d2d,#2ecc714d)}.colour-slider-green::-moz-range-track{background:linear-gradient(to right,#2d2d2d,#2ecc714d)}.colour-slider-blue::-webkit-slider-track{background:linear-gradient(to right,#2d2d2d,#4a90e24d)}.colour-slider-blue::-moz-range-track{background:linear-gradient(to right,#2d2d2d,#4a90e24d)}.colour-value{width:50px;height:var(--input-height);padding:0 6px;font-size:var(--font-size-small);text-align:center}.colour-hex{display:flex;align-items:center;gap:var(--spacing-sm);padding-top:var(--spacing-xs);border-top:1px solid var(--color-border-subtle)}.colour-hex label{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);min-width:28px}.colour-hex-input{flex:1;height:var(--input-height);font-family:var(--font-mono);font-size:var(--font-size-small);text-transform:uppercase}.colour-picker-compact .colour-picker-palette{gap:3px;padding:3px}.colour-picker-compact .colour-swatch{min-height:28px}.colour-picker-compact .colour-editor{padding:6px}.scene-inspector-container{padding:var(--spacing-md);overflow:auto;height:100%}.scene-inspector-empty{padding:var(--spacing-lg);color:var(--color-text-muted)}.scene-inspector-empty p{margin-bottom:var(--spacing-sm)}.scene-inspector-empty p:last-child{font-size:var(--font-size-small);margin-top:var(--spacing-sm);margin-bottom:0}.scene-inspector-section-title{font-size:var(--font-size-body);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-border-normal)}.scene-inspector-section-title:first-child{margin-top:0}.inspector-row{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.inspector-row-label{font-size:var(--font-size-body);color:var(--color-text-secondary);text-align:left}.inspector-row input[type=text],.inspector-row input[type=number],.inspector-row select{width:100%;min-width:0}.palette-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.inspector-add-button{width:100%;margin-top:var(--spacing-xs)}.tile-inspector-container{padding:var(--spacing-md);overflow:auto;height:100%}.tile-inspector-empty{padding:var(--spacing-lg);color:var(--color-text-muted)}.tile-inspector-empty p{margin-bottom:var(--spacing-sm)}.tile-inspector-empty p:last-child{font-size:var(--font-size-small);margin-top:var(--spacing-sm);margin-bottom:0}.tile-inspector-section-title{font-size:var(--font-size-body);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-xs);border-bottom:1px solid var(--color-border-normal)}.tile-inspector-section-title:first-child{margin-top:0}.tile-inspector-row{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.tile-inspector-row-label{font-size:var(--font-size-body);color:var(--color-text-secondary);text-align:left}.tile-inspector-row input[type=text],.tile-inspector-row input[type=number],.tile-inspector-row input[type=checkbox]{width:100%;min-width:0}.tile-inspector-row input[type=checkbox]{width:auto;justify-self:start}.tile-inspector-edit-button{width:100%;margin-bottom:var(--spacing-sm)}.tile-inspector-palette-disabled{position:relative;pointer-events:none;opacity:.5}.tile-inspector-palette-hint{font-size:var(--font-size-small);color:var(--color-text-muted);margin-bottom:var(--spacing-xs);font-style:italic}.colours-palette{padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md);height:100%}.palette-info-text{margin:0 0 var(--spacing-sm) 0;font-size:12px;color:var(--color-text-muted)}.dropdown{position:relative;width:100%;display:flex;flex-direction:column;gap:var(--spacing-xs)}.dropdown-label{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);margin-bottom:2px}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--input-height);padding:0 6px;background:var(--bg-sidebar);border:1px solid var(--color-border-normal);border-radius:var(--radius-sm);color:var(--color-text-primary);font-family:var(--font-ui);font-size:var(--font-size-body);cursor:pointer;transition:all var(--transition-normal);text-align:left}.dropdown-trigger:hover:not(:disabled){border-color:var(--color-border-hover)}.dropdown-trigger:focus{outline:none;border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}.dropdown-trigger:disabled{opacity:.5;cursor:not-allowed;background:var(--color-border-normal);color:var(--color-text-disabled)}.dropdown-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-body)}.dropdown-placeholder{color:var(--color-text-muted)}.dropdown-icon{width:16px;height:16px;margin-left:var(--spacing-sm);color:var(--color-text-muted);transition:transform var(--transition-normal);flex-shrink:0}.dropdown-open .dropdown-icon{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1000;background:var(--bg-sidebar);border:1px solid var(--color-border-normal);border-radius:var(--radius-sm);box-shadow:var(--shadow-medium);max-height:240px;overflow-y:auto;list-style:none;margin:0;padding:var(--spacing-xs) 0;animation:dropdownFadeIn var(--transition-fast) ease}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dropdown-option{height:var(--input-height);padding:0 6px;display:flex;align-items:center;color:var(--color-text-primary);font-size:var(--font-size-body);cursor:pointer;transition:background var(--transition-fast);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-option:hover{background:#ffffff14;color:var(--color-text-primary)}.dropdown-option-selected{background:#ffffff1f;color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.dropdown-option-selected:hover{background:#4a90e233}.dropdown-small .dropdown-trigger{min-height:var(--btn-small-height);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-small)}.dropdown-medium .dropdown-trigger{min-height:var(--input-height)}.dropdown-menu::-webkit-scrollbar{width:8px}.dropdown-menu::-webkit-scrollbar-track{background:transparent}.dropdown-menu::-webkit-scrollbar-thumb{background:var(--color-border-normal);border-radius:4px}.dropdown-menu::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}.dropdown-disabled .dropdown-trigger{background:var(--color-border-normal);color:var(--color-text-disabled);cursor:not-allowed}.dropdown-disabled .dropdown-icon{color:var(--color-text-disabled)}.splash-screen{position:fixed;inset:0;z-index:9999;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#1e2128,#252a31,#2b2f38);overflow:hidden;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;transition:opacity 1.5s ease}.splash-screen--fading{opacity:0}.splash-bg-grid{position:fixed;inset:0;--cell-size: 40px;--grid-color: rgba(74, 144, 226, .07);background-image:linear-gradient(to right,var(--grid-color) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-color) 1px,transparent 1px);background-size:var(--cell-size) var(--cell-size);opacity:1}@keyframes splash-fade-in-plain{to{opacity:1}}.splash-glow{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:500px;background:radial-gradient(ellipse,rgba(74,144,226,.09) 0%,transparent 68%);animation:splash-fade-in-plain 1.2s ease-out .5s forwards;opacity:0;pointer-events:none}.splash-corner{position:fixed;width:36px;height:36px;opacity:0}.splash-corner--tl{top:22px;left:22px;border-top:1.5px solid rgba(74,144,226,.55);border-left:1.5px solid rgba(74,144,226,.55);animation:splash-fade-in .5s ease-out .1s forwards}.splash-corner--tr{top:22px;right:22px;border-top:1.5px solid rgba(74,144,226,.55);border-right:1.5px solid rgba(74,144,226,.55);animation:splash-fade-in .5s ease-out .2s forwards}.splash-corner--bl{bottom:22px;left:22px;border-bottom:1.5px solid rgba(74,144,226,.55);border-left:1.5px solid rgba(74,144,226,.55);animation:splash-fade-in .5s ease-out .3s forwards}.splash-corner--br{bottom:22px;right:22px;border-bottom:1.5px solid rgba(74,144,226,.55);border-right:1.5px solid rgba(74,144,226,.55);animation:splash-fade-in .5s ease-out .4s forwards}.splash-top-bar,.splash-bottom-bar{position:fixed;left:64px;right:64px;display:flex;justify-content:space-between;align-items:center;opacity:0;animation:splash-fade-in .7s ease-out .5s forwards}.splash-top-bar{top:22px;border-top:1px solid rgba(74,144,226,.18);padding-top:8px}.splash-bottom-bar{bottom:22px;border-bottom:1px solid rgba(74,144,226,.18);padding-bottom:8px}.splash-bar-label{font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:#4a90e273}.splash-scan-line{position:fixed;left:0;right:0;top:0;height:1px;background:linear-gradient(to right,transparent 0%,rgba(74,144,226,0) 10%,rgba(74,144,226,.7) 40%,rgba(74,144,226,.7) 60%,rgba(74,144,226,0) 90%,transparent 100%);box-shadow:0 0 10px #4a90e266;animation:splash-scan 2.2s cubic-bezier(.4,0,.6,1) .3s forwards;opacity:0}@keyframes splash-scan{0%{top:0vh;opacity:0}4%{opacity:1}96%{opacity:1}to{top:100vh;opacity:0}}.splash-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:0}.splash-content--fading{animation:splash-fade-out-content .8s ease-out forwards}@keyframes splash-fade-out-content{to{opacity:0;transform:scale(.97)}}.splash-logo-box{width:100px;height:100px;display:flex;justify-content:center;align-items:center;border:1.5px solid rgba(74,144,226,.35);background:#4a90e20a;box-shadow:0 0 32px #4a90e214,inset 0 0 32px #4a90e20a;margin-bottom:24px;animation:splash-fade-in-scale .4s ease-out forwards;opacity:0}@keyframes splash-fade-in-scale{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.splash-logo-letter{font-size:72px;font-weight:700;color:#4a90e2;text-shadow:0 0 24px rgba(74,144,226,.6),0 0 48px rgba(74,144,226,.2);line-height:1}.splash-app-name{font-size:34px;font-weight:600;color:#fff;letter-spacing:10px;text-transform:uppercase;animation:splash-fade-in .7s ease-out .5s forwards;opacity:0;margin-bottom:16px}.splash-separator{width:180px;height:1px;background:linear-gradient(to right,transparent,rgba(74,144,226,.5) 30%,rgba(74,144,226,.5) 70%,transparent);animation:splash-fade-in .7s ease-out .8s forwards;opacity:0;margin-bottom:16px}.splash-slogan{font-size:11px;color:#fff6;letter-spacing:5px;text-transform:uppercase;animation:splash-fade-in .7s ease-out 1s forwards;opacity:0}.splash-slogan span{color:#4a90e2bf}@keyframes splash-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}:root{--color-primary: #4A90E2;--color-primary-hover: #357ABD;--color-primary-active: #2C5AA0;--color-success: #2ECC71;--color-warning: #F39C12;--color-danger: #E74C3C;--color-text-primary: #ECEFF1;--color-text-secondary: #B0BEC5;--color-text-muted: #78909C;--color-text-disabled: #546E7A;--color-border-focus: #4A90E2;--color-border-normal: #37474F;--color-border-hover: #455A64;--bg-sidebar: linear-gradient(180deg, #1A1E23 0%, #1C1E26 100%);--bg-tile-area: linear-gradient(135deg, #1E1F26 0%, #1D212A 100%);--bg-scenes-menu: linear-gradient(135deg, #1E2128 0%, #21201F 100%);--bg-canvas: linear-gradient(135deg, #252A31 0%, #2B2F38 100%);--bg-character-area: linear-gradient(135deg, #1E2128 0%, #1E212C 100%);--bg-inspector: linear-gradient(90deg, #1F2937 0%, #212230 100%);--grid-color-major: #455A64;--grid-color-minor: #37474F;--grid-color-hover: #546E7A;--grid-checker-light: #2D3139;--grid-checker-dark: #23272E;--grid-checker-opacity: .3;--pixel-grid-color: #546E7A;--pixel-grid-thickness: 2px;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;--font-mono: "Fira Code", "Consolas", "Monaco", monospace;--font-size-h1: 18px;--font-size-h2: 14px;--font-size-body: 13px;--font-size-small: 11px;--font-size-mono: 12px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 600;--spacing-none: 0px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-xxl: 32px;--btn-small-height: 28px;--btn-medium-height: 36px;--btn-large-height: 44px;--input-height: 24px;--input-padding: 0 6px;--icon-small: 16px;--icon-medium: 20px;--icon-large: 24px;--icon-xlarge: 32px;--sidebar-width: 48px;--sidebar-icon-size: 25px;--tile-preview-size: 40px;--character-preview-size: 60px;--tile-grid-gap: 8px;--character-grid-gap: 12px;--radius-none: 0px;--radius-sm: 2px;--radius-md: 4px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--shadow-subtle: 0 1px 3px rgba(0, 0, 0, .3);--shadow-medium: 0 4px 12px rgba(0, 0, 0, .4);--shadow-strong: 0 8px 24px rgba(0, 0, 0, .5);--shadow-focus: 0 0 0 3px rgba(74, 144, 226, .1);--shadow-hover: 0 0 6px rgba(74, 144, 226, .3);--shadow-active: 0 0 8px rgba(74, 144, 226, .5)}.panel{width:100%;height:100%;border-radius:var(--radius-none);color:var(--color-text-primary)}.panel-body{width:100%;height:calc(100% - 32px);padding:var(--spacing-none);overflow:auto}.sidebar{display:flex;flex-direction:column;align-items:center}.sidebar .icon-list{display:flex;flex-direction:column;width:50%;align-items:center}.sidebar .sidebar-icon{width:100%;height:var(--sidebar-width);display:flex;align-items:center;justify-content:center;background:transparent;color:var(--color-text-secondary);transition:color var(--transition-normal)}.sidebar .sidebar-icon:hover{color:var(--color-text-primary)}.sidebar .sidebar-icon span{width:var(--sidebar-icon-size);height:var(--sidebar-icon-size);display:inline-flex;align-items:center;justify-content:center;color:var(--color-text-muted);transition:color var(--transition-normal),filter var(--transition-normal)}.sidebar .sidebar-icon:hover span{color:var(--color-text-secondary);filter:drop-shadow(0 0 6px rgba(74,144,226,.2))}.sidebar .sidebar-icon.active{border-left-color:var(--color-primary)}.sidebar .sidebar-icon.active span{color:var(--color-primary);filter:drop-shadow(0 0 8px rgba(74,144,226,.4))}.editor-layout{display:grid;grid-template-columns:var(--sidebar-width) minmax(200px,300px) 1fr 1fr 1fr 300px;grid-template-rows:1fr 1fr 1fr .8fr 1.5fr;width:100%;height:100%;gap:0;background:var(--bg-canvas)}.sidebar{grid-column:1 / 2;grid-row:1 / 6;background:var(--bg-sidebar);border-right:1px solid var(--color-border-normal)}.tile-area{grid-column:2 / 3;grid-row:1 / 4;background:var(--bg-tile-area);border-right:1px solid var(--color-border-normal);border-bottom:1px solid var(--color-border-normal)}.scenes-menu{grid-column:2 / 3;grid-row:4 / 6;background:var(--bg-scenes-menu);border-right:1px solid var(--color-border-normal)}.canvas-area{grid-column:3 / 6;grid-row:1 / 5;background:var(--bg-canvas);border-right:1px solid var(--color-border-normal);border-bottom:1px solid var(--color-border-normal)}.character-area{grid-column:3 / 6;grid-row:5 / 6;background:var(--bg-character-area);border-right:1px solid var(--color-border-normal);overflow:hidden}.inspector-area{grid-column:6 / 7;grid-row:1 / 6;background:var(--bg-inspector)}