/* Bundled UI fonts (Inter for body, Nunito for headings). */
@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/Nunito.ttf") format("truetype-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f0f0f;          /* page background (matches the upload form) */
  --bg-rail: #131316;     /* top bar */
  --panel: #1d1d21;       /* cards / panels */
  --panel-2: #26262b;     /* raised surfaces */
  --field: #161618;       /* editable input fields */
  --line: #2e2e33;
  --text: #e7e7ea;
  --text-dim: #a1a1aa;
  --text-faint: #71717a;
  --accent: #fb923c;      /* Nexus orange (not the old yellow-gold) */
  --accent-deep: #ea7d22;
  --accent-soft: rgba(251, 146, 60, 0.14);
  --danger: #ef6f53;
  --ok: #5cbf6a;
  --radius: 0.25rem;      /* all boxes — matches the website */
  --radius-sm: 0.25rem;   /* button corners — matches the website */
  /* Headings use Nunito (semi-bold); body/UI uses Inter. */
  --serif: "Nunito", "Nunito Fallback", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", "Inter Fallback", "Segoe UI", system-ui, sans-serif;
  /* The splash wordmark serif — reused for the top-left brand so they match. */
  --forge-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* Nexus Mods brand tokens */
  --nx-orange: #fb923c;
  --nx-orange-bright: #fdba74;
  --zinc-900: #18181b;
  --zinc-800: #27272a;
  --zinc-700: #3f3f46;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(251,146,60,0.08), transparent 60%),
    var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ---------- Top bar + numbered stepper ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px; position: relative;
  height: 64px; flex: 0 0 auto; padding: 0 24px;
  background: var(--bg-rail);
  /* The separator now lives on .stage's top edge instead of here: the native
     window-control overlay paints over the header's bottom-right pixel row, so
     a border-bottom here would stop short under the buttons. */
  /* With the native title bar hidden, the header doubles as the drag handle;
     reserve room on the right so the window-control overlay clears the tools. */
  -webkit-app-region: drag;
  padding-right: 150px;
}
/* Interactive bits must stay clickable, so opt them out of the drag region. */
.topbar button, .topbar .tb-pop, .topbar .dropdown { -webkit-app-region: no-drag; }
/* Subtle divider sitting in the gap between the app's tools and the native
   window controls — same dull line colour used elsewhere in the app. */
.topbar::after {
  content: ""; position: absolute; top: 50%; right: 145px;
  transform: translateY(-50%);
  width: 1px; height: 28px; background: var(--line); pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.brand-mark { width: 26px; height: 26px; object-fit: contain; display: block; }
.brand-name { font-family: var(--forge-serif); font-weight: 700; font-size: 20px; letter-spacing: 0.3px; }

.stepper { list-style: none; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.stepper li {
  display: flex; align-items: center;
  color: var(--text-dim); font-size: 13px; white-space: nowrap;
}
/* the highlight box wraps only the number + label, never the connector */
.step-inner {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  transition: color 0.18s, background 0.18s;
}
.stepper li:not(:last-child)::after {
  content: ""; width: 28px; height: 1px; background: var(--line);
  margin: 0 6px; flex: 0 0 auto;
}
.step-num {
  width: 23px; height: 23px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; line-height: 1; text-align: center;
  background: var(--zinc-700); color: #d4d4d8; border: none;
  transition: background 0.18s, color 0.18s;
}
.stepper li.done .step-num { background: #2ea043; color: #fff; font-size: 0; }
.stepper li.done .step-num::after { content: "\2713"; font-size: 13px; font-weight: 700; }
.stepper li.active { color: #ffffff; }
.stepper li.active .step-inner { background: var(--zinc-800); color: #ffffff; }
.stepper li.active .step-num { background: #ffffff; color: #18181b; }
.stepper li.clickable { cursor: pointer; }
.stepper li.clickable:hover .step-inner { color: var(--text); background: rgba(255,255,255,0.05); }
.stepper li.locked { opacity: 0.55; cursor: default; }

/* As the window narrows, drop the connectors first, then the labels — like the form */
@media (max-width: 1300px) { .stepper li:not(:last-child)::after { display: none; } }
@media (max-width: 1120px) { .step-label { display: none; } .step-inner { gap: 0; padding: 5px; } }

.topbar-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.rail-foot { display: none; }

/* ---------- Top-bar icon buttons, dropdowns, notifications ---------- */
.tb-pop { position: relative; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid transparent; color: var(--text-dim);
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--zinc-800); color: var(--text); border-color: var(--line); }
.icon-btn.kebab { font-size: 20px; line-height: 1; font-weight: 700; }
.notif-badge {
  position: absolute; top: -3px; right: -4px; width: 15px; height: 15px; padding: 0;
  border-radius: 50%; background: var(--accent); color: #1a1206;
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
  border: 2px solid var(--bg-rail); box-sizing: content-box;
}

.dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5); padding: 6px; min-width: 200px;
  animation: fade 0.12s ease both;
}
.menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text); font-family: var(--sans); font-size: 13.5px; cursor: pointer;
  padding: 9px 11px; border-radius: var(--radius-sm); transition: background 0.12s;
}
.menu-item:hover { background: var(--zinc-700); }

.notif-dropdown { width: 340px; padding: 0; overflow: hidden; }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px; border-bottom: 1px solid var(--line);
}
.notif-title { font-weight: 700; font-size: 14px; color: var(--text); }
.notif-clear { background: none; border: none; color: var(--accent); font-family: var(--sans); font-size: 12px; cursor: pointer; padding: 0; }
.notif-clear:hover { text-decoration: underline; }
.notif-list { max-height: 50vh; overflow-y: auto; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--text-faint); font-size: 13px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 13px 15px; cursor: pointer; transition: background 0.12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--zinc-800); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; margin-top: 5px; }
.notif-item.read .notif-dot { background: var(--zinc-700); }
.notif-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notif-item-title { font-size: 13px; font-weight: 600; color: var(--text); }
.notif-item-text { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.badge { display: inline-block; font-size: 11.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); }
.badge.clickable { cursor: pointer; transition: filter 0.15s; }
.badge.clickable:hover { filter: brightness(1.25); }
.badge-muted { color: var(--text-faint); }
.badge-ok { color: var(--ok); border-color: rgba(139,191,106,0.4); }
.badge-warn { color: var(--accent); border-color: rgba(251,146,60,0.4); }
.pill {
  display: inline-block; vertical-align: middle; font-family: var(--sans);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(251,146,60,0.4); border-radius: 999px;
  padding: 2px 8px; margin-left: 8px;
}

/* ---------- Modal (setup dialogs) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.66); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: fade 0.18s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  position: relative; width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 30px 32px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  animation: rise 0.22s ease both;
}
.modal h2 { font-family: var(--serif); font-weight: 600; font-size: 23px; margin-bottom: 6px; }
.modal p { color: var(--text-dim); font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.modal-close {
  position: absolute; top: 16px; right: 18px; background: none; border: none;
  color: var(--text-faint); font-size: 22px; cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--text); }
.modal .status {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 18px;
}
.modal .status.ok { background: rgba(139,191,106,0.1); color: var(--ok); border: 1px solid rgba(139,191,106,0.3); }
.modal .status.warn { background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(251,146,60,0.3); }
.modal h4 { font-size: 13.5px; color: var(--text); margin: 18px 0 8px; }
.modal ol { margin: 0 0 4px 18px; color: var(--text-dim); font-size: 13.5px; line-height: 1.7; }
.modal .btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.modal hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.modal .muted-note { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin-top: 10px; }
.modal code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--accent); word-break: break-all; }

/* ---------- Texture browser ---------- */
.modal-wide { max-width: 780px; }
.tex-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; max-height: 54vh; overflow-y: auto; padding: 2px 4px 2px 2px; margin-top: 4px;
}
.tex-card {
  text-align: left; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.tex-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tex-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.tex-thumb {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); margin-bottom: 7px; overflow: hidden;
  background: #121214 center center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 11px; text-align: center;
}
.tex-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tex-id { font-size: 10.5px; color: var(--text-dim); font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tex-path { font-size: 10px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tex-tag {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent);
  border: 1px solid rgba(251,146,60,0.4); border-radius: 4px; padding: 0 4px; margin-left: 6px;
}

/* ---------- Stage ---------- */
.stage { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; border-top: 1px solid var(--line); }

/* Game-select background: the chosen game's art, darkened and melting into grey */
.stage-bg {
  position: absolute; top: 0; left: 0; right: 0; height: 78%; z-index: 0;
  background-position: center top; background-size: cover; background-repeat: no-repeat;
  opacity: 0; transition: opacity 0.55s ease; pointer-events: none;
}
.stage-bg.show { opacity: 1; }
.stage-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,15,15,0.55) 0%, rgba(15,15,15,0.66) 42%, rgba(15,15,15,0.92) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgba(15,15,15,0.5) 0%, transparent 22%, transparent 78%, rgba(15,15,15,0.5) 100%);
}

