* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -ms-content-zooming: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #000;
  color: #fff;
}

a, a:hover, a:active, a:visited {
  text-decoration: none;
  color: inherit;
}

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Keep focused panorama hotspots from scrolling the WebGL canvas.
     Override the viewer's inline hidden while retaining its legacy fallback. */
  overflow: clip !important;
}

#titleBar {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  height: 40px;
  display: flex;
  align-items: stretch;
  text-align: center;
}

.mobile #titleBar {
  height: 50px;
  right: 50px;
}

/* If there is a fullscreen button the title bar must make space for it */
body.fullscreen-enabled #titleBar {
  right: 80px;
}

body.fullscreen-enabled.mobile #titleBar {
  right: 100px;
}

/* If there are multiple scenes the title bar must make space for the scene list toggle */
body.multiple-scenes #titleBar {
  left: 40px;
}

body.multiple-scenes.mobile #titleBar {
  left: 50px;
}

#titleBar .sceneName {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  line-height: 30px;
  padding: 5px;
  font-size: 20px;
  font-weight: 500;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.museum-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-width: 116px;
  padding: 3px 10px 3px 7px;
  border-right: 1px solid rgba(255, 255, 255, .18);
  background: rgba(31, 38, 34, .9);
  color: #fff7e9;
  text-align: left;
  font-family: "Microsoft YaHei", sans-serif;
}

.museum-brand img {
  width: 23px;
  height: 31px;
  flex: 0 0 auto;
  border-radius: 3px;
  object-fit: cover;
}

.museum-brand span {
  display: grid;
  min-width: 0;
  line-height: 1.05;
}

.museum-brand strong {
  color: #f4c8b4;
  font-size: 14px;
  letter-spacing: 2px;
}

.museum-brand small {
  margin-top: 2px;
  color: rgba(255, 247, 233, .72);
  font-size: 8px;
  white-space: nowrap;
}

.mobile #titleBar .sceneName {
  line-height: 40px;
  font-size: 16px;
}

#fullscreenToggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #fullscreenToggle {
  width: 50px;
  height: 50px;
}

body.fullscreen-enabled #fullscreenToggle {
  display: block;
}

#fullscreenToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #fullscreenToggle .icon {
  top: 10px;
  right: 10px;
}

#fullscreenToggle .icon.on {
  display: none;
}

#fullscreenToggle .icon.off {
  display: block;
}

#fullscreenToggle.enabled .icon.on {
  display: block;
}

#fullscreenToggle.enabled .icon.off {
  display: none;
}

#autorotateToggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #autorotateToggle {
  width: 50px;
  height: 50px;
}

/* If there is a fullscreen button, autorotate must placed a bit to the left */
body.fullscreen-enabled #autorotateToggle {
  right: 40px;
}

body.fullscreen-enabled.mobile #autorotateToggle {
  right: 50px;
}

#autorotateToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #autorotateToggle .icon {
  top: 10px;
  right: 10px;
}

#autorotateToggle .icon.on {
  display: none;
}

#autorotateToggle .icon.off {
  display: block;
}

#autorotateToggle.enabled .icon.on {
  display: block;
}

#autorotateToggle.enabled .icon.off {
  display: none;
}

#sceneListToggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

.mobile #sceneListToggle {
  width: 50px;
  height: 50px;
}

#sceneListToggle .text {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 100%;
  line-height: 30px;
}

#sceneListToggle .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

.mobile #sceneListToggle .icon {
  top: 10px;
  right: 10px;
}

#sceneListToggle .icon.on {
  display: none;
}

#sceneListToggle .icon.off {
  display: block;
}

#sceneListToggle.enabled .icon.on {
  display: block;
}

#sceneListToggle.enabled .icon.off {
  display: none;
}

#sceneList {
  position: absolute;
  top: 0;
  left: -252px;
  padding-top: 40px;
  width: 252px;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 0;
  -webkit-transition: margin-left 0.5s ease-in-out;
  transition: margin-left 0.5s ease-in-out;
}

.mobile #sceneList {
  padding-top: 50px;
}

#sceneList .scenes {
  width: 100%;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
}

.mobile #sceneList {
  width: 100%;
  height: 100%;
  left: -100%;
}

.mobile #sceneList.enabled {
  margin-left: 100%;
}

.mobile #sceneList .scenes {
  height: 100%;
}

#sceneList.enabled {
  margin-left: 252px;
}

#sceneList .scene {
  display: block;
  width: 100%;
  height: 30px;
}

.mobile #sceneList .scene {
  height: 40px;
}

#sceneList .scene .text {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 0 15px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sceneList .scene-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile #sceneList .scene .text {
  line-height: 40px;
}

.no-touch #sceneList .scene:hover {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

#sceneList .scene.current {
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

#sceneList .scene-featured {
  border-top: 1px solid rgba(222, 190, 118, 0.42);
  color: #f3dfb1;
}

#sceneList .scene-featured.current {
  background-color: rgba(108, 84, 44, 0.9);
}

#sceneList .layout-entry {
  display: block;
  width: 100%;
  min-height: 34px;
  border-top: 1px solid rgba(222, 190, 118, 0.42);
  color: #f3dfb1;
}

#sceneList .layout-entry .text {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  padding: 0 15px;
  line-height: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.no-touch #sceneList .layout-entry:hover {
  background-color: rgba(108, 84, 44, 0.9);
}

.scene-badge {
  display: inline-block;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid rgba(243, 223, 177, 0.62);
  border-radius: 3px;
  font-size: 10px;
  line-height: 15px;
  vertical-align: 1px;
}

/* Hide scene list when only a single scene exists */
body.single-scene #sceneList, body.single-scene #sceneListToggle {
  display: none;
}

/* Link hotspot */

.link-hotspot {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.no-touch .link-hotspot:hover {
  opacity: 1;
}

.mobile .link-hotspot {
  width: 70px;
  height: 70px;
}

.link-hotspot-icon {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.link-hotspot-tooltip {
  position: absolute;
  left: 100%;
  top: 14px; /* ( 60 - (16 + 2*8) ) / 2 */

  margin-left: 3px;

  font-size: 16px;

  max-width: 300px;

  padding: 8px 10px;

  border-radius: 5px;

  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);

  color: #fff;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  cursor: pointer;

  opacity: 0;

  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  transform: translateX(-8px);

  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      opacity 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              opacity 0.3s;
}

.mobile .link-hotspot {
  top: 19px; /* ( 70 - (16 + 2*8) ) / 2 */
}

.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  opacity: 1;
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Prevent tooltip from triggering */
.link-hotspot-tooltip {
  pointer-events: none;
}
.no-touch .link-hotspot:hover .link-hotspot-tooltip {
  pointer-events: all;
}

/* Fallback mode without pointer-events (IE8-10) */
.tooltip-fallback .link-hotspot-tooltip {
  display: none;
}
.no-touch .tooltip-fallback .link-hotspot:hover .link-hotspot-tooltip {
  display: block;
}

/* Info hotspot */

.info-hotspot {
  line-height: 1.2em;
  opacity: 0.9;
  -webkit-transition: opacity 0.2s 0.2s;
  transition: opacity 0.2s 0.2s;
}

.no-touch .info-hotspot:hover {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.info-hotspot.visible {
  opacity: 1;
}

.info-hotspot .info-hotspot-header {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: rgb(103,115,131);
  cursor: pointer;
  -webkit-transition: width 0.3s ease-in-out 0.5s,
                      border-radius 0.3s ease-in-out 0.5s;
  transition: width 0.3s ease-in-out 0.5s,
              border-radius 0.3s ease-in-out 0.5s;
}

.mobile .info-hotspot .info-hotspot-header {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

.desktop.no-touch .info-hotspot .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.desktop .info-hotspot.visible .info-hotspot-header,
.desktop.no-touch .info-hotspot.visible .info-hotspot-header:hover {
  width: 260px;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-transition: width 0.3s ease-in-out,
                      border-radius 0.3s ease-in-out;
  transition: width 0.3s ease-in-out,
              border-radius 0.3s ease-in-out;
}

.info-hotspot .info-hotspot-icon-wrapper {
  width: 40px;
  height: 40px;
}

.mobile .info-hotspot .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot .info-hotspot-title-wrapper {
  position: absolute;
  left: 40px;
  top: 0;
  width: 0;
  height: 40px;
  padding: 0;
  overflow: hidden;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.desktop .info-hotspot.visible .info-hotspot-title-wrapper,
.desktop.no-touch .info-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
  width: 220px;
  padding: 0 5px;
  -webkit-transition: width 0s 0.4s,
                      padding 0s 0.4s;
  transition: width 0s 0.4s,
              padding 0s 0.4s;
}

.info-hotspot .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot .info-hotspot-close-wrapper {
  position: absolute;
  left: 260px;
  top: 0;
  height: 40px;
  width: 40px;
  border-top-right-radius: 5px;
  background-color: rgb(78,88,104);
  visibility: hidden;
  -ms-transform: perspective(200px) rotateY(90deg);
  -webkit-transform: perspective(200px) rotateY(90deg);
  transform: perspective(200px) rotateY(90deg);
  -ms-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0.6s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0.6s;
}

.desktop .info-hotspot.visible .info-hotspot-close-wrapper {
  visibility: visible;
  -ms-transform: perspective(200px) rotateY(0deg);
  -webkit-transform: perspective(200px) rotateY(0deg);
  transform: perspective(200px) rotateY(0deg);
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0s;
}

.info-hotspot .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot .info-hotspot-text {
  position: absolute;
  width: 300px;
  height: auto;
  max-height: 200px;
  top: 40px;
  left: 0;
  padding: 10px;
  background-color: rgb(58,68,84);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow-y: auto;
  visibility: hidden;
  /* rotate(90deg) causes transition flicker on Firefox 58 */
  -ms-transform: perspective(200px) rotateX(-89.999deg);
  -webkit-transform: perspective(200px) rotateX(-89.999deg);
  transform: perspective(200px) rotateX(-89.999deg);
  -ms-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -webkit-transition: -ms-transform 0.3s,
                      -webkit-transform 0.3s,
                      transform 0.3s,
                      visibility 0s 0.3s;
  transition: -ms-transform 0.3s,
              -webkit-transform 0.3s,
              transform 0.3s,
              visibility 0s 0.3s;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.desktop .info-hotspot.visible .info-hotspot-text {
  visibility: visible;
  -ms-transform: perspective(200px) rotateX(0deg);
  -webkit-transform: perspective(200px) rotateX(0deg);
  transform: perspective(200px) rotateX(0deg);
  -webkit-transition: -ms-transform 0.3s 0.3s,
                      -webkit-transform 0.3s 0.3s,
                      transform 0.3s 0.3s,
                      visibility 0s 0s;
  transition: -ms-transform 0.3s 0.3s,
              -webkit-transform 0.3s 0.3s,
              transform 0.3s 0.3s,
              visibility 0s 0s;
}

/* Info hotspot modal */

.desktop .info-hotspot-modal {
  display: none;
}

.info-hotspot-modal {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 11000 !important;
  background-color: rgba(0,0,0,.5);
  line-height: 1.2em;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s,
                      visibility 0s 0.7s;
  transition: opacity 0.2s ease-in-out 0.5s,
              visibility 0s 0.7s;
}

.info-hotspot-modal.visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.2s ease-in-out,
                      visibility 0s 0s;
  transition: opacity 0.2s ease-in-out,
              visibility 0s 0s;
}

.info-hotspot-modal .info-hotspot-header {
  position: absolute;
  top: 60px;
  left: 10px;
  right: 10px;
  width: auto;
  height: 50px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal.visible .info-hotspot-header {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.2s;
  transition: opacity 0.3s ease-in-out 0.2s;
}

.info-hotspot-modal .info-hotspot-icon-wrapper {
  width: 50px;
  height: 50px;
}

.info-hotspot-modal .info-hotspot-icon {
  width: 90%;
  height: 90%;
  margin: 5%;
}

.info-hotspot-modal .info-hotspot-title-wrapper {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  width: auto;
  height: 50px;
  padding: 0 10px;
}

.info-hotspot-modal .info-hotspot-title-wrapper:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.info-hotspot-modal .info-hotspot-title {
  display: inline-block;
  vertical-align: middle;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal .info-hotspot-close-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: rgb(78,88,104);
  background-color: rgba(78,88,104,0.8);
  cursor: pointer;
}

.info-hotspot-modal .info-hotspot-close-icon {
  width: 70%;
  height: 70%;
  margin: 15%;
}

.info-hotspot-modal .info-hotspot-text {
  position: absolute;
  top: 110px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(58,68,84);
  background-color: rgba(58,68,84,0.8);
  overflow-y: auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;

  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.info-hotspot-modal.visible .info-hotspot-text {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in-out 0.4s;
  transition: opacity 0.3s ease-in-out 0.4s;
}

/* View control buttons */

.viewControlButton {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  background-color: rgb(103,115,131);
  background-color: rgba(103,115,131,0.8);
}

body.view-control-buttons .viewControlButton {
  display: block;
}

/* Hide controls when width is too small */
@media (max-width: 600px) {
  body.view-control-buttons .viewControlButton {
    display: none;
  }
}

.viewControlButton .icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
}

/* Center is at margin-left: -20px */
.viewControlButton-1 {
  margin-left: -145px;
}
.viewControlButton-2 {
  margin-left: -95px;
}
.viewControlButton-3 {
  margin-left: -45px;
}
.viewControlButton-4 {
  margin-left: 5px;
}
.viewControlButton-5 {
  margin-left: 55px;
}
.viewControlButton-6 {
  margin-left: 105px;
}

/* ===== 核心器型资料库 ===== */
.catalog-toggle {
  position: fixed;
  top: max(64px, calc(56px + env(safe-area-inset-top)));
  right: 116px;
  z-index: 1002;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(244, 239, 226, 0.42);
  border-radius: 6px;
  background: rgba(18, 20, 19, 0.82);
  color: #f4efe2;
  font: 14px/1 "Microsoft YaHei", sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
}

.catalog-toggle strong {
  min-width: 30px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #a8593c;
  color: #fff;
  font-size: 12px;
  text-align: center;
}

.catalog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  visibility: hidden;
  opacity: 0;
  background: rgba(8, 10, 9, 0.48);
  transition: opacity 180ms ease, visibility 0s 180ms;
}

.catalog-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 12001;
  width: min(520px, 92vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f5f3ed;
  color: #1f2522;
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.28);
  transform: translateX(102%);
  transition: transform 220ms ease;
}

.catalog-open .catalog-panel {
  transform: translateX(0);
}

.catalog-open .catalog-backdrop {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.catalog-open #ipGuide {
  opacity: 0;
  pointer-events: none;
}

.catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  min-height: 88px;
  padding: 18px 20px;
  border-bottom: 1px solid #d7d7cf;
  background: #202825;
  color: #f7f3e7;
}

.catalog-header p {
  margin: 0 0 6px;
  color: #aebbb4;
  font: 12px/1.2 "Microsoft YaHei", sans-serif;
}

.catalog-header h2 {
  margin: 0;
  color: inherit;
  font: 500 22px/1.25 "SimSun", serif;
  letter-spacing: 0;
}

.catalog-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: transparent;
  color: #f7f3e7;
  font: 28px/36px Arial, sans-serif;
  cursor: pointer;
}

