/* RenderHub 3D Tools — shared styles.
   Every rule is scoped under .rh-tool, the root element of each tool, so nothing here touches the
   rest of the site, and the overrides at the top shield the tools from the site's global rules
   (h1/h2 sizes, input padding and borders, scaled checkboxes, the global transition, centred text).
   Tool-specific layout lives in each tool's own stylesheet. */

.rh-tool {
  /* Brand tokens. Change them here and every tool follows. */
  --rh-bg: #EBEBEB;            /* the page container the tools sit in */
  --rh-surface: #ffffff;       /* panels and cards */
  --rh-sunken: #e2e2e2;        /* image wells, behind canvases */
  --rh-fg: #1a1a1a;
  --rh-muted: #5c5c5c;         /* secondary text: 6.7:1 on white, 5.6:1 on #EBEBEB */
  --rh-line: #C8C8C8;          /* borders */
  --rh-accent: #195FDD;        /* RenderHub blue */
  --rh-accent-strong: #0C4ACB; /* border of filled blue buttons, as on the site's own buttons */
  --rh-accent-soft: #dfe9fa;   /* the accent at ~14% on white: pressed toggle buttons */
  --rh-on-accent: #ffffff;
  --rh-danger: #b4302b;
  --rh-font: rhfont, arial, sans-serif;   /* the site's typeface */
  --rh-font-mono: ui-monospace, "SFMono-Regular", Consolas, Menlo, monospace;
  --rh-radius: 8px;            /* panels and cards */
  --rh-radius-sm: 5px;         /* buttons and inputs, like the site's buttons */
  --rh-gutter: 20px;           /* lines the tool up with the page's intro block */
  --rh-sticky-top: 110px;      /* clears the site's fixed header (60 px) and sub-bar (40 px) */

  color-scheme: light;
  display: block;
  padding: 0 var(--rh-gutter);
  text-align: left;
  color: var(--rh-fg);
  font: 14px/1.45 var(--rh-font);
}

/* ---- shields against the host page's global rules */
.rh-tool, .rh-tool * { box-sizing: border-box; transition: none; }
.rh-tool h1, .rh-tool h2, .rh-tool h3 { color: var(--rh-fg); margin: 0; padding: 0; line-height: 1.25; }
.rh-tool p { margin: 0; }
.rh-tool input[type=range] { padding: 0; border: 0; border-radius: 0; background: transparent; margin: 2px 0 0; font: inherit; transform: none; }
.rh-tool input[type=checkbox] { padding: 0; border: 0; margin: 0; transform: none; }
.rh-tool [hidden] { display: none !important; }
.rh-tool :focus-visible { outline: 2px solid var(--rh-accent); outline-offset: 2px; }

/* ---- buttons */
.rh-tool .rh-btn {
  font: 600 13px/1 var(--rh-font); border-radius: var(--rh-radius-sm); padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--rh-line); background: var(--rh-surface); color: var(--rh-fg);
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
}
.rh-tool .rh-btn:hover { border-color: var(--rh-accent); }
.rh-tool .rh-btn.primary { background: var(--rh-accent); border-color: var(--rh-accent-strong); color: var(--rh-on-accent); }
.rh-tool .rh-btn.primary:hover { filter: brightness(1.08); }
.rh-tool .rh-btn.ghost { background: transparent; border-color: transparent; color: var(--rh-muted); padding: 6px 8px; font-weight: 400; }
.rh-tool .rh-btn.ghost:hover { color: var(--rh-fg); border-color: var(--rh-line); }
.rh-tool .rh-btn:disabled { opacity: .55; cursor: progress; }
@media (prefers-reduced-motion: no-preference) { .rh-tool .rh-btn { transition: border-color .15s, filter .15s; } }

/* ---- toolbar above a tool's workspace */
.rh-tool .rh-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.rh-tool .rh-toolbar .rh-note { margin-left: auto; }