/* Animated backdrop: a faint LED spectrum analyzer, shown only on audio screens
   (toggled via .show). Sits at z-index 0 behind the panel/nav (both z-index 1). */
.stage-fx {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 0.45s ease;
}
.stage-fx.show { opacity: 1; }
.stage-fx:not(.show) .eq-fill { animation-play-state: paused; }
.eq.live .eq-fill { animation: none; }   /* JS sets heights from the live audio */
.eq {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  display: flex; align-items: flex-end; gap: 0.45%; padding: 0 2.5%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.eq-col {
  position: relative; flex: 1 1 0; height: 100%;
  -webkit-mask-image: repeating-linear-gradient(to top, #000 0 6px, transparent 6px 10px);
          mask-image: repeating-linear-gradient(to top, #000 0 6px, transparent 6px 10px);
}
.eq-fill {
  position: absolute; inset: 0; background: var(--c); opacity: 0.16;
  transform-origin: bottom; transform: scaleY(var(--min)); will-change: transform;
  animation: eqBounce var(--d) ease-in-out var(--delay) infinite alternate;
}
@keyframes eqBounce { from { transform: scaleY(var(--min)); } to { transform: scaleY(var(--peak)); } }
@media (prefers-reduced-motion: reduce) {
  .eq-fill { animation: none; transform: scaleY(var(--peak)); }
}
.panel {
  position: relative; z-index: 1;
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 48px 52px 24px;
  animation: rise 0.28s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.eyebrow {
  text-transform: uppercase; letter-spacing: 2.5px;
  font-size: 11px; color: var(--accent); margin-bottom: 12px;
}
h1 { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.2; margin-bottom: 10px; }
.lede { color: var(--text-dim); font-size: 15px; max-width: 60ch; line-height: 1.55; margin-bottom: 30px; }

/* Selectable option cards, styled as radio rows (matching the upload form) */
.cards { display: grid; gap: 12px; max-width: 720px; }
.cards.two { grid-template-columns: repeat(2, 1fr); max-width: 880px; }
.card {
  position: relative; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px 16px 50px;
  transition: border-color 0.16s, background 0.16s;
}
.card::before {
  content: ""; position: absolute; left: 18px; top: 17px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--text-faint); background: transparent;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.card:hover { border-color: var(--accent-deep); }
.card:hover::before { border-color: var(--accent-deep); }
.card.selected { border-color: var(--accent); background: var(--panel-2); }
.card.selected::before {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px var(--accent);
}
.card h3 { font-family: var(--serif); font-weight: 600; font-size: 16px; margin-bottom: 4px; color: var(--text); }
.card p { color: var(--text-dim); font-size: 13px; line-height: 1.5; }

/* step-2 mod-type tiles — icon-led cards in rows of three, like the step-5 options */
.modtype-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; margin-top: 4px; }
.mt-tile {
  text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; transition: border-color 0.16s, background 0.16s;
}
.mt-tile:hover { border-color: var(--accent-deep); }
.mt-tile.selected { border-color: var(--accent); background: var(--panel-2); }
.mt-tile.is-soon { opacity: 0.6; cursor: default; }
.mt-tile.is-soon:hover { border-color: var(--line); }
.mt-tile-icon { width: 40px; height: 40px; margin-bottom: 12px; }
.mt-tile-icon svg { width: 100%; height: 100%; display: block; }
.mt-tile h3 { font-family: var(--serif); font-weight: 600; font-size: 16px; margin-bottom: 5px; color: var(--text); }
.mt-tile h3 .pill { margin-left: 6px; vertical-align: middle; }
.mt-tile p { color: var(--text-dim); font-size: 13px; line-height: 1.5; }

/* step-4 preview: a compact card echoing the Nexus upload-form preview. */
.side-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-faint); margin-bottom: 12px; }
.preview-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pc-hero {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; background: var(--bg-rail); border-bottom: 1px solid var(--line);
}
.pc-hero.is-ph { min-height: 116px; color: var(--text-faint); }
.pc-hero-ico { font-size: 30px; opacity: 0.5; }
.pc-shot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
.pc-shot img {
  display: block; width: 100%; max-width: 116px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-sm); background: #000; border: 1px solid var(--line);
}
.pc-shot-ph {
  width: 116px; height: 116px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px dashed var(--line); color: var(--text-faint);
  font-size: 11px; text-align: center; padding: 8px;
}
.pc-cap { font-size: 10.5px; color: var(--text-faint); }
.pc-arrow { color: var(--accent); font-size: 16px; flex: 0 0 auto; }
.pc-body { padding: 14px 16px; }
.pc-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; word-break: break-word; }
.pc-title.pc-muted { color: var(--text-dim); font-weight: 600; }
.pc-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.pc-cover { width: 22px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); flex: 0 0 auto; }
.pc-desc { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin-top: 9px; }
.pc-desc code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--accent); word-break: break-all; }
.pc-foot { display: flex; gap: 22px; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--bg-rail); }
.pc-stat { display: flex; flex-direction: column; gap: 1px; flex: 0 1 auto; }
.pc-stat-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); }
.pc-stat-v { font-size: 12px; color: var(--text); font-weight: 600; white-space: nowrap; }

/* Collapsible "tip" guides in the step-4 sidebar. */
.guides { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.guide { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.guide.open { border-color: rgba(251, 146, 60, 0.45); }
.guide-head {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; padding: 13px 15px; color: inherit; font-family: var(--sans);
}
.guide-head:hover { background: rgba(255, 255, 255, 0.02); }
.guide-ico { font-size: 15px; line-height: 1; flex: 0 0 auto; }
.guide-title { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text); }
.guide-head .chev { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-dim); transition: transform 0.18s, color 0.18s; }
.guide-head:hover .chev { color: var(--accent); }
.guide.open .chev { transform: rotate(180deg); color: var(--accent); }
.guide-body { display: none; padding: 0 15px 14px; }
.guide.open .guide-body { display: block; }
.guide-body p { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }

/* Forms */
.field { margin-bottom: 22px; max-width: 520px; }
.field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 7px; }
.field .hint { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; line-height: 1.5; }
input[type="text"], select {
  width: 100%; background: var(--field); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 14px; font-family: var(--sans);
}
input[type="text"]:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.row { display: flex; gap: 16px; }
.row .field { flex: 1; }

