/* Shared MOSHOO brand palette; product selection changes the cue, not the room. */
:root {
  --bg: #080709;
  --white: #f4f1ee;
  --muted: #b9a9ad;
  --brand-red: #ef3b46;
  --accent: #ff8a91;
  --accent-rgb: 239, 59, 70;
  --line: rgba(255, 169, 177, .17);
  --panel: #140d10;
  --panel-border: #48232b;
}
.model-preview {
  --accent: #ff8a91;
  --accent-rgb: 239, 59, 70;
}
::selection { background: #a32135; color: #fff; }
.stage {
  background: radial-gradient(ellipse at 73% 40%, #290d15 0%, #10090d 45%, var(--bg) 77%);
  isolation: isolate;
}
.ambient {
  inset: -9%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 72% 34%, rgba(211, 22, 48, .48), transparent 42%),
    radial-gradient(ellipse at 49% 65%, rgba(156, 13, 34, .27), transparent 40%),
    radial-gradient(ellipse at 95% 81%, rgba(231, 35, 54, .18), transparent 39%);
  filter: blur(34px);
  animation: red-diffusion 16s ease-in-out infinite alternate;
}
.halo {
  width: 72vw;
  height: 30vw;
  left: 27%;
  top: 47%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(220, 22, 44, .2), rgba(143, 13, 33, .09) 40%, transparent 67%);
  filter: blur(44px);
}
.wordmark { color: rgba(255, 180, 190, .047); }
.floor-line {
  background: linear-gradient(90deg, transparent, rgba(242, 73, 91, .4), transparent);
}
.topbar { background: linear-gradient(var(--bg), rgba(8, 7, 9, .55) 52%, transparent); }
.brand span { border-color: #503038; }
.edition { color: #d6c8cc; }
.edition span { color: #a38c94; }
.chapter p, .model-label p { color: #bfb0b5; }
.small-note, .model-label > span, .collection-heading { color: #b29ba3; }
.eyebrow i { background: var(--brand-red); box-shadow: 0 0 14px rgba(var(--accent-rgb), .5); }
.explore {
  background: #c92035;
  border-color: #ef4355;
  color: #fff4f3;
  box-shadow: 0 9px 32px rgba(144, 10, 30, .2);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.explore:hover {
  background: #e32c40;
  border-color: #ff7a87;
  color: #fff;
  box-shadow: 0 10px 38px rgba(199, 19, 47, .3);
}
.text-link { border-color: #8d3a4b; }
.chapter-nav i { background: #83626c; }
.chapter-nav .active i {
  background: #ff7180;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12), 0 0 15px rgba(var(--accent-rgb), .32);
}
.viewer-controls {
  background: rgba(16, 9, 13, .84);
  border-color: var(--panel-border);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .2);
}
.viewer-controls > button[aria-pressed=true] {
  background: rgba(var(--accent-rgb), .19);
  color: #ffb0b7;
}
.zoom-control input { accent-color: var(--brand-red); }
.interaction-hint { color: #bba3ac; }
.interaction-hint i { background: #af7384; }
.swatch { background: #160e13; border-color: #39212b; }
.swatch span { background: linear-gradient(transparent, #160d12 30%); color: #bdacb3; }
.swatch.active {
  background: rgba(var(--accent-rgb), .13);
  border-color: #f35467;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .1);
}
.swatch.active span { color: #ffa4ae; }
.material-switch { background: var(--panel); border-color: var(--panel-border); }
.material-switch button[aria-pressed=true] { background: #852336; color: #fff1f1; }
.material-panel p { color: #b89da7; }
.stage-footer { color: #a48a94; }
#loading { color: #c8a8b3; }
#loading span { border-color: #512932; border-top-color: var(--brand-red); }
dialog, #model-error { background: var(--panel); border-color: var(--panel-border); }
dialog::backdrop { background: rgba(8, 3, 6, .8); }
.modal-bar { border-color: var(--panel-border); }
.reference-image { background: #140f13; }
.close, #about-modal p { color: #c2aeb7; }
#toast { background: #efccd4; color: #2a101b; }
@keyframes red-diffusion {
  from { transform: translate3d(-1%, 1%, 0) scale(1); opacity: .87; }
  to { transform: translate3d(2%, -1.5%, 0) scale(1.055); opacity: 1; }
}
@media (max-width: 680px) {
  .stage { background: radial-gradient(ellipse at 80% 44%, #300d18 0%, #12090f 48%, var(--bg) 83%); }
  .ambient {
    background:
      radial-gradient(ellipse at 84% 35%, rgba(210, 24, 50, .4), transparent 48%),
      radial-gradient(ellipse at 34% 72%, rgba(172, 15, 39, .26), transparent 43%);
    filter: blur(26px);
  }
  .halo { width: 100vw; height: 72vw; left: 12%; top: 42%; filter: blur(32px); }
  .viewer-controls { background: rgba(14, 8, 12, .9); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient { animation: none; transform: none; opacity: 1; }
}