/* ---- panels and cards */
.rh-tool .rh-panel { background: var(--rh-surface); border: 1px solid var(--rh-line); border-radius: var(--rh-radius); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rh-tool .rh-card { background: var(--rh-surface); border: 1px solid var(--rh-line); border-radius: var(--rh-radius); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.rh-tool .rh-panel h2, .rh-tool .rh-card h2 { font: 700 16px/1.25 var(--rh-font); }
.rh-tool .rh-card > header { display: flex; align-items: center; min-height: 52px; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; }
.rh-tool .rh-card .rh-view { background: var(--rh-sunken); }
.rh-tool .rh-card .rh-view canvas { display: block; width: 100%; height: auto; }
.rh-tool .rh-card .rh-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.rh-tool .rh-card footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.rh-tool .rh-file { font: 11.5px var(--rh-font-mono); color: var(--rh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---- text */
.rh-tool .rh-note { font-size: 12.5px; color: var(--rh-muted); }
.rh-tool .rh-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--rh-muted); font-weight: 700; }
.rh-tool .rh-eyebrow.sub { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rh-line); }
.rh-tool .rh-meta { font: 12px var(--rh-font-mono); color: var(--rh-muted); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.rh-tool .rh-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* ---- image drop well */
.rh-tool .rh-drop { position: relative; border-radius: var(--rh-radius-sm); overflow: hidden; background: var(--rh-sunken); cursor: pointer; }
.rh-tool .rh-drop canvas { display: block; width: 100%; height: auto; }
.rh-tool .rh-drop .rh-hint { position: absolute; inset: auto 8px 8px 8px; background: color-mix(in srgb, var(--rh-surface) 88%, transparent);
  border-radius: var(--rh-radius-sm); padding: 6px 8px; font-size: 12px; color: var(--rh-muted); text-align: center; }
.rh-tool.is-dragging .rh-drop { outline: 2px dashed var(--rh-accent); outline-offset: 3px; }

/* ---- controls (built by RHTools.buildControls) */
.rh-tool .rh-ctrls { display: flex; flex-direction: column; gap: 10px; }
.rh-tool .rh-ctrl { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; }
.rh-tool .rh-ctrl label { font-size: 13px; }
.rh-tool .rh-ctrl output { font: 12px var(--rh-font-mono); color: var(--rh-muted); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.rh-tool .rh-ctrl input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--rh-accent); }
.rh-tool .rh-ctrl.off output, .rh-tool .rh-ctrl.off input[type=range] { opacity: .4; }
.rh-tool .rh-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.rh-tool .rh-toggle input { accent-color: var(--rh-accent); width: 16px; height: 16px; }
.rh-tool .rh-seg { display: inline-flex; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-sm); overflow: hidden; flex-shrink: 0; }
.rh-tool .rh-seg button { font: 13px/1 var(--rh-font); border: 0; border-radius: 0; margin: 0; padding: 7px 10px; background: var(--rh-surface); color: var(--rh-muted); cursor: pointer; }
.rh-tool .rh-seg button[aria-pressed="true"] { background: var(--rh-accent-soft); color: var(--rh-fg); }
.rh-tool .rh-seg-label { font-size: 13px; }

/* ---- toast (one per tool, created by RHTools.toast); above the site's fixed header (z-index 5000) */
.rh-tool .rh-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--rh-fg); color: #fff; padding: 10px 14px; border-radius: var(--rh-radius-sm); font-size: 13px; max-width: calc(100% - 32px); z-index: 6000; }
  
  
/* PBR Texture Generator — layout. Shared look (tokens, panels, cards, controls) is in tools.css.
   A workbench: the left rail holds the source image and the shared height settings and stays in view
   while the page scrolls; the right side is the sphere preview plus a grid of map cards. */

.rh-pbr .pbr-layout { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.rh-pbr .pbr-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: var(--rh-sticky-top); }
.rh-pbr .pbr-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.rh-pbr .pbr-what { color: var(--rh-muted); font-size: 12.5px; }
.rh-pbr .pbr-sphere canvas { touch-action: none; cursor: grab; aspect-ratio: 1; }
.rh-pbr .pbr-sphere canvas:active { cursor: grabbing; }

@media (max-width: 900px) {
  .rh-pbr .pbr-layout { grid-template-columns: minmax(0, 1fr); }
  .rh-pbr .pbr-rail { position: static; }
}

  

/* Main tools page styles */
.toolItem { 
  display: inline-block; 
  text-align: left; 
  box-sizing: border-box; 
  margin: 20px 0; 
  padding: 20px; 
  width: 90%; 
  max-width: 940px; 
  background-color: #f2f2f2; 
  border: 1px solid #c8c8c8; 
  box-shadow: 0px 0px 4px rgba(0,0,0,0.1); 
  border-radius: 8px; 
  cursor: pointer; 
} 
.toolFoot { 
  display: inline-block; 
  width: 90%; 
  max-width: 940px; 
  margin: 60px 0 40px 0; 
} 
.toolItem h2 { 
  font-weight: bold; 
} 
.toolItem img { 
  width: 80px; 
  height: 80px; 
  float: left; 
  margin-right: 16px; 
} 
.toolItem:hover { 
  border: 1px solid #ababab; 
  box-shadow: 0px 0px 4px rgba(0,0,0,0.25); 
  transition: opacity .2s ease-out .1s; 
} 
.toolLink:hover { 
  color: #000000;
  text-decoration: none;
}

.toolBtn {
  padding: 4px 12px;
  border-radius: 6px;
  border: 2px solid #c8c8c8;
  background-color: #ffffff;
  font-weight: bold;
  white-space: nowrap;
}

.toolBtn:hover {
  border-color: #195FDD;
  text-decoration: none;
  color: #000000;
}

h3 {
  margin: 0px;
}

p {
  margin: 4px 0px 36px 0px;
}

/* ---- shared layout for tool workspaces: a settings rail on the left that stays in view while the page
   scrolls, and a grid of equal cards on the right (the PBR generator's .pbr-* rules are the same layout) */
.rh-tool .rh-layout { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.rh-tool .rh-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: var(--rh-sticky-top); }
.rh-tool .rh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
@media (max-width: 900px) {
  .rh-tool .rh-layout { grid-template-columns: minmax(0, 1fr); }
  .rh-tool .rh-rail { position: static; }
}

