/* Spoolara Armory — modular stylesheet entry.
   Import order matters: tokens → base → primitives → composed surfaces. */
/* ---------------------------------------------------------------------------
   Design tokens — the single source of truth for the Spoolara Armory theme.
   A premium, dark, violet-lit "showroom" palette inspired by the reference.
--------------------------------------------------------------------------- */
:root {
  /* Surfaces — anchored to the official brand near-black (#05050a).
     Panels keep a touch of glass, but stay mostly opaque so scene content
     behind toolbars does not wash out labels and controls. */
  --bg: #05050a;
  --bg-2: #0b0a16;
  --panel: rgba(14, 12, 26, 0.92);
  --panel-2: rgba(22, 19, 36, 0.9);
  --panel-solid: #14121f;
  --panel-strong: rgba(16, 13, 28, 0.94);
  --field-bg: rgba(9, 8, 15, 0.72);

  /* Borders & lines */
  --panel-border: rgba(124, 90, 240, 0.26);
  --panel-border-strong: rgba(132, 100, 245, 0.5);
  --hairline: rgba(255, 255, 255, 0.1);

  /* Text */
  --text: #ece9f6;
  --text-dim: #b7b2cd;
  /* Faint is for chrome labels, not body copy — keep it above the glass wash. */
  --text-faint: #8a84a5;

  /* Brand accents — official Spoolara gradient #683be2 → #4c16ba.
     `--accent-rgb` powers every translucent glow so the whole theme
     retunes from a single source of truth. */
  --accent-rgb: 104, 59, 226;
  --accent: #683be2;
  --accent-bright: #7c4df0;
  --accent-deep: #4c16ba;
  --accent-soft: rgba(var(--accent-rgb), 0.16);
  --accent-2: #4fd6c6;
  --danger: #e2596b;

  /* The signature brand gradient, reusable across marks, bars, and fills. */
  --brand-gradient: linear-gradient(145deg, #683be2, #4c16ba);

  /* Glows */
  --glow: rgba(var(--accent-rgb), 0.55);
  --glow-soft: rgba(var(--accent-rgb), 0.28);

  /* Geometry */
  --radius-lg: 18px;
  --radius: 12px;
  --radius-sm: 8px;

  /* Elevation */
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 18px 44px rgba(0, 0, 0, 0.5);

  /* Motion — shared easings & durations so every surface animates consistently.
     `--ease-spring` gives a lively, slightly overshooting feel on entrances and
     active states; `--ease-out` is the calm default for hover/press. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.14s;
  --dur: 0.22s;
  --dur-slow: 0.4s;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}
/* ---------------------------------------------------------------------------
   Base reset + app shell layout (the layered canvas + UI overlay).
--------------------------------------------------------------------------- */
/* Scoped under .armory-root (the host mount container) so Armory never owns
   html/body/#root or leaks a bare `*` / `button` reset into the host app. */
.armory-root,
.armory-root *,
.armory-root *::before,
.armory-root *::after {
  box-sizing: border-box;
}
.armory-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
.armory-root button {
  font-family: inherit;
  cursor: pointer;
}
/* App shell — the 3D canvas sits behind a pointer-transparent UI overlay. */
.app {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(var(--accent-rgb), 0.1), transparent 60%),
    var(--bg);
}
.canvas-layer {
  position: absolute;
  inset: 0;
}
/* A faint vignette to focus the showroom centre, matching the reference. */
.canvas-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 42%, transparent 52%, rgba(4, 3, 9, 0.66) 100%);
}
.ui-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  animation: fade-in var(--dur-slow) var(--ease-out) both;
  /* TopNav · drawers (flex) · dock-row. The drawers row must
     take the flexible space so tall editor panels stay bounded and scroll,
     rather than overflowing off-screen. */
  grid-template-rows: auto auto 1fr auto;
}
.ui-layer > * {
  pointer-events: auto;
}
/* Generic scrollbar styling for any scrollable surface. */
.scroll::-webkit-scrollbar,
.panel-body::-webkit-scrollbar {
  width: 8px;
}
.scroll::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
}
.divider {
  height: 1px;
  background: var(--hairline);
  margin: 2px 0;
}
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.muted {
  color: var(--text-faint);
  font-size: 12px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Directional entrances for the framing chrome (drawers, side dock, toolbar). */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* A breathing violet halo used to draw the eye to the active tool / selection. */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5), 0 6px 18px rgba(var(--accent-rgb), 0.35);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0), 0 6px 22px rgba(var(--accent-rgb), 0.5);
  }
}
/* A soft dot pulse for status indicators. */
@keyframes dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0);
  }
}
/* Sweeping highlight for active nav tabs / primary buttons. */
@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
/* Gentle vertical float for hero / empty-state glyphs. */
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
/* Respect users who prefer reduced motion — keep state changes but drop the
   looping / large-movement animations so nothing distracts or nauseates. */
@media (prefers-reduced-motion: reduce) {
  .armory-root,
  .armory-root *,
  .armory-root *::before,
  .armory-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ---------------------------------------------------------------------------
   Reusable primitives: buttons, inputs, sliders, segmented controls,
   swatches, badges, toast.
--------------------------------------------------------------------------- */
/* ---------- Buttons ---------- */
.btn {
  border: 1px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.btn:hover {
  border-color: var(--panel-border-strong);
  background: rgba(var(--accent-rgb), 0.12);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn:disabled:hover {
  transform: none;
}
.btn.primary:hover,
.btn.accent:hover {
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.5);
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.36);
}
.btn.primary:hover {
  background: var(--accent-bright);
}
.btn.accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  border: none;
  color: #fff;
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}
/* A light sweep that fires once on hover for the two emphasis buttons. */
.btn.primary,
.btn.accent {
  position: relative;
  overflow: hidden;
}
.btn.primary::after,
.btn.accent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  opacity: 0;
  pointer-events: none;
}
.btn.primary:hover::after,
.btn.accent:hover::after {
  opacity: 1;
  animation: shimmer 1.1s var(--ease-out);
}
/* Consistent, accessible keyboard focus ring across interactive chrome. */
.btn:focus-visible,
.icon-btn:focus-visible,
.text-btn:focus-visible,
.chrome-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--accent-rgb), 0.65);
}
.btn.ghost {
  background: transparent;
}
.btn.danger:hover {
  border-color: var(--danger);
  background: rgba(226, 89, 107, 0.12);
  color: var(--danger);
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn.sm {
  padding: 6px 10px;
  font-size: 12px;
}
.btn.block {
  width: 100%;
}
.btn-row {
  display: flex;
  gap: 8px;
}
.btn-row > .btn {
  flex: 1;
}
/* ---------- Icon button ---------- */
.icon-btn {
  border: none;
  background: transparent;
  color: var(--text-faint);
  padding: 4px;
  border-radius: 6px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Compact plain-text action button (replaces icon-only toggles, e.g. Lock). */
/*
 * The resting colour is --text-dim, not --text-faint: at faint an enabled
 * .text-btn and a disabled one were the same colour, so both read as dead —
 * reported as "the clear mask and select detail edges buttons are greyed out".
 * Only genuinely disabled ones dim now.
 */
.text-btn {
  border: 1px solid rgba(126, 107, 194, 0.3);
  background: transparent;
  color: var(--text-dim);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.text-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: rgba(126, 107, 194, 0.6);
}
.text-btn:disabled {
  color: var(--text-faint);
  border-color: rgba(126, 107, 194, 0.15);
  cursor: default;
}
.text-btn.active {
  color: #ffd9a0;
  border-color: rgba(255, 180, 84, 0.5);
  background: rgba(255, 180, 84, 0.08);
}
.icon-btn:hover {
  color: var(--danger);
  background: rgba(226, 89, 107, 0.12);
}
/* Round chrome icon button used in the top bar. */
.chrome-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--panel-border);
  background: rgba(15, 13, 27, 0.46);
  backdrop-filter: blur(14px) saturate(130%);
  color: var(--text-dim);
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
}
.chrome-btn:hover {
  color: var(--text);
  border-color: var(--panel-border-strong);
  background: rgba(var(--accent-rgb), 0.14);
}
/* ---------- Sliders ---------- */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) var(--pct, 50%), rgba(255, 255, 255, 0.1) var(--pct, 50%));
  outline: none;
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* ---------- Text / number inputs ---------- */
.num-input {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 6px 7px;
  outline: none;
}
.num-input:focus {
  border-color: var(--accent);
}
.num-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
select.num-input {
  cursor: pointer;
}
.num-input.tiny {
  width: 62px;
  padding: 3px 6px;
  text-align: right;
}
.text-input {
  width: 100%;
  background: var(--field-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 8px 9px;
  outline: none;
}
.text-input::placeholder {
  color: var(--text-faint);
}
.text-input:focus {
  border-color: var(--accent);
}
/* ---------- Segmented control ---------- */
.segmented {
  display: flex;
  background: var(--field-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}
.segmented button {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all 0.12s ease;
}
.segmented button.active {
  background: var(--accent);
  color: #fff;
}
/* A pill toggle (units / display modes). */
.pill-toggle {
  display: flex;
  background: var(--field-bg);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.pill-toggle button {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.pill-toggle button:hover:not(.active):not(:disabled) {
  color: var(--text);
}
.pill-toggle button:active:not(:disabled) {
  transform: scale(0.94);
}
.pill-toggle button.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.4);
  animation: pop-in 0.2s var(--ease-spring);
}
/* ---------- Swatches ---------- */
.swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.swatch:hover {
  transform: scale(1.1);
}
.swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}
/* ---------- Badge ---------- */
.badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-2);
  background: rgba(79, 214, 198, 0.12);
  padding: 3px 9px;
  border-radius: 20px;
}
/* ---------- Toast ---------- */
.toast {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(24, 20, 40, 0.92), rgba(16, 13, 28, 0.92));
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid var(--panel-border-strong);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.12),
    0 6px 24px rgba(var(--accent-rgb), 0.2);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  animation: slide-up 0.3s var(--ease-spring) both;
}
.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent-2);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
/* ---------------------------------------------------------------------------
   Editor panel cards and their internals (measurements, library, inspector,
   export). These render inside the slide-in drawers of the new shell.
--------------------------------------------------------------------------- */
.panel {
  width: 340px;
  max-height: 100%;
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-panel);
}
.panel.avatar-panel {
  width: 455px;
  max-width: min(455px, calc(100vw - 24px));
}
.panel.no-header .panel-body {
  padding-top: 10px;
}
.import-card {
  border-radius: var(--radius-sm);
}
.import-dropzone {
  border: 1px dashed var(--panel-border-strong);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.16), rgba(20, 18, 36, 0.4));
  padding: 14px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 7px;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.import-dropzone:hover {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.24), rgba(20, 18, 36, 0.44));
}
.import-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  color: var(--accent-bright);
}
.import-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
}
.import-sub {
  font-size: 11px;
  color: var(--text-dim);
}
.panel-header {
  padding: 16px 18px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline);
}
.panel-body {
  padding: 14px 18px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel-footer {
  border-top: 1px solid var(--hairline);
  padding: 10px 12px 12px;
  background: #131025;
  flex-shrink: 0;
}
.avatar-panel-section {
  border: 1px solid rgba(131, 107, 212, 0.33);
  border-radius: 11px;
  background: #131025;
  padding: 10px 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.avatar-panel-section-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: #ebe8f8;
  display: flex;
  align-items: center;
  gap: 7px;
}
.avatar-panel-index {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  background: #0e0d19;
  color: #bbb4d4;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.avatar-field-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.avatar-loading-note {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 10px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  font-size: 12px;
  color: var(--text);
}
.avatar-loading-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.avatar-loading-copy strong {
  font-size: 12px;
  font-weight: 700;
}
.avatar-loading-copy span {
  font-size: 11px;
  color: var(--text-dim);
}
.avatar-loading-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.avatar-loading-steps li {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.avatar-loading-steps li.is-active {
  color: var(--accent-bright);
}
.avatar-loading-steps li.is-done {
  color: var(--accent-2);
}
.avatar-loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #4fd6c6;
  border-radius: 50%;
  animation: avatar-spin 0.75s linear infinite;
  flex-shrink: 0;
}
@keyframes avatar-spin {
  to {
    transform: rotate(360deg);
  }
}
.avatar-field-label {
  font-size: 12px;
  color: #a69fc5;
}
.avatar-chip-toggle {
  display: flex;
  gap: 4px;
  background: #0d0c18;
  border: 1px solid rgba(126, 107, 194, 0.3);
  border-radius: 8px;
  padding: 3px;
}
.avatar-chip-toggle button {
  flex: 1;
  border: none;
  border-radius: 6px;
  padding: 7px 8px;
  background: transparent;
  color: #aea8c8;
  font-size: 12px;
  font-weight: 600;
}
.avatar-chip-toggle button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: #fff;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35);
}
.avatar-chip-toggle.compact {
  width: 100%;
}
.avatar-chip-toggle.units {
  width: 86px;
  margin-left: auto;
  flex: 0 0 auto;
}
.avatar-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  flex-wrap: wrap;
}
.avatar-section-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}
/*
 * `compact` means full width in a toolbar row of its own, but a header shares its
 * line with a title and with every other toggle, so a chip there is sized by its
 * own label and gives way before the row runs past the panel edge.
 */
