handler-playable-sdk 0.3.55 → 0.3.56

package/dist/pixi/index.css

@@ -1040,6 +1040,7 @@
 .scene-panel {
   position: absolute;
   width: 320px;
+  min-width: 280px;
   max-height: 78vh;
   background: var(--ui-surface);
   border: 1px solid var(--ui-border);
@@ -1206,1109 +1207,1159 @@
   padding: 6px 0;
 }
 
-  .batch-ai-label {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.batch-ai-label {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
 
-  .batch-ai-input,
-  .batch-ai-textarea,
-  .batch-ai-select {
-    width: 100%;
-    padding: 6px 8px;
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: rgba(10, 14, 20, 0.85);
-    color: var(--ui-text);
-    font-size: 12px;
-  }
+.batch-ai-input,
+.batch-ai-textarea,
+.batch-ai-select {
+  width: 100%;
+  padding: 6px 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(10, 14, 20, 0.85);
+  color: var(--ui-text);
+  font-size: 12px;
+}
 
-  .batch-ai-textarea {
-    min-height: 70px;
-    resize: vertical;
-  }
+.batch-ai-textarea {
+  min-height: 70px;
+  resize: vertical;
+}
 
-  .batch-ai-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
+.batch-ai-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 
-  .batch-ai-actions {
-    margin-top: 6px;
-  }
+.batch-ai-actions {
+  margin-top: 6px;
+}
 
-  .batch-ai-btn {
-    border: 1px solid var(--ui-border);
-    background: rgba(25, 32, 44, 0.8);
-    color: var(--ui-text);
-    border-radius: 8px;
-    padding: 4px 10px;
-    font-size: 11px;
-    cursor: pointer;
-  }
+.batch-ai-btn {
+  border: 1px solid var(--ui-border);
+  background: rgba(25, 32, 44, 0.8);
+  color: var(--ui-text);
+  border-radius: 8px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+}
 
-  .batch-ai-btn.primary {
-    border-color: rgba(191, 126, 255, 0.6);
-    background: rgba(191, 126, 255, 0.2);
-  }
+.batch-ai-btn.primary {
+  border-color: rgba(191, 126, 255, 0.6);
+  background: rgba(191, 126, 255, 0.2);
+}
 
-  .batch-ai-file {
-    display: none;
-  }
+.batch-ai-file {
+  display: none;
+}
 
-  .batch-ai-file-name {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.batch-ai-file-name {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
 
-  .batch-ai-status {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.batch-ai-status {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
 
-  .batch-ai-dna {
-    margin-top: 8px;
-    padding: 8px;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(16, 20, 28, 0.6);
-  }
+.batch-ai-dna {
+  margin-top: 8px;
+  padding: 8px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(16, 20, 28, 0.6);
+}
 
-  .batch-ai-palette {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    margin-top: 6px;
-  }
+.batch-ai-palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
 
-  .batch-ai-swatch {
-    width: 22px;
-    height: 22px;
-    border-radius: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-  }
+.batch-ai-swatch {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
 
-  .batch-ai-muted {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.batch-ai-muted {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
 
-  .batch-ai-asset-list {
-    margin-top: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-md);
-  }
+.batch-ai-asset-list {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
 
-  .batch-ai-item {
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(12, 16, 22, 0.7);
-    padding: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
+.batch-ai-item {
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(12, 16, 22, 0.7);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
-  .batch-ai-item-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-  }
+.batch-ai-item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
 
-  .batch-ai-toggle {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 11px;
-    color: var(--ui-text);
-  }
+.batch-ai-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--ui-text);
+}
 
-  .batch-ai-item-body {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
+.batch-ai-item-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
-  .batch-ai-thumb {
-    width: 100%;
-    max-height: 140px;
-    object-fit: contain;
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: rgba(8, 10, 14, 0.6);
-  }
+.batch-ai-thumb {
+  width: 100%;
+  max-height: 140px;
+  object-fit: contain;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(8, 10, 14, 0.6);
+}
 
-  .batch-ai-thumb.hidden {
-    display: none;
-  }
+.batch-ai-thumb.hidden {
+  display: none;
+}
 
-  .batch-ai-item-status {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.batch-ai-item-status {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
 
-  .batch-ai-item-actions {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
+.batch-ai-item-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 
-  .batch-ai-empty {
-    font-size: 11px;
-    color: var(--ui-muted);
-    padding: 6px 0;
-  }
+.batch-ai-empty {
+  font-size: 11px;
+  color: var(--ui-muted);
+  padding: 6px 0;
+}
 
-  .brand-dna-label {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.brand-dna-label {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
 
-  .brand-dna-input,
-  .brand-dna-textarea,
-  .brand-dna-select {
-    width: 100%;
-    padding: 6px 8px;
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: rgba(10, 14, 20, 0.85);
-    color: var(--ui-text);
-    font-size: 12px;
-  }
+.brand-dna-input,
+.brand-dna-textarea,
+.brand-dna-select {
+  width: 100%;
+  padding: 6px 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(10, 14, 20, 0.85);
+  color: var(--ui-text);
+  font-size: 12px;
+}
 
-  .brand-dna-textarea {
-    min-height: 70px;
-    resize: vertical;
-  }
+.brand-dna-textarea {
+  min-height: 70px;
+  resize: vertical;
+}
 
-  .brand-dna-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
+.brand-dna-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 
-  .brand-dna-btn {
-    border: 1px solid var(--ui-border);
-    background: rgba(25, 32, 44, 0.8);
-    color: var(--ui-text);
-    border-radius: 8px;
-    padding: 4px 10px;
-    font-size: 11px;
-    cursor: pointer;
-  }
+.brand-dna-btn {
+  border: 1px solid var(--ui-border);
+  background: rgba(25, 32, 44, 0.8);
+  color: var(--ui-text);
+  border-radius: 8px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+}
 
-  .brand-dna-btn.primary {
-    border-color: rgba(111, 140, 255, 0.6);
-    background: rgba(111, 140, 255, 0.2);
-  }
+.brand-dna-btn.primary {
+  border-color: rgba(111, 140, 255, 0.6);
+  background: rgba(111, 140, 255, 0.2);
+}
 
-  .brand-dna-file {
-    display: none;
-  }
+.brand-dna-file {
+  display: none;
+}
 
-  .brand-dna-file-name {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.brand-dna-file-name {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
 
-  .brand-dna-status {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.brand-dna-status {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
 
-  .brand-dna-meta {
-    margin-top: 8px;
-  }
+.brand-dna-meta {
+  margin-top: 8px;
+}
 
-  .brand-dna-prompt {
-    margin: 6px 0 0;
-    padding: 8px;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(12, 16, 22, 0.7);
-    color: var(--ui-text);
-    font-size: 11px;
-    white-space: pre-wrap;
-  }
+.brand-dna-prompt {
+  margin: 6px 0 0;
+  padding: 8px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(12, 16, 22, 0.7);
+  color: var(--ui-text);
+  font-size: 11px;
+  white-space: pre-wrap;
+}
 
-  .brand-dna-output {
-    margin-top: 8px;
-    padding: 8px;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(16, 20, 28, 0.6);
-  }
+.brand-dna-output {
+  margin-top: 8px;
+  padding: 8px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(16, 20, 28, 0.6);
+}
 
-  .brand-dna-palette {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    margin-top: 6px;
-  }
+.brand-dna-palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
 
-  .brand-dna-swatch {
-    width: 22px;
-    height: 22px;
-    border-radius: 6px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-  }
+.brand-dna-swatch {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
 
-  .brand-dna-muted {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.brand-dna-muted {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
 
-  .brand-dna-object-list {
-    margin-top: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-md);
-  }
+.brand-dna-object-list {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
 
-  .brand-dna-object {
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(12, 16, 22, 0.7);
-    padding: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
+.brand-dna-object {
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(12, 16, 22, 0.7);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
-  .brand-dna-object-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-  }
+.brand-dna-object-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
 
-  .brand-dna-object-title {
-    font-size: 11px;
-    color: var(--ui-text);
-    word-break: break-all;
-  }
+.brand-dna-object-title {
+  font-size: 11px;
+  color: var(--ui-text);
+  word-break: break-all;
+}
 
-  .brand-dna-object-status {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.brand-dna-object-status {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
 
-  .brand-dna-empty {
-    font-size: 11px;
-    color: var(--ui-muted);
-    padding: 6px 0;
-  }
+.brand-dna-empty {
+  font-size: 11px;
+  color: var(--ui-muted);
+  padding: 6px 0;
+}
 
-  .ai-panel {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-md);
-    padding: 8px;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(16, 20, 28, 0.6);
-  }
+.ai-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  padding: 16px;
+  border-radius: 10px;
+  border: 1px solid var(--ui-border);
+  background: var(--ui-bg-2);
+}
 
-  .ai-modal {
-    position: fixed;
-    inset: 0;
-    background: rgba(6, 10, 16, 0.82);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10080;
-  }
+.ai-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(30, 30, 30, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10080;
+}
 
-  .ai-modal-card {
-    width: min(760px, 92vw);
-    max-height: 90vh;
-    overflow: auto;
-    background: rgba(16, 20, 28, 0.98);
-    border: 1px solid var(--ui-border);
-    border-radius: 16px;
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
-  }
+.ai-modal-card {
+  width: min(760px, 92vw);
+  max-height: 90vh;
+  overflow: auto;
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: 16px;
+  box-shadow: var(--ui-shadow-hover);
+}
 
-  .ai-modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 14px 18px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  }
+.ai-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--ui-border);
+  background: var(--ui-surface-2);
+}
 
-  .ai-modal-actions {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-  }
+.ai-modal-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
 
-  .ai-modal-title {
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--ui-text);
-  }
+.ai-modal-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--ui-text);
+}
 
-  .ai-modal-subtitle {
-    font-size: 11px;
-    color: var(--ui-muted);
-    margin-top: 3px;
-  }
+.ai-modal-subtitle {
+  font-size: 11px;
+  color: var(--ui-muted);
+  margin-top: 3px;
+}
 
-  .ai-modal-close {
-    border: 1px solid var(--ui-border);
-    background: rgba(25, 32, 44, 0.8);
-    color: var(--ui-text);
-    border-radius: 8px;
-    padding: 4px 12px;
-    font-size: 11px;
-    cursor: pointer;
-  }
+.ai-modal-close {
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface);
+  color: var(--ui-text);
+  border-radius: 8px;
+  padding: 4px 12px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
 
-  .ai-modal-gallery {
-    border: 1px solid var(--ui-border);
-    background: rgba(25, 32, 44, 0.8);
-    color: var(--ui-text);
-    border-radius: 8px;
-    padding: 4px 12px;
-    font-size: 11px;
-    cursor: pointer;
-  }
+.ai-modal-close:hover {
+  background: var(--ui-bg-2);
+  border-color: var(--ui-terracotta);
+}
 
-  .ai-loading {
-    display: none;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 12px;
-    border-radius: 10px;
-    background: linear-gradient(120deg, rgba(88, 163, 255, 0.1), rgba(255, 99, 148, 0.14));
-    border: 1px solid rgba(88, 163, 255, 0.25);
-  }
+.ai-modal-gallery {
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface);
+  color: var(--ui-text);
+  border-radius: 8px;
+  padding: 4px 12px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
 
-  .ai-loading.active {
-    display: flex;
-  }
+.ai-modal-gallery:hover {
+  background: var(--ui-bg-2);
+  border-color: var(--ui-terracotta);
+}
 
-  .ai-loading-ring {
-    width: 26px;
-    height: 26px;
-    border-radius: 50%;
-    border: 3px solid rgba(255, 255, 255, 0.15);
-    border-top-color: rgba(88, 163, 255, 0.9);
-    animation: ai-spin 0.9s linear infinite;
-  }
+.ai-loading {
+  display: none;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: rgba(227, 138, 90, 0.08);
+  border: 1px solid var(--ui-terracotta);
+}
 
-  .ai-loading-bar {
-    flex: 1;
-    height: 8px;
-    border-radius: 999px;
-    background: linear-gradient(90deg, rgba(88, 163, 255, 0.2), rgba(255, 99, 148, 0.7), rgba(88, 163, 255, 0.2));
-    background-size: 200% 100%;
-    animation: ai-bar 1.4s var(--ui-ease) infinite;
-  }
+.ai-loading.active {
+  display: flex;
+}
 
-  .ai-loading-text {
-    font-size: 11px;
-    color: var(--ui-text);
-  }
+.ai-loading-ring {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 3px solid var(--ui-border);
+  border-top-color: var(--ui-terracotta);
+  animation: ai-spin 0.9s linear infinite;
+}
 
-  @keyframes ai-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
+.ai-loading-bar {
+  flex: 1;
+  height: 8px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(227, 138, 90, 0.3), var(--ui-terracotta), rgba(227, 138, 90, 0.3));
+  background-size: 200% 100%;
+  animation: ai-bar 1.4s var(--ui-ease) infinite;
+}
 
-  @keyframes ai-bar {
-    0% {
-      background-position: 0% 50%;
-    }
+.ai-loading-text {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--ui-text);
+}
 
-    100% {
-      background-position: 100% 50%;
-    }
+@keyframes ai-spin {
+  to {
+    transform: rotate(360deg);
   }
+}
 
-  .ai-label {
-    font-size: 11px;
-    color: var(--ui-muted);
+@keyframes ai-bar {
+  0% {
+    background-position: 0% 50%;
   }
 
-  .ai-input,
-  .ai-select,
-  .ai-textarea {
-    width: 100%;
-    padding: 6px 8px;
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: rgba(10, 14, 20, 0.85);
-    color: var(--ui-text);
-    font-size: 12px;
+  100% {
+    background-position: 100% 50%;
   }
+}
 
-  .ai-textarea {
-    min-height: 70px;
-    resize: vertical;
-  }
+.ai-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--ui-text);
+  margin-bottom: 4px;
+}
 
-  .ai-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
+.ai-input,
+.ai-select,
+.ai-textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface);
+  color: var(--ui-text);
+  font-size: 12px;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
 
-  .ai-strength {
-    gap: var(--space-md);
-  }
+.ai-input:focus,
+.ai-select:focus,
+.ai-textarea:focus {
+  outline: none;
+  border-color: var(--ui-terracotta);
+  box-shadow: 0 0 0 3px rgba(227, 138, 90, 0.15);
+}
 
-  .ai-strength input[type="range"] {
-    flex: 1;
-    min-width: 160px;
-  }
+.ai-textarea {
+  min-height: 70px;
+  resize: vertical;
+  font-family: inherit;
+}
 
-  .ai-strength-value {
-    font-size: 11px;
-    color: var(--ui-text);
-    min-width: 20px;
-    text-align: right;
-  }
+.ai-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 
-  .ai-gallery {
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    background: rgba(12, 16, 22, 0.65);
-    padding: 8px;
-  }
+.ai-strength {
+  gap: var(--space-md);
+}
 
-  .ai-gallery.hidden {
-    display: none;
-  }
+.ai-strength input[type="range"] {
+  flex: 1;
+  min-width: 160px;
+}
 
-  .ai-gallery-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
-    gap: 8px;
-  }
+.ai-strength-value {
+  font-size: 11px;
+  color: var(--ui-text);
+  min-width: 20px;
+  text-align: right;
+}
 
-  .ai-gallery-item {
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: rgba(8, 10, 14, 0.7);
-    border-radius: 10px;
-    padding: 6px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    cursor: pointer;
-    text-align: left;
-  }
+.ai-gallery {
+  border-radius: 10px;
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface);
+  padding: 12px;
+  margin-top: 8px;
+}
 
-  .ai-gallery-item.active {
-    border-color: rgba(111, 140, 255, 0.6);
-    box-shadow: 0 0 0 1px rgba(111, 140, 255, 0.25);
-  }
+.ai-gallery.hidden {
+  display: none;
+}
 
-  .ai-gallery-thumb {
-    width: 100%;
-    height: 70px;
-    object-fit: contain;
-    border-radius: 6px;
-    background: rgba(6, 8, 12, 0.7);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-  }
+.ai-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+  gap: 8px;
+}
 
-  .ai-gallery-label {
-    font-size: 10px;
-    color: var(--ui-text);
-    word-break: break-all;
-  }
+.ai-gallery-item {
+  border: 2px solid var(--ui-border);
+  background: var(--ui-surface-2);
+  border-radius: 10px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  cursor: pointer;
+  text-align: left;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
 
-  .ai-gallery-empty {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.ai-gallery-item:hover {
+  border-color: var(--ui-terracotta);
+  background: var(--ui-surface);
+}
 
-  .ai-btn {
-    border: 1px solid var(--ui-border);
-    background: rgba(25, 32, 44, 0.8);
-    color: var(--ui-text);
-    border-radius: 8px;
-    padding: 4px 10px;
-    font-size: 11px;
-    cursor: pointer;
-  }
+.ai-gallery-item.active {
+  border-color: var(--ui-terracotta);
+  background: rgba(227, 138, 90, 0.1);
+  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.2);
+}
 
-  .ai-file {
-    display: none;
-  }
+.ai-gallery-thumb {
+  width: 100%;
+  height: 70px;
+  object-fit: contain;
+  border-radius: 6px;
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+}
 
-  .ai-file-name {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.ai-gallery-label {
+  font-size: 10px;
+  color: var(--ui-text);
+  word-break: break-all;
+  font-weight: 500;
+}
 
-  .ai-toggles label {
-    font-size: 11px;
-    color: var(--ui-text);
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-  }
+.ai-gallery-empty {
+  font-size: 11px;
+  color: var(--ui-muted);
+  padding: 20px;
+  text-align: center;
+}
 
-  .ai-actions .debug-btn {
-    flex: 1;
-  }
+.ai-btn {
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface);
+  color: var(--ui-text);
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
 
-  .ai-status {
-    font-size: 11px;
-    color: var(--ui-muted);
-  }
+.ai-btn:hover:not(:disabled) {
+  background: var(--ui-bg-2);
+  border-color: var(--ui-terracotta);
+}
 
-  .ai-preview {
-    width: 100%;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: rgba(8, 10, 14, 0.6);
-    padding: 8px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 140px;
-  }
+.ai-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 
-  .ai-preview img {
-    max-width: 100%;
-    max-height: 220px;
-    object-fit: contain;
-  }
+.ai-file {
+  display: none;
+}
 
-  /* Asset Editor Modal */
-  .asset-editor-modal {
-    position: fixed;
-    inset: 0;
-    background: rgba(6, 10, 16, 0.82);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10060;
-  }
+.ai-file-name {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
 
-  .asset-editor-card {
-    width: min(680px, 90vw);
-    max-height: 85vh;
-    background: rgba(16, 20, 28, 0.98);
-    border: 1px solid var(--ui-border);
-    border-radius: 16px;
-    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
+.ai-toggles label {
+  font-size: 11px;
+  color: var(--ui-text);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
 
-  .asset-editor-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  }
+.ai-actions .debug-btn {
+  flex: 1;
+}
 
-  .asset-editor-title {
-    font-size: 16px;
-    font-weight: 700;
-    color: var(--ui-text);
-  }
+.ai-status {
+  font-size: 11px;
+  color: var(--ui-muted);
+  font-weight: 500;
+}
 
-  .asset-editor-subtitle {
-    font-size: 12px;
-    color: var(--ui-muted);
-    margin-top: 4px;
-  }
+.ai-preview {
+  width: 100%;
+  border-radius: 10px;
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface);
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 140px;
+}
 
-  .asset-editor-close {
-    border: 1px solid var(--ui-border);
-    background: rgba(25, 32, 44, 0.8);
-    color: var(--ui-text);
-    border-radius: 8px;
-    padding: 6px 12px;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.15s var(--ui-ease);
-  }
+.ai-preview img {
+  max-width: 100%;
+  max-height: 220px;
+  object-fit: contain;
+  border-radius: 8px;
+}
 
-  .asset-editor-close:hover {
-    background: rgba(25, 32, 44, 1);
-  }
+/* Asset Editor Modal */
+.asset-editor-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(6, 10, 16, 0.82);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10060;
+}
 
-  .asset-editor-tabs {
-    display: flex;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  }
+.asset-editor-card {
+  width: min(680px, 90vw);
+  max-height: 85vh;
+  background: rgba(16, 20, 28, 0.98);
+  border: 1px solid var(--ui-border);
+  border-radius: 16px;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
 
-  .asset-editor-tab {
-    flex: 1;
-    padding: 12px 16px;
-    text-align: center;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--ui-muted);
-    cursor: pointer;
-    border-bottom: 2px solid transparent;
-    transition: all 0.15s var(--ui-ease);
-  }
+.asset-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
 
-  .asset-editor-tab.active {
-    color: var(--ui-text);
-    border-bottom-color: var(--ui-accent);
-  }
+.asset-editor-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--ui-text);
+}
 
-  .asset-editor-tab:hover:not(.active) {
-    color: var(--ui-text);
-    background: rgba(255, 255, 255, 0.02);
-  }
+.asset-editor-subtitle {
+  font-size: 12px;
+  color: var(--ui-muted);
+  margin-top: 4px;
+}
 
-  .asset-editor-body {
-    flex: 1;
-    overflow-y: auto;
-    padding: 20px;
-  }
+.asset-editor-close {
+  border: 1px solid var(--ui-border);
+  background: rgba(25, 32, 44, 0.8);
+  color: var(--ui-text);
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.15s var(--ui-ease);
+}
 
-  .asset-editor-tab-panel {
-    display: none;
-  }
+.asset-editor-close:hover {
+  background: rgba(25, 32, 44, 1);
+}
 
-  .asset-editor-tab-panel.active {
-    display: block;
-  }
+.asset-editor-tabs {
+  display: flex;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
 
-  .asset-editor-hint {
-    font-size: 12px;
-    color: var(--ui-muted);
-    text-align: center;
-    padding: 20px;
-    line-height: 1.5;
-  }
+.asset-editor-tab {
+  flex: 1;
+  padding: 12px 16px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ui-muted);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s var(--ui-ease);
+}
 
-  .asset-editor-ai-controls {
-    display: flex;
-    gap: 12px;
-    justify-content: center;
-    padding: 20px;
-  }
+.asset-editor-tab.active {
+  color: var(--ui-text);
+  border-bottom-color: var(--ui-accent);
+}
 
-  .asset-editor-actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 12px;
-    padding: 16px 20px;
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-  }
+.asset-editor-tab:hover:not(.active) {
+  color: var(--ui-text);
+  background: rgba(255, 255, 255, 0.02);
+}
 
-  .asset-preview-modal {
-    position: fixed;
-    inset: 0;
-    background: rgba(8, 10, 14, 0.72);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10050;
-  }
+.asset-editor-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
 
-  .asset-preview-card {
-    width: min(720px, 92vw);
-    max-height: 82vh;
-    background: rgba(16, 20, 28, 0.98);
-    border: 1px solid var(--ui-border);
-    border-radius: 14px;
-    box-shadow: var(--ui-shadow);
-    display: flex;
-    flex-direction: column;
-  }
+.asset-editor-tab-panel {
+  display: none;
+}
 
-  .asset-preview-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px 14px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    color: var(--ui-text);
-  }
+.asset-editor-tab-panel.active {
+  display: block;
+}
 
-  .asset-preview-title {
-    font-size: 12px;
-    font-weight: 600;
-    word-break: break-all;
-  }
+.asset-editor-hint {
+  font-size: 12px;
+  color: var(--ui-muted);
+  text-align: center;
+  padding: 20px;
+  line-height: 1.5;
+}
 
-  .asset-preview-close {
-    border: 1px solid var(--ui-border);
-    background: rgba(25, 32, 44, 0.8);
-    color: var(--ui-text);
-    border-radius: 8px;
-    padding: 4px 10px;
-    font-size: 11px;
-    cursor: pointer;
-  }
+.asset-editor-ai-controls {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  padding: 20px;
+}
 
-  .asset-preview-meta {
-    padding: 0 14px 10px;
-    color: var(--ui-muted);
-    font-size: 11px;
-    word-break: break-all;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  }
+.asset-editor-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 16px 20px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
 
-  .asset-preview-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
+.asset-preview-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(8, 10, 14, 0.72);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10050;
+}
 
-  .asset-preview-change {
-    border: 1px solid var(--ui-border);
-    background: rgba(25, 32, 44, 0.8);
-    color: var(--ui-text);
-    border-radius: 8px;
-    padding: 4px 10px;
-    font-size: 11px;
-    cursor: pointer;
-  }
+.asset-preview-card {
+  width: min(720px, 92vw);
+  max-height: 82vh;
+  background: rgba(16, 20, 28, 0.98);
+  border: 1px solid var(--ui-border);
+  border-radius: 14px;
+  box-shadow: var(--ui-shadow);
+  display: flex;
+  flex-direction: column;
+}
 
-  .asset-preview-ai {
-    border: 1px solid var(--ui-border);
-    background: rgba(25, 32, 44, 0.8);
-    color: var(--ui-text);
-    border-radius: 8px;
-    padding: 4px 10px;
-    font-size: 11px;
-    cursor: pointer;
-  }
+.asset-preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  color: var(--ui-text);
+}
 
-  .asset-preview-body {
-    padding: 12px;
-    overflow: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+.asset-preview-title {
+  font-size: 12px;
+  font-weight: 600;
+  word-break: break-all;
+}
 
-  .asset-preview-ai-output {
-    border-top: 1px solid rgba(255, 255, 255, 0.06);
-    padding: 10px 12px 14px;
-  }
+.asset-preview-close {
+  border: 1px solid var(--ui-border);
+  background: rgba(25, 32, 44, 0.8);
+  color: var(--ui-text);
+  border-radius: 8px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+}
 
-  .asset-preview-ai-output.hidden {
-    display: none;
-  }
+.asset-preview-meta {
+  padding: 0 14px 10px;
+  color: var(--ui-muted);
+  font-size: 11px;
+  word-break: break-all;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
 
-  .asset-preview-ai-label {
-    font-size: 11px;
-    color: var(--ui-muted);
-    margin-bottom: 6px;
-  }
+.asset-preview-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 
-  .asset-preview-ai-image {
-    width: 100%;
-    max-height: 200px;
-    object-fit: contain;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: rgba(8, 10, 14, 0.6);
-  }
+.asset-preview-change {
+  border: 1px solid var(--ui-border);
+  background: rgba(25, 32, 44, 0.8);
+  color: var(--ui-text);
+  border-radius: 8px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+}
 
-  .asset-preview-body img {
-    max-width: 100%;
-    max-height: 60vh;
-    object-fit: contain;
-  }
+.asset-preview-ai {
+  border: 1px solid var(--ui-border);
+  background: rgba(25, 32, 44, 0.8);
+  color: var(--ui-text);
+  border-radius: 8px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+}
 
-  .asset-preview-body audio {
-    width: 100%;
-  }
+.asset-preview-body {
+  padding: 12px;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  .asset-preview-body pre {
-    width: 100%;
-    white-space: pre-wrap;
-    color: var(--ui-text);
-    font-family: "JetBrains Mono", "SF Mono", "Consolas", "Monaco", monospace;
-    font-size: 12px;
-  }
+.asset-preview-ai-output {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 10px 12px 14px;
+}
 
-  .asset-crop-modal {
-    position: fixed;
-    inset: 0;
-    background: rgba(8, 10, 14, 0.78);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10060;
-  }
+.asset-preview-ai-output.hidden {
+  display: none;
+}
 
-  .asset-crop-card {
-    width: min(860px, 96vw);
-    background: rgba(16, 20, 28, 0.98);
-    border: 1px solid var(--ui-border);
-    border-radius: 14px;
-    box-shadow: var(--ui-shadow);
-    display: flex;
-    flex-direction: column;
-  }
+.asset-preview-ai-label {
+  font-size: 11px;
+  color: var(--ui-muted);
+  margin-bottom: 6px;
+}
+
+.asset-preview-ai-image {
+  width: 100%;
+  max-height: 200px;
+  object-fit: contain;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(8, 10, 14, 0.6);
+}
+
+.asset-preview-body img {
+  max-width: 100%;
+  max-height: 60vh;
+  object-fit: contain;
+}
+
+.asset-preview-body audio {
+  width: 100%;
+}
+
+.asset-preview-body pre {
+  width: 100%;
+  white-space: pre-wrap;
+  color: var(--ui-text);
+  font-family: "JetBrains Mono", "SF Mono", "Consolas", "Monaco", monospace;
+  font-size: 12px;
+}
+
+.asset-crop-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(8, 10, 14, 0.78);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10060;
+}
 
-  .asset-crop-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    padding: 12px 16px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-    color: var(--ui-text);
-  }
+.asset-crop-card {
+  width: min(860px, 96vw);
+  background: rgba(16, 20, 28, 0.98);
+  border: 1px solid var(--ui-border);
+  border-radius: 14px;
+  box-shadow: var(--ui-shadow);
+  display: flex;
+  flex-direction: column;
+}
 
-  .asset-crop-title {
-    font-size: 13px;
-    font-weight: 600;
-  }
+.asset-crop-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  color: var(--ui-text);
+}
 
-  .asset-crop-subtitle {
-    font-size: 11px;
-    color: var(--ui-muted);
-    margin-top: 2px;
-  }
+.asset-crop-title {
+  font-size: 13px;
+  font-weight: 600;
+}
 
-  .asset-crop-close {
-    border: 1px solid var(--ui-border);
-    background: rgba(25, 32, 44, 0.8);
-    color: var(--ui-text);
-    border-radius: 8px;
-    padding: 4px 10px;
-    font-size: 11px;
-    cursor: pointer;
-  }
+.asset-crop-subtitle {
+  font-size: 11px;
+  color: var(--ui-muted);
+  margin-top: 2px;
+}
 
-  .asset-crop-body {
-    padding: 16px;
-    display: flex;
-    justify-content: center;
-    gap: 16px;
-    flex-wrap: nowrap;
-    align-items: flex-start;
-  }
+.asset-crop-close {
+  border: 1px solid var(--ui-border);
+  background: rgba(25, 32, 44, 0.8);
+  color: var(--ui-text);
+  border-radius: 8px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+}
 
-  .asset-crop-column {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    align-items: center;
-    min-width: 0;
-  }
+.asset-crop-body {
+  padding: 16px;
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
 
-  .asset-crop-label {
-    font-size: 11px;
-    color: var(--ui-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-  }
+.asset-crop-column {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
 
-  .asset-crop-canvas {
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: rgba(8, 10, 14, 0.55);
-    cursor: grab;
-  }
+.asset-crop-label {
+  font-size: 11px;
+  color: var(--ui-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
 
-  .asset-crop-preview {
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    background: rgba(8, 10, 14, 0.55);
-  }
+.asset-crop-canvas {
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(8, 10, 14, 0.55);
+  cursor: grab;
+}
 
-  .asset-crop-canvas:active {
-    cursor: grabbing;
-  }
+.asset-crop-preview {
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(8, 10, 14, 0.55);
+}
 
-  .asset-crop-controls {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 0 16px 12px;
-    color: var(--ui-text);
-    font-size: 12px;
-  }
+.asset-crop-canvas:active {
+  cursor: grabbing;
+}
 
-  .asset-crop-controls label {
-    min-width: 42px;
-  }
+.asset-crop-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px 12px;
+  color: var(--ui-text);
+  font-size: 12px;
+}
 
-  .asset-crop-zoom {
-    flex: 1;
-  }
+.asset-crop-controls label {
+  min-width: 42px;
+}
 
-  .asset-crop-zoom-value {
-    min-width: 50px;
-    text-align: right;
-    color: var(--ui-muted);
-  }
+.asset-crop-zoom {
+  flex: 1;
+}
 
-  .asset-crop-reset {
-    border: 1px solid var(--ui-border);
-    background: rgba(25, 32, 44, 0.8);
-    color: var(--ui-text);
-    border-radius: 8px;
-    padding: 4px 10px;
-    font-size: 11px;
-    cursor: pointer;
-  }
+.asset-crop-zoom-value {
+  min-width: 50px;
+  text-align: right;
+  color: var(--ui-muted);
+}
 
-  .asset-crop-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--space-md);
-    padding: 0 16px 16px;
-  }
+.asset-crop-reset {
+  border: 1px solid var(--ui-border);
+  background: rgba(25, 32, 44, 0.8);
+  color: var(--ui-text);
+  border-radius: 8px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+}
 
-  .asset-crop-actions button {
-    border-radius: 10px;
-    padding: 6px 14px;
-    font-size: 12px;
-    border: 1px solid var(--ui-border);
-    background: rgba(28, 36, 50, 0.85);
-    color: var(--ui-text);
-    cursor: pointer;
-  }
+.asset-crop-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-md);
+  padding: 0 16px 16px;
+}
 
-  .asset-crop-apply {
-    background: var(--ui-accent);
-    border-color: transparent;
-    color: #10151f;
-    font-weight: 600;
-  }
+.asset-crop-actions button {
+  border-radius: 10px;
+  padding: 6px 14px;
+  font-size: 12px;
+  border: 1px solid var(--ui-border);
+  background: rgba(28, 36, 50, 0.85);
+  color: var(--ui-text);
+  cursor: pointer;
+}
 
-  @media (max-width: 720px) {
-    .customize-grid {
-      grid-template-columns: 1fr;
-    }
-  }
+.asset-crop-apply {
+  background: var(--ui-accent);
+  border-color: transparent;
+  color: #10151f;
+  font-weight: 600;
+}
 
-  .scene-panel-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 10px 14px;
-    background-color: rgba(24, 28, 38, 0.95);
-    color: var(--ui-text);
-    font-size: 12px;
-    user-select: none;
-    cursor: move;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+@media (max-width: 720px) {
+  .customize-grid {
+    grid-template-columns: 1fr;
   }
+}
 
-  .scene-panel-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
+.scene-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  background-color: rgba(24, 28, 38, 0.95);
+  color: var(--ui-text);
+  font-size: 12px;
+  user-select: none;
+  cursor: move;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
 
-  .scene-panel-action {
-    border: 1px solid var(--ui-border);
-    border-radius: 6px;
-    background: #1f2633;
-    color: var(--ui-muted);
-    font-size: 11px;
-    padding: 4px 8px;
-    cursor: pointer;
-  }
+.scene-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 
-  .scene-panel-action:hover {
-    border-color: rgba(255, 159, 67, 0.6);
-    color: var(--ui-text);
-  }
+.scene-panel-action {
+  border: 1px solid var(--ui-border);
+  border-radius: 6px;
+  background: #1f2633;
+  color: var(--ui-muted);
+  font-size: 11px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
 
-  .scene-panel-toggle {
-    border: none;
-    background: transparent;
-    color: var(--ui-muted);
-    font-size: 14px;
-    cursor: pointer;
-    padding: 4px 8px;
-    border-radius: 6px;
-    transition: all var(--ui-duration-fast) var(--ui-ease);
-  }
+.scene-panel-action:hover {
+  border-color: rgba(255, 159, 67, 0.6);
+  color: var(--ui-text);
+}
 
-  /* Terracotta hover for close button */
-  .scene-panel-toggle:hover {
-    background: rgba(227, 138, 90, 0.15);
-    color: var(--ui-terracotta);
-  }
+.scene-panel-toggle {
+  border: none;
+  background: transparent;
+  color: var(--ui-muted);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
 
-  .panel-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
+/* Terracotta hover for close button */
+.scene-panel-toggle:hover {
+  background: rgba(227, 138, 90, 0.15);
+  color: var(--ui-terracotta);
+}
 
-  .panel-pill {
-    padding: 2px 8px;
-    border-radius: 999px;
-    background: rgba(61, 214, 198, 0.12);
-    color: var(--ui-accent);
-    font-size: 10px;
-    text-transform: uppercase;
-    letter-spacing: 0.6px;
-  }
+.panel-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 
-  .panel-accent-blue .panel-pill {
-    background: rgba(111, 140, 255, 0.14);
-    color: var(--ui-accent-3);
-  }
+.panel-pill {
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(61, 214, 198, 0.12);
+  color: var(--ui-accent);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
 
-  .panel-accent-amber .panel-pill {
-    background: rgba(255, 159, 67, 0.16);
-    color: var(--ui-accent-2);
-  }
+.panel-accent-blue .panel-pill {
+  background: rgba(111, 140, 255, 0.14);
+  color: var(--ui-accent-3);
+}
 
-  .panel-accent-violet .panel-pill {
-    background: rgba(191, 126, 255, 0.18);
-    color: #d6b7ff;
-  }
+.panel-accent-amber .panel-pill {
+  background: rgba(255, 159, 67, 0.16);
+  color: var(--ui-accent-2);
+}
 
-  .panel-title-text {
-    font-weight: 700;
-    font-size: 12px;
-    letter-spacing: 0.4px;
-  }
+.panel-accent-violet .panel-pill {
+  background: rgba(191, 126, 255, 0.18);
+  color: #d6b7ff;
+}
 
-  .panel-accent-teal {
-    border-color: rgba(61, 214, 198, 0.35);
-  }
+.panel-title-text {
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: 0.4px;
+}
 
-  .panel-accent-blue {
-    border-color: rgba(111, 140, 255, 0.35);
-  }
+.panel-accent-teal {
+  border-color: rgba(61, 214, 198, 0.35);
+}
 
-  .panel-accent-amber {
-    border-color: rgba(255, 159, 67, 0.4);
-  }
+.panel-accent-blue {
+  border-color: rgba(111, 140, 255, 0.35);
+}
 
-  .panel-accent-violet {
-    border-color: rgba(191, 126, 255, 0.35);
-  }
+.panel-accent-amber {
+  border-color: rgba(255, 159, 67, 0.4);
+}
 
-  .scene-panel-body {
-    padding: 12px 14px 16px;
-    overflow-y: auto;
-    max-height: calc(78vh - 44px);
-  }
+.panel-accent-violet {
+  border-color: rgba(191, 126, 255, 0.35);
+}
 
-  .scene-panel.collapsed .scene-panel-body {
-    display: none;
-  }
+.scene-panel-body {
+  padding: 12px 14px 16px;
+  overflow-y: auto;
+  max-height: calc(78vh - 44px);
+}
 
+.scene-panel.collapsed .scene-panel-body {
+  display: none;
+}
 
 /* ========== 04-device-frame.css ========== */
 /* 04 Device Frame */
@@ -3120,7 +3171,7 @@
 .workbench-content .scene-panel-header {
   display: none;
 
-/* Hide individual panel headers */
+  /* Hide individual panel headers */
 }
 
 .workbench-content .scene-panel-body {
@@ -3256,6 +3307,7 @@
 
 .inspector-panel {
   width: 340px;
+  min-width: 320px;
   max-width: 90vw;
 }
 
@@ -3541,7 +3593,7 @@
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
   padding: 10px 12px;
-  color: var(--ui-text);
+  color: var(--ui-dark-text);
   font-family: inherit;
   font-size: 13px;
   margin-bottom: 16px;
@@ -3693,6 +3745,7 @@
   filter: grayscale(1);
   opacity: 0.5;
 }
+
 /* Version Management Section */
 .version-management-section {
   margin-top: 16px;
@@ -3816,7 +3869,6 @@
   line-height: 1.4;
 }
 
-
 /* ========== 08-breadcrumbs.css ========== */
 /* Breadcrumbs */
 .scene-breadcrumbs {
@@ -3946,6 +3998,7 @@
 
 .inspector-input {
   flex: 1;
+  min-width: 80px;
   background: var(--ui-surface);
   color: var(--ui-text);
   border: 1px solid var(--ui-border);