:root {
  --ink: #14293a;
  --muted: #718087;
  --line: rgba(20, 50, 62, .11);
  --paper: #f7f7f3;
  --panel: #ffffff;
  --teal: #2d6970;
  --teal-deep: #204e59;
  --gold: #b28b43;
  --shadow: 0 18px 52px rgba(27, 47, 51, .12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--ink);
  background: var(--paper);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }

.app-shell { width: 100%; height: 100%; }
.topbar {
  height: 72px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 250, 247, .94);
  backdrop-filter: blur(18px);
  position: relative;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark {
  width: 43px; height: 43px; border-radius: 13px;
  display: grid; place-items: center;
  color: white; background: var(--teal-deep);
  box-shadow: 0 10px 26px rgba(32, 78, 89, .24);
}
.brand-mark svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 2; }
.brand strong { display: block; font-size: 16px; letter-spacing: .04em; }
.brand small { display: block; margin-top: 3px; color: #879298; font-size: 11px; letter-spacing: .08em; }

.mode-tabs {
  justify-self: center;
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #eceeea;
}
.mode-tab {
  min-width: 118px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  color: #758187;
  background: transparent;
  cursor: pointer;
  transition: .2s ease;
}
.mode-tab span { margin-right: 7px; color: var(--teal); }
.mode-tab:hover { color: var(--ink); }
.mode-tab.is-active { color: var(--ink); background: white; box-shadow: 0 4px 16px rgba(34, 53, 58, .08); font-weight: 700; }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
.model-status { display: flex; align-items: center; gap: 7px; color: #7d898e; font-size: 12px; }
.model-status i { width: 8px; height: 8px; border-radius: 50%; background: #65aa79; box-shadow: 0 0 0 5px rgba(101,170,121,.10); }
.icon-button {
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 13px;
  background: white; cursor: pointer; font-size: 21px;
}

.workspace { height: calc(100vh - 72px); display: grid; grid-template-columns: 214px 1fr; }
.floor-rail {
  padding: 27px 16px 18px;
  border-right: 1px solid var(--line);
  background: #f4f4f0;
  display: flex; flex-direction: column;
}
.rail-heading { padding: 0 9px 18px; display: flex; justify-content: space-between; align-items: end; }
.rail-heading span { color: #a2abad; font: 700 9px/1.2 system-ui; letter-spacing: .18em; }
.rail-heading strong { font-size: 14px; }
.floor-list { display: grid; gap: 8px; }
.floor-button {
  width: 100%; min-height: 62px; padding: 9px;
  display: grid; grid-template-columns: 48px 1fr; gap: 11px; align-items: center;
  border: 1px solid transparent; border-radius: 15px;
  text-align: left; background: transparent; cursor: pointer; position: relative;
  transition: .2s ease;
}
.floor-button:hover { background: rgba(255,255,255,.72); }
.floor-button::before { content: ""; position: absolute; left: -17px; top: 16px; bottom: 16px; width: 3px; border-radius: 4px; background: transparent; }
.floor-button.is-active { background: white; border-color: rgba(36, 92, 99, .13); box-shadow: 0 10px 28px rgba(36,58,62,.08); }
.floor-button.is-active::before { background: var(--teal); }
.floor-no {
  width: 48px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 800; color: #51626a; background: #e8e9e5;
}
.floor-button.is-active .floor-no { color: white; background: var(--teal); }
.floor-copy b { display: block; font-size: 14px; }
.floor-copy small { display: block; margin-top: 4px; color: #8b969b; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floor-state { position: absolute; right: 10px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #bdc4c5; }
.floor-state.ready { background: #63a978; box-shadow: 0 0 0 4px rgba(99,169,120,.10); }
.rail-note {
  margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line);
  display: flex; gap: 9px; color: #899499; font-size: 10px; line-height: 1.65;
}
.rail-note i { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--gold); }

.stage-panel { min-width: 0; padding: 20px 26px 24px; display: flex; flex-direction: column; }
.scene-toolbar {
  min-height: 84px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.breadcrumbs { margin-bottom: 6px; color: #9aa4a7; font-size: 10px; letter-spacing: .05em; }
.scene-toolbar h1 { margin: 0; font-family: SimSun, "Songti SC", serif; font-size: clamp(28px, 2.4vw, 40px); font-weight: 500; letter-spacing: .07em; }
.scene-toolbar p { margin: 7px 0 0; max-width: 760px; color: #77858b; font-size: 12px; line-height: 1.6; }
.scene-badges { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; padding-top: 8px; }
.scene-badges span { padding: 7px 11px; border-radius: 999px; color: #63767c; background: #e9eeeb; font-size: 10px; }
.scene-badges .emphasis { color: #285f66; background: #dfece7; }

.view-panel { display: none; min-height: 0; flex: 1; }
.view-panel.is-active { display: flex; }
.realistic-view {
  flex-direction: column; overflow: hidden;
  border-radius: 24px; background: #162b32; box-shadow: var(--shadow);
}
.compare-stage { min-height: 0; flex: 1; position: relative; overflow: hidden; background: #213239; }
.compare-before, .compare-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-after-frame { position: absolute; inset: 0 auto 0 0; width: 78%; overflow: hidden; border-right: 1px solid rgba(255,255,255,.85); }
.compare-after { max-width: none; }
.compare-stage::after { content: ""; position: absolute; inset: 46% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(6,18,22,.82)); }
.compare-divider { position: absolute; left: 78%; top: 0; bottom: 0; width: 1px; z-index: 4; pointer-events: none; }
.compare-divider i {
  position: absolute; top: 48%; left: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  color: var(--teal-deep); background: white; font-style: normal; box-shadow: 0 8px 24px rgba(0,0,0,.24);
}
.compare-range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare-tag { position: absolute; top: 18px; z-index: 6; padding: 7px 11px; border-radius: 999px; font-size: 10px; letter-spacing: .08em; }
.compare-tag.after { left: 18px; color: #41555d; background: rgba(255,255,255,.88); }
.compare-tag.before { right: 18px; color: white; background: rgba(14,32,39,.76); }
.view-caption { position: absolute; z-index: 3; left: 28px; bottom: 25px; color: white; max-width: 680px; }
.view-caption span { color: #b9d5d2; font: 700 9px/1 system-ui; letter-spacing: .17em; }
.view-caption h2 { margin: 8px 0 6px; font: 500 27px/1.1 SimSun, serif; letter-spacing: .08em; }
.view-caption p { margin: 0; color: rgba(255,255,255,.76); font-size: 11px; line-height: 1.6; }
.realistic-footer {
  min-height: 92px; padding: 13px 16px 13px 20px; display: grid; grid-template-columns: 245px 1fr; align-items: center; gap: 18px;
  color: white; background: #132931;
}
.realistic-footer > div:first-child b { display: block; font-size: 11px; }
.realistic-footer > div:first-child span { display: block; margin-top: 6px; color: #8da3a8; font-size: 9px; line-height: 1.5; }
.view-list { display: flex; justify-content: flex-end; gap: 8px; min-width: 0; }
.view-button {
  min-width: 190px; max-width: 280px; padding: 7px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
  display: grid; grid-template-columns: 60px 1fr; gap: 10px; align-items: center;
  color: #b8c6c8; background: rgba(255,255,255,.05); cursor: pointer; text-align: left;
}
.view-button img { width: 60px; height: 48px; object-fit: cover; border-radius: 8px; }
.view-button b { display: block; color: #ecf2f1; font-size: 10px; }
.view-button small { display: block; margin-top: 4px; font-size: 9px; color: #869a9e; }
.view-button.is-active { border-color: #62a5a3; background: rgba(65,126,128,.22); }

.pending-stage { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); background: #1d3138; }
.pending-artwork { position: relative; overflow: hidden; display: grid; place-items: center; background: #e8e6df; }
.pending-artwork::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 100px rgba(18,37,43,.12); pointer-events: none; }
.pending-artwork img { width: 100%; height: 100%; padding: 34px; object-fit: contain; }
.pending-artwork span { position: absolute; left: 18px; top: 18px; padding: 7px 11px; border-radius: 999px; background: white; color: #4a6067; font-size: 10px; }
.pending-copy { padding: 44px 36px; color: white; display: flex; flex-direction: column; justify-content: center; }
.pending-kicker { color: #8ebdb9; font: 700 9px/1 system-ui; letter-spacing: .18em; }
.pending-copy h2 { margin: 14px 0 13px; font: 500 30px/1.1 SimSun, serif; }
.pending-copy p { margin: 0; color: #b6c3c5; font-size: 12px; line-height: 1.8; }
.pending-list { margin-top: 26px; display: grid; gap: 12px; }
.pending-list span { padding: 11px 13px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; color: #dbe4e4; font-size: 10px; background: rgba(255,255,255,.04); }

.gallery-view { flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow); }
.gallery-head { padding: 19px 23px; display: flex; align-items: end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.gallery-head span { color: #a4adaf; font: 700 9px/1 system-ui; letter-spacing: .18em; }
.gallery-head h2 { margin: 6px 0 0; font: 500 25px/1.15 SimSun, serif; }
.gallery-head p { max-width: 620px; margin: 0; color: #77858a; text-align: right; font-size: 11px; line-height: 1.6; }
.artwork-grid { min-height: 0; flex: 1; padding: 18px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; overflow: auto; }
.artwork-card { min-height: 230px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #f0f0eb; display: flex; flex-direction: column; }
.artwork-card figure { min-height: 0; flex: 1; margin: 0; padding: 18px; display: grid; place-items: center; background: #e9e8e2; }
.artwork-card img { width: 100%; height: 100%; max-height: 260px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(28,42,45,.14)); }
.artwork-card div { padding: 12px 14px 13px; background: white; }
.artwork-card b { display: block; font-size: 12px; }
.artwork-card small { display: block; margin-top: 4px; color: #8d999d; font-size: 9px; }

.model-view { position: relative; overflow: hidden; border-radius: 24px; background: #dce4e1; box-shadow: var(--shadow); }
.model-stage { width: 100%; height: 100%; min-height: 0; position: relative; overflow: hidden; }
#modelCanvas { width: 100%; height: 100%; display: block; }
.model-corner { position: absolute; left: 20px; top: 20px; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.84); backdrop-filter: blur(12px); }
.model-corner span { display: block; color: #8b979b; font: 700 8px/1 system-ui; letter-spacing: .16em; }
.model-corner b { display: block; margin-top: 5px; font-size: 11px; }
.model-wall-key { position: absolute; right: 20px; top: 20px; width: 245px; display: grid; gap: 7px; }
.model-wall-key > div {
  min-height: 50px; padding: 6px; display: grid; grid-template-columns: 70px 1fr; gap: 9px; align-items: center;
  border: 1px solid rgba(255,255,255,.74); border-radius: 11px; background: rgba(250,251,249,.88); backdrop-filter: blur(13px);
  box-shadow: 0 8px 22px rgba(31,53,58,.08);
}
.model-wall-key img { width: 70px; height: 38px; object-fit: cover; border-radius: 6px; background: #eee; }
.model-wall-key span { color: #718186; font-size: 8px; line-height: 1.5; }
.model-wall-key b { display: block; color: #233f48; font-size: 10px; }
.model-controls {
  position: absolute; left: 18px; right: 18px; bottom: 16px; min-height: 62px; padding: 9px 11px 9px 16px;
  display: grid; grid-template-columns: 120px 1fr auto auto; gap: 14px; align-items: center;
  border: 1px solid rgba(255,255,255,.72); border-radius: 16px; background: rgba(250,251,249,.88); backdrop-filter: blur(16px);
}
.model-play { font-size: 10px; color: #496168; }
.model-play i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 5px rgba(45,105,112,.10); }
.model-controls > div span { display: block; margin-bottom: 7px; color: #62757b; font-size: 9px; }
.model-controls progress { display: block; width: 100%; height: 5px; accent-color: var(--teal); }
.model-controls button, .model-unavailable button { height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: 11px; background: white; cursor: pointer; font-size: 10px; }
#backToRealistic { color: white; border-color: var(--teal-deep); background: var(--teal-deep); }
.model-unavailable { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: white; background: radial-gradient(circle at 50% 25%, #365a60, #183039 68%); }
.model-unavailable > span { color: #84b4b1; font: 700 9px/1 system-ui; letter-spacing: .2em; }
.model-unavailable h2 { margin: 16px 0 10px; font: 500 32px/1.2 SimSun, serif; }
.model-unavailable p { max-width: 580px; margin: 0 0 24px; color: #b2c3c5; font-size: 12px; line-height: 1.8; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; transform: translate(-50%, 20px); padding: 11px 16px; border-radius: 10px; color: white; background: rgba(18,43,50,.92); opacity: 0; pointer-events: none; transition: .22s; font-size: 11px; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1050px) {
  .topbar { grid-template-columns: 230px 1fr 150px; }
  .model-status { display: none; }
  .workspace { grid-template-columns: 176px 1fr; }
  .stage-panel { padding-inline: 18px; }
  .floor-button { grid-template-columns: 42px 1fr; }
  .floor-no { width: 42px; }
  .realistic-footer { grid-template-columns: 185px 1fr; }
  .view-button { min-width: 155px; }
}

@media (max-width: 760px) {
  html, body { overflow: auto; }
  .topbar { height: auto; min-height: 68px; grid-template-columns: 1fr auto; }
  .mode-tabs { grid-column: 1 / -1; grid-row: 2; margin: 8px 0 10px; width: 100%; }
  .mode-tab { min-width: 0; flex: 1; }
  .workspace { height: auto; display: block; }
  .floor-rail { padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rail-heading, .rail-note { display: none; }
  .floor-list { display: flex; overflow-x: auto; }
  .floor-button { min-width: 150px; }
  .stage-panel { min-height: 720px; padding: 16px 12px; }
  .scene-toolbar { min-height: 112px; }
  .scene-badges { display: none; }
  .compare-stage { min-height: 470px; }
  .realistic-footer { grid-template-columns: 1fr; }
  .realistic-footer > div:first-child { display: none; }
  .view-list { justify-content: stretch; overflow-x: auto; }
  .pending-stage { grid-template-columns: 1fr; }
  .pending-copy { display: none; }
  .artwork-grid { grid-template-columns: 1fr; }
  .model-controls { grid-template-columns: 1fr auto; }
  .model-play, .model-controls > div { display: none; }
}