.avatar-section-header-actions .avatar-chip-toggle {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  padding: 2px;
}
.avatar-section-header-actions .avatar-chip-toggle button {
  padding: 6px 9px;
  white-space: nowrap;
}
.avatar-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.avatar-type-card {
  position: relative;
  border: 1px solid rgba(122, 108, 183, 0.33);
  border-radius: 10px;
  background: linear-gradient(180deg, #121224, #0e0e1c);
  color: #b4aecf;
  padding: 6px 4px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.18s ease;
  overflow: hidden;
}
.avatar-type-card:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  transform: translateY(-1px);
}
.avatar-type-card.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(20, 17, 36, 0.6));
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.45), 0 8px 18px rgba(var(--accent-rgb), 0.18);
  color: #fff;
}
.avatar-type-card:disabled {
  cursor: default;
  opacity: 0.78;
  transform: none;
}
.avatar-type-card.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--accent-rgb), 0.28),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
  pointer-events: none;
}
/* Image thumbnail of the mannequin pose. The PNGs ship with a dark background
   so we let them fill the slot edge-to-edge and blend into the card. */
.avatar-type-figure {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 7px;
  background: radial-gradient(120% 80% at 50% 30%, rgba(255, 255, 255, 0.04), transparent 70%),
    #0a0814;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.avatar-type-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The portrait subject sits high; pull the framing down so the head fits. */
  object-position: center 22%;
  display: block;
  filter: brightness(1.04) contrast(1.04);
  transition: filter 0.18s ease, transform 0.18s ease;
}
.avatar-type-card:hover .avatar-type-figure img {
  filter: brightness(1.12) contrast(1.06);
  transform: scale(1.03);
}
.avatar-type-card.active .avatar-type-figure img {
  filter: brightness(1.18) contrast(1.08) saturate(1.05);
}
.avatar-type-name {
  text-transform: capitalize;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.avatar-toolbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatar-measure-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.avatar-measure-group-title {
  display: flex;
  align-items: center;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #4fd6c6;
  text-transform: uppercase;
  letter-spacing: 0.65px;
}
.avatar-measure-group-title.is-toggle {
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
  gap: 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  text-align: left;
}
.avatar-measure-group-title.is-toggle:hover {
  color: #7eecd9;
}
.avatar-measure-group-title.is-toggle:focus-visible {
  outline: 1px solid #4fd6c6;
  outline-offset: 2px;
  border-radius: 4px;
}
.avatar-measure-caret {
  margin-left: auto;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.16s ease;
}
.avatar-measure-group-title.is-open .avatar-measure-caret {
  transform: rotate(180deg);
}
.avatar-finger-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0 6px 2px;
}
.avatar-finger-name {
  font-size: 11px;
  font-weight: 700;
  color: #aea8c8;
  letter-spacing: 0.4px;
}
.avatar-measure-note {
  margin: 4px 0 2px;
  font-size: 11px;
  line-height: 1.5;
  color: #8b95a3;
}
/* Zone-editor: a wrap of clickable body-zone chips. */
.avatar-zone-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}
.avatar-zone-chip {
  border: 1px solid rgba(126, 107, 194, 0.3);
  border-radius: 7px;
  padding: 5px 9px;
  background: #0d0c18;
  color: #aea8c8;
  font-size: 11.5px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.avatar-zone-chip:hover {
  border-color: rgba(126, 107, 194, 0.6);
  color: #e7e2ff;
}
.avatar-zone-chip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  border-color: transparent;
  color: #fff;
}
.link-btn {
  border: none;
  background: transparent;
  color: #6ff3e4;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.link-btn:hover {
  text-decoration: underline;
}
/* Imported-parts type filter chips + grouping. */
.parts-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0;
}
.parts-filter-chip {
  border: 1px solid rgba(126, 107, 194, 0.3);
  border-radius: 999px;
  padding: 3px 9px;
  background: #0d0c18;
  color: #aea8c8;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.parts-filter-chip:hover {
  border-color: rgba(126, 107, 194, 0.6);
  color: #e7e2ff;
}
.parts-filter-chip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  border-color: transparent;
  color: #fff;
}
.parts-filter-chip.add {
  border-style: dashed;
  color: #8fd9cd;
}
/* A set chip is two controls in one pill: the name filters, the × deletes. */
.set-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(126, 107, 194, 0.3);
  border-radius: 999px;
  background: #0d0c18;
  overflow: hidden;
}
.set-chip.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  border-color: transparent;
}
.set-chip-name {
  border: none;
  background: transparent;
  color: #aea8c8;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 4px 3px 9px;
  cursor: pointer;
}
.set-chip.active .set-chip-name,
.set-chip.active .set-chip-x {
  color: #fff;
}
.set-chip-x {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  color: #7d7699;
  padding: 3px 7px 3px 3px;
  cursor: pointer;
}
.set-chip-x:hover {
  color: #ff9aa8;
}
.set-name-input {
  background: #0d0c18;
  color: #e7e2ff;
  border: 1px dashed rgba(126, 107, 194, 0.6);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 600;
  width: 120px;
}
.set-name-input.grow {
  flex: 1;
  min-width: 0;
}
/* Grouping / colour controls above the parts list. */
.parts-tool-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.parts-tool-row .btn.active {
  border-color: rgba(255, 180, 84, 0.5);
  color: #ffd9a0;
}
/* What the ticked parts can be done to, shown only while some are ticked. */
.parts-selection-row {
  padding: 5px 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.08);
}
.parts-selection-count {
  font-size: 11px;
  font-weight: 600;
  color: #e7e2ff;
  margin-right: auto;
}
.parts-assign-select {
  background: #0d0c18;
  color: #e7e2ff;
  border: 1px solid rgba(126, 107, 194, 0.3);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11px;
  max-width: 130px;
}
/* The focused group's own controls, inside the parts card. */
.group-panel {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 6px 0;
  padding: 8px;
  border: 1px solid rgba(126, 107, 194, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.group-panel.is-editing {
  border-color: rgba(255, 180, 84, 0.5);
  background: rgba(255, 180, 84, 0.06);
}
.group-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-panel-head .assembly-group-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 12px;
  color: #e7e2ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-panel-head .muted {
  font-size: 11px;
}
.parts-assign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 2px;
  font-size: 11px;
  color: #aea8c8;
}
.parts-assign-row select {
  flex: 0 0 auto;
  background: #0d0c18;
  color: #e7e2ff;
  border: 1px solid rgba(126, 107, 194, 0.3);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11px;
}
.parts-group + .parts-group {
  margin-top: 6px;
}
.parts-group-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #6f6a89;
  padding: 4px 2px 2px;
}
.modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(6, 5, 12, 0.66);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}
/* ---------- Import dialog ---------- */
.asset-dialog {
  width: min(1024px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #14111f;
  border: 1px solid #322a4d;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  padding: 20px;
}
.asset-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.asset-dialog-title {
  font-size: 16px;
  font-weight: 700;
  color: #f1edff;
}
.asset-dialog-sub {
  margin-top: 2px;
  font-size: 12px;
  color: #9a92be;
}
.asset-dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
/* One column once the preview would be too narrow to inspect anything in. */
@media (max-width: 860px) {
  .asset-dialog-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.asset-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.asset-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #d8d2f0;
}
.asset-section-hint {
  font-size: 11px;
  color: #7d76a0;
}
.asset-preview-stage {
  aspect-ratio: 1;
  border: 1px solid #2a2440;
  border-radius: 10px;
  overflow: hidden;
  background: #08070d;
}
.asset-preview-note {
  margin-top: 8px;
  font-size: 11px;
  color: #7d76a0;
}
.asset-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asset-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.asset-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #9a92be;
}
.asset-input,
.asset-select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #322a4d;
  border-radius: 8px;
  background: #0e0c18;
  color: #f1edff;
  font-size: 13px;
  font-family: inherit;
}
.asset-input:focus,
.asset-select:focus {
  outline: none;
  border-color: var(--accent-bright);
}
.asset-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  color: #9a92be;
  font-variant-numeric: tabular-nums;
}
.asset-hint {
  font-size: 11.5px;
  color: #7d76a0;
  font-variant-numeric: tabular-nums;
}
/* Second heading inside the details column ("Where it goes"), which needs a rule
   above it to read as a new question rather than one more field of the last one. */