/* File picker box */
.dropzone {
  border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 30px; text-align: center; cursor: pointer; max-width: 720px;
  transition: border-color 0.18s, background 0.18s;
}
.dropzone:hover { border-color: var(--accent-deep); background: var(--panel); }
.dz-plus {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--text-dim); font-size: 24px; font-weight: 300; line-height: 1;
}
.dropzone:hover .dz-plus { border-color: var(--accent); color: var(--accent); }
.dropzone .big { font-size: 15px; margin-bottom: 6px; }
.dropzone .sub { color: var(--text-faint); font-size: 12.5px; }
.chosen-file {
  display: flex; align-items: center; gap: 10px; max-width: 520px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px;
}
.chosen-file .name { word-break: break-all; }
.chosen-thumb {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  background-size: cover; background-position: center; background-color: var(--field, #161618);
  border: 1px solid var(--line);
}
.chosen-thumb.has-img { border-color: var(--accent); }
.tex-info { margin-top: 16px; padding: 12px 14px; background: var(--panel, #1d1d21); border: 1px solid var(--line); border-radius: 10px; }
.tex-info-replaces { font-size: 12px; color: var(--text-dim); }
.tex-info-replaces code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--text); word-break: break-all; }
.tex-info .pc-foot { border: 0; padding: 0; }
/* Designed audio file chip (replaces the low-contrast music emoji). */
.audio-chip { gap: 13px; }
.cf-badge {
  flex: 0 0 auto; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); color: var(--accent);
  background: var(--accent-soft); border: 1px solid rgba(251, 146, 60, 0.35);
}
.cf-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-meta .name { color: var(--text); font-weight: 600; }
.cf-sub { color: var(--text-faint); font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* Summary / result */
.summary { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; max-width: 560px; }
.summary dl { display: grid; grid-template-columns: 130px 1fr; gap: 10px 16px; font-size: 13.5px; }
.summary dt { color: var(--text-faint); }
.summary dd { color: var(--text); word-break: break-all; }

.callout { border-radius: var(--radius-sm); padding: 14px 16px; font-size: 13.5px; line-height: 1.55; max-width: 560px; margin-top: 18px; }
.callout.info { background: var(--accent-soft); border: 1px solid rgba(251,146,60,0.3); color: var(--text); }
.callout.error { background: rgba(217,105,79,0.12); border: 1px solid rgba(217,105,79,0.4); color: #f0c2b6; }
.callout.success { background: rgba(139,191,106,0.1); border: 1px solid rgba(139,191,106,0.35); color: #cfe6bc; }
.callout.warn { background: rgba(216,166,87,0.12); border: 1px solid rgba(216,166,87,0.45); color: #ecd6a6; }
/* Long file paths (e.g. the saved-template location) are unbreakable tokens —
   without this they overflow the callout and clip its rounded corner. */
.callout code { word-break: break-all; overflow-wrap: anywhere; }
.warn-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 11px; }
.warn-aside { font-size: 12px; color: var(--text-faint); line-height: 1.45; }

.path-preview {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--accent);
  background: #121214; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-top: 10px; word-break: break-all; max-width: 520px;
}

/* ---------- Nav footer ---------- */
.nav {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 18px 52px; border-top: 1px solid var(--line);
  background: rgba(10,10,12,0.6);
}
.spacer { flex: 1; }
.btn {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  padding: 11px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: all 0.16s;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #1a1206; }
.btn-primary:not(:disabled):hover { background: #fda860; }
.btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--line); }
.btn-ghost:not(:disabled):hover { color: var(--text); border-color: var(--text-faint); }

.spinner {
  width: 15px; height: 15px; border: 2px solid rgba(26,18,6,0.3);
  border-top-color: #1a1206; border-radius: 50%;
  display: inline-block; vertical-align: -2px; margin-right: 8px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Splash screen (animated forge) ---------- */
.splash {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0c0a07;
}
.splash.hidden { opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }

/* The native min/max/close buttons sit in a small rectangle pinned to the
   window's top-right. While the splash is up that block is recoloured to the
   splash's own dark tone (see main.js), and this soft blend in the same tone
   feathers its edge into the corner so it matches the top-left. */
.splash::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 340px; height: 210px; pointer-events: none; z-index: 6;
  background: radial-gradient(210px 150px at calc(100% - 70px) 32px,
              #0c0a07 0%, #0c0a07 44%, rgba(12, 10, 7, 0) 100%);
}

/* forge photo backdrop, darkened like the step-1 game art */
.splash-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("assets/forge-splash.jpg") center center / cover no-repeat;
  animation: splashBgIn 1.4s ease-out both;
}
.splash-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(72% 58% at 50% 52%, rgba(12,11,9,0.5), rgba(12,11,9,0.05) 64%),
    linear-gradient(180deg, rgba(12,11,9,0.9) 0%, rgba(12,11,9,0.6) 36%, rgba(12,11,9,0.7) 62%, rgba(12,11,9,0.97) 100%);
}
@keyframes splashBgIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }

/* particle layer (embers + sparks), behind the centred content */
.splash-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.splash.fx-front .splash-fx { z-index: 5; } /* bring sparks in front during the strike */

/* the forge glow, reduced, blooming behind the button */
.forge-glow {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 520px; height: 300px; max-width: 92vw;
  background: radial-gradient(closest-side, rgba(251,146,60,0.22), rgba(192,122,44,0.08) 45%, transparent 72%);
  z-index: 1; opacity: 0;
  animation: glowIgnite 1s ease-out 0.4s both, glowFlicker 3.4s ease-in-out 1.4s infinite;
}
@keyframes glowIgnite { from { opacity: 0; transform: translate(-50%,-50%) scale(0.7); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes glowFlicker { 0%,100% { opacity: 0.82; } 45% { opacity: 1; } 70% { opacity: 0.74; } }

/* centred stack: title, CTA, byline */
.splash-center { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; }
.splash-title {
  font-family: var(--forge-serif);
  font-weight: 600; font-size: 72px; letter-spacing: 1px; line-height: 1; margin: 0 0 30px;
  background: linear-gradient(180deg, #f7f6f4 0%, #d2cec9 38%, #948f8b 64%, #bdb8b2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.75));
  animation: titleRise 1.2s cubic-bezier(0.2,0.8,0.2,1) 0.3s both;
}
.splash-title::after {
  content: "ModForge"; position: absolute; left: 0; right: 0; top: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(253,230,138,0.9) 50%, transparent 60%);
  background-size: 250% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 2.4s ease-in-out 1.6s 2;
}
@keyframes titleRise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -150% 0; } }

.splash-cta {
  display: inline-block;
  background: var(--accent); color: #1a1206; font-weight: 700; border: none;
  font-size: 16px; padding: 14px 34px; border-radius: var(--radius-sm); cursor: pointer;
  box-shadow: 0 6px 26px rgba(251,146,60,0.4); transition: background 0.15s, transform 0.1s;
  animation: ctaIn 0.6s ease-out 1.1s both;
}
.splash-cta:hover { background: #fda860; }
.splash-cta:active { transform: translateY(1px); }
@keyframes ctaIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* byline: logo pops + spins in, then slides left as the text unfurls from it */
.splash-by {
  margin-top: 18px; font-size: 12.5px; letter-spacing: 0.5px; color: var(--text-faint);
  display: flex; justify-content: center; align-items: center; gap: 8px;
}
.splash-by strong { color: var(--text-dim); font-weight: 600; }
.nx-logo-wrap { display: inline-flex; transform-origin: center; animation: nxPop 1.4s cubic-bezier(0.2,0.7,0.2,1) 1.7s both; }
.nexus-logo { width: 20px; height: 20px; display: block; }
.by-text { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; opacity: 0; animation: byReveal 0.55s ease-out 3.05s both; }
@keyframes nxPop {
  0%   { transform: scale(0) rotate(0deg); opacity: 0; }
  20%  { transform: scale(1.2) rotate(210deg); opacity: 1; }
  75%  { transform: scale(1.08) rotate(920deg); }
  100% { transform: scale(1) rotate(1080deg); opacity: 1; }
}
@keyframes byReveal { from { max-width: 0; opacity: 0; } to { max-width: 240px; opacity: 1; } }

/* version + alpha disclaimer, bottom-left, in the byline style */
.splash-version {
  position: absolute; left: 24px; bottom: 18px; z-index: 3;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px; letter-spacing: 0.5px; color: var(--text-faint);
  animation: ctaIn 0.6s ease-out 1.5s both;
}
.splash-version .sv-warn { color: var(--accent-deep); opacity: 0.85; }

/* Respect reduced-motion: show the final composed frame, no movement */
@media (prefers-reduced-motion: reduce) {
  .splash-bg, .forge-glow, .splash-title, .splash-title::after, .splash-cta, .nx-logo-wrap, .by-text, .splash-version { animation: none !important; }
  .splash-bg { opacity: 1; transform: none; }
  .forge-glow { opacity: 1; }
  .splash-title, .splash-cta { transform: none; opacity: 1; }
  .nx-logo-wrap { transform: none; opacity: 1; }
  .by-text { max-width: 240px; opacity: 1; }
}

/* ---------- Reworked game cards (step 1) ---------- */
.game-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px; margin-top: 4px; max-width: 1040px;
}
.game-card {
  position: relative; text-align: left; cursor: pointer; overflow: hidden;
  background: var(--zinc-800); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 0; aspect-ratio: 3 / 4;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.game-card:hover { transform: translateY(-3px); border-color: var(--zinc-700); }
.game-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.game-art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.game-art-fallback { position: absolute; inset: 0; }
.game-art-fallback svg { width: 100%; height: 100%; }
.game-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 13px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55) 38%, rgba(0,0,0,0.9));
}
.game-name { font-family: var(--serif); font-size: 17px; font-weight: 700; color: #fff; line-height: 1.2; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.game-sub { color: #d4d4d8; font-size: 12px; margin-top: 5px; }
.game-card.is-stub .game-art-img { filter: saturate(0.8) brightness(0.82); }

/* ---------- Advanced settings (companion maps) ---------- */
.advanced {
  margin-top: 24px; max-width: 720px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.advanced.open { border-color: rgba(251, 146, 60, 0.45); }

/* The disclosure header — bold + orange, the way the sketch calls for. */
.advanced-toggle {
  display: flex; align-items: flex-start; gap: 14px; width: 100%;
  text-align: left; cursor: pointer;
  background: none; border: none; padding: 16px 18px;
  color: inherit; font-family: var(--sans);
}
.advanced-toggle:hover { background: rgba(255, 255, 255, 0.02); }
.advanced-text { flex: 1; }
.advanced-eyebrow {
  display: block; font-weight: 800; font-size: 15px; letter-spacing: 0.2px;
  color: var(--accent); margin-bottom: 4px;
}
.advanced-sub { display: block; color: var(--text-dim); font-size: 13px; line-height: 1.5; max-width: 60ch; }
.advanced-toggle .chev {
  width: 20px; height: 20px; flex: 0 0 auto; color: var(--text-dim);
  margin-top: 2px; transition: transform 0.18s, color 0.18s;
}
.advanced-toggle:hover .chev { color: var(--accent); }
.advanced.open > .advanced-toggle .chev { transform: rotate(180deg); color: var(--accent); }

.advanced-body { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 8px; }

/* Sections inside the advanced panel: "Output" (mipmaps) and "Surface maps". */
.adv-section { display: flex; flex-direction: column; gap: 8px; }
.adv-section + .adv-section { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.adv-section-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); }
.adv-sub-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 2px; max-width: 64ch; }

