/* SpecEnvoy Edu — The Human Body in 3D — section styles (self-contained).
   Harmonises with the site dark theme; all UI lives inside .bx-stage. */

.bx-intro { color: #aeb9d6; max-width: 60ch; margin: -6px 0 18px; line-height: 1.5; }

/* -------------------------------- system tab strip (above the stage) ------
   Instruments-Through-Time–style: a horizontally-scrollable row of pills, one
   per body system + a leading "Whole body". Sits in normal page flow above the
   full-bleed stage, so it never collides with the in-stage panels. */
.bx-tabs {
  display: flex; gap: 8px; align-items: center;
  max-width: 1120px; margin: 0 auto 14px; padding: 2px 16px 6px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bx-tabs::-webkit-scrollbar { display: none; }
.bx-tab {
  font: inherit; font-size: 13.5px; color: #cdd7ef; cursor: pointer; white-space: nowrap;
  background: rgba(255,255,255,.05); border: 1px solid rgba(140,165,225,.22);
  border-radius: 999px; padding: 7px 14px; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, border-color .15s, color .15s;
}
.bx-tab:hover { background: rgba(91,134,236,.18); }
.bx-tab.on { background: #3b6fe0; border-color: #6d97f0; color: #fff; }
.bx-tab .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
@media (max-width: 720px) {
  .bx-tabs { margin-bottom: 10px; padding: 2px 12px 6px; justify-content: flex-start; }
  .bx-tab { font-size: 13px; padding: 6px 12px; }
}

.bx-stage {
  position: relative;
  width: 100%;
  height: min(82vh, 900px);
  min-height: 520px;
  background: radial-gradient(120% 90% at 50% 18%, #141d36 0%, #0a0d18 70%);
  overflow: hidden;
  /* Inline the stage lets the PAGE scroll through it (vertical pans pass to the
     page); it does not hijack drag-to-rotate. Rotating/pinching happens in
     Fullscreen, which is an explicit mode — no guessing between "scroll the
     page" and "spin the body". Desktop (mouse) rotates inline regardless. */
  touch-action: pan-y;
  border-top: 1px solid rgba(120,150,220,.14);
  border-bottom: 1px solid rgba(120,150,220,.14);
}
.bx-stage.fs {
  position: fixed; inset: 0; z-index: 60;
  width: 100vw; height: 100vh; height: 100dvh;
  min-height: 0; border-radius: 0; border: 0;
  touch-action: none;               /* full 3D control, page can't scroll under it */
}
body.bx-fs-lock { overflow: hidden; }
.bx-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.bx-stage canvas:active { cursor: grabbing; }

/* fullscreen toggle (top-right, mirrors the ☰ menu at top-left) */
.bx-fs-btn {
  position: absolute; top: 14px; right: 14px; z-index: 7;
  font: inherit; font-size: 13px; color: #fff; cursor: pointer;
  background: rgba(20,29,54,.9); border: 1px solid rgba(140,165,225,.3);
  border-radius: 10px; padding: 8px 13px;
}
.bx-fs-btn:hover { background: rgba(40,55,95,.95); }
.bx-stage.fs .bx-fs-btn { background: rgba(255,93,143,.22); border-color: rgba(255,93,143,.5); }
.bx-stage.panel-open .bx-fs-btn { display: none; }  /* avoid clash with the panel's close button */
/* the info panel opens on the right on desktop — nudge the button clear of it */
.bx-stage.info-open .bx-fs-btn { top: auto; bottom: 14px; }
@media (max-width: 720px) { .bx-stage.info-open .bx-fs-btn { bottom: auto; top: 14px; } }

/* hint pill */
.bx-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  color: #9fb0d6; font-size: 12.5px; background: rgba(10,13,24,.6);
  padding: 5px 12px; border-radius: 20px; pointer-events: none;
  border: 1px solid rgba(120,150,220,.16); white-space: nowrap; z-index: 3;
}

/* -------------------------------------------------- left panel: systems + organs */
.bx-panel {
  position: absolute; top: 14px; left: 14px; z-index: 5;
  width: 236px; max-height: calc(100% - 96px);
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(14,20,38,.82); backdrop-filter: blur(9px);
  border: 1px solid rgba(120,150,220,.18); border-radius: 14px;
  padding: 13px; overflow: hidden;
}
.bx-panel h3 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: #7f8fb5; font-weight: 700;
}
.bx-panel-sec.bx-organs { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }

.bx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bx-chip {
  font: inherit; font-size: 12.5px; color: #cdd7ef; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(140,165,225,.22);
  border-radius: 999px; padding: 5px 10px; display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s, color .15s;
}
.bx-chip:hover { background: rgba(91,134,236,.18); }
.bx-chip.on { background: #3b6fe0; border-color: #6d97f0; color: #fff; }
.bx-chip .dot, .bx-syshead .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

.bx-list { display: flex; flex-direction: column; gap: 2px; }
.bx-syshead {
  display: flex; align-items: center; gap: 7px; margin: 10px 0 3px;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #8fa0c6; font-weight: 700;
}
.bx-syshead:first-child { margin-top: 0; }
.bx-organbtn {
  font: inherit; text-align: left; color: #dbe3f5; cursor: pointer;
  background: transparent; border: 0; border-radius: 8px; padding: 6px 9px; font-size: 13.5px;
  transition: background .13s, color .13s, opacity .13s;
}
.bx-organbtn:hover { background: rgba(255,255,255,.07); }
.bx-organbtn.on { background: #ff5d8f; color: #fff; }
.bx-organbtn.dimmed { opacity: .32; }

/* ------------------------------------------------------------- tools bar */
.bx-tools {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  background: rgba(14,20,38,.82); backdrop-filter: blur(9px);
  border: 1px solid rgba(120,150,220,.18); border-radius: 12px; padding: 9px 14px; max-width: calc(100% - 24px);
}
.bx-tools label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #b7c2e0; white-space: nowrap; }
.bx-tools input[type=range] {
  -webkit-appearance: none; appearance: none; width: 92px; height: 4px; border-radius: 3px;
  background: rgba(150,170,220,.28); outline: none; cursor: pointer;
}
.bx-tools input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: #5b86ec; border: 2px solid #cdd9ff; cursor: pointer;
}
.bx-tools input[type=range]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%; background: #5b86ec; border: 2px solid #cdd9ff; cursor: pointer; border: none;
}
.bx-tools button {
  font: inherit; font-size: 12.5px; color: #cdd7ef; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(140,165,225,.22);
  border-radius: 8px; padding: 6px 11px; transition: background .15s, color .15s;
}
.bx-tools button:hover { background: rgba(91,134,236,.18); }
.bx-tools button.on { background: #3b6fe0; border-color: #6d97f0; color: #fff; }

/* --------------------------------------------------------------- info panel */
.bx-info {
  position: absolute; top: 14px; right: 14px; z-index: 6;
  width: 330px; max-width: calc(100% - 28px); max-height: calc(100% - 28px); overflow-y: auto;
  background: rgba(15,21,40,.94); backdrop-filter: blur(10px);
  border: 1px solid rgba(120,150,220,.22); border-radius: 16px; padding: 18px 18px 20px;
  transform: translateX(115%); opacity: 0; transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s;
  pointer-events: none;
}
.bx-info.open { transform: none; opacity: 1; pointer-events: auto; }
.bx-info-head h2 { margin: 0; font-size: 22px; color: #fff; line-height: 1.15; }
.bx-info-head .zh { color: #9fb0d6; font-size: 15px; margin-top: 2px; }
.bx-info-sys { margin: 10px 0 14px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #7f8fb5; }
.bx-info-sys .lbl { margin-right: 6px; }
.bx-info-sys span:last-child { font-weight: 700; }
.bx-info-block { margin-top: 14px; }
.bx-info-block h4 {
  margin: 0 0 5px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #8b9bc2; font-weight: 700;
}
.bx-info-block p { margin: 0; color: #dde4f5; line-height: 1.55; font-size: 14.5px; }
.bx-info-block.clin {
  background: rgba(255,93,143,.09); border: 1px solid rgba(255,93,143,.28);
  border-radius: 12px; padding: 12px 13px;
}
.bx-info-block.clin h4 { color: #ff9ab9; }
/* sub-part (detail) chips inside the info panel */
.bx-sub { margin: 13px 0 2px; }
.bx-sub-lbl {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #8b9bc2; font-weight: 700; margin-bottom: 7px;
}
.bx-sub-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bx-subchip {
  font: inherit; font-size: 12.5px; color: #cdd7ef; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(140,165,225,.22);
  border-radius: 999px; padding: 5px 11px;
  transition: background .15s, border-color .15s, color .15s;
}
.bx-subchip:hover { background: rgba(91,134,236,.18); }
.bx-subchip.on { background: #ff5d8f; border-color: #ff87ac; color: #fff; }
.bx-info-sys[style*="cursor"] { transition: color .15s; }
.bx-info-sys[style*="cursor"]:hover { color: #fff !important; }

#infoClose {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(140,165,225,.22); color: #cdd7ef;
  font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
#infoClose:hover { background: rgba(255,93,143,.25); color: #fff; }

/* ----------------------------------------------- mobile menu toggle */
.bx-menu {
  display: none; position: absolute; top: 14px; left: 14px; z-index: 7;
  font: inherit; font-size: 13px; color: #fff; cursor: pointer;
  background: rgba(20,29,54,.9); border: 1px solid rgba(140,165,225,.3);
  border-radius: 10px; padding: 8px 13px;
}

/* panel close (row inside the sliding organ panel) + tap-outside scrim */
.bx-panel-close {
  display: none; align-self: flex-end; margin: -2px -2px 2px 0;
  font: inherit; font-size: 13px; color: #cdd7ef; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(140,165,225,.22);
  border-radius: 8px; padding: 5px 11px;
}
.bx-scrim {
  position: absolute; inset: 0; z-index: 4; background: rgba(6,9,18,.5);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.bx-stage.panel-open .bx-scrim { opacity: 1; pointer-events: auto; }

/* ----------------------------------------------- no-WebGL fallback */
.bx-fallback { position: absolute; inset: 0; overflow-y: auto; padding: 24px; z-index: 8; }
.bx-fallback > p { color: #cdd7ef; max-width: 60ch; margin: 0 auto 18px; text-align: center; }
.bx-fb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto; }
.bx-fb-list button {
  text-align: left; background: rgba(15,21,40,.9); border: 1px solid rgba(120,150,220,.2);
  border-radius: 12px; padding: 13px 15px; color: #dde4f5; cursor: pointer; font: inherit;
}
.bx-fb-list button b { display: block; color: #fff; font-size: 15px; margin-bottom: 5px; }
.bx-fb-list button span { display: block; font-size: 13px; color: #aeb9d6; line-height: 1.45; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 720px) {
  .bx-stage { height: 84vh; min-height: 460px; }
  .bx-menu { display: block; }
  .bx-panel {
    top: 0; left: 0; width: 82%; max-width: 320px; height: 100%; max-height: 100%;
    border-radius: 0 16px 16px 0; transform: translateX(-105%); transition: transform .26s;
  }
  .bx-stage.panel-open .bx-panel { transform: none; }
  .bx-panel-close { display: block; }
  .bx-hint { display: none; }
  .bx-tools { bottom: 12px; gap: 10px; padding: 8px 11px; }
  .bx-tools input[type=range] { width: 68px; }
  .bx-info {
    top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-width: 100%;
    max-height: 62%; border-radius: 18px 18px 0 0; transform: translateY(115%);
  }
  .bx-info.open { transform: none; }
}