.asset-section-split {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #322a4d;
}
/* Side / Mount, which are the same two-state choice as the fit card's. */
.asset-dialog .pill-toggle.wide {
  width: 100%;
}
.asset-dialog .pill-toggle.wide button {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-dialog-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.avatar-measure-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 62px 22px;
  gap: 7px;
  align-items: center;
  position: relative;
  padding: 2px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  transition: background 120ms ease, box-shadow 120ms ease;
}
/* Zone ring rows carry inline +/- steppers, so drop the trailing 22px column. */
.avatar-measure-row.avatar-section-row {
  /* Last column holds a real circumference ("15.2 in" / "104.5 cm"), not a %. */
  grid-template-columns: 148px minmax(0, 1fr) 74px;
}
.avatar-section-control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.avatar-section-control input[type='range'] {
  flex: 1 1 auto;
  min-width: 0;
}
.avatar-section-step {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: #e7e2ff;
  background: #17152a;
  border: 1px solid rgba(120, 104, 184, 0.4);
  border-radius: 5px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.avatar-section-step:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.25);
  border-color: var(--accent-bright);
}
.avatar-section-step:disabled {
  opacity: 0.35;
  cursor: default;
}
.avatar-measure-row.is-focused {
  background: rgba(var(--accent-rgb), 0.16);
  box-shadow: inset 2px 0 0 var(--accent-bright), 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}
.avatar-measure-row.is-active {
  background: rgba(79, 214, 198, 0.14);
  box-shadow: inset 2px 0 0 #4fd6c6, 0 0 0 1px rgba(79, 214, 198, 0.32);
}
.avatar-measure-row.is-focused.is-active {
  background: rgba(var(--accent-rgb), 0.22);
  box-shadow: inset 2px 0 0 #c4b5fd, 0 0 0 1px rgba(196, 181, 253, 0.45);
}
.avatar-measure-row.is-focused .avatar-measure-label,
.avatar-measure-row.is-active .avatar-measure-label {
  color: #f1edff;
  font-weight: 600;
}
.avatar-measure-label {
  font-size: 12px;
  color: #d5d0e8;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
.avatar-value-input {
  width: 62px;
  text-align: right;
  background: #0e0d1a;
  border-color: rgba(120, 104, 184, 0.35);
  color: #f0edff;
  font-size: 11px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.avatar-unit-label {
  font-size: 11px;
  color: #7f7898;
  white-space: nowrap;
}
.avatar-update-btn {
  min-height: 38px;
  justify-content: space-between;
  font-size: 14px;
  letter-spacing: 0.2px;
  border-radius: 9px;
  padding: 9px 14px;
}
.avatar-panel input[type='range'] {
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) var(--pct, 50%), rgba(255, 255, 255, 0.14) var(--pct, 50%));
}
.avatar-panel input[type='range']::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
}
/* ---------- Measurement / control groups ---------- */
.group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.field-label {
  font-size: 12.5px;
  color: var(--text-dim);
}
.field-value {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.field-entry {
  display: flex;
  align-items: center;
  gap: 5px;
}
.field-unit {
  font-size: 11.5px;
  color: var(--text-faint);
  min-width: 16px;
}
.field.focused {
  background: rgba(255, 180, 84, 0.1);
  border-radius: 8px;
  padding: 6px 8px;
  margin: 0 -8px;
  box-shadow: inset 0 0 0 1px rgba(255, 180, 84, 0.4);
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
}
.toggle-row input {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.fit-note {
  font-size: 11.5px;
  /* --text-faint disappears into the dark glass panels; dim is the floor for
     anything meant to be read as a sentence. */
  color: var(--text-dim);
  line-height: 1.5;
}
/* How-to copy stays behind a one-word toggle — open only when asked. */
.instructions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.instructions-toggle {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(79, 214, 198, 0.45);
}
.instructions-toggle:hover {
  color: #7fe6d8;
  text-decoration-color: rgba(127, 230, 216, 0.7);
}
.instructions.is-open .instructions-toggle {
  color: var(--text);
  text-decoration-color: rgba(236, 233, 246, 0.35);
}
.instructions-body {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
  width: 100%;
}
.instructions-body p,
.instructions-body .fit-note {
  margin: 0 0 6px;
  color: inherit;
}
.instructions-body p:last-child,
.instructions-body .fit-note:last-child {
  margin-bottom: 0;
}
.instructions-body b,
.instructions-body strong {
  color: var(--text);
  font-weight: 700;
}
.hint {
  color: var(--text-faint);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  padding: 30px 16px;
}
.hint .big {
  font-size: 26px;
  display: block;
  margin-bottom: 10px;
}
/* ---------- Library grid ---------- */
.lib-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lib-card {
  background: var(--field-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  transition: all 0.15s ease;
}
.lib-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.lib-card .cat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent-2);
  font-weight: 700;
}
.lib-card .name {
  font-size: 13px;
  font-weight: 600;
}
.lib-thumb {
  height: 46px;
  border-radius: 6px;
  background: radial-gradient(circle at 40% 30%, rgba(var(--accent-rgb), 0.4), rgba(79, 214, 198, 0.12));
  display: grid;
  place-items: center;
  font-size: 20px;
}
/* ---------- STL kit browser ---------- */
.kit-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kit-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kit-group-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.12s ease;
}
.kit-group-toggle:hover {
  border-color: var(--panel-border-strong);
}
.kit-group-toggle svg {
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.kit-group-toggle svg.closed {
  transform: rotate(-90deg);
}
.kit-group-toggle span:first-of-type {
  flex: 1;
  text-align: left;
}
.kit-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 8px;
  border-radius: 20px;
}
.kit-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 0 6px 6px;
}
.kit-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--field-bg);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: left;
}
.kit-item:hover {
  border-color: var(--accent);
  color: var(--text);
}
.kit-item-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kit-heavy {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #ffb454;
  background: rgba(255, 180, 84, 0.14);
  padding: 1px 6px;
  border-radius: 20px;
}
.kit-tris {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  min-width: 34px;
  text-align: right;
}
/* ---------- Parts list ---------- */
.part-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--field-bg);
  cursor: pointer;
  transition: all 0.12s ease;
}
.part-item:hover {
  border-color: var(--panel-border-strong);
}
.part-item.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.part-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.part-meta {
  flex: 1;
  min-width: 0;
}
.part-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.part-region {
  font-size: 11px;
  color: var(--text-faint);
}
/* ---------- Inspector ---------- */
.inspector-section {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.inspector-section:last-child {
  border-bottom: none;
}
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.transform-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 6px 7px;
  align-items: center;
}
.transform-grid .axis-label {
  font-size: 12px;
  color: var(--text-dim);
}
.xyz-head {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  padding-left: 2px;
}
.xyz-head span {
  text-align: center;
}
.dim-readout {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  background: var(--field-bg);
  border-radius: 6px;
  padding: 8px 10px;
}
.dim-readout b {
  color: var(--text);
}
/* Read-outs on the Inspect view — label on the left, value on the right. The
   fitting controls that used to fill this space are in the Assets view. */
.spec-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  background: var(--field-bg);
  border-radius: 6px;
  padding: 8px 10px;
}
.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.spec-row dt {
  color: var(--text-dim);
}
.spec-row dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* ---------- Avatar model selector ---------- */
.model-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 4px;
}
.model-chip {
  border: 1px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.model-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}
.model-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* ---------- Fine-tune sections ---------- */
.section-row {
  display: grid;
  grid-template-columns: 18px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
}
.section-value {
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* ---------- Hands & gloves ---------- */
.finger-tabs {
  display: flex;
  gap: 4px;
  margin: 10px 0 6px;
}
.finger-chip {
  flex: 1;
  border: 1px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 2px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.finger-chip:hover {
  border-color: var(--accent);
  color: var(--text);
}
.finger-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* ---------- Saved bodies (profiles) ---------- */
.profile-save-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.profile-save-row .text-input {
  flex: 1;
  min-width: 0;
}
.profile-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.profile-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--field-bg);
}
.profile-row.active {
  border-color: var(--accent);
}
.profile-load {
  flex: 1;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
}
.profile-load:hover {
  background: rgba(255, 255, 255, 0.05);
}
.profile-row.active .profile-load {
  color: var(--accent);
}
.profile-del {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  padding: 0 10px;
  cursor: pointer;
}
.profile-del:hover {
  color: var(--danger);
  background: rgba(226, 89, 107, 0.12);
}
/* ---------------------------------------------------------------------------
   Application shell — the always-on showroom chrome that frames the 3D scene:
   top navigation, projects panel, category dock, recent assets, drawers.
   This is the layer that gives the app its "Spoolara Armory" look.
--------------------------------------------------------------------------- */
/* ===================== Top navigation ===================== */
.topnav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  pointer-events: none;
  background: #090a12;
  border-bottom: 1px solid #24203a;
  min-height: 52px;
}
.topnav > * {
  pointer-events: auto;
}
.glass {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(16px) saturate(135%);
  box-shadow: var(--shadow-float);
}
.back-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  border: 1px solid #3a335d;
  color: #cfc8e6;
  background: #171425;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.back-chip:hover {
  border-color: rgba(var(--accent-rgb), 0.48);
  color: #fff;
}
.logo-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  pointer-events: auto;
}
.logo-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #4f4480;
  background: linear-gradient(160deg, #2c1f54, #120e22);
  border-radius: 9px;
  padding: 6px 12px 6px 8px;
  color: #ebe4ff;
  min-width: 140px;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.logo-chip:hover {
  border-color: var(--panel-border-strong);
  box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.28);
  transform: translateY(-1px);
}
.logo-chip:active {
  transform: translateY(0);
}
.logo-chip:hover .logo-chip-icon img {
  transform: rotate(-8deg) scale(1.06);
}
.spoolara-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #9a92be;
  text-decoration: none;
  transition: color 0.15s ease;
}
.spoolara-link:hover {
  color: #c9bdff;
}
.logo-chip-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.55));
}
.logo-chip-icon img {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform var(--dur) var(--ease-spring);
}
.logo-chip-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.logo-main {
  font-size: 12px;
  font-weight: 700;
}
.logo-sub {
  margin-top: 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #bfb2ea;
}
/* Brand dropdown */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius);
  padding: 7px 10px;
  color: var(--text);
  position: relative;
  min-width: 180px;
  justify-content: flex-start;
}
.brand:hover {
  border-color: var(--panel-border-strong);
}
.brand-logo {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.5);
  flex-shrink: 0;
}
.brand-name {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.brand-caret {
  color: var(--text-faint);
  transition: transform 0.18s ease;
}
.brand.open .brand-caret {
  transform: rotate(180deg);
}
.brand-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  border-radius: var(--radius);
  padding: 6px;
  z-index: 70;
  animation: pop-in 0.14s ease;
}
.brand-menu button {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-menu button:hover {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--text);
}
/* Nav tab cluster */
.nav-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 8px;
  padding: 2px;
  min-width: 560px;
  flex: 1;
}
.nav-tab {
  border: none;
  background: transparent;
  color: #ada7c6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-tab.is-loading {
  color: var(--text);
}
.nav-tab-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent-2);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}
.nav-tab.active {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: #fff;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.55);
  animation: pop-in 0.25s var(--ease-spring);
}
/* A slow highlight sweep across the active tab to draw the eye. */
.nav-tab.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmer 2.8s var(--ease-in-out) infinite;
  pointer-events: none;
}
.nav-tab svg {
  transition: transform var(--dur) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);
  opacity: 0.55;
}
.nav-tab.active svg {
  opacity: 1;
}
.nav-tab:hover svg {
  transform: scale(1.14);
  opacity: 1;
}
.nav-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--accent-rgb), 0.6);
}
.topnav-right {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}
/* Quiet "your work is recoverable" chip fed by the background auto-save. */
.autosave-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  white-space: nowrap;
  cursor: default;
}
.topnav-icon {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #a9a3c4;
  display: grid;
  place-items: center;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.topnav-icon:hover {
  color: var(--text);
  background: #25203e;
  transform: translateY(-1px);
}
.topnav-icon:active {
  transform: scale(0.92);
}
.topnav-icon svg {
  transition: transform var(--dur) var(--ease-spring);
}
/* Undo/redo/reset/capture icons nudge in a direction that hints their action. */
.topnav-icon[title*='Undo']:hover svg {
  transform: rotate(-22deg);
}
.topnav-icon[title*='Redo']:hover svg {
  transform: rotate(22deg);
}
.topnav-icon[title*='Recenter']:hover svg,
.topnav-icon[title*='Reset']:hover svg {
  transform: rotate(-360deg);
}
.topnav-icon[title='Settings']:hover svg {
  transform: rotate(90deg);
}
.topnav-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.avatar-chip {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.5);
  cursor: pointer;
}
.avatar-chip.mini {
  width: 28px;
  height: 28px;
  font-size: 10px;
  border-width: 1px;
}
/* ===================== Bottom band ===================== */
/* The three bottom clusters float over the showroom in fixed corners/centre
   (like the reference) rather than sharing a flow row — so a narrow viewport
   can't push them into each other or off-screen. */