/* A labelled on/off toggle row (used for "Generate mipmaps"). */
.toggle-row {
  display: flex; align-items: flex-start; gap: 16px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-rail); padding: 13px 15px;
}
.toggle-row:hover { border-color: var(--accent-deep); }
.toggle-text { flex: 1; min-width: 0; }
.toggle-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.toggle-rec {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent);
  border: 1px solid rgba(251,146,60,0.4); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle;
}
.toggle-help { display: block; font-size: 12px; color: var(--text-faint); line-height: 1.5; margin-top: 5px; }
.switch { position: relative; flex: 0 0 auto; margin-top: 2px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  display: block; width: 40px; height: 23px; border-radius: 999px;
  background: var(--zinc-700); transition: background 0.16s;
}
.switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; transition: transform 0.16s; box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(17px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--accent-soft); }

/* One collapsible row per companion map. */
.map-row {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-rail); overflow: hidden;
  transition: border-color 0.16s;
}
.map-row.open { border-color: var(--accent); }
/* A map the texture lacks: greyed but still interactive (you can add it). */
.map-row.is-absent { opacity: 0.6; }
.map-row.is-absent:hover { opacity: 0.92; }
/* A map with a queued change/add gets a subtle accent edge. */
.map-row.is-set { border-color: rgba(251, 146, 60, 0.55); opacity: 1; }

.map-row-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 12px 14px; color: inherit; font-family: var(--sans);
}
.map-row-head:hover { background: rgba(255, 255, 255, 0.03); }

.map-row-id {
  flex: 0 0 auto; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--accent);
  background: var(--accent-soft); border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 999px; padding: 2px 9px;
}
.map-row.is-absent .map-row-id { color: var(--text-faint); background: none; border-color: var(--line); }
.map-row-main { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.map-row-label { font-weight: 600; font-size: 14.5px; color: var(--text); }
.map-row-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--accent); border: 1px solid rgba(251, 146, 60, 0.45);
  border-radius: 999px; padding: 1px 6px; margin-left: 8px; vertical-align: middle;
}
.map-row-meta { font-size: 12px; color: var(--text-faint); }
.map-row .chev { width: 18px; height: 18px; flex: 0 0 auto; color: var(--text-dim); transition: transform 0.18s; }
.map-row.open .chev { transform: rotate(180deg); color: var(--accent); }

.map-row-body {
  padding: 4px 16px 18px; border-top: 1px solid var(--line);
  margin: 0 0 0; background: var(--panel);
}
.map-row-body .cards { max-width: none; margin-top: 4px; }
.map-what-title { font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--text); margin: 14px 0 6px; }
.map-what { color: var(--text-dim); font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; max-width: 62ch; }
.map-row-body code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; color: var(--accent); }
.map-custom { margin-top: 14px; }
/* "You can add one" note for maps the texture doesn't currently have. */
.map-add-note {
  font-size: 12.5px; color: var(--text-dim); line-height: 1.55;
  background: var(--accent-soft); border: 1px solid rgba(251, 146, 60, 0.25);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 14px;
}
.map-add-note code { word-break: break-all; }

.map-example { margin: 0 0 16px; }
.map-example img {
  display: block; width: 100%; max-width: 540px; height: auto;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
}
.map-example figcaption {
  margin-top: 8px; font-size: 12.5px; color: var(--text-faint);
  line-height: 1.5; max-width: 60ch;
}
/* On-brand placeholder for maps without a real illustration yet. */
.map-example-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; max-width: 540px; aspect-ratio: 16 / 7;
  border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--bg-rail); color: var(--text-faint);
}
.map-example-ph svg { width: 46px; height: 46px; }
.map-example-ph span { font-size: 12.5px; letter-spacing: 0.2px; }

/* ---------- Restore originals (rail link + dialog) ---------- */
.rail-link {
  display: inline-block; background: none; border: none;
  color: var(--text-dim); font-family: var(--sans); font-size: 12.5px; cursor: pointer;
  padding: 4px 0; transition: color 0.15s; white-space: nowrap;
}
.rail-link:hover { color: var(--accent); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.restore-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; max-height: 320px; overflow-y: auto; }
.restore-row {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  background: var(--zinc-800); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
}
.restore-row-main { min-width: 0; }
.restore-name { font-size: 14px; color: var(--text); margin-bottom: 2px; }
.restore-path { font-size: 12px; color: var(--text-dim); word-break: break-all; }
.restore-when { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }
.restore-actions { display: flex; align-items: center; gap: 12px; }

/* ---------- Custom scrollbars (slim, on-theme) ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--zinc-700) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--zinc-700); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #52525b; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- Step 3: category grid + detail side panel ---------- */
.cat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
.cat-main { min-width: 0; }
.cat-side { position: sticky; top: 0; align-self: start; }

/* Category tabs (step 3): coloured pills, one open by default. */
.cat-tabs-label { font-size: 13px; color: var(--text-dim); margin-bottom: 11px; }
.cat-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.cat-tab {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px 8px 13px; cursor: pointer; font-family: var(--sans);
  font-size: 13.5px; color: var(--text-dim); transition: transform 0.14s, border-color 0.14s, color 0.14s, background 0.14s;
}
.cat-tab:hover { border-color: var(--chip); color: var(--text); transform: translateY(-1px); }
.cat-tab-ico { font-size: 15px; line-height: 1; }
.cat-tab.active {
  color: #fff; border-color: var(--chip); font-weight: 600;
  background: linear-gradient(135deg, color-mix(in srgb, var(--chip) 40%, transparent), color-mix(in srgb, var(--chip) 12%, transparent));
  box-shadow: 0 0 0 1px var(--chip), 0 8px 22px -12px var(--chip);
}

/* bigger texture cards in the category grid, names allowed two lines */
.tex-grid.lg { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px; max-height: none; overflow: visible; }
.tex-grid.lg .tex-name {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* the active category's colour tints the selected card + the per-category search focus */
.tex-card.selected { border-color: var(--cat-c, var(--accent)); box-shadow: 0 0 0 2px var(--cat-c, var(--accent)); }
#cat-detail input[type="text"]:focus { border-color: var(--cat-c, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-c, var(--accent)) 22%, transparent); }

.detail-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; max-height: calc(100vh - 150px); overflow-y: auto; }
/* The empty panel keeps the same footprint as a populated one (placeholder
   preview + text) so the layout stays steady with a category open by default. */
.detail-panel.is-empty { border-style: dashed; }

/* ---- Audio (music & sound effects) browser ---- */
.aud-list { display: flex; flex-direction: column; gap: 10px; }
.aud-track { position: relative; display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; transition: border-color .16s, background .16s; font-family: var(--sans); }
.aud-track:hover { border-color: var(--accent-deep); }
.aud-track.selected { border-color: var(--cat-c, var(--accent)); background: var(--panel-2); }
.aud-track-ico { font-size: 19px; line-height: 1.2; flex: 0 0 auto; }
.aud-track-main { min-width: 0; }
.aud-track-name { display: block; font-weight: 600; font-size: 14.5px; color: var(--text); }
.aud-track-desc { display: block; color: var(--text-dim); font-size: 12.5px; line-height: 1.45; margin-top: 3px; }
.aud-track-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.aud-file { font-family: ui-monospace, Menlo, Consolas, monospace; }
.aud-empty { text-align: center; color: var(--text-faint); padding: 30px 12px; }
.aud-empty-ico { font-size: 30px; opacity: .5; margin-bottom: 10px; }
.aud-detail { --cat-c: var(--accent); }
.aud-detail-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--cat-c); font-weight: 700; margin-bottom: 6px; }
.aud-detail-title { font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--text); }
.aud-detail-desc { color: var(--text-dim); font-size: 13px; line-height: 1.55; margin: 10px 0 0; }
.aud-detail-facts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.aud-detail-path { margin-top: 12px; font-size: 12.5px; color: var(--text-dim); }
.aud-detail-path code { font-size: 11px; color: var(--accent); word-break: break-all; }
.aud-detail-player { margin-top: 12px; }

