/* ==========================================================================
   reskin3d — stylesheet
   Quiet, precise, machinist-trust hardware UI. Warm graphite + copper accent.
   No blue, no glow, no neon. Depth from hairlines + soft shadows on floats only.

   Sections:
     0. Global [hidden] guard  (MUST win — fixes the stuck progress overlay bug)
     1. Tokens / resets
     2. Base / scrollbars / selection / focus
     3. Topbar
     4. Layout / sidebar / viewer
     5. Panels + Advanced <details>
     6. Controls (ctl, range, select, input, check)
     7. Buttons / segmented control
     8. Badges / warnings / hints / kbd / model info
     9. Viewer HUD
    10. Welcome overlay
    11. Drop hint
    12. Progress overlay
    13. Modals (generic) + create-tabs
    14. Texture library
    15. Image import modal
    16. Help modal
    17. Toasts
    18. Responsive / accessibility
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 0. Global [hidden] guard                                               */
/* ---------------------------------------------------------------------- */
/* The old sheet lost this fight: display:flex on #progress-overlay etc.
   beat the HTML `hidden` attribute and the bake overlay was stuck on-screen
   forever. This rule must come first and must stay !important so nothing
   below — however specific — can resurrect a [hidden] element. */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------- */
/* 1. Tokens / resets                                                     */
/* ---------------------------------------------------------------------- */
:root {
  --bg: #131312;
  --bg-2: #1b1a19;
  --bg-3: #242220;
  --text: #ece7e0;
  --text-dim: #96908a;
  --accent: #e0954d;
  --accent-2: #d1a75c;
  --border: #2c2925;
  --radius: 10px;
  --radius-control: 6px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);

  /* Shared component rhythm. New pages should use these instead of one-off sizes. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --control-h: 34px;
  --control-h-sm: 28px;
  --type-ui: 12.5px;
  --type-label: 11px;
  --weight-ui: 500;
  --weight-heading: 600;

  --accent-rgb: 224, 149, 77;
  --good: #7fae86;
  --warn: #d1a75c;
  --bad: #b9776b;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-width: 1000px;
}

h1, h2, h3, h4, p, ol, ul, table { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

a { color: var(--accent); }

svg { display: block; }

/* ---------------------------------------------------------------------- */
/* 2. Base / scrollbars / selection / focus                               */
/* ---------------------------------------------------------------------- */
::selection {
  background: #e0954d;
  color: #16130f;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #3a3630; background-clip: padding-box; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.4);
  outline-offset: 2px;
  border-radius: 4px;
}

.tabular-nums,
output,
.model-dims b,
.hud-stats b {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------- */
/* 3. Topbar                                                               */
/* ---------------------------------------------------------------------- */
#topbar {
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--text-dim);
  text-transform: lowercase;
}

.brand span { display: inline-flex; align-items: baseline; }

.brand b {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sep {
  width: 1px;
  align-self: stretch;
  margin: 14px 4px;
  background: var(--border);
}

/* ---------------------------------------------------------------------- */
/* 4. Layout / sidebar / viewer                                           */
/* ---------------------------------------------------------------------- */
#layout {
  height: calc(100vh - 56px);
  display: flex;
  min-width: 1000px;
}

#sidebar {
  width: 300px;
  flex: 0 0 300px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#viewer {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg);
  overflow: hidden;
}

#viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------------------- */
/* 5. Panels + Advanced <details>                                         */
/* ---------------------------------------------------------------------- */
.panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.panel h3 {
  font-size: var(--type-label);
  font-weight: var(--weight-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.panel h3 .btn { text-transform: none; letter-spacing: 0; }

.panel-note {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
  opacity: 0.7;
}

.model-info { display: flex; flex-direction: column; gap: 8px; }

/* --- Texture layers list ------------------------------------------------ */
.btn.icon { padding: 2px 9px; font-size: 15px; line-height: 1; font-weight: 700; }
.h3-actions { display: flex; align-items: center; gap: 6px; }
.layer-row .swatch { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; }
.layer-list { display: flex; flex-direction: column; gap: 6px; }
.layer-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.layer-row:hover { background: var(--bg-2); }
.layer-row.active { border-color: var(--accent, #e0954d); background: var(--bg-2); }
.layer-vis {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 0;
  border: none; background: none; cursor: pointer;
  color: var(--accent, #e0954d); font-size: 11px;
}
.layer-vis.off { color: var(--text-dim); opacity: 0.55; }
.layer-thumb {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-3, #1b1a17);
}
.layer-meta { flex: 1 1 auto; min-width: 0; }
.layer-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-sub {
  font-size: 10px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-edit,
.layer-del {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 0;
  border: none; background: none; cursor: pointer;
  color: var(--text-dim); font-size: 12px; opacity: 0.55;
}
.layer-edit:hover { color: var(--accent); opacity: 1; }
.layer-del:hover { color: #e0654d; opacity: 1; }

/* Persistent callout note (e.g. slicer hand-off instructions) */
.callout {
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent, #e0954d);
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}
.callout b { color: var(--text); font-weight: 600; }

/* Depth "sweet spot" recommendation. The <datalist> stays hidden (default); Chrome
   draws correctly-positioned tick marks on the track from the input's list= binding. */
.hint.rec { color: var(--accent, #e0954d); opacity: 0.9; }

/* "To scale" badge on library textures that carry a real-world size */
.lib-badge.scale { background: var(--accent, #e0954d); color: #16130f; border-color: transparent; font-weight: 700; }

/* --- Toolbelt (bottom action bar): selection tools + depth + view, always in reach.
   Mirrors of sidebar controls — same tokens, same fonts, nothing bespoke. -------- */
#action-bar {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100% - 170px); /* keep clear of the HUD stats pill */
  padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(27, 26, 25, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow); z-index: 20;
}
.ab-group { display: flex; align-items: center; gap: 5px; }
.ab-sep { width: 1px; align-self: stretch; margin: 3px 1px; background: var(--border); }
.ab-seg { padding: 2px; }
.ab-seg .seg-btn { padding: 3px 9px; font-size: 11.5px; white-space: nowrap; } /* one row, always */
.btn-icon-sm { width: 26px; padding: 4px 0; }

/* --- layer navigator: chip + drop-up ------------------------------------- */
.ab-layer-wrap { position: relative; }
.ab-layer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 9px 2px 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  max-width: 190px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ab-layer:hover { border-color: var(--accent); }
.ab-layer canvas {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.ab-layer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-layer svg { flex: 0 0 auto; color: var(--text-dim); }

#layer-popup {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 230px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
}
.lp-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lp-row:hover { background: var(--bg-3); }
.lp-row.active { border-color: var(--accent); background: var(--bg-3); }
.lp-swatch { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; }
.lp-thumb { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 5px; background: var(--bg); border: 1px solid var(--border); }
.lp-meta { display: flex; flex-direction: column; min-width: 0; }
.lp-meta b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-meta i { font-style: normal; font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-add { justify-content: center; color: var(--accent); font-size: 12px; font-weight: 600; }

/* --- "More …" in-panel disclosures: advanced options live inside the panel they
   belong to, inheriting the exact panel typography (this replaces the old separate
   Advanced pane whose styling always drifted). ----------------------------------- */
details.more { display: flex; flex-direction: column; gap: var(--space-2); }
details.more > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  user-select: none;
  padding: 2px 0;
  transition: color 0.12s ease;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--text-dim);
  border-bottom: 1.5px solid var(--text-dim);
  transform: rotate(-45deg);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
details.more[open] > summary::before { transform: rotate(45deg); }
details.more > summary:hover { color: var(--text); }
details.more > summary:hover::before { border-color: var(--text); }
details.more[open] { gap: var(--space-2); }
/* Controls keep the panel's normal left edge and full usable width. Only the
   disclosure label follows the chevron. */
details.more > *:not(summary) { width: 100%; margin-top: 0; margin-left: 0; font: inherit; }
details.more[open] > summary { margin-bottom: 0; }
details.more > summary:focus:not(:focus-visible) { outline: none; }

/* --- Create Texture chooser ------------------------------------------------------ */
.choice-cards { display: flex; gap: 12px; }
.choice-card {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  text-align: left;
  padding: 16px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-3);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.choice-card:hover { border-color: var(--accent); background: #2a2723; }
.choice-card:active { transform: scale(0.99); }
.choice-ico { font-size: 20px; line-height: 1; }
.choice-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.choice-sub { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }

/* ---------------------------------------------------------------------- */
/* 6. Controls                                                             */
/* ---------------------------------------------------------------------- */
.ctl {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ctl label {
  display: flex;
  align-items: center; /* center, not baseline — outputs with °/mm glyphs used to sit high */
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
}

.ctl label output {
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
}

.ctl.two {
  flex-direction: row;
  gap: 12px;
}
.ctl.two > div {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* range inputs — thin restrained track, neutral thumb, accent on hover */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: transparent;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: var(--bg-3);
  border: 1px solid var(--border);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--text);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: background 0.12s ease, border-color 0.12s ease;
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--bg-3);
  border: 1px solid var(--border);
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text);
  border: 1px solid var(--border);
  transition: background 0.12s ease, border-color 0.12s ease;
}
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus-visible::-moz-range-thumb {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="range"]:disabled { opacity: 0.4; pointer-events: none; }

/* Ideal-range band: an orange stripe on the track marking the recommended zone.
   Per-slider bounds come from inline CSS vars: style="--i0:7%;--i1:15%" */
input[type="range"].ideal::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg,
      transparent var(--i0, 0%),
      rgba(var(--accent-rgb), 0.55) var(--i0, 0%),
      rgba(var(--accent-rgb), 0.55) var(--i1, 0%),
      transparent var(--i1, 0%)),
    var(--bg-3);
}
input[type="range"].ideal::-moz-range-track {
  background:
    linear-gradient(90deg,
      transparent var(--i0, 0%),
      rgba(var(--accent-rgb), 0.55) var(--i0, 0%),
      rgba(var(--accent-rgb), 0.55) var(--i1, 0%),
      transparent var(--i1, 0%)),
    var(--bg-3);
}

/* text / select / file inputs */
select,
input[type="text"],
input[type="search"],
input[type="number"] {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  min-height: var(--control-h);
  border-radius: var(--radius-control);
  padding: 7px 9px;
  font-size: var(--type-ui);
  color: var(--text);
  transition: border-color 0.12s ease, background 0.12s ease;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 5 6 10 0z' fill='%2396908a'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 26px;
}

select:hover,
input[type="text"]:hover,
input[type="search"]:hover,
input[type="number"]:hover {
  border-color: #3a3630;
}

select:focus-visible,
input[type="text"]:focus-visible,
input[type="search"]:focus-visible,
input[type="number"]:focus-visible {
  border-color: var(--accent);
  outline: none;
}

select:disabled,
input:disabled { opacity: 0.5; pointer-events: none; }

/* checkboxes */
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  display: inline-grid;
  place-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.check input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: #16130f;
  transform: scale(0);
  transition: transform 0.12s ease;
}

.check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.check input[type="checkbox"]:checked::before { transform: scale(1); }
.check input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.4);
  outline-offset: 2px;
}

.hud-check {
  color: var(--text-dim);
  font-size: 12px;
}

/* ---------------------------------------------------------------------- */
/* 7. Buttons / segmented control                                         */
/* ---------------------------------------------------------------------- */
.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text);
  min-height: var(--control-h);
  border-radius: var(--radius-control);
  padding: 7px 12px;
  font-size: var(--type-ui);
  font-weight: var(--weight-ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.btn:hover {
  border-color: #3a3630;
  background: #2a2723;
}

.btn:active {
  background: #201e1b;
  box-shadow: none;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1208;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-accent:hover {
  background: #e6a262;
  border-color: #e6a262;
}
.btn-accent:active {
  background: #cf8640;
  box-shadow: none;
}

.btn-sm {
  min-height: var(--control-h-sm);
  padding: 4px 9px;
  font-size: 11.5px;
  border-radius: 5px;
}

.btn-big {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 7px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  flex: 0 0 auto;
  font-size: 14px;
}

.btn.bambu {
  background: rgba(0, 174, 66, 0.14);
  border-color: rgba(0, 174, 66, 0.32);
  color: #7fd39d;
}
.btn.bambu:hover {
  background: rgba(0, 174, 66, 0.22);
  border-color: rgba(0, 174, 66, 0.5);
}
.btn.bambu:active {
  background: rgba(0, 174, 66, 0.28);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.btn-row.center { justify-content: center; }

/* segmented control */
.seg {
  display: flex;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 3px;
  gap: 3px;
}

.seg-btn {
  flex: 1 1 0;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 5px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}

.seg-btn:hover { color: var(--text); }

.seg-btn.on {
  background: #3a3834;
  color: var(--text);
  font-weight: 600;
  box-shadow: none;
}

/* ---------------------------------------------------------------------- */
/* 8. Badges / warnings / hints / kbd / model info                        */
/* ---------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.badge.good {
  background: rgba(127, 174, 134, 0.12);
  border-color: rgba(127, 174, 134, 0.35);
  color: var(--good);
}

.badge.warn {
  background: rgba(209, 167, 92, 0.12);
  border-color: rgba(209, 167, 92, 0.35);
  color: var(--warn);
}

.badge.bad {
  background: rgba(185, 119, 107, 0.12);
  border-color: rgba(185, 119, 107, 0.35);
  color: var(--bad);
}

.warning {
  background: rgba(209, 167, 92, 0.1);
  border: 1px solid rgba(209, 167, 92, 0.3);
  color: var(--warn);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
}
.warning-item { display: grid; gap: 6px; }
.warning-item + .warning-item { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(209, 167, 92, 0.24); }
.warning-edit { justify-self: start; color: var(--warn); font-weight: 600; }

.hint {
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.5;
}
.hint.center { text-align: center; }

/* Hover "?" markers — hold most of the explanatory text as native tooltips,
   so the sidebar stays quiet until you actually want the detail. */
.q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 4px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  user-select: none;
  vertical-align: 1px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.q:hover { color: var(--accent); border-color: var(--accent); }

/* projection hint: message + one-click fix button */
#proj-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 7px;
  background: rgba(var(--accent-rgb), 0.07);
}
#proj-hint span { flex: 1 1 auto; }
#proj-hint .btn { flex: 0 0 auto; }

kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text);
}

.model-dims {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-dim);
}
.model-dims b {
  color: var(--text);
  font-weight: 600;
}

.model-name {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tex-name {
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 170px;
}

.active-tex {
  display: flex;
  align-items: center;
  gap: 10px;
}
.active-tex > div { flex: 1 1 auto; min-width: 0; }
.placement-options { display: grid; gap: var(--space-2); padding-top: var(--space-1); }

.active-tex canvas,
#active-tex-thumb {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  flex: 0 0 auto;
  object-fit: cover;
}

/* ---------------------------------------------------------------------- */
/* 9. Viewer HUD                                                          */
/* ---------------------------------------------------------------------- */
#viewer-hud {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(27, 26, 25, 0.9);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}

.hud-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-dim);
}
.hud-stats b { color: var(--text); }

