.texture-browser { padding-top: 3rem; padding-bottom: 3rem; }
.texture-heading h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.texture-heading p { max-width: 650px; color: var(--muted); }
.texture-filters { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 1rem; margin: 2rem 0 1rem; }
.texture-browser label { display: grid; gap: .4rem; font-size: .9rem; color: var(--muted); min-width: 0; }
.texture-browser input, .texture-browser select { width: 100%; min-width: 0; padding: .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.texture-results-bar, .texture-paging, .texture-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.texture-results-bar p, .texture-credit, #texture-detail { color: var(--muted); font-size: .9rem; }
.texture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.texture-card-button { display: flex; flex-direction: column; gap: .6rem; padding: .8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.texture-card-button:hover { border-color: var(--accent); background: var(--surface-2); }
.texture-thumb, .texture-stage { background-color: #22272d; background-image: conic-gradient(#303740 25%, transparent 0 50%, #303740 0 75%, transparent 0); background-size: 20px 20px; }
.texture-thumb { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 4px; }
.texture-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: auto; image-rendering: pixelated; }
.texture-thumb[data-error]::after { content: attr(data-error); position: absolute; inset: 0; background: var(--surface); font-size: .8rem; }
.texture-name { font-size: .85rem; line-height: 1.35; overflow-wrap: anywhere; }
.texture-project-name { color: var(--muted); font-size: .75rem; margin-top: auto; overflow-wrap: anywhere; }
.texture-paging { justify-content: center; flex-wrap: wrap; }
.texture-credit { margin-top: 2rem; max-width: 800px; }
.texture-browser button:disabled { opacity: .45; cursor: default; }
#texture-dialog { width: min(760px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--bg-raised); border: 1px solid var(--line-bright); border-radius: var(--radius); padding: 1.5rem; color: var(--text); }
#texture-dialog::backdrop { background: rgb(0 0 0 / .8); }
.texture-dialog-top { align-items: flex-start; margin-bottom: 1rem; }
.texture-dialog-top h2 { font-size: 1.2rem; overflow-wrap: anywhere; margin: 0; }
.texture-stage { display: grid; place-items: center; border-radius: 8px; padding: 1rem; }
#texture-preview { max-width: 100%; width: 384px; height: auto; image-rendering: pixelated; }
.texture-preview-controls { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
.texture-preview-controls label { flex: 1 1 140px; }
@media (max-width: 640px) {
  .texture-filters { grid-template-columns: 1fr; }
  .texture-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .texture-results-bar { align-items: flex-start; }
  #texture-dialog { padding: 1rem; }
}

#texture-block { display: block; width: 100%; height: 440px; touch-action: none; cursor: grab; image-rendering: pixelated; }
#texture-block:active { cursor: grabbing; }
#texture-block-status { color: var(--muted); font-size: .9rem; }

.texture-mode-switch { display: flex; gap: .5rem; margin: 1rem 0; }
.texture-mode-switch [aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.block-stage { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: radial-gradient(ellipse at center, #29333f, #10151b 75%); }
.texture-controls-hint { color: var(--faint); font-size: .8rem; margin: .7rem 0; }
#texture-block-pane .texture-preview-controls { margin-top: 1rem; }
.texture-block-id { overflow-wrap: anywhere; margin-top: -.5rem; }
.texture-footer-controls { border-top: 1px solid var(--line); padding-top: 1rem; }
#texture-block-status[data-mode="partial"], #texture-block-status[data-mode="error"] { color: var(--accent); }
@media (max-width: 640px) {
  #texture-block { height: 300px; }
  .texture-preview-controls .button { padding: .5rem .65rem; }
}