:root{
  --primary:#2f6fed;
  --bg:#f2f4f8;
  --card:#ffffff;
  --text:#1f2733;
  --muted:#7a8494;
  --line:#e7eaf0;
  --heart:#ff5a5f;
  --radius:14px;
  --shadow:0 2px 10px rgba(31,42,68,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
}
@media (min-width:560px){
  body{background:#e4e8ee}
  #app{box-shadow:0 0 40px rgba(0,0,0,.07)}
}
#app{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  padding-bottom:76px;
  background:var(--bg);
}

/* 顶部栏 */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar h1{
  margin:0;font-size:17px;font-weight:600;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.back-btn{
  width:32px;height:32px;flex:none;
  border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--text);
  font-size:20px;line-height:1;cursor:pointer;
}
.section-title{
  padding:16px 16px 4px;
  font-size:13px;color:var(--muted);
}

/* 卡片 */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  margin:12px 16px;
}
.link-card{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  cursor:pointer;
}
.link-card:active{transform:scale(.99)}
.b-name{font-weight:600;font-size:15px}
.arrow{color:#b8c0cc;font-size:22px;flex:none}
.intro{color:var(--muted);font-size:13px;line-height:1.7;margin:8px 0 0}

/* 地图 */
.map-wrap{
  margin:12px 16px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#e6ecef;
}
.map-svg{display:block;width:100%;height:auto}
.map-svg .marker{cursor:pointer}
.map-svg .marker text{pointer-events:none}
.map-info .ci-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ci-name{font-weight:600;font-size:16px}
.ci-name.big{font-size:19px}
.ci-meta{color:var(--muted);font-size:12px;margin:6px 0 10px;line-height:1.6}
.price-badge{
  flex:none;background:#eef3ff;color:var(--primary);
  font-size:12px;padding:4px 10px;border-radius:999px;font-weight:600;
}
.btn{
  display:inline-block;border:0;border-radius:999px;cursor:pointer;
  background:var(--primary);color:#fff;
  font-size:14px;padding:10px 22px;
}
.btn:active{opacity:.85}
.btn-sm{padding:8px 16px;font-size:13px}

/* 户型卡片 */
.unit-card{
  display:flex;gap:12px;align-items:center;
  cursor:pointer;
}
.unit-card:active{transform:scale(.99)}
.floorplan{
  width:96px;height:80px;flex:none;
  background:#f7f9fb;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.floorplan-svg{width:88px;height:74px;display:block}
.unit-info{flex:1;min-width:0}
.unit-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-meta{color:var(--muted);font-size:12px;margin-top:3px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{
  background:#eef3ff;color:var(--primary);
  font-size:11px;padding:2px 8px;border-radius:999px;
}
.fav-btn{
  border:0;background:none;padding:4px;flex:none;cursor:pointer;
}
.heart{font-size:22px;color:#c3cad6;transition:color .15s}
.heart.on{color:var(--heart)}

/* 底部导航 */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:flex;max-width:520px;margin:0 auto;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item{
  flex:1;border:0;background:none;cursor:pointer;
  color:var(--muted);font-size:11px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 0 7px;
}
.nav-item svg{width:22px;height:22px}
.nav-item.active{color:var(--primary)}

/* 空状态 */
.empty{text-align:center;padding:84px 32px;color:var(--muted)}
.empty .big{font-size:46px;margin-bottom:8px}
.empty p{font-size:14px;line-height:1.8;margin:0}

/* ===== 3D 看房页 ===== */
body.viewer-mode{background:#10141b}
body.viewer-mode .bottom-nav{display:none}
body.viewer-mode #app{padding-bottom:0}
.viewer{
  position:fixed;inset:0;z-index:40;
  background:#10141b;overflow:hidden;
}
#viewerCanvas{position:absolute;inset:0;width:100%;height:100%}
.viewer-top{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:linear-gradient(rgba(0,0,0,.5),transparent);
  color:#fff;
}
.vt-title{
  flex:1;font-size:14px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.glass-btn{
  flex:none;width:36px;height:36px;
  border:1px solid rgba(255,255,255,.35);border-radius:12px;
  background:rgba(255,255,255,.16);
  color:#fff;font-size:20px;line-height:1;cursor:pointer;
  backdrop-filter:blur(4px);
}
.glass-btn.fav{width:40px;height:36px;font-size:16px;padding:0 8px}
.glass-btn.fav .heart{color:#fff;font-size:18px}
.glass-btn.fav .heart.on{color:var(--heart)}
.glass-btn.fav .heart:not(.on){color:rgba(255,255,255,.85)}
.hint{
  position:absolute;top:62px;left:50%;transform:translateX(-50%);
  z-index:6;pointer-events:none;
  color:rgba(255,255,255,.9);font-size:12px;
  background:rgba(0,0,0,.38);padding:6px 14px;border-radius:999px;
  white-space:nowrap;
}
.viewer-bottom{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;flex-direction:column;gap:10px;
  padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(0,0,0,.62));
  color:#fff;
}
.unit-line{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vt-name{font-size:16px;font-weight:600}
.vt-meta{font-size:12px;color:rgba(255,255,255,.8);margin-top:2px}
.style-desc{font-size:12px;color:rgba(255,255,255,.75)}
.style-bar{
  position:absolute;left:0;right:0;z-index:7;
  bottom:calc(204px + env(safe-area-inset-bottom));
  display:flex;gap:8px;justify-content:center;
  padding:0 14px;
}
.viewer .chip{
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.16);
  color:#fff;font-size:13px;border-radius:999px;
  padding:7px 16px;cursor:pointer;backdrop-filter:blur(4px);
}
.viewer .chip.active{background:#fff;color:#111;border-color:#fff;font-weight:600}
.walk-pad{
  position:absolute;right:14px;bottom:220px;z-index:7;
  display:grid;grid-template-columns:repeat(3,44px);gap:6px;
  touch-action:none;
}
.walk-pad i{display:block}
.wp{
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.3);border-radius:12px;
  background:rgba(255,255,255,.18);
  color:#fff;font-size:16px;cursor:pointer;
  backdrop-filter:blur(4px);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.wp:active{background:rgba(255,255,255,.4)}

/* 加载遮罩 */
.loading-overlay{
  position:absolute;inset:0;z-index:20;
  background:#14181f;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  color:#fff;
}
.loading-overlay p{margin:0;font-size:14px;color:rgba(255,255,255,.85)}
.spinner{
  width:34px;height:34px;
  border:3px solid rgba(255,255,255,.2);border-top-color:#fff;
  border-radius:50%;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{width:180px;height:6px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--primary);border-radius:99px;transition:width .2s}

/* ===== P1：找户型 / 筛选 ===== */
.chip{
  border:1px solid var(--line);background:#fff;color:var(--text);
  font-size:13px;border-radius:999px;padding:7px 14px;cursor:pointer;
}
.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.chip.small{padding:6px 12px;font-size:12px}
.search-box{
  display:flex;align-items:center;gap:8px;
  background:#f2f4f8;border-radius:12px;padding:10px 12px;
}
.search-box .s-icon{font-size:15px}
.search-box input{
  flex:1;border:0;background:none;outline:none;
  font-size:14px;color:var(--text);
}
.filter-group{margin-top:12px}
.fg-label{font-size:12px;color:var(--muted);margin-bottom:6px}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px}
.btn-block{display:block;width:100%;text-align:center;margin-top:14px}
.btn.ghost{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.btn.disabled{opacity:.45;pointer-events:none}
.small-empty{padding:48px 32px}

/* ===== P1：户型对比 ===== */
.compare-bar{
  position:fixed;left:0;right:0;z-index:45;
  bottom:calc(66px + env(safe-area-inset-bottom));
  max-width:520px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 -2px 18px rgba(31,42,68,.12);
}
.compare-bar.hidden{display:none}
.cb-info{font-size:13px}
.cb-info b{color:var(--primary)}
.cb-actions{display:flex;gap:8px;align-items:center}
.compare-note{color:var(--muted);font-size:12px;padding:12px 16px 0}
.compare-tools{padding:10px 16px 0;display:flex;justify-content:flex-end}
.compare-wrap{overflow-x:auto;padding:8px 16px 16px}
.compare{
  width:100%;min-width:560px;
  border-collapse:separate;border-spacing:0;
  background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
}
.compare th,.compare td{
  padding:12px 10px;border-bottom:1px solid var(--line);
  text-align:center;font-size:13px;vertical-align:middle;
}
.compare th{background:#f8fafc;font-weight:600}
.row-label{background:#f8fafc;color:var(--muted);width:58px;font-size:12px;white-space:nowrap}
.ct-name{font-size:13px;font-weight:600}
.ct-sub{font-size:11px;color:var(--muted);margin-top:2px}
.ct-actions{display:flex;flex-direction:column;gap:6px;align-items:center}
.card-actions{display:flex;flex-direction:column;gap:4px;align-items:center;flex:none}
.cmp-btn{
  width:34px;height:34px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--muted);font-size:13px;cursor:pointer;
}
.cmp-btn.on{background:var(--primary);border-color:var(--primary);color:#fff}

/* ===== P1：楼栋 / 楼层 ===== */
.section-label{font-size:13px;font-weight:600;margin-bottom:8px}
.sibling-row{display:flex;gap:8px;flex-wrap:wrap}
.floor-row{display:flex;align-items:center;gap:10px}
.floor-num{font-size:15px;min-width:72px;text-align:center}
.floor-num b{color:var(--primary)}
.step-btn{
  width:34px;height:34px;border:1px solid var(--line);border-radius:10px;
  background:#fff;font-size:18px;line-height:1;cursor:pointer;color:var(--text);
}
.floor-tip{color:var(--muted);font-size:12px;margin-left:auto}
.viewer .step-btn{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff;
}
.glass-btn.share{width:auto;padding:0 10px;font-size:12px}

/* ===== 提示条 ===== */
.toast{
  position:fixed;left:50%;bottom:110px;z-index:100;
  transform:translateX(-50%) translateY(10px);
  background:rgba(20,24,31,.88);color:#fff;
  font-size:13px;padding:9px 18px;border-radius:999px;
  opacity:0;transition:opacity .25s,transform .25s;
  pointer-events:none;white-space:nowrap;max-width:86%;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 电脑大屏适配（宽度 ≥ 960px） ===== */
@media (min-width: 960px) {
  body{background:#e8ecf2}
  #app{
    max-width:1320px;
    padding:80px 36px 48px;
    margin:0 auto;
    min-height:100vh;
    background:transparent;
    box-shadow:none;
  }
  /* 底部导航变成顶部导航 */
  .bottom-nav{
    top:0;bottom:auto;left:0;right:0;
    max-width:none;width:100%;
    height:56px;padding:0 24px;
    align-items:center;justify-content:center;gap:6px;
    background:rgba(255,255,255,.97);
    box-shadow:0 1px 10px rgba(31,42,68,.08);
  }
  .nav-item{
    flex:0 0 auto;
    flex-direction:row;align-items:center;gap:6px;
    padding:8px 22px;border-radius:999px;font-size:13px;
  }
  .nav-item.active{background:#eef3ff}
  .nav-item svg{width:18px;height:18px}
  /* 页面标题栏 */
  .topbar{
    position:static;
    margin:0 0 20px;padding:16px 22px;
    border:1px solid var(--line);border-radius:16px;
    background:#fff;box-shadow:var(--shadow);
  }
  .back-btn{width:38px;height:38px;border-radius:12px}
  .card{margin:0 0 16px}
  .section-title{padding:0 4px 12px;font-size:14px}
  /* 地图页：左右分栏 */
  .map-layout{
    display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start;
  }
  .map-wrap{margin:0;border-radius:18px}
  .map-side{display:flex;flex-direction:column;gap:12px}
  .map-side .card{margin:0}
  .map-side .section-title{padding:2px 4px 0}
  /* 户型 / 楼盘多列卡片 */
  .unit-grid,.community-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  }
  .unit-grid .card,.community-grid .card{margin:0}
  @media (min-width:1280px){
    .unit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  /* 找户型 */
  .search-card{max-width:780px;margin:0 0 18px}
  .compare-wrap{overflow:visible}
  .compare{min-width:0;margin:0 auto}
  /* 3D 看房页：信息面板靠左、方向键靠右 */
  .viewer-bottom{
    left:28px;right:auto;bottom:28px;
    width:360px;border-radius:18px;
    background:rgba(15,19,26,.72);
    backdrop-filter:blur(10px);
  }
  .style-bar{
    left:28px;right:auto;
    bottom:calc(230px + env(safe-area-inset-bottom));
    justify-content:flex-start;
  }
  .walk-pad{right:28px;bottom:28px}
  .hint{top:auto;bottom:200px;left:auto;right:28px;transform:none}
  .viewer-top{padding:18px 24px}
}

/* 参观 / VR 按钮 */
.mode-row{display:flex;gap:8px;margin-top:2px}
.mode-btn{flex:1;width:auto;height:38px;font-size:13px;border-radius:10px}

/* ===== 真实地图（高德） ===== */
#mapContainer{width:100%;height:60vh;min-height:340px;background:#e6ecef}
.map-wrap{position:relative}
.locate-btn{
  position:absolute;top:12px;right:12px;z-index:10;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.96);color:var(--text);
  font-size:13px;padding:7px 14px;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.user-dot{
  width:16px;height:16px;border-radius:50%;
  background:var(--primary);border:3px solid #fff;
  box-shadow:0 0 0 3px rgba(47,111,237,.25);
}
@media (min-width:960px){
  #mapContainer{height:620px}
}
.amap-pin{position:relative;cursor:pointer;text-align:center;transform:translateY(-8px)}
.amap-pin i{
  display:block;width:18px;height:18px;margin:0 auto 2px;
  border-radius:50%;background:#fff;border:3px solid var(--primary);
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.amap-pin i::after{
  content:'';display:block;width:6px;height:6px;margin:3px auto 0;
  border-radius:50%;background:var(--primary);
}
.amap-pin.sel i{background:var(--primary);border-color:var(--primary)}
.amap-pin.sel i::after{background:#fff}
.amap-pin span{
  display:block;background:rgba(255,255,255,.96);border:1px solid var(--line);
  border-radius:999px;padding:2px 9px;font-size:12px;color:var(--text);
  white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.amap-pin.sel span{color:var(--primary);font-weight:600}