#assetWorkspace[hidden], #assetWorkspace [hidden], #assetPreview[hidden] { display: none !important; }
#assetWorkspace { min-width: 0; }
#assetWorkspace .asset-section { gap: 10px; }
#assetWorkspace h3 { text-transform: none; color: #d7dce2; font-size: 14px; }
#assetWorkspace label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #b8c5d1; min-width: 0; }
#assetWorkspace input:not([type="checkbox"]), #assetWorkspace select, #assetWorkspace textarea { width: 100%; min-width: 0; }
#assetWorkspace textarea { resize: vertical; line-height: 1.5; }
#assetWorkspace .asset-check { flex-direction: row; align-items: center; gap: 8px; }
#assetWorkspace .asset-check input { margin: 0; accent-color: #79b8ff; flex-shrink: 0; }
#assetWorkspace .asset-size-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
#assetWorkspace .asset-button-row { display: flex; gap: 8px; flex-wrap: wrap; }
#assetWorkspace .asset-button-row button { flex: 1; }
#assetWorkspace .asset-description { margin: 0; font-size: 12px; color: #c6e3ff; line-height: 1.5; }
#assetWorkspace .caption { line-height: 1.5; color: #a7b3bf; margin: 0; }
#assetWorkspace .asset-reference-row { display: flex; gap: 10px; align-items: center; }
#assetFloorThumb { width: 64px; height: 64px; image-rendering: pixelated; flex: 0 0 64px; border-radius: 4px; }
#assetReferenceCard { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px; border: 1px solid #465565; border-radius: 4px; }
#assetReferenceThumb { width: 48px; height: auto; image-rendering: pixelated; object-fit: fill; flex: 0 0 48px; background: repeating-conic-gradient(#29343d 0% 25%, #35424d 0% 50%) 50% / 12px 12px; }
#assetPreview { width: 320px; max-width: 100%; height: auto; image-rendering: pixelated; border: 1px solid #465565; border-radius: 4px; background: #1b1e22; margin-top: 10px; }
#assetWorkspace :is(button, select, input, textarea):focus-visible { outline: 2px solid #79b8ff; outline-offset: 2px; }
@media (max-width: 600px) { #assetWorkspace .asset-button-row button { min-height: 40px; } }
[hidden] { display: none !important; }
header { flex-wrap: wrap; }
#editorModes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; background: #1b1e22; }
#editorModes [aria-pressed="true"] { background: #3d6ea5; border-color: #79b8ff; }
#center, #left, #right { min-width: 0; }
#canvasWrap { max-width: 100%; }
#canvas { display: block; max-width: 100%; height: auto; touch-action: none; }
#svSquare, #hueStrip { touch-action: none; }
#assetPreviewBox { max-width: 100%; }
#assetPreviewBox h3 { font-size: 14px; margin: 16px 0 0; }
header [data-guide-link], #submissionBox a { color: #79b8ff; }
header [data-guide-link] { font-size: 12px; white-space: nowrap; }
.submission-help { margin: 0 0 4px; font-size: 12px; line-height: 1.5; color: #c1ccd6; }
#submissionBox > label, .submission-advanced label { font-size: 12px; color: #c1ccd6; }
.submission-advanced { margin: 4px 0; font-size: 12px; }
.submission-advanced summary { cursor: pointer; color: #a7b3bf; }
.submission-advanced label { display: block; margin-top: 8px; }
.submission-advanced input { width: 100%; margin-top: 4px; }
#submitStatus { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#submitStatus:empty, #submitResult:empty { display: none; }
#submitStatus.submission-error { color: #ffaca5; }
@media (max-width: 1100px) {
  body.asset-mode main { grid-template-columns: minmax(0, 1fr) minmax(250px, 1fr); }
  body.asset-mode #left { grid-column: 1 / -1; }
  #assetWorkspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 600px) {
  body.asset-mode main, #assetWorkspace { display: flex; flex-direction: column; }
  main > *, #assetWorkspace > * { width: 100%; }
  #editorModes .caption { flex-basis: 100%; }
  /* Keep drawing and paint tools immediately after setup instead of below every settings panel. */
  body.asset-mode :is(#left, #right, #assetWorkspace) { display: contents; }
  body.asset-mode #assetWorkspace > .asset-section:nth-of-type(1) { order: 0; }
  body.asset-mode #center { order: 1; }
  body.asset-mode #right > .box:nth-of-type(1) { order: 2; }
  body.asset-mode #right > .box:nth-of-type(2) { order: 3; }
  body.asset-mode #assetWorkspace > .asset-section:nth-of-type(3) { order: 4; }
  body.asset-mode #assetCurrent { order: 5; }
  body.asset-mode #assetBehaviorSection { order: 6; }
  body.asset-mode #right > .box:nth-of-type(3) { order: 7; }
  body.asset-mode #right > .box:nth-of-type(4) { order: 8; }
  body.asset-mode #assetWorkspace > .asset-section:nth-of-type(5) { order: 9; }
}