/* ---- form fields (overriding the site's global input/select rules, so every tool looks the same) */
.rh-tool .rh-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.rh-tool .rh-input, .rh-tool .rh-select {
  font: 13px var(--rh-font); color: var(--rh-fg); background: var(--rh-surface); width: 100%; margin: 0;
  padding: 7px 9px; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-sm); box-sizing: border-box;
}
.rh-tool .rh-input:hover, .rh-tool .rh-select:hover { border-color: var(--rh-accent); }
.rh-tool .rh-input:focus-visible, .rh-tool .rh-select:focus-visible { outline: 2px solid var(--rh-accent); outline-offset: 1px; }

/* ---- a checkerboard behind images with transparency */
.rh-tool .rh-checker { background-color: #fff; background-image: linear-gradient(45deg, #d6d6d6 25%, transparent 25%, transparent 75%, #d6d6d6 75%), linear-gradient(45deg, #d6d6d6 25%, transparent 25%, transparent 75%, #d6d6d6 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; }

/* ---- PBR Channel Packer */
.rh-cp .cp-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.rh-cp .cp-swatch.r { background: #e0413a; } .rh-cp .cp-swatch.g { background: #2fa84f; } .rh-cp .cp-swatch.b { background: #2f6fdf; }
.rh-cp .cp-swatch.a { background: #fff; border: 1px solid var(--rh-line); }
.rh-cp .cp-role { font-weight: 400; color: var(--rh-muted); }
.rh-cp .cp-slot .rh-drop { aspect-ratio: 1; border-radius: 0; display: flex; align-items: center; justify-content: center; }
.rh-cp .cp-slot .rh-drop canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.rh-cp .cp-slot .rh-drop.is-over { outline: 2px dashed var(--rh-accent); outline-offset: -6px; }
.rh-cp .cp-slot.is-unused .rh-drop { opacity: .5; }
.rh-cp .cp-preview canvas { display: block; width: 100%; height: auto; }

/* ---- a vertical list of choices, one selected (aria-pressed) */
.rh-tool .rh-choices { display: flex; flex-direction: column; gap: 4px; }
.rh-tool .rh-choices button { font: 13px/1.2 var(--rh-font); text-align: left; padding: 8px 10px; margin: 0; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--rh-radius-sm); background: transparent; color: var(--rh-fg); }
.rh-tool .rh-choices button:hover { border-color: var(--rh-line); }
.rh-tool .rh-choices button[aria-pressed="true"] { background: var(--rh-accent-soft); border-color: var(--rh-accent); font-weight: 700; }

/* ---- UOM Converter: two boxes with "=" between them, each a large number above a unit menu */
.rh-uom .uom-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rh-uom .uom-calc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.rh-uom .uom-box { display: flex; flex-direction: column; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-sm); overflow: hidden; background: var(--rh-surface); min-width: 0; }
.rh-uom .uom-box:focus-within { border-color: var(--rh-accent); box-shadow: 0 0 0 1px var(--rh-accent); }
.rh-uom .uom-value { font: 400 32px/1.2 var(--rh-font); text-align: center; color: var(--rh-fg); width: 100%; margin: 0;
  padding: 14px 12px; border: 0; border-radius: 0; background: transparent; box-sizing: border-box; }
.rh-uom .uom-value:focus, .rh-uom .uom-value:focus-visible { outline: 0; }
.rh-uom .uom-value[aria-invalid="true"] { color: var(--rh-danger); }
.rh-uom .uom-unit { font: 15px var(--rh-font); color: var(--rh-fg); width: 100%; margin: 0; padding: 9px 10px; cursor: pointer;
  border: 0; border-top: 1px solid var(--rh-line); border-radius: 0; background: var(--rh-sunken); box-sizing: border-box; }
.rh-uom .uom-unit:focus, .rh-uom .uom-unit:focus-visible { outline: 0; }
.rh-uom .uom-eq { font: 400 28px var(--rh-font); color: var(--rh-muted); }
.rh-uom .uom-formula { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 15px; margin: 4px 0 0; }
.rh-uom .uom-badge { background: #fbe3a0; color: #3d2e00; font-size: 13px; padding: 3px 7px; border-radius: 3px; }
.rh-uom .uom-notes { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 600px) {
  .rh-uom .uom-calc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rh-uom .uom-eq { text-align: center; }
}

/* ---- Normal Map Y-Channel Inverter */
.rh-nmi .nmi-well { cursor: pointer; }
.rh-nmi .nmi-well:not(.has-image) { aspect-ratio: 1; }
.rh-nmi .nmi-tag { font: 600 12px/1 var(--rh-font); padding: 5px 8px; border-radius: 3px; white-space: nowrap; background: var(--rh-sunken); color: var(--rh-fg); }
.rh-nmi .nmi-tag.gl { background: #dcefe1; color: #14532d; }
.rh-nmi .nmi-tag.dx { background: #fbe3d0; color: #7a3410; }
.rh-nmi .nmi-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rh-nmi .nmi-file { display: flex; align-items: center; border: 1px solid transparent; border-radius: var(--rh-radius-sm); }
.rh-nmi .nmi-file:hover { border-color: var(--rh-line); }
.rh-nmi .nmi-file[aria-current="true"] { background: var(--rh-accent-soft); border-color: var(--rh-accent); }
.rh-nmi .nmi-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; margin: 0; padding: 7px 9px;
  font: 13px/1.3 var(--rh-font); color: var(--rh-fg); background: transparent; border: 0; cursor: pointer; }
.rh-nmi .nmi-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-nmi .nmi-sub { font-size: 12px; color: var(--rh-muted); }
.rh-nmi .nmi-sub.warn { color: var(--rh-danger); }
.rh-nmi .nmi-remove { margin: 0 4px 0 0; padding: 4px 8px; font: 18px/1 var(--rh-font); color: var(--rh-muted); background: transparent; border: 0; border-radius: var(--rh-radius-sm); cursor: pointer; }
.rh-nmi .nmi-remove:hover { color: var(--rh-fg); background: var(--rh-sunken); }

/* ---- Color Space Converter: two boxes with "=" between them, each a swatch above one field */
.rh-csc .csc-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 1000px; margin: 0 auto; }
.rh-csc .csc-calc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.rh-csc .csc-box { display: flex; flex-direction: column; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-sm); overflow: hidden; background: var(--rh-surface); min-width: 0; }
.rh-csc .csc-swatch { position: relative; height: 140px; display: flex; align-items: flex-end; padding: 8px; border-bottom: 1px solid var(--rh-line); }
.rh-csc label.csc-swatch { cursor: pointer; }
.rh-csc .csc-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; margin: 0; border: 0; }
.rh-csc .csc-swatch span { font-size: 12px; background: color-mix(in srgb, var(--rh-surface) 90%, transparent); border-radius: 3px; padding: 3px 7px; color: var(--rh-fg); pointer-events: none; }
.rh-csc .csc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px 0; }
.rh-csc .csc-head h2 { font: 700 18px/1.2 var(--rh-font); }
.rh-csc .csc-head span { font-size: 12.5px; color: var(--rh-muted); }
.rh-csc .csc-field { display: flex; gap: 8px; padding: 10px 14px 6px; }
.rh-csc .csc-value { flex: 1; min-width: 0; margin: 0; font: 22px/1.2 var(--rh-font-mono); color: var(--rh-fg); padding: 10px 12px;
  border: 1px solid var(--rh-line); border-radius: var(--rh-radius-sm); background: var(--rh-surface); box-sizing: border-box; }