.dock-row {
  position: relative;
  pointer-events: none;
}
.dock-left,
.dock-center,
.dock-right {
  position: fixed;
  bottom: 18px;
  pointer-events: auto;
  z-index: 20;
}
.dock-left {
  left: 18px;
}
.dock-right {
  right: 18px;
}
/* ---------- Floating card (projects / recent assets) ---------- */
.float-card {
  width: 268px;
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: pop-in 0.2s ease;
}
.float-card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.card-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--accent-bright);
  background: none;
  border: none;
  cursor: pointer;
}
.card-link:hover {
  color: var(--accent);
  text-decoration: underline;
}
/* ---------- Saved Avatars (Avatar-view, right drawer slot) ---------- */
/* Lives inside the pointer-events:none .drawers row, so re-enable events. It needs
   no clearance of its own for the Section/Pose rail: the rail measures
   this column and sits to the left of it, the same as it does for the Inspector. */
.drawers .saved-avatars-panel {
  pointer-events: auto;
  animation: slide-in-right 0.3s var(--ease-out) both;
}
.saved-avatars-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saved-avatars-select {
  flex: 1;
  min-width: 0;
  appearance: none;
  padding: 9px 30px 9px 12px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--panel-border);
  background:
    var(--panel-2, #14121f)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23a9a3c4' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E")
    no-repeat right 11px center;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.saved-avatars-select:hover {
  border-color: var(--accent);
}
.saved-avatars-delete {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.saved-avatars-delete:hover {
  color: #ff6b81;
  background: rgba(255, 107, 129, 0.12);
}
.saved-avatars-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
}
/* ---------- My projects ---------- */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Cap the list so a long save history can't grow the card off-screen. */
  max-height: 208px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.project-list::-webkit-scrollbar {
  width: 6px;
}
.project-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
.project-empty {
  margin: 2px 0 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim, rgba(255, 255, 255, 0.45));
}
.project-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--field-bg);
  cursor: pointer;
  transition: all 0.14s ease;
  text-align: left;
  width: 100%;
}
.project-row:hover {
  border-color: var(--panel-border-strong);
  background: rgba(var(--accent-rgb), 0.1);
}
.project-row.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.project-thumb {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: linear-gradient(140deg, rgba(var(--accent-rgb), 0.4), rgba(79, 214, 198, 0.16));
  border: 1px solid var(--panel-border);
  color: #fff;
}
.project-meta {
  flex: 1;
  min-width: 0;
}
.project-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 2px;
}
.project-sub .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-faint);
}
/* ---------- Centre column (toolbar above dock) ---------- */
.dock-center {
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* ---------- Viewport toolbar ---------- */
.viewport-dock {
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 16px 14px;
}
.viewport-dock > * {
  pointer-events: auto;
}
.viewport-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius);
  padding: 6px 8px;
  max-width: calc(100vw - 80px);
  overflow-x: auto;
  animation: slide-up 0.34s var(--ease-spring) both;
}
/* "Selected: <name> · W·H·D" chip sitting at the head of the toolbar when a
   part is selected. Mirrors the measurement-pin aesthetic so the toolbar feels
   like a continuation of the in-scene labels above the avatar. */
.vp-selected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px 4px 9px;
  margin-right: 2px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.08));
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  color: var(--text);
  font-size: 11.5px;
  line-height: 1;
  max-width: 280px;
}
.vp-selected-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25);
  flex-shrink: 0;
  animation: dot-pulse 2s var(--ease-in-out) infinite;
}
.vp-selected-dot.locked {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
  animation: none;
}
.vp-selected-name {
  font-weight: 700;
  letter-spacing: 0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.vp-selected-dims {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vp-btn.accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.36);
}
.vp-btn.accent:hover {
  filter: brightness(1.08);
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: #fff;
}
.vp-btn.accent:disabled {
  background: rgba(var(--accent-rgb), 0.25);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  cursor: not-allowed;
}
.vp-btn,
.vp-icon {
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vp-btn {
  padding: 7px 11px;
}
.vp-icon {
  width: 34px;
  height: 34px;
  justify-content: center;
}
.vp-btn:hover,
.vp-icon:hover {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.14);
  transform: translateY(-1px);
}
.vp-btn:active,
.vp-icon:active {
  transform: translateY(0) scale(0.96);
}
/* Reset-camera icon takes a satisfying full spin on hover. */
.vp-icon:hover svg {
  transition: transform var(--dur-slow) var(--ease-spring);
}
.vp-icon[title='Reset camera']:hover svg {
  transform: rotate(-360deg);
}
.vp-btn.active,
.vp-icon.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.4);
}
.vp-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vp-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.vp-icon.danger:hover {
  color: var(--danger);
  background: rgba(226, 89, 107, 0.14);
}
.vp-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 2px;
  background: var(--hairline);
}
/* ---------- Recent assets ---------- */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.asset-thumb {
  aspect-ratio: 1;
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(40, 36, 60, 0.9), rgba(18, 16, 28, 0.9));
  border: 1px solid var(--panel-border);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.14s ease;
}
.asset-thumb:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.3);
}
/* ===================== Editor drawers ===================== */
/* The middle grid row hosts slide-in editor panels on either side. Pointer
   events fall through to the 3D canvas except over the panel cards. */
.drawers {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 9px;
  gap: 18px;
  min-height: 0;
  pointer-events: none;
}
/* Each side wrapper stretches to the drawers row height; min-height:0 lets the
   panel inside cap at 100% and scroll its body instead of overflowing. */
.drawers > div {
  display: flex;
  align-items: flex-start;
  min-height: 0;
  max-height: 100%;
}
/* Mesh Sculpt is an `.asset-card`, not a `.panel`, and it rides in this column
   under the Inspector — without this it is drawn over the canvas but every click
   goes straight through it to the viewport behind. */
.drawers .panel,
.drawers .asset-card {
  pointer-events: auto;
}
/* An asset card gets its width from the Assets grid it was designed for. Here
   there is no grid, so it takes whatever the flex row gives it — 838 px in a
   1440 px window, laid out across the middle of the viewport and over the figure
   it exists to sculpt. Match the Inspector it sits beside, and scroll rather
   than run off the bottom of the row. */
.drawers .asset-card {
  width: 340px;
  flex: 0 0 340px;
  max-height: 100%;
  overflow-y: auto;
}
/* Left editor drawer slides in from the left edge; the right-hand Inspector
   slides in from the right — so each panel animates toward its home side. */
.drawers > div:first-child .panel {
  animation: slide-in-left 0.3s var(--ease-out) both;
}
.drawers > div:last-child .panel {
  animation: slide-in-right 0.3s var(--ease-out) both;
}
/* ===================== In-scene labels (drei <Html>) ===================== */
.display-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  user-select: none;
  white-space: nowrap;
}
.display-index {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: rgba(190, 178, 230, 0.9);
  letter-spacing: 1px;
}
.display-sep {
  font-size: 18px;
  font-weight: 500;
  color: rgba(190, 178, 230, 0.45);
}
.display-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(232, 228, 244, 0.82);
}
/* Side-wall sample-model labels (interactive showcase). */
.showcase-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  user-select: none;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(12, 9, 22, 0);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.showcase-label .display-name {
  color: rgba(232, 228, 244, 0.7);
  transition: color 0.18s ease;
}
.showcase-label.is-hovered {
  background: rgba(20, 15, 36, 0.78);
  box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.32);
}
.showcase-label.is-hovered .display-name {
  color: #fff;
}
.showcase-cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c4b5fd;
  padding-left: 4px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.showcase-label.is-hovered .showcase-cta {
  opacity: 1;
  transform: translateX(0);
}
/* Saved-body plinths in the back side-nooks. */
.nook-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  user-select: none;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 9px;
  background: rgba(12, 9, 22, 0.6);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.nook-label .nook-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(232, 228, 244, 0.82);
}
.nook-label.is-active .nook-name {
  color: #ffd9a0;
}
.nook-label .nook-cta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c4b5fd;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.nook-label.is-hovered {
  background: rgba(20, 15, 36, 0.85);
  box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.32);
}
.nook-label.is-hovered .nook-cta {
  opacity: 1;
}
.neon-sign {
  display: flex;
  align-items: center;
  gap: 16px;
  user-select: none;
  white-space: nowrap;
}
.neon-logo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: #e6d8ff;
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.95))
    drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.8));
}
.neon-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.neon-title {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #ecd9ff;
  text-shadow:
    0 0 6px rgba(var(--accent-rgb), 0.95),
    0 0 18px rgba(var(--accent-rgb), 0.9),
    0 0 40px rgba(var(--accent-rgb), 0.6);
}
.neon-sub {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 12px;
  margin-top: 4px;
  color: #c9b6ff;
  text-shadow:
    0 0 6px rgba(var(--accent-rgb), 0.8),
    0 0 16px rgba(var(--accent-rgb), 0.6);
}
/* ===================== Measurement pins (3D overlay) ===================== */
.measure-pin {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 9px 6px;
  border-radius: 7px;
  background: rgba(14, 12, 26, 0.92);
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.25),
    0 4px 18px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(var(--accent-rgb), 0.45);
  color: #f1edff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  font: inherit;
  cursor: default;
}
.measure-pin.is-clickable {
  cursor: pointer;
  pointer-events: auto;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.measure-pin.is-clickable:hover {
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 6px 22px rgba(var(--accent-rgb), 0.55),
    0 0 26px rgba(255, 255, 255, 0.2);
}
.measure-pin-title {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #cdbfff;
  line-height: 1;
}
.measure-pin-value {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  line-height: 1.1;
}
.measure-pin.is-highlight {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45),
    0 6px 22px rgba(var(--accent-rgb), 0.55),
    0 0 26px rgba(255, 255, 255, 0.35);
}
.measure-pin.is-highlight .measure-pin-title {
  color: #ffffff;
}
/* Gentle entrance as pins pop in with the overlay. */
.measure-pin {
  animation: measure-pin-in 240ms var(--ease-out) both;
}
@keyframes measure-pin-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Editable pins advertise the affordance: a dotted value underline plus a
   faint pencil caret that fades in on hover. */
.measure-pin.is-editable .measure-pin-value {
  text-decoration: underline dotted rgba(205, 191, 255, 0.5);
  text-underline-offset: 2px;
}
.measure-pin.is-editable .measure-pin-value::after {
  content: '✎';
  margin-left: 5px;
  font-size: 9px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.measure-pin.is-editable:hover .measure-pin-value::after {
  opacity: 0.75;
}
/* Focused / hovered pin breathes so it reads as the live target. */
.measure-pin.is-highlight {
  animation: measure-pin-pulse 2s var(--ease-in-out) infinite;
}
@keyframes measure-pin-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.45),
      0 6px 22px rgba(var(--accent-rgb), 0.55),
      0 0 22px rgba(255, 255, 255, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.6),
      0 6px 26px rgba(var(--accent-rgb), 0.7),
      0 0 32px rgba(255, 255, 255, 0.42);
  }
}
/* ---- Inline editor ---- */
.measure-pin.is-editing {
  pointer-events: auto;
  cursor: default;
  gap: 3px;
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 6px 22px rgba(var(--accent-rgb), 0.6),
    0 0 26px rgba(var(--accent-rgb), 0.5);
}
.measure-pin-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.measure-pin-input {
  width: 46px;
  padding: 2px 4px;
  border-radius: 5px;
  border: 1px solid rgba(var(--accent-rgb), 0.7);
  background: rgba(7, 6, 14, 0.85);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.measure-pin-input:focus {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.45);
}
.measure-pin-unit {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #cdbfff;
}
.measure-pin-step {
  width: 16px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.14);
  color: #e9e2ff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out);
}
.measure-pin-step:hover {
  background: rgba(var(--accent-rgb), 0.32);
  color: #fff;
}
.measure-pin-step:active {
  transform: scale(0.9);
}
/* ===================== Drop overlay ===================== */
.drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 13, 0.8);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 50;
  border: 3px dashed var(--accent);
  pointer-events: none;
}
.drop-overlay .inner {
  text-align: center;
  color: var(--text);
}
.drop-overlay .big {
  font-size: 46px;
  margin-bottom: 12px;
  color: var(--accent-bright);
}
/* ===================== Branded loading splash ===================== */
.brand-loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 34%, rgba(var(--accent-rgb), 0.16), transparent 62%),
    var(--bg);
  animation: fade-in var(--dur) var(--ease-out);
  transition: opacity var(--dur-slow) var(--ease-out);
  user-select: none;
}
.brand-loader.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.brand-loader-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.28), transparent 70%);
  filter: blur(30px);
  animation: pulse-halo 3.2s var(--ease-in-out) infinite;
}
@keyframes pulse-halo {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
.brand-loader-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.brand-loader-mark {
  width: 96px;
  height: 96px;
  display: block;
  filter: drop-shadow(0 0 26px rgba(var(--accent-rgb), 0.75));
  animation: float-y 3.4s var(--ease-in-out) infinite;
}
.brand-loader-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.brand-loader-main {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--text);
}
.brand-loader-sub {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  color: var(--accent-bright);
}
.brand-loader-bar {
  position: relative;
  width: 220px;
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.brand-loader-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--brand-gradient);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.7);
  transition: width var(--dur) var(--ease-out);
}
.brand-loader-status {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--text-dim);
}
.brand-loader.is-work {
  background:
    radial-gradient(120% 90% at 50% 34%, rgba(var(--accent-rgb), 0.22), transparent 62%),
    rgba(5, 5, 10, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
}
.brand-loader-orbit {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.12) inset;
  animation: loader-orbit 9s linear infinite;
}
.brand-loader-orbit-2 {
  width: 340px;
  height: 340px;
  border-style: dashed;
  opacity: 0.55;
  animation-duration: 14s;
  animation-direction: reverse;
}
.brand-loader-mark-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
}
.brand-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent-bright);
  border-right-color: var(--accent-2);
  animation: splash-spin 1.1s linear infinite;
}
.brand-loader-title {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.brand-loader-steps {
  list-style: none;
  margin: 4px 0 2px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 240px;
}
.brand-loader-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-faint);
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.brand-loader-step.is-active {
  color: var(--text);
  transform: translateX(2px);
}
.brand-loader-step.is-done {
  color: var(--accent-2);
}
.brand-loader-step-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.brand-loader-step.is-active .brand-loader-step-mark {
  border-color: rgba(var(--accent-rgb), 0.7);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45);
}
.brand-loader-step.is-done .brand-loader-step-mark {
  background: rgba(79, 214, 198, 0.16);
  border-color: rgba(79, 214, 198, 0.55);
  color: var(--accent-2);
}
.brand-loader-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.brand-loader-step.is-active .brand-loader-step-dot {
  background: var(--accent-bright);
  animation: dot-pulse 1.2s var(--ease-in-out) infinite;
}
.brand-loader-bar {
  position: relative;
  overflow: hidden;
}
.brand-loader-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes loader-orbit {
  to {
    transform: rotate(360deg);
  }
}
/* Compact in-viewport loader — gender / body type / tab. Lives on the canvas
   layer so nav and side panels stay visible. */
.canvas-loader {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: end center;
  padding: 0 24px 96px;
  pointer-events: none;
  background: transparent;
  animation: fade-in var(--dur) var(--ease-out);
  transition: opacity var(--dur) var(--ease-out);
}
.canvas-loader.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.canvas-loader.is-cover {
  place-items: center;
  padding: 0;
  pointer-events: auto;
  background: rgba(5, 5, 10, 0.62);
  backdrop-filter: blur(8px);
}
.canvas-loader-card {
  pointer-events: auto;
  min-width: 220px;
  max-width: 280px;
  padding: 16px 18px 14px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-float), 0 0 40px rgba(var(--accent-rgb), 0.22);
  backdrop-filter: blur(16px) saturate(140%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.canvas-loader-mark-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
}
.canvas-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent-bright);
  border-right-color: var(--accent-2);
  animation: splash-spin 0.95s linear infinite;
}
.canvas-loader-mark {
  width: 32px;
  height: 32px;
  display: block;
  filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.65));
}
.canvas-loader-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.canvas-loader-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.canvas-loader-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
}
.canvas-loader-step.is-active {
  color: var(--text);
}
.canvas-loader-step.is-done {
  color: var(--accent-2);
}
.canvas-loader-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.canvas-loader-step.is-active .canvas-loader-dot {
  background: var(--accent-bright);
  animation: dot-pulse 1.2s var(--ease-in-out) infinite;
}
.canvas-loader-bar {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.canvas-loader-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: var(--brand-gradient);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.65);
  transition: width var(--dur) var(--ease-out);
}
.canvas-loader-status {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .brand-loader-glow,
  .brand-loader-mark {
    animation: none;
  }
  .brand-loader-orbit,
  .brand-loader-ring,
  .brand-loader-fill::after,
  .brand-loader-step.is-active .brand-loader-step-dot,
  .canvas-loader-ring,
  .canvas-loader-step.is-active .canvas-loader-dot {
    animation: none;
  }
}
/* ===================================================================
   Assets workspace — the five-card layout that wraps around the
   3D canvas when `view === 'assets'`. Replaces the slide-out drawer
   pattern. Cards are glass surfaces matching the existing chrome.
   =================================================================== */
.ui-layer.is-assets {
  grid-template-rows: auto 1fr auto;
}
.assets-workspace {
  display: grid;
  grid-template-columns: 308px 1fr 332px;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    'left . right'
    'left bottom right';
  padding: 10px 12px 14px;
  gap: 12px;
  min-height: 0;
  pointer-events: none;
}
.assets-loading {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  margin-top: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-float);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}
.assets-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  pointer-events: none;
}
/* The left column sizes its two cards with flex + internal scroll (measurements
   list / parts list each scroll inside their card), so it fits the column.
   The right column is a simple stack of fixed-height cards — when there are
   more than fit, the whole column scrolls and each card keeps its full height
   (never compressing / clipping its own content). */
.assets-col-left {
  grid-area: left;
}
.assets-col-right {
  grid-area: right;
  overflow: hidden auto;
  padding: 0 4px;
  margin: 0 -4px;
}
.assets-col-right > * {
  flex: 0 0 auto;
}
.assets-col-right::-webkit-scrollbar {
  width: 8px;
}
.assets-col-right::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.3);
  border-radius: 8px;
}
/* Section Analysis / Pose are not numbered steps. A "Tool" tag in place of the
   number badge says so. Written here rather than into the shared panel
   components because the same panels are also launched from the stage dock in
   the other views, where there is no numbered sequence to be distinguished from. */
.assets-col .stage-panel-head::after {
  content: 'Tool';
  order: 0;
  padding: 2px 7px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.assets-col .stage-switch {
  order: 1;
}
/* Section Analysis sits under Imported Parts; keep it from growing past the
   column so the parts list still has room to scroll. */
.assets-col-left .stage-panel {
  flex: 0 0 auto;
}
.assets-bottom {
  grid-area: bottom;
  display: flex;
  justify-content: center;
  align-self: end;
  padding-bottom: 4px;
  pointer-events: none;
}
.assets-col > * {
  pointer-events: auto;
}
/* The bottom grid area is pointer-transparent so it never blocks the canvas,
   but its card must still receive clicks — mirror the `.assets-col > *` rule.
   Without this the Manual Adjustment Tools card looked enabled yet swallowed
   no clicks (its parent's `pointer-events: none` was never overridden). */
.assets-bottom > * {
  pointer-events: auto;
}
.assets-bottom.is-disabled > * {
  pointer-events: none;
}
.assets-bottom.is-disabled,
.is-disabled {
  opacity: 0.42;
  pointer-events: none;
  filter: grayscale(0.25);
  transition: opacity 160ms ease, filter 160ms ease;
}
.is-disabled .asset-card {
  box-shadow: none;
}
/* ---------------------- Ring Morph controls ---------------------- */
.ring-step-btn {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.ring-step-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.28);
  border-color: var(--accent);
}
.ring-step-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.ring-axis-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.ring-axis-toggle {
  flex: 0 0 auto;
}
/* ---------------------- Card chrome ---------------------- */
.asset-card {
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(18px) saturate(140%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  min-height: 0;
  animation: pop-in 0.22s ease;
  overflow: hidden;
}
.asset-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), transparent);
  flex-shrink: 0;
}
.asset-card-index {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-bright);
  font-size: 10.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.asset-card-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text);
  flex: 1;
  text-align: left;
}
/* The header toggle spans the whole header row so clicking anywhere (except the
   extra controls) collapses/expands the card. */
.asset-card-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
/* Always-open cards (e.g. Imported Parts) keep the header layout but drop the
   caret and the click-to-collapse affordance. */
.asset-card.is-fixed .asset-card-toggle {
  cursor: default;
}
.asset-card-caret {
  display: grid;
  place-items: center;
  color: var(--text-dim, var(--text));
  opacity: 0.7;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
/* Caret points down when expanded; rotate to point right when collapsed. */
.asset-card[data-collapsed] .asset-card-caret {
  transform: rotate(-90deg);
}
.asset-card[data-collapsed] .asset-card-header {
  border-bottom: none;
}
/* Padded body for tool cards (Feature Preservation / Mesh Tools / Body Conform)
   whose rows would otherwise sit flush against the card edges. */
.asset-card-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px 13px;
  min-height: 0;
  overflow-y: auto;
}
/* Let the body's gap own the vertical rhythm — drop the rows' own margins. */
.asset-card-body .mask-mode-row,
.asset-card-body .mask-actions {
  margin: 0;
}
/* ------------------- Adjustment tools: gizmo options ------------------- */
.gizmo-options {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 13px 12px;
  border-top: 1px solid var(--hairline);
}
.gizmo-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gizmo-option-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gizmo-option-label {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--text-dim, var(--text));
}
/*
 * A row whose control is a slider.
 *
 * Sliders are `width: 100%` everywhere else in the app, which in a flex row means
 * they claim the whole row as their natural size and squeeze the label down to a
 * few clipped letters — "Position" and "Angle" ended up underneath their own
 * sliders. Here the label gets a fixed column and the slider takes what is left.
 */
.gizmo-option-row.slider-row .gizmo-option-label {
  flex: 0 0 58px;
}
.gizmo-option-row.slider-row input[type='range'] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
/* Enough for "-90°" without the slider resizing as the number changes. */
.gizmo-option-row.slider-row .avatar-unit-label {
  flex: 0 0 auto;
  min-width: 30px;
  text-align: right;
}
.gizmo-option-row.slider-row .text-btn {
  flex: 0 0 auto;
}
.gizmo-snap-select {
  background: var(--panel-strong);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11px;
}
.gizmo-snap-select:disabled {
  opacity: 0.45;
}
.pill-toggle.sm button {
  font-size: 10.5px;
  padding: 3px 9px;
}
/* Enlarged rotation snap switch — only shown while Rotate mode is active, so we
   give it room to read clearly rather than hiding it as a tiny pill. */
.gizmo-option-row.snap-row {
  padding: 4px 6px;
  border: 1px dashed rgba(245, 158, 11, 0.45);
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.07);
}
.gizmo-option-row.snap-row .gizmo-option-label {
  font-size: 12px;
  font-weight: 700;
  color: #f7c45a;
}
.pill-toggle.snap-toggle button {
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
}
/* ---------------------- Card 1: Imported parts ---------------------- */
.parts-card {
  flex: 1 1 auto;
  min-height: 240px;
}
.import-stl-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  font-size: 10.5px;
  font-weight: 700;
  height: 24px;
}
.parts-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.parts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 16px;
  color: var(--text-dim);
  text-align: center;
  font-size: 11.5px;
  height: 100%;
  justify-content: center;
}
.parts-empty .muted {
  font-size: 10.5px;
  margin: 0;
  line-height: 1.45;
}
/* Tick box, thumbnail, name, active dot, remove. The tick box is always there —
   selecting several parts is not a mode you enter any more. */
.asset-part-row {
  display: grid;
  grid-template-columns: auto 52px 1fr auto auto;
  align-items: center;
  gap: 9px;
  padding: 7px 9px 7px 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  color: var(--text);
  cursor: pointer;
  transition: all 0.14s ease;
  text-align: left;
}
.asset-part-row > input[type='checkbox'] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: rgb(var(--accent-rgb));
  cursor: pointer;
  flex: none;
}
.asset-part-row:hover {
  background: rgba(var(--accent-rgb), 0.09);
  border-color: rgba(var(--accent-rgb), 0.22);
}
/* Ticked but not the part the tool panels are pointed at — a quieter version of
   the focused row, so a nine-part selection doesn't read as nine focused rows. */
.asset-part-row.ticked {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.asset-part-row.selected {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.10));
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.22), inset 0 0 0 1px rgba(var(--accent-rgb), 0.2);
}
.parts-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 7px 6px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.parts-select-all input[type='checkbox'] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: rgb(var(--accent-rgb));
  cursor: pointer;
}
.parts-select-all:hover {
  color: var(--text);
}
.part-thumb {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg, #1a1730, #0a0814);
  overflow: hidden;
}
.part-thumb.has-preview {
  background: radial-gradient(80% 60% at 50% 60%, rgba(var(--accent-rgb), 0.18), transparent 70%),
    linear-gradient(160deg, #16142a, #08070f);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}
.part-thumb.has-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.asset-part-row.selected .part-thumb {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.45);
}
.asset-part-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.asset-part-name {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.1px;
}
.asset-part-sub {
  font-size: 10.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
}
.asset-part-tag {
  color: var(--accent-bright);
  font-weight: 700;
  text-transform: capitalize;
}
.asset-part-active-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22), 0 0 8px rgba(var(--accent-rgb), 0.7);
}
.asset-part-kebab {
  border: none;
  background: transparent;
  color: var(--text-dim);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  transition: all 0.12s ease;
}
.asset-part-kebab:hover {
  background: rgba(226, 89, 107, 0.16);
  color: var(--danger);
}
.parts-card-footer {
  padding: 8px 13px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.parts-card-footer .muted {
  color: var(--accent-bright);
  font-weight: 700;
}
/* ---------------------- Card 3: Fit Controls ---------------------- */
.fit-card {
  /* Natural height inside the scrolling right column — never compress the Scale
     rows away. */
  flex: 0 0 auto;
}
.fit-card-empty {
  padding: 14px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}
.fit-card .fit-row {
  padding: 8px 13px;
  display: grid;
  /* minmax(0, …) lets the control column shrink below its content so wide pill
     toggles ellipsize / wrap inside the card instead of overflowing it. */
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.fit-card .fit-row.stacked {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 9px 13px 10px;
}
.fit-card .fit-row:last-child {
  border-bottom: none;
}
.fit-row-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.fit-card .pill-toggle.wide {
  width: 100%;
}
.fit-card .pill-toggle.wide button {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Auto-fit action row: primary "Auto Fit" + secondary "Fit Scale" side by side. */
.fit-auto-actions {
  display: flex;
  gap: 6px;
}
.fit-auto-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
}
.fit-spin-flips {
  display: flex;
  gap: 6px;
  padding-left: 2px;
}
.fit-spin-flips .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 8px;
}
/* Target Region quick pills — uniform icon + label grid */
.region-pill-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.region-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--text-dim);
  border-radius: 9px;
  padding: 8px 4px 6px;
  font-size: 10.5px;
  font-weight: 700;
  transition: all 0.14s ease;
}
.region-pill-icon {
  opacity: 0.75;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.region-pill-label {
  line-height: 1;
  letter-spacing: 0.01em;
}
.region-pill:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-1px);
}
.region-pill:hover:not(:disabled) .region-pill-icon {
  opacity: 1;
  transform: scale(1.08);
}
.region-pill.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff 8%), var(--accent));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 5px 14px rgba(var(--accent-rgb), 0.4);
}
.region-pill.active .region-pill-icon {
  opacity: 1;
}
.region-pill:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Custom region dropdown (hover-previewable, grouped) */
.region-select {
  position: relative;
  width: 100%;
}
.region-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--field-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 9px;
  cursor: pointer;
  transition: border-color 0.14s ease;
}
.region-select-btn:hover,
.region-select.open .region-select-btn {
  border-color: var(--accent);
}
.region-select-btn .placeholder {
  color: var(--text-dim);
  font-weight: 500;
}
.region-select-btn svg {
  flex: none;
  opacity: 0.7;
  transition: transform 0.16s ease;
}
.region-select.open .region-select-btn svg {
  transform: rotate(180deg);
}
.region-select-pop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  max-height: 280px;
  overflow-y: auto;
  z-index: 40;
  background: var(--panel-bg, #181426);
  border: 1px solid var(--panel-border-strong, var(--panel-border));
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.region-select-grouplabel {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  padding: 8px 8px 4px;
}
.region-select-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
/* Marks a place that exists on both sides, so the Side buttons under the list
   are visibly the reason it appears once rather than twice. */
.region-select-sides {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  opacity: 0.85;
}
.region-select-opt:hover .region-select-sides,
.region-select-opt.active .region-select-sides {
  color: inherit;
}
.region-select-opt:hover {
  background: rgba(55, 208, 192, 0.18);
  color: #8af4e8;
}
.region-select-opt.active {
  background: var(--accent);
  color: #fff;
}
/* Highlight when "Set Anchor Points" focused */
.assets-workspace[data-anchor='true'] .region-pill-row {
  box-shadow: 0 0 0 2px var(--accent-bright);
  border-radius: 10px;
  padding: 4px;
  margin: -4px;
  animation: anchor-pulse 1.2s ease infinite;
}
@keyframes anchor-pulse {
  50% { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.35); }
}
/* Num-stepper rows: − value + */
.num-stepper-row {
  display: grid;
  grid-template-columns: 1fr 118px;
  align-items: center;
  gap: 10px;
  padding: 1px 0;
}
.num-stepper-label {
  font-size: 11.5px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.num-stepper-icon {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-bright);
}
.num-stepper {
  display: inline-flex;
  align-items: stretch;
  height: 26px;
  background: var(--field-bg);
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  overflow: hidden;
}
.num-stepper button {
  width: 26px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  transition: all 0.12s ease;
}
.num-stepper button:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--text);
}
.num-stepper input {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.num-stepper input::-webkit-outer-spin-button,
.num-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.num-stepper input:focus {
  outline: none;
}
.num-stepper button:disabled,
.num-stepper input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* XYZ rows */
.xyz-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 7px;
}
.axis-field {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--field-bg);
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  padding: 0 7px;
  height: 28px;
}
.axis-field:focus-within {
  border-color: var(--accent);
}
.axis-tag {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
  width: 12px;
}
.axis-tag.axis-x {
  color: #ef6b75;
}
.axis-tag.axis-y {
  color: #6fdc8c;
}
.axis-tag.axis-z {
  color: #6aa9ff;
}
.axis-field input {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.axis-field input::-webkit-outer-spin-button,
.axis-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.axis-field input:focus {
  outline: none;
}
.axis-field input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* ---------------------- Card 2: Adjustment tools ---------------------- */
.tools-card {
  min-width: 440px;
  max-width: 720px;
}
.tool-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(72px, 1fr));
  gap: 4px;
  padding: 10px 12px 12px;
}
.tool-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-align: center;
  transition: all 0.15s ease;
  cursor: pointer;
}
/* The key that fires the tool, parked in the corner rather than given a row of
   its own: it is read a handful of times and then never again, which is not
   worth a third line of height on all thirteen buttons. Dim until the pointer
   is anywhere in the grid, so it teaches without competing with the labels. */
.tool-key {
  position: absolute;
  top: 3px;
  right: 4px;
  padding: 1px 3px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  opacity: 0.45;
  transition: opacity 0.15s ease, background 0.15s ease;
  pointer-events: none;
}
.tool-grid:hover .tool-key {
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.1);
}
.tool-btn:disabled .tool-key {
  opacity: 0.3;
}
.tool-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--text);
}
.tool-btn:hover:not(:disabled) .tool-icon {
  background: rgba(var(--accent-rgb), 0.28);
  color: #fff;
}
.tool-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.tool-btn.active {
  color: #fff;
}
.tool-btn.active .tool-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.42);
  animation: pulse-glow 2.4s var(--ease-in-out) infinite;
}
.tool-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 4px rgba(var(--accent-rgb), 0.55);
}
.tool-btn.focused {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text);
}
.tool-btn.focused .tool-icon {
  background: rgba(var(--accent-rgb), 0.3);
  color: #fff;
}
.tool-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.14);
  color: inherit;
  display: grid;
  place-items: center;
  transition: all 0.18s ease;
}
.tool-label {
  white-space: nowrap;
  line-height: 1.15;
}
/* ---------------------- Card 7: Export & Print ---------------------- */
.export-card {
  flex: 0 0 auto;
}
.export-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 13px 8px;
}
.export-action {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 9px 12px;
  font-size: 11.5px;
  font-weight: 700;
}
.export-action:first-child {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.36);
}
.export-action:first-child:hover:not(:disabled) {
  filter: brightness(1.08);
}
.export-action:first-child:disabled {
  background: rgba(var(--accent-rgb), 0.25);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}
.export-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 16px;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6fdc8c;
  box-shadow: 0 0 0 3px rgba(111, 220, 140, 0.18);
}
.status-dot.warn {
  background: #f5a623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}
.export-note {
  margin: 9px 13px 13px;
  padding: 8px 11px;
  background: rgba(var(--accent-rgb), 0.07);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.45;
}
/* ---------------------- Responsive ---------------------- */
@media (max-width: 1500px) {
  .assets-workspace {
    grid-template-columns: 290px 1fr 320px;
  }
  .tool-grid {
    grid-template-columns: repeat(7, minmax(70px, 1fr));
  }
}
@media (max-width: 1280px) {
  .assets-workspace {
    grid-template-columns: 260px 1fr 290px;
    gap: 10px;
  }
  .tool-btn {
    padding: 8px 4px;
  }
  .tool-icon {
    width: 30px;
    height: 30px;
  }
}
/* Feature-preservation (mask) card ------------------------------------------ */
.mask-mode-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.tool-btn.sm {
  flex: 1;
  flex-direction: row;
  justify-content: center;
  gap: 0;
  padding: 7px 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.06);
  font-size: 11px;
}
.tool-btn.sm.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
}
.mask-actions {
  display: flex;
  gap: 10px;
  margin: 8px 0 4px;
}
.mask-actions .text-btn,
.mask-actions .btn {
  flex: 1;
}
/* Hold-to-compare: reads as "actively previewing" while the pointer is down. */
.mask-compare-btn.holding {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35);
}
/* ---------------------- Mesh optimize (decimation) ---------------------- */
.mesh-optimize {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.16);
}
.mesh-optimize-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mesh-tri-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim, rgba(255, 255, 255, 0.55));
}
.mesh-tri-count.heavy {
  color: #fbbf24;
  font-weight: 600;
}
.mesh-optimize .tool-btn.sm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ---------------------- Assembly (multi-part grouping) ---------------------- */
.assembly-group {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.05);
}
.assembly-group.is-editing {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.12);
}
.tool-btn.sm.block {
  width: 100%;
  justify-content: center;
  margin: 6px 0;
}
.assembly-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.assembly-group-name {
  font-weight: 600;
  font-size: 13px;
}
.assembly-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0;
}
.assembly-row-label {
  font-size: 12px;
  color: var(--text-dim, rgba(255, 255, 255, 0.6));
}
.assembly-move {
  display: flex;
  gap: 6px;
}
.assembly-axis {
  display: flex;
  align-items: center;
  gap: 2px;
}
.assembly-axis button {
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.assembly-axis button:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.18);
}
.assembly-axis button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* --- Grouping flow: ungrouped checklist + nested children --- */
.part-thumb.sm {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex: 0 0 auto;
}
.assembly-picker {
  margin-top: 6px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.assembly-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim, rgba(255, 255, 255, 0.62));
  margin-bottom: 7px;
}
.assembly-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.assembly-pick-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.assembly-pick-row:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
}
.assembly-pick-row.selected {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.assembly-pick-row input[type='checkbox'] {
  width: 15px;
  height: 15px;
  accent-color: rgb(var(--accent-rgb));
  cursor: pointer;
  flex: 0 0 auto;
}
.assembly-pick-name,
.assembly-child-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assembly-picker-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.assembly-add-select {
  height: 30px;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  padding: 0 8px;
  font-size: 12px;
  cursor: pointer;
}
.assembly-add-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.assembly-group-head {
  align-items: center;
  gap: 8px;
}
.assembly-group-head .assembly-group-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assembly-children {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 4px 4px 22px;
}
.assembly-child-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.assembly-child-row:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
}
.assembly-child-row.selected {
  border-color: rgba(var(--accent-rgb), 0.5);
}
/* Nested assemblies in the Imported Parts list — always visible, not a
   selection-only panel. */
.assembly-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 6px;
  padding: 5px 5px 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.06);
}
.assembly-block.is-ticked {
  border-color: rgba(var(--accent-rgb), 0.32);
  background: rgba(var(--accent-rgb), 0.09);
}
.assembly-block.is-active {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.16);
}
.assembly-block.is-solo {
  border-color: rgba(255, 180, 84, 0.5);
  background: rgba(255, 180, 84, 0.07);
}
.assembly-block-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 8px;
  cursor: pointer;
}
.assembly-block-head:hover {
  background: rgba(255, 255, 255, 0.04);
}
.assembly-block-head > input[type='checkbox'] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: rgb(var(--accent-rgb));
  cursor: pointer;
}
.assembly-block-caret {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.assembly-block-caret:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.assembly-block-caret svg {
  transition: transform 0.16s ease;
}
.assembly-block-caret.is-closed svg {
  transform: rotate(-90deg);
}
.assembly-block-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.assembly-block-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #e7e2ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assembly-block-sub {
  font-size: 10.5px;
  color: var(--text-faint, #8a84a8);
  font-variant-numeric: tabular-nums;
}
.assembly-block-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.assembly-icon-btn {
  border: none;
  background: transparent;
  color: var(--text-dim);
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.assembly-icon-btn:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--text);
}
.assembly-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.assembly-empty {
  font-size: 11px;
  color: var(--text-dim);
  padding: 6px 8px 8px;
}
.asset-part-row.nested {
  grid-template-columns: auto 36px 1fr auto auto;
  padding: 5px 7px 5px 6px;
  background: rgba(0, 0, 0, 0.16);
}
.asset-part-row.nested .part-thumb {
  width: 36px;
  height: 36px;
  border-radius: 7px;
}
/* ---------------------------------------------------------------------------
   Auth surfaces — branded splash, login / register split screen.
--------------------------------------------------------------------------- */
.accent-text {
  background: linear-gradient(120deg, var(--accent-bright), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ----- Splash ----- */
.brand-splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: radial-gradient(1200px 600px at 50% -10%, #1a1233, var(--bg)) , var(--bg);
}
.brand-splash-mark {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}
.brand-splash-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), #5f44be);
  box-shadow: 0 0 30px var(--glow);
  animation: splash-pulse 1.6s var(--ease-in-out) infinite;
}
.brand-splash-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent-bright);
  border-right-color: var(--accent-2);
  animation: splash-spin 0.9s linear infinite;
}
.brand-splash-word {
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--text-dim);
}
.brand-splash-word strong {
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
}
@keyframes splash-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 22px var(--glow-soft); }
  50% { transform: scale(1.07); box-shadow: 0 0 40px var(--glow); }
}
@keyframes splash-spin {
  to { transform: rotate(360deg); }
}
/* ----- Split screen ----- */
.auth-screen {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: radial-gradient(1100px 700px at 80% 10%, #160f2c, var(--bg)), var(--bg);
  overflow: auto;
}
.auth-hero {
  position: relative;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--hairline);
  overflow: hidden;
}
.auth-hero-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  left: -160px;
  bottom: -200px;
  background: radial-gradient(circle, var(--glow-soft), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
}
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.auth-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), #5f44be);
  box-shadow: 0 0 18px var(--glow-soft);
}
.auth-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.auth-brand-text .logo-main { font-size: 16px; }
.auth-brand-text .logo-sub { font-size: 11px; }
.auth-hero-body {
  position: relative;
  max-width: 480px;
}
.auth-hero-body h1 {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0 0 18px;
}
.auth-hero-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0 0 32px;
}
.auth-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.auth-features li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.auth-feature-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--accent-bright);
  background: var(--accent-soft);
  border: 1px solid var(--panel-border);
}
.auth-features li span span { display: block; }
.auth-features li strong { font-size: 14px; }
.auth-features li span span:last-child {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
}
.auth-hero-foot {
  position: relative;
  font-size: 12px;
  color: var(--text-faint);
}
/* ----- Form ----- */
.auth-main {
  display: grid;
  place-items: center;
  padding: 40px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-card-head h2 {
  font-size: 26px;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
.auth-card-head p {
  margin: 0;
  font-size: 14px;
  color: var(--text-dim);
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.auth-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.2px;
}
.auth-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 46px;
  border-radius: var(--radius);
  background: var(--field-bg);
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.auth-input:focus-within {
  border-color: var(--panel-border-strong);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-input input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
}
.auth-input input::placeholder { color: var(--text-faint); }
.auth-reveal {
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 6px;
}
.auth-reveal:hover { color: var(--text); }
.auth-error {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: var(--radius);
  font-size: 13px;
  color: #ffd9df;
  background: rgba(226, 89, 107, 0.14);
  border: 1px solid rgba(226, 89, 107, 0.4);
}
.auth-submit {
  height: 48px;
  margin-top: 4px;
  font-size: 15px;
}
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  margin: 2px 0 0;
}
.auth-switch a {
  color: var(--accent-bright);
  font-weight: 600;
  text-decoration: none;
}
.auth-switch a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .auth-screen { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
}
/* ---------------------------------------------------------------------------
   Dashboard + account menu — the signed-in home surface.
--------------------------------------------------------------------------- */
.dash {
  min-height: 100vh;
  background: radial-gradient(1100px 600px at 50% -15%, #150f2b, var(--bg)), var(--bg);
  color: var(--text);
  animation: view-enter var(--dur-slow) var(--ease-out);
}
/* Stagger the hero and content in beneath the sticky header. */
.dash-hero {
  animation: slide-up var(--dur-slow) var(--ease-out) both;
}
.dash-section {
  animation: slide-up var(--dur-slow) var(--ease-out) 0.08s both;
}
@keyframes view-enter {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.dash-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(8, 7, 14, 0.7);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.dash-top .logo-chip { cursor: pointer; }
.dash-top-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dash-body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 28px 80px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}
/* ----- Hero ----- */
.dash-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.dash-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 10px;
}
.dash-hero h1 {
  font-size: 36px;
  letter-spacing: -0.6px;
  margin: 0;
}
.dash-hero-sub {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--text-dim);
}
.btn.lg {
  height: 50px;
  padding: 0 24px;
  font-size: 15px;
  border-radius: var(--radius);
}
/* ----- Auto-saved session restore ----- */
.dash-resume {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(79, 214, 198, 0.06));
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  animation: slide-up var(--dur-slow) var(--ease-out) 0.04s both;
}
.dash-resume-icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent-bright);
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
}
.dash-resume-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dash-resume-meta strong { font-size: 15px; }
.dash-resume-meta span { font-size: 12.5px; color: var(--text-dim); }
.dash-resume-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* ----- Sections ----- */
.dash-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.dash-section-head h2 {
  font-size: 19px;
  margin: 0;
  letter-spacing: -0.2px;
}
.dash-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 2px 10px;
}
/* ----- Avatar grid ----- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.avatar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.avatar-card:hover {
  transform: translateY(-3px);
  border-color: var(--panel-border-strong);
  box-shadow: var(--shadow-panel), 0 12px 32px rgba(var(--accent-rgb), 0.22);
}
.avatar-card:focus-visible {
  outline: none;
  border-color: var(--panel-border-strong);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--accent-rgb), 0.55);
}
.avatar-card-open {
  transition: gap var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.avatar-card:hover .avatar-card-open {
  gap: 9px;
  color: #fff;
}
.avatar-card-thumb {
  height: 130px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--text-faint);
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.12), rgba(79, 214, 198, 0.06));
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.avatar-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.avatar-card-meta { display: flex; flex-direction: column; gap: 3px; }
.avatar-card-meta strong { font-size: 15px; }
.avatar-card-meta span { font-size: 12px; color: var(--text-dim); }
.avatar-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.avatar-card-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-bright);
}
.avatar-card.create {
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-style: dashed;
  color: var(--text-dim);
  min-height: 220px;
  background: transparent;
  overflow: hidden;
}
/* Faint brand emblem watermark behind the "new avatar" call-to-action. */
.avatar-card.create::before {
  content: '';
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 150px;
  height: 150px;
  background: url('/brand/spoolara-emblem.svg') center / contain no-repeat;
  opacity: 0.06;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  pointer-events: none;
}
.avatar-card.create:hover {
  color: var(--text);
  border-color: var(--panel-border-strong);
}
.avatar-card.create:hover::before {
  opacity: 0.12;
  transform: scale(1.06) rotate(-6deg);
}
.avatar-card-plus {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--brand-gradient);
  border: 1px solid var(--panel-border-strong);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.4);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.avatar-card.create:hover .avatar-card-plus {
  transform: scale(1.08) rotate(90deg);
  box-shadow: 0 8px 26px rgba(var(--accent-rgb), 0.55);
}
/* ----- Parts list ----- */
.dash-list { display: flex; flex-direction: column; gap: 10px; }
.asset-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--panel-border);
}
.asset-row-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--accent-2);
  background: rgba(79, 214, 198, 0.1);
  border: 1px solid var(--hairline);
}
.asset-row-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.asset-row-meta strong { font-size: 14px; }
.asset-row-meta span { font-size: 12px; color: var(--text-dim); }
.icon-btn-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.icon-btn-sm:hover { color: var(--text); background: var(--panel-2); }
.icon-btn-sm.danger:hover { color: #fff; background: var(--danger); }
/* ----- Empty / error / skeleton ----- */
.dash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--panel-border);
  color: var(--text-dim);
  text-align: center;
}
.dash-empty p { margin: 0; font-size: 14px; }
.dash-empty.error { color: #ffc4cc; border-color: rgba(226, 89, 107, 0.4); }
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--panel-2);
}
.avatar-card.skeleton { min-height: 220px; cursor: default; }
.asset-row.skeleton { height: 64px; }
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: skeleton-sweep 1.3s infinite;
}
@keyframes skeleton-sweep { to { transform: translateX(100%); } }
/* ----- Account menu ----- */
.account-menu { position: relative; }
.account-menu .avatar-chip { cursor: pointer; }
.account-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 248px;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--panel-solid);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-panel);
  z-index: 50;
  animation: pop-in var(--dur) var(--ease-spring);
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.account-pop-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 8px 10px;
}
.account-pop-id { display: flex; flex-direction: column; min-width: 0; }
.account-pop-id strong { font-size: 14px; }
.account-pop-id span {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-pop-sep { height: 1px; background: var(--hairline); margin: 4px 0; }
.account-pop-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}
.account-pop-item:hover { background: var(--panel-2); }
.account-pop-item.danger { color: #ff9aa6; }
.account-pop-item.danger:hover { background: rgba(226, 89, 107, 0.16); }
@media (max-width: 640px) {
  .dash-hero h1 { font-size: 28px; }
  .dash-body { padding: 28px 18px 60px; }
}
/* stage.css (section / pose dock) is imported from main.tsx as a
   module so newly-added rules hot-reload cleanly in an already-running dev
   server (a postcss @import added mid-session can fail to resolve). */
/* ---------------------------------------------------------------------------
   Stage dock — right-edge tools for Section Analysis and avatar Posing.
   A vertical rail with a floating panel that opens to its left.
--------------------------------------------------------------------------- */

.stage-dock {
  position: fixed;
  top: 68px;
  right: 14px;
  z-index: 45;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
  transition: right 0.3s var(--ease-out);
}

.stage-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius);
  pointer-events: auto;
}

.stage-rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 58px;
  padding: 9px 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}

.stage-rail-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.stage-rail-btn.active {
  color: #fff;
  background: var(--accent-soft);
  border-color: var(--panel-border-strong);
}

.stage-rail-btn.live {
  color: var(--accent-2);
}

/* ===================== Floating panel ===================== */
.stage-dock-panel {
  pointer-events: auto;
  width: 300px;
  animation: stage-pop var(--dur) var(--ease-spring);
}

@keyframes stage-pop {
  from {
    opacity: 0;
    transform: translateX(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.stage-panel {
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.stage-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--hairline);
  user-select: none;
  cursor: default;
}

.stage-panel-head > span:first-of-type {
  flex: 1;
}

.stage-panel-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px 14px;
}

.stage-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  /* Same floor as .fit-note — faint was unreadable on the stage glass. */
  color: var(--text-dim);
}

.stage-panel .instructions {
  margin-bottom: 2px;
}

.stage-hint.warn {
  color: #e7b866;
}

.stage-field-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.stage-slider-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.stage-value {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

/* Per-finger grip: a label, a short slider and a readout on one line each, so
   five of them stack without turning the pose panel into a wall of sliders. */
.stage-link-btn {
  align-self: flex-start;
  padding: 2px 0;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

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

.finger-grip-grid {
  display: grid;
  gap: 4px;
}

.finger-grip-row {
  display: grid;
  grid-template-columns: 52px 1fr 34px;
  align-items: center;
  gap: 8px;
}

.finger-grip-label {
  font-size: 11px;
  color: var(--text-dim);
}

.finger-grip-row input[type='range'] {
  margin: 0;
}

.finger-grip-value {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-faint);
}

/* Segmented control (cut plane axis) */
.stage-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--field-bg);
}

.stage-seg button {
  padding: 7px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast);
}

.stage-seg button:hover:not(:disabled) {
  color: var(--text);
}

.stage-seg button.active {
  background: var(--accent);
  color: #fff;
}

.stage-seg button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Switch */
.stage-switch {
  width: 38px;
  height: 21px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--field-bg);
  padding: 2px;
  cursor: pointer;
  transition: background var(--dur-fast);
}

.stage-switch-knob {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform var(--dur) var(--ease-spring), background var(--dur-fast);
}

.stage-switch.on {
  background: var(--accent-soft);
  border-color: var(--panel-border-strong);
}

.stage-switch.on .stage-switch-knob {
  transform: translateX(17px);
  background: var(--accent-bright);
}

.stage-btn-row {
  display: flex;
  gap: 7px;
}

.stage-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast);
}

.stage-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--panel-border-strong);
}

.stage-btn.active {
  color: #fff;
  background: var(--accent-soft);
  border-color: var(--panel-border-strong);
}

.stage-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Pose grid */
.pose-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.pose-chip {
  padding: 9px 6px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast);
}

.pose-chip:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--panel-border-strong);
  transform: translateY(-1px);
}

.pose-chip.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  border-color: transparent;
  box-shadow: 0 6px 16px var(--glow-soft);
}

.pose-chip:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Range inputs inherit a compact accent look */
.stage-panel-body input[type='range'] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
/*$vite$:1*/