/* ---- Audio players (detail + preview) ---- */
.aud-player { display: flex; align-items: center; gap: 12px; background: var(--field); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.aud-play { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cat-c, var(--accent)); color: var(--cat-c, var(--accent));
  background: color-mix(in srgb, var(--cat-c, var(--accent)) 16%, transparent);
  display: flex; align-items: center; justify-content: center; transition: background .14s; }
.aud-play:hover { background: color-mix(in srgb, var(--cat-c, var(--accent)) 28%, transparent); }
.aud-play svg { width: 16px; height: 16px; }
.aud-play .ico-pause { display: none; }
.aud-player.playing .ico-play { display: none; }
.aud-player.playing .ico-pause { display: inline; }
.aud-player-main { flex: 1; min-width: 0; }
.aud-player-label { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-bars { display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.aud-prog-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.aud-prog { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--line); cursor: pointer; }
.aud-prog-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 3px; background: var(--cat-c, var(--accent)); pointer-events: none; }
.aud-prog-knob { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; border-radius: 999px; background: var(--cat-c, var(--accent)); transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-c, var(--accent)) 22%, transparent); opacity: 0; transition: opacity .12s; }
.aud-player:hover .aud-prog-knob, .aud-player.playing .aud-prog-knob { opacity: 1; }
.aud-time { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aud-player.is-disabled { opacity: .45; }
.aud-player.is-disabled .aud-play { cursor: default; }
.aud-player.is-disabled .aud-prog { cursor: default; }

/* ---- Trim to fit (step 4) ---- */
.trim-card { margin-top: 20px; max-width: 720px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.trim-card.open { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.trim-head { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text); font-weight: 600; }
.trim-head input { accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; }
.trim-ico { font-size: 15px; }
.trim-ico-svg { color: var(--accent); display: inline-flex; align-items: center; }
.trim-body { margin-top: 14px; transition: opacity 0.2s ease; }
/* Bodies stay visible (they look good and fill the space) but read as disabled
   until the card is switched on. */
.trim-card:not(.open) .trim-body { opacity: 0.4; pointer-events: none; }
.trim-note { color: var(--text-dim); font-size: 13px; line-height: 1.55; margin: 0 0 12px; }
/* Trim scrubber: a real waveform of the upload, with a draggable bright window
   marking the slice that ships and everything outside it dimmed. */
.trim-scrubber {
  position: relative; height: 66px; margin: 4px 0 2px;
  border-radius: var(--radius-sm); background: var(--field);
  border: 1px solid var(--line); overflow: hidden;
  cursor: pointer; touch-action: none; user-select: none;
}
.trim-wave { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; padding: 0 9px; pointer-events: none; }
.trim-wave i { flex: 1 1 0; min-width: 1px; height: 16%; background: var(--accent); opacity: 0.5; border-radius: 1px; }
.trim-keep {
  position: absolute; top: 0; bottom: 0; box-sizing: border-box;
  border: 2px solid var(--accent); border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  /* The huge spread shadow paints the dim veil over everything outside the
     window; .trim-scrubber's overflow:hidden clips it to the track. */
  box-shadow: 0 0 0 2000px rgba(12, 11, 9, 0.58),
              0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
  cursor: grab; outline: none; transition: border-color 0.12s;
}
.trim-keep:active { cursor: grabbing; }
.trim-keep:hover, .trim-keep:focus-visible { border-color: var(--nx-orange-bright); }
.trim-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 3px; pointer-events: none; }
.trim-grip i { display: block; width: 2px; height: 18px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 65%, transparent); }
.trim-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Fade card: a gain envelope drawn over the clip's waveform, with a draggable
   handle at each fade knee. Reuses the trim card's frame + readout styling. */
.fade-card { margin-top: 16px; }
.fade-viz {
  position: relative; height: 72px; margin: 4px 0 2px;
  border-radius: var(--radius-sm); background: var(--field);
  border: 1px solid var(--line); overflow: hidden; touch-action: none; user-select: none;
}
.fade-wave { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; padding: 0 9px; pointer-events: none; }
.fade-wave i { flex: 1 1 0; min-width: 1px; height: 16%; background: var(--accent); opacity: 0.36; border-radius: 1px; }
.fade-env { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fade-fill { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.fade-line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fade-knee { position: absolute; top: 0; bottom: 0; width: 18px; transform: translateX(-9px); cursor: ew-resize; outline: none; }
.fade-knee::before { content: ""; position: absolute; left: 50%; top: 17px; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--accent); }
.fade-knee i { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--field), 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); transition: background 0.12s; }
.fade-knee:hover i, .fade-knee:focus-visible i { background: var(--nx-orange-bright); }
.trim-readout { margin-top: 10px; font-size: 13px; color: var(--text-dim); }
.trim-readout strong { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700; }
.aud-bars i { display: block; width: 3px; height: 30%; border-radius: 2px; background: color-mix(in srgb, var(--cat-c, var(--accent)) 55%, var(--line)); }
.aud-player.playing .aud-bars i { animation: aud-eq .7s ease-in-out infinite; }
.aud-player.playing .aud-bars i:nth-child(2n) { animation-duration: .55s; }
.aud-player.playing .aud-bars i:nth-child(3n) { animation-duration: .85s; }
@keyframes aud-eq { 0%,100% { height: 25%; } 50% { height: 95%; } }
.pc-aud-cap { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); margin-bottom: 5px; }
.pc-aud-players { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); }
.detail-preview.is-ph {
  border: 1px dashed var(--line); color: var(--text-faint); font-size: 30px;
  background: var(--field);
}
.detail-empty-msg { color: var(--text-faint); font-size: 13px; line-height: 1.55; text-align: center; padding: 4px 6px 6px; }
.detail-preview {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden;
  background: #121214 center center / cover no-repeat; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 12px;
}
.detail-name { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.3; }
.detail-id { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--text-dim); margin-top: 3px; word-break: break-all; }
.detail-path { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--text-faint); margin-top: 4px; word-break: break-all; }
.detail-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin-top: 11px; }
.detail-section-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); margin: 16px 0 7px; }
.detail-note { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.detail-maps-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.detail-maps-list li { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.detail-map-head code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--accent); font-size: 11px; }
.detail-map-head strong { color: var(--text); font-weight: 600; margin-left: 4px; }
.detail-map-plain { display: block; color: var(--text-faint); margin-top: 2px; }
.detail-paths { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.detail-paths li { font-size: 10.5px; color: var(--text-faint); display: flex; gap: 7px; align-items: baseline; }
.detail-paths code { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; flex: 1 1 auto; }
.detail-pathtag {
  flex: 0 0 auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 9px;
  color: var(--text-dim); background: var(--zinc-800); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1px 5px;
}

/* On narrower windows, stack the detail panel under the grid */
@media (max-width: 1080px) {
  .cat-layout { grid-template-columns: 1fr; }
  .cat-side { position: static; }
  .detail-panel { max-height: none; overflow: visible; }
  .file-layout { grid-template-columns: 1fr; }
}

/* ---------- Step 4: file + format left, guide callout right ---------- */
.file-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }
.file-main { min-width: 0; }
/* The whole right column (preview + guides) sticks as you scroll the taller left
   column. align-self:start keeps the column its content height so it has room to
   travel within the grid row. */
.file-side { position: sticky; top: 8px; align-self: start; display: flex; flex-direction: column; }
.file-main .dropzone, .file-main .chosen-file { max-width: 720px; }
.file-main .summary, .file-main .field { max-width: none; }
@media (max-width: 1080px) {
  /* When the columns stack, sticky would fight the flow — pin it off. */
  .file-side { position: static; }
}

/* ---------- Step 5: forge-themed finish ---------- */
.finish-hero { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.finish-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.finish-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(480px 340px at 12% 58%, rgba(251,146,60,0.34), transparent 70%),
    linear-gradient(115deg, rgba(15,15,15,0.9) 0%, rgba(15,15,15,0.78) 46%, rgba(15,15,15,0.6) 100%);
}
.finish-hero-inner { position: relative; display: flex; align-items: center; gap: 30px; padding: 28px 32px; }

/* before → after forge pieces */
.fh-forge { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.fh-piece { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fh-thumb {
  position: relative; width: 112px; height: 112px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14); background: #121214 center center / cover no-repeat;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 26px;
}
.fh-cap { position: relative; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.6px; }
.fh-arrow { position: relative; color: var(--accent); font-size: 22px; flex: 0 0 auto; margin-bottom: 22px; }
.fh-info { position: relative; min-width: 0; flex: 1 1 auto; }
.fh-eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; margin-bottom: 6px; }
.fh-title { font-family: var(--serif); font-weight: 700; font-size: 25px; color: #fff; line-height: 1.15; margin-bottom: 14px; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.fh-dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 13px; margin: 0; }
.fh-dl dt { color: var(--text-faint); }
.fh-dl dd { color: #e7e7ea; margin: 0; word-break: break-all; display: flex; align-items: center; gap: 8px; }
.fh-dl dd.fh-files { display: block; }
.fh-cover { width: 26px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); flex: 0 0 auto; }

/* Per-file lines in the "Ready to forge" banner: every path we'll write. Each
   row shrinks to its own content so the faint separator only spans the path
   width, instead of stretching across the whole banner. */
.fh-file { padding: 5px 0; width: fit-content; max-width: 100%; }
.fh-file + .fh-file { border-top: 1px solid rgba(255,255,255,0.07); }
.fh-file-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.fh-file-tag {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: var(--accent);
  background: var(--accent-soft); border: 1px solid rgba(251,146,60,0.3); border-radius: 999px; padding: 1px 7px;
}
.fh-file-label { font-size: 12.5px; color: #e7e7ea; font-weight: 600; }
.fh-file-act { font-size: 12px; color: var(--text-dim); }
.fh-file-path { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--text-dim); word-break: break-all; display: block; }

/* three option cards, full width to line up with the hero */
.finish-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.finish-card { padding: 20px 22px; }
.finish-card::before { display: none; }
.finish-card-icon { font-size: 24px; margin-bottom: 10px; line-height: 1; height: 26px; }
.finish-nexus { height: 24px; width: auto; vertical-align: middle; }
.finish-card.is-soon { opacity: 0.6; cursor: default; }
.finish-card.is-soon:hover { transform: none; border-color: var(--line); }
.finish-card h3 .pill { margin-left: 6px; vertical-align: middle; }

/* install confirmation / result — matches the texture detail panel */
.install-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-top: 16px; }
.install-card.ok { border-color: rgba(92,191,106,0.45); background: rgba(92,191,106,0.06); margin-top: 14px; }
.install-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); margin-bottom: 12px; }
.install-eyebrow.ok { color: var(--ok); }
.il-rows { display: flex; flex-direction: column; gap: 10px; }
.il-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.il-label { color: var(--text-faint); font-size: 12px; }
.il-row code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--accent);
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 10px; word-break: break-all; display: block;
}
.install-card.ok .il-row code { color: var(--ok); }
.install-card.ok .il-row { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
.install-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin: 12px 0 0; max-width: 72ch; }
.install-actions { display: flex; gap: 10px; margin-top: 16px; }

/* Per-file checklist on the install screen. */
.il-files-label { font-size: 12px; color: var(--text-faint); margin: 16px 0 8px; }
.il-files { display: flex; flex-direction: column; gap: 8px; }
.il-file {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-rail); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; transition: border-color 0.14s, opacity 0.14s;
}
.il-file:hover { border-color: var(--accent-deep); }
.il-file.off { opacity: 0.5; }
.il-file-main { display: flex; align-items: flex-start; gap: 11px; flex: 1; min-width: 0; cursor: pointer; }
.il-file input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; }
.il-file-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.il-file-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.il-file-tag {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: var(--accent);
  background: var(--accent-soft); border: 1px solid rgba(251,146,60,0.3); border-radius: 999px; padding: 1px 7px;
}
.il-file-label { font-size: 13px; font-weight: 600; color: var(--text); }
.il-exist { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 999px; padding: 1px 7px; }
.il-exist.new { color: var(--ok); border: 1px solid rgba(92,191,106,0.4); }
.il-exist.replace { color: var(--accent); border: 1px solid rgba(251,146,60,0.4); }
.il-exist.custom { color: var(--text-dim); border: 1px solid var(--line); }
.il-file-path {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--text-dim);
  word-break: break-all; display: block;
}
.il-file-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.il-reset {
  background: none; border: none; color: var(--text-faint); font-family: var(--sans);
  font-size: 11.5px; cursor: pointer; padding: 0; text-decoration: underline;
}
.il-reset:hover { color: var(--accent); }
.il-inline-link {
  background: none; border: none; color: var(--accent); font-family: var(--sans);
  font-size: inherit; cursor: pointer; padding: 0; text-decoration: underline;
}
.il-inline-link:hover { color: var(--accent-deep); }

@media (max-width: 1080px) {
  .finish-options, .modtype-grid { grid-template-columns: 1fr; }
  .il-row { grid-template-columns: 1fr; gap: 4px; }
  .il-file { flex-wrap: wrap; }
  .il-file-actions { flex-direction: row; align-items: center; padding-left: 27px; }
}

/* ---------- 3D models (static meshes) ---------- */
.pill-wip { color: #1a1206; background: var(--accent); border-color: var(--accent); }
.mt-tile.is-wip .pill-wip { vertical-align: middle; }
.mesh-kind-grid { max-width: 740px; }

.mesh-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mesh-row {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.mesh-row:hover { border-color: var(--accent-deep); background: var(--panel-2); }
.mesh-row.selected { border-color: var(--cat-c, var(--accent)); background: color-mix(in srgb, var(--cat-c, var(--accent)) 12%, transparent); }
.mesh-thumb {
  flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.mesh-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mesh-row-title { font-weight: 600; color: var(--text); }
.mesh-row-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.mesh-row-tags { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.mesh-path {
  font-size: 10.5px; color: var(--text-faint); font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--field); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}

.mesh-detail-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--text-faint); padding: 26px 10px; font-size: 13px; }
.mesh-detail-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--accent); font-weight: 700; }
.mesh-detail-title { margin: 4px 0 12px; font-size: 18px; color: var(--text); }
.mesh-detail-title .tex-tag { vertical-align: middle; }
.mesh-detail-id { font-size: 12.5px; color: var(--text-dim); margin: -8px 0 2px; }
.mesh-detail-file { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--text-faint); margin: 0 0 12px; word-break: break-all; }
.mesh-detail-desc { font-size: 13px; color: var(--text-dim); margin: 14px 0; line-height: 1.5; }
.mesh-tip {
  display: flex; gap: 9px; align-items: flex-start;
  background: rgba(251, 146, 60, 0.07); border: 1px solid rgba(251, 146, 60, 0.22);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 14px;
}
.mesh-tip-ico { flex: 0 0 auto; font-size: 13px; line-height: 1.5; }
.mesh-tip-text { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.mesh-layout { grid-template-columns: minmax(0, 1fr) 460px; position: relative; min-height: 100%; }
.mesh-layout > .cat-main { position: relative; z-index: 1; }
.mesh-layout > .cat-side { z-index: 1; } /* keep the sticky position from .cat-side */
/* The ambient wireframe backdrop. Pinned to the stage (it lives outside the
   scrolling .panel in index.html), so it fills the visible area and never
   scrolls with the cards. Fades in via .show when a mesh is mounted. */
.stage-mesh-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 0.45s ease;
  mask-image: radial-gradient(150% 150% at 52% 50%, #000 58%, transparent 100%);
  -webkit-mask-image: radial-gradient(150% 150% at 52% 50%, #000 58%, transparent 100%);
}
.stage-mesh-bg.show { opacity: 0.16; }
.stage-mesh-bg canvas { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .stage-mesh-bg.show { opacity: 0.1; } }
.mesh-preview {
  border-radius: var(--radius-sm); border: 1px dashed var(--line);
  background: radial-gradient(120% 90% at 50% 18%, rgba(251,146,60,0.07), transparent 70%), var(--field);
  min-height: 380px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mesh-preview canvas { width: 100%; height: 100%; display: block; }
.mesh-preview-ph { display: flex; flex-direction: column; align-items: center; gap: 7px; opacity: 0.85; }
.mesh-preview-cap { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.mesh-preview-sub { font-size: 11px; color: var(--text-faint); }
.mesh-meta { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.mesh-meta-row { display: flex; flex-direction: column; gap: 3px; }
.mesh-meta-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); }
.mesh-meta-row code { font-size: 11px; color: var(--text-dim); word-break: break-all; font-family: ui-monospace, Menlo, Consolas, monospace; }
.mesh-meta-row span:not(.mesh-meta-k) { font-size: 12.5px; color: var(--text-dim); }
.wip-callout { margin-top: 22px; max-width: 660px; }

/* Mesh-kind chooser modal (shown when 3D models is selected) */
.mesh-kind-modal { max-width: 560px; }
.mesh-kind-options { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.mesh-kind-opt {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.mesh-kind-opt:not(:disabled):hover { border-color: var(--accent); background: var(--panel); transform: translateY(-1px); }
.mesh-kind-opt.is-soon { opacity: 0.55; cursor: not-allowed; }
.mesh-kind-ico { flex: 0 0 auto; width: 40px; height: 40px; }
.mesh-kind-ico svg { width: 100%; height: 100%; }
.mesh-kind-text { display: flex; flex-direction: column; gap: 4px; }
.mesh-kind-title { font-weight: 700; color: var(--text); font-size: 15px; }
.mesh-kind-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }

/* 3D preview viewport overlay */
.mesh-preview { position: relative; }
/* Full-screen toggle (top-left; the Solid/Wire toggle owns the top-right). */
.mesh-fs-btn {
  position: absolute; top: 10px; left: 10px;
  background: rgba(15,15,15,0.62); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1;
  padding: 5px 9px; backdrop-filter: blur(3px);
  transition: background 0.15s, color 0.15s;
}
.mesh-fs-btn:hover { color: var(--text); }
/* Fill-the-window mode: a fixed overlay over the app (not browser fullscreen).
   z-index above the splash (100), so nothing in the app can sit over it. */
.mesh-preview.mesh-vp-full {
  position: fixed; inset: 0; z-index: 120;
  /* Neutralise the slot's box rules: aspect-ratio would otherwise BEAT the
     bottom inset (height = viewport width), pushing the box off-screen. */
  aspect-ratio: auto; min-height: 0;
  background: var(--bg, #16130f); border-radius: 0; border: none;
}
/* FLIP transition applied around expand/collapse (see meshViewer). */
.mesh-fs-anim { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mesh-preview-tag {
  position: absolute; left: 10px; bottom: 9px; pointer-events: none;
  font-size: 10.5px; color: var(--text-dim); background: rgba(15,15,15,0.6);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
  letter-spacing: 0.02em; backdrop-filter: blur(3px);
}

/* Compact 3-up mesh grid */
.mesh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.mesh-card {
  display: flex; flex-direction: row; align-items: center; gap: 13px;
  padding: 12px; width: 100%; min-width: 0; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.mesh-card:hover { border-color: var(--cat-c, var(--accent)); transform: translateY(-1px); background: var(--panel-2); }
.mesh-card.selected { border-color: var(--cat-c, var(--accent)); background: color-mix(in srgb, var(--cat-c, var(--accent)) 14%, transparent); }
.mesh-card-thumb {
  width: 62px; height: 62px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  border-right: 1px solid var(--line); padding-right: 13px; margin-right: 2px;
}
.mesh-card-thumb.has-thumb svg { display: none; }
.mesh-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mesh-card-title {
  font-weight: 600; font-size: 13px; color: var(--text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mesh-card-file {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; color: var(--text-faint);
  background: var(--field); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1180px) { .mesh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Multi-part meshes: a small grid badge + a coming-soon note in the detail panel */
.mesh-card-badge {
  align-self: flex-start; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-dim); background: rgba(120,120,130,0.16); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px;
}
.mesh-card.is-multi { opacity: 0.82; }
.mesh-card.is-multi.selected { opacity: 1; }
.mesh-multi-banner {
  margin: 0 0 12px; padding: 11px 13px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  color: var(--text-dim); background: rgba(251,146,60,0.10); border: 1px solid rgba(251,146,60,0.4);
}
.mesh-multi-banner .pill { margin: 0 8px 0 0; vertical-align: middle; }
.mesh-multi-banner strong { color: var(--text); }

/* ---- Texture step ---- */
.btn-soft {
  font: inherit; font-size: 13px; color: var(--text); background: var(--panel2, #26262b);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; cursor: pointer;
}
.btn-soft:hover { border-color: var(--accent); }
.btn-link { font: inherit; font-size: 12px; color: var(--text-dim); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 2px 0; }
.btn-link:hover { color: var(--accent); }
.tex-slots { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 14px; max-width: 760px; }
.tex-slot {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  background: var(--panel, #1d1d21); border: 1px solid var(--line); border-radius: 10px;
}
.tex-slot-main { flex: 1 1 auto; min-width: 0; }
.tex-slot-head { display: flex; align-items: center; gap: 4px; }
.tex-slot-role { font-weight: 600; font-size: 14px; color: var(--text); }
.tex-slot-hint { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.tex-slot-path { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: var(--text-faint); margin-top: 5px; word-break: break-all; }
.tex-slot-action { flex: 0 0 auto; }
.tex-slot-picked { display: flex; align-items: center; gap: 10px; }
.tex-pick-name { font-size: 12px; color: var(--accent); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tex-step-foot { font-size: 13px; color: var(--text-dim); max-width: 760px; }
.tex-swapped { color: var(--accent); }

/* texture step: two-column layout with a live preview */
.tex-layout { display: flex; gap: 26px; align-items: flex-start; margin-top: 16px; }
.tex-main { flex: 1 1 auto; min-width: 0; }
.tex-main .callout { max-width: none; margin-bottom: 16px; }
.tex-main .tex-slots { max-width: none; }
.tex-preview-col { flex: 0 0 320px; position: sticky; top: 18px; }
.tex-preview-box {
  width: 320px; height: 320px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 18%, #24242a 0%, #18181b 70%);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.tex-preview-box .mesh-prev-ph { opacity: 0.4; }
.seg-toggle { display: flex; margin-top: 12px; background: var(--field, #161618); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 3px; }
.seg-toggle .seg {
  flex: 1 1 0; font: inherit; font-size: 13px; color: var(--text-dim); background: none; border: 0;
  border-radius: 6px; padding: 7px 0; cursor: pointer;
}
.seg-toggle .seg:hover:not(:disabled) { color: var(--text); }
.seg-toggle .seg.active { background: var(--accent); color: #1a1206; font-weight: 600; }
.seg-toggle .seg:disabled { opacity: 0.4; cursor: default; }
.tex-normal-row { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
.tex-normal-row input { accent-color: var(--accent); }
.tex-preview-note { margin-top: 10px; font-size: 11.5px; color: var(--text-faint); line-height: 1.5; }
@media (max-width: 900px) { .tex-layout { flex-direction: column; } .tex-preview-col { position: static; flex-basis: auto; } }

/* map rows */
.tex-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.tex-row { display: flex; gap: 14px; align-items: flex-start; padding: 13px 15px; background: var(--panel, #1d1d21); border: 1px solid var(--line); border-radius: 11px; }
.tex-row-thumb {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 8px; background-size: cover; background-position: center;
  background-color: var(--field, #161618); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--text-faint);
}
.tex-row-thumb.has-img { border-color: var(--accent); }
.tex-row-main { flex: 1 1 auto; min-width: 0; }
.tex-row-head { display: flex; align-items: center; gap: 7px; }
.tex-row-label { font-weight: 600; font-size: 14px; color: var(--text); }
.tex-tag { font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(251,146,60,0.5); border-radius: 4px; padding: 1px 5px; }
.tex-newmap { font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; cursor: help; }
.tex-row-short { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.tex-what { margin-top: 7px; }
.tex-what > summary { font-size: 12px; color: var(--accent); cursor: pointer; list-style: none; user-select: none; }
.tex-what > summary::-webkit-details-marker { display: none; }
.tex-what > summary::before { content: '› '; }
.tex-what[open] > summary::before { content: '⌄ '; }
.tex-what-body { font-size: 12px; color: var(--text-dim); line-height: 1.55; margin-top: 6px; padding-left: 4px; border-left: 2px solid var(--line); padding-left: 10px; }
.tex-what-img { max-width: 100%; border-radius: 8px; margin-top: 8px; border: 1px solid var(--line); }
.tex-what-cap { font-size: 11px; color: var(--text-faint); margin-top: 5px; }
.tex-row-path { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10px; color: var(--text-faint); margin-top: 6px; word-break: break-all; }
.tex-row-action { flex: 0 0 auto; padding-top: 2px; }

/* ---- Build step: "test in your game" card ---- */
.test-card {
  max-width: 760px; margin: 22px 0 0; padding: 16px 18px;
  background: var(--panel, #1d1d21); border: 1px solid var(--line); border-radius: 12px;
}
/* Build step: pre-flight checks (~2/3) beside the test card (~1/3) */
.build-grid { display: flex; gap: 20px; align-items: stretch; margin-top: 26px; }
.build-grid .mesh-checks-wrap { flex: 2 1 0; min-width: 0; margin-top: 0; }
.build-grid .build-test-col { flex: 1 1 0; min-width: 0; }
.build-grid .build-test-col .test-card { max-width: none; margin: 0; height: 100%; box-sizing: border-box; }
@media (max-width: 920px) { .build-grid { flex-direction: column; } }
.test-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.test-card-ico { font-size: 22px; line-height: 1; }
.test-card-title { font-weight: 700; font-size: 15px; color: var(--text); }
.test-card-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); margin-top: 1px; }
.test-card-note { font-size: 13px; color: var(--text-dim); margin: 0 0 10px; }
.test-card-sub { font-size: 12px; color: var(--text-faint); margin: 10px 0 0; line-height: 1.5; }
.test-card-sub code, .test-cmd code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.test-cmd {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--field, #161618); border: 1px solid var(--line); border-radius: 8px;
}
.test-cmd code { flex: 1 1 auto; font-size: 13px; color: var(--text); }
.test-card kbd {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--text);
  background: var(--panel2, #26262b); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px;
}

/* Solid / wireframe view toggle (overlay, top-right of the preview) */
.mesh-view-toggle {
  position: absolute; top: 10px; right: 10px; display: inline-flex; gap: 2px;
  background: rgba(15,15,15,0.62); border: 1px solid var(--line); border-radius: 999px; padding: 2px;
  backdrop-filter: blur(3px);
}
.mesh-view-toggle button {
  border: none; background: transparent; color: var(--text-dim); cursor: pointer;
  font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 999px; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.mesh-view-toggle button:hover { color: var(--text); }
.mesh-view-toggle button.on { background: var(--accent); color: #1a1205; }

/* Browse-all: search, counts, load-more */
.mesh-search-row { position: relative; margin: 16px 0 4px; max-width: 520px; }
.mesh-search-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); display: flex; pointer-events: none; }
.mesh-search {
  width: 100%; box-sizing: border-box; padding: 10px 14px 10px 38px;
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); font-size: 13px; font-family: var(--sans);
}
.mesh-search:focus { outline: none; border-color: var(--accent); }
.mesh-search::placeholder { color: var(--text-faint); }
.cat-count {
  display: inline-block; margin-left: 5px; font-size: 10.5px; font-weight: 600;
  color: var(--text-faint); background: rgba(255,255,255,0.06); border-radius: 999px; padding: 1px 7px;
}
.cat-tab.active .cat-count { color: var(--chip); background: color-mix(in srgb, var(--chip) 18%, transparent); }
.mesh-more { margin-top: 20px; display: flex; justify-content: center; }
.mesh-load-more {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--panel-2); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 18px 8px 9px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
}
.mesh-load-more:hover { color: var(--text); border-color: var(--accent); background: var(--panel); transform: translateY(-1px); }
.mesh-load-more:active { transform: none; }
.mlm-plus {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(251, 146, 60, 0.14); color: var(--accent);
  font-size: 17px; line-height: 1; font-weight: 700;
}
.mesh-load-more:hover .mlm-plus { background: rgba(251, 146, 60, 0.22); }
.mlm-sub { color: var(--text-faint); font-weight: 500; font-size: 12px; }
.mlm-sub::before { content: "·"; margin-right: 8px; }
#mesh-load-more { width: 100%; }

/* Mesh upload step */
.chosen-chip { display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; }
.chosen-chip-ico { width: 30px; height: 30px; display: flex; flex: none; }
.chosen-chip-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chosen-chip-name { font-weight: 600; color: var(--text); }
.chosen-chip-sub { font-size: 11.5px; color: var(--text-dim); font-family: ui-monospace, Menlo, monospace; }
.mesh-compare { margin-top: 20px; max-width: 460px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.cmp-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; }
.cmp-k { color: var(--text-dim); }
.cmp-v { color: var(--text); font-family: ui-monospace, Menlo, monospace; }
.cmp-flag { font-size: 12.5px; margin-top: 2px; }
.cmp-flag.ok { color: var(--ok); }
.cmp-flag.warn { color: var(--danger); }
.spinner.sm { width: 12px; height: 12px; border-width: 2px; display: inline-block; }
.guide-card { margin-top: 22px; max-width: 460px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; }
.guide-card-body strong { color: var(--text); }
.guide-card-body p { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 6px 0 12px; }
.guide-card-msg { font-size: 12px; margin-top: 10px; word-break: break-all; }

/* Mesh upload — right-hand preview empty state (matches texture preview card) */
.mesh-side-preview { margin-bottom: 14px; }
.side-preview-empty { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 28px 22px; text-align: center; color: var(--text-dim); }
.side-preview-empty svg { opacity: 0.5; margin-bottom: 10px; }
.side-preview-title { font-size: 14px; font-weight: 700; color: var(--text); }
.side-preview-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.side-preview-empty p { font-size: 12px; line-height: 1.5; margin: 10px 0 0; color: var(--text-faint); }
.chosen-chip.is-bad { border-color: var(--danger); opacity: 0.85; }

/* Auto-scale toggle inside the fit box */
.cmp-toggle { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
.cmp-toggle input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* Over-the-limit error — a creative stat readout */
.mesh-limit { margin-top: 18px; max-width: 720px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: var(--radius-sm); padding: 16px 18px; }
.mesh-limit-head { display: flex; align-items: center; gap: 9px; }
.mesh-limit-head strong { color: var(--text); }
.mesh-limit-ico { color: var(--danger); font-size: 16px; }
.mesh-limit p { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 8px 0; }
.mesh-limit-stats { display: flex; gap: 10px; margin: 14px 0 6px; }
.mls { flex: 1; background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.mls-n { display: block; font-size: 20px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.mls-l { display: block; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }
.mls.over { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.mls.over .mls-n { color: var(--danger); }
.mesh-limit-tip { font-size: 12px; color: var(--text-faint); }

/* Build-step pre-flight checks */
.mesh-checks-wrap { margin-top: 26px; }
.mesh-checks { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--panel); font-size: 13px; color: var(--text-dim); }
.check-ico { flex: none; width: 20px; text-align: center; font-size: 14px; }
.check-row.ok .check-ico { color: var(--ok); }
.check-row.warn .check-ico { color: var(--danger); }
.check-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.check-title { color: var(--text); font-weight: 600; }
.check-detail { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.check-detail code { font-size: 11px; word-break: break-all; }


/* Hero: once the live render loads, drop the placeholder glyph */
.fh-thumb.has-thumb .fh-ph { display: none; }
/* The upload step shares the same pinned .stage-mesh-bg backdrop */
.mesh-file-layout { position: relative; min-height: 100%; }
.mesh-file-layout > .file-main { position: relative; z-index: 1; }
.mesh-file-layout > .file-side { z-index: 1; } /* keep the sticky position from .file-side */

/* Check row right-side action (e.g. "Replace associated textures") */
.check-action { margin-left: auto; flex: none; align-self: center; padding-left: 18px; }
/* Chosen-mesh chip + "Choose a different file" sit together, button right after the chip */
.chosen-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chosen-row .chosen-chip { margin: 0; }
.chosen-row #m-clear { white-space: nowrap; flex: none; }

/* Detail slider (mesh decimation control) */
.detail-slider { display: flex; flex-direction: column; gap: 8px; }
.ds-row { display: flex; align-items: baseline; justify-content: space-between; }
.ds-label { font-size: 13px; font-weight: 600; color: var(--text); }
.ds-val { font-family: var(--mono, monospace); font-size: 13px; color: var(--accent); }
.ds-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--line); outline: none; }
.ds-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--accent); }
.ds-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--panel); }
.ds-ends { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.ds-help { font-size: 11px; color: var(--text-dim); line-height: 1.45; }

/* LOD mesh preview + modes */
.lod-figure { margin: 14px 0 4px; }
.lod-figure-img { height: 200px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--field) center/contain no-repeat; display: flex; align-items: center; justify-content: center; }
.lod-figure figcaption { margin-top: 8px; font-size: 12px; color: var(--text-dim); }
.lod-figure-none { font-size: 13px; color: var(--text-faint); }
.lodp-count { font-family: var(--mono, monospace); color: var(--accent); }
.lod-cards { margin-top: 6px; }
.lod-cards .toggle-rec { margin-left: 6px; }
.lod-custom { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.lod-slot { display: flex; align-items: center; gap: 12px; background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.lod-slot-label { font-size: 12px; font-weight: 600; color: var(--text-dim); min-width: 96px; }
.lod-slot-file { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lod-slot-file .name { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }