/* 益鸟美居 · 案例库  样式 */
:root {
  --bg: #f6f4f1;
  --bg-2: #efece6;
  --surface: #ffffff;
  --ink: #1a1815;
  --ink-2: #56504a;
  --muted: #8c857a;
  --line: #e5e0d8;
  --accent: #b4553c;
  --accent-2: #8e3f2b;
  --accent-soft: #f6eae5;
  --green: #2f4a3d;
  --gold: #b08948;
  --shadow-s: 0 1px 2px rgba(26, 24, 21, .05), 0 4px 14px rgba(26, 24, 21, .05);
  --shadow-m: 0 2px 6px rgba(26, 24, 21, .06), 0 18px 40px rgba(26, 24, 21, .10);
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 22px;
  --max: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent-soft); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* ---------- header ---------- */
.hd {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 244, 241, .86);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.hd-in { display: flex; align-items: center; gap: 18px; height: 66px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(145deg, var(--accent), #d1795c);
  display: grid; place-items: center; color: #fff; font-size: 17px;
  box-shadow: 0 4px 12px rgba(180, 85, 60, .28);
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b { font-size: 15px; letter-spacing: .2px; }
.brand-txt span { font-size: 11px; color: var(--muted); letter-spacing: 1.2px; }

.hd-search { flex: 1; position: relative; max-width: 520px; min-width: 0; }
.hd-search input {
  width: 100%; height: 40px; padding: 0 40px 0 40px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  outline: none; transition: .18s;
}
.hd-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hd-search .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.hd-search kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font: 11px/1 ui-monospace, monospace; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; background: var(--bg-2);
}
.hd-nav { display: flex; gap: 4px; margin-left: auto; flex: none; }
.hd-nav a {
  padding: 8px 13px; border-radius: 999px; font-size: 13.5px; color: var(--ink-2);
  transition: .16s;
}
.hd-nav a:hover { background: var(--bg-2); color: var(--ink); }
.hd-nav a.on { background: var(--ink); color: #fff; }
.hd-nav a.ghost { border: 1px solid var(--line); }

/* ---------- hero ---------- */
.hero { padding: 46px 0 26px; }
.hero h1 {
  margin: 0 0 14px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.24;
  letter-spacing: -.6px; font-weight: 650; max-width: 19em;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p { margin: 0; color: var(--ink-2); max-width: 46em; font-size: 15px; }
.stats { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 26px; }
.stat b { display: block; font-size: 27px; font-weight: 640; letter-spacing: -.5px; }
.stat span { font-size: 12.5px; color: var(--muted); }
.stat i { font-style: normal; font-size: 12px; color: var(--accent); }

/* ---------- 对话检索 ---------- */
.ask {
  margin: 8px 0 26px; border-radius: var(--r-l); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-s); overflow: hidden;
}
.ask-top { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px 8px; }
.ask-avatar {
  width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--green); color: #fff; font-size: 15px;
}
.ask-txt { font-size: 14px; color: var(--ink-2); }
.ask-txt b { color: var(--ink); }
.ask-form { display: flex; gap: 10px; padding: 0 20px 16px; }
.ask-form input {
  flex: 1; min-width: 0; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); padding: 0 14px; outline: none;
}
.ask-form input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.btn-primary {
  height: 44px; padding: 0 20px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 550; transition: .16s; white-space: nowrap;
}
.btn-primary:hover { background: var(--accent); }
.ask-sugs { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 18px; }
.ask-sugs button {
  font-size: 12.5px; color: var(--ink-2); background: var(--bg-2); border-radius: 999px;
  padding: 6px 12px; transition: .16s;
}
.ask-sugs button:hover { background: var(--accent-soft); color: var(--accent-2); }
.ask-reply {
  display: none; margin: 0 20px 18px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(180deg, #fbf8f4, var(--accent-soft));
  border: 1px solid #eeddd5; font-size: 13.5px; color: var(--ink-2);
}
.ask-reply.on { display: block; }
.ask-reply b { color: var(--ink); }
.ask-reply .parsed { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.ask-reply .parsed span {
  background: #fff; border: 1px solid #e6d6cd; color: var(--accent-2);
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
}

/* ---------- 筛选 ---------- */
.filters { position: sticky; top: 66px; z-index: 30; background: var(--bg); padding: 10px 0 14px; }
.frow { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.flabel { flex: none; width: 52px; font-size: 12px; color: var(--muted); letter-spacing: .5px; }
.fchips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; min-width: 0; flex: 1; }
.fchips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; font-size: 12.5px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  white-space: nowrap; transition: .15s;
}
.chip:hover { border-color: #cfc7ba; }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.on.soft { background: var(--accent); border-color: var(--accent); }
.fbar { display: flex; align-items: center; gap: 14px; padding-top: 8px; flex-wrap: wrap; }
.fcount { font-size: 12.5px; color: var(--muted); }
.fcount b { color: var(--ink); font-weight: 600; }
.fsort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.fsort select { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 8px; }
.freset { font-size: 12.5px; color: var(--accent); }

/* ---------- 卡片网格 ---------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 6px 0 70px; }
@media (max-width: 1080px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.card {
  background: var(--surface); border-radius: var(--r-m); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-s);
  transition: transform .2s, box-shadow .2s; cursor: pointer; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.card-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.card:hover .card-img img { transform: scale(1.045); }
.ph {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 10px;
}
.ph-ico { font-size: 22px; opacity: .5; }
.ph-txt { font-size: 11.5px; color: #fff; opacity: .92; letter-spacing: .4px; margin-top: 4px; }
.badge {
  position: absolute; left: 9px; top: 9px; font-size: 11px; padding: 3px 8px; border-radius: 6px;
  background: rgba(255,255,255,.92); color: var(--ink); font-weight: 550; backdrop-filter: blur(4px);
}
.badge.gold { background: rgba(176,137,72,.94); color: #fff; }
.badge.dark { background: rgba(26,24,21,.72); color: #fff; left: auto; right: 9px; }
.card-b { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-title { font-size: 14.5px; font-weight: 600; letter-spacing: -.1px; display: flex; align-items: center; gap: 6px; }
.card-title span { font-weight: 400; font-size: 12px; color: var(--muted); }
.card-meta { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; }
.tag {
  font-size: 11px; padding: 2.5px 7px; border-radius: 5px; background: var(--bg-2); color: var(--ink-2);
}
.tag.a { background: var(--accent-soft); color: var(--accent-2); }
.tag.g { background: #eaf0ec; color: var(--green); }
.miss { font-size: 11px; color: #b08b5a; }

.empty { padding: 70px 0; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }

/* ---------- 小区 / 风格视图 ---------- */
.clist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 6px 0 70px; }
@media (max-width: 900px) { .clist { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .clist { grid-template-columns: 1fr; } }
.citem {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 14px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: .16s;
}
.citem:hover { border-color: #cfc7ba; box-shadow: var(--shadow-s); }
.citem .n { flex: 1; min-width: 0; }
.citem .n b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citem .n span { font-size: 12px; color: var(--muted); }
.citem .num { font-size: 20px; font-weight: 650; color: var(--accent); letter-spacing: -.5px; }
.citem .num i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 400; margin-left: 2px; }

.sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 6px 0 70px; }
@media (max-width: 900px) { .sgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sgrid { grid-template-columns: repeat(2, 1fr); } }
.sitem { border-radius: var(--r-m); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.sitem .si { aspect-ratio: 1; background: var(--bg-2); display: grid; place-items: center; color: #fff; font-size: 18px; letter-spacing: 2px; }
.sitem .sb { padding: 10px 12px 12px; }
.sitem .sb b { font-size: 13.5px; }
.sitem .sb p { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 详情抽屉 ---------- */
.mask {
  position: fixed; inset: 0; background: rgba(20,18,16,.42); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: .22s; z-index: 60;
}
.mask.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 61; background: var(--surface);
  inset: auto 0 0 0; max-height: 92vh; border-radius: 22px 22px 0 0;
  transform: translateY(102%); transition: transform .3s cubic-bezier(.3,.8,.3,1);
  display: flex; flex-direction: column; overflow: hidden;
  pointer-events: none; visibility: hidden;
}
.sheet.on { transform: none; pointer-events: auto; visibility: visible; }
@media (min-width: 900px) {
  .sheet { inset: 4vh 0 4vh 0; margin: 0 auto; max-width: 1000px; border-radius: 20px; max-height: 92vh; transform: translateY(30px) scale(.99); opacity: 0; }
  .sheet.on { transform: none; opacity: 1; }
}
.sheet-hd {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line);
  flex: none; background: var(--surface);
}
.sheet-hd .t { flex: 1; min-width: 0; }
.sheet-hd .t b { font-size: 16px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-hd .t span { font-size: 12px; color: var(--muted); }
.x { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; font-size: 16px; color: var(--ink-2); }
.x:hover { background: var(--line); }
.sheet-bd { overflow-y: auto; padding: 18px 20px 40px; }

.d-cover { position: relative; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 2.3/1; max-height: 380px; background: var(--bg-2); }
.d-cover img { width: 100%; height: 100%; object-fit: cover; }
.d-tabs { display: flex; gap: 6px; margin: 14px 0 10px; flex-wrap: wrap; }
.d-tabs .chip { font-size: 12px; }
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 560px) { .gal { grid-template-columns: repeat(2, 1fr); } }
.gal figure { margin: 0; position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: var(--bg-2); cursor: zoom-in; }
.gal img { width: 100%; height: 100%; object-fit: cover; }
.gal figcaption {
  position: absolute; left: 0; bottom: 0; right: 0; font-size: 11px; color: #fff;
  padding: 14px 8px 6px; background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.gal .ph2 { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; text-align: center; }

.d-sec { margin-top: 22px; }
.d-sec h4 { margin: 0 0 10px; font-size: 13px; letter-spacing: .6px; color: var(--muted); font-weight: 500; text-transform: uppercase; }
.kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 620px) { .kv { grid-template-columns: repeat(2, 1fr); } }
.kv div { background: var(--bg); border-radius: 10px; padding: 9px 11px; }
.kv span { font-size: 11.5px; color: var(--muted); display: block; }
.kv b { font-size: 14px; font-weight: 600; }
.kv b.na { color: #b08b5a; font-weight: 400; font-size: 12.5px; }
ul.hl { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; }
ul.hl li { margin: 4px 0; }
.mats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 620px) { .mats { grid-template-columns: repeat(2, 1fr); } }
.mat { display: flex; align-items: center; gap: 8px; font-size: 13px; background: var(--bg); border-radius: 9px; padding: 8px 11px; }
.mat i { font-style: normal; font-size: 13px; }
.mat.ok { color: var(--green); }
.mat.no { color: var(--muted); }
.mat.no i { opacity: .45; }

.talk {
  background: linear-gradient(180deg, #fbf8f4, #fff); border: 1px dashed #e0d3c8;
  border-radius: 12px; padding: 14px; font-size: 13.5px; color: var(--ink-2); white-space: pre-wrap;
  line-height: 1.75; font-family: ui-monospace, "PingFang SC", monospace;
}
.d-act { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.btn-line { border: 1px solid var(--line); border-radius: 11px; padding: 10px 16px; font-size: 13.5px; background: var(--surface); }
.btn-line:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; border-radius: 11px; padding: 10px 18px; font-size: 13.5px; }
.btn-dark:hover { background: var(--accent); }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 90; background: rgba(12,11,10,.94); display: none; place-items: center; }
.lb.on { display: grid; }
.lb img { max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: 6px; }
.lb .lbx { position: absolute; top: 18px; right: 22px; color: #fff; font-size: 26px; opacity: .8; }
.lb .lbn { position: absolute; bottom: 20px; color: #fff; font-size: 12.5px; opacity: .7; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; font-size: 13px; padding: 10px 18px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: .24s; z-index: 100;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 移动端底部导航 */
.mnav { display: none; }
@media (max-width: 760px) {
  .hd-nav { gap: 2px; }
  .hd-nav a { padding: 6px 9px; font-size: 12px; }
  .hd-nav a.ghost { padding: 6px 9px; }
  .brand-txt span { display: none; }
  .filters { position: static; }
  .ask-form { flex-wrap: wrap; }
  .ask-form input { flex: 1 1 100%; }
  .hd-search { max-width: none; }
  .hd-search kbd { display: none; }
  .brand-txt span { display: none; }
  .hero { padding: 26px 0 14px; }
  .stats { gap: 22px; }
  .stat b { font-size: 22px; }
  .mnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  }
  .mnav a { flex: 1; text-align: center; font-size: 11px; color: var(--muted); padding: 5px 0; }
  .mnav a b { display: block; font-size: 17px; line-height: 1.2; font-weight: 400; }
  .mnav a.on { color: var(--accent); }
  .grid { padding-bottom: 84px; }
  .clist, .sgrid { padding-bottom: 84px; }
}

/* 前后对比 */
.cmp { display: flex; flex-direction: column; gap: 10px; }
.cmp-i { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmp-i figure { margin: 0; position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: var(--bg-2); cursor: zoom-in; }
.cmp-i img { width: 100%; height: 100%; object-fit: cover; }
.cmp-i figcaption {
  position: absolute; left: 0; bottom: 0; right: 0; font-size: 11px; color: #fff;
  padding: 16px 8px 6px; background: linear-gradient(transparent, rgba(0,0,0,.6));
}
.cmp-i figure:first-child figcaption { background: linear-gradient(transparent, rgba(120,60,40,.75)); }
.cmp-i figure:last-child figcaption { background: linear-gradient(transparent, rgba(35,70,55,.75)); }

/* ================= 对话模式 ================= */
body.chatmode { background: var(--bg); }
body.chatmode .hd { position: sticky; }
.chat-wrap { max-width: 820px; margin: 0 auto; padding: 20px 16px 150px; }
.chat-log { display: flex; flex-direction: column; gap: 16px; }

.msg { display: flex; gap: 9px; align-items: flex-start; }
.msg.me { justify-content: flex-end; }
.av {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--green); color: #fff; font-size: 13px; margin-top: 2px;
}
.bubble {
  padding: 11px 14px; border-radius: 15px; font-size: 14.5px; line-height: 1.62;
  max-width: min(78%, 560px); word-break: break-word;
}
.me .bubble { background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }
.ai .bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: var(--shadow-s); }
.ai .bubble b { color: var(--ink); }
.wide { max-width: min(94%, 640px) !important; width: 100%; }

.dots { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: bl 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes bl { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* 空状态 */
.hello { text-align: center; padding: 26px 10px 6px; }
.hello .hi-av {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--green), #4a6b58); color: #fff; font-size: 22px;
  box-shadow: 0 8px 22px rgba(47, 74, 61, .25);
}
.hello h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.3px; }
.hello p { margin: 0 auto; max-width: 30em; color: var(--ink-2); font-size: 13.5px; }
.quick { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.quick button {
  font-size: 13px; padding: 8px 14px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line); color: var(--ink-2); transition: .16s;
}
.quick button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* 结果卡片 */
.res { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.cc {
  display: flex; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer; transition: .16s; align-items: center;
}
.cc:hover { border-color: #cfc7ba; box-shadow: var(--shadow-s); transform: translateY(-1px); }
.cc img { width: 92px; height: 70px; border-radius: 8px; object-fit: cover; flex: none; background: var(--bg-2); }
.cc-b { flex: 1; min-width: 0; }
.cc-b b { font-size: 14px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-b span { font-size: 12px; color: var(--muted); display: block; margin-top: 2px; }
.cc-b .tags { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.cc-go { flex: none; font-size: 12px; color: var(--accent); padding-right: 4px; }

.acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.acts button {
  font-size: 12.5px; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2);
}
.acts button:hover { border-color: var(--ink); color: var(--ink); }
.acts .pri { background: var(--ink); color: #fff; border-color: var(--ink); }
.acts .pri:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.chips-in { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chips-in span {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-2); border: 1px solid #e8d5cb;
}
.src { font-size: 10.5px; color: var(--muted); margin-top: 8px; }

/* 输入条 */
.chat-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: rgba(246, 244, 241, .95); backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--line);
  padding: 10px 16px max(10px, env(safe-area-inset-bottom));
}
.chat-bar .inner { max-width: 820px; margin: 0 auto; display: flex; gap: 9px; align-items: center; }
.chat-bar input {
  flex: 1; min-width: 0; height: 46px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; padding: 0 18px; outline: none; font-size: 15px;
}
.chat-bar input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.chat-bar .send {
  width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #fff;
  font-size: 18px; flex: none; display: grid; place-items: center; transition: .16s;
}
.chat-bar .send:hover { background: var(--accent); }

@media (max-width: 760px) {
  .chat-wrap { padding: 16px 12px 128px; }
  .bubble { max-width: 86%; font-size: 14px; }
  .wide { max-width: 100% !important; }
  .cc img { width: 78px; height: 60px; }
  .hello { padding-top: 34px; }
}

/* 实景图库 */
.gwrap { columns: 4; column-gap: 12px; padding: 8px 0 70px; }
@media (max-width: 1080px) { .gwrap { columns: 3; } }
@media (max-width: 760px) { .gwrap { columns: 2; column-gap: 8px; } }
.gitem { break-inside: avoid; margin-bottom: 12px; border-radius: 12px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); cursor: zoom-in; position: relative; }
.gitem img { width: 100%; display: block; }
.gitem span {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; color: #fff;
  padding: 14px 8px 6px; background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.gsec {
  column-span: all; -webkit-column-span: all;
  margin: 22px 0 10px; font-size: 13px; color: var(--ink-2); letter-spacing: .5px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}

/* ===== 改造对比卡（整张展示） ===== */
.card-full {
  width: 100%; height: auto; display: block; border-radius: 12px; cursor: zoom-in;
  border: 1px solid var(--line); background: var(--bg-2);
}
.card-note { margin-top: 8px; font-size: 12px; color: var(--muted); }

/* ===== 施工工艺 ===== */
.craft-intro { max-width: 640px; margin-bottom: 18px; }
.craft-intro h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.3px; }
.craft-intro p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.craft {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; margin-bottom: 18px;
}
.craft-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.craft-no {
  font-size: 12px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border-radius: 6px; padding: 2px 7px; letter-spacing: .5px;
}
.craft-h h3 { margin: 0; font-size: 18px; letter-spacing: -.2px; }
.craft-tag { font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.craft-sum { margin: 8px 0 14px; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }

.craft-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .craft-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .craft-steps { grid-template-columns: 1fr; } }
.cstep { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; cursor: zoom-in; transition: .16s; }
.cstep:hover { border-color: #cfc7ba; box-shadow: var(--shadow-s); }
.cstep img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--bg-2); }
.cstep figcaption {
  display: flex; align-items: center; gap: 7px; padding: 9px 10px 0; font-size: 13.5px; font-weight: 600;
}
.cstep figcaption b {
  width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff;
  font-size: 11px; display: grid; place-items: center; flex: none; font-weight: 600;
}
.cstep p { margin: 5px 10px 11px; font-size: 12.5px; line-height: 1.62; color: var(--ink-2); }

.craft-pts { margin-top: 14px; background: var(--bg); border-radius: 12px; padding: 12px 14px; }
.craft-pts h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; letter-spacing: .5px; }
.craft-pts ul { margin: 0; padding-left: 18px; }
.craft-pts li { font-size: 13px; line-height: 1.75; color: var(--ink-2); }

/* 窄屏：只留 logo，导航收紧，避免 5 个入口把页面撑出横向滚动 */
@media (max-width: 560px) {
  .hd-in { gap: 10px; height: 58px; }
  .brand-txt { display: none; }
  .hd-nav { gap: 0; }
  .hd-nav a { padding: 6px 8px; font-size: 12px; }
  .wrap { padding: 0 14px; }
}