.catalog-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  flex: 0 0 auto;
  border-bottom: 1px solid #d7d7cf;
  background: #fff;
}

.catalog-stats > div {
  min-width: 0;
  padding: 13px 8px 11px;
  border-right: 1px solid #e2e2dc;
  text-align: center;
}

.catalog-stats > div:last-child {
  border-right: 0;
}

.catalog-stats strong,
.catalog-stats span {
  display: block;
}

.catalog-stats strong {
  color: #263f36;
  font: 600 19px/1 "Microsoft YaHei", sans-serif;
}

.catalog-stats span {
  margin-top: 6px;
  color: #6b746f;
  font: 11px/1.2 "Microsoft YaHei", sans-serif;
}

.catalog-stats .ai strong { color: #9c583e; }
.catalog-stats .structured strong { color: #315b48; }
.catalog-stats .source-registered strong { color: #8a6841; }
.catalog-stats .source-missing strong { color: #9a4f3d; }
.catalog-stats .pending strong { color: #8a6841; }
.catalog-stats .contextual strong { color: #665582; }

.catalog-image-period-summary {
  margin: 0;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(49, 84, 70, 0.14);
  background: #edf3ef;
  color: #36584a;
  font-size: 12px;
  line-height: 1.55;
}

.catalog-tools {
  display: grid;
  grid-template-columns: 1fr 132px;
  gap: 10px;
  flex: 0 0 auto;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #d7d7cf;
  background: #f5f3ed;
}

.catalog-search {
  position: relative;
  min-width: 0;
}

.catalog-search span {
  position: absolute;
  left: 11px;
  top: 50%;
  color: #68746e;
  font: 12px/1 "Microsoft YaHei", sans-serif;
  transform: translateY(-50%);
}

.catalog-search input,
.catalog-tools select {
  width: 100%;
  height: 38px;
  border: 1px solid #c8ccc8;
  border-radius: 4px;
  background: #fff;
  color: #202825;
  font: 13px/1 "Microsoft YaHei", sans-serif;
  outline: none;
}

.catalog-search input {
  padding: 0 10px 0 48px;
}

.catalog-tools select {
  padding: 0 8px;
}

.catalog-search input:focus,
.catalog-tools select:focus {
  border-color: #587566;
  box-shadow: 0 0 0 2px rgba(88, 117, 102, 0.16);
}

.catalog-filters {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: .7fr 1.2fr 1.6fr 1.5fr;
  border: 1px solid #c8ccc8;
  border-radius: 4px;
  overflow: hidden;
}

.catalog-filters button {
  min-height: 42px;
  height: auto;
  padding: 6px 4px;
  border: 0;
  border-right: 1px solid #c8ccc8;
  background: #fff;
  color: #59645e;
  font: 10.5px/1.3 "Microsoft YaHei", sans-serif;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.catalog-filters button:last-child { border-right: 0; }
.catalog-filters button.active {
  background: #3e5a4e;
  color: #fff;
}

.catalog-result-line {
  flex: 0 0 auto;
  padding: 9px 17px 6px;
  color: #737b77;
  font: 12px/1.2 "Microsoft YaHei", sans-serif;
}

.catalog-result-line span {
  color: #a8593c;
  font-weight: 700;
}

.catalog-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 16px 24px;
}

.catalog-card {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  min-height: 172px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #d6d8d4;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(29, 38, 34, 0.06);
}

.catalog-card-media {
  position: relative;
  min-width: 0;
  min-height: 172px;
  overflow: hidden;
  border-right: 1px solid #e0e1de;
  background: #e8ebe7;
}

.catalog-card-media > img {
  width: 100%;
  height: 100%;
  min-height: 172px;
  display: block;
  object-fit: contain;
  background: #e8ebe7;
}

.catalog-placeholder {
  width: 100%;
  height: 100%;
  min-height: 172px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(145deg, #dbe4de, #eef0eb 58%, #e8dfd1);
  text-align: center;
}

.catalog-placeholder > span {
  width: 36px;
  height: 36px;
  border: 1px solid #a8593c;
  color: #a8593c;
  font: 22px/34px "SimSun", serif;
}

.catalog-placeholder strong,
.catalog-placeholder small {
  display: block;
}

.catalog-placeholder.source-link-only {
  background: linear-gradient(145deg, #e5e4df, #f2f0ea 58%, #e7dfd4);
}

.catalog-placeholder.source-link-only > span {
  border-color: #766349;
  color: #766349;
}

.catalog-placeholder.source-link-only small {
  max-width: 150px;
  color: #685d4e;
}

.catalog-placeholder strong {
  color: #31473e;
  font: 600 16px/1.3 "SimSun", serif;
}

.catalog-placeholder small {
  margin-top: 4px;
  color: #7d837f;
  font: 11px/1.3 "Microsoft YaHei", sans-serif;
}

.catalog-card-body {
  min-width: 0;
  padding: 12px 13px;
}

.catalog-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.catalog-card h3 {
  min-width: 0;
  margin: 0;
  color: #202825;
  font: 600 18px/1.25 "SimSun", serif;
  overflow-wrap: anywhere;
}

.catalog-card .catalog-representative-title {
  margin: 7px 0 0;
  padding: 7px 8px;
  border-left: 3px solid #6f8e7f;
  border-radius: 3px;
  background: #f0f5f2;
  color: #30473d;
  font: 600 12px/1.5 "Microsoft YaHei", sans-serif;
}

.catalog-card .catalog-representative-title > span {
  display: block;
  min-width: 0;
  margin: 0 0 2px;
  color: #6e7e76;
  font-size: 10px;
  font-weight: 500;
}

.catalog-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 8px 0;
}

.catalog-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 4px;
  background: #edf0ed;
  color: #55605a;
  font: 10px/1.2 "Microsoft YaHei", sans-serif;
  overflow-wrap: anywhere;
}

.catalog-badge.category { flex: 0 0 auto; background: #e1ebe5; color: #355246; }
.catalog-badge.museum_photo { background: #dcebe3; color: #315847; }
.catalog-badge.ai_reference { background: #f3e4dc; color: #88492f; }
.catalog-badge.research_placeholder,
.catalog-badge.pending { background: #eee8dc; color: #795f3f; }
.catalog-badge.concept,
.catalog-badge.folk,
.catalog-badge.life,
.catalog-badge.modern,
.catalog-badge.contextual { background: #ece7ef; color: #69546f; }
.catalog-badge.open_license_verified { background: #dcebe3; color: #315847; }
.catalog-badge.published_open_license { background: #dcebe3; color: #315847; }
.catalog-badge.teaching_display_authorized,
.catalog-badge.published_teaching_authorized { background: #e4eee8; color: #2f6650; }
.catalog-badge.source_traced_rights_unconfirmed,
.catalog-badge.open_terms_resolution_review_required { background: #f4eadc; color: #805b2e; }
.catalog-badge.project_ai_reference { background: #ece7ef; color: #69546f; }
.catalog-badge.source_link_only { background: #eee8dc; color: #725a3c; }
.catalog-badge.published_ai_reference { background: #ece7ef; color: #69546f; }
.catalog-badge.period-match { background: #dcebe3; color: #2e604c; }
.catalog-badge.period-later { background: #f4eadc; color: #805b2e; }
.catalog-badge.period-undetermined { background: #ece9e1; color: #6f654f; }
.catalog-badge.period-error { background: #f5dfda; color: #923e31; }
.catalog-badge.period-ai { background: #ece7ef; color: #69546f; }

.catalog-card p,
.catalog-card details p {
  margin: 5px 0 0;
  color: #4d5752;
  font: 12px/1.55 "Microsoft YaHei", sans-serif;
  overflow-wrap: anywhere;
}

.catalog-card p > span {
  display: inline-block;
  min-width: 34px;
  margin-right: 5px;
  color: #87908b;
}

.catalog-card details {
  margin-top: 7px;
  border-top: 1px solid #e5e6e2;
  padding-top: 6px;
}

.catalog-card summary {
  color: #426355;
  font: 12px/1.5 "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.catalog-source-link {
  display: inline-block;
  margin-top: 8px;
  color: #9b4e33;
  font: 12px/1.4 "Microsoft YaHei", sans-serif;
}

.catalog-empty {
  padding: 80px 20px;
  color: #727b76;
  text-align: center;
  font: 14px/1.5 "Microsoft YaHei", sans-serif;
}

.catalog-empty p,
.museum-empty-state p {
  margin: 0;
}

.catalog-empty-reset,
.museum-empty-action {
  min-height: 44px;
  margin-top: 14px;
  padding: 0 18px;
  border: 1px solid #486456;
  border-radius: 999px;
  background: #486456;
  color: #fff;
  font: 600 13px/1 "Microsoft YaHei", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.museum-empty-action {
  border-color: #9c6548;
  background: #9c6548;
}

.catalog-empty-reset:focus-visible,
.museum-empty-action:focus-visible {
  outline: 3px solid #e4b95f;
  outline-offset: 3px;
}

.info-hotspot-media {
  position: relative;
  width: calc(100% + 20px);
  height: 132px;
  margin: -10px -10px 10px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: #dfe4e0;
}

.info-hotspot-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.info-hotspot-media-disclaimer {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(39, 83, 65, .9);
  color: #f4fff8;
  font: 600 10px/1.35 "Microsoft YaHei", sans-serif;
  text-align: center;
}

.info-hotspot-media.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #dde5df;
  color: #41584e;
}

.info-hotspot-media.is-placeholder span {
  width: 30px;
  height: 30px;
  border: 1px solid #a8593c;
  color: #a8593c;
  font: 18px/28px "SimSun", serif;
  text-align: center;
}

.info-hotspot-media.is-placeholder strong {
  font: 12px/1.3 "Microsoft YaHei", sans-serif;
}

.info-hotspot-media.is-source-link-only {
  background: #e8e5de;
  color: #5f5548;
}

.info-hotspot-media.is-source-link-only span {
  border-color: #766349;
  color: #766349;
}

.info-hotspot-object-title {
  margin: 0 0 8px;
  padding: 7px 8px;
  border-left: 3px solid rgba(216, 199, 164, .85);
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  color: #f4ead7;
  font: 600 11px/1.55 "Microsoft YaHei", sans-serif;
}

.evidence-label {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 6px;
  border-radius: 3px;
  background: rgba(220, 235, 227, 0.16);
  color: #d8eadf;
  font-size: 11px;
}

@media (max-width: 700px) {
  .catalog-toggle {
    top: 66px;
    right: 10px;
    min-height: 36px;
    padding: 0 9px;
    font-size: 12px;
  }

  .catalog-panel {
    width: 100vw;
  }

  .catalog-header {
    min-height: 76px;
    padding: 12px 14px;
  }

  .catalog-header h2 { font-size: 19px; }
  .catalog-stats span { font-size: 10px; }

  .catalog-tools {
    grid-template-columns: minmax(0, 1fr) 112px;
    padding: 10px 10px 8px;
  }

  .catalog-list { padding: 4px 10px 18px; }
  .catalog-card { grid-template-columns: 102px minmax(0, 1fr); }
  .catalog-card-media,
  .catalog-card-media > img,
  .catalog-placeholder { min-height: 188px; }
  .catalog-card-body { padding: 11px 10px; }
  .catalog-card h3 { font-size: 16px; }

  .info-hotspot-modal .info-hotspot-media {
    height: min(34vh, 250px);
  }
}

/* Background music control */
.music-toggle {
  position: absolute;
  left: 18px;
  bottom: 72px;
  z-index: 9200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px 0 10px;
  border-radius: 20px;
  border: 1px solid rgba(201,168,106,.42);
  background: rgba(20,19,18,.72);
  color: #e8dcc4;
  font: 400 13px/1 "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .2s;
}

.music-toggle:hover,
.music-toggle.is-playing {
  background: rgba(201,168,106,.92);
  color: #1b1a18;
  border-color: #c9a86a;
}

.music-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  font: 700 16px/1 Georgia, serif;
}

.music-toggle.is-playing .music-mark {
  background: rgba(27,26,24,.16);
  animation: musicPulse 1.8s ease-in-out infinite;
}

@keyframes musicPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Legacy IP guide generations retained for source history, disabled by v1.16.0. */
@media not all {
/* IP digital guide */
.ip-guide {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 9200;
  width: min(360px, calc(100vw - 36px));
  color: #2d261c;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  pointer-events: none;
}

.ip-guide * {
  pointer-events: auto;
}

.ip-guide-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px 0 8px;
  border: 1px solid rgba(214,190,145,.72);
  border-radius: 21px;
  background: rgba(34,31,27,.82);
  color: #f2e9d9;
  font: 500 13px/1 "PingFang SC", "Microsoft YaHei", sans-serif;
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  cursor: pointer;
}

.ip-guide.is-collapsed {
  width: auto;
}

.ip-guide.is-collapsed .ip-guide-panel {
  display: none;
}

.ip-guide.is-collapsed .ip-guide-toggle {
  display: inline-flex;
}

.ip-guide-panel {
  overflow: hidden;
  border: 1px solid rgba(214,190,145,.62);
  border-radius: 8px;
  background: rgba(248,244,235,.94);
  box-shadow: 0 18px 48px rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ip-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px 10px;
  border-bottom: 1px solid rgba(177,151,103,.28);
  background: linear-gradient(180deg, rgba(255,253,247,.82), rgba(238,228,210,.62));
}

.ip-guide-kicker,
.ip-guide-role,
.ip-guide-copy p,
.ip-guide-head h2 {
  margin: 0;
}

.ip-guide-kicker {
  color: #806744;
  font: 500 11px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
}

.ip-guide-head h2 {
  margin-top: 4px;
  color: #2d261c;
  font: 600 16px/1.25 "PingFang SC", "Microsoft YaHei", sans-serif;
}

#ipGuideClose {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(101,82,52,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.56);
  color: #6b5638;
  font: 400 20px/24px Arial, sans-serif;
  cursor: pointer;
}

.ip-guide-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 12px 0;
}

.ip-guide-roles button,
.ip-guide-actions button {
  min-height: 34px;
  border: 1px solid rgba(156,128,78,.28);
  border-radius: 6px;
  background: rgba(255,255,255,.55);
  color: #5a4931;
  font: 500 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.ip-guide-roles button.is-active,
.ip-guide-actions button:hover {
  background: #b98d4b;
  border-color: #b98d4b;
  color: #fffaf0;
}

.ip-guide-body {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  padding: 12px 14px 10px;
}

.ip-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  color: #fffdf8;
  font: 700 18px/1 "PingFang SC", "Microsoft YaHei", sans-serif;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 8px 18px rgba(75,56,26,.22);
}

.ip-guide-body .ip-avatar {
  width: 52px;
  height: 52px;
  font-size: 20px;
}

.ip-avatar-prince {
  background: radial-gradient(circle at 30% 20%, #d9b783, #7b5a34 72%);
}

.ip-avatar-princess {
  background: radial-gradient(circle at 30% 20%, #d7ecdf, #547967 72%);
}

.ip-guide-role {
  color: #8b6735;
  font: 600 12px/1.4 "PingFang SC", "Microsoft YaHei", sans-serif;
}

#ipGuideText {
  margin-top: 4px;
  color: #2d261c;
  font: 400 14px/1.7 "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: text;
}

.ip-guide-task {
  margin: 0 14px 12px 76px;
  padding: 9px 10px;
  border-left: 3px solid #6f927d;
  background: rgba(111,146,125,.12);
  color: #536455;
  font: 400 12px/1.55 "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: text;
}

.ip-guide-actions {
  display: flex;
  gap: 8px;
  padding: 0 14px 14px 76px;
}

.ip-guide-actions button {
  flex: 1;
}

@media (max-width: 620px), (max-height: 560px) {
  .ip-guide {
    right: 10px;
    bottom: 10px;
    width: min(330px, calc(100vw - 20px));
  }
  .ip-guide-panel {
    border-radius: 8px;
  }
  .ip-guide-head {
    padding: 10px 12px 8px;
  }
  .ip-guide-body {
    grid-template-columns: 44px 1fr;
    padding: 10px 12px 8px;
  }
  .ip-guide-body .ip-avatar {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }
  #ipGuideText {
    font-size: 13px;
    line-height: 1.6;
  }
  .ip-guide-task,
  .ip-guide-actions {
    margin-left: 12px;
    padding-left: 0;
  }
  .music-toggle {
    left: 12px;
    bottom: 58px;
    height: 36px;
    padding: 0 12px 0 9px;
    font-size: 12px;
  }
  .music-mark {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }
}

/* Dialogue-style IP guide override */
.ip-guide {
  top: 86px;
  right: 22px;
  bottom: 22px;
  left: auto;
  width: 376px;
  z-index: 9200;
}

.ip-guide.is-collapsed {
  top: auto;
  bottom: 22px;
  width: auto;
}

.ip-guide-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,253,247,.96), rgba(238,232,219,.94)),
    rgba(248,244,235,.94);
}

.ip-guide-head {
  flex: 0 0 auto;
  min-height: 70px;
  padding: 14px 16px 12px;
}

.ip-guide-head h2 {
  font-size: 18px;
}

#ipGuideContext {
  display: inline-flex;
  margin-top: 5px;
  color: #7f6b4b;
  font: 400 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
}

.ip-character-stage {
  position: relative;
  flex: 0 0 168px;
  min-height: 168px;
  margin: 0 14px;
  border-bottom: 1px solid rgba(142,118,76,.16);
  overflow: hidden;
}

.ip-character-stage:before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 11px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(103,78,39,.18), rgba(103,78,39,0) 68%);
}

.ip-character {
  position: absolute;
  bottom: 0;
  height: 160px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(60,42,18,.18));
  pointer-events: none;
}

.ip-character-prince {
  left: 12px;
}

.ip-character-princess {
  right: 8px;
}

.ip-dialogue-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px 14px 8px;
}

.ip-bubble {
  position: relative;
  margin: 0 0 10px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid rgba(151,126,83,.2);
  box-shadow: 0 8px 18px rgba(70,54,27,.08);
}

.ip-bubble strong {
  display: block;
  margin-bottom: 4px;
  font: 600 12px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
}

.ip-bubble p {
  margin: 0;
  color: #2d261c;
  font: 400 14px/1.65 "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: text;
}

.ip-bubble-princess {
  margin-right: 18px;
  background: rgba(231,241,235,.86);
}

.ip-bubble-princess strong {
  color: #527765;
}

.ip-bubble-prince {
  margin-left: 18px;
  background: rgba(247,232,206,.88);
}

.ip-bubble-prince strong {
  color: #8a6231;
}

.ip-bubble-princess:after,
.ip-bubble-prince:after {
  content: "";
  position: absolute;
  top: 18px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border: inherit;
}

.ip-bubble-princess:after {
  left: -6px;
  background: rgba(231,241,235,.94);
  border-top: 0;
  border-right: 0;
}

.ip-bubble-prince:after {
  right: -6px;
  background: rgba(247,232,206,.96);
  border-bottom: 0;
  border-left: 0;
}

.ip-guide-task {
  flex: 0 0 auto;
  margin: 0 14px 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid #6f927d;
  background: rgba(111,146,125,.12);
}

.ip-guide-actions {
  flex: 0 0 auto;
  padding: 0 14px 14px;
}

.ip-guide-actions button {
  min-width: 0;
}

.mini-ip {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: -7px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
}

.mini-prince {
  background-image: url("assets/ip/niba-prince-ui.webp");
}

.mini-princess {
  background-image: url("assets/ip/ceramic-princess-ui.webp");
}

@media (max-width: 760px), (max-height: 620px) {
  .ip-guide {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 102px;
    width: auto;
    max-height: min(300px, 36vh);
  }

  .ip-guide-panel {
    width: 100%;
    max-height: min(300px, 36vh);
    border-radius: 10px;
  }

  .ip-guide-head {
    min-height: 52px;
    padding: 10px 12px 8px;
  }

  .ip-guide-kicker,
  #ipGuideContext {
    display: none;
  }

  .ip-guide-head h2 {
    margin-top: 0;
    font-size: 15px;
  }

  #ipGuideClose {
    width: 26px;
    height: 26px;
    line-height: 22px;
  }

  .ip-character-stage {
    display: none;
  }

  .ip-dialogue-list {
    padding: 10px 12px 6px;
  }

  .ip-bubble {
    margin-bottom: 7px;
    padding: 8px 10px;
  }

  .ip-bubble strong {
    margin-bottom: 3px;
    font-size: 11px;
  }

  .ip-bubble p {
    font-size: 12px;
    line-height: 1.48;
  }

  .ip-guide-task {
    margin: 0 12px 8px;
    padding: 7px 9px;
    font-size: 11px;
    line-height: 1.42;
  }

  .ip-guide-actions {
    gap: 7px;
    padding: 0 12px 10px;
  }

  .ip-guide-actions button {
    flex: 1 1 0;
    min-height: 31px;
    padding: 0 6px;
    overflow: hidden;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ip-guide.is-collapsed {
    left: auto;
    right: 12px;
    bottom: 104px;
    width: auto;
  }
}
}

/* ===== v1.4.0 学生参观、路线与无障碍层 ===== */
[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.museum-skip-link {
  position: fixed;
  top: 8px;
  left: 50%;
  z-index: 16000;
  padding: 10px 16px;
  border-radius: 6px;
  background: #fff8e8;
  color: #1d2421 !important;
  font: 600 14px/1.2 "Microsoft YaHei", sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transform: translate(-50%, -160%);
  transition: transform 160ms ease;
}

.museum-skip-link:focus {
  transform: translate(-50%, 0);
}

.museum-toolbar {
  position: fixed;
  top: 52px;
  left: 50%;
  z-index: 9700;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 28px);
  padding: 6px;
  border: 1px solid rgba(220, 196, 145, .34);
  border-radius: 10px;
  background: rgba(20, 22, 20, .86);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .26);
  color: #f4efe2;
  font-family: "Microsoft YaHei", sans-serif;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateX(-50%);
}

.museum-stat-badge {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 10px;
  color: rgba(244, 239, 226, .8);
  font-size: 12px;
  line-height: 34px;
  white-space: nowrap;
  user-select: text;
}

.museum-stat-badge strong {
  color: #e2bf79;
  font-size: 14px;
  font-weight: 700;
}

.museum-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.museum-toolbar button,
.nearby-tools button,
.route-actions button {
  appearance: none;
  -webkit-appearance: none;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #f4efe2;
  font: 500 12px/1 "Microsoft YaHei", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.museum-toolbar button:hover,
.museum-toolbar button[aria-expanded="true"] {
  border-color: rgba(226, 191, 121, .42);
  background: rgba(226, 191, 121, .14);
  color: #f5d99f;
}

#entranceButton {
  border-color: rgba(226, 191, 121, .44);
  color: #f5d99f;
}

.scene-guide {
  position: fixed;
  left: 18px;
  bottom: 94px;
  z-index: 9650;
  width: min(370px, calc(100vw - 36px));
  padding: 18px 18px 16px;
  border: 1px solid rgba(224, 205, 163, .48);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(27, 38, 33, .96), rgba(43, 35, 28, .94));
  color: #f5efe1;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .34);
  font-family: "Microsoft YaHei", sans-serif;
  user-select: text;
  -webkit-user-select: text;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.scene-guide-close {
  appearance: none;
  position: absolute;
  top: 9px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #eee4d1;
  font: 300 22px/28px sans-serif;
  cursor: pointer;
}

.scene-guide-kicker {
  margin: 0 34px 5px 0;
  color: #dfb96d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
}

.scene-guide h2 {
  margin: 0 32px 8px 0;
  color: #fff8e8;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.scene-guide-body {
  margin: 0;
  color: rgba(245, 239, 225, .82);
  font-size: 12px;
  line-height: 1.72;
}

.scene-guide-points {
  display: grid;
  gap: 5px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

.scene-guide-points li {
  position: relative;
  padding-left: 15px;
  color: #eee6d7;
  font-size: 11px;
  line-height: 1.55;
}

.scene-guide-points li:before {
  position: absolute;
  top: .62em;
  left: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c58b58;
  content: "";
}

.scene-guide-status {
  margin: 11px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(238, 225, 194, .15);
  color: rgba(239, 204, 139, .76);
  font-size: 10px;
  line-height: 1.45;
}

.scene-guide-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.scene-guide-actions button {
  appearance: none;
  min-height: 35px;
  padding: 0 13px;
  border: 1px solid rgba(226, 191, 121, .36);
  border-radius: 7px;
  background: rgba(255, 255, 255, .06);
  color: #f5efe1;
  font: 600 11px/1 "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.scene-guide-actions .scene-guide-primary {
  flex: 1 1 auto;
  border-color: #b7794d;
  background: #a85f3d;
  color: #fffaf0;
}

.scene-guide button:focus-visible {
  outline: 3px solid #ffd36f;
  outline-offset: 3px;
}

.museum-panel {
  position: fixed;
  top: 108px;
  right: 18px;
  z-index: 10800;
  width: min(390px, calc(100vw - 36px));
  max-height: calc(100vh - 126px);
  overflow: auto;
  border: 1px solid rgba(224, 205, 163, .44);
  border-radius: 12px;
  background: rgba(247, 244, 235, .97);
  color: #202622;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .36);
  font-family: "Microsoft YaHei", sans-serif;
  user-select: text;
  -webkit-user-select: text;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.museum-panel-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 13px;
  border-bottom: 1px solid #d9d6cb;
  background: rgba(31, 40, 36, .98);
  color: #f7f1e3;
}

.museum-panel-kicker {
  margin: 0 0 5px;
  color: #d8bb80;
  font-size: 11px;
  letter-spacing: 1px;
}

.museum-panel-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.museum-panel-close,
.museum-guide-close {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font: 300 24px/32px Arial, sans-serif;
  cursor: pointer;
}

.museum-guide-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-right: 46px;
}

.museum-guide-brand img {
  width: 74px;
  height: 99px;
  flex: 0 0 auto;
  border: 1px solid rgba(154, 103, 75, .18);
  border-radius: 10px;
  background: #f4f4f3;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(63, 45, 36, .12);
}

.museum-guide-brand > div {
  min-width: 0;
}

.museum-panel-summary {
  margin: 0;
  padding: 13px 18px;
  border-bottom: 1px solid #e1ded4;
  color: #59625e;
  font-size: 12px;
  line-height: 1.65;
}

.nearby-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px 7px 18px;
  color: #747b77;
  font-size: 10px;
}

.nearby-tools button {
  min-height: 30px;
  padding: 0 8px;
  border-color: #cfc9bb;
  color: #46504b;
  font-size: 10px;
}

.nearby-list,
.route-list {
  margin: 0;
  padding: 0 10px 12px;
  list-style: none;
}

.nearby-list li,
.route-list li {
  margin: 0;
  padding: 0;
}

.nearby-item,
.route-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 8px;
  border: 0;
  border-bottom: 1px solid #dedbd1;
  background: transparent;
  color: #222a26;
  text-align: left;
  cursor: pointer;
}

.nearby-item:hover,
.route-item:hover,
.route-item.is-current {
  border-radius: 8px;
  background: #ece5d5;
}

.nearby-order,
.route-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #b9a477;
  border-radius: 50%;
  color: #806c43;
  font: 600 10px/1 "Microsoft YaHei", sans-serif;
}

.nearby-copy,
.route-copy {
  display: block;
  min-width: 0;
}

.nearby-copy strong,
.route-copy strong {
  display: block;
  overflow: hidden;
  color: #242b27;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nearby-copy small,
.route-copy small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #747b77;
  font-size: 10px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nearby-copy em {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 5px;
  border-radius: 8px;
  background: #a65b3d;
  color: #fff;
  font-size: 8px;
  font-style: normal;
  vertical-align: 2px;
}

.nearby-distance {
  color: #8b7550;
  font-size: 10px;
  white-space: nowrap;
}

.route-item {
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 66px;
}

.route-item.is-visited .route-order {
  border-color: #657b6d;
  background: #657b6d;
  color: #fff;
}

.route-item.is-current .route-order {
  border-color: #a65b3d;
  background: #a65b3d;
  color: #fff;
}

.route-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 11px 12px 12px;
  border-top: 1px solid #d8d4c9;
  background: rgba(247, 244, 235, .98);
}

.route-actions button {
  min-height: 38px;
  overflow: hidden;
  border-color: #c8c0ae;
  color: #35403a;
  font-size: 10px;
  text-overflow: ellipsis;
}

.route-actions .route-primary {
  grid-column: 1 / -1;
  border-color: #8c5a3f;
  background: #8c5a3f;
  color: #fff8eb;
  font-size: 12px;
}

.route-actions button:disabled {
  opacity: .46;
  cursor: default;
}

.museum-empty-state {
  padding: 28px 12px;
  color: #6d7570;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.museum-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: auto;
  background: rgba(8, 11, 9, .74);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.museum-guide {
  position: relative;
  width: min(820px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 34px 36px 28px;
  border: 1px solid rgba(222, 195, 137, .58);
  border-radius: 16px;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .94), rgba(244, 239, 225, .98)),
    #f5f0e4;
  color: #242b27;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .46);
  font-family: "Microsoft YaHei", sans-serif;
  user-select: text;
  -webkit-user-select: text;
}

.museum-guide-close {
  position: absolute;
  top: 16px;
  right: 16px;
  border-color: #c9c2b2;
  background: rgba(36, 43, 39, .05);
  color: #36403b;
}

.museum-guide-kicker {
  margin: 0 0 8px;
  color: #9a674b;
  font-size: 12px;
  letter-spacing: 2px;
}

.museum-guide h2 {
  margin: 0;
  padding-right: 40px;
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 600;
  line-height: 1.25;
}

.museum-guide-intro {
  max-width: 680px;
  margin: 14px 0 22px;
  color: #5b645f;
  font-size: 14px;
  line-height: 1.75;
}

.museum-guide-intro strong {
  color: #92583d;
}

.museum-guide-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.museum-guide-steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  min-height: 96px;
  padding: 15px;
  border: 1px solid #ddd6c7;
  border-radius: 10px;
  background: rgba(255, 255, 255, .54);
}

.museum-guide-steps > li > span {
  color: #a85e40;
  font: 600 13px/1.4 Georgia, serif;
}

.museum-guide-steps strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.museum-guide-steps p {
  margin: 0;
  color: #68706c;
  font-size: 12px;
  line-height: 1.6;
}

.museum-keyboard-help {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #28322d;
  color: #eae2d0;
  font-size: 11px;
}

.museum-keyboard-help span {
  white-space: nowrap;
}

.museum-keyboard-help kbd {
  display: inline-block;
  min-width: 24px;
  margin-right: 4px;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 4px;
  background: rgba(255, 255, 255, .09);
  color: #f2cf89;
  font: 600 10px/1.2 Consolas, monospace;
  text-align: center;
}

.museum-guide-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.museum-guide-actions button {
  appearance: none;
  -webkit-appearance: none;
  min-width: 150px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: #92583d;
  color: #fff9ee;
  font: 600 14px/1 "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.museum-guide-actions span {
  color: #7d837f;
  font-size: 11px;
}

.museum-panel-open #ipGuide,
.museum-guide-open #ipGuide {
  opacity: 0;
  pointer-events: none;
}

.museum-toolbar button:focus-visible,
.museum-panel button:focus-visible,
.museum-guide button:focus-visible,
.hotspot:focus-visible,
.info-hotspot-header:focus-visible,
.info-hotspot-close-wrapper:focus-visible,
#modelModal button:focus-visible,
#modelEntry:focus-visible,
#musicToggle:focus-visible,
#catalogToggle:focus-visible,
#sceneList a:focus-visible,
#sceneListToggle:focus-visible,
#autorotateToggle:focus-visible,
#fullscreenToggle:focus-visible,
.viewControlButton:focus-visible,
#pano:focus-visible {
  outline: 3px solid #ffd36f !important;
  outline-offset: 3px !important;
}

#pano:focus-visible {
  outline-offset: -6px !important;
}

@media (max-width: 700px) {
  .museum-brand {
    min-width: 74px;
    gap: 5px;
    padding: 5px 7px;
  }

  .museum-brand img {
    width: 20px;
    height: 27px;
  }

  .museum-brand strong {
    font-size: 13px;
  }

  .museum-brand small {
    display: none;
  }

  .museum-toolbar {
    top: 58px;
    left: 8px;
    right: 8px;
    max-width: none;
    overflow: hidden;
    transform: none;
  }

  .museum-stat-badge {
    padding: 0 7px;
    font-size: 10px;
  }

  .museum-stat-badge strong {
    font-size: 12px;
  }

  .museum-toolbar-actions {
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .museum-toolbar-actions::-webkit-scrollbar {
    display: none;
  }

  .museum-toolbar button {
    min-height: 32px;
    padding: 0 9px;
    font-size: 11px;
  }

  .catalog-toggle {
    top: 112px;
  }

  .scene-guide {
    left: 8px;
    bottom: 86px;
    width: min(350px, calc(100vw - 16px));
    max-height: 48vh;
    overflow: auto;
    padding: 15px 15px 13px;
  }

  .scene-guide h2 {
    font-size: 17px;
  }

  .scene-guide-body,
  .scene-guide-points li {
    font-size: 11px;
  }

  .museum-panel {
    top: 112px;
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    max-height: none;
  }

  .museum-guide-overlay {
    place-items: start center;
    padding: 10px;
  }

  .museum-guide {
    max-height: calc(100vh - 20px);
    padding: 27px 18px 20px;
    border-radius: 12px;
  }

  .museum-guide-kicker {
    padding-right: 0;
    font-size: 10px;
  }

  .museum-guide-brand {
    align-items: flex-start;
    gap: 11px;
    padding-right: 36px;
  }

  .museum-guide-brand img {
    width: 50px;
    height: 67px;
    border-radius: 7px;
  }

  .museum-guide h2 {
    font-size: 23px;
  }

  .museum-guide-intro {
    margin: 10px 0 14px;
    font-size: 12px;
  }

  .museum-guide-steps {
    grid-template-columns: 1fr;
  }

  .museum-guide-steps li {
    min-height: 0;
    padding: 11px;
  }

  .museum-keyboard-help {
    display: none;
  }

  .museum-guide-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .museum-guide-actions button {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .museum-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 3px;
  }

  .museum-stat-badge {
    line-height: 23px;
    text-align: center;
  }

  .museum-toolbar-actions {
    width: 100%;
  }

  .catalog-toggle {
    top: 139px;
  }

  .museum-panel {
    top: 106px;
  }

  .scene-guide {
    bottom: 80px;
    max-height: 42vh;
  }

  .scene-guide-points {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .museum-skip-link,
  .museum-toolbar *,
  .museum-panel *,
  .museum-guide *,
  .scene-guide * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ===== v1.5.0 资料证据与课堂学习 ===== */
.catalog-stats .museum strong {
  color: #376454;
}

.catalog-evidence-guide {
  flex: 0 0 auto;
  border-bottom: 1px solid #d7d7cf;
  background: #eef2ed;
  color: #35413b;
  font-family: "Microsoft YaHei", sans-serif;
}

.catalog-evidence-guide > summary {
  padding: 11px 17px;
  color: #3e5a4e;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

#catalogEvidenceContent {
  max-height: 250px;
  padding: 0 17px 14px;
  overflow: auto;
}

.catalog-evidence-intro,
.catalog-evidence-method,
.catalog-evidence-date {
  margin: 0;
  color: #59645e;
  font-size: 11px;
  line-height: 1.7;
}

.catalog-evidence-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.catalog-evidence-facts li {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #d1d8d3;
  border-radius: 5px;
  background: rgba(255, 255, 255, .72);
}

.catalog-evidence-facts strong,
.catalog-evidence-facts span {
  display: block;
}

.catalog-evidence-facts strong {
  color: #3e5a4e;
  font-size: 16px;
}

.catalog-evidence-facts span {
  margin-top: 3px;
  color: #6b746f;
  font-size: 9px;
  line-height: 1.45;
}

.catalog-evidence-facts .pending strong,
.catalog-evidence-facts .ai strong {
  color: #9b5d3f;
}

.catalog-evidence-facts .contextual strong {
  color: #665582;
}

.catalog-evidence-method {
  padding: 9px 10px;
  border-left: 3px solid #a65b3d;
  background: #f7f0e8;
}

.catalog-evidence-date {
  margin-top: 8px;
  color: #7d837f;
  font-size: 10px;
}

.catalog-media-disclaimer {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  padding: 5px 6px;
  border-radius: 4px;
  background: rgba(117, 57, 38, .9);
  color: #fff7ec;
  font: 600 9px/1.3 "Microsoft YaHei", sans-serif;
  text-align: center;
}

.catalog-media-disclaimer.teaching-authorized {
  background: rgba(39, 83, 65, .92);
  color: #f4fff8;
}

.catalog-evidence-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  margin: 7px 0;
  padding: 7px 8px;
  border-left: 3px solid #4f7564;
  border-radius: 3px;
  background: #edf3ef;
}

.catalog-evidence-band.pending,
.catalog-evidence-band.ai,
.catalog-evidence-band.source-missing {
  border-left-color: #a65b3d;
  background: #f6ede7;
}

.catalog-evidence-band.source-registered {
  border-left-color: #9a783b;
  background: #f6f1e6;
}

.catalog-evidence-band.contextual {
  border-left-color: #75618c;
  background: #f1edf5;
}

.catalog-evidence-band span {
  color: #77817c;
  font-size: 9px;
}

.catalog-evidence-band strong {
  min-width: 0;
  color: #3a4b43;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.catalog-card details h4 {
  margin: 12px 0 5px;
  color: #354c42;
  font: 600 12px/1.4 "Microsoft YaHei", sans-serif;
}

.catalog-evidence-block {
  margin-top: 9px;
  padding: 3px 9px 9px;
  border: 1px solid #d5ddd8;
  border-radius: 5px;
  background: #f2f6f3;
}

.catalog-evidence-block.pending,
.catalog-evidence-block.ai,
.catalog-evidence-block.source-missing {
  border-color: #e1cfc4;
  background: #faf3ee;
}

.catalog-evidence-block.source-registered {
  border-color: #dfd2b8;
  background: #faf7ef;
}

.catalog-evidence-block.contextual {
  border-color: #d9cfe2;
  background: #f7f3f9;
}

.catalog-card details .catalog-evidence-boundary {
  margin-top: 8px;
  padding: 7px 8px;
  border-left: 3px solid #a65b3d;
  background: rgba(255, 255, 255, .72);
  color: #695a50;
  font-size: 10px;
  line-height: 1.6;
}

.catalog-teaching-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 0;
}

.catalog-teaching-preview > div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #cfdcd4;
  border-radius: 5px;
  background: #f0f6f2;
}

.catalog-teaching-preview > .question {
  border-color: #e2cdbf;
  background: #faf1eb;
}

.catalog-teaching-preview strong {
  display: block;
  color: #315847;
  font: 600 10px/1.4 "Microsoft YaHei", sans-serif;
}

.catalog-teaching-preview .question strong { color: #8a4e31; }

.catalog-teaching-preview p {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: #4f5d56;
  font-size: 10px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.catalog-teaching-evidence,
.catalog-image-rights {
  margin-top: 9px;
  padding: 4px 10px 10px;
  border: 1px solid #d5ddd8;
  border-radius: 5px;
  background: #f4f7f5;
}

.catalog-teaching-evidence > h4:first-child { color: #315847; }

.catalog-teaching-evidence > h4:nth-of-type(2) { color: #8a4e31; }

.catalog-teaching-evidence ul,
.catalog-teaching-evidence ol {
  margin: 5px 0 0;
  padding-left: 20px;
  color: #45514b;
  font: 11px/1.65 "Microsoft YaHei", sans-serif;
}

.catalog-teaching-evidence li + li { margin-top: 5px; }

.catalog-card details .catalog-teaching-use,
.catalog-card details .catalog-rights-guidance {
  margin-top: 9px;
  padding: 7px 8px;
  border-left: 3px solid #4f7564;
  background: rgba(255, 255, 255, .8);
  color: #45564e;
  font-size: 10px;
}

.catalog-image-rights.source_traced_rights_unconfirmed,
.catalog-image-rights.open_terms_resolution_review_required {
  border-color: #e2cdbf;
  background: #faf4ef;
}

.catalog-image-rights.teaching_display_authorized {
  border-color: #bfd4c8;
  background: #f0f7f3;
}

.catalog-image-rights.project_ai_reference {
  border-color: #d9cfe2;
  background: #f7f3f9;
}

.catalog-card details .catalog-rights-note {
  color: #786f69;
  font-size: 10px;
}

.catalog-rights-link {
  display: inline-block;
  margin-top: 8px;
  color: #8b4c32;
  font: 600 10px/1.4 "Microsoft YaHei", sans-serif;
}

.catalog-period-features dl {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0;
  color: #53605a;
  font: 10px/1.55 "Microsoft YaHei", sans-serif;
}

.catalog-period-features dt {
  color: #9b5d3f;
  font-weight: 600;
}

.catalog-period-features dd {
  margin: 0;
}

.catalog-references ul {
  margin: 0;
  padding-left: 18px;
  color: #5b6560;
  font: 10px/1.6 "Microsoft YaHei", sans-serif;
}

.catalog-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.catalog-source-link,
.catalog-citation-copy {
  appearance: none;
  -webkit-appearance: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #b98b74;
  border-radius: 5px;
  background: #fff;
  color: #8e4e35;
  font: 500 10px/1.3 "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.catalog-citation-copy {
  border-color: #8ba094;
  color: #3e5a4e;
}

.hotspot-evidence {
  margin: 8px 0 10px;
  padding: 8px 9px;
  border-left: 3px solid #8fc1a9;
  border-radius: 3px;
  background: rgba(223, 240, 231, .1);
  color: #e8eee9;
  font-family: "Microsoft YaHei", sans-serif;
}

.hotspot-evidence.pending,
.hotspot-evidence.ai {
  border-left-color: #df9a75;
  background: rgba(166, 91, 61, .14);
}

.hotspot-evidence > strong,
.hotspot-evidence > span {
  display: block;
}

.hotspot-evidence > strong {
  font-size: 11px;
}

.hotspot-evidence > span {
  margin-top: 3px;
  color: #c8dbd1;
  font-size: 9px;
}

.hotspot-evidence > p {
  margin: 6px 0 0;
  color: #d9ddd9;
  font-size: 10px;
  line-height: 1.55;
}

.hotspot-evidence > a {
  display: inline-block;
  margin-top: 7px;
  color: #f3cf8c;
  font-size: 10px;
  text-decoration: underline;
}

.prototype-model-notice {
  margin: 8px 0 10px;
  padding: 8px 9px;
  border: 1px solid rgba(239, 190, 105, .46);
  border-radius: 4px;
  background: rgba(148, 88, 42, .2);
  color: #ffe3ad;
  font: 600 10px/1.55 "Microsoft YaHei", sans-serif;
}

.prototype-model-hotspot .info-hotspot-icon-wrapper {
  box-shadow: inset 0 0 0 2px rgba(241, 183, 88, .7);
}

.learning-panel {
  width: min(430px, calc(100vw - 36px));
}

.learning-objective,
.learning-pair,
.learning-questions {
  padding: 13px 16px 0;
}

.learning-objective h3,
.learning-pair h3,
.learning-questions h3 {
  margin: 0 0 7px;
  color: #34483f;
  font: 600 13px/1.4 "Microsoft YaHei", sans-serif;
}

.learning-objective p {
  margin: 0;
  color: #4f5b55;
  font-size: 12px;
  line-height: 1.7;
}

.learning-objective small {
  display: block;
  margin-top: 7px;
  padding: 8px 9px;
  border-left: 3px solid #a65b3d;
  background: #f3ece3;
  color: #6b5c52;
  font-size: 10px;
  line-height: 1.6;
}

.learning-objects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.learning-object {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 94px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 9px;
  border: 1px solid #ccd5d0;
  border-radius: 7px;
  background: #fff;
  color: #27322d;
  text-align: left;
  cursor: pointer;
}

.learning-object.pending,
.learning-object.ai {
  border-color: #ddc8bb;
  background: #fffaf6;
}

.learning-object:hover {
  background: #edf3ef;
}

.learning-object-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4f7564;
  color: #fff;
  font: 700 12px/1 "Microsoft YaHei", sans-serif;
}

.learning-object.pending .learning-object-letter,
.learning-object.ai .learning-object-letter {
  background: #a65b3d;
}

.learning-object-copy {
  min-width: 0;
}

.learning-object-copy strong,
.learning-object-copy small,
.learning-object-copy em {
  display: block;
}

.learning-object-copy strong {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learning-object-copy small {
  margin-top: 3px;
  color: #6c7771;
  font-size: 9px;
  line-height: 1.4;
}

.learning-object-copy em {
  margin-top: 5px;
  color: #4f7564;
  font-size: 8px;
  font-style: normal;
  line-height: 1.4;
}

.learning-object.pending em,
.learning-object.ai em {
  color: #9b5d3f;
}

.learning-questions ol,
#learningQuestions {
  margin: 0;
  padding: 0 0 0 22px;
  color: #4d5953;
  font-size: 11px;
  line-height: 1.7;
}

#learningQuestions li + li {
  margin-top: 5px;
}

.learning-notes-label {
  display: block;
  margin: 13px 16px 6px;
  color: #34483f;
  font: 600 13px/1.4 "Microsoft YaHei", sans-serif;
}

#learningNotes {
  width: calc(100% - 32px);
  min-height: 128px;
  display: block;
  margin: 0 16px;
  padding: 10px 11px;
  resize: vertical;
  border: 1px solid #bdc8c2;
  border-radius: 6px;
  background: #fff;
  color: #26322d;
  font: 12px/1.7 "Microsoft YaHei", sans-serif;
  user-select: text;
  -webkit-user-select: text;
}

#learningNotes:focus {
  border-color: #567666;
  outline: 3px solid rgba(86, 118, 102, .18);
}

.learning-note-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 17px 0;
  color: #7b837f;
  font-size: 9px;
}

.learning-actions {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 11px;
  padding: 10px 12px 12px;
  border-top: 1px solid #d8d4c9;
  background: rgba(247, 244, 235, .98);
}

.learning-actions button {
  appearance: none;
  -webkit-appearance: none;
  min-height: 39px;
  border: 1px solid #9caaa2;
  border-radius: 6px;
  background: #fff;
  color: #40544a;
  font: 500 11px/1.2 "Microsoft YaHei", sans-serif;
  cursor: pointer;
}

.learning-actions .learning-primary {
  border-color: #8c5a3f;
  background: #8c5a3f;
  color: #fff8eb;
}

.learning-actions button:disabled {
  opacity: .45;
  cursor: default;
}

@media (max-width: 520px) {
  .catalog-evidence-facts,
  .catalog-teaching-preview,
  .learning-objects {
    grid-template-columns: 1fr;
  }

  .learning-object {
    min-height: 76px;
  }
}

/* Legacy pet-style IP guide generations, disabled by v1.16.0. */
@media not all {
/* Pet-style floating guide: compact overlay, transparent characters, speech bubble only */
.ip-guide {
  top: auto;
  left: auto;
  right: 22px;
  bottom: 92px;
  width: 390px;
  height: 238px;
  z-index: 9200;
  pointer-events: none;
}

.ip-guide * {
  pointer-events: auto;
}

.ip-pet-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.ip-guide-toggle {
  position: absolute;
  right: 8px;
  bottom: 4px;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px 0 8px;
  border-radius: 18px;
  border: 1px solid rgba(229,204,160,.74);
  background: rgba(34,31,27,.82);
  color: #f6ead7;
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ip-pet-bubble {
  position: absolute;
  right: 126px;
  bottom: 82px;
  z-index: 7;
  width: 262px;
  padding: 12px 13px 11px;
  border-radius: 10px;
  border: 1px solid rgba(229,204,160,.72);
  background: rgba(255,251,241,.95);
  color: #2c2419;
  box-shadow: 0 16px 38px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ip-pet-bubble:after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 28px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border-top: 1px solid rgba(229,204,160,.72);
  border-right: 1px solid rgba(229,204,160,.72);
  background: rgba(255,251,241,.95);
}

.ip-bubble-close {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(116,91,52,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.62);
  color: #806342;
  font: 400 18px/20px Arial, sans-serif;
  cursor: pointer;
}

.ip-bubble-meta {
  padding-right: 26px;
  margin-bottom: 7px;
}

.ip-bubble-meta strong {
  display: block;
  overflow: hidden;
  color: #30261a;
  font: 650 15px/1.22 "PingFang SC", "Microsoft YaHei", sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ip-bubble-meta span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #806a4c;
  font: 400 11px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ip-dialogue-list {
  display: grid;
  gap: 7px;
  max-height: none;
  overflow: visible;
  padding: 0;
}

.ip-line {
  margin: 0;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid rgba(142,118,76,.14);
}

.ip-line b {
  display: block;
  margin-bottom: 3px;
  font: 650 11px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
}

.ip-line span {
  display: block;
  color: #30261a;
  font: 400 12px/1.55 "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: text;
}

.ip-line-princess {
  background: rgba(231,241,235,.9);
}

.ip-line-princess b {
  color: #527765;
}

.ip-line-prince {
  background: rgba(247,232,206,.9);
}

.ip-line-prince b {
  color: #8a6231;
}

.ip-guide-task {
  display: none;
}

.ip-guide-actions {
  display: flex;
  gap: 7px;
  padding: 8px 0 0;
}

.ip-guide-actions button {
  flex: 1 1 0;
  min-height: 30px;
  border-radius: 7px;
  font-size: 11px;
}

.ip-pet-figures {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 186px;
  height: 152px;
  pointer-events: none;
}

.ip-pet-figures:before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.23), rgba(0,0,0,0) 70%);
}

.ip-character {
  position: absolute;
  bottom: 0;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.28));
  pointer-events: none;
}