.rh-csc .csc-value:hover { border-color: var(--rh-accent); }
.rh-csc .csc-value:focus-visible { outline: 2px solid var(--rh-accent); outline-offset: 1px; }
.rh-csc .csc-value[aria-invalid="true"] { border-color: var(--rh-danger); color: var(--rh-danger); }
.rh-csc .csc-box > .rh-note { padding: 0 14px 12px; }
.rh-csc .csc-eq { font: 400 28px var(--rh-font); color: var(--rh-muted); }
.rh-csc .csc-darker { font-size: 14px; }
.rh-csc .csc-formula { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; }
.rh-csc .csc-formula sup { font-size: 10px; line-height: 0; }
.rh-csc .csc-badge { background: #fbe3a0; color: #3d2e00; font-size: 13px; padding: 3px 7px; border-radius: 3px; }
.rh-csc .csc-math summary { cursor: pointer; color: var(--rh-accent); font-size: 13.5px; width: max-content; }
.rh-csc .csc-math div { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font: 13px/1.5 var(--rh-font-mono); white-space: pre-wrap; }
.rh-csc .csc-help { font-size: 14px; gap: 8px; }
@media (max-width: 700px) {
  .rh-csc .csc-calc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rh-csc .csc-eq { text-align: center; }
  .rh-csc .csc-swatch { height: 96px; }
  .rh-csc .csc-value { font-size: 16px; padding: 10px 8px; }
}

/* ---- PBR Albedo & Reflectance Picker: your color → the nearest safe color, a brightness scale, references */
.rh-par .par-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 1000px; margin: 0 auto; }
.rh-par .par-calc { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.rh-par .par-box { display: flex; flex-direction: column; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-sm); overflow: hidden; background: var(--rh-surface); min-width: 0; }
.rh-par .par-swatch { position: relative; height: 130px; display: flex; align-items: flex-end; padding: 8px; border-bottom: 1px solid var(--rh-line); }
.rh-par label.par-swatch { cursor: pointer; }
.rh-par .par-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; margin: 0; border: 0; }
.rh-par .par-swatch span { font-size: 12px; background: color-mix(in srgb, var(--rh-surface) 90%, transparent); border-radius: 3px; padding: 3px 7px; pointer-events: none; }
.rh-par .par-head { padding: 12px 14px 0; }
.rh-par .par-head h3 { font: 700 16px/1.2 var(--rh-font); }
.rh-par .par-field { display: flex; gap: 8px; padding: 10px 14px 6px; }
.rh-par .par-value { flex: 1; min-width: 0; margin: 0; font: 22px/1.2 var(--rh-font-mono); color: var(--rh-fg); padding: 10px 12px;
  border: 1px solid var(--rh-line); border-radius: var(--rh-radius-sm); background: var(--rh-surface); box-sizing: border-box; }
