/* Entry is a native modal: the current workspace stays inert until confirmed. */
.texture-paint-entry-dialog {
  box-sizing: border-box;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 24px;
  overflow: auto;
  color: #e8e8e8;
  background: #292929;
  border: 1px solid #505050;
  border-radius: 6px;
  box-shadow: 0 18px 70px #0009;
  font-family: inherit;
}
.texture-paint-entry-dialog::backdrop { background: #0009; }
.texture-paint-entry-dialog h2 { margin: 0 0 10px; font-size: 20px; }
.texture-paint-entry-dialog p { margin: 0 0 20px; color: #bfbfbf; line-height: 1.5; font-size: 14px; }
.texture-paint-entry-choices { display: grid; gap: 10px; }
.texture-paint-entry-dialog button {
  min-height: 44px;
  border: 1px solid #565656;
  border-radius: 3px;
  color: #eee;
  background: #343434;
  font: inherit;
  cursor: pointer;
}
.texture-paint-entry-dialog button:hover:not(:disabled) { background: #3d3d3d; border-color: #168cff; }
.texture-paint-entry-dialog button:focus-visible { outline: 2px solid #168cff; outline-offset: 3px; }
.texture-paint-entry-dialog button:disabled { opacity: .45; cursor: default; }
.texture-paint-entry-dialog [hidden] { display: none !important; }
.texture-paint-entry-choice { display: grid; gap: 6px; padding: 16px; text-align: left; }
.texture-paint-entry-choice strong { font-size: 15px; }
.texture-paint-entry-choice span { color: #bfbfbf; font-size: 13px; line-height: 1.45; }
.texture-paint-entry-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.texture-paint-entry-actions button { padding: 9px 16px; font-size: 14px; }
#texture-paint-entry-auto-uv { background: #126dba; border-color: #168cff; }
.texture-paint-entry-dialog[aria-busy="true"] { cursor: progress; }

/* Week 1 texture layers: compact touch-first material stack. */
.texture-layer-resize-handle { display: none; }
.texture-layer-outliner {
  display: none;
  position: relative;
  z-index: 38;
  width: auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,.13);
  background: #121214;
  box-shadow: -8px 0 22px rgba(0,0,0,.28);
}
body.mode-tpaint .right-outliner { display: none !important; }
body.mode-tpaint #ltool-frame,
body.mode-tpaint .left-tools > .left-tool-sep,
body.mode-tpaint #tpaint-color-tool { display: none !important; }
body.mode-tpaint .left-tools { justify-content: flex-start; }
body.mode-tpaint #ltool-paint-tools {
  max-height: calc(100dvh - 74px);
  overflow-x: visible;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
body.mode-tpaint #ltool-paint-tools::-webkit-scrollbar { display: none; }
.tpaint-tool-separator { flex: 0 0 1px; width: 32px; margin: 2px 0; background: rgba(255,255,255,.12); }
.tpaint-tool:disabled { cursor: not-allowed; opacity: .32; filter: grayscale(1); }
.tpaint-tool:disabled.active { background: rgba(60,60,60,.85); border-color: rgba(255,255,255,.08); color: var(--text-dim); }
.tpaint-tool-secondary { opacity: .78; }
body.mode-tpaint.texture-layer-dock-layout #app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(330px, 34vw, 410px);
  grid-template-rows: calc(var(--mobile-modebar-h, 54px) + env(safe-area-inset-top)) minmax(0, 1fr);
}
body.mode-tpaint.texture-layer-dock-layout.texture-layer-dock-closed #app {
  grid-template-columns: minmax(0, 1fr) 36px;
}
body.mode-tpaint.texture-layer-dock-layout .modebar {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  min-width: 0;
}
body.mode-tpaint.texture-layer-dock-layout .viewport-wrap {
  grid-column: 1;
  grid-row: 2;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
}
body.mode-tpaint.texture-layer-dock-layout .texture-layer-outliner {
  display: flex;
  grid-column: 2;
  grid-row: 1 / 3;
  flex-direction: column;
}
body.mode-tpaint.texture-layer-dock-layout .texture-layer-outliner.is-collapsed { display: none; }
body.mode-tpaint.texture-layer-dock-layout #properties-panel { display: none !important; }
body.mode-tpaint.texture-layer-sheet-layout .texture-layer-outliner,
body.mode-tpaint.texture-layer-sheet-layout .texture-layer-dock-tab { display: none !important; }
body.mode-tpaint.texture-layer-sheet-layout #properties-panel { display: flex !important; }
.texture-layer-outliner,
.texture-layer-outliner * { box-sizing: border-box; min-width: 0; }
.texture-layer-dock-global-actions {
  position: absolute;
  z-index: 3;
  top: 5px;
  right: 6px;
  display: flex;
  gap: 4px;
}
.texture-layer-dock-global-actions button,
#texture-layer-inspector-collapse,
#texture-layer-inspector-close {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  color: #d9d9dc;
}
.texture-layer-dock-global-actions button:hover,
#texture-layer-inspector-collapse:hover,
#texture-layer-inspector-close:hover { background: rgba(255,255,255,.1); color: #fff; }
.texture-layer-dock-global-actions svg,
#texture-layer-inspector-collapse svg,
#texture-layer-inspector-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 150ms ease;
}
.texture-layer-outliner.is-layers-collapsed #texture-layer-stack-collapse svg,
.texture-layer-outliner.is-properties-collapsed #texture-layer-inspector-collapse svg { transform: rotate(180deg); }
.texture-layer-dock-stack {
  display: flex;
  flex: 0 0 var(--texture-layer-stack-size, 38%);
  min-height: 120px;
  overflow: hidden;
}
.texture-layer-dock-stack > div { display: flex; flex: 1; overflow: hidden; }
.texture-layer-outline-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.texture-layer-dock-divider {
  position: relative;
  flex: 0 0 9px;
  border-top: 1px solid rgba(255,255,255,.11);
  border-bottom: 1px solid rgba(0,0,0,.5);
  background: #292a2d;
  cursor: row-resize;
  touch-action: none;
  outline: none;
}
.texture-layer-dock-divider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  width: 34px;
  height: 2px;
  border-radius: 9px;
  background: rgba(255,255,255,.28);
  transform: translateX(-50%);
}
.texture-layer-dock-divider:hover,
.texture-layer-dock-divider:focus-visible,
.texture-layer-dock-divider.is-dragging { background: rgba(255,132,0,.35); }
.texture-layer-dock-inspector { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow: hidden; }
.texture-layer-dock-inspector-header {
  display: flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: #202124;
}
.texture-layer-inspector-target { display: flex; flex: 1; align-items: center; gap: 8px; overflow: hidden; }
.texture-layer-inspector-target > i {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(255,139,20,.32);
  border-radius: 6px;
  background: rgba(255,139,20,.1);
  color: var(--accent);
  font: normal 800 11px/1 inherit;
}
.texture-layer-inspector-target > span { display: grid; gap: 2px; overflow: hidden; }
.texture-layer-inspector-actions { display: flex; flex: 0 0 auto; gap: 4px; }
.texture-layer-dock-inspector-header strong { color: #f2f2f4; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.texture-layer-dock-inspector-header strong b { color: var(--accent); font: inherit; }
.texture-layer-dock-inspector-header small { overflow: hidden; color: var(--text-dim); font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.texture-layer-dock-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#texture-layer-selected-properties .panel-content,
#texture-paint-inspector-body .panel-content { width: 100%; max-width: none; padding: 10px; }
#texture-paint-inspector-body[hidden] { display: none; }
#texture-paint-inspector-body:not([hidden]) { border-top: 1px solid rgba(255,255,255,.08); }
.texture-layer-dock-tab {
  display: none;
  position: relative;
  z-index: 39;
  width: 36px;
  min-width: 36px;
  height: 100%;
  min-height: 0;
  padding: 8px 5px;
  border: 1px solid rgba(255,139,20,.5);
  border-right: 0;
  border-radius: 0;
  background: #1b1c1f;
  color: #ff951f;
  box-shadow: -5px 0 18px rgba(0,0,0,.3);
  font: 800 10px/1 inherit;
}
.texture-layer-dock-tab span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .05em; text-transform: uppercase; }
body.mode-tpaint.texture-layer-dock-layout .texture-layer-dock-tab.is-visible {
  display: grid;
  grid-column: 2;
  grid-row: 1 / 3;
  place-items: center;
}
.texture-layer-outliner.is-layers-collapsed .texture-layer-dock-stack {
  flex: 0 0 42px;
  min-height: 42px;
}
.texture-layer-outliner.is-layers-collapsed .texture-layer-view-row,
.texture-layer-outliner.is-layers-collapsed .texture-layer-stack-toolbar,
.texture-layer-outliner.is-layers-collapsed .texture-layer-outline-list { display: none; }
.texture-layer-outliner.is-properties-collapsed .texture-layer-dock-stack {
  flex: 1 1 auto;
  min-height: 0;
}
.texture-layer-outliner.is-properties-collapsed .texture-layer-dock-inspector {
  flex: 0 0 46px;
  min-height: 46px;
}
.texture-layer-outliner.is-properties-collapsed .texture-layer-dock-scroll { display: none; }
.texture-layer-outliner.is-layers-collapsed .texture-layer-dock-divider,
.texture-layer-outliner.is-properties-collapsed .texture-layer-dock-divider { display: none; }
.texture-layer-outline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 7px 82px 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}
.texture-layer-outline-header > span { display: grid; gap: 1px; }
.texture-layer-outline-header strong { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.texture-layer-outline-header small { overflow: hidden; color: var(--text-dim); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.texture-layer-outline-header > b {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  border-radius: 99px;
  background: rgba(255,255,255,.07);
  color: var(--text-dim);
  font-size: 10px;
}
.texture-layer-view-row {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.texture-layer-view-row select {
  width: min(150px, 100%);
  min-height: 28px;
  padding: 0 28px 0 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  background: #202124;
  color: #ededee;
  font: 750 10px/1 inherit;
}
.texture-layer-stack-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(50px,1fr) minmax(48px,1fr) 34px 34px repeat(5, 31px) 38px;
  gap: 4px;
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
}
.texture-layer-stack-toolbar > button,
.texture-layer-stack-more > summary,
.texture-layer-stack-mask > summary,
.texture-layer-stack-effects > summary {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 5px;
  background: rgba(255,255,255,.04);
  color: #d8d8db;
  font: 800 13px/1 inherit;
  list-style: none;
  cursor: pointer;
}
/* Shared action sizing also applies to Mat > Layers outside Texture Paint. */
.texture-layer-stack-toolbar.texture-layer-reference-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.texture-layer-reference-toolbar > button,
.texture-layer-reference-toolbar > details > summary { display: flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 6px; list-style: none; border: 1px solid var(--bg-card-hover); border-radius: 6px; background: var(--bg-card); color: var(--text); cursor: pointer; }
.texture-layer-reference-toolbar > details { position: relative; flex: 0 0 auto; min-width: 0; }
.texture-layer-reference-toolbar > details > summary::-webkit-details-marker { display: none; }
.texture-layer-reference-toolbar > button > span,
.texture-layer-reference-toolbar > details > summary > span { display: none; }
.texture-layer-reference-toolbar svg { display: block; width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; }
.texture-layer-reference-toolbar .texture-layer-icon-chevron { position: absolute; width: 8px; height: 8px; right: 1px; bottom: 1px; }
.texture-layer-stack-primary { grid-auto-flow: column; gap: 3px; }
.texture-layer-stack-toolbar button span,
.texture-layer-stack-more > summary span,
.texture-layer-stack-mask > summary span,
.texture-layer-stack-effects > summary span { font-size: 9px; }
.texture-layer-stack-toolbar button.primary { border-color: rgba(255,132,0,.5); color: #fff; background: rgba(255,132,0,.18); }
.texture-layer-stack-toolbar button.danger,
.texture-layer-stack-menu button.danger { color: #ff8989; }
.texture-layer-stack-toolbar button:disabled,
.texture-layer-stack-menu button:disabled { opacity: .3; cursor: default; }
.texture-layer-stack-more,
.texture-layer-stack-mask,
.texture-layer-stack-effects { position: relative; min-width: 0; }
.texture-layer-stack-more > summary::-webkit-details-marker,
.texture-layer-stack-mask > summary::-webkit-details-marker,
.texture-layer-stack-effects > summary::-webkit-details-marker { display: none; }
.texture-layer-stack-more > summary svg { width: 16px; height: 16px; fill: currentColor; }
.texture-layer-stack-more > summary span,
.texture-layer-stack-mask > summary span,
.texture-layer-stack-effects > summary span { display: none; }
.texture-layer-stack-mask > summary[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.texture-layer-stack-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  display: grid;
  width: 150px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  background: #242529;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
.texture-layer-stack-menu button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #e6e6e8;
  font: 700 10px/1 inherit;
  text-align: left;
}
.texture-layer-stack-menu button:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.texture-layer-mask-menu { left: 0; right: auto; width: 164px; }
.texture-layer-outline-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.texture-layer-outline-row {
  display: grid;
  grid-template-columns: 25px 18px 36px 28px minmax(62px,1fr) 66px 47px;
  align-items: center;
  gap: 5px;
  min-height: 52px;
  padding: 5px 6px 5px calc(6px + (var(--layer-depth, 0) * 14px));
  border-bottom: 1px solid rgba(255,255,255,.055);
  color: var(--text);
  cursor: default;
  outline: none;
}
.texture-layer-outline-row:hover { background: rgba(255,255,255,.045); }
.texture-layer-outline-row.active { background: rgba(255,132,0,.13); box-shadow: inset 3px 0 var(--accent), inset 0 0 0 1px rgba(255,132,0,.45); }
.texture-layer-outline-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.texture-layer-outline-row.muted { opacity: .48; }
.texture-layer-outline-row.folder { background-color: rgba(255,255,255,.025); }
.texture-layer-outline-row.folder-child { background-image: linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-position: calc(12px + ((var(--layer-depth, 1) - 1) * 14px)) 0; background-repeat: no-repeat; }
.texture-layer-outline-eye {
  display: grid;
  place-items: center;
  width: 27px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}
.texture-layer-outline-eye svg { width: 16px; height: 16px; }
.texture-layer-outline-disclosure,
.texture-layer-disclosure {
  display: grid;
  place-items: center;
  width: 18px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #aeb0b5;
  font: 800 13px/1 inherit;
}
.texture-layer-outline-disclosure.placeholder,
.texture-layer-disclosure.placeholder { pointer-events: none; }
.texture-layer-outline-thumbnail,
.texture-layer-outline-mask {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 3px;
  background-color: #343438;
  background-position: center;
  background-size: cover;
  color: rgba(255,255,255,.7);
  font-size: 9px;
  font-weight: 900;
}
.texture-layer-outline-thumbnail,
.texture-layer-outline-mask,
.texture-layer-thumbnail,
.texture-layer-mask-target { padding: 0; cursor: pointer; }
.texture-layer-outline-thumbnail.fill { background: var(--layer-swatch, #808080); }
.texture-layer-outline-thumbnail.folder,
.texture-layer-thumbnail.folder { border-color: rgba(255,172,61,.4); background: #3b2d1d; color: #ff9d28; }
.texture-layer-outline-thumbnail.paint {
  background-color: #333;
  background-image: linear-gradient(45deg,#555 25%,transparent 25%),linear-gradient(-45deg,#555 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#555 75%),linear-gradient(-45deg,transparent 75%,#555 75%);
  background-position: 0 0,0 5px,5px -5px,-5px 0;
  background-size: 10px 10px;
}
.texture-layer-outline-mask { width: 28px; height: 28px; background-color: var(--mask-swatch, #fff); color: #111; }
.texture-layer-outline-mask.empty { border-color: transparent; background: transparent; }
.texture-layer-outline-mask.disabled { opacity: .4; filter: grayscale(1); }
.texture-layer-content-target.target-selected,
.texture-layer-outline-mask.target-selected,
.texture-layer-mask-target.target-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,132,0,.34);
}
.texture-layer-outline-mask.previewing,
.texture-layer-mask-target.previewing {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgba(255,132,0,.65);
}
.texture-mask-preview-banner {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 9px;
  border: 1px solid rgba(255,132,0,.65);
  background: rgba(255,132,0,.16);
  color: #f6f6f7;
  font-size: 10px;
}
.texture-mask-preview-banner strong { color: var(--accent); letter-spacing: .08em; }
.texture-mask-preview-banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texture-mask-preview-banner button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  background: rgba(0,0,0,.28);
  color: #fff;
  font: 800 9px/1 inherit;
}
.texture-mask-target-summary {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(255,132,0,.34);
  border-radius: 9px;
  background: rgba(255,132,0,.08);
}
.texture-mask-target-summary strong { color: var(--accent); font-size: 12px; }
.texture-mask-target-summary span { color: var(--text-dim); font-size: 10px; }
.texture-layer-outline-copy { display: grid; gap: 3px; overflow: hidden; }
.texture-layer-outline-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.texture-layer-outline-copy small { color: var(--text-dim); font-size: 9px; }
.texture-layer-outline-blend,
.texture-layer-row-blend {
  width: 100%;
  min-height: 28px;
  padding: 0 16px 0 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  background: #222327;
  color: #dedee1;
  font: 700 9px/1 inherit;
}
.texture-layer-outline-opacity,
.texture-layer-row-opacity {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 1px;
  color: #bcbec3;
  font: 750 9px/1 inherit;
}
.texture-layer-outline-opacity input,
.texture-layer-row-opacity input {
  width: 100%;
  min-height: 28px;
  padding: 0 2px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  background: #222327;
  color: #f0f0f1;
  font: 750 9px/1 inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
}
.texture-layer-outline-opacity input::-webkit-inner-spin-button,
.texture-layer-row-opacity input::-webkit-inner-spin-button { appearance: none; }

@media (max-width: 900px) {
  .texture-layer-stack-toolbar { grid-template-columns: minmax(60px,1fr) minmax(60px,1fr) 36px 36px 40px; }
  .texture-layer-stack-wide { display: none !important; }
  .texture-layer-stack-more > summary,
  .texture-layer-stack-mask > summary,
  .texture-layer-stack-effects > summary { grid-auto-flow: column; gap: 4px; }
  .texture-layer-stack-more > summary span,
  .texture-layer-stack-mask > summary span,
  .texture-layer-stack-effects > summary span { display: none; }
  .texture-layer-outline-row { grid-template-columns: 24px 16px 32px 26px minmax(48px,1fr) 58px 42px; min-height: 46px; gap: 3px; }
  .texture-layer-outline-thumbnail { width: 34px; height: 34px; }
}

.material-workspace-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0 0 10px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(0,0,0,.22);
}
.material-workspace-tab {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font: 700 12px/1 inherit;
}
.material-workspace-tab.active {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: inset 0 -2px var(--accent);
}

.texture-layers-panel { display: grid; gap: 10px; overflow-x: hidden; }
.texture-layers-panel,
.texture-layers-panel * { box-sizing: border-box; min-width: 0; }
.texture-layers-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}
.texture-layers-heading > span:first-child { display: grid; gap: 2px; min-width: 0; }
.texture-layers-heading strong { font-size: 14px; }
.texture-layers-heading small {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.texture-layer-count {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
}
.texture-layer-add-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.texture-layer-add-row .btn { min-height: 42px; }
.texture-layers-panel > .texture-layer-view-row,
.texture-layers-panel > .texture-layer-stack-toolbar { border: 1px solid rgba(255,255,255,.08); border-radius: 8px; }
.texture-layer-output-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.texture-layers-panel.inspector-only { gap: 9px; }
.texture-layer-inspector-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}
.texture-layer-inspector-actions.compact { grid-template-columns: 1fr 1fr; }
.texture-layer-inspector-actions .btn { min-height: 34px; padding: 5px 6px; font-size: 9px; }
.texture-layer-inspector-actions .btn.danger { color: #ff8585; border-color: rgba(220,70,70,.25); }
.texture-layer-inspector-actions .btn:last-child:nth-child(7) { grid-column: 1 / -1; }
.texture-layer-material-utilities {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.022);
}
.texture-layer-material-utilities > summary {
  min-height: 40px;
  padding: 13px 11px;
  color: #c7c8cc;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.texture-layer-material-utilities[open] > summary { border-bottom: 1px solid rgba(255,255,255,.07); }
.texture-layer-material-utilities .texture-ao-baker { margin: 9px; }
.texture-layer-material-utilities .texture-layer-output-row { margin: 9px; }

.texture-ao-baker {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.texture-ao-heading,
.texture-ao-control > span,
.texture-ao-resolution {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.texture-ao-heading span:first-child {
  display: grid;
  gap: 2px;
}

.texture-ao-heading small,
.texture-ao-resolution span {
  color: var(--muted, #9da0a7);
  font-size: 11px;
}

.texture-ao-status {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--muted, #9da0a7);
  background: rgba(255, 255, 255, 0.06);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.texture-ao-status.ready {
  color: #8ee8a6;
  background: rgba(66, 180, 98, 0.14);
}

.texture-ao-control {
  display: grid;
  gap: 5px;
  font-size: 12px;
}

.texture-ao-control output {
  color: var(--accent, #ff8700);
  font-variant-numeric: tabular-nums;
}

.texture-ao-control input,
.texture-ao-resolution select {
  width: 100%;
}

.texture-ao-resolution {
  align-items: stretch;
  flex-direction: column;
}

.texture-ao-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.texture-ao-actions [data-ao-use-mask] {
  grid-column: 1 / -1;
}

.texture-ao-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}

.texture-ao-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent, #ff8700);
  transition: width 120ms linear;
}
.texture-layer-output-row .btn {
  min-height: 38px;
  font-size: 10px;
}
.texture-layer-output-row [data-layer-flatten] {
  border-color: rgba(255, 152, 64, .32);
  color: #ffbd78;
}

.texture-procedural-masks {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(5,7,9,.42);
}
.texture-procedural-heading,
.texture-procedural-card header,
.texture-procedural-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.texture-procedural-heading > span:first-child { display: grid; gap: 2px; }
.texture-procedural-heading strong { font-size: 11px; color: #f2f3f4; }
.texture-procedural-heading small,
.texture-procedural-ao-note,
.texture-procedural-empty { font-size: 9px; color: #999fa7; }
.texture-procedural-add {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.texture-procedural-add .btn { min-height: 34px; padding: 6px; font-size: 9px; }
.texture-procedural-list { display: grid; gap: 7px; }
.texture-procedural-card {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.texture-procedural-card.disabled { opacity: .58; }
.texture-procedural-card header label,
.texture-procedural-footer label { font-size: 10px; font-weight: 700; color: #d9dce0; }
.texture-procedural-delete {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(220,70,70,.12);
  color: #ff8585;
  font-size: 18px;
}
.texture-procedural-control { display: grid; gap: 4px; min-width: 0; }
.texture-procedural-control > span {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #aeb3ba;
}
.texture-procedural-control input[type="range"] { width: 100%; }
.texture-procedural-offsets {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 8px;
}
.texture-procedural-footer input[type="number"] {
  width: 72px;
  min-height: 30px;
  margin-left: 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: #121519;
  color: #f0f1f2;
}

.texture-generators {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 138, 24, .2);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 136, 0, .055), rgba(5, 7, 9, .46));
}
.texture-generator-heading,
.texture-generator-card header,
.texture-generator-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.texture-generator-heading > span:first-child { display: grid; gap: 2px; }
.texture-generator-heading strong { color: #f2f3f4; font-size: 11px; }
.texture-generator-heading small,
.texture-generator-empty,
.texture-generator-note { color: #999fa7; font-size: 9px; line-height: 1.35; }
.texture-generator-add {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
  gap: 5px;
}
.texture-generator-add select,
.texture-generator-target select {
  min-width: 0;
  min-height: 36px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  background: #121519;
  color: #f0f1f2;
  font: 700 9px/1 inherit;
}
.texture-generator-add .btn { min-height: 36px; padding: 6px 9px; font-size: 9px; }
.texture-generator-list { display: grid; gap: 7px; min-width: 0; }
.texture-generator-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
}
.texture-generator-card.disabled { opacity: .58; }
.texture-generator-card header label,
.texture-generator-footer label { color: #d9dce0; font-size: 10px; font-weight: 700; }
.texture-generator-delete {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(220, 70, 70, .12);
  color: #ff8585;
  font-size: 18px;
}
.texture-generator-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #aeb3ba;
  font-size: 9px;
}
.texture-generator-control { display: grid; gap: 4px; min-width: 0; }
.texture-generator-control > span {
  display: flex;
  justify-content: space-between;
  color: #aeb3ba;
  font-size: 9px;
}
.texture-generator-control input[type="range"] { width: 100%; }
.texture-generator-footer input[type="number"] {
  width: 72px;
  min-height: 30px;
  margin-left: 5px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  background: #121519;
  color: #f0f1f2;
}

.texture-layer-list {
  display: grid;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 11px;
  background: rgba(0,0,0,.18);
}
.texture-layer-row {
  position: relative;
  display: grid;
  grid-template-columns: 38px 18px 44px 30px minmax(58px,1fr) 62px 48px;
  align-items: center;
  gap: 7px;
  min-height: 60px;
  padding: 5px 25px 5px calc(5px + (var(--layer-depth, 0) * 12px));
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--bg-panel-2);
  outline: none;
  touch-action: pan-y;
}
.texture-layer-row.active {
  border-color: rgba(255,140,26,.92);
  background: linear-gradient(90deg, rgba(255,140,26,.18), var(--bg-panel-2) 60%);
  box-shadow: inset 3px 0 var(--accent);
}
.texture-layer-row:focus-visible { box-shadow: 0 0 0 2px rgba(255,140,26,.45); }
.texture-layer-row.muted .texture-layer-thumbnail,
.texture-layer-row.muted .texture-layer-copy { opacity: .48; }
.texture-layer-row.folder { background: rgba(255,255,255,.045); }
.texture-layer-row.folder-child { background-image: linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-position: calc(9px + ((var(--layer-depth, 1) - 1) * 12px)) 0; background-repeat: no-repeat; }
.texture-layer-visibility,
.texture-layer-more {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #b9b9b9;
}
.texture-layer-more { position: absolute; right: 2px; bottom: 2px; width: 23px; height: 23px; }
.texture-layer-visibility:active,
.texture-layer-more:active { background: rgba(255,255,255,.09); }
.texture-layer-visibility svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.texture-layer-more svg { width: 20px; fill: currentColor; }
.texture-layer-thumbnail,
.texture-layer-mask-thumbnail,
.texture-layer-mask-target {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  background-color: var(--layer-swatch, #70747b);
  color: rgba(255,255,255,.8);
  font-size: 10px;
  font-weight: 900;
}
.texture-layer-thumbnail.paint {
  background-color: #6c7077;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.10) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.10) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.10) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.10) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.texture-layer-mask-thumbnail {
  grid-column: 4;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 5px;
  background: linear-gradient(135deg, #f3f3f3 50%, #252525 50%);
  background-color: #fff;
  background-position: center;
  background-size: cover;
  color: #ff8c1a;
  text-shadow: 0 1px 2px #000;
}
.texture-layer-mask-target {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background-color: var(--mask-swatch, #fff);
  background-position: center;
  background-size: cover;
}
.texture-layer-mask-target.empty { border-color: transparent; background: transparent; pointer-events: none; }
.texture-layer-mask-target.disabled { opacity: .38; filter: grayscale(1); }
.texture-layer-mask-thumbnail.disabled { opacity: .38; filter: grayscale(1); }
.texture-layer-mask-thumbnail.previewing {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,140,26,.28);
}
.texture-layer-copy { display: grid; gap: 3px; min-width: 0; }
.texture-layer-copy strong,
.texture-layer-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.texture-layer-copy strong { color: var(--text); font-size: 12px; }
.texture-layer-copy small { color: var(--text-dim); font-size: 10px; }

.texture-layer-actions {
  position: absolute;
  z-index: 15;
  top: calc(100% - 3px);
  right: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(94px, 1fr));
  gap: 4px;
  width: min(250px, calc(100vw - 36px));
  padding: 6px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: #181818;
  box-shadow: 0 12px 26px rgba(0,0,0,.5);
}
.texture-layer-actions[hidden] { display: none; }
.texture-layer-actions button {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: var(--bg-card);
  color: var(--text);
  font: 700 11px/1 inherit;
  text-align: left;
}
.texture-layer-actions button:disabled { opacity: .34; }
.texture-layer-actions button.danger { color: #ff7979; }
.texture-layer-actions button:last-child { grid-column: 1 / -1; }
.texture-layer-empty { padding: 24px 12px; color: var(--text-dim); text-align: center; }

.texture-layer-properties {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(120px,.65fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: var(--bg-panel-2);
}
.texture-context-section {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: var(--bg-panel-2);
}
.texture-context-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.texture-context-heading strong { color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.texture-context-heading small { color: var(--text-dim); font-size: 9px; }
.texture-context-name { display: grid; grid-template-columns: 62px minmax(0,1fr); align-items: center; gap: 8px; color: var(--text-dim); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.texture-context-name input {
  width: 100%; min-height: 36px; padding: 0 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px;
  background: var(--bg-card); color: var(--text); font: 700 11px/1 inherit; text-transform: none;
}
.texture-context-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-dim); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.texture-context-switch input { width: 20px; height: 20px; accent-color: var(--accent); }
.texture-context-folder-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.texture-context-folder-summary span { display: grid; gap: 3px; padding: 8px; border-radius: 7px; background: rgba(0,0,0,.16); color: var(--text-dim); font-size: 9px; }
.texture-context-folder-summary strong { color: var(--text); font-size: 10px; }
.texture-context-advanced { margin-top: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.025); }
.texture-context-advanced > summary { padding: 10px; color: var(--text-dim); cursor: pointer; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.texture-context-advanced > :not(summary) { margin: 0 8px 8px; }
/* Deferred inspector controls: keep settings/wiring, remove both cards from view. */
body.mode-tpaint .texture-context-channel-setup,
body.mode-tpaint .texture-context-brush-blend { display: none; }
.texture-layer-property { display: grid; align-content: center; gap: 8px; min-width: 0; }
.texture-layer-property > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.texture-layer-property output { color: var(--text); }
.texture-layer-property input[type="range"] { width: 100%; accent-color: var(--accent); }
.texture-layer-property select {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: var(--bg-card);
  color: var(--text);
  font: 700 11px/1 inherit;
}

.texture-fill-properties {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: var(--bg-panel-2);
}
.texture-fill-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 2px 5px;
}
.texture-fill-heading > span:first-child { display: grid; gap: 2px; }
.texture-fill-heading strong { color: var(--text); font-size: 12px; }
.texture-fill-heading small,
.texture-fill-alpha-hint { color: var(--text-dim); font-size: 9px; line-height: 1.35; }
.texture-fill-srgb {
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255,140,26,.12);
  color: var(--accent);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.texture-fill-channel {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(0,0,0,.16);
}
.texture-fill-channel.disabled > :not(.texture-fill-channel-toggle) { opacity: .42; }
.texture-fill-channel-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}
.texture-fill-channel-toggle input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}
.texture-fill-control-line,
.texture-fill-color-line,
.texture-fill-emission-line {
  display: grid;
  grid-template-columns: minmax(0,1fr) 42px;
  align-items: center;
  gap: 8px;
}
.texture-fill-control-line input[type="range"],
.texture-fill-emission-line input[type="range"] { width: 100%; accent-color: var(--accent); }
.texture-fill-control-line output,
.texture-fill-emission-line output {
  color: var(--text);
  font: 750 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: right;
}
.texture-fill-color-line { grid-template-columns: 42px minmax(64px,1fr) auto; }
.texture-fill-color-line input[type="color"],
.texture-fill-emission-line input[type="color"] {
  width: 42px;
  height: 38px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 7px;
  background: var(--bg-card);
}
.texture-fill-color-line code {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 10px;
  text-overflow: ellipsis;
}
.texture-fill-image-button {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 10px;
  white-space: nowrap;
}
.texture-fill-resource { display: block; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: rgba(255,255,255,.025); }
.texture-fill-resource.drag-over,
.texture-fill-material-mode.drag-over { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,140,26,.35); }
.texture-fill-resource > summary { display: grid; grid-template-columns: 36px minmax(0,1fr) 18px; align-items: center; gap: 7px; min-height: 44px; padding: 5px 7px; cursor: pointer; list-style: none; }
.texture-fill-resource > summary::-webkit-details-marker { display: none; }
.texture-fill-resource-chevron { color: var(--text-dim); font-size: 18px; text-align: center; transition: transform .15s ease; }
.texture-fill-resource[open] .texture-fill-resource-chevron { transform: rotate(90deg); }
.texture-fill-resource-actions { display: grid; grid-template-columns: minmax(0,1fr) auto 34px; align-items: center; gap: 6px; padding: 7px; border-top: 1px solid rgba(255,255,255,.07); }
.texture-fill-resource-actions > span { display: grid; gap: 2px; color: var(--text); font-size: 8px; }
.texture-fill-resource-actions small { color: var(--text-dim); font-size: 7px; }
.texture-fill-resource-preview { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: repeating-conic-gradient(#777 0 25%,#444 0 50%) 50%/12px 12px; background-position: center; background-size: cover; }
.texture-fill-resource-copy { display: grid; gap: 2px; overflow: hidden; }
.texture-fill-resource-copy strong { overflow: hidden; color: var(--text); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.texture-fill-resource-copy small { color: var(--text-dim); font-size: 8px; }
.texture-fill-resource .btn { min-height: 34px; padding: 0 7px; font-size: 8px; }
.texture-fill-image-clear:disabled { opacity: .32; }
.texture-fill-material-mode,
.texture-fill-projection { display: grid; gap: 8px; padding: 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(0,0,0,.16); }
.texture-fill-material-heading,
.texture-fill-projection-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.texture-fill-material-heading > span,
.texture-fill-projection-heading > span { display: grid; gap: 2px; }
.texture-fill-material-heading strong,
.texture-fill-projection-heading strong { color: var(--text); font-size: 11px; }
.texture-fill-material-heading small,
.texture-fill-projection-heading small { color: var(--text-dim); font-size: 8px; }
.texture-fill-material-heading > span:last-child { color: var(--accent); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.texture-fill-material-slot { display: grid; grid-template-columns: 38px minmax(0,1fr) auto 34px; align-items: center; gap: 7px; min-height: 52px; padding: 6px; border: 1px dashed rgba(255,255,255,.16); border-radius: 7px; background: var(--bg-card); }
.texture-fill-material-slot.has-material { border-style: solid; border-color: rgba(255,140,26,.35); }
.texture-fill-material-slot > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.texture-fill-material-slot strong,
.texture-fill-material-slot small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texture-fill-material-slot strong { color: var(--text); font-size: 9px; }
.texture-fill-material-slot small { color: var(--text-dim); font-size: 7px; }
.texture-fill-material-preview { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: linear-gradient(145deg,#484848,#181818); color: var(--accent); font-weight: 900; }
.texture-fill-material-slot label.btn { position: relative; display: grid; place-items: center; min-height: 34px; overflow: hidden; cursor: pointer; }
.texture-fill-material-slot input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.texture-fill-material-slot .danger { min-width: 34px; padding: 0; color: #ff8080; }
.texture-fill-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; color: var(--text-dim); font-size: 8px; text-align: center; text-transform: uppercase; }
.texture-fill-or::before,
.texture-fill-or::after { content: ''; height: 1px; background: rgba(255,255,255,.08); }
.texture-fill-or span { display: none; }
.texture-fill-projection-heading .btn { min-height: 30px; padding: 0 9px; font-size: 8px; }
.texture-fill-projection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.texture-fill-projection-grid label,
.texture-fill-transform-grid label { display: grid; gap: 4px; min-width: 0; color: var(--text-dim); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.texture-fill-projection-grid select,
.texture-fill-transform-grid input[type="number"] { width: 100%; min-height: 36px; padding: 0 7px; border: 1px solid rgba(255,255,255,.11); border-radius: 6px; background: var(--bg-card); color: var(--text); font: 700 9px/1 inherit; }
.texture-fill-transform-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.texture-fill-transform-grid label { position: relative; }
.texture-fill-transform-grid label > small { position: absolute; right: 8px; bottom: 10px; color: var(--text-dim); }
.texture-fill-transform-grid .texture-fill-scale-lock { display: flex; align-items: center; justify-content: center; padding-top: 13px; text-align: center; }
.texture-fill-scale-lock input { width: 18px; height: 18px; accent-color: var(--accent); }
.texture-fill-manipulator-toggle { min-height: 32px; padding: 0 2px; }
.texture-fill-projection-note { color: var(--text-dim); font-size: 8px; line-height: 1.4; }
.texture-fill-viewport-manipulator {
  --fill-projection-rotation: 0deg;
  position: absolute;
  z-index: 31;
  left: 50%;
  top: 48%;
  width: 112px;
  height: 112px;
  border: 1px dashed rgba(255,140,26,.8);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(var(--fill-projection-rotation));
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), inset 0 0 22px rgba(255,140,26,.08);
  pointer-events: none;
}
.texture-fill-viewport-manipulator[hidden] { display: none; }
.texture-fill-viewport-manipulator button { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(20,20,20,.92); color: var(--accent); font: 900 16px/1 inherit; box-shadow: 0 4px 12px rgba(0,0,0,.4); pointer-events: auto; touch-action: none; }
.texture-fill-manipulator-pan { left: 50%; top: 50%; transform: translate(-50%,-50%); cursor: move; }
.texture-fill-manipulator-rotate { left: 50%; top: -17px; transform: translateX(-50%) rotate(calc(-1 * var(--fill-projection-rotation))); cursor: ew-resize; }
.texture-fill-manipulator-scale { right: -8px; bottom: -8px; transform: rotate(calc(-1 * var(--fill-projection-rotation))); cursor: nwse-resize; }
.texture-fill-viewport-manipulator > span { position: absolute; left: 50%; top: calc(100% + 13px); min-width: 132px; padding: 5px 8px; border-radius: 5px; background: rgba(18,18,18,.9); color: #fff; font: 800 8px/1.2 inherit; text-align: center; transform: translateX(-50%) rotate(calc(-1 * var(--fill-projection-rotation))); pointer-events: none; }

.texture-paint-tool-context { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: var(--bg-panel-2); }
.texture-paint-tool-context-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.texture-paint-tool-context-heading span { display: grid; gap: 2px; }
.texture-paint-tool-context-heading strong { color: var(--text); font-size: 11px; }
.texture-paint-tool-context-heading > b { padding: 4px 6px; border-radius: 999px; background: rgba(255,132,0,.13); color: var(--accent); font-size: 7px; letter-spacing: .05em; }
.texture-paint-tool-context-heading > b.blocked { background: rgba(210,70,70,.14); color: #ff8a8a; }
.texture-paint-tool-context-heading small,
.texture-paint-tool-hint { color: var(--text-dim); font-size: 8px; line-height: 1.45; }
.texture-paint-tool-blocked { color: #ff9b9b; font-size: 8px; line-height: 1.4; }
.texture-paint-tool-mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.texture-paint-tool-mode-grid .btn.active { border-color: var(--accent); background: rgba(255,132,0,.18); color: #fff; }
.texture-paint-tool-action-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.texture-paint-tool-action-row .btn { min-height: 32px; }
.texture-paint-tool-resource { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 7px; border: 1px dashed rgba(255,255,255,.16); border-radius: 8px; }
.texture-paint-tool-resource.dragging { border-color: var(--accent); background: rgba(255,132,0,.08); }
.texture-paint-tool-resource-preview { width: 42px; height: 42px; border-radius: 6px; background: #19191b center/cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.texture-paint-tool-resource span { display: grid; gap: 2px; min-width: 0; }
.texture-paint-tool-resource b,
.texture-paint-tool-resource small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texture-paint-tool-resource small { color: var(--text-dim); font-size: 8px; }
.texture-paint-tool-resource input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.texture-paint-projection-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.texture-paint-projection-controls label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; color: var(--text-dim); font-size: 8px; }
.texture-paint-projection-controls input { min-width: 0; width: 100%; }
.texture-paint-projection-overlay { position: absolute; z-index: 5; pointer-events: none; transform-origin: center; opacity: var(--projection-opacity, .8); }
.texture-paint-projection-overlay[hidden] { display: none; }
.texture-paint-projection-overlay img { display: block; width: 100%; height: 100%; object-fit: contain; border: 1px solid rgba(255,132,0,.75); box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 8px 30px rgba(0,0,0,.28); }
.texture-paint-projection-overlay::after { content: 'PROJECTION'; position: absolute; left: 50%; bottom: -18px; padding: 3px 6px; border-radius: 4px; background: rgba(18,18,18,.9); color: var(--accent); font: 800 7px/1 inherit; letter-spacing: .08em; transform: translateX(-50%); }
.tpaint-v3-readonly-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 6px 0; color: var(--text-dim); font-size: 10px; }
.tpaint-v3-readonly-row strong { color: var(--text); font-size: 9px; text-align: right; }
.tpaint-panel-v3.contextual { padding-top: 0 !important; }
.tpaint-panel-v3.contextual .texture-context-brush { margin-top: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: var(--bg-panel-2); }
.texture-fill-image-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.texture-fill-image-chip {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 5px 4px 9px;
  border-radius: 7px;
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 9px;
}
.texture-fill-image-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texture-fill-image-chip button {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: rgba(255,90,90,.12);
  color: #ff8888;
  font: 800 9px/1 inherit;
}
.texture-fill-emission-line { grid-template-columns: 42px minmax(0,1fr) 42px; }
.texture-fill-alpha-mode {
  display: grid;
  grid-template-columns: auto minmax(120px,1fr);
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.texture-fill-alpha-mode select {
  min-height: 40px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: var(--bg-card);
  color: var(--text);
  font: 750 10px/1 inherit;
}

@media (max-width: 480px) {
  #texture-layer-inspector-close { display: none; }
  .texture-layer-row { grid-template-columns: 34px 16px 40px 28px minmax(48px,1fr) 56px 43px; gap: 3px; }
  .texture-layer-thumbnail { width: 40px; height: 40px; }
  .texture-layer-properties { grid-template-columns: 1fr; }
  .texture-fill-color-line { grid-template-columns: 42px minmax(0,1fr); }
  .texture-fill-image-button { grid-column: 1 / -1; }
  .texture-fill-resource-actions { grid-template-columns: 1fr auto 34px; }
  .texture-fill-material-slot { grid-template-columns: 38px minmax(0,1fr) 34px; }
  .texture-fill-material-slot label.btn { grid-column: 1 / -1; }
  .texture-fill-projection-grid { grid-template-columns: 1fr; }
  .texture-fill-transform-grid { grid-template-columns: 1fr 1fr; }
  .texture-generator-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .texture-generator-add .btn { grid-column: 1 / -1; }
}

@media (orientation: landscape) and (max-height: 600px) {
  .texture-layers-panel { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .texture-layers-heading,
  .material-workspace-tabs { grid-column: 1; }
  .texture-layer-output-row { grid-column: 1; }
  .texture-layer-add-row { grid-column: 1; }
  .texture-layer-list { grid-column: 1; }
  .texture-layer-properties { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; }
  .texture-fill-properties { grid-column: 1; grid-row: auto; }
}
.tpaint-layer-target {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.tpaint-layer-target span { display: grid; gap: 2px; min-width: 0; }
.tpaint-layer-target b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpaint-layer-target small { color: var(--muted, #9da0a8); font-size: 10px; }
.tpaint-layer-target.active { border-color: rgba(255,136,0,.5); background: rgba(255,136,0,.08); }
.tpaint-layer-target.blocked { border-color: rgba(223,76,76,.55); }
.tpaint-target-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 0 0 8px;
}
.tpaint-target-tab {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: inherit;
  font: 800 10px/1 inherit;
}
.tpaint-target-tab.active {
  border-color: var(--accent, #ff8800);
  background: rgba(255,136,0,.18);
  color: #fff;
}
.tpaint-target-tab:disabled { opacity: .38; }
.tpaint-channel-tabs.mask-target { opacity: .45; }
.tpaint-channel-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(54px, 1fr));
  gap: 4px;
  margin: 0 0 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tpaint-channel-tab {
  min-height: 38px;
  padding: 5px 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: inherit;
  font: inherit;
  font-size: 10px;
  white-space: nowrap;
}
.tpaint-channel-tab.active {
  color: #fff;
  border-color: var(--accent, #ff8800);
  background: rgba(255,136,0,.2);
}
.tpaint-resolution-warning {
  display: block;
  margin: -2px 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,136,0,.5);
  border-radius: 8px;
  background: rgba(255,136,0,.1);
  color: var(--text, #f5f5f5);
  font-size: 10px;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .tpaint-channel-tabs { grid-template-columns: repeat(5, 76px); }
}
/* Phase 8: advanced Texture Paint workspace surfaces. */
.texture-paint-viewport-toolbar{display:none;position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:12;align-items:center;gap:5px;padding:5px;background:rgba(20,20,22,.94);border:1px solid #454545;border-radius:8px;box-shadow:0 8px 24px #0008;max-width:calc(100% - 32px)}
.mode-tpaint .texture-paint-viewport-toolbar{display:flex}
.texture-paint-viewport-toolbar button,.texture-paint-viewport-toolbar select{height:30px;border:1px solid #444;border-radius:5px;background:#2b2b2d;color:#eee;padding:0 8px;font-size:11px}
.texture-paint-viewport-toolbar label{display:flex;align-items:center;gap:5px;color:#aaa;font-size:10px;text-transform:uppercase}
.texture-paint-viewport-toolbar button.active,.texture-paint-viewport-toolbar button[aria-pressed="true"]{border-color:#ff8500;color:#ff941f;background:#3b2b1c}
.texture-effects,.texture-geometry-mask,.texture-shelf{margin:12px 14px}
.texture-effect-add-row,.texture-layer-inspector-actions{display:flex;flex-wrap:wrap;gap:6px}
.texture-effect-add-row .btn{font-size:10px;padding:6px 8px}
.texture-effect-list{display:grid;gap:7px;margin-top:8px}
.texture-effect-card{padding:8px;border:1px solid #454545;border-radius:7px;background:#28282a}
.texture-effect-card header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.texture-effect-card header span{display:flex;gap:3px}.texture-effect-card header button{width:27px;height:25px;border:1px solid #494949;background:#333;color:#ddd;border-radius:4px}
.texture-effect-card label{display:flex;align-items:center;gap:7px;color:#ddd;font-size:11px}.texture-effect-card label input[type="range"]{flex:1}
.texture-layer-effect-tree-row{min-height:27px;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:5px;padding:3px 8px 3px calc(10px + var(--layer-depth,1)*14px);background:#161618;border-bottom:1px solid #29292b;color:#aaa;font-size:10px}
.texture-layer-effect-tree-row label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.texture-layer-effect-tree-row small{font-size:9px;color:#777}
.texture-layer-effect-tree-row { grid-template-columns: 18px 20px minmax(0,1fr) auto; min-height: 34px; background: var(--bg-panel); color: var(--text); }
.texture-layer-effect-tree-row.active { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.texture-layer-effect-tree-row button { min-width: 0; text-align: left; border: 0; background: transparent; color: inherit; padding: 7px 4px; }
.texture-layer-context-menu { position: fixed; z-index: 100000; min-width: 170px; padding: 5px; border: 1px solid var(--bg-card-hover); border-radius: 8px; background: var(--bg-panel); box-shadow: 0 8px 24px #0008; }
.texture-layer-context-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; background: transparent; color: var(--text); text-align: left; border-radius: 5px; }
.texture-layer-context-menu button:hover, .texture-layer-context-menu button:focus-visible { background: var(--accent-soft); outline: 1px solid var(--accent); }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-detail .texture-reference-property-categories { display: none; }
.texture-layer-geometry,.texture-layer-outline-geometry{border:1px dashed #777!important;background:transparent!important;color:#aaa!important;border-radius:4px}.texture-layer-geometry.active,.texture-layer-outline-geometry.active{border-color:#ff8500!important;color:#ff8500!important}
.texture-inspector-tabs{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;background:#202022;border-bottom:1px solid #444}
.texture-inspector-tabs button{height:38px;border:0;border-bottom:2px solid transparent;background:transparent;color:#aaa;font-weight:700}.texture-inspector-tabs button.active{color:#fff;border-bottom-color:#ff8500}
.texture-shelf-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-bottom:10px}.texture-shelf-controls input,.texture-shelf-controls select{min-width:0;height:34px;border:1px solid #484848;border-radius:5px;background:#272729;color:#eee;padding:0 8px}.texture-shelf-controls label input{display:none}
.texture-shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.texture-shelf-card{min-height:108px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:3px;padding:7px;border:1px solid #444;border-radius:7px;background-color:#29292b;color:#eee;text-align:left}
.texture-shelf-card>.texture-shelf-card-icon{flex:1;min-height:58px;display:grid;place-items:center;color:#dce5ef}
.texture-shelf-card-icon svg{width:46px;height:46px;fill:currentColor;overflow:visible}
.texture-shelf-brush-icon{color:#eef3f8!important}
.texture-shelf-generator-icon{color:#9bc7f2!important}
.texture-shelf-smart-material-icon{color:#f1a34c!important}
.texture-shelf-material-icon{position:relative;flex:0 0 54px!important;width:54px;min-height:54px!important;margin:2px auto;border:1px solid #77818d;border-radius:50%;box-shadow:inset -9px -11px 14px #0008,0 3px 7px #0008}
.texture-shelf-material-icon::after{content:'';position:absolute;inset:7px 10px auto 12px;height:14px;border-radius:50%;background:linear-gradient(#fff9,#fff0);transform:rotate(-24deg);filter:blur(.4px)}
.texture-shelf-image-icon{flex:0 0 56px!important;min-height:56px!important;margin:1px 0;border:1px solid #5a6470;border-radius:5px;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px #0005}
.texture-shelf-card strong{font-size:10px}.texture-shelf-card small{font-size:9px;color:#aaa;text-transform:capitalize}
.texture-shelf-card:hover .texture-shelf-card-icon svg{color:#fff;filter:drop-shadow(0 0 4px #8fc8ff66)}
@media(max-width:700px){.texture-paint-viewport-toolbar{top:auto;bottom:calc(var(--texture-bottom-sheet-height,42vh) + 8px);left:auto;right:8px;transform:none;max-width:calc(100% - 16px);overflow-x:auto}.texture-paint-viewport-toolbar label span,.texture-paint-viewport-toolbar button{font-size:0}.texture-paint-viewport-toolbar button{width:31px;padding:0}.texture-paint-viewport-toolbar button::after{font-size:10px;font-weight:800}.texture-paint-viewport-toolbar select{max-width:92px}.texture-shelf{margin:8px}#texture-paint-projection-toggle::after{content:'P/O'}#texture-paint-focus::after{content:'◎';font-size:15px}#texture-paint-manipulator::after{content:'⌖';font-size:14px}#texture-paint-pause-procedural::after{content:'Ⅱ';font-size:12px}#texture-paint-screenshot::after{content:'▣';font-size:14px}}

/* Reference Texture Paint workspace. Only presentation is replaced: the scene,
   layer document, paint handlers and original non-paint workspaces stay owned
   by their existing controllers. */
.texture-reference-rail, .texture-reference-brushbar,
.texture-reference-previews, .texture-reference-property-categories,
.texture-reference-shelf-tab { display: none; }
body.mode-tpaint.texture-reference-layout {
  --accent-rgb: 255,140,26;
  --texture-rail: clamp(30px,3.33vw,50px);
  --texture-font: clamp(12px,1.48vw,22px);
  --texture-header: clamp(30px,3.33dvh,65px);
  --texture-actions: clamp(38px,4.1dvh,80px);
  --texture-row: clamp(42px,4.8dvh,94px);
  /* Removed quick controls use no space in expanded or collapsed layouts. */
  --texture-brushbar: 0px;
  --texture-category: clamp(32px,3.4dvh,66px);
  /* Phase 1: the single authoritative Texture Paint visual language. */
  --minder-texture-surface: #1f1f1f;
  --minder-texture-raised: #2a2a2a;
  --minder-texture-hover: #3a3a3a;
  --minder-texture-line: rgba(255,255,255,.10);
  --minder-texture-separator: rgba(255,255,255,.055);
  --minder-texture-ink: #e8e8e8;
  --minder-texture-muted: #888;
  --minder-texture-orange: #ff8c1a;
  --minder-texture-orange-soft: rgba(232,125,13,.15);
  --minder-texture-focus: #ffc078;
  --minder-texture-danger: #ff6b63;
  --minder-texture-danger-soft: #3a2324;
  --minder-texture-radius-panel: 7px;
  --minder-texture-radius-control: 5px;
  --minder-texture-radius-small: 4px;
  --minder-texture-border-width: 1px;
  --minder-texture-icon-stroke: 1.6;
  --minder-texture-space-compact: 6px;
  --texture-text: var(--minder-texture-ink);
  background: #333;
}
body.mode-tpaint.texture-reference-layout #app {
  display: grid;
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: hidden;
  grid-template-columns: var(--texture-rail) minmax(0,1fr);
  grid-template-rows: minmax(100px,27%) var(--texture-brushbar) minmax(100px,1fr) clamp(7px,.9dvh,18px) minmax(150px,var(--texture-reference-properties-size,35%));
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--texture-font);
  color: var(--texture-text);
}
body.mode-tpaint.texture-reference-layout #app > .modebar,
body.mode-tpaint.texture-reference-layout #properties-panel,
body.mode-tpaint.texture-reference-layout .viewport-wrap > .left-tools,
body.mode-tpaint.texture-reference-layout .viewport-wrap > .right-actions,
body.mode-tpaint.texture-reference-layout .vp-info,
body.mode-tpaint.texture-reference-layout #last-op-panel,
body.mode-tpaint.texture-reference-layout #scene-only-toggle { display: none !important; }
body.mode-tpaint.texture-reference-layout #texture-layer-outliner {
  display: contents;
  border: 0;
  box-shadow: none;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack {
  grid-column: 2;
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #1c1c1c;
  background: #333;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack > div {
  flex: 1;
  min-height: 0;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-panel { gap: 0; min-height: 0; height: 100%; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-header {
  flex: 0 0 var(--texture-header);
  min-height: 0;
  padding: 0 15px;
  background: #2b2b2b;
  border-bottom: 1px solid #242424;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-header strong {
  font-size: var(--texture-font);
  font-weight: 700;
  letter-spacing: .02em;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-header small,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-header .texture-layer-count,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-header > b { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-global-actions {
  position: absolute;
  top: 0;
  right: 7px;
  height: var(--texture-header);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 42;
  padding: 0;
  background: transparent;
  border: 0;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-global-actions button {
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 5px;
  border: 0;
  background: transparent;
  border-radius: 0;
  color: #bbb;
}
.texture-layer-dock-global-actions button.texture-paint-exit,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-global-actions button.texture-paint-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-height: 36px;
  padding: 5px 8px;
}
.texture-layer-dock-global-actions button.texture-paint-exit svg,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-global-actions button.texture-paint-exit svg {
  width: 20px;
  height: 20px;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-global-actions svg {
  width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7;
}
body.mode-tpaint.texture-reference-layout .texture-layer-reference-controls {
  display: flex;
  flex: 0 0 var(--texture-actions);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 9px 0 12px;
  border: 0;
  min-width: 0;
  z-index: 2;
}
body.mode-tpaint.texture-reference-layout .texture-layer-view-row { padding: 0; border: 0; flex: 0 1 auto; }
body.mode-tpaint.texture-reference-layout .texture-layer-view-row select {
  width: auto;
  max-width: 210px;
  min-height: 0;
  height: clamp(26px,2.3dvh,45px);
  padding: 0 5px;
  border: 1px solid #555;
  border-radius: 0;
  font: inherit;
  font-size: var(--texture-font);
  font-weight: 400;
  color: #ccc;
  background-color: #272727;
}
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: clamp(4px,.8vw,12px);
  padding: 0;
  border: 0;
  background: transparent;
}
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > button,
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > details > summary {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  width: clamp(24px,2.9vw,44px);
  height: clamp(30px,3dvh,58px);
  min-height: 0;
  padding: 2px;
  gap: 0;
  background: transparent;
  color: #ccc;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > button > span,
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar summary > span { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar svg { width: 80%; height: 80%; stroke: currentColor; stroke-width: 1.5; fill: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar .texture-layer-icon-chevron { position: absolute; width: 11px; height: 9px; right: -2px; bottom: 6px; }
body.mode-tpaint.texture-reference-layout .texture-layer-stack-menu {
  background: #292929;
  border: 1px solid #555;
  border-radius: 0;
  box-shadow: 0 5px 18px #0009;
  z-index: 100;
}
body.mode-tpaint.texture-reference-layout .texture-layer-stack-menu button { color: #ddd; border-radius: 0; min-height: 32px; font-size: 13px; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-list { padding: 0 3px 0 0; gap: 0; overflow-y: auto; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-row {
  display: flex;
  align-items: center;
  min-height: var(--texture-row);
  height: var(--texture-row);
  flex: 0 0 var(--texture-row);
  gap: clamp(7px,.7vw,12px);
  padding: 0 12px 0 calc(8px + var(--layer-depth,0) * 16px);
  margin: 0;
  background: #333;
  border: 0;
  border-bottom: 2px solid #202020;
  border-radius: 0;
  box-shadow: none;
  color: #ccc;
  overflow: visible;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-row.active {
  background: #262626;
  box-shadow: inset 0 0 0 2px var(--minder-texture-orange);
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-eye {
  flex: 0 0 clamp(22px,2.1vw,32px); width: clamp(22px,2.1vw,32px); height: 32px; padding: 0;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-eye svg { width: 100%; height: 100%; fill: none; stroke: #ccc; stroke-width: 1.8; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-disclosure { flex: 0 0 clamp(24px,2.1vw,32px); width: clamp(24px,2.1vw,32px); height: 30px; color: #ccc; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-disclosure svg { width: 100%; height: 100%; fill: currentColor; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-disclosure.placeholder,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-mask.empty { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-thumbnail,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-mask {
  position: relative;
  flex: 0 0 clamp(28px,3.33vw,50px);
  width: clamp(28px,3.33vw,50px);
  height: clamp(28px,3.33vw,50px);
  padding: 2px;
  border: 2px solid #555;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-thumbnail.paint,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-thumbnail.folder {
  background-color: #eee;
  background-image: conic-gradient(#999 25%,#eee 0 50%,#999 0 75%,#eee 0);
  background-size: 10px 10px;
  background-position: center;
}
body.mode-tpaint.texture-reference-layout .texture-layer-content-target.target-selected,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-mask.target-selected { border-color: var(--minder-texture-orange); box-shadow: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-thumbnail-strip { display: block; position: absolute; bottom: -13px; left: 0; right: 0; height: clamp(4px,.5dvh,10px); background: #505050; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-copy { flex: 1; min-width: 0; margin-left: 3px; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-copy strong { font-size: var(--texture-font); font-weight: 400; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-copy small { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-tail { display: flex; align-items: center; gap: clamp(8px,1.1vw,17px); flex: 0 0 auto; margin-left: auto; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-slot {
  display: block;
  width: clamp(25px,2.9vw,44px);
  height: clamp(25px,2.9vw,44px);
  padding: 0; border: 2px dashed #666; background: transparent; border-radius: 0; color: transparent; box-shadow: none;
}
body.mode-tpaint.texture-reference-layout .texture-layer-reference-slot.active { border-color: var(--minder-texture-orange); background: var(--minder-texture-orange-soft); }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-slot svg { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-settings { display: grid; grid-template-rows: 1fr 1fr; width: clamp(55px,5.5vw,83px); gap: 3px; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-blend,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-opacity input {
  border: 0; background: transparent; color: #ccc; border-radius: 0;
  font: inherit; font-size: var(--texture-font); font-weight: 400; min-height: 0; height: calc(var(--texture-row) * .36);
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-blend { padding: 0; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-opacity { display: flex; align-items: center; gap: 7px; font-size: var(--texture-font); }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-opacity input { width: calc(100% - 14px); padding: 0; text-align: right; }
body.mode-tpaint.texture-reference-layout .texture-layer-opacity-unit { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-opacity::after { content: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-opacity > .texture-layer-icon-chevron { flex: 0 0 12px; width: 12px; height: 12px; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-opacity { height: calc(var(--texture-row) * .36); min-height: 0; line-height: 1; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-settings { grid-template-rows: repeat(2, minmax(0,1fr)); height: calc(var(--texture-row) * .76); }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-opacity input { flex: 1; min-width: 0; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-slot { border: 2px dashed #666 !important; color: transparent !important; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-slot > span { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-slot.active { border-color: var(--minder-texture-orange) !important; background: var(--minder-texture-orange-soft) !important; }
body.mode-tpaint.texture-reference-layout .viewport-wrap {
  grid-column: 2; grid-row: 3; width: 100%; height: 100%; min-width: 0; min-height: 0; border: 0; border-radius: 0; margin: 0;
  background: #191919;
}
body.mode-tpaint.texture-reference-layout .texture-paint-viewport-toolbar {
  top: 12px; bottom: auto; left: auto; right: 12px; transform: none;
  background: transparent; border: 0; padding: 0; border-radius: 0; box-shadow: none;
}
body.mode-tpaint.texture-reference-layout .texture-paint-viewport-toolbar > button,
body.mode-tpaint.texture-reference-layout .texture-paint-viewport-toolbar label > span { display: none; }
body.mode-tpaint.texture-reference-layout #texture-paint-display-channel {
  width: clamp(160px,22vw,327px); height: clamp(25px,2.1dvh,40px); min-height: 0;
  max-width: none;
  border: 2px solid #444; border-radius: 0; background: #222; color: var(--minder-texture-orange); font: inherit; font-size: var(--texture-font);
}
body.mode-tpaint.texture-reference-layout #m3-view-lock-stack { display: none !important; }
body.mode-tpaint.texture-reference-layout #m3-top-left-controls { top: auto !important; left: auto !important; bottom: 25px !important; right: 12px !important; }
body.mode-tpaint.texture-reference-layout #axis-gizmo { display: block !important; position: relative; top: auto !important; left: auto !important; bottom: auto !important; right: auto !important; width: 70px; height: 70px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-divider { grid-column: 2; grid-row: 4; min-height: 0; background: #333; border-top: 1px solid #222; border-bottom: 1px solid #1c1c1c; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-divider::after { display: none; }
body.mode-tpaint.texture-reference-layout .texture-reference-rail {
  display: flex; flex-direction: column; align-items: stretch;
  grid-column: 1; grid-row: 1 / -1; min-height: 0; gap: 0; position: relative; z-index: 60; border-right: 2px solid #202020; background: #333;
}
body.mode-tpaint.texture-reference-layout .texture-reference-rail > button,
body.mode-tpaint.texture-reference-layout .texture-reference-rail > details > summary {
  position: relative; display: flex; justify-content: center; align-items: center; width: 100%;
  height: clamp(33px,3.35dvh,65px); flex: 0 0 clamp(33px,3.35dvh,65px); min-height: 0; padding: 5px 3px; color: #ccc; background: transparent; border: 0; border-radius: 0;
}
body.mode-tpaint.texture-reference-layout .texture-reference-rail > button.active { background: #252525; color: var(--minder-texture-orange); box-shadow: inset 2px 0 var(--minder-texture-orange); }
body.mode-tpaint.texture-reference-layout .texture-reference-rail svg { width: 90%; height: 75%; fill: none; stroke: currentColor; stroke-width: 1.5; }
body.mode-tpaint.texture-reference-layout .texture-reference-rail i { position: absolute; right: 1px; bottom: 0; font: 16px Arial; }
body.mode-tpaint.texture-reference-layout .texture-reference-rail > button:nth-of-type(9),
body.mode-tpaint.texture-reference-layout .texture-reference-rail > button:nth-of-type(10) { color: #777; }
.texture-reference-grip { height: clamp(24px,3.4dvh,66px); flex: 0 0 clamp(24px,3.4dvh,66px); background: repeating-linear-gradient(90deg,#242424 0 2px,transparent 2px 4px) center / 80% 5px no-repeat; }
.texture-reference-grip:not(:first-child) { height: 14px; flex-basis: 14px; }
.texture-reference-ps { border: 2px solid currentColor; padding: 1px; font: clamp(14px,1.5vw,22px) Arial; border-radius: 3px; }
.texture-reference-letter { font: 900 clamp(18px,2vw,28px) Arial; }
.texture-reference-app-menu { position: relative; margin-top: auto; }
.texture-reference-app-menu > summary { list-style: none; cursor: pointer; }
.texture-reference-app-menu > div { position: absolute; left: 100%; bottom: 0; width: 225px; max-height: 70dvh; overflow-y: auto; padding: 5px; background: #292929; border: 1px solid #555; box-shadow: 0 8px 30px #0009; }
.texture-reference-app-menu button { display: block; width: 100%; padding: 9px 10px; text-align: left; color: #ddd; background: transparent; border: 0; font: 13px Arial; }
body.mode-tpaint.texture-reference-layout button:hover,
body.mode-tpaint.texture-reference-layout summary:hover { background-color: #ffffff0c; }
body.mode-tpaint.texture-reference-layout button:focus-visible,
body.mode-tpaint.texture-reference-layout summary:focus-visible,
body.mode-tpaint.texture-reference-layout select:focus-visible,
body.mode-tpaint.texture-reference-layout input:focus-visible { outline: 2px solid var(--minder-texture-focus); outline-offset: -2px; }
body.mode-tpaint.texture-reference-layout button:disabled { opacity: .4; }
body.mode-tpaint.texture-reference-layout .texture-reference-brushbar {
  display: none; grid-column: 2; grid-row: 2; align-items: center; gap: clamp(4px,.7vw,11px); min-width: 0; padding: 3px 7px; background: #333; border-bottom: 1px solid #222; overflow-x: auto; overflow-y: hidden;
}
body.mode-tpaint.texture-reference-layout .texture-reference-brushbar > button { display: grid; place-items: center; flex: 0 0 clamp(22px,3vw,45px); width: clamp(22px,3vw,45px); height: 90%; padding: 3px; color: #ccc; border: 0; border-radius: 0; background: transparent; }
body.mode-tpaint.texture-reference-layout .texture-reference-brushbar > button[ data-texture-coming-soon="Size pressure dynamics"] { background: #222; }
.texture-reference-brushbar svg { width: 75%; height: 75%; stroke: currentColor; fill: none; stroke-width: 1.4; }
.texture-reference-brush-control { flex: 1 1 150px; min-width: 80px; display: flex; flex-direction: column; gap: 3px; font-size: var(--texture-font); }
.texture-reference-brush-control > span { display: flex; justify-content: space-between; gap: 4px; white-space: nowrap; }
.texture-reference-brush-control output { font: inherit; margin-left: auto; padding: 0 5px; border-bottom: 1px solid #454545; }
.texture-reference-strip-divider { width: 1px; flex: 0 0 1px; height: 75%; background: #252525; }
body.mode-tpaint.texture-reference-layout .texture-reference-brushbar > .texture-reference-distance { flex: 1 1 150px; display: flex; flex-direction: column; align-items: stretch; min-width: 80px; padding: 0; color: #777; font: inherit; }
.texture-reference-distance > span:first-child { display: flex; justify-content: space-between; }
.texture-reference-disabled-slider { display: block; height: 3px; background: #505050; position: relative; margin-top: 12px; }
.texture-reference-disabled-slider::after { content: ''; position: absolute; left: 38%; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: #777; }
body.mode-tpaint.texture-reference-layout input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; accent-color: #ccc; }
body.mode-tpaint.texture-reference-layout input[type=range]::-webkit-slider-runnable-track { height: 3px; background: #777; border-radius: 0; }
body.mode-tpaint.texture-reference-layout input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 15px; height: 15px; background: #ccc; border: 0; border-radius: 50%; box-shadow: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector {
  grid-column: 2; grid-row: 5; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: #333; border: 1px solid #222;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector-header {
  display: flex; justify-content: flex-start; gap: 0; flex: 0 0 var(--texture-header); min-height: 0; padding: 0;
  background: #333; border: 0; position: relative;
}
body.mode-tpaint.texture-reference-layout .texture-layer-inspector-target {
  flex: 0 1 auto; height: 100%; padding: 0 12px; margin: 0; border: 0; border-top: 3px solid var(--minder-texture-orange); border-radius: 0; background: transparent; color: #eee; align-items: center; text-align: left;
}
body.mode-tpaint.texture-reference-layout .texture-layer-inspector-target strong { font-size: var(--texture-font); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
body.mode-tpaint.texture-reference-layout .texture-layer-inspector-target b { color: inherit; }
body.mode-tpaint.texture-reference-layout #texture-layer-inspector-icon,
body.mode-tpaint.texture-reference-layout #texture-layer-inspector-name { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector-header > .texture-layer-inspector-actions { display: flex; flex: 0 0 auto; align-items: center; height: 100%; border: 0; border-top: 3px solid var(--minder-texture-orange); border-radius: 0; background: transparent; padding: 0 7px 0 0; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector-header > .texture-layer-inspector-actions button { display: block; width: 25px; min-height: 0; height: 28px; background: transparent; border: 0; color: #bbb; border-radius: 0; }
body.mode-tpaint.texture-reference-layout #texture-layer-inspector-collapse {
  display: flex; align-items: center; justify-content: center; flex: 0 0 42px;
  width: 42px; height: 100%; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--text-dim); cursor: pointer;
}
body.mode-tpaint.texture-reference-layout #texture-layer-inspector-collapse:hover { color: var(--accent); background: var(--bg-card-hover); }
body.mode-tpaint.texture-reference-layout #texture-layer-inspector-close { display: block; }
body.mode-tpaint.texture-reference-layout .texture-reference-shelf-tab { display: block; align-self: stretch; background: #282828; color: #ccc; font: 700 var(--texture-font) Arial; padding: 0 15px; border: 0; border-radius: 0; }
body.mode-tpaint.texture-reference-layout .texture-reference-previews { display: none; }
.texture-reference-stroke-preview { display: flex; align-items: center; justify-content: center; min-height: 0; }
.texture-reference-stroke-preview svg { height: 100%; width: 85%; max-width: 530px; }
.texture-reference-material-preview { display: grid; place-items: center; min-height: 0; padding: 7px; border: 0; border-radius: 0; background: transparent; }
.texture-reference-material-preview > span { display: block; height: 92%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(ellipse at 75% 20%,#fffef1 0 8%,#f5e7cb 30%,#b5a78b 55%,#84785f 80%,#aea28b 100%); box-shadow: inset 5px 0 12px #fff4; }
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories { display: flex; height: var(--texture-category); flex: 0 0 var(--texture-category); background: #333; border-bottom: 2px solid #282828; }
.texture-reference-property-categories button { display: grid; place-items: center; width: var(--texture-category); padding: 7px; height: 100%; border: 0; border-top: 3px solid transparent; border-radius: 0; background: #282828; color: #ccc; }
.texture-reference-property-categories button.active { border-top-color: var(--minder-texture-orange); background: #333; }
.texture-reference-property-categories svg { width: 75%; height: 75%; fill: none; stroke: currentColor; stroke-width: 1.5; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-scroll { min-height: 0; flex: 1; padding: clamp(12px,1.7vw,25px); overflow-y: auto; background: #333; }
body.mode-tpaint.texture-reference-layout .texture-inspector-tabs { display: none; }
/* Remove only the requested Layer card, preserving Folder and Mask settings. */
body.mode-tpaint.texture-reference-layout #texture-layer-selected-properties .texture-context-layer[aria-label="Layer settings"] { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector[data-has-paint="true"][data-property-category="brush"]:not(.is-shelf) #texture-layer-selected-properties { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector[data-property-category="material"] #texture-paint-inspector-body,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-shelf #texture-paint-inspector-body,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-shelf .texture-reference-previews,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-shelf .texture-reference-property-categories { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-shelf .texture-reference-shelf-tab { background: #333; border-top: 3px solid var(--minder-texture-orange); color: var(--minder-texture-orange); }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-shelf .texture-layer-inspector-target,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-shelf .texture-layer-dock-inspector-header > .texture-layer-inspector-actions { border-top-color: transparent; background: #282828; }
body.mode-tpaint.texture-reference-layout .texture-layer-inspector-target { cursor: pointer; }
body.mode-tpaint.texture-reference-layout .tpaint-panel-v3.contextual { display: flex; flex-direction: column; gap: 16px; padding: 0; }
body.mode-tpaint.texture-reference-layout .tpaint-panel-v3.contextual > .texture-context-heading { display: none; }
body.mode-tpaint.texture-reference-layout .tpaint-panel-v3.contextual > .tpaint-channel-tabs { display: flex; flex-wrap: wrap; border-radius: 0; background: #292929; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > .texture-layer-stack-more { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > .texture-layer-stack-more[open] { display: block; position: absolute; right: 12px; top: calc(var(--texture-header) + var(--texture-actions)); }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > .texture-layer-stack-more[open] > summary { display: none !important; }
body.mode-tpaint.texture-reference-layout .texture-layer-stack-menu { position: fixed; top: calc(var(--texture-header) + var(--texture-actions)); right: 12px; left: auto; max-height: calc(100dvh - var(--texture-header) - var(--texture-actions) - 20px); overflow-y: auto; }
body.mode-tpaint.texture-reference-layout .tpaint-panel-v3.contextual[data-reference-tool="brush"] > .texture-paint-tool-context,
body.mode-tpaint.texture-reference-layout .tpaint-panel-v3.contextual[data-reference-tool="eraser"] > .texture-paint-tool-context { display: none; }
body.mode-tpaint.texture-reference-layout .texture-context-brush { order: -1; }
body.mode-tpaint.texture-reference-layout .tpaint-v3-pane,
body.mode-tpaint.texture-reference-layout .texture-context-layer,
body.mode-tpaint.texture-reference-layout .texture-context-mask,
body.mode-tpaint.texture-reference-layout .texture-context-advanced,
body.mode-tpaint.texture-reference-layout .texture-layer-effects,
body.mode-tpaint.texture-reference-layout .texture-layer-material-utilities { border-radius: 0; border-color: #444; background: transparent; box-shadow: none; }
body.mode-tpaint.texture-reference-layout .texture-context-brush { display: flex; flex-direction: column; gap: 18px; border: 0; padding: 0; }
body.mode-tpaint.texture-reference-layout .texture-context-brush > .texture-context-heading { order: -10; margin: 0 0 2px; }
body.mode-tpaint.texture-reference-layout .texture-context-brush > .texture-context-heading strong { font: 700 var(--texture-font) Arial; text-transform: uppercase; color: #eee; }
body.mode-tpaint.texture-reference-layout .texture-context-brush > .texture-context-heading small { display: none; }
body.mode-tpaint.texture-reference-layout .texture-reference-size-label { order: -9; padding: 0; color: #ccc; }
body.mode-tpaint.texture-reference-layout .texture-context-brush > .texture-reference-size-row { order: -8; }
body.mode-tpaint.texture-reference-layout .texture-context-brush > .texture-reference-minimum-row { order: -7; }
body.mode-tpaint.texture-reference-layout .texture-context-brush .tpaint-v3-control-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin: 0 0 2px clamp(15px,2.6vw,40px); padding: 0; border: 0; background: transparent; color: #ccc; font-size: var(--texture-font); }
body.mode-tpaint.texture-reference-layout .texture-context-brush .tpaint-v3-control-row > span { grid-column: 1; grid-row: 1; font-size: inherit; }
body.mode-tpaint.texture-reference-layout .texture-context-brush .tpaint-v3-control-row > strong { grid-column: 2; grid-row: 1; font: inherit; font-size: var(--texture-font); color: #ccc; text-align: right; }
body.mode-tpaint.texture-reference-layout .texture-context-brush .tpaint-v3-control-row > strong { border: 0; background: transparent; box-shadow: none; padding: 0 8px; }
body.mode-tpaint.texture-reference-layout .texture-context-brush .tpaint-v3-control-row > span { color: #ccc; font-weight: 400; }
body.mode-tpaint.texture-reference-layout .texture-context-brush .tpaint-v3-control-row > input { grid-column: 1 / -1; grid-row: 2; }
body.mode-tpaint.texture-reference-layout .texture-reference-minimum-row { cursor: pointer; }
body.mode-tpaint.texture-reference-layout .texture-reference-minimum-row > strong > small { font-size: 10px; color: #999; padding-right: 12px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector .btn { border-radius: 0; background: #2b2b2b; border: 1px solid #505050; color: #ccc; box-shadow: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector .btn.primary { border-color: var(--minder-texture-orange); background: var(--minder-texture-orange-soft); color: var(--minder-texture-orange); }
body.mode-tpaint.texture-reference-layout ::-webkit-scrollbar { width: 10px; height: 4px; }
body.mode-tpaint.texture-reference-layout ::-webkit-scrollbar-track { background: #292929; }
body.mode-tpaint.texture-reference-layout ::-webkit-scrollbar-thumb { background: #494949; border-radius: 0; }
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed #app { grid-template-rows: var(--texture-header) var(--texture-brushbar) minmax(100px,1fr) clamp(7px,.9dvh,18px) minmax(150px,var(--texture-reference-properties-size,35%)); }
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed .texture-layer-reference-controls,
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed .texture-layer-outline-list { display: none; }
body.mode-tpaint.texture-reference-layout.reference-properties-collapsed #app { grid-template-rows: minmax(100px,27%) var(--texture-brushbar) minmax(100px,1fr) 7px var(--texture-header); }
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed.reference-properties-collapsed #app { grid-template-rows: var(--texture-header) var(--texture-brushbar) minmax(100px,1fr) 7px var(--texture-header); }
body.mode-tpaint.texture-reference-layout.reference-properties-collapsed .texture-layer-dock-inspector > :not(header) { display: none; }
body.mode-tpaint.texture-reference-layout.reference-properties-collapsed #texture-layer-inspector-collapse { display: flex; }
/* Floating Layers retains its header when minimized; the legacy reopen tab is redundant. */
body.mode-tpaint.texture-reference-layout #texture-layer-dock-tab { display: none !important; }
@media (max-width: 650px) {
  body.mode-tpaint.texture-reference-layout .texture-reference-brushbar { gap: 3px; padding: 3px 4px; }
  body.mode-tpaint.texture-reference-layout .texture-reference-brushbar > button { flex-basis: 16px; width: 16px; padding: 1px; }
  body.mode-tpaint.texture-reference-layout .texture-reference-brush-control { min-width: 0; flex-basis: 44px; font-size: 9px; }
  body.mode-tpaint.texture-reference-layout .texture-reference-brush-control > span { overflow: hidden; gap: 2px; }
  body.mode-tpaint.texture-reference-layout .texture-reference-brush-control output { padding: 0; font-size: 9px; }
  body.mode-tpaint.texture-reference-layout .texture-reference-brushbar > .texture-reference-distance { min-width: 38px; flex-basis: 38px; font-size: 9px; }
  body.mode-tpaint.texture-reference-layout .texture-reference-brushbar input[type=range]::-webkit-slider-thumb { width: 10px; height: 10px; margin-top: -4px; }
  body.mode-tpaint.texture-reference-layout .texture-reference-disabled-slider::after { width: 10px; height: 10px; top: -4px; }
  body.mode-tpaint.texture-reference-layout .texture-layer-reference-controls { gap: 3px; padding: 0 4px; }
  body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar { gap: 2px; }
  body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > button,
  body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > details > summary { width: 25px; }
  body.mode-tpaint.texture-reference-layout .texture-layer-outline-row { padding-left: 5px; padding-right: 5px; gap: 6px; }
  body.mode-tpaint.texture-reference-layout .texture-layer-reference-tail { gap: 5px; }
  body.mode-tpaint.texture-reference-layout .texture-layer-dock-scroll { padding: 12px; }
}
@media (max-height: 620px) {
  body.mode-tpaint.texture-reference-layout .texture-reference-rail > button { height: 27px; flex-basis: 27px; }
  body.mode-tpaint.texture-reference-layout .texture-reference-grip { height: 12px; flex-basis: 12px; }
  body.mode-tpaint.texture-reference-layout .texture-reference-previews { flex-basis: 65px; }
}

/* Reference Fill inspector: projection first, then the five material channels. */
.texture-fill-properties.texture-fill-reference {
  display: block; min-width: 0; padding: 0; margin: 0; border: 0;
  border-radius: 0; background: #333; color: #ccc;
  font: 400 var(--texture-font, 16px)/1.4 Arial, sans-serif;
}
.texture-fill-reference h3 { margin: 0 0 20px; font: 700 1em/1.4 Arial, sans-serif; color: #ddd; }
.texture-fill-reference-projection { padding: 0 0 24px; border-bottom: 2px solid #292929; }
.texture-fill-reference-select { display: grid; grid-template-columns: minmax(95px,20%) minmax(0,1fr); gap: 12px; align-items: center; margin: 8px 0; }
.texture-fill-reference-select select { width: 100%; min-width: 0; min-height: 36px; padding: 3px 10px; border: 2px solid #4a4a4a; border-radius: 0; background: #262626; color: #ccc; font: inherit; }
.texture-fill-reference-transforms > summary { padding: 12px 0; cursor: pointer; font-weight: 700; }
.texture-fill-reference-transform-row { display: grid; grid-template-columns: 80px minmax(0,1fr) 42px minmax(0,1fr); align-items: center; gap: 10px; padding: 7px 0 7px 20px; }
.texture-fill-reference-transform-row.is-rotation { grid-template-columns: 80px minmax(0,1fr); }
.texture-fill-reference-axis { display: grid; gap: 5px; min-width: 0; }
.texture-fill-reference-axis input[type="number"] { justify-self: end; width: min(100%,90px); min-height: 26px; padding: 0 6px; border: 0; border-bottom: 1px solid #414141; border-radius: 0; background: transparent; text-align: right; color: #ccc; font: inherit; }
.texture-fill-reference input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 22px; min-height: 22px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: #ccc; }
.texture-fill-reference input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #686868; }
.texture-fill-reference input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: #ccc; }
.texture-fill-reference input[type="range"]::-moz-range-track { height: 4px; background: #686868; }
.texture-fill-reference input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #ccc; }
.texture-fill-reference-lock { position: relative; display: grid; place-items: center; height: 42px; margin-top: 12px; background: #222; cursor: pointer; }
.texture-fill-reference-lock input, .texture-fill-reference-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.texture-fill-reference-lock span { color: #777; font-size: 24px; }
.texture-fill-reference-lock input:checked + span { color: #ddd; }
.texture-fill-reference-lock:focus-within, .texture-fill-reference-toggle:focus-within { outline: 2px solid #eee; outline-offset: 3px; }
.texture-fill-reference-reset { display: block; margin: 12px 0 0 auto; padding: 5px 10px; border: 1px solid #555; border-radius: 0; background: #292929; color: #bbb; font: inherit; font-size: .8em; cursor: pointer; }
.texture-fill-reference-material { padding-top: 18px; }
.texture-fill-reference-toggles { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0; }
.texture-fill-reference-toggle { position: relative; cursor: pointer; }
.texture-fill-reference-toggle span { display: block; padding: 2px 10px; border: 2px solid #555; background: #282828; color: #888; font-weight: 700; }
.texture-fill-reference-toggle input:checked + span { border-color: var(--minder-texture-orange); color: var(--minder-texture-orange); }
.texture-fill-reference-material-slot { background: #4a4a4a; }
.texture-fill-reference-material-slot > summary { display: grid; text-align: center; padding: 4px 8px; cursor: pointer; list-style: none; }
.texture-fill-reference-material-slot > summary::-webkit-details-marker { display: none; }
.texture-fill-reference-material-slot > summary span { font-weight: 400; }
.texture-fill-reference-or { display: flex; align-items: center; gap: 18px; margin: 28px 0 20px; text-align: center; }
.texture-fill-reference-or::before, .texture-fill-reference-or::after { content: ''; flex: 1; height: 2px; background: #292929; }
.texture-fill-reference-channel { margin: 0 0 32px; }
.texture-fill-reference-channel.is-disabled { opacity: .4; }
.texture-fill-reference .texture-fill-resource { border: 0; border-radius: 0; background: #4a4a4a; }
.texture-fill-reference .texture-fill-resource > summary { grid-template-columns: minmax(0,1fr); gap: 0; padding: 4px 8px; min-height: 48px; text-align: center; }
.texture-fill-reference .texture-fill-resource-preview, .texture-fill-reference .texture-fill-resource-chevron { display: none; }
.texture-fill-reference .texture-fill-resource-copy strong, .texture-fill-reference .texture-fill-resource-copy small { font-size: 1em; color: #ccc; white-space: normal; }
.texture-fill-reference .texture-fill-resource-actions { font-size: .8em; background: #292929; }
.texture-fill-reference .texture-fill-resource-actions > span { font-size: inherit; }
.texture-fill-reference-resource { display: grid; padding: 4px 8px; min-height: 48px; background: #4a4a4a; text-align: center; }
.texture-fill-reference-resource span { font-size: .85em; }
.texture-fill-reference input.texture-fill-reference-color { display: block; width: 100%; height: 28px; min-height: 28px; padding: 3px; margin-top: 8px; border: 0; border-radius: 0; background: #555; cursor: pointer; }
.texture-fill-reference-color::-webkit-color-swatch-wrapper { padding: 0; }
.texture-fill-reference-color::-webkit-color-swatch { border: 0; }
.texture-fill-reference-value { display: grid; gap: 4px; padding-top: 8px; }
.texture-fill-reference-value output { text-align: right; padding-right: 8px; }
.texture-fill-reference-value input[type="range"]::-webkit-slider-runnable-track { height: 10px; background: linear-gradient(to right,#000,#fff); }
.texture-fill-reference-value input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -5px; border: 2px solid #ccc; background: #444; }
.texture-fill-reference-channel[data-fill-channel="height"] input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right,#fff,#000,#fff); }
.texture-fill-reference-channel[data-fill-channel="normal"] input[type="range"]::-webkit-slider-runnable-track { background: #8080ff; }
.texture-fill-reference input:disabled { cursor: not-allowed; }
@media (max-width: 520px) {
  .texture-fill-reference-transform-row { grid-template-columns: 48px minmax(0,1fr) 30px minmax(0,1fr); gap: 5px; padding-left: 0; }
  .texture-fill-reference-transform-row.is-rotation { grid-template-columns: 48px minmax(0,1fr); }
  .texture-fill-reference-toggles { gap: 5px; }
  .texture-fill-reference-toggle span { padding: 3px 5px; }
}

/* Minder Texture Paint skin — visual properties only; reference geometry stays above. */
body.mode-tpaint.texture-reference-layout {
  --texture-text: var(--minder-texture-ink);
  --texture-icon-cutout: var(--minder-texture-surface);
  background: var(--bg-black);
}
body.mode-tpaint.texture-reference-layout #app,
body.mode-tpaint.texture-reference-layout .texture-fill-reference,
body.mode-tpaint.texture-reference-layout .texture-fill-reference h3,
body.mode-tpaint.texture-reference-layout .texture-layer-inspector-target strong,
body.mode-tpaint.texture-reference-layout .texture-reference-shelf-tab,
body.mode-tpaint.texture-reference-layout .texture-context-brush > .texture-context-heading strong {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-scroll,
body.mode-tpaint.texture-reference-layout .texture-fill-properties.texture-fill-reference {
  background: var(--bg-panel); color: var(--text); border-color: var(--border);
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-header,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector-header,
body.mode-tpaint.texture-reference-layout .texture-reference-rail,
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories {
  background: var(--bg-dark); border-color: var(--border); color: var(--text);
}
body.mode-tpaint.texture-reference-layout .texture-layer-reference-controls { background: var(--bg-panel); }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-divider { background: var(--bg-black); border-color: var(--border); }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-row {
  background: var(--bg-panel); border-color: var(--bg-black); color: var(--text); border-radius: 8px;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-row.active {
  background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent);
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-row:not(.active):hover { background: var(--bg-panel-2); }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-eye svg { stroke: currentColor; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-eye,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-disclosure,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-copy { color: var(--text); }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-thumbnail,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-mask { border-color: var(--text-dimmer); border-radius: 6px; }
body.mode-tpaint.texture-reference-layout .texture-layer-content-target.target-selected,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-mask.target-selected { border-color: var(--accent); }
body.mode-tpaint.texture-reference-layout .texture-layer-thumbnail-strip { background: var(--bg-card-hover); border-radius: 3px; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-slot { border-color: var(--text-dimmer) !important; border-radius: 6px; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-slot.active { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-blend,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-opacity input,
body.mode-tpaint.texture-reference-layout .texture-layer-view-row select,
body.mode-tpaint.texture-reference-layout #texture-paint-display-channel {
  background: var(--bg-panel-2); border-color: var(--bg-card-hover); color: var(--text); border-radius: 6px;
}
body.mode-tpaint.texture-reference-layout #texture-paint-display-channel { color: var(--accent); }
body.mode-tpaint.texture-reference-layout .texture-reference-rail > button,
body.mode-tpaint.texture-reference-layout .texture-reference-rail > details > summary,
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > button,
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > details > summary,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-global-actions button,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector-header > .texture-layer-inspector-actions button {
  color: var(--text); background: var(--bg-dark); border-radius: 8px;
}
body.mode-tpaint.texture-reference-layout .texture-reference-rail > button.active {
  background: var(--accent-bg); color: white; box-shadow: inset 0 0 0 1px var(--accent);
}
body.mode-tpaint.texture-reference-layout .texture-reference-rail > button:not(.active):hover,
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > button:hover,
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar > details > summary:hover,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-global-actions button:hover {
  background: var(--bg-card-hover); color: var(--text);
}
body.mode-tpaint.texture-reference-layout .texture-reference-rail svg,
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar svg,
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories svg {
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
body.mode-tpaint.texture-reference-layout .texture-layer-stack-menu,
body.mode-tpaint.texture-reference-layout .texture-reference-app-menu > div {
  background: var(--bg-panel); border-color: var(--bg-card-hover); border-radius: 10px; box-shadow: 0 8px 24px #0008;
}
body.mode-tpaint.texture-reference-layout .texture-layer-stack-menu button { color: var(--text); border-radius: 6px; }
body.mode-tpaint.texture-reference-layout .texture-layer-stack-menu button:hover { background: var(--bg-card-hover); }
body.mode-tpaint.texture-reference-layout .texture-layer-stack-menu button.danger { color: #ff8888; }
body.mode-tpaint.texture-reference-layout .texture-layer-inspector-target,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector-header > .texture-layer-inspector-actions {
  border-top-color: var(--accent); background: var(--bg-panel); color: var(--text);
}
body.mode-tpaint.texture-reference-layout .texture-reference-shelf-tab { background: var(--bg-dark); color: var(--text-dim); }
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories button { background: var(--bg-dark); color: var(--text-dim); border-radius: 6px; }
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories button.active {
  border-top-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector .btn {
  border-radius: 10px; background: var(--bg-card); border-color: rgba(255,255,255,.1); color: var(--text);
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector .btn.primary {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector .btn.danger { color: #ff8888; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector .btn:not(:disabled):hover { background: var(--bg-card-hover); }
body.mode-tpaint.texture-reference-layout .tpaint-v3-pane,
body.mode-tpaint.texture-reference-layout .texture-context-layer,
body.mode-tpaint.texture-reference-layout .texture-context-mask,
body.mode-tpaint.texture-reference-layout .texture-context-advanced,
body.mode-tpaint.texture-reference-layout .texture-layer-effects,
body.mode-tpaint.texture-reference-layout .texture-layer-material-utilities {
  border-radius: 10px; border-color: rgba(255,255,255,.1); background: var(--bg-panel-2);
}
body.mode-tpaint.texture-reference-layout .texture-context-brush { background: transparent; }
body.mode-tpaint.texture-reference-layout .texture-context-brush .tpaint-v3-control-row,
body.mode-tpaint.texture-reference-layout .texture-context-brush .tpaint-v3-control-row > span,
body.mode-tpaint.texture-reference-layout .texture-context-brush .tpaint-v3-control-row > strong,
body.mode-tpaint.texture-reference-layout .texture-reference-size-label { color: var(--text); }
body.mode-tpaint.texture-reference-layout input[type="range"],
body.mode-tpaint.texture-reference-layout input[type="checkbox"] { accent-color: var(--accent); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference h3 { color: var(--text); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-projection { border-color: var(--border); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-select select,
body.mode-tpaint.texture-reference-layout .texture-fill-reference-axis input[type="number"],
body.mode-tpaint.texture-reference-layout .texture-fill-reference-reset {
  background: var(--bg-panel-2); color: var(--text); border-color: var(--bg-card-hover); border-radius: 6px;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-transforms > summary { color: var(--text); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-transforms > summary::marker { color: var(--accent); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-lock { background: var(--bg-dark); border-radius: 8px; }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-lock input:checked + span { color: var(--accent); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-toggle span {
  background: var(--bg-card); border-color: var(--bg-card-hover); border-radius: 6px; color: var(--text-dim);
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-toggle input:checked + span {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-material-slot,
body.mode-tpaint.texture-reference-layout .texture-fill-reference-resource,
body.mode-tpaint.texture-reference-layout .texture-fill-reference .texture-fill-resource {
  background: var(--bg-panel-2); color: var(--text); border-radius: 8px;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference .texture-fill-resource-copy strong { color: var(--text); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference .texture-fill-resource-copy small,
body.mode-tpaint.texture-reference-layout .texture-fill-reference-resource span,
body.mode-tpaint.texture-reference-layout .texture-fill-reference-material-slot > summary span { color: var(--text-dim); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference .texture-fill-resource-actions { background: var(--bg-dark); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-or { color: var(--text-dim); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-or::before,
body.mode-tpaint.texture-reference-layout .texture-fill-reference-or::after { background: var(--border); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference input.texture-fill-reference-color { background: var(--bg-card-hover); border-radius: 6px; }
body.mode-tpaint.texture-reference-layout .texture-fill-reference input[type="range"]::-webkit-slider-thumb { background: var(--accent); border-color: var(--accent); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference input[type="range"]::-moz-range-thumb { background: var(--accent); border-color: var(--accent); }
body.mode-tpaint.texture-reference-layout :is(button, select, input, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.mode-tpaint.texture-reference-layout ::-webkit-scrollbar-track { background: var(--bg-dark); }
body.mode-tpaint.texture-reference-layout ::-webkit-scrollbar-thumb { background: var(--bg-card-hover); border-radius: 6px; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-disclosure svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-shelf .texture-reference-shelf-tab { border-top-color: var(--accent); background: var(--bg-panel); color: var(--accent); }
body.mode-tpaint.texture-reference-layout input[type="range"]::-webkit-slider-thumb { background: var(--accent); }
body.mode-tpaint.texture-reference-layout input[type="range"]::-moz-range-thumb { background: var(--accent); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference input[type="range"]:disabled::-webkit-slider-thumb { background: var(--text-dimmer); border-color: var(--text-dim); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference input[type="range"]:disabled::-moz-range-thumb { background: var(--text-dimmer); border-color: var(--text-dim); }
/* End Minder Texture Paint skin. */

/* Minder workspace behavior: floating tools and Layers, bottom Properties. */
.viewport-wrap > .texture-layer-dock-stack { display: none; }
body.mode-tpaint.texture-reference-layout #app,
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed #app {
  grid-template-columns: 0 minmax(0,1fr);
  grid-template-rows: 0 0 minmax(100px,1fr) 7px minmax(150px,var(--texture-reference-properties-size,35%));
}
body.mode-tpaint.texture-reference-layout.reference-properties-collapsed #app,
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed.reference-properties-collapsed #app {
  grid-template-rows: 0 0 minmax(100px,1fr) 7px var(--texture-header);
}
body.mode-tpaint.texture-reference-layout .viewport-wrap > .texture-layer-dock-stack {
  --texture-header: 42px; --texture-actions: 42px; --texture-row: 54px; --texture-font: 13px;
  display: flex; position: absolute; top: 8px; right: 8px; z-index: 45;
  width: min(var(--texture-layer-panel-width,360px),calc(100% - 94px)); height: min(42%,340px); min-height: 100px;
  border: 1px solid var(--bg-card-hover); border-radius: 12px;
  background: var(--bg-panel); box-shadow: 0 5px 20px #0005;
}
body.mode-tpaint.texture-reference-layout .viewport-wrap > .texture-layer-dock-stack > .texture-layer-resize-handle {
  display: block;
  position: absolute;
  z-index: 6;
  flex: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: none;
  outline: none;
}
body.mode-tpaint.texture-reference-layout .texture-layer-resize-left { top: 10px; bottom: 10px; left: 0; width: 14px; cursor: col-resize; }
body.mode-tpaint.texture-reference-layout .texture-layer-resize-bottom { right: 10px; bottom: 0; left: 10px; height: 14px; cursor: row-resize; }
body.mode-tpaint.texture-reference-layout .texture-layer-resize-handle::after {
  content: '';
  position: absolute;
  border-radius: 8px;
  background: transparent;
  transition: background 120ms ease;
}
body.mode-tpaint.texture-reference-layout .texture-layer-resize-left::after { top: 18px; bottom: 18px; left: 5px; width: 3px; }
body.mode-tpaint.texture-reference-layout .texture-layer-resize-bottom::after { right: 18px; bottom: 5px; left: 18px; height: 3px; }
body.mode-tpaint.texture-reference-layout .texture-layer-resize-handle:is(:hover,:focus-visible,.is-dragging)::after { background: var(--minder-texture-orange); }
body.mode-tpaint.texture-reference-layout .texture-layer-resize-handle:focus-visible { outline: 2px solid #ffb562; outline-offset: -3px; }
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed .texture-layer-resize-handle { display: none !important; }
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed .viewport-wrap > .texture-layer-dock-stack {
  height: var(--texture-header); min-height: var(--texture-header);
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack > .texture-layer-dock-global-actions {
  flex: none; gap: 3px; top: 4px; right: 5px; height: 34px;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-header {
  padding: 4px 142px 4px 5px;
  border: 2px solid var(--minder-texture-orange);
  border-radius: 11px;
  cursor: pointer;
  box-sizing: border-box;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-header .texture-layer-view-row {
  width: 100%;
  min-width: 0;
  min-height: 0;
}
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed .texture-layer-dock-stack #texture-layer-stack-collapse svg { transform: rotate(180deg); }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-controls { overflow-x: auto; flex-shrink: 0; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-view-row select { width: 100%; max-width: none; height: 32px; font-size: 12px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar { gap: 2px; flex-shrink: 0; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar > button,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar > details > summary { width: 28px; min-width: 28px; height: 32px; padding: 5px; }
body.mode-tpaint.texture-reference-layout #m3-top-left-controls {
  top: 8px !important; left: 8px !important; bottom: auto !important; right: auto !important;
}
body.mode-tpaint.texture-reference-layout .texture-reference-rail {
  position: absolute; top: 90px; left: 10px; width: 44px; height: auto;
  max-height: calc(100% - 108px); overflow-y: auto; scrollbar-width: none;
  gap: 6px; border: 0; background: transparent; padding: 0;
}
body.mode-tpaint.texture-reference-layout .texture-reference-grip { display: none; }
body.mode-tpaint.texture-reference-layout .texture-reference-rail > button,
body.mode-tpaint.texture-reference-layout .texture-reference-rail > details > summary {
  width: 44px; height: 44px; flex: 0 0 44px; padding: 9px; border-radius: 12px;
  background: var(--bg-panel); box-shadow: 0 3px 10px #0003;
}
body.mode-tpaint.texture-reference-layout .texture-reference-app-menu { margin-top: 0; }
body.mode-tpaint.texture-reference-layout .texture-reference-app-menu > div { position: fixed; left: 64px; top: 100px; bottom: auto; max-height: calc(100dvh - 120px); }
body.mode-tpaint.texture-reference-layout .texture-paint-viewport-toolbar { top: auto; bottom: 12px; right: 12px; }

/* Paint tool properties: category navigation does not change paint channels. */
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector[data-has-paint="true"]:not(.is-shelf):not(.is-detail) #texture-layer-selected-properties { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector[data-has-paint="true"]:not(.is-shelf):not(.is-detail) #texture-paint-inspector-body { display: block; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector[data-property-category="brush"] .tpaint-panel-v3.contextual > [data-paint-property]:not([data-paint-property="brush"]),
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector[data-property-category="alpha"] .tpaint-panel-v3.contextual > [data-paint-property]:not([data-paint-property="alpha"]),
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector[data-property-category="stencil"] .tpaint-panel-v3.contextual > [data-paint-property]:not([data-paint-property="stencil"]),
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector[data-property-category="material"] .tpaint-panel-v3.contextual > [data-paint-property]:not([data-paint-property="material"]) { display: none !important; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector[data-has-paint="false"] [data-texture-property-category="alpha"],
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector[data-has-paint="false"] [data-texture-property-category="stencil"] { display: none; }
.texture-reference-property-categories .texture-property-tab-label { font-size: 11px; line-height: 1.2; }
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 58px; }
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories button svg { width: 24px; height: 24px; flex-shrink: 0; }
.texture-paint-property-section h3, .texture-paint-material-values h3 { color: var(--text); font-size: 13px; text-transform: uppercase; margin: 0 0 12px; }
.texture-paint-property-section p, .texture-paint-material-values p { color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.texture-paint-property-section [data-alpha-presets] { margin: 16px 0; }
.texture-paint-material-values .tpaint-v3-control-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin: 18px 0; padding: 16px; background: var(--bg-panel-2); border-radius: 10px; }
.texture-paint-material-values .tpaint-v3-control-row > span { grid-column: 1; grid-row: 1; font-weight: 600; }
.texture-paint-material-values .tpaint-v3-control-row > strong { grid-column: 2; grid-row: 1; }
.texture-paint-material-values .tpaint-v3-control-row > input { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; }
.texture-paint-material-values input[type="color"] { height: 38px; cursor: pointer; }

/* Compact floating Layers: no essential action requires horizontal scrolling. */
.viewport-wrap > #texture-paint-exit { display: none; }
body.mode-tpaint.texture-reference-layout .viewport-wrap > #texture-paint-exit { display: flex; align-items: center; gap: 6px; position: absolute; left: 10px; bottom: 10px; z-index: 46; padding: 8px 12px; color: var(--text); background: var(--bg-panel); border: 1px solid var(--bg-card-hover); border-radius: 10px; }
body.mode-tpaint.texture-reference-layout .viewport-wrap > #texture-paint-exit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack > .texture-layer-dock-global-actions { max-width: 137px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-dock-global-actions > button { flex: 0 0 auto; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-controls { display: flex; flex: 0 0 auto; align-items: stretch; height: auto; min-height: 48px; gap: 0; padding: 6px; overflow: visible; box-sizing: border-box; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-controls > .texture-layer-reference-toolbar { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 36px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 3px; width: 100%; min-width: 0; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar > .texture-layer-stack-effects,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar > .texture-layer-stack-material,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar > .texture-layer-stack-folder { display: none !important; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-stack-paint { order: 0; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-stack-fill { order: 1; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-stack-mask { order: 2; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-stack-delete { order: 3; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar > .texture-layer-stack-more { display: block; position: static; order: 4; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar > button,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar > details > summary { width: 100%; min-width: 0; height: 36px; padding: 7px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar > .texture-layer-stack-more[open] > summary { display: flex !important; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-stack-menu { position: fixed; right: 12px; top: 120px; left: auto; width: min(260px,calc(100vw - 24px)); max-height: min(420px,60dvh); overflow-y: auto; }
.texture-compact-extra-action { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-compact-extra-action { display: block; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-row { min-width: 0; width: 100%; box-sizing: border-box; gap: 4px; padding: 0 6px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-eye { width: 20px; flex-basis: 20px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-thumbnail,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-mask { width: 26px; height: 26px; flex-basis: 26px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-tail { gap: 4px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-slot { width: 20px; height: 24px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-settings { width: 52px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }

/* Minder Cutline identity — presentation only; workspace geometry is unchanged. */
body.mode-tpaint.texture-reference-layout .minder-texture-icon {
  width: 22px; height: 22px; flex-shrink: 0;
  vertical-align: middle; pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: var(--minder-texture-icon-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
body.mode-tpaint.texture-reference-layout .texture-layer-icon-chevron {
  width: 10px; height: 10px;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-dock-stack, .texture-layer-dock-inspector) {
  color: var(--minder-texture-ink);
  background: var(--minder-texture-surface);
  border-color: var(--minder-texture-line);
  border-radius: 10px;
  box-shadow: 0 6px 18px #0005, inset 0 1px #ffffff08;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-outline-header, .texture-layer-dock-inspector-header) {
  background: linear-gradient(110deg, #20252a, #171a1e 65%);
  border-color: var(--minder-texture-line);
  box-shadow: inset 0 1px #ffffff05;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-outline-header strong, .texture-layer-inspector-target strong, .texture-reference-shelf-tab) {
  color: var(--minder-texture-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 650;
  letter-spacing: .02em;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-row {
  background-color: var(--minder-texture-surface);
  border-color: transparent;
  border-radius: 8px;
  outline: none;
  box-shadow: inset 0 -1px #ffffff07;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-row:not(.active):hover {
  background-color: var(--minder-texture-raised);
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-row.active {
  background-color: #292923;
  border-color: transparent;
  outline: none;
  box-shadow: inset 2px 0 var(--minder-texture-orange), inset 0 -1px #ffffff0b;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-copy strong {
  color: var(--minder-texture-ink);
  font-weight: 550;
  letter-spacing: .005em;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-outline-thumbnail, .texture-layer-outline-mask) {
  border-color: #646a72;
  border-radius: 4px 7px 4px 4px;
  box-shadow: inset 0 0 0 2px #0004;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-thumbnail.target-selected,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-mask.target-selected {
  border-color: var(--minder-texture-orange);
  box-shadow: inset 0 0 0 1px #0005;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-mask { border-style: dashed; }
body.mode-tpaint.texture-reference-layout .texture-layer-outline-mask.target-selected { border-style: solid; }
body.mode-tpaint.texture-reference-layout .texture-layer-reference-slot {
  border-color: #626a75;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #0003;
}
body.mode-tpaint.texture-reference-layout .texture-layer-reference-slot.active {
  border-color: var(--minder-texture-orange);
  background-color: #ff941f15;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-reference-toolbar, .texture-layer-dock-global-actions, .texture-reference-property-categories, .texture-layer-dock-inspector, .texture-reference-rail) :is(button, details > summary) {
  color: var(--minder-texture-ink);
  background-color: var(--minder-texture-raised);
  border-color: var(--minder-texture-line);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px #ffffff05;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-reference-toolbar, .texture-layer-dock-global-actions, .texture-reference-property-categories, .texture-layer-dock-inspector, .texture-reference-rail) :is(button, summary):hover {
  background-color: var(--minder-texture-hover);
  border-color: #565e68;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-reference-toolbar, .texture-layer-dock-global-actions, .texture-reference-property-categories, .texture-layer-dock-inspector, .texture-reference-rail) :is(button, summary):active {
  background-color: #171a1e;
  box-shadow: inset 0 1px 3px #0006;
}
body.mode-tpaint.texture-reference-layout .texture-reference-rail > button.active,
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories button.active,
body.mode-tpaint.texture-reference-layout .tpaint-channel-tab.active {
  color: var(--minder-texture-orange);
  background: #34291e;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px #ff941f99;
}
body.mode-tpaint.texture-reference-layout .texture-reference-rail > button:not(.active) { color: #b9bfc7; }
body.mode-tpaint.texture-reference-layout .texture-layer-stack-delete:hover { color: #ff9d96; }
body.mode-tpaint.texture-reference-layout .texture-layer-stack-menu,
body.mode-tpaint.texture-reference-layout .texture-reference-app-menu > div {
  color: var(--minder-texture-ink);
  background: #24282e;
  border-color: var(--minder-texture-line);
  border-radius: 9px;
  box-shadow: 0 8px 24px #0007;
}
body.mode-tpaint.texture-reference-layout .texture-layer-stack-menu :is(button, summary) {
  font-family: inherit;
  font-weight: 450;
  border-radius: 5px;
}
body.mode-tpaint.texture-reference-layout .texture-reference-app-menu [data-texture-proxy="btn-save"] .minder-texture-icon {
  width: 16px; height: 16px; margin-inline-end: 7px;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-dock-stack, .texture-layer-dock-inspector, .texture-paint-viewport-toolbar) select {
  appearance: none;
  color: var(--minder-texture-ink);
  background-color: var(--minder-texture-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4 3 3 3-3' fill='none' stroke='%23b5bdc8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 10px 10px;
  padding-inline-end: 18px;
  border-color: var(--minder-texture-line);
  border-radius: 6px;
  box-shadow: inset 0 1px #ffffff04;
  font-family: inherit;
  font-weight: 450;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-blend {
  font-size: 10px;
  letter-spacing: -.015em;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-dock-stack, .texture-layer-dock-inspector) :is(input[type="number"], input[type="text"], output) {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 450;
  color: var(--minder-texture-ink);
  border-color: var(--minder-texture-line);
  border-radius: 6px;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-dock-stack, .texture-layer-dock-inspector) :is(input[type="number"], input[type="text"]) {
  background: #24282d;
  box-shadow: inset 0 1px 2px #0002;
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference h3, .texture-paint-property-section h3, .texture-paint-material-values h3) {
  color: #e0e5eb;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .04em;
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference, .tpaint-panel-v3) :is(small, p) {
  color: var(--minder-texture-muted);
  font-family: inherit;
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference-material, .texture-fill-reference-or, .texture-paint-property-section, .texture-context-heading) {
  border-color: var(--minder-texture-line);
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference-resource, .texture-fill-resource > summary, .texture-fill-reference-material-slot, .texture-paint-material-values .tpaint-v3-control-row) {
  background-color: #262a2f;
  border-color: var(--minder-texture-line);
  border-radius: 8px;
  box-shadow: inset 0 1px #ffffff04;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-toggle span {
  color: var(--minder-texture-muted);
  background: #24282d;
  border-color: transparent;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--minder-texture-line);
  font-size: 12px;
  font-weight: 550;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-toggle input:checked + span {
  color: #ffc07b;
  background: #342a20;
  border-color: transparent;
  box-shadow: inset 0 -2px var(--minder-texture-orange), inset 0 0 0 1px #ff941f44;
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference, .tpaint-panel-v3) input[type="range"]::-webkit-slider-runnable-track {
  background: #4c535d; border-radius: 3px;
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference, .tpaint-panel-v3) input[type="range"]::-webkit-slider-thumb {
  background: var(--minder-texture-orange);
  border-color: #e9aa61; border-radius: 5px;
  box-shadow: 0 1px 3px #0005;
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference, .tpaint-panel-v3) input[type="range"]::-moz-range-track { background: #4c535d; border-radius: 3px; }
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference, .tpaint-panel-v3) input[type="range"]::-moz-range-thumb { background: var(--minder-texture-orange); border-color: #e9aa61; border-radius: 5px; }
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference, .tpaint-panel-v3) input[type="range"]:disabled::-webkit-slider-thumb { background: #68717c; border-color: #68717c; box-shadow: none; }
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference, .tpaint-panel-v3) input[type="range"]:disabled::-moz-range-thumb { background: #68717c; border-color: #68717c; box-shadow: none; }
body.mode-tpaint.texture-reference-layout :is(button, summary, select, input, [tabindex]):focus-visible {
  outline: 2px solid #ffb562;
  outline-offset: 2px;
}
@media (max-width: 480px) {
  body.mode-tpaint.texture-reference-layout .texture-fill-reference-toggle [data-compact-label] { font-size: 0; }
  body.mode-tpaint.texture-reference-layout .texture-fill-reference-toggle [data-compact-label]::before { content: attr(data-compact-label); font-size: 11px; }
}
/* Cutline finishing: paint-safe chrome, no layout or input-behavior changes. */
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-row.active:hover {
  background-color: #323029;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-eye[aria-pressed="false"] {
  color: var(--minder-texture-muted);
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-opacity {
  background: #20242a;
  border-color: var(--minder-texture-line);
  border-radius: 5px;
  box-shadow: inset 0 1px 2px #0003;
  font-variant-numeric: tabular-nums;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-opacity:focus-within {
  box-shadow: inset 0 0 0 1px var(--minder-texture-orange);
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-opacity input {
  background: transparent;
  box-shadow: none;
  color: var(--minder-texture-ink);
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-opacity-unit, .texture-layer-icon-chevron) {
  color: var(--minder-texture-muted);
}
body.mode-tpaint.texture-reference-layout .texture-layer-thumbnail-strip {
  background-color: #89929b;
  border-radius: 2px;
  opacity: .45;
}
body.mode-tpaint.texture-reference-layout .texture-layer-outline-row.active .texture-layer-thumbnail-strip {
  background-color: var(--minder-texture-orange);
  opacity: .8;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-inspector-target, .texture-reference-shelf-tab)[aria-selected="true"] {
  background-color: #25292e;
  border-color: transparent;
  box-shadow: inset 0 -2px var(--minder-texture-orange);
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference, .texture-paint-property-section) h3 {
  text-transform: none;
  letter-spacing: .015em;
  font-weight: 650;
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference-transforms, .texture-fill-projector, .texture-context-advanced) > summary {
  color: var(--minder-texture-ink);
  font-weight: 550;
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference-transforms, .texture-fill-projector, .texture-context-advanced) > summary::marker {
  color: var(--minder-texture-orange);
  font-size: .8em;
}
body.mode-tpaint.texture-reference-layout :is(.texture-shelf-card, .texture-fill-projector) {
  background-color: #23272c;
  border-color: var(--minder-texture-line);
  border-radius: 7px;
  box-shadow: inset 0 1px #ffffff06;
}
body.mode-tpaint.texture-reference-layout .texture-shelf-card:hover {
  background-color: var(--minder-texture-hover);
  border-color: #67717d;
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference-resource, .texture-fill-resource-copy) small {
  color: var(--minder-texture-muted);
  font-size: .85em;
  font-weight: 400;
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference, .tpaint-panel-v3) input[type="range"]::-webkit-slider-thumb {
  border-radius: 3px;
  box-shadow: inset 0 1px #ffffff40, 0 1px 2px #0005;
}
body.mode-tpaint.texture-reference-layout :is(.texture-fill-reference, .tpaint-panel-v3) input[type="range"]::-moz-range-thumb {
  border-radius: 3px;
  box-shadow: inset 0 1px #ffffff40, 0 1px 2px #0005;
}
body.mode-tpaint.texture-reference-layout :is(button, summary)[aria-disabled="true"],
body.mode-tpaint.texture-reference-layout button:disabled {
  color: #87909c;
  box-shadow: none;
}
/* End Minder Cutline identity. */

/* Planar projector controls stay inside the existing Fill properties flow. */
body.mode-tpaint .texture-fill-projector {
  margin: 12px 0; padding: 12px; border: 1px solid #3b4149;
  border-radius: 10px; background: #23272c;
}
body.mode-tpaint .texture-fill-projector-heading {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
}
body.mode-tpaint .texture-fill-projector-heading label { display: flex; gap: 6px; align-items: center; }
body.mode-tpaint .texture-fill-projector input[type="checkbox"] { accent-color: #ff941f; }
body.mode-tpaint .texture-fill-projector-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
body.mode-tpaint .texture-fill-projector-tools .btn { flex: 1 1 70px; min-height: 36px; padding: 6px 10px; }
body.mode-tpaint .texture-fill-projector-tools [aria-pressed="true"] { color: #ffad50; border-color: #ff941f; background: #382c20; }
body.mode-tpaint .texture-fill-projector p { color: #a4aab3; font-size: 12px; line-height: 1.5; margin: 10px 0; }
body.mode-tpaint .texture-fill-projector-values { display: grid; grid-template-columns: 75px repeat(3, minmax(0, 1fr)); align-items: center; gap: 6px; margin: 8px 0; }
body.mode-tpaint .texture-fill-projector-values label { display: flex; align-items: center; gap: 4px; min-width: 0; }
body.mode-tpaint .texture-fill-projector-values input { width: 100%; min-width: 0; padding: 5px; color: #e8ebef; background: #30353b; border: 1px solid #4c535d; border-radius: 5px; }

/* Texture Paint history stays beside Layers without reserving a header row. */
body.mode-tpaint.texture-reference-layout #app,
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed #app {
  grid-template-rows: 0 0 minmax(100px,1fr) 7px minmax(150px,var(--texture-reference-properties-size,35%));
}
body.mode-tpaint.texture-reference-layout.reference-properties-collapsed #app,
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed.reference-properties-collapsed #app {
  grid-template-rows: 0 0 minmax(100px,1fr) 7px var(--texture-header);
}
body.mode-tpaint.texture-reference-layout #app > .modebar {
  display: flex !important; position: absolute; top: 8px;
  right: calc(10px + var(--texture-layer-panel-width,360px)); z-index: 44;
  width: auto; height: 48px; min-height: 0; margin: 0; padding: 4px; gap: 4px;
  background: #1d2024; border: 1px solid #3b4149; border-radius: 9px 0 0 9px;
}
body.mode-tpaint.texture-reference-layout #app > .modebar > :not(#btn-undo):not(#btn-redo) { display: none !important; }
body.mode-tpaint.texture-reference-layout #app > .modebar > :is(#btn-undo, #btn-redo) { display: flex !important; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; margin: 0; padding: 9px; color: #e8ebef; background: #272b30; border-radius: 8px; }
body.mode-tpaint.texture-reference-layout #app > .modebar > :is(#btn-undo, #btn-redo) svg { width: 22px; height: 22px; flex: none; }
body.mode-tpaint.texture-reference-layout #app > .modebar > :is(#btn-undo, #btn-redo):disabled { opacity: .35; }

/* The existing transform fan is viewport-level, so rail scrolling cannot clip it. */
body.mode-tpaint.texture-planar-projector-active #ltool-transform { display: flex !important; }
body.mode-tpaint.texture-planar-projector-active #transform-fan:not([hidden]) { display: flex !important; }
body.mode-tpaint.texture-planar-projector-active #ltool-transform .outer-tool-label { display: none; }
body.mode-tpaint.texture-reference-layout .texture-reference-app-menu button { display: flex; align-items: center; gap: 8px; }
body.mode-tpaint.texture-reference-layout .texture-reference-app-menu button svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* Phase 1 authoritative state presentation. No geometry or interaction rules. */
body.mode-tpaint.texture-reference-layout :is(
  .texture-layer-dock-stack,
  .texture-layer-dock-inspector,
  .texture-reference-app-menu,
  #app > .modebar
) {
  color: var(--minder-texture-ink);
  background-color: var(--minder-texture-surface);
  border-color: var(--minder-texture-line);
  border-width: var(--minder-texture-border-width);
  border-radius: var(--minder-texture-radius-panel);
}
body.mode-tpaint.texture-reference-layout :is(
  .texture-layer-outline-actions,
  .texture-layer-dock-inspector-header,
  .texture-reference-rail,
  .texture-reference-property-categories,
  #app > .modebar
) :is(button, select, input[type="text"], input[type="number"]),
body.mode-tpaint.texture-reference-layout .texture-reference-app-menu button {
  color: var(--minder-texture-ink);
  background-color: var(--minder-texture-raised);
  border-color: var(--minder-texture-line);
  border-width: var(--minder-texture-border-width);
  border-radius: var(--minder-texture-radius-control);
}
body.mode-tpaint.texture-reference-layout :is(
  .texture-layer-outline-actions,
  .texture-layer-dock-inspector-header,
  .texture-reference-rail,
  .texture-reference-property-categories,
  #app > .modebar,
  .texture-reference-app-menu
) :is(button, summary):not(:disabled):not([aria-disabled="true"]):hover {
  color: var(--minder-texture-ink);
  background-color: var(--minder-texture-hover);
  border-color: #565e68;
}
body.mode-tpaint.texture-reference-layout :is(
  .texture-reference-rail > button.active,
  .texture-reference-property-categories button.active,
  .tpaint-channel-tab.active,
  .texture-layer-dock-inspector .btn.primary,
  .texture-layer-inspector-target[aria-selected="true"],
  .texture-reference-shelf-tab[aria-selected="true"],
  .texture-fill-projector-tools [aria-pressed="true"]
) {
  color: var(--minder-texture-orange);
  background-color: var(--minder-texture-orange-soft);
  border-color: var(--minder-texture-orange);
  box-shadow: inset 0 -2px var(--minder-texture-orange);
}
body.mode-tpaint.texture-reference-layout :is(
  button.danger,
  .btn.danger,
  .texture-layer-stack-delete,
  [data-layer-outline-delete],
  [data-layer-delete],
  [data-effect-delete],
  [data-layer-mask-action="delete"]
) {
  color: var(--minder-texture-danger);
  border-color: var(--minder-texture-danger);
}
body.mode-tpaint.texture-reference-layout :is(
  button.danger,
  .btn.danger,
  .texture-layer-stack-delete,
  [data-layer-outline-delete],
  [data-layer-delete],
  [data-effect-delete],
  [data-layer-mask-action="delete"]
):not(:disabled):hover {
  color: #ffaaa5;
  background-color: var(--minder-texture-danger-soft);
  border-color: var(--minder-texture-danger);
}
body.mode-tpaint.texture-reference-layout :is(button, input, select, summary):disabled,
body.mode-tpaint.texture-reference-layout :is(button, input, select, summary)[aria-disabled="true"] {
  color: var(--minder-texture-muted);
  opacity: .42;
  box-shadow: none;
}
body.mode-tpaint.texture-reference-layout :is(button, input, select, summary):focus-visible {
  outline: 2px solid var(--minder-texture-focus);
  outline-offset: 2px;
}
body.mode-tpaint.texture-reference-layout :is(.minder-texture-icon, button svg, summary svg) {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--minder-texture-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* End Phase 1 authoritative state presentation. */

/* Phase 2 workspace geometry: content fit, stable scrollbars, and dock collision guards. */
body.mode-tpaint.texture-reference-layout {
  --texture-history-dock-width: 90px;
  --texture-floating-panel-gap: 8px;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-scroll,
body.mode-tpaint.texture-reference-layout .texture-layer-outline-list,
body.mode-tpaint.texture-reference-layout .texture-fill-reference,
body.mode-tpaint.texture-reference-layout .texture-reference-shelf {
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
body.mode-tpaint.texture-reference-layout #app > .modebar {
  width: var(--texture-history-dock-width);
  box-sizing: border-box;
  right: calc(
    var(--texture-floating-panel-gap)
    + var(--texture-layer-panel-width,360px)
    + var(--texture-floating-panel-gap)
  );
}
body.mode-tpaint.texture-reference-layout .viewport-wrap > .texture-layer-dock-stack {
  max-width: calc(100% - var(--texture-history-dock-width) - 80px);
  box-sizing: border-box;
}
@media (max-width: 350px) {
  body.mode-tpaint.texture-reference-layout #app > .modebar { left: 58px; right: auto; }
  body.mode-tpaint.texture-reference-layout .viewport-wrap > .texture-layer-dock-stack { max-width: calc(100% - 168px); }
}
/* End Phase 2 workspace geometry. */

/* Phase 5: stable progressive navigation. */
.texture-inspector-back { display: none; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-detail .texture-inspector-back {
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  height: 100%;
  border: 0;
  border-top: 3px solid var(--minder-texture-orange);
  border-radius: 0;
  background: var(--bg-dark);
  color: var(--minder-texture-orange);
  font-size: 24px;
}
.texture-shelf-categories { display: flex; gap: var(--space-1, 4px); overflow-x: auto; margin-bottom: var(--space-2, 6px); scrollbar-width: thin; }
.texture-shelf-categories button {
  min-height: 34px;
  border: 1px solid var(--border-subtle, #3d424a);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-dark, #202327);
  color: var(--text-dim, #aeb4bd);
  padding: 0 10px;
  white-space: nowrap;
}
.texture-shelf-categories button.active {
  border-color: var(--minder-texture-orange);
  background: color-mix(in srgb, var(--minder-texture-orange) 14%, var(--bg-dark));
  color: var(--minder-texture-orange);
}


/* Phase 6: Layers quick actions and categorized Tools menu. */
body.mode-tpaint.texture-reference-layout .texture-layer-reference-toolbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) auto; gap: 4px; }
body.mode-tpaint.texture-reference-layout .texture-layer-quick-action { min-width: 0; min-height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px; }
body.mode-tpaint.texture-reference-layout .texture-layer-quick-action span { max-width: 100%; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
body.mode-tpaint.texture-reference-layout .texture-layer-quick-action svg { width: 19px; height: 19px; }
body.mode-tpaint.texture-reference-layout .texture-layer-stack-more { position: relative; }
body.mode-tpaint.texture-reference-layout .texture-layer-tools-menu { right: 0; left: auto; width: min(330px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 120px)); overflow: auto; padding: 6px; }
.texture-layer-tools-group { display: grid; gap: 2px; padding: 5px 0; border-bottom: 1px solid var(--border-subtle, #3d424a); }
.texture-layer-tools-group:last-child { border-bottom: 0; }
.texture-layer-tools-group > strong { padding: 3px 8px; color: var(--text-dim, #aeb4bd); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.texture-layer-tools-group > button { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 34px; text-align: left; }
.texture-layer-tools-group > button:not(:has(svg)) span { grid-column: 2; }
.texture-layer-tools-group > button svg { width: 18px; height: 18px; }
.texture-layer-tools-group.danger-group { margin-top: 4px; border-top: 1px solid var(--minder-texture-danger); }
.texture-layer-tools-group.danger-group > strong { color: #ffaaa5; }
.texture-layer-quick-mask-choice { position: relative; z-index: 8; min-width: 0; }
.texture-layer-quick-mask-choice[open] { z-index: 121; }
.texture-layer-quick-mask-choice > summary { list-style: none; }
.texture-layer-quick-mask-choice > summary::-webkit-details-marker { display: none; }
.texture-layer-mask-choice-menu { position: absolute; z-index: 120; top: calc(100% + 5px); left: 50%; display: grid; width: 150px; padding: 5px; gap: 4px; transform: translateX(-50%); border: 1px solid var(--minder-texture-line); border-radius: 8px; background: var(--minder-texture-surface); box-shadow: 0 8px 24px #0009; }
.texture-layer-mask-choice-menu button { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 7px; min-height: 38px; text-align: left; }
.texture-mask-choice-swatch { width: 18px; height: 18px; border: 1px solid #747b84; border-radius: 4px; }
.texture-mask-choice-swatch.black { background: #000; }
.texture-mask-choice-swatch.white { background: #fff; }
.texture-mask-paint-value { display: grid; gap: 5px; padding: 8px 10px; border: 1px solid var(--minder-texture-line); border-radius: 7px; background: var(--minder-texture-raised); }
.texture-mask-paint-value > span:first-child, .texture-mask-value-stops { display: flex; justify-content: space-between; align-items: center; }
.texture-mask-paint-value output { font-variant-numeric: tabular-nums; color: var(--minder-texture-orange); }
.texture-mask-value-stops { color: var(--minder-texture-muted); font-size: 10px; font-weight: 500; }

/* The adjacent minimize controls already own these panel-collapse actions.
   Keep the legacy elements available to the controller, but remove the
   duplicate hit targets from the Texture Paint interface. */
body.mode-tpaint.texture-reference-layout #texture-layer-stack-collapse,
body.mode-tpaint.texture-reference-layout #texture-layer-inspector-close {
  display: none !important;
}

/* Compact Fill properties: remove the legacy reference-mockup spacer bands
   while retaining a small usable separation between adjacent controls. */
body.mode-tpaint.texture-reference-layout .texture-fill-reference-projection {
  padding-bottom: 0;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-material {
  padding-top: 0;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-material > h3 {
  margin: 4px 0 8px;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-toggles {
  margin: 8px 0;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel {
  margin-bottom: 8px;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference input.texture-fill-reference-color {
  margin-top: 3px;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-value {
  gap: 2px;
  padding-top: 3px;
}

/* Put the existing Layers Tools launcher in the freed header slot. */
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar { position: static; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar > .texture-layer-stack-more { position: absolute; z-index: 6; top: 4px; right: 128px; width: 34px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar > .texture-layer-stack-more > summary { width: 34px; min-width: 34px; height: 34px; padding: 7px; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-stack-more .texture-layer-tools-menu { position: fixed; right: 8px; top: 58px; left: auto; width: min(var(--texture-layer-panel-width,360px),calc(100vw - 16px)); }

/* Keep each Fill channel label, scalar and slider as one compact unit. */
body.mode-tpaint.texture-reference-layout .texture-fill-reference-or { display: none; }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel { position: relative; }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) .texture-fill-resource > summary { padding-right: 72px; }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-value { display: block; }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-value output { position: absolute; z-index: 1; top: 14px; right: 12px; padding: 0; font-variant-numeric: tabular-nums; }

/* The complete Texture Mapping group is collapsed by default. */
body.mode-tpaint.texture-reference-layout .texture-fill-reference-projection > summary { padding: 8px 0; cursor: pointer; color: var(--minder-texture-ink); font-weight: 650; list-style-position: inside; }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-projection > summary::marker { color: var(--minder-texture-orange); }
body.mode-tpaint.texture-reference-layout .texture-fill-reference-projection[open] > summary { margin-bottom: 4px; }

/* Compact Fill material rows: label, slider, and scalar share one line. */
body.mode-tpaint.texture-reference-layout .texture-fill-reference-material-slot {
  margin-bottom: 6px;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  margin: 0 0 6px;
  padding: 6px 10px;
  border: 1px solid var(--minder-texture-line);
  border-radius: 8px;
  background: var(--minder-texture-raised);
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) > .texture-fill-resource {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  background: transparent;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) > .texture-fill-resource > summary {
  display: block;
  min-height: 0;
  padding: 0 !important;
  background: transparent;
  text-align: left;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) .texture-fill-resource-copy strong,
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) .texture-fill-resource-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) .texture-fill-reference-value {
  display: contents;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) .texture-fill-reference-value input[type="range"] {
  grid-column: 2;
  grid-row: 1;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) .texture-fill-reference-value output {
  position: static;
  grid-column: 3;
  grid-row: 1;
  padding: 0;
  text-align: right;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) > .texture-fill-resource[open] {
  grid-column: 1 / -1;
  grid-row: 1;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]):has(> .texture-fill-resource[open]) .texture-fill-reference-value input[type="range"],
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]):has(> .texture-fill-resource[open]) .texture-fill-reference-value output { grid-row: 2; }
/* Texture Paint workbench theme alignment.
   Presentation only: reuse the neutral Minder scene palette and interaction
   language without moving controls or changing their behavioral owners. */
body.mode-tpaint.texture-reference-layout :is(
  .texture-layer-dock-stack,
  .texture-layer-dock-inspector
) {
  background: var(--bg-panel);
  border-color: rgba(255,255,255,.10);
  border-radius: 7px;
  box-shadow: 0 7px 18px rgba(0,0,0,.36);
}

body.mode-tpaint.texture-reference-layout :is(
  .texture-layer-outline-header,
  .texture-layer-reference-controls,
  .texture-layer-dock-inspector-header,
  .texture-reference-property-categories
) {
  background: var(--bg-dark);
  border-color: var(--minder-texture-separator);
}

/* Main and category navigation follows Minder's flat tabs: a quiet inactive
   surface and one orange edge for the current destination. */
body.mode-tpaint.texture-reference-layout :is(
  .texture-layer-inspector-target,
  .texture-reference-shelf-tab,
  .texture-reference-property-categories button
) {
  background: var(--bg-dark);
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--text-dim);
}
body.mode-tpaint.texture-reference-layout :is(
  .texture-layer-inspector-target[aria-selected="true"],
  .texture-reference-shelf-tab[aria-selected="true"],
  .texture-reference-property-categories button.active
) {
  color: var(--accent);
  background: rgba(232,125,13,.08);
  border-color: transparent;
  box-shadow: inset 0 -2px var(--accent);
}

body.mode-tpaint.texture-reference-layout .texture-layer-dock-scroll,
body.mode-tpaint.texture-reference-layout .texture-fill-reference {
  background: var(--bg-panel);
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-projection > summary,
body.mode-tpaint.texture-reference-layout :is(
  .texture-fill-reference-material-slot,
  .texture-fill-reference-channel,
  .texture-fill-reference-utilities details
) {
  border-color: var(--minder-texture-line);
  border-radius: 5px;
  background: var(--bg-panel-2);
  box-shadow: none;
}

body.mode-tpaint.texture-reference-layout .texture-fill-reference-toggles button {
  border-color: rgba(255,255,255,.10);
  border-radius: 5px;
  background: var(--bg-panel-2);
  color: var(--text-dim);
  box-shadow: none;
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-toggles button.active {
  border-color: rgba(255,140,26,.42);
  background: rgba(232,125,13,.10);
  color: #ffb05c;
  box-shadow: inset 0 -2px var(--accent);
}

/* Match the Lighting inspector: recessed black wells, thin gray rails,
   compact numeric readouts, and the established orange thumb. */
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) {
  min-height: 52px;
  border-radius: 5px;
  background: var(--bg-panel-2);
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) .texture-fill-reference-value input[type="range"] {
  box-sizing: border-box;
  height: 28px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 4px;
  background: #101010;
  accent-color: var(--accent);
}
body.mode-tpaint.texture-reference-layout .texture-fill-reference-channel:not([data-fill-channel="baseColor"]) .texture-fill-reference-value output {
  min-width: 46px;
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

/* Outliner rows use the ordinary Minder hierarchy treatment. */
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-row {
  border-radius: 4px;
  background: var(--bg-panel);
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-row:hover {
  background: var(--bg-card-hover);
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-outline-row[aria-selected="true"] {
  border-color: transparent;
  background: rgba(232,125,13,.11);
  box-shadow: inset 3px 0 var(--accent);
}


/* Minder main-tab parity for Texture Paint. Presentation only: the existing
   tab buttons, category state, click handlers, and panel collapse owner stay
   unchanged. */
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector-header {
  align-items: stretch;
  min-height: 64px;
  height: 64px;
  flex-basis: 64px;
  gap: 0;
  background: var(--bg-dark);
}
body.mode-tpaint.texture-reference-layout #texture-layer-inspector-collapse {
  flex: 0 0 54px;
  width: 54px;
  height: 64px;
  border-right: 1px solid rgba(255,255,255,.06);
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-inspector-target, .texture-reference-shelf-tab) {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  height: 64px;
  padding: 6px 4px 7px;
  margin: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-dim);
  font: 600 11px/1.05 Arial, sans-serif;
  text-align: center;
  text-transform: none;
}
body.mode-tpaint.texture-reference-layout .texture-layer-inspector-target > span {
  display: block;
}
body.mode-tpaint.texture-reference-layout .texture-layer-inspector-target strong,
body.mode-tpaint.texture-reference-layout .texture-reference-shelf-tab > span {
  color: inherit;
  font: inherit;
  text-transform: none;
  white-space: nowrap;
}
body.mode-tpaint.texture-reference-layout .texture-main-tab-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-inspector-target, .texture-reference-shelf-tab)[aria-selected="true"] {
  color: #fff;
  background: var(--minder-texture-orange, #e87d0d);
  border-bottom-color: transparent;
  border-radius: 7px;
  box-shadow: none;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-shelf .texture-reference-shelf-tab {
  color: #fff;
  background: var(--minder-texture-orange, #e87d0d);
  border: 0;
  border-radius: 7px;
  box-shadow: none;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-shelf .texture-layer-inspector-target {
  color: var(--text-dim);
  background: transparent;
  border: 0;
  border-radius: 0;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector-header > .texture-layer-inspector-actions {
  display: none;
}


/* Explicit final main-tab states override older reference-layout selectors. */
body.mode-tpaint.texture-reference-layout button.texture-layer-inspector-target[aria-selected="true"],
body.mode-tpaint.texture-reference-layout button.texture-reference-shelf-tab[aria-selected="true"],
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-shelf button.texture-reference-shelf-tab {
  color: #fff !important;
  background: #ff8c1a !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-shelf button.texture-layer-inspector-target[aria-selected="false"] {
  color: var(--text-dim) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

body.mode-tpaint.texture-reference-layout .texture-reference-shelf-tab > .texture-main-tab-icon { order: -1; }

/* Simplified Layers Quick Actions: Layer, Mask, Duplicate, Delete. */
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-reference-toolbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.mode-tpaint.texture-reference-layout .texture-layer-choice-menu button svg { width: 18px; height: 18px; }

/* Minimized Layers keeps the header and quick-action row, but must not keep
   the user's expanded/resized height. The panel controller deliberately
   preserves that height inline so it can be restored on expand; !important
   makes this temporary collapsed geometry win without destroying the saved
   expanded size. */
body.mode-tpaint.texture-reference-layout.reference-layers-collapsed .viewport-wrap > .texture-layer-dock-stack {
  height: calc(var(--texture-header, 42px) + 48px) !important;
  min-height: 0 !important;
  max-height: calc(var(--texture-header, 42px) + 48px) !important;
}

/* The Layer chooser belongs to the floating Layers panel, not to the narrow
   first toolbar cell. Centre its surface across the panel so Paint Layer and
   Fill Layer remain fully visible even when the panel is beside the history
   controls on a phone. Fixed positioning also prevents the stack's intentional
   overflow clipping from cutting off the left side of the chooser. */
body.mode-tpaint.texture-reference-layout .texture-layer-dock-stack .texture-layer-choice-menu {
  position: fixed;
  top: calc(8px + var(--texture-header, 42px) + 53px);
  right: 8px;
  left: auto;
  width: min(
    var(--texture-layer-panel-width, 360px),
    calc(100vw - var(--texture-history-dock-width, 90px) - 80px)
  );
  min-width: 150px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  transform: none;
}

/* A selected paint mask is a focused grayscale paint target. */
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-mask-editing .texture-reference-property-categories,
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-mask-editing #texture-paint-inspector-body { display: none !important; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-mask-editing #texture-layer-selected-properties { display: block !important; }
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-mask-editing .texture-layer-dock-scroll { padding: 8px 12px; }
body.mode-tpaint.texture-reference-layout .texture-mask-paint-only { margin: 0; padding: 8px 10px; border: 0; background: transparent; box-shadow: none; }
body.mode-tpaint.texture-reference-layout .texture-mask-paint-only .texture-mask-paint-value { display: grid; grid-template-columns: 74px minmax(0,1fr) 44px; align-items: center; gap: 10px; }
body.mode-tpaint.texture-reference-layout .texture-mask-paint-only .texture-mask-value-stops { display: flex; justify-content: space-between; color: var(--text); font-size: 11px; }
body.mode-tpaint.texture-reference-layout .texture-mask-paint-only input[type="range"] { min-width: 0; }
body.mode-tpaint.texture-reference-layout .texture-mask-paint-only output { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector.is-mask-editing #texture-layer-selected-properties > .texture-layers-panel > :not(.texture-context-mask) { display: none !important; }
/* Match the compact Object Mode properties navigation scale. */
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector-header {
  min-height: 52px;
  height: 52px;
  flex-basis: 52px;
}
body.mode-tpaint.texture-reference-layout #texture-layer-inspector-collapse {
  flex-basis: 44px;
  width: 44px;
  height: 52px;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-inspector-target, .texture-reference-shelf-tab) {
  height: 52px;
  min-height: 52px;
  padding: 4px 2px 5px;
  gap: 1px;
}
body.mode-tpaint.texture-reference-layout .texture-main-tab-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

/* Final compact main navigation: deliberately smaller than the previous 52px pass. */
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector-header {
  min-height: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
}
body.mode-tpaint.texture-reference-layout #texture-layer-inspector-collapse {
  min-width: 40px !important;
  width: 40px !important;
  min-height: 44px !important;
  height: 44px !important;
  flex: 0 0 40px !important;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-inspector-target, .texture-reference-shelf-tab) {
  min-height: 44px !important;
  height: 44px !important;
  padding: 3px 2px 4px !important;
  gap: 0 !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
body.mode-tpaint.texture-reference-layout .texture-main-tab-icon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}
body.mode-tpaint.texture-reference-layout .texture-layer-inspector-target strong,
body.mode-tpaint.texture-reference-layout .texture-reference-shelf-tab > span {
  font-size: 10px !important;
  line-height: 1 !important;
}

/* Compact Texture Paint navigation on tall/narrow phones. The former
   viewport-relative category height could grow to 66px, consuming the short
   Properties sheet and visually crowding its first control. Keep both
   navigation rows deterministic and leave the scroll body its own space. */
body.mode-tpaint.texture-reference-layout .texture-layer-dock-inspector-header {
  min-height: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
}
body.mode-tpaint.texture-reference-layout #texture-layer-inspector-collapse {
  min-width: 34px !important;
  width: 34px !important;
  min-height: 36px !important;
  height: 36px !important;
  flex: 0 0 34px !important;
  padding: 7px !important;
}
body.mode-tpaint.texture-reference-layout :is(.texture-layer-inspector-target, .texture-reference-shelf-tab) {
  min-height: 36px !important;
  height: 36px !important;
  padding: 2px !important;
  gap: 0 !important;
  font-size: 9px !important;
}
body.mode-tpaint.texture-reference-layout .texture-main-tab-icon {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
}
body.mode-tpaint.texture-reference-layout .texture-layer-inspector-target strong,
body.mode-tpaint.texture-reference-layout .texture-reference-shelf-tab > span {
  font-size: 9px !important;
}
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories {
  height: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  overflow: hidden;
}
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories button {
  min-width: 0;
  width: 25%;
  height: 44px;
  padding: 2px 1px;
  gap: 1px;
}
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories button svg {
  width: 17px;
  height: 17px;
}
body.mode-tpaint.texture-reference-layout .texture-reference-property-categories .texture-property-tab-label {
  font-size: 9px;
  line-height: 1;
}
body.mode-tpaint.texture-reference-layout .texture-layer-dock-scroll {
  padding-top: 8px;
}