.ip-character-prince {
  right: 74px;
  height: 126px;
}

.ip-character-princess {
  right: 0;
  height: 138px;
}

.ip-guide.is-collapsed {
  width: 206px;
  height: 154px;
}

.ip-guide.is-collapsed .ip-pet-bubble {
  display: none;
}

.ip-guide.is-collapsed .ip-guide-toggle {
  display: inline-flex;
}

.mini-ip {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: -8px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
}

.mini-prince {
  background-image: url("assets/ip/niba-prince-ui.webp");
}

.mini-princess {
  background-image: url("assets/ip/ceramic-princess-ui.webp");
}

@media (max-width: 760px), (max-height: 620px) {
  .ip-guide {
    left: auto !important;
    right: 10px !important;
    bottom: 88px;
    width: min(350px, calc(100vw - 20px)) !important;
    height: 142px;
    max-height: none;
    overflow: visible;
  }

  .ip-pet-shell {
    height: 142px;
    overflow: visible;
  }

  .ip-pet-bubble {
    left: auto !important;
    right: 92px !important;
    bottom: 30px !important;
    width: min(246px, calc(100vw - 124px)) !important;
    max-height: 106px;
    padding: 9px 10px 8px;
    overflow: hidden;
  }

  .ip-pet-bubble:after {
    right: -7px;
    bottom: 22px;
  }

  .ip-bubble-close,
  .ip-bubble-meta span,
  .ip-guide-task {
    display: none;
  }

  .ip-bubble-meta {
    margin-bottom: 5px;
    padding-right: 0;
  }

  .ip-bubble-meta strong {
    font-size: 13px;
  }

  .ip-dialogue-list {
    gap: 5px;
    max-height: 54px;
    overflow: hidden;
  }

  .ip-line {
    padding: 6px 7px;
  }

  .ip-line-prince {
    display: none;
  }

  .ip-line b {
    font-size: 10px;
  }

  .ip-line span {
    font-size: 11px;
    line-height: 1.42;
  }

  .ip-guide-actions {
    padding-top: 6px;
  }

  .ip-guide-actions button {
    min-height: 27px;
    padding: 0 5px;
    font-size: 10px;
  }

  .ip-pet-figures {
    display: block !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 112px;
    height: 92px;
    z-index: 5;
  }

  .ip-character-prince {
    right: 44px;
    height: 74px;
  }

  .ip-character-princess {
    right: 0;
    height: 84px;
  }

  .ip-guide.is-collapsed {
    left: auto;
    right: 10px;
    bottom: 88px;
    width: 136px;
    height: 112px;
  }

  .ip-guide.is-collapsed .ip-guide-toggle {
    right: 0;
    bottom: 0;
  }
}