.sel-color { color: var(--text-dim); }
.sel-color b { color: var(--accent); }

.hud-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------------------------------------------------------------------- */
/* 10. Welcome overlay                                                    */
/* ---------------------------------------------------------------------- */
#welcome {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  pointer-events: none;
}

.welcome-card {
  pointer-events: auto;
  max-width: 520px;
  width: 90%;
  text-align: center;
  padding: 32px 30px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.welcome-card svg { margin-bottom: 2px; }

.welcome-card h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.welcome-card p {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
  max-width: 420px;
}

.welcome-tip {
  font-size: 11.5px;
  color: var(--text-dim);
  opacity: 0.7;
}

/* ---------------------------------------------------------------------- */
/* 11. Drop hint                                                          */
/* ---------------------------------------------------------------------- */
/* [hidden] guard (section 0) already forces display:none — this rule only
   ever applies while the attribute is absent, so it can never resurrect it. */
#drop-hint {
  position: absolute;
  inset: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border);
  border-radius: 14px;
  background: rgba(224, 149, 77, 0.05);
  backdrop-filter: blur(2px);
}

#drop-hint div {
  padding: 14px 22px;
  border-radius: 10px;
  background: rgba(19, 19, 18, 0.8);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--border);
}

/* ---------------------------------------------------------------------- */
/* 12. Progress overlay                                                   */
/* ---------------------------------------------------------------------- */
/* [hidden] guard (section 0) already forces display:none on #progress-overlay
   when the attribute is present — this display:flex only ever wins while the
   attribute has been removed by JS, matching the intended show/hide logic. */
#progress-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 9, 8, 0.65);
  backdrop-filter: blur(4px);
}

.progress-card {
  width: 300px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

#progress-label {
  font-size: 13px;
  font-weight: 600;
}

.progress-track {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  overflow: hidden;
}

#progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: var(--accent);
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  background-size: 60px 100%;
  background-repeat: no-repeat;
  background-color: var(--accent);
  animation: mf-sheen 1.6s linear infinite;
  transition: width 0.2s ease;
}

@keyframes mf-sheen {
  0% { background-position: -60px 0; }
  100% { background-position: 300px 0; }
}

/* ---------------------------------------------------------------------- */
/* 13. Modals (generic) + create-tabs                                     */
/* ---------------------------------------------------------------------- */
/* [hidden] guard (section 0) already forces display:none on .modal — this
   display:flex only ever applies once the attribute is gone. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 24px;
}

.modal-box {
  position: relative;
  width: 560px;
  max-width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px 20px 20px;
}

.modal-wide { width: 940px; }
.modal-narrow { width: 380px; }

.modal-box h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-right: 28px;
}

.modal-box h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 18px 0 8px;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.modal-close:hover {
  background: var(--bg-3);
  border-color: var(--border);
  color: var(--text);
}

/* create-tabs: underline style, sits atop #modal-create */
.create-tabs {
  display: flex;
  gap: 4px;
  margin: -4px -4px 16px;
  padding: 0 4px;
  border-bottom: 1px solid var(--border);
}

.create-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 9px 14px 8px;
  font-size: 12.5px;
  font-weight: 500;
  transition: color 0.12s ease, border-color 0.12s ease;
  margin-bottom: -1px;
}

.create-tab:hover { color: var(--text); }

.create-tab.on {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* 14. Texture library — app-like shell: left nav, image-first cards      */
/* ---------------------------------------------------------------------- */
.lib-shell {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 0;
  min-height: 480px;
}

.lib-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 12px;
  margin-right: 14px;
  border-right: 1px solid var(--border);
}

.lib-nav-item {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  color: var(--text-dim);
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  transition: background 0.12s ease, color 0.12s ease;
}
.lib-nav-item:hover { color: var(--text); background: var(--bg-3); }
.lib-nav-item.on { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); font-weight: 600; }

.lib-main { display: flex; flex-direction: column; min-width: 0; }

.lib-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.lib-search {
  flex: 1 1 auto;
  min-width: 140px;
  border-radius: 999px;
  padding-left: 14px;
}

.lib-extras:not(:empty) { margin-bottom: 12px; }

.sticker-maker,
.community-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.sticker-text { width: 220px; flex: 0 1 auto; }
.sticker-maker .hint, .community-bar .hint { flex: 1 1 200px; }

.lib-scroll { flex: 1 1 auto; overflow-y: auto; max-height: 56vh; padding: 2px; }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 14px;
  padding-bottom: 4px;
}

/* Image-first card: soft radius, borderless at rest, gentle lift on hover. */
.lib-cell {
  position: relative;
  border-radius: 12px;
  background: var(--bg-3);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.14s ease, box-shadow 0.14s ease, outline-color 0.14s ease;
  outline: 1px solid transparent;
}

.lib-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  outline-color: rgba(var(--accent-rgb), 0.55);
}

.lib-cell canvas,
.lib-cell img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg);
}

/* mm flag overlays the artwork's corner */
.lib-flag {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(19, 19, 18, 0.78);
  color: var(--accent);
  backdrop-filter: blur(4px);
}
.lib-flag.scale { color: var(--accent); }

.lib-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 10px 9px;
  overflow: hidden;
  white-space: nowrap;
}
.lib-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-cat {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--text-dim);
}

.lib-actions { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.12s ease; }
.lib-cell:hover .lib-actions { opacity: 1; }
.lib-mm, .lib-del {
  appearance: none;
  border: none;
  height: 18px;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1;
  padding: 0 5px;
  transition: background 0.12s ease, color 0.12s ease;
}
.lib-mm:hover { background: rgba(var(--accent-rgb), 0.18); color: var(--accent); }
.lib-del { font-size: 13px; }
.lib-del:hover { background: rgba(185, 119, 107, 0.18); color: var(--bad); }

.lib-empty {
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.7;
}
.lib-empty b { color: var(--text); }
.lib-empty code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}