.rh-par .par-value[readonly] { background: var(--rh-sunken); }
.rh-par .par-value:not([readonly]):hover { border-color: var(--rh-accent); }
.rh-par .par-value:focus-visible { outline: 2px solid var(--rh-accent); outline-offset: 1px; }
.rh-par .par-value[aria-invalid="true"] { border-color: var(--rh-danger); color: var(--rh-danger); }
.rh-par .par-box > .rh-note { padding: 0 14px 12px; }
.rh-par .par-arrow { font: 400 28px var(--rh-font); color: var(--rh-muted); }
.rh-par .par-verdict { font-size: 14px; padding: 10px 12px; border-radius: var(--rh-radius-sm); border-left: 4px solid; }
.rh-par .par-verdict.ok { background: #e3f3e7; border-color: #2f8a4a; color: #143d20; }
.rh-par .par-verdict.warn { background: #fdecdc; border-color: #c76a1b; color: #4d2606; }
.rh-par .par-verdict.info { background: #e4ecfb; border-color: var(--rh-accent); color: #0b2a66; }
.rh-par .par-scale { display: flex; flex-direction: column; gap: 4px; }
.rh-par .par-bar { position: relative; height: 22px; border-radius: 4px; border: 1px solid var(--rh-line); background: linear-gradient(to right, #000, #fff); }
.rh-par .par-band { position: absolute; top: -4px; bottom: -4px; border: 2px solid #2f8a4a; border-radius: 4px; }
.rh-par .par-mark { position: absolute; top: -7px; bottom: -7px; width: 4px; margin-left: -2px; background: var(--rh-danger); border-radius: 2px; box-shadow: 0 0 0 1px #fff; }
.rh-par .par-mark.safe { background: #2f8a4a; }
.rh-par .par-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--rh-muted); }
.rh-par .par-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rh-par .par-filter .rh-input { width: 220px; flex: 1 1 160px; max-width: 280px; }
.rh-par .par-cats { display: flex; flex-wrap: wrap; gap: 4px; }
.rh-par .par-cats button { font: 13px/1 var(--rh-font); margin: 0; padding: 7px 10px; cursor: pointer; color: var(--rh-fg);
  background: var(--rh-surface); border: 1px solid var(--rh-line); border-radius: 999px; }
.rh-par .par-cats button:hover { border-color: var(--rh-accent); }
.rh-par .par-cats button[aria-pressed="true"] { background: var(--rh-accent-soft); border-color: var(--rh-accent); font-weight: 700; }
.rh-par .par-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; padding: 2px; }
.rh-par .rh-note a { color: var(--rh-accent); }
.rh-par .par-ref { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  margin: 0; padding: 6px; font: 13px/1.25 var(--rh-font); color: var(--rh-fg); background: var(--rh-surface); border: 1px solid var(--rh-line); border-radius: var(--rh-radius-sm); cursor: pointer; }
.rh-par .par-ref:hover { border-color: var(--rh-accent); }
.rh-par .par-chip { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); }
.rh-par .par-ref-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-par .par-ref-hex { font: 11.5px var(--rh-font-mono); color: var(--rh-muted); }
.rh-par .par-ior { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; max-width: 520px; }
.rh-par .par-f0 { display: flex; gap: 16px; align-items: center; }
.rh-par .par-f0-swatch { width: 72px; height: 72px; border-radius: var(--rh-radius-sm); border: 1px solid var(--rh-line); flex-shrink: 0; }
.rh-par .par-f0 dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; }
.rh-par .par-f0 dt { color: var(--rh-muted); }
.rh-par .par-f0 dd { margin: 0; font-family: var(--rh-font-mono); }
@media (max-width: 700px) {
  .rh-par .par-calc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .rh-par .par-arrow { text-align: center; transform: rotate(90deg); }
  .rh-par .par-swatch { height: 90px; }
  .rh-par .par-value { font-size: 18px; }
  .rh-par .par-refs { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); max-height: 360px; }
}

/* ---- Model Inspector: a drop bar, a large viewer beside the counts, a health check, UVs, and the tables */
.rh-msh { display: flex; flex-direction: column; gap: 16px; }
.rh-msh .msh-drop { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--rh-surface);
  border: 2px dashed var(--rh-line); border-radius: var(--rh-radius); }
.rh-msh.is-dragging .msh-drop { border-color: var(--rh-accent); background: var(--rh-accent-soft); }
.rh-msh .msh-drop-icon { flex: 0 0 44px; height: 44px; background: no-repeat center / 40px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23195FDD' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20 4 35 12v16L20 36 5 28V12z'/%3E%3Cpath d='M5 12l15 8 15-8M20 20v16'/%3E%3C/svg%3E"); }
.rh-msh .msh-drop-text { flex: 1; min-width: 0; font-size: 15px; }
.rh-msh .msh-drop-text span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--rh-muted); }
.rh-msh .msh-link { font: inherit; color: var(--rh-accent); background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-decoration: underline; }
.rh-msh .msh-top { display: grid; grid-template-columns: minmax(0, 2.75fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.rh-msh .msh-stage { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(to top, #BABABA, #E5E5E5); }   /* every 3D view */
.rh-msh .msh-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.rh-msh .msh-stage canvas:active { cursor: grabbing; }
.rh-msh .msh-chip { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 340px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--rh-surface) 92%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.rh-msh .msh-bar { position: absolute; display: flex; align-items: center; gap: 8px; }
.rh-msh .msh-bar-top { top: 10px; right: 10px; }
.rh-msh .msh-bar-bottom { left: 10px; right: 10px; bottom: 10px; flex-wrap: wrap; }
.rh-msh .msh-bar .rh-seg { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.rh-msh .msh-spacer { flex: 1; }
.rh-msh .msh-icon { font: 600 13px/1 var(--rh-font); padding: 8px 11px; margin: 0; cursor: pointer; color: var(--rh-fg); background: var(--rh-surface);
  border: 1px solid var(--rh-line); border-radius: var(--rh-radius-sm); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.rh-msh .msh-icon:hover { border-color: var(--rh-accent); }
.rh-msh .msh-icon[aria-pressed="true"] { background: var(--rh-accent-soft); border-color: var(--rh-accent); }
.rh-msh .msh-legend { display: flex; gap: 10px; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--rh-surface) 92%, transparent); }
.rh-msh .msh-legend span::before, .rh-msh .msh-mix-key li span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.rh-msh .msh-legend .t::before, .rh-msh .msh-mix-key .t span::before { background: #5c8ff2; }
.rh-msh .msh-legend .q::before, .rh-msh .msh-mix-key .q span::before { background: #c4c5c8; }
.rh-msh .msh-legend .n::before, .rh-msh .msh-mix-key .n span::before { background: #ed5252; }
.rh-msh .msh-busy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(245, 246, 248, .72); font-size: 14px; }
.rh-msh .msh-busy[hidden] { display: none; }
.rh-msh .msh-busy span { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--rh-accent-soft); border-top-color: var(--rh-accent); animation: msh-spin .8s linear infinite; }
@keyframes msh-spin { to { transform: rotate(360deg); } }
.rh-msh .msh-hint { margin: 0; padding: 9px 14px; font-size: 12px; color: var(--rh-muted); border-top: 1px solid var(--rh-line); }
.rh-msh .msh-big { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rh-msh .msh-big div { display: flex; flex-direction: column; }
.rh-msh .msh-big-v { font: 700 30px/1.1 var(--rh-font); font-variant-numeric: tabular-nums; }
.rh-msh .msh-big-k { font-size: 13px; color: var(--rh-muted); }
.rh-msh .msh-mix { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--rh-sunken); gap: 2px; }
.rh-msh .msh-mix span { min-width: 3px; }
.rh-msh .msh-mix .t { background: #5c8ff2; } .rh-msh .msh-mix .q { background: #c4c5c8; } .rh-msh .msh-mix .n { background: #ed5252; }
.rh-msh .msh-mix-key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.rh-msh .msh-mix-key li { display: grid; grid-template-columns: 1fr auto 9em; gap: 10px; align-items: baseline; }
.rh-msh .msh-mix-key b { font-variant-numeric: tabular-nums; }
.rh-msh .msh-mix-key em { font-style: normal; color: var(--rh-muted); font-size: 12px; text-align: right; }
.rh-msh .msh-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 13px; }
.rh-msh .msh-dl dt { color: var(--rh-muted); }
.rh-msh .msh-dl dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rh-msh .msh-dl dd.ok { color: #2f8a4a; } .rh-msh .msh-dl dd.warn { color: #b25e12; }
.rh-msh .msh-h3 { font: 700 11px/1 var(--rh-font); text-transform: uppercase; letter-spacing: .08em; color: var(--rh-muted); padding-top: 12px; border-top: 1px solid var(--rh-line); }
.rh-msh .msh-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rh-msh .msh-tag { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--rh-sunken); color: var(--rh-muted); }
.rh-msh .msh-tag.on { background: var(--rh-accent-soft); color: #0b3a8c; font-weight: 600; }
.rh-msh .msh-copy { align-self: stretch; justify-content: center; }
.rh-msh .msh-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rh-msh .msh-score { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.rh-msh .msh-score.ok { background: #e3f3e7; color: #1d5e30; } .rh-msh .msh-score.warn { background: #fdecdc; color: #7a3d0c; } .rh-msh .msh-score.bad { background: #fbe1e0; color: #8a201c; }
.rh-msh .msh-checks { list-style: none; margin: 0; padding: 0; }
.rh-msh .msh-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid #ececec; }
.rh-msh .msh-checks li:first-child { border-top: 0; padding-top: 0; }
.rh-msh .msh-checks i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--rh-font); font-style: normal; color: #fff; margin-top: 1px; }
.rh-msh .msh-checks .ok i { background: #2f8a4a; } .rh-msh .msh-checks .ok i::before { content: "✓"; }
.rh-msh .msh-checks .warn i { background: #d97a1e; } .rh-msh .msh-checks .warn i::before { content: "!"; }
.rh-msh .msh-checks .bad i { background: var(--rh-danger); } .rh-msh .msh-checks .bad i::before { content: "✕"; }
.rh-msh .msh-checks .info i { background: var(--rh-accent); } .rh-msh .msh-checks .info i::before { content: "i"; }
.rh-msh .msh-checks b { display: block; font-size: 13.5px; }
.rh-msh .msh-checks span { display: block; font-size: 12.5px; color: var(--rh-muted); margin-top: 2px; }
.rh-msh .msh-checks .ok span { display: none; }
.rh-msh .rh-body.msh-uvbox { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rh-msh canvas.msh-uv { display: block; width: 100%; aspect-ratio: 1; height: auto; border-radius: var(--rh-radius-sm); }
.rh-msh .msh-uvbox .rh-note { margin-top: 10px; }
.rh-msh details.msh-more > summary { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; list-style: none; }
.rh-msh details.msh-more > summary::-webkit-details-marker { display: none; }
.rh-msh details.msh-more > summary::before { content: ""; width: 7px; height: 7px; border: solid var(--rh-muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
.rh-msh details.msh-more[open] > summary::before { transform: rotate(45deg); }
.rh-msh .msh-count { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--rh-sunken); color: var(--rh-muted); }
.rh-msh details.msh-more .rh-body { padding-top: 0; }
.rh-msh .msh-table { max-height: 380px; overflow: auto; }
.rh-msh .msh-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rh-msh .msh-table th { position: sticky; top: 0; background: var(--rh-surface); text-align: left; font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--rh-line); white-space: nowrap; }
.rh-msh .msh-table td { padding: 5px 8px; border-bottom: 1px solid #ececec; }
.rh-msh .msh-table td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1000px) { .rh-msh .msh-top, .rh-msh .msh-mid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .rh-msh .msh-drop { flex-wrap: wrap; } .rh-msh .msh-drop .rh-btn { width: 100%; justify-content: center; }
  .rh-msh .msh-stage { aspect-ratio: 4 / 5; }
  .rh-msh .msh-chip { max-width: calc(100% - 20px); top: 54px; }
  .rh-msh .msh-bar-top { left: 10px; }
  .rh-msh .rh-body.msh-uvbox { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Seamless Texture Generator */
.rh-stg .stg-orig { min-height: 120px; display: flex; align-items: center; justify-content: center; }
.rh-stg .stg-orig canvas { display: block; max-width: 100%; height: auto; }
.rh-stg .stg-orig:has(canvas) .rh-hint { display: none; }
.rh-stg .stg-views { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.rh-stg .stg-view { position: relative; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.rh-stg .stg-view canvas { display: block; width: 100%; height: auto; }
.rh-stg .stg-empty { position: absolute; font-size: 14px; color: var(--rh-muted); }
.rh-stg canvas.stg-sphere { aspect-ratio: 1; touch-action: none; cursor: grab; }
.rh-stg canvas.stg-sphere:active { cursor: grabbing; }

/* ---- Texel Density Calculator (also uses the Model Inspector's .msh- styles for its model check) */
.rh-tdc .rh-body.tdc-calcs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.rh-tdc .tdc-calc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rh-tdc .tdc-calc h3 { font: 700 15px/1.3 var(--rh-font); }
.rh-tdc .tdc-pair { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; }
.rh-tdc .tdc-result { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--rh-radius-sm); background: var(--rh-accent-soft); margin-top: 4px; }
.rh-tdc .tdc-big { font: 700 28px/1.15 var(--rh-font); font-variant-numeric: tabular-nums; color: #0b2a66; }
.rh-tdc .tdc-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.rh-tdc .tdc-presets button { font: 12.5px/1 var(--rh-font); margin: 0; padding: 6px 10px; cursor: pointer; color: var(--rh-fg);
  background: var(--rh-surface); border: 1px solid var(--rh-line); border-radius: 999px; }
.rh-tdc .tdc-presets button:hover { border-color: var(--rh-accent); }
.rh-tdc .tdc-presets button[aria-pressed="true"] { background: var(--rh-accent-soft); border-color: var(--rh-accent); font-weight: 700; }
.rh-tdc .tdc-avg { display: flex; flex-direction: column; }
.rh-tdc .tdc-ok { color: #2f8a4a; font-weight: 600; }
.rh-tdc .tdc-off { color: #b25e12; font-weight: 600; }
.rh-tdc .tdc-dist { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--rh-sunken); gap: 2px; }
.rh-tdc .tdc-dist span { min-width: 3px; }
.rh-tdc .tdc-dist .low, .rh-tdc .tdc-dist-key .low span::before { background: #4f8ef0; }
.rh-tdc .tdc-dist .on, .rh-tdc .tdc-dist-key .on span::before { background: #4cc76b; }
.rh-tdc .tdc-dist .high, .rh-tdc .tdc-dist-key .high span::before { background: #e5643a; }
.rh-tdc .tdc-dist .none, .rh-tdc .tdc-dist-key .none span::before { background: #a1a3a8; }
.rh-tdc .tdc-dist-key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.rh-tdc .tdc-dist-key li { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.rh-tdc .tdc-dist-key li span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.rh-tdc .tdc-dist-key b { font-variant-numeric: tabular-nums; }
.rh-tdc .tdc-legend { display: grid; grid-template-columns: repeat(5, auto); column-gap: 10px; row-gap: 3px; font-size: 11px; text-align: center;
  padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--rh-surface) 92%, transparent); }
.rh-tdc .tdc-legend i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: linear-gradient(to right, #295bdb, #6bb3f7, #4dc76b, #faa833, #e33d38); }
.rh-tdc .tdc-legend b { font-weight: 700; }
.rh-tdc .msh-table td.tdc-ok, .rh-tdc .msh-table td.tdc-off { font-weight: 700; }
@media (max-width: 800px) { .rh-tdc .rh-body.tdc-calcs { grid-template-columns: minmax(0, 1fr); } }

/* ---- Normal Map Combiner */
.rh-nmc .nmc-layers { display: flex; flex-direction: column; gap: 12px; }
.rh-nmc .nmc-layer.is-empty .rh-ctrls { opacity: .5; }
.rh-nmc .nmc-slot { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: start; }
.rh-nmc .nmc-well { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.rh-nmc .nmc-well canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.rh-nmc .nmc-well .rh-hint { inset: auto 4px 4px 4px; padding: 4px; font-size: 11px; }
.rh-nmc .nmc-well.is-over { outline: 2px dashed var(--rh-accent); outline-offset: 2px; }
.rh-nmc .nmc-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rh-nmc .nmc-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-nmc .nmc-info .rh-seg button { padding: 6px 8px; font-size: 12px; }
.rh-nmc .nmc-method { flex-wrap: wrap; }
.rh-nmc .nmc-views { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.rh-nmc .nmc-view { position: relative; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.rh-nmc .nmc-view canvas { display: block; width: 100%; height: auto; }
.rh-nmc canvas.nmc-lit { cursor: crosshair; touch-action: none; }
.rh-nmc .nmc-empty { position: absolute; font-size: 14px; color: var(--rh-muted); }

/* ---- PBR Material Previewer */
.rh-pmp .pmp-slots { display: flex; flex-direction: column; gap: 6px; }
.rh-pmp .pmp-slot { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px; border: 1px dashed var(--rh-line); border-radius: var(--rh-radius-sm); cursor: pointer; }
.rh-pmp .pmp-slot:hover, .rh-pmp .pmp-slot.is-over { border-color: var(--rh-accent); background: var(--rh-accent-soft); }
.rh-pmp .pmp-slot.has { border-style: solid; }
.rh-pmp .pmp-thumb { width: 44px; height: 44px; border-radius: 4px; background: var(--rh-sunken); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rh-pmp .pmp-thumb canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.rh-pmp .pmp-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rh-pmp .pmp-info b { font: 700 13px/1.25 var(--rh-font); }
.rh-pmp .pmp-info span { font-size: 12px; color: var(--rh-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-pmp .pmp-x { font: 18px/1 var(--rh-font); margin: 0; padding: 4px 8px; border: 0; background: none; color: var(--rh-muted); cursor: pointer; border-radius: 4px; }
.rh-pmp .pmp-x:hover { color: var(--rh-danger); background: var(--rh-sunken); }
.rh-pmp .pmp-color { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rh-pmp .pmp-color input[type="color"] { width: 56px; height: 32px; padding: 2px; margin: 0; cursor: pointer; }
.rh-pmp .pmp-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rh-pmp .pmp-shape { flex-wrap: wrap; }
.rh-pmp .pmp-view { position: relative; }
.rh-pmp .pmp-view canvas { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 75vh; touch-action: none; cursor: grab; background: linear-gradient(to top, #BABABA, #E5E5E5); }
.rh-pmp .pmp-view canvas:active { cursor: grabbing; }
.rh-pmp .pmp-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--rh-muted); font-size: 14px; pointer-events: none; }
.rh-pmp .pmp-busy[hidden] { display: none; }
.rh-pmp .pmp-reset { position: absolute; right: 10px; bottom: 10px; padding: 6px 10px; font-size: 12.5px; background: color-mix(in srgb, var(--rh-surface) 85%, transparent); }

/* ---- UV Checker Map Generator */
.rh-uvc .uvc-style, .rh-uvc .uvc-shape { flex-wrap: wrap; }
.rh-uvc .uvc-colors { display: flex; flex-direction: column; gap: 8px; }
.rh-uvc .uvc-colors[hidden] { display: none; }
.rh-uvc .uvc-color { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rh-uvc .uvc-color input[type="color"] { width: 56px; height: 32px; padding: 2px; margin: 0; cursor: pointer; }
.rh-uvc .uvc-views { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.rh-uvc .uvc-view { position: relative; }
.rh-uvc .uvc-view canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; touch-action: none; cursor: grab; background: linear-gradient(to top, #BABABA, #E5E5E5); }   /* every 3D view */
.rh-uvc .uvc-view canvas:active { cursor: grabbing; }
.rh-uvc .uvc-reset { position: absolute; right: 10px; bottom: 10px; padding: 6px 10px; font-size: 12.5px; background: color-mix(in srgb, var(--rh-surface) 85%, transparent); }
.rh-uvc .uvc-map canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }