* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif; color: #173e42; background: #d9ece8; }
button { font-family: inherit; font-size: 18px; font-weight: bold; color: #15515a; background: #fff; border: 2px solid #c5ded9; border-radius: 13px; min-height: 52px; padding: 9px 18px; cursor: pointer; }
button:hover, button:focus { border-color: #0b737b; background: #edf8f5; }
button:active { background: #d5eeea; }
button:disabled { color: #8caaa8; border-color: #d7e7e4; cursor: default; }
.primary { color: #fff; background: #087078; border-color: #087078; }
.primary:hover, .primary:focus { color: #fff; background: #075b62; }
#app { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; }
.topbar { position: absolute; left: 0; right: 0; top: 0; height: 70px; background: #fff; border-bottom: 3px solid #8bcac2; box-shadow: 0 3px 16px #0b5e6333; z-index: 2; }
.brand { position: absolute; top: 8px; left: 22px; height: 52px; font-size: 23px; line-height: 25px; font-weight: bold; }
.brand small { display: block; font-size: 14px; line-height: 20px; color: #568083; font-weight: normal; }
.brand-mark { display: block; float: left; width: 51px; height: 51px; margin-right: 13px; border-radius: 12px; line-height: 49px; text-align: center; color: white; background: #087078; font-size: 32px; }
.top-actions { position: absolute; right: 20px; top: 8px; }
.top-actions button { margin-left: 8px; }
.view { position: absolute; top: 70px; left: 0; right: 0; bottom: 0; }
.view-title { position: absolute; top: 0; left: 24px; right: 24px; height: 55px; line-height: 55px; white-space: nowrap; }
.view-title strong { font-size: 25px; margin-right: 25px; }
.view-title span { font-size: 18px; margin-right: 20px; }
#cardProgress { color: #087078; font-weight: bold; }
.card-frame { position: absolute; top: 56px; left: 118px; right: 118px; bottom: 120px; padding: 12px; border: 3px solid #fff; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px #15474b30; text-align: center; }
.card-frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; vertical-align: middle; }
.card-frame:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.card-arrow { position: absolute; top: 39%; width: 68px; height: 86px; padding: 0; font-size: 62px; line-height: 64px; border-radius: 18px; }
.card-arrow.prev { left: 26px; }
.card-arrow.next { right: 26px; }
.entry-bottom { position: absolute; left: 118px; right: 118px; bottom: 15px; height: 91px; background: #ffffffdc; border-radius: 18px; padding: 18px 22px; }
.entry-bottom button { margin-right: 10px; }
#cardAnswer { font-size: 23px; color: #075a61; }
.entry-bottom .enter { float: right; min-width: 225px; }
.static-note { display: inline-block; color: #895614; background: #fff0d7; line-height: 35px; padding: 0 16px; border-radius: 20px; }
.scene-layout { position: absolute; top: 55px; left: 20px; right: 20px; bottom: 92px; }
.pano-area { position: absolute; left: 0; right: 282px; top: 0; bottom: 0; }
.pano-wrap { position: absolute; top: 0; left: 0; width: 800px; height: 400px; background: #123d42; border: 3px solid #fff; border-radius: 13px; box-shadow: 0 7px 23px #174a4e30; overflow: hidden; }
.pano-wrap img { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#hotspotDots { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.hotspot-dot { position: absolute; width: 46px; height: 46px; min-height: 46px; padding: 0; margin-left: -23px; margin-top: -23px; border-radius: 25px; border: 3px solid #fff; color: white; background: #087078; box-shadow: 0 2px 9px #001b1fbb; font-size: 21px; }
.hotspot-dot:hover, .hotspot-dot:focus { color: white; background: #bd6914; }
.item-list { position: absolute; right: 0; top: 0; bottom: 0; width: 265px; padding: 5px 7px 7px; overflow-y: auto; background: #ffffffd9; border-radius: 13px; }
.item-list h2 { font-size: 16px; line-height: 25px; margin: 0 5px 7px; }
.item-list button { display: block; width: 100%; min-height: 68px; margin-bottom: 6px; padding: 5px; text-align: left; font-size: 16px; white-space: nowrap; overflow: hidden; }
.item-list img { width: 72px; height: 53px; margin-right: 9px; vertical-align: middle; }
.item-number { display: inline-block; width: 21px; margin-right: 4px; color: #087078; }
.scene-bottom { position: absolute; bottom: 0; left: 20px; right: 20px; height: 82px; padding-top: 12px; white-space: nowrap; }
.scene-bottom > button { margin-right: 7px; }
.scene-bottom #nextScene { float: right; margin-right: 0; }
.scene-tabs { display: inline-block; }
.scene-tabs button { margin-right: 5px; min-width: 102px; }
.scene-tabs button.active { color: #fff; background: #125f69; border-color: #125f69; }
.overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 5; background: #09282bd9; }
.detail-panel { position: absolute; left: 5%; right: 5%; top: 5%; bottom: 5%; border-radius: 17px; background: #fff; box-shadow: 0 12px 45px #0008; }
.detail-head { position: absolute; left: 22px; right: 22px; top: 13px; height: 56px; border-bottom: 2px solid #d8ebe7; }
.detail-head strong { display: block; font-size: 25px; line-height: 29px; }
.detail-head small { font-size: 13px; color: #6a8585; }
.detail-head button { position: absolute; right: 0; top: 0; min-width: 125px; }
.detail-body { position: absolute; left: 22px; right: 22px; top: 82px; bottom: 20px; }
.detail-image-box { position: absolute; left: 0; top: 0; bottom: 0; right: 39%; border-radius: 9px; background: #e5efed; text-align: center; overflow: hidden; }
.detail-image-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; vertical-align: middle; }
.detail-image-box:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.detail-lines { position: absolute; top: 0; right: 0; bottom: 0; width: 37%; overflow-y: auto; }
.detail-lines h3 { margin: 0 0 11px; font-size: 20px; }
.detail-lines button { display: block; width: 100%; min-height: 55px; margin-bottom: 10px; text-align: left; white-space: normal; line-height: 1.4; font-size: 18px; }
.detail-lines button.speaking { color: white; background: #087078; border-color: #087078; }
#audioStatus { font-size: 15px; color: #4e7475; line-height: 1.5; }
@media (max-width: 1050px) {
  .brand { font-size: 19px; }
  .view-title strong { font-size: 20px; }
  .scene-tabs button { min-width: 70px; }
  .item-list { width: 230px; }
  .pano-area { right: 247px; }
  .scene-bottom button { font-size: 15px; padding-left: 10px; padding-right: 10px; }
}