/* Micro companion guide: pet-sized cutout figures with a compact speech bubble */
.ip-guide {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 18px !important;
  bottom: 86px !important;
  width: 360px !important;
  height: 218px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: none !important;
  z-index: 9600 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.ip-guide,
.ip-guide * {
  box-sizing: border-box;
}

.ip-pet-shell {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.ip-pet-bubble {
  position: absolute !important;
  right: 132px !important;
  bottom: 96px !important;
  left: auto !important;
  width: 224px !important;
  max-width: calc(100vw - 156px) !important;
  max-height: 118px !important;
  padding: 10px 11px 9px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  border: 1px solid rgba(229,204,160,.78) !important;
  background: rgba(255,251,241,.96) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.26) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ip-pet-bubble:after {
  right: -7px !important;
  bottom: 25px !important;
  width: 12px !important;
  height: 12px !important;
}

.ip-bubble-close {
  top: 6px !important;
  right: 6px !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 16px !important;
  line-height: 18px !important;
}

.ip-bubble-meta {
  margin-bottom: 6px !important;
  padding-right: 24px !important;
}

.ip-bubble-meta strong {
  font-size: 13px !important;
  line-height: 1.18 !important;
}

.ip-bubble-meta span {
  font-size: 10px !important;
}

.ip-dialogue-list {
  display: grid !important;
  gap: 5px !important;
  max-height: 58px !important;
  overflow: hidden !important;
}

.ip-line {
  padding: 6px 7px !important;
  border-radius: 8px !important;
}

.ip-line b {
  margin-bottom: 2px !important;
  font-size: 10px !important;
}

.ip-line span {
  display: -webkit-box !important;
  overflow: hidden !important;
  font-size: 11px !important;
  line-height: 1.38 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ip-guide-task {
  display: none !important;
}

.ip-guide-actions {
  display: flex !important;
  gap: 6px !important;
  padding: 6px 0 0 !important;
}

.ip-guide-actions button {
  min-height: 25px !important;
  padding: 0 7px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
}

.ip-pet-figures {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: 220px !important;
  height: 138px !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

.ip-character {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.32)) !important;
  transform-origin: 50% 100%;
  will-change: transform;
}

.ip-character-prince {
  right: 130px !important;
  height: 112px !important;
  animation: ipPrinceIdle 3.8s ease-in-out infinite;
}

.ip-character-princess {
  right: 0 !important;
  height: 124px !important;
  animation: ipPrincessIdle 4.2s ease-in-out .35s infinite;
}

@keyframes ipPrinceIdle {
  0%, 100% { transform: translateY(0) rotate(-.4deg); }
  50% { transform: translateY(-3px) rotate(.4deg); }
}

@keyframes ipPrincessIdle {
  0%, 100% { transform: translateY(0) rotate(.3deg); }
  50% { transform: translateY(-3px) rotate(-.3deg); }
}

.ip-guide.is-collapsed {
  width: 170px !important;
  height: 140px !important;
}

.ip-guide.is-collapsed .ip-pet-bubble {
  display: none !important;
}

.ip-guide.is-collapsed .ip-pet-figures {
  right: 0 !important;
  bottom: 0 !important;
}

.ip-guide-toggle {
  position: absolute !important;
  right: 6px !important;
  bottom: 2px !important;
  z-index: 8 !important;
  height: 32px !important;
  padding: 0 11px 0 8px !important;
  border-radius: 18px !important;
  background: rgba(34,31,27,.84) !important;
}

.ip-guide.is-collapsed .ip-guide-toggle {
  display: inline-flex !important;
}

@media (max-width: 760px), (max-height: 620px) {
  .ip-guide {
    right: 8px !important;
    bottom: 112px !important;
    width: 286px !important;
    height: 170px !important;
    max-width: calc(100vw - 16px) !important;
  }

  .ip-pet-bubble {
    right: 82px !important;
    bottom: 78px !important;
    width: 196px !important;
    max-width: calc(100vw - 106px) !important;
    max-height: 104px !important;
    padding: 8px 9px 7px !important;
  }

  .ip-pet-bubble:after {
    right: -6px !important;
    bottom: 19px !important;
  }

  .ip-bubble-close,
  .ip-bubble-meta span,
  .ip-line-prince {
    display: none !important;
  }

  .ip-bubble-meta {
    margin-bottom: 4px !important;
    padding-right: 0 !important;
  }

  .ip-bubble-meta strong {
    font-size: 12px !important;
  }

  .ip-dialogue-list {
    max-height: 58px !important;
    gap: 0 !important;
  }

  .ip-line {
    padding: 5px 6px !important;
  }

  .ip-line b {
    font-size: 9px !important;
  }

  .ip-line span {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .ip-guide-actions {
    position: absolute !important;
    right: 0 !important;
    bottom: -31px !important;
    width: 118px !important;
    padding: 0 !important;
  }

  .ip-guide-actions button {
    min-height: 26px !important;
    padding: 0 6px !important;
  }

  .ip-pet-figures {
    width: 160px !important;
    height: 96px !important;
  }

  .ip-character-prince {
    right: 94px !important;
    height: 78px !important;
  }

  .ip-character-princess {
    right: 0 !important;
    height: 88px !important;
  }

  .ip-guide.is-collapsed {
    right: 8px !important;
    bottom: 112px !important;
    width: 126px !important;
    height: 110px !important;
  }

  .ip-guide.is-collapsed .ip-guide-toggle {
    right: 0 !important;
    bottom: 0 !important;
  }
}

/* Persistent museum-wide IP guide and lightweight 2D character motion */
.ip-guide.is-hidden {
  display: none !important;
}

.ip-guide-toggle,
.ip-guide.is-collapsed .ip-guide-toggle {
  display: none !important;
}

.ip-guide.is-collapsed .ip-pet-bubble {
  display: none !important;
}

.ip-guide-voice-status {
  margin: 8px 0 0 !important;
  color: #7d5135 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.ip-guide-voice-status[hidden] {
  display: none !important;
}

.ip-pet-figures {
  width: 260px !important;
  height: 142px !important;
  pointer-events: none !important;
}

.ip-character {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  bottom: 0 !important;
  width: auto !important;
  aspect-ratio: 6 / 7;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  overflow: visible !important;
  pointer-events: auto !important;
  filter: none !important;
}

.ip-character-img {
  display: block;
  width: auto;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.32));
  transition: filter .18s ease, opacity .18s ease;
}

.ip-character-prince {
  right: 148px !important;
  height: 124px !important;
}

.ip-character-princess {
  right: 0 !important;
  height: 124px !important;
}

.ip-guide.is-prince-active .ip-character-prince .ip-character-img,
.ip-guide.is-princess-active .ip-character-princess .ip-character-img {
  filter: drop-shadow(0 13px 18px rgba(0,0,0,.38)) brightness(1.05);
}

.ip-guide.is-prince-active .ip-character-princess .ip-character-img,
.ip-guide.is-princess-active .ip-character-prince .ip-character-img {
  opacity: .9;
}

.ip-guide.is-speaking-prince .ip-line-prince,
.ip-guide.is-speaking-princess .ip-line-princess {
  border-color: rgba(201,168,106,.48);
  box-shadow: inset 0 0 0 1px rgba(201,168,106,.18);
}

#modelModal.visible ~ #musicToggle.music-toggle {
  top: auto !important;
  left: 20px !important;
  bottom: 20px !important;
}

@media (max-width: 760px), (max-height: 620px) {
  .ip-pet-figures {
    width: 178px !important;
    height: 98px !important;
  }

  .ip-character-prince {
    right: 106px !important;
    height: 88px !important;
  }

  .ip-character-princess {
    right: 0 !important;
    height: 88px !important;
  }

  .ip-pet-bubble {
    right: 98px !important;
    bottom: 82px !important;
  }

  .ip-bubble-close {
    display: block !important;
    top: 5px !important;
    right: 5px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 14px !important;
    line-height: 16px !important;
  }

  .ip-bubble-meta {
    padding-right: 19px !important;
  }

  .ip-guide-actions {
    right: 24px !important;
  }

  #modelModal.visible ~ #musicToggle.music-toggle {
    top: 64px !important;
    left: 14px !important;
    bottom: auto !important;
  }
}
}

/* ===== v1.16.0 unified IP guide: persistent launcher + contextual panel ===== */
.ip-guide {
  --ip-surface: #fffaf0;
  --ip-surface-strong: #fffdf8;
  --ip-text: #2f281f;
  --ip-muted: #6f624f;
  --ip-border: rgba(137, 108, 66, .28);
  --ip-primary: #80543d;
  --ip-primary-hover: #68412f;
  --ip-princess: #426b59;
  --ip-prince: #805528;
  position: fixed;
  inset: 0;
  z-index: 9800;
  color: var(--ip-text);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  pointer-events: none;
}

.ip-guide,
.ip-guide * {
  box-sizing: border-box;
}

.ip-guide.is-hidden {
  display: none;
}

.ip-guide button {
  font: inherit;
  touch-action: manipulation;
}

.ip-guide-launcher {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(88px, calc(72px + env(safe-area-inset-bottom)));
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 154px;
  min-height: 58px;
  padding: 4px 14px 4px 6px;
  border: 1px solid rgba(236, 213, 173, .66);
  border-radius: 30px;
  background: rgba(35, 31, 27, .92);
  color: #fff8e9;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ip-guide-launcher:hover {
  border-color: rgba(245, 221, 178, .92);
  background: rgba(50, 43, 36, .96);
}

.ip-guide-launcher:active {
  background: rgba(22, 20, 18, .98);
}

.ip-guide:not(.is-collapsed) .ip-guide-launcher {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ip-launcher-portraits {
  position: relative;
  flex: 0 0 50px;
  width: 50px;
  height: 48px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(241, 224, 192, .28), rgba(255, 255, 255, .08));
}

.ip-launcher-portraits img {
  position: absolute;
  bottom: -2px;
  width: 34px;
  height: 44px;
  object-fit: contain;
  object-position: center bottom;
}

.ip-launcher-portraits img:first-child {
  left: -1px;
}

.ip-launcher-portraits img:last-child {
  right: -1px;
}

.ip-launcher-copy {
  display: grid;
  gap: 3px;
  text-align: left;
}

.ip-launcher-copy strong {
  font-size: 14px;
  line-height: 1.1;
}

.ip-launcher-copy span {
  color: #dccdb5;
  font-size: 12px;
  line-height: 1.1;
}

.ip-guide-toast {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(154px, calc(138px + env(safe-area-inset-bottom)));
  max-width: min(320px, calc(100vw - 32px));
  min-height: 44px;
  padding: 11px 15px;
  border: 1px solid rgba(233, 211, 174, .66);
  border-radius: 10px;
  background: rgba(35, 31, 27, .92);
  color: #fff7e8;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  pointer-events: none;
  animation: ipGuideToastIn .18s ease-out both;
}

.ip-guide-toast[hidden] {
  display: none;
}

.ip-guide-scrim {
  display: none;
}

.ip-guide-panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(154px, calc(138px + env(safe-area-inset-bottom)));
  width: min(370px, calc(100vw - 32px));
  max-height: min(590px, calc(100dvh - 174px));
  overflow: hidden;
  padding: 0 16px 16px;
  border: 1px solid var(--ip-border);
  border-radius: 16px;
  background: var(--ip-surface);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .38);
  pointer-events: auto;
  overscroll-behavior: contain;
  animation: ipGuidePanelIn .2s ease-out both;
}

.ip-guide-panel[hidden] {
  display: none;
}

.ip-guide-handle {
  display: none;
  flex: 0 0 auto;
}

.ip-guide-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -16px;
  padding: 16px 16px 13px;
  border-bottom: 1px solid rgba(137, 108, 66, .18);
  border-radius: 16px 16px 0 0;
  background: var(--ip-surface-strong);
}

.ip-guide-heading {
  min-width: 0;
}

.ip-guide-kicker {
  display: block;
  margin-bottom: 4px;
  color: #866b46;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.ip-guide-heading h2 {
  margin: 0;
  color: var(--ip-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.ip-guide-heading p {
  margin: 4px 0 0;
  color: var(--ip-muted);
  font-size: 13px;
  line-height: 1.4;
}

.ip-guide-close {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -5px -5px 0 0;
  padding: 0;
  border: 1px solid rgba(112, 88, 54, .22);
  border-radius: 50%;
  background: #fff;
  color: #5e4b36;
  cursor: pointer;
}

.ip-guide-close svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.ip-guide-roles {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.ip-guide-roles button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 58px;
  padding: 5px 8px;
  border: 1px solid rgba(129, 105, 71, .24);
  border-radius: 10px;
  background: rgba(255, 255, 255, .66);
  color: var(--ip-text);
  text-align: left;
  cursor: pointer;
}

.ip-guide-roles button[aria-pressed="true"] {
  border-color: rgba(128, 84, 61, .72);
  background: #f3e9d9;
  box-shadow: inset 0 0 0 1px rgba(128, 84, 61, .12);
}

.ip-guide-roles img {
  flex: 0 0 42px;
  width: 42px;
  height: 46px;
  object-fit: contain;
  object-position: center bottom;
}

.ip-guide-roles button > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.ip-guide-roles strong {
  font-size: 13px;
  line-height: 1.2;
}

.ip-guide-roles small {
  overflow: hidden;
  color: var(--ip-muted);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ip-guide-message {
  margin-top: 12px;
  padding: 13px 14px 14px;
  border: 1px solid rgba(69, 107, 88, .24);
  border-radius: 11px;
  background: #edf4ef;
}

.ip-guide.is-prince-active .ip-guide-message {
  border-color: rgba(128, 85, 40, .26);
  background: #f8eddb;
}

.ip-guide-fact-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 12px;
  background: #dceae1;
  color: #335746;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.ip-guide-fact-label.is-research {
  background: #f1dfc6;
  color: #6e461f;
}

.ip-guide-speaker-name {
  display: block;
  margin-bottom: 5px;
  color: var(--ip-princess);
  font-size: 13px;
  line-height: 1.2;
}

.ip-guide.is-prince-active .ip-guide-speaker-name {
  color: var(--ip-prince);
}

.ip-guide-message p {
  margin: 0;
  color: var(--ip-text);
  font-size: 16px;
  line-height: 1.65;
  user-select: text;
}

.ip-guide-task {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #9d7650;
  background: rgba(157, 118, 80, .09);
  color: #514537;
  font-size: 14px;
  line-height: 1.55;
}

.ip-guide-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.ip-guide-actions {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1.2fr 1fr;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(137, 108, 66, .18);
  background: var(--ip-surface);
}

.ip-guide-actions button {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid rgba(128, 84, 61, .38);
  border-radius: 9px;
  background: #fff;
  color: #604432;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ip-guide-actions .ip-guide-primary {
  border-color: var(--ip-primary);
  background: var(--ip-primary);
  color: #fff;
}

.ip-guide-actions .ip-guide-primary:hover {
  border-color: var(--ip-primary-hover);
  background: var(--ip-primary-hover);
}

.ip-guide-actions button:disabled {
  border-color: #c8c1b6;
  background: #dedad3;
  color: #726d65;
  cursor: not-allowed;
}

.ip-guide-progress {
  height: 6px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 3px;
  background: #ded7ca;
}

.ip-guide-progress[hidden] {
  display: none;
}

.ip-guide-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--ip-primary);
  transition: width .15s linear;
}

.ip-guide-voice-status {
  margin: 8px 0 0;
  color: #6d503d;
  font-size: 13px;
  line-height: 1.45;
}

.ip-guide-voice-status[hidden] {
  display: none;
}

.ip-guide button:focus-visible,
.info-hotspot-guide-button:focus-visible {
  outline: 3px solid #f2be65;
  outline-offset: 2px;
}

.info-hotspot-guide-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(242, 190, 101, .52);
  border-radius: 9px;
  background: rgba(255, 248, 232, .09);
}

.info-hotspot-guide-heading,
.info-hotspot-guide-hint,
.info-hotspot-guide-status {
  grid-column: 1 / -1;
}

.info-hotspot-guide-heading {
  color: #ffd78e;
  font: 700 15px/1.35 "Microsoft YaHei", sans-serif;
}

.info-hotspot-guide-hint,
.info-hotspot-guide-status {
  margin: 0;
  color: #f7ead6;
  font: 400 13px/1.55 "Microsoft YaHei", sans-serif;
}

.info-hotspot-guide-status {
  min-height: 20px;
  color: #ffd78e;
}

.info-hotspot-guide-button {
  width: 100%;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #80543d;
  border-radius: 7px;
  background: #80543d;
  color: #fff;
  font: 600 14px/1.35 "Microsoft YaHei", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.info-hotspot-guide-button.is-active {
  border-color: #ffd78e;
  box-shadow: 0 0 0 2px rgba(255, 215, 142, .22);
}

.info-hotspot-guide-button:hover {
  border-color: #68412f;
  background: #68412f;
}

@keyframes ipGuidePanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ipGuideToastIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

#modelModal.visible ~ #musicToggle.music-toggle {
  top: auto !important;
  left: 20px !important;
  bottom: 20px !important;
}

@media (max-width: 760px), (max-height: 620px) {
  .ip-guide-launcher {
    top: max(184px, calc(168px + env(safe-area-inset-top)));
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
    min-width: 108px;
    min-height: 58px;
    padding-right: 10px;
  }

  .ip-launcher-copy span {
    display: none;
  }

  .ip-guide-toast {
    right: 12px;
    bottom: max(164px, calc(150px + env(safe-area-inset-bottom)));
    left: 12px;
    max-width: none;
    text-align: center;
  }

  .ip-guide-scrim {
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(0, 0, 0, .48);
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }

  .ip-guide.is-collapsed .ip-guide-scrim {
    display: none;
  }

  .ip-guide-panel {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: min(56dvh, 460px);
    padding: 0 16px max(16px, env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    animation-name: ipGuideSheetIn;
  }

  .ip-guide-handle {
    display: block;
    width: 42px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 3px;
    background: #c5bbaa;
  }

  .ip-guide-header {
    margin-top: 0;
    padding-top: 10px;
  }

  .ip-guide-message p {
    font-size: 16px;
  }

  .info-hotspot-guide-button {
    min-height: 48px;
    padding-inline: 10px;
    font-size: 13px;
  }

  .music-toggle {
    left: 12px;
    bottom: 58px;
    height: 36px;
    padding: 0 12px 0 9px;
    font-size: 12px;
  }

  .music-mark {
    width: 20px;
    height: 20px;
    font-size: 14px;
  }

  #modelModal.visible ~ #musicToggle.music-toggle {
    top: 64px !important;
    left: 14px !important;
    bottom: auto !important;
  }
}

@media (max-height: 420px) {
  .ip-guide-launcher {
    top: max(76px, calc(64px + env(safe-area-inset-top)));
    min-width: 62px;
    width: 62px;
    padding: 4px 6px;
  }

  .ip-launcher-copy {
    display: none;
  }

  .ip-guide-panel {
    max-height: 88dvh;
  }
}

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

@keyframes ipGuideSheetIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== v1.16.1 UI layer coordination and compact-screen collision fixes ===== */
.museum-toolbar,
.scene-guide,
.catalog-toggle,
#modelEntry,
#musicToggle,
#ipGuide {
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.scene-guide-open #modelEntry,
.scene-guide-open #musicToggle,
.museum-panel-open .scene-guide,
.museum-guide-open .scene-guide,
.catalog-open .scene-guide,
.model-open .scene-guide,
.hotspot-info-open .scene-guide {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.scene-guide-open #modelEntry,
.scene-guide-open #musicToggle {
  transform: translateY(8px);
}

.scene-guide {
  bottom: max(18px, env(safe-area-inset-bottom));
}

.scene-guide-close,
.museum-panel-close,
.museum-guide-close,
.catalog-close {
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  touch-action: manipulation;
}

.scene-guide-close {
  top: 8px;
  right: 8px;
  font-size: 26px;
  line-height: 42px;
}

.scene-guide-kicker,
.scene-guide h2 {
  margin-right: 48px;
}

.scene-guide-actions button {
  min-height: 44px;
  font-size: 12px;
  touch-action: manipulation;
}

@media (max-width: 700px), (max-height: 620px) {
  .museum-toolbar {
    box-sizing: border-box;
  }

  .museum-toolbar button {
    min-height: 44px;
    touch-action: manipulation;
  }

  #modelEntry {
    height: 44px !important;
    line-height: 44px !important;
  }

  .music-toggle {
    bottom: 64px;
    min-height: 44px;
    height: 44px;
  }

  .museum-panel-open .museum-toolbar,
  .museum-panel-open #catalogToggle,
  .museum-panel-open #modelEntry,
  .museum-panel-open #musicToggle,
  .museum-guide-open .museum-toolbar,
  .museum-guide-open #catalogToggle,
  .museum-guide-open #modelEntry,
  .museum-guide-open #musicToggle,
  .catalog-open .museum-toolbar,
  .catalog-open #modelEntry,
  .catalog-open #musicToggle,
  .catalog-open #ipGuide,
  .model-open .museum-toolbar,
  .model-open #catalogToggle,
  .ip-guide-sheet-open .museum-toolbar,
  .ip-guide-sheet-open #catalogToggle,
  .ip-guide-sheet-open #modelEntry,
  .ip-guide-sheet-open #musicToggle,
  .hotspot-info-open .museum-toolbar,
  .hotspot-info-open #catalogToggle,
  .hotspot-info-open #modelEntry,
  .hotspot-info-open #musicToggle,
  .hotspot-info-open #ipGuide {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .museum-panel {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: none;
    border-radius: 14px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .52);
  }

  .museum-panel-header {
    padding: 13px 12px 11px 16px;
  }

  .scene-guide {
    left: max(8px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(360px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height: min(40dvh, 270px);
    padding: 14px 14px 13px;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .scene-guide-actions {
    position: sticky;
    bottom: -13px;
    z-index: 2;
    margin: 10px -1px 0;
    padding: 9px 1px 13px;
    background: linear-gradient(to bottom, rgba(38, 36, 30, 0), rgba(38, 36, 30, .98) 18%);
  }

  .museum-guide-actions {
    position: sticky;
    bottom: -20px;
    z-index: 2;
    margin-right: -2px;
    margin-left: -2px;
    padding: 12px 2px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(245, 240, 228, 0), #f5f0e4 18%);
  }

  .museum-guide-actions span {
    display: none;
  }
}

/* ===== v1.16.2 3D companion narration and header clearance ===== */
.model-open #ipGuide.is-model-mode {
  z-index: 13100;
  visibility: visible;
  opacity: 1;
}

.model-open #ipGuide.is-model-mode .ip-guide-panel,
.model-open #ipGuide.is-model-mode .ip-guide-scrim {
  pointer-events: auto;
}

.model-open #ipGuide.is-model-mode.is-collapsed .ip-guide-launcher {
  pointer-events: auto;
}

.model-open #ipGuide.is-model-mode .ip-guide-launcher {
  border-color: rgba(242, 210, 151, .82);
  background: rgba(31, 28, 24, .94);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .42);
}

@media (min-width: 761px) and (min-height: 621px) {
  .model-open #ipGuide.is-model-mode .ip-guide-launcher {
    right: max(20px, env(safe-area-inset-right));
    bottom: max(24px, calc(16px + env(safe-area-inset-bottom)));
  }

  .model-open #ipGuide.is-model-mode .ip-guide-panel {
    right: max(20px, env(safe-area-inset-right));
    bottom: max(96px, calc(88px + env(safe-area-inset-bottom)));
    max-height: min(590px, calc(100dvh - 120px));
  }
}

@media (max-width: 760px), (max-height: 620px) {
  .model-open #ipGuide.is-model-mode.is-collapsed .ip-guide-launcher {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .model-guide-open #modelHint,
  .model-guide-open #modelDesc,
  .model-guide-open #modelMaterials {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 460px) {
  .museum-toolbar {
    top: max(58px, calc(50px + env(safe-area-inset-top)));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    display: flex;
    max-width: none;
    padding: 5px;
    overflow: visible;
  }

  .museum-stat-badge {
    line-height: 26px;
  }

  .museum-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
    overflow: visible;
  }

  .museum-toolbar button {
    min-width: 0;
    padding: 4px 2px;
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
  }

  .catalog-toggle {
    top: max(146px, calc(138px + env(safe-area-inset-top)));
    min-height: 44px;
  }

  .ip-guide-launcher {
    top: max(200px, calc(192px + env(safe-area-inset-top)));
  }

  .scene-guide-body {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .scene-guide-status {
    display: none;
  }
}

@media (max-height: 420px) {
  .museum-toolbar {
    top: max(54px, calc(46px + env(safe-area-inset-top)));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    max-width: none;
    padding: 5px;
    transform: none;
  }

  .museum-stat-badge {
    display: none;
  }

  .museum-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
    overflow: visible;
  }

  .museum-toolbar button {
    min-width: 0;
    padding: 4px 3px;
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
  }

  .catalog-toggle {
    top: max(110px, calc(102px + env(safe-area-inset-top)));
    min-height: 44px;
  }

  .ip-guide-launcher {
    top: max(166px, calc(158px + env(safe-area-inset-top)));
  }

  .scene-guide {
    top: max(110px, calc(102px + env(safe-area-inset-top)));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(350px, calc(100vw - 112px));
    max-height: none;
  }

  .scene-guide-points,
  .scene-guide-status {
    display: none;
  }

  .scene-guide-body {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .ip-guide-panel {
    max-height: 96dvh;
  }
}

@media (max-width: 760px), (max-height: 620px) {
  .model-open #ipGuide.is-model-mode .ip-guide-launcher {
    top: max(56px, calc(48px + env(safe-area-inset-top)));
    right: max(12px, env(safe-area-inset-right));
    bottom: auto;
  }
}

@media (max-height: 420px) and (min-width: 560px) {
  .model-open #ipGuide.is-model-mode .ip-guide-scrim {
    background: rgba(0, 0, 0, .32);
  }

  .model-open #ipGuide.is-model-mode .ip-guide-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(380px, 58vw);
    max-height: 100dvh;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    border: 0;
    border-left: 1px solid var(--ip-border);
    border-radius: 18px 0 0 18px;
  }

  .model-open #ipGuide.is-model-mode .ip-guide-handle {
    display: none;
  }
}

/* ===== v1.17.0 3D 器型观察台：IP 伴随讲解抽屉 ===== */
.model-open #ipGuide.is-model-mode .ip-guide-launcher {
  min-width: 176px;
  min-height: 60px;
  border-color: rgba(234, 207, 156, .78);
  background: rgba(27, 25, 22, .95);
}

.model-open #ipGuide.is-model-mode .ip-launcher-copy strong {
  font-size: 15px;
}

.model-open #ipGuide.is-model-mode .ip-launcher-copy span {
  color: #e4d2b3;
}

.model-info-open #ipGuide.is-model-mode {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 761px) and (min-height: 621px) {
  .model-open #ipGuide.is-model-mode .ip-guide-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(390px, 34vw);
    max-height: none;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 18px 0 0 18px;
    box-shadow: -22px 0 58px rgba(0, 0, 0, .36);
    animation: modelGuideDrawerIn .22s ease-out both;
  }

  .model-open #ipGuide.is-model-mode .ip-guide-header {
    padding-top: max(18px, env(safe-area-inset-top));
  }

  .model-open #ipGuide.is-model-mode .ip-guide-scrim,
  .model-open #ipGuide.is-model-mode .ip-guide-handle {
    display: none;
  }
}

@media (max-width: 760px), (max-height: 620px) {
  .model-open #ipGuide.is-model-mode .ip-guide-launcher {
    min-width: 124px;
    min-height: 52px;
  }

  .model-open #ipGuide.is-model-mode .ip-launcher-portraits {
    flex-basis: 44px;
    width: 44px;
    height: 42px;
  }

  .model-open #ipGuide.is-model-mode .ip-launcher-portraits img {
    width: 31px;
    height: 39px;
  }
}

@media (max-height: 420px) and (min-width: 560px) {
  .model-open #ipGuide.is-model-mode .ip-guide-launcher {
    min-width: 154px;
  }

  .model-open #ipGuide.is-model-mode .ip-launcher-copy {
    display: grid;
  }

  .model-open #ipGuide.is-model-mode .ip-launcher-copy span {
    display: none;
  }
}

@keyframes modelGuideDrawerIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== v1.18.0 evidence clarity, catalog ergonomics and mobile layer safety ===== */
.desktop .info-hotspot .info-hotspot-text {
  width: min(420px, calc(100vw - 48px));
  max-height: min(70vh, 620px);
}

.hotspot-evidence > strong {
  font-size: 12px;
}

.hotspot-evidence > span {
  font-size: 11px;
  line-height: 1.45;
}

.hotspot-evidence > p,
.hotspot-evidence > a {
  font-size: 11px;
}

@media (max-width: 700px), (max-height: 620px) {
  .scene-list-open .museum-toolbar,
  .scene-list-open #catalogToggle,
  .scene-list-open #modelEntry,
  .scene-list-open #musicToggle,
  .scene-list-open #ipGuide,
  .scene-list-open .scene-guide {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  #sceneList {
    z-index: 11800;
    padding-top: max(50px, calc(50px + env(safe-area-inset-top)));
    background: rgba(21, 28, 31, .98);
    overscroll-behavior: contain;
  }

  #sceneListToggle {
    z-index: 11810;
    top: env(safe-area-inset-top);
    left: env(safe-area-inset-left);
  }

  .mobile #sceneList .scenes {
    height: auto;
    min-height: 100%;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .mobile #sceneList .scene,
  .mobile #sceneList .layout-entry,
  .mobile #sceneList .layout-entry .text {
    min-height: 48px;
  }

  .mobile #sceneList .scene .text,
  .mobile #sceneList .layout-entry .text {
    line-height: 48px;
  }

  .catalog-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catalog-stats > div {
    min-height: 58px;
    border-bottom: 1px solid #e2e2dc;
  }

  .catalog-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catalog-filters button {
    min-height: 44px;
    height: auto;
    padding: 7px 5px;
    border-bottom: 1px solid #c8ccc8;
    line-height: 1.35;
  }
}

@media (max-width: 460px) {
  .catalog-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-filters button:last-child {
    grid-column: 1 / -1;
  }
}
/* Official website filing link, kept at the bottom of the panorama. */
.site-filing {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 100;
  padding: 3px 12px calc(3px + env(safe-area-inset-bottom));
  border-radius: 6px 6px 0 0;
  background: rgba(21, 28, 31, .86);
  white-space: nowrap;
  font-size: 12px;
  line-height: 20px;
}
.site-filing a {
  color: #fff;
  text-decoration: none;
}
.site-filing a:hover { text-decoration: underline; }
.site-filing a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The panorama brand returns to the museum homepage. */
a.museum-brand { color: inherit; text-decoration: none; pointer-events: auto; }
a.museum-brand:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }


/* H06-H09 dense display cases use the existing scrollable card outside the panorama transform. */
/* All hall markers stay circular at the calibrated label/base anchor, including hover. */
.museum-artifact-hotspot { margin-left: -16px; margin-top: -16px; }
.mobile .museum-artifact-hotspot { margin-left: -16px; margin-top: -16px; }
.museum-artifact-hotspot .info-hotspot-header,
.desktop .museum-artifact-hotspot.visible .info-hotspot-header,
.desktop.no-touch .museum-artifact-hotspot.visible .info-hotspot-header:hover,
.desktop.no-touch .museum-artifact-hotspot .info-hotspot-header:hover {
  display: flow-root;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -webkit-transition: none;
  transition: none;
}
.mobile .museum-artifact-hotspot .info-hotspot-header,
.mobile .museum-artifact-hotspot.visible .info-hotspot-header,
.mobile .museum-artifact-hotspot .info-hotspot-header:hover {
  width: 32px;
  height: 32px;
}
.mobile .museum-artifact-hotspot > .info-hotspot-header::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
}
.museum-artifact-hotspot .info-hotspot-icon-wrapper {
  width: 32px;
  height: 32px;
}
.mobile .museum-artifact-hotspot .info-hotspot-icon-wrapper {
  width: 32px;
  height: 32px;
}
.museum-artifact-hotspot .info-hotspot-icon {
  display: block;
  width: 90%;
  height: 90%;
  margin: 5%;
}
/* Keep the icon circular; show its short name beside the label/base anchor. */
.museum-artifact-hotspot .info-hotspot-header { position: relative; }
.museum-artifact-hotspot .info-hotspot-close-wrapper { display: none; }
.museum-artifact-hotspot .info-hotspot-title-wrapper,
.desktop.no-touch .museum-artifact-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
  display: block;
  left: 50%;
  top: calc(100% + 6px);
  width: max-content;
  max-width: min(280px, calc(100vw - 40px));
  height: auto;
  padding: 5px 8px;
  overflow: hidden;
  transform: translateX(-50%);
  border-radius: 5px;
  background: rgba(21, 28, 31, .94);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  transition: opacity .12s ease;
}
.museum-artifact-hotspot .info-hotspot-title-wrapper {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.museum-artifact-hotspot .info-hotspot-title-wrapper:before { display: none; }
.museum-artifact-hotspot .info-hotspot-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) {
  .museum-artifact-hotspot .info-hotspot-header:hover .info-hotspot-title-wrapper {
    opacity: 1;
    visibility: visible;
  }
}
.museum-artifact-hotspot .info-hotspot-header:focus-visible .info-hotspot-title-wrapper {
  opacity: 1;
  visibility: visible;
}
.museum-artifact-hotspot.visible .info-hotspot-header .info-hotspot-title-wrapper {
  opacity: 0;
  visibility: hidden;
}
.museum-artifact-hotspot .info-hotspot-header:focus-visible {
  outline: 2px solid #cba472;
  outline-offset: 3px;
}
/* H06-H09 ray anchors locate the icon centre; Marzipano positions its wrapper origin. */
.h06-artifact-hotspot, .h07-artifact-hotspot,
.h08-artifact-hotspot,
.h09-artifact-hotspot { margin-left: -16px; margin-top: -16px; }
.mobile .h06-artifact-hotspot, .mobile .h07-artifact-hotspot,
.mobile .h08-artifact-hotspot,
.mobile .h09-artifact-hotspot { margin-left: -16px; margin-top: -16px; }
.h06-artifact-hotspot .info-hotspot-header, .h07-artifact-hotspot .info-hotspot-header,
.h08-artifact-hotspot .info-hotspot-header,
.h09-artifact-hotspot .info-hotspot-header { display: flow-root; }
.desktop .info-hotspot-modal.h06-artifact-card, .desktop .info-hotspot-modal.h07-artifact-card,
.desktop .info-hotspot-modal.h08-artifact-card,
.desktop .info-hotspot-modal.h09-artifact-card { display: block; }
.desktop .h06-artifact-hotspot.visible, .desktop .h07-artifact-hotspot.visible,
.desktop .h08-artifact-hotspot.visible,
.desktop .h09-artifact-hotspot.visible { opacity: 0 !important; pointer-events: none; }
.desktop .h06-artifact-card .info-hotspot-header,
.desktop .h06-artifact-card .info-hotspot-text,
.desktop .h07-artifact-card .info-hotspot-header,
.desktop .h07-artifact-card .info-hotspot-text,
.desktop .h08-artifact-card .info-hotspot-header,
.desktop .h09-artifact-card .info-hotspot-header,
.desktop .h08-artifact-card .info-hotspot-text,
.desktop .h09-artifact-card .info-hotspot-text {
  left: 50%; right: auto; width: min(520px, calc(100vw - 48px));
  transform: translateX(-50%); box-sizing: border-box;
}
.desktop .h06-artifact-card .info-hotspot-header,
.desktop .h07-artifact-card .info-hotspot-header,
.desktop .h08-artifact-card .info-hotspot-header,
.desktop .h09-artifact-card .info-hotspot-header {
  top: 8vh; border-radius: 10px 10px 0 0; background: #303c37;
}
.desktop .h06-artifact-card .info-hotspot-text,
.desktop .h07-artifact-card .info-hotspot-text,
.desktop .h08-artifact-card .info-hotspot-text,
.desktop .h09-artifact-card .info-hotspot-text {
  top: calc(8vh + 50px); bottom: 8vh; padding: 18px;
  border-radius: 0 0 10px 10px; background: #35413c; line-height: 1.65;
  overscroll-behavior: contain;
}
.desktop .h06-artifact-card .info-hotspot-close-wrapper,
.desktop .h07-artifact-card .info-hotspot-close-wrapper,
.desktop .h08-artifact-card .info-hotspot-close-wrapper,
.desktop .h09-artifact-card .info-hotspot-close-wrapper {
  border-top-right-radius: 10px; background: #48534e;
}

/* Keep the H09 cabinet title clear in the phone panorama. */
@media (max-width: 760px) {
  body:not(.model-open):has(#sceneList .scene[data-id="H09_P01"].current) .ip-guide-launcher {
    top: auto;
    bottom: max(94px, calc(78px + env(safe-area-inset-bottom)));
  }
}

/* The H09 phone scene guide reserves its text and controls while open. */
@media (max-width: 760px) {
  body:not(.model-open):has(#sceneList .scene[data-id="H09_P01"].current):has(#sceneGuide[aria-hidden="false"]) .ip-guide-launcher {
    visibility: hidden;
    pointer-events: none;
  }
}
/* Full-card narration stays inside the viewport in every formal hall. */
.desktop .info-hotspot-modal.museum-narration-card { display: block; }
.desktop .info-hotspot[data-source-scene^="H0"].visible { opacity: 0 !important; pointer-events: none; }
.desktop .museum-narration-card .info-hotspot-header,
.desktop .museum-narration-card .info-hotspot-text {
  left: 50%; right: auto; width: min(520px, calc(100vw - 48px));
  transform: translateX(-50%); box-sizing: border-box;
}
.desktop .museum-narration-card .info-hotspot-header {
  top: 8vh; border-radius: 10px 10px 0 0; background: #303c37;
}
.desktop .museum-narration-card .info-hotspot-text {
  top: calc(8vh + 50px); bottom: 8vh; padding: 18px;
  border-radius: 0 0 10px 10px; background: #35413c; line-height: 1.65;
  overscroll-behavior: contain;
}
.desktop .museum-narration-card .info-hotspot-close-wrapper {
  border-top-right-radius: 10px; background: #48534e;
}

/* Actual assembly corridor navigation. */
.scene-guide-actions { flex-wrap: wrap; }
#sceneGuideCorridor { flex: 1 0 100%; min-height: 44px; }
#sceneGuideCorridor[hidden] { display: none; }