/* 庭院·日常 — 设计系统 */
:root {
  --bg: #f7f5ee;
  --bg-soft: #f1efe4;
  --card: #fffdf7;
  --ink: #2c3527;
  --ink-soft: #5d6a52;
  --ink-faint: #8a9478;
  --green: #4d6445;
  --green-deep: #3a5033;
  --line: #e3ddca;
  --gold: #b99b6a;
  --shadow: 0 10px 30px rgba(74, 84, 60, 0.10);
  --shadow-lg: 0 24px 60px rgba(60, 70, 48, 0.16);
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", serif;
  --sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
main { overflow: clip; }

.eyebrow {
  font-size: 12px; letter-spacing: 0.22em; color: var(--green);
  font-weight: 600; text-transform: uppercase; margin-bottom: 14px;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.3; }
h1 { font-size: clamp(38px, 5.2vw, 60px); letter-spacing: 0.02em; }
h2 { font-size: clamp(28px, 3.6vw, 42px); }
p { color: var(--ink-soft); }
b { color: var(--ink); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; border-radius: 999px; font-size: 15px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: all .25s ease;
  font-family: var(--sans);
}
.btn.primary { background: var(--green); color: #f6f4ea; box-shadow: var(--shadow); }
.btn.primary:hover { background: var(--green-deep); transform: translateY(-2px); }
.btn.ghost { border-color: #c9c2ab; color: var(--green-deep); background: rgba(255,255,255,.5); }
.btn.ghost:hover { border-color: var(--green); background: #fff; }

/* ---------- 导航 ---------- */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 14px 0; transition: all .3s ease;
}
#nav.solid {
  background: rgba(247, 245, 238, 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: 10px 0;
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; gap: 36px;
}
.brand { font-family: var(--serif); font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 12px; height: 12px; border-radius: 3px; background: var(--green); box-shadow: 6px 6px 0 -3px var(--gold); }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; color: var(--ink-soft); }
.nav-links a { padding: 6px 2px; border-bottom: 1px solid transparent; transition: .2s; }
.nav-links a:hover { color: var(--green-deep); border-color: var(--green); }
.nav-cta {
  font-size: 14px; font-weight: 600; color: #f6f4ea; background: var(--green);
  padding: 9px 20px; border-radius: 999px;
}
.nav-cta:hover { background: var(--green-deep); }

/* ---------- Hero ---------- */
.hero {
  max-width: 1280px; margin: 0 auto; padding: 150px 28px 70px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center;
}
.hero .lede { font-size: 17.5px; max-width: 34em; margin-top: 22px; }
.stats { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 36px 0; }
.stat b { font-family: var(--serif); font-size: 30px; display: block; color: var(--green-deep); }
.stat span { font-size: 13px; color: var(--ink-faint); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-media { position: relative; }
.hero-media img {
  border-radius: 22px; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3; object-fit: cover; width: 100%;
}
.hero-media figcaption {
  position: absolute; left: 18px; right: 18px; bottom: 16px;
  background: rgba(250, 248, 240, 0.92); backdrop-filter: blur(8px);
  border-radius: 12px; padding: 10px 16px; font-size: 13px; color: var(--ink-soft);
}

/* ---------- 通用区块 ---------- */
section { max-width: 1280px; margin: 0 auto; padding: 84px 28px; }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-sub { margin-top: 16px; font-size: 16.5px; }

/* ---------- 3D 漫游区 ---------- */
.experience { padding-top: 20px; }
#viewer {
  position: relative; height: min(76vh, 780px); min-height: 520px;
  border-radius: 26px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(180deg, #cfdde2 0%, #e8ecdc 55%, #d9dbc4 100%);
  border: 1px solid var(--line);
}
#canvas-host { position: absolute; inset: 0; }
#canvas-host canvas { display: block; touch-action: none; }
#label-layer { position: absolute; inset: 0; pointer-events: none; }
/* 室内视角不显示户外场景标签 */
#viewer.interior-view #label-layer { display: none; }

.scene-label {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 7px;
  background: rgba(252, 250, 243, 0.92); color: var(--ink);
  border: 1px solid rgba(120, 130, 100, 0.35); border-radius: 999px;
  padding: 5px 13px 5px 6px; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(60, 70, 48, 0.18);
  /* 纯视觉：不拦截指针，拖动/缩放在标签区域照常进行（跳转用视角列表/分区面板） */
  pointer-events: none; white-space: nowrap;
}
.scene-label em {
  font-style: normal; background: var(--green); color: #f4f2e6;
  border-radius: 999px; min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; padding: 0 5px;
}
.scene-label:hover { background: #fff; transform: translate(-50%, -50%) scale(1.04); }
.dim-label {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 12.5px; font-weight: 700; color: #43603a;
  background: rgba(247, 245, 236, 0.85); padding: 1px 8px; border-radius: 6px;
  border: 1px solid rgba(110, 138, 92, 0.3);
}

.view-panel {
  position: absolute; left: 16px; top: 16px; z-index: 5;
  background: rgba(252, 250, 243, 0.9); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 4px; width: 196px;
  box-shadow: var(--shadow);
}
.panel-title { font-size: 11.5px; letter-spacing: .18em; color: var(--green); font-weight: 700; margin-bottom: 6px; }
.view-btn {
  display: flex; align-items: baseline; gap: 10px; text-align: left;
  background: none; border: none; border-radius: 10px; padding: 7px 10px;
  cursor: pointer; font-family: var(--sans); color: var(--ink-soft); transition: .18s;
}
.view-btn em { font-style: normal; font-family: var(--serif); font-weight: 700; color: var(--green); min-width: 30px; font-size: 14px; }
.view-btn span { font-size: 12.5px; line-height: 1.4; }
.view-btn:hover { background: #eef0e2; }
.view-btn.active { background: var(--green); color: #f4f2e6; }
.view-btn.active em { color: #e8e6cf; }

.scheme-switch {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 4px; background: rgba(252, 250, 243, 0.92); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px; box-shadow: var(--shadow);
}
.scheme-switch button {
  border: none; background: none; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  padding: 7px 16px; display: flex; align-items: center; gap: 7px; transition: .18s; position: relative;
}
.scheme-switch button b { font-family: var(--serif); color: var(--green); font-size: 15px; }
.scheme-switch button:hover { color: var(--ink); }
.scheme-switch button.selected { background: var(--green); color: #f4f2e6; }
.scheme-switch button.selected b { color: #e8e6cf; }
.scheme-switch small {
  font-size: 10px; background: var(--gold); color: #fff; border-radius: 999px; padding: 1px 7px; margin-left: 2px;
}
.scheme-switch button.selected small { background: rgba(255,255,255,.25); }

.view-caption {
  position: absolute; right: 16px; top: 16px; z-index: 5; text-align: right;
  background: rgba(252, 250, 243, 0.9); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; max-width: 300px;
  box-shadow: var(--shadow);
}
.view-caption h3 { font-size: 19px; margin: 2px 0 4px; }
.view-caption p:last-child { font-size: 12.5px; }
.view-caption .eyebrow { margin-bottom: 4px; }

.minimap-wrap {
  position: absolute; left: 16px; bottom: 16px; z-index: 5;
  background: rgba(252, 250, 243, 0.92); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 6px;
  box-shadow: var(--shadow); width: 148px;
}
#minimap svg { width: 100%; height: auto; display: block; }
#minimap .map-zone { cursor: pointer; }
#minimap .map-zone rect { transition: filter .15s; }
#minimap .map-zone:hover rect { filter: brightness(1.08) saturate(1.2); }

.viewer-tools {
  position: absolute; right: 16px; bottom: 16px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 56%;
}
.viewer-tools button {
  border: 1px solid var(--line); background: rgba(252, 250, 243, 0.92); backdrop-filter: blur(12px);
  color: var(--ink-soft); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: var(--sans); transition: .18s; display: inline-flex; align-items: center; gap: 6px;
}
.viewer-tools button:hover { background: #fff; color: var(--ink); }
.viewer-tools button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #f4f2e6; }


/* 渲染状态条 */
.render-status {
  position: absolute; left: 18px; bottom: 96px; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 253, 247, .92); border: 1px solid var(--line);
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
  font-size: 12.5px; color: var(--ink-soft); letter-spacing: .02em;
}
.render-status progress { width: 84px; height: 4px; appearance: none; border: none; border-radius: 4px; background: var(--line); }
.render-status progress::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
.render-status progress::-webkit-progress-value { background: var(--green); border-radius: 4px; }
.render-status.refining { border-color: #d8c9a8; }
.render-status.refining #render-state { color: var(--green-deep); font-weight: 600; }
@media (max-width: 820px) { .render-status { bottom: 84px; left: 12px; padding: 6px 12px; } }

#walk-pad {
  position: absolute; left: 222px; bottom: 68px; z-index: 6;
  display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); gap: 5px;
}
#walk-pad button {
  border: 1px solid var(--line); background: rgba(252, 250, 243, 0.94);
  border-radius: 12px; font-size: 16px; color: var(--green-deep); cursor: pointer;
  box-shadow: var(--shadow);
}
#walk-pad button:nth-child(1) { grid-column: 2; grid-row: 1; }
#walk-pad button:nth-child(2) { grid-column: 1; grid-row: 2; }
#walk-pad button:nth-child(3) { grid-column: 2; grid-row: 2; }
#walk-pad button:nth-child(4) { grid-column: 3; grid-row: 2; }
#walk-hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
  font-size: 12.5px; color: var(--ink-soft); background: rgba(252, 250, 243, 0.9);
  padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line);
}
#viewer-error {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: rgba(247, 245, 238, 0.96); padding: 30px;
}
#viewer-error h4 { font-size: 22px; }
#viewer-error p { max-width: 30em; }
#loading {
  position: absolute; inset: 0; z-index: 30;
  background: linear-gradient(180deg, #eef0e3, #e3e5d2);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading[hidden] { display: none; }
.loading-card {
  background: var(--card); border-radius: 20px; padding: 34px 44px; text-align: center;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); max-width: 420px;
}
.loading-card h3 { font-size: 24px; margin-bottom: 18px; }
#load-progress { width: 260px; height: 8px; accent-color: var(--green); margin-bottom: 10px; }
#load-status { font-size: 13.5px; margin-bottom: 8px; }
.loading-tip { font-size: 12px; color: var(--ink-faint); }
.viewer-tip { text-align: center; font-size: 13px; color: var(--ink-faint); margin-top: 16px; }

/* ---------- 沉浸模式：只留 3D 画布 ---------- */
body.immersive { overflow: hidden; }
body.immersive #nav { display: none; }
body.immersive #viewer {
  position: fixed; inset: 0; z-index: 80;
  height: 100dvh; min-height: 0;
  border-radius: 0; border: none; box-shadow: none;
}
/* 步行摇杆/提示与标签层保留，其余覆盖层全部隐藏 */
body.immersive #viewer > :not(#canvas-host):not(#immersive-bar):not(#walk-pad):not(#walk-hint):not(#label-layer) { display: none !important; }
/* 沉浸悬浮控件：容器 pointer-events:none 不挡画布，子按钮可点 */
.immersive-bar { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.immersive-bar > * { pointer-events: auto; }
.immersive-schemes { position: absolute; top: 18px; left: 18px; display: flex; gap: 6px; }
.immersive-schemes button {
  display: inline-flex; align-items: center;
  background: rgba(252, 250, 243, 0.82); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px;
  font: 600 13px var(--sans); color: var(--ink-soft); cursor: pointer;
  box-shadow: 0 4px 14px rgba(60, 70, 48, 0.18); transition: background .18s, color .18s;
  white-space: nowrap;
}
.immersive-schemes button:hover { background: #fff; color: var(--ink); }
.immersive-schemes button.selected { background: var(--green); border-color: var(--green); color: #f4f2e6; }
/* 停靠栏：时间 / 标签 / 视角 / 退出 */
#immersive-dock {
  position: absolute; right: 18px; bottom: 18px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
}
#immersive-dock button {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(252, 250, 243, 0.82); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 17px;
  font: 600 13px var(--sans); color: var(--ink-soft); cursor: pointer;
  box-shadow: 0 4px 14px rgba(60, 70, 48, 0.18); transition: background .18s, color .18s;
  white-space: nowrap;
}
#immersive-dock button:hover { background: #fff; color: var(--ink); }
#immersive-dock button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #f4f2e6; }
/* 视角弹出列表 */
.iview-list {
  position: absolute; right: 18px; bottom: 66px; z-index: 41;
  display: flex; flex-direction: column; gap: 4px; width: 218px;
  max-height: 52vh; overflow-y: auto; padding: 8px;
  background: rgba(252, 250, 243, 0.94); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
}
.iview-list button {
  text-align: left; background: none; border: none; border-radius: 10px;
  padding: 9px 12px; font: 500 13px var(--sans); color: var(--ink-soft); cursor: pointer; transition: .15s;
}
.iview-list button:hover { background: #eef0e2; color: var(--ink); }
/* 沉浸里的标签：小号半透明，不抢画面；拖动时整层淡出，松手恢复 */
body.immersive #label-layer { transition: opacity .25s ease; }
body.immersive .scene-label { font-size: 12px; opacity: .88; }
body.immersive .scene-label em { min-width: 20px; height: 20px; font-size: 10.5px; }
body.immersive.dragging #label-layer { opacity: .12; }
@media (max-width: 820px) {
  .immersive-schemes { top: 12px; left: 12px; }
  .immersive-schemes button { padding: 8px 12px; font-size: 12px; }
  #immersive-dock { right: 12px; bottom: 12px; gap: 6px; }
  #immersive-dock button { padding: 10px 13px; font-size: 12.5px; }
  .iview-list { right: 12px; bottom: 62px; width: 200px; }
}

/* ---------- 三方案 ---------- */
.scheme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.scheme-card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 22px; overflow: hidden; box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease; display: flex; flex-direction: column;
}
.scheme-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.scheme-card.selected { outline: 2px solid var(--green); }
.scheme-img { aspect-ratio: 4/3.2; overflow: hidden; }
.scheme-img a { display: block; height: 100%; }
.scheme-image-note { margin: -12px 0 24px; color: var(--muted, #686b64); font-size: 12px; }
.scheme-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .5s ease; }
.scheme-card:hover .scheme-img a { display: block; height: 100%; }
.scheme-image-note { margin: -12px 0 24px; color: var(--muted, #686b64); font-size: 12px; }
.scheme-img img { transform: scale(1.04); }
.scheme-card h3 { font-size: 21px; padding: 20px 22px 6px; }
.scheme-card > p { padding: 0 22px; font-size: 14px; }
.scheme-card .tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 22px 0; }
.scheme-card .tags span {
  font-size: 12px; color: var(--green-deep); background: #eceee0;
  border-radius: 999px; padding: 3px 11px;
}
.scheme-card .btn { margin: 18px 22px 22px; align-self: flex-start; }
.ribbon {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: var(--green); color: #f4f2e6; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 4px 13px; box-shadow: var(--shadow);
}

/* ---------- 空间安排 ---------- */
.layout-body { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 44px; align-items: start; }
.layout-details { list-style: none; counter-reset: d; display: flex; flex-direction: column; gap: 8px; }
.layout-details li {
  counter-increment: d; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 24px 22px 74px; position: relative;
}
.layout-details li::before {
  content: counter(d); position: absolute; left: 22px; top: 24px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #f4f2e6; font-family: var(--serif); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.layout-details h4 { font-size: 18px; margin-bottom: 6px; }
.layout-details p { font-size: 14.5px; }
.layout-details small { display: block; margin-top: 8px; color: var(--ink-faint); font-size: 12.5px; }
.layout-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 90px; }
.plan-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  padding: 22px; box-shadow: var(--shadow);
}
.plan-card figcaption h3 { font-size: 20px; margin: 2px 0 10px; }
.plan-card .eyebrow { margin-bottom: 6px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag-row span { font-size: 12px; color: var(--green-deep); background: #eceee0; border-radius: 999px; padding: 3px 11px; }
.plan-svg svg { width: 100%; height: auto; }
.care-card {
  background: linear-gradient(160deg, #eef1e2, #e6e9d6);
  border: 1px solid var(--line); border-radius: 20px; padding: 22px;
}
.care-card h4 { font-size: 17px; margin-bottom: 6px; font-family: var(--serif); }
.care-card p { font-size: 14px; }

/* ---------- 材料 ---------- */
.mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mat-grid article {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px;
  box-shadow: var(--shadow);
}
.mat-no { font-family: var(--serif); font-size: 15px; color: var(--gold); font-weight: 700; margin-bottom: 10px; }
.mat-grid h3 { font-size: 20px; margin-bottom: 10px; }
.mat-grid p { font-size: 14.5px; }
.mat-grid small { display: block; margin-top: 12px; color: var(--ink-faint); font-size: 12.5px; }
.palette { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 34px; }
.palette span { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.palette i {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.06);
}

/* ---------- 整场 ---------- */
.site-body { display: grid; grid-template-columns: 1fr; gap: 20px; }
.site-table {
  width: 100%; border-collapse: collapse; background: var(--card);
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line);
}
.site-table th, .site-table td { padding: 15px 22px; text-align: left; font-size: 14.5px; }
.site-table th { background: #eceee0; color: var(--green-deep); font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.site-table td { border-top: 1px solid var(--line); color: var(--ink-soft); }
.site-table td:first-child { color: var(--ink); font-weight: 600; }
.site-table tr.total td { background: #f4f2e4; color: var(--green-deep); font-weight: 700; }
.site-note { font-size: 14px; max-width: 60em; }

/* ---------- NEXT ---------- */
.next {
  background: linear-gradient(160deg, #3a5033, #2c3f27);
  max-width: none; border-radius: 30px; margin: 40px 28px 90px; padding: 70px 28px;
  text-align: center;
}
.next h2 { color: #f2f0e2; margin-bottom: 16px; }
.next p { color: #c9d2ba; max-width: 44em; margin: 0 auto 30px; }
.next .eyebrow { color: #a9bd93; }
.next .btn.primary { background: #e9e6d2; color: var(--green-deep); }
.next .btn.primary:hover { background: #fff; }

/* ---------- 页脚 ---------- */
footer { border-top: 1px solid var(--line); padding: 36px 28px; }
.foot-inner {
  max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-faint);
}
.foot-inner b { color: var(--ink-soft); font-family: var(--serif); }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 20px);
  background: rgba(44, 53, 39, 0.94); color: #f2f0e2; font-size: 14px;
  padding: 11px 22px; border-radius: 999px; z-index: 100; opacity: 0;
  transition: all .35s ease; pointer-events: none; box-shadow: var(--shadow-lg);
}
#toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 120px; }
  .layout-body { grid-template-columns: 1fr; }
  .layout-side { position: static; }
}
@media (max-width: 820px) {
  .nav-links { display: none; }
  section { padding: 60px 20px; }
  .hero { padding: 104px 20px 50px; }
  .scheme-grid, .mat-grid { grid-template-columns: 1fr; }
  #viewer { height: min(72vh, 620px); min-height: 460px; border-radius: 18px; }
  .view-panel {
    flex-direction: row; overflow-x: auto; width: auto; left: 12px; right: 12px; top: auto; bottom: 66px;
    padding: 8px; gap: 4px; border-radius: 14px;
  }
  .view-panel .panel-title { display: none; }
  .view-btn { flex-direction: column; align-items: center; min-width: 64px; padding: 7px 8px; text-align: center; gap: 2px; }
  .view-btn span { font-size: 11px; }
  .scheme-switch { top: 12px; }
  .scheme-switch button { padding: 6px 10px; font-size: 12px; }
  .view-caption { top: 58px; right: 12px; max-width: 210px; padding: 10px 12px; }
  .view-caption h3 { font-size: 16px; }
  .minimap-wrap { display: none; }
  /* 手机工具条：单排可横滑，九个按钮都不截断 */
  .viewer-tools {
    right: 12px; left: 12px; bottom: 12px; max-width: none;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    justify-content: flex-start; -webkit-overflow-scrolling: touch;
    border-radius: 999px; padding: 6px;
  }
  .viewer-tools::-webkit-scrollbar { display: none; }
  .viewer-tools button { flex: 0 0 auto; padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
  /* 手机端隐藏渲染状态胶囊（桌面端保留），视图更干净 */
  #render-status { display: none; }
  /* 手机端排版修正：方案切换与视角标签不折行，导航保持单行 */
  .scheme-switch { max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none; }
  .scheme-switch::-webkit-scrollbar { display: none; }
  .scheme-switch button { white-space: nowrap; flex: 0 0 auto; }
  .view-btn span { white-space: nowrap; }
  .view-panel .view-btn { flex: 0 0 auto; }
  .brand, .nav-cta { white-space: nowrap; }
  .nav-link { display: none; }
  .view-caption { top: 64px; max-width: 190px; }
  #walk-pad { left: 12px; bottom: 128px; }
  .next { margin: 30px 16px 70px; padding: 54px 20px; }
}

/* Interior entry follows the existing garden palette. */
.house-entry-link{position:absolute;z-index:8;right:24px;top:25px;padding:11px 17px;border:1px solid #ffffffa8;background:#f5f3ecee;border-radius:100px;color:#3b5036;text-decoration:none;font-size:13px;font-weight:600;box-shadow:0 4px 20px #23371e16}.house-entry-link span{font-size:20px;margin-right:6px}.interior-intro{max-width:1280px;margin:80px auto;display:grid;grid-template-columns:1.15fr 1fr;gap:65px;padding:0 36px;align-items:center}.interior-intro-image{display:block;position:relative}.interior-intro-image img{display:block;width:100%;aspect-ratio:1.4;object-fit:cover;border-radius:6px}.interior-intro-image span{position:absolute;bottom:14px;left:14px;background:#21311edb;color:#fff;padding:6px 10px;font-size:11px;border-radius:3px}.interior-intro-copy>p:first-child{font-size:12px;color:#64765a;letter-spacing:.12em}.interior-intro-copy h2{font-family:"Songti SC",serif;font-weight:500;font-size:34px;line-height:1.6;margin:14px 0}.interior-intro-copy p{font-size:14px;line-height:1.9;color:#6c7465;max-width:380px}.interior-model-link{display:block;margin-top:17px;font-size:12px;color:#53674b}.house-entry-link:focus-visible{outline:3px solid #a9bc7d;outline-offset:4px}.immersive .house-entry-link{top:22px;right:22px}@media(max-width:820px){.house-entry-link{right:13px;top:69px;padding:8px 12px;font-size:11px}.interior-intro{grid-template-columns:1fr;gap:24px;margin:50px auto;padding:0 24px}.interior-intro-copy h2{font-size:29px}.interior-intro-copy p{max-width:none}.immersive .house-entry-link{top:65px;right:12px}}

.house-entry-link{top:150px;bottom:auto}.immersive .house-entry-link{top:65px}@media(max-width:820px){.house-entry-link{top:66px;right:13px}}