.lib-hint {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------- */
/* 15. Image import modal                                                 */
/* ---------------------------------------------------------------------- */
.imgimp {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}

.imgimp-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* dashed drop zone — dashed border stays neutral; accent only on hover/drag */
.imgimp-drop {
  border: 1.5px dashed var(--border);
  border-radius: 9px;
  padding: 16px 14px;
  text-align: center;
  background: var(--bg-3);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.imgimp-drop:hover,
.imgimp-drop.drag {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
}

.imgimp-drop p {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.imgimp-drop p:last-child { margin-bottom: 0; }
.imgimp-drop b { color: var(--text); }

.imgimp-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.imgimp-canvas-wrap {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.imgimp-canvas-wrap canvas {
  max-width: 100%;
  max-height: 56vh;
  object-fit: contain;
  border-radius: 4px;
}

#imgimp-status {
  color: var(--text-dim);
}

.trace-studio { grid-template-columns: 270px 1fr; }
.trace-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.trace-preview-panel { min-width: 0; }
.trace-preview-label {
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trace-preview-grid .imgimp-canvas-wrap { min-height: 360px; padding: 8px; }
#trace-source-canvas { cursor: crosshair; touch-action: none; }
.trace-status { grid-column: 1 / -1; }

@media (max-width: 820px) {
  .imgimp, .trace-studio { grid-template-columns: 1fr; }
  .trace-preview-grid { grid-template-columns: 1fr; }
  .trace-status { grid-column: 1; }
}

/* ---------------------------------------------------------------------- */
/* 16. Help modal                                                         */
/* ---------------------------------------------------------------------- */
.help-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 20px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.55;
}

.help-steps li::marker {
  color: var(--accent);
  font-weight: 700;
}

table.keys {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

table.keys tr {
  border-bottom: 1px solid var(--border);
}
table.keys tr:last-child { border-bottom: none; }

table.keys td {
  padding: 7px 4px;
  color: var(--text-dim);
}

table.keys td:first-child {
  white-space: nowrap;
  width: 1%;
  padding-right: 16px;
}

/* ---------------------------------------------------------------------- */
/* 17. Toasts                                                             */
/* ---------------------------------------------------------------------- */
#toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  max-width: 320px;
  padding: 10px 14px;
  border-radius: 7px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow);
  font-size: 12.5px;
  color: var(--text);
  animation: mf-toast-in 0.18s ease;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.out {
  opacity: 0;
  transform: translateX(6px);
}

@keyframes mf-toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------------------------------------------------------------------- */
/* 18. Responsive / accessibility                                         */
/* ---------------------------------------------------------------------- */
@media (max-width: 999px) {
  body { overflow-x: auto; overflow-y: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------- */
/* 20. Guided workspace redesign                                          */
/* ---------------------------------------------------------------------- */
#topbar { justify-content: flex-start; }
#topbar .brand { flex: 0 0 auto; }
#topbar .topbar-actions { flex: 0 0 auto; margin-left: auto; }
.account-btn {
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--control-h);
  padding: 4px 9px 4px 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--bg-3);
  color: var(--text);
  font-size: var(--type-ui);
  font-weight: var(--weight-ui);
}
.account-btn:hover { border-color: var(--accent); color: var(--text); }
.account-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  font-size: 10px;
}

#workspace-rail {
  width: 68px;
  flex: 0 0 68px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 7px;
  background: #121210;
  border-right: 1px solid var(--border);
  z-index: 9;
}
.rail-main, .rail-foot { display: flex; flex-direction: column; gap: 5px; }
.rail-btn {
  position: relative;
  display: flex;
  min-height: 54px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 9px;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 650;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background .14s ease, color .14s ease;
}
.rail-btn:hover { color: var(--text); background: var(--bg-3); }
.rail-btn.on { color: var(--accent); background: rgba(var(--accent-rgb), .11); }
.rail-btn.on::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}
.rail-btn.complete::after {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 7px;
  color: #7ec96a;
  font-size: 8px;
}
.rail-icon { font-size: 21px; line-height: 1; font-weight: 400; }
.texture-mark {
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: repeating-linear-gradient(45deg, transparent 0 3px, currentColor 3px 4px);
  opacity: .9;
}

#sidebar {
  width: 340px;
  flex-basis: 340px;
  padding: 0 var(--space-3) var(--space-4);
  gap: var(--space-2);
}
#stage-head {
  position: relative;
  z-index: 1;
  margin: 0 calc(-1 * var(--space-3));
  padding: 13px var(--space-3) 9px;
  background: linear-gradient(var(--bg-2) 82%, rgba(27, 26, 25, 0));
}
#stage-head { order: 0; }
#panel-model, #panel-layers { order: 1; }
#panel-texture-browser, #panel-quality { order: 2; }
#panel-bake { order: 3; }
#panel-selection { order: 3; }
#panel-texture { order: 4; }
#panel-mapping { order: 5; }
.stage-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .11em;
  text-transform: uppercase;
}
#stage-head h2 { font-size: 15px; font-weight: var(--weight-heading); line-height: 1.25; }
#stage-head p { margin-top: 4px; color: var(--text-dim); font-size: 11px; line-height: 1.4; }

/* In the active Texture editor, Selection is the sticky Layers panel's containing
   block. Layers therefore stays available while Selection scrolls underneath, then
   releases naturally before Texture instead of covering it. In picker/Bake states,
   display: contents preserves the existing sidebar ordering and sticky behaviour. */
#texture-selection-stack { display: contents; }
#sidebar:has(#panel-texture:not([hidden])) #texture-selection-stack {
  order: 1;
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

/* Solid sidebar-coloured bands preserve an 8px gutter above and below Layers
   without the old drop shadow bleeding over the next panel. */
#sidebar[data-stage="texture"] #panel-layers,
#sidebar[data-stage="bake"] #panel-layers {
  position: sticky;
  top: var(--space-2);
  z-index: 4;
  box-shadow:
    0 calc(-1 * var(--space-2)) 0 var(--bg-2),
    0 var(--space-2) 0 var(--bg-2);
}

#panel-selection,
#panel-mapping { padding-bottom: var(--space-2); }

.model-prereqs { margin-top: 5px; padding-top: 12px; border-top: 1px solid var(--border); }
.model-prereqs h4, .printer-profile h4, .side-lib-section h4 {
  margin-bottom: 8px;
  color: var(--text-dim);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.prereq { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; color: var(--text-dim); }
.prereq > span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  background: var(--bg-3);
  font-size: 10px;
  font-weight: 800;
}
.prereq.good > span { background: rgba(126, 201, 106, .14); color: #7ec96a; }
.prereq b, .prereq small { display: block; }
.prereq b { color: var(--text); font-size: 11.5px; }
.prereq small { margin-top: 2px; font-size: 10px; line-height: 1.35; }
.printer-profile { margin-top: 5px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 9px; }
.printer-profile h4 { display: flex; align-items: center; gap: 5px; }
.printer-profile .ctl { gap: 5px; }

.texture-quality {
  margin-top: 2px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, .015);
}
.quality-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 650;
}
.quality-grade { padding: 2px 7px; border-radius: 999px; background: var(--bg-3); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.quality-grade.good { color: #7ec96a; background: rgba(126,201,106,.1); }
.quality-grade.review { color: var(--accent); background: rgba(var(--accent-rgb),.1); }
.quality-grade.needs-work { color: var(--bad); background: rgba(185,119,107,.1); }
.quality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; margin: 9px 0 7px; }
.quality-grid span { display: flex; justify-content: space-between; gap: 6px; color: var(--text-dim); font-size: 9.5px; }
.quality-grid b { color: var(--text); font-weight: 600; }
#quality-warnings { line-height: 1.45; }

.texture-browser-panel { padding: 12px; }
.side-lib-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.side-lib-head h3 { color: var(--text); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.side-lib-head .stage-kicker { color: var(--text-dim); font-size: 8px; }
.side-lib-search { width: 100%; margin-top: 10px; padding-block: 8px; border-radius: 8px; }
.side-lib-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.side-lib-results { display: flex; flex-direction: column; gap: 18px; margin-top: var(--space-3); }
.side-lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.side-lib-grid .lib-cell { border-radius: 8px; }
.side-lib-grid .lib-label { padding: 6px 7px; }
.side-lib-grid .lib-name { font-size: 9.5px; }
.side-lib-grid .lib-cat { display: none; }
.side-lib-grid .lib-flag { top: 4px; right: 4px; padding: 1px 5px; font-size: 8px; }

#viewer-model-meta {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: min(42%, 420px);
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(20, 19, 17, .72);
  backdrop-filter: blur(7px);
}
#viewer-model-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#viewer-model-meta span { color: var(--text-dim); font-size: 10px; font-variant-numeric: tabular-nums; }

#welcome { overflow: hidden; }
#welcome::before {
  content: '';
  position: absolute;
  inset: -42%;
  background-image:
    linear-gradient(rgba(224,149,77,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,149,77,.08) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: 12px 18px, 12px 18px;
  transform: perspective(900px) rotateX(60deg) rotateZ(-7deg) scale(1.15);
  transform-origin: center center;
}
.welcome-card {
  position: relative;
  z-index: 2;
  width: min(610px, calc(100% - 48px));
  padding: 18px 28px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.welcome-card p { max-width: 560px; }
.welcome-eyebrow { margin-bottom: 8px; color: var(--text-dim); font-size: 9px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.welcome-sample {
  color: var(--text-dim);
  padding: 3px 6px;
  font-size: 11px;
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), .45);
  text-underline-offset: 3px;
}
.welcome-sample:hover { color: var(--text); }

.coverage-mark { width: 20px; height: 20px; border-radius: 5px; background: conic-gradient(#e0954d 0 25%, #4dd0c0 0 50%, #e8c34d 0 75%, #9b7ee0 0); }
.triangle-budget summary { pointer-events: none; list-style: none; }
.triangle-budget summary::-webkit-details-marker { display: none; }

#modal-library {
  top: 56px;
  left: 68px;
  padding: 0;
  background: var(--bg-2);
  backdrop-filter: none;
}
.modal-library-page {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  padding: 22px 24px 30px 20px;
  overflow: hidden;
}
.library-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding-right: 48px; }
.library-page-head h2 { margin: 0; padding: 0; font-size: 18px; font-weight: 650; }
.library-page-head p { color: var(--text-dim); font-size: 12px; }
.modal-library-page .lib-shell { min-height: 0; height: calc(100vh - 106px); grid-template-columns: 176px 1fr; }
.modal-library-page .lib-scroll { max-height: none; }
.modal-library-page .lib-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }

.community-offline {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--text-dim);
  font-size: 10px;
  white-space: nowrap;
}
.community-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.community-loading,
.community-empty { padding: 64px 24px; text-align: center; color: var(--text-dim); }
.community-empty h2 { color: var(--text); margin-bottom: 8px; }
.community-empty .btn { margin-top: 16px; }
.link-btn {
  appearance: none; border: 0; background: none; padding: 0; color: var(--accent);
  font: inherit; cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
.texture-detail,
.creator-page { height: calc(100vh - 104px); overflow-y: auto; padding: 4px 8px 48px; }
.detail-breadcrumb { display: flex; gap: 8px; align-items: center; color: var(--text-dim); font-size: 12px; margin-bottom: 22px; }
.detail-layout { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(320px, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; max-width: 1120px; }
.detail-preview {
  overflow: hidden; border-radius: 16px; border: 1px solid var(--border);
  background-color: var(--bg); background-image: linear-gradient(45deg, var(--bg-3) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-3) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-3) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-3) 75%);
  background-size: 30px 30px; background-position: 0 0, 0 15px, 15px -15px, -15px 0;
}
.detail-preview img,
.detail-preview canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.detail-copy { padding-top: 10px; }
.detail-copy h2 { font-size: clamp(24px, 3vw, 38px); letter-spacing: -0.025em; margin: 7px 0 8px; }
.detail-copy > p { color: var(--text-dim); line-height: 1.65; max-width: 64ch; }
.detail-byline { margin-bottom: 22px; }
.detail-meta { display: grid; gap: 0; margin: 24px 0; border-top: 1px solid var(--border); }
.detail-meta > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.detail-meta dt { color: var(--text-dim); font-size: 11px; }
.detail-meta dd { margin: 0; font-size: 12px; color: var(--text); }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.detail-related { max-width: 1120px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border); }
.detail-related h3 { margin: 0 0 14px; }
.detail-related .lib-grid { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
.creator-head { display: flex; align-items: center; gap: 18px; padding: 16px 0 32px; }
.creator-head h2 { margin: 3px 0 4px; font-size: 28px; }
.creator-head p { color: var(--text-dim); }
.creator-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.16); color: var(--accent); font-size: 24px; font-weight: 700; }

@media (max-width: 820px) {
  #modal-library { left: 54px; }
  .modal-library-page { padding: 18px; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-preview { max-width: 520px; }
  .detail-related .lib-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
}

@media (max-width: 1120px) {
  #sidebar { width: 315px; flex-basis: 315px; }
  .side-lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar-actions { gap: 5px; }
}


/* ---------------------------------------------------------------------- */
/* 19. v3 additions: view cube, slicer split-button, prominent Advanced   */
/* ---------------------------------------------------------------------- */
#viewcube {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 132px;
  height: 132px;
  z-index: 5;
}

.split-btn {
  position: relative;
  display: flex;
  width: 100%;
}

.btn-slicer-main,
.btn-slicer-chev {
  appearance: none;
  border: 1px solid #009a3b;
  background: #00ae42;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: background 0.12s ease, border-color 0.12s ease;
}

.btn-slicer-main {
  flex: 1 1 auto;
  border-radius: 7px 0 0 7px;
  border-right: none;
}

.btn-slicer-chev {
  flex: 0 0 36px;
  width: 36px;
  padding: 0;
  border-radius: 0 7px 7px 0;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 11px;
}

.btn-slicer-main:hover,
.btn-slicer-chev:hover { background: #00c04a; }
.btn-slicer-main:active,
.btn-slicer-chev:active { background: #009a3b; box-shadow: none; }
.btn-slicer-main:disabled,
.btn-slicer-chev:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.slicer-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.slicer-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--text);
  background: transparent;
  transition: background 0.12s ease;
}
.slicer-menu button:hover { background: var(--bg-3); }

/* (The separate Advanced pane is gone — its options now live in per-panel
   "More…" disclosures, so they inherit each panel's typography exactly.) */