/* ============================================================
   西宁市社区共享自习室 · H5 移动端
   主题：党建红色系（党旗红 #C1272D / 深党旗红 #9E1B24 / 高原金 #C9A227）
   尺寸：--rpx 由 JS 按容器宽度/750 计算，写法与原小程序 rpx 一一对应
   ============================================================ */
:root {
  --djh: #C1272D;
  --dj2: #9E1B24;
  --gyj: #C9A227;
  --qhh: #2B6B8F;
  --qkl: #6E8B5A;
  --xs: #44515C;
  --xz: #F7F5F1;
  --red-l: #FBEDED;
  --red-line: #F3DADA;
  --line: #EADFD8;
  --t2: #6B7883;
  --t3: #98A2AB;
  --white: #FFFFFF;
  --rpx: 0.5px; /* 兜底，JS 会覆盖 */
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #333B42;
  color: var(--xs);
  font-size: calc(var(--rpx) * 28);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
img { display: block; border: none; }
input, textarea, button { font-family: inherit; font-size: inherit; color: inherit; border: none; outline: none; background: none; }
button { cursor: pointer; }

/* ---------------- 应用外壳 ---------------- */
#app {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--xz);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 calc(var(--rpx) * 60) rgba(0, 0, 0, .45);
}

/* 导航栏（深党旗红渐变：左侧压深以承托透明 Logo，右侧提亮保住党建红） */
.navbar {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(var(--rpx) * 88 + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(var(--rpx) * 24) 0;
  background: linear-gradient(90deg, #611016 0%, #7E1418 52%, #93171C 100%);
  color: #fff;
  position: relative;
}
.nb-left, .nb-right {
  flex: 1; min-width: 0;
  display: flex;
  align-items: center;
  font-size: calc(var(--rpx) * 34);
  color: #fff;
}
.nb-left { justify-content: flex-start; }
.nb-right { justify-content: flex-end; }
/* 导航栏品牌区：Logo + 标题（首页显示 Logo，子页只显示标题） */
.nb-brand {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Logo 直接透明贴在红底上（不加白色衬底） */
.nb-logo {
  flex: none;
  width: calc(var(--rpx) * 62); height: calc(var(--rpx) * 62);
  display: flex; align-items: center; justify-content: center;
  margin-right: calc(var(--rpx) * 16);
}
.nb-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nb-brand.no-logo .nb-logo { display: none; }
.nb-title {
  flex: 0 1 auto; min-width: 0;
  text-align: center;
  font-size: calc(var(--rpx) * 30);
  font-weight: 500;
  letter-spacing: calc(var(--rpx) * .5);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nb-back { display: none; }
.navbar.has-back .nb-back { display: block; }
.nb-back:active { opacity: .6; }

/* 页面容器 */
.body { flex: 1; min-height: 0; position: relative; }
.page { position: absolute; inset: 0; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.page.active { display: block; }
.page.flexpage.active { display: flex; flex-direction: column; overflow: hidden; }
/* 首页整页滚动：地图 / 搜索 / 筛选 / 列表连成一体，跟着页面滚动条一起走 */
#pg-index.active { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#pg-index { scrollbar-width: none; }
#pg-index::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* 底部 tabbar */
.tabbar {
  flex: none;
  display: flex;
  height: calc(var(--rpx) * 100 + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  border-top: 1px solid var(--line);
}
.tabbar.hide { display: none; }
.tb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tb-ico { width: calc(var(--rpx) * 42); height: calc(var(--rpx) * 42); margin-bottom: calc(var(--rpx) * 4); }
/* 矢量图标：常态灰色（与位图图标观感一致），fill 由 CSS 控制 */
svg.tb-ico { fill: var(--t3); }
.tb-lb { font-size: calc(var(--rpx) * 21); color: var(--t3); }
.tb.on .tb-lb { color: var(--djh); font-weight: 500; }

/* ---------------- 通用组件 ---------------- */
.card {
  background: var(--white);
  border-radius: calc(var(--rpx) * 24);
  border: 1px solid var(--line);
  padding: calc(var(--rpx) * 28);
}
/* 区块卡：全站统一 20rpx 圆角、上下间距 20rpx（banner / 地图 / 通知公告 / 自习室一览
   原来是 20/22/24 三套圆角和 18/22/26 三套间距，凑在一起就显得散） */
.sec {
  background: var(--white);
  border-radius: calc(var(--rpx) * 20);
  padding: calc(var(--rpx) * 28);
  margin-top: calc(var(--rpx) * 20);
  border: 1px solid var(--line);
}
/* 地图区块：和「通知公告」同款带标题区块；地图在区块内通铺，所以 padding 归 0。
   需求：背景参考用户附件 —— 雾化城市远景（浅灰城市天际线 + 淡青灰无雪远山 +
   浅蓝到暖白无云天空，城市下方带淡倒影）。
   取景 cover + 底部对齐：城市与倒影压在卡片下沿、天空留在上方。
   该图本身极高调（亮度均值 230/255、标准差 17），所以**不再压白纱** ——
   这与用户附件里「极淡背景 + 彩色区块直接压在上面」的关系一致。
   渐变放在卡片这一层：标题条与地图共用同一张背景，卡片不会被切成两截。 */
.sec-map {
  padding: 0; overflow: hidden;
  background: #F2F8FC url('assets/map-bg-5.jpg') center bottom / cover no-repeat;
}
.sec-map .sec-t {
  padding: calc(var(--rpx) * 28) calc(var(--rpx) * 28) 0;
  margin-bottom: calc(var(--rpx) * 18);
}
/* 区块标题右侧的统计（写法和「自习室一览」右侧那行一致） */
.sec-t-r {
  margin-left: auto; font-size: calc(var(--rpx) * 24);
  font-weight: 400; color: var(--t3);
}
.sec-t {
  display: flex; align-items: center;
  font-size: calc(var(--rpx) * 30); font-weight: 600; color: var(--dj2);
  margin-bottom: calc(var(--rpx) * 18);
}
.sec-t::before {
  content: ''; width: calc(var(--rpx) * 6); height: calc(var(--rpx) * 28);
  border-radius: calc(var(--rpx) * 4); background: var(--gyj);
  margin-right: calc(var(--rpx) * 14);
}
.sec-sub { font-size: calc(var(--rpx) * 24); color: var(--t3); margin: calc(var(--rpx) * -8) 0 calc(var(--rpx) * 16) calc(var(--rpx) * 20); }

.tag {
  display: inline-block; font-size: calc(var(--rpx) * 22); line-height: 1.5;
  padding: calc(var(--rpx) * 4) calc(var(--rpx) * 14);
  border-radius: calc(var(--rpx) * 10);
  background: var(--red-l); color: var(--djh);
  border: 1px solid var(--red-line);
  margin: 0 calc(var(--rpx) * 10) calc(var(--rpx) * 8) 0;
}
.tag-gold { background: #FBF4E0; color: #8A6D12; border-color: #EFE1BB; }
.tag-grey { background: #F1F3F5; color: var(--t2); border-color: #E5E9EC; }
.badge {
  display: inline-block; font-size: calc(var(--rpx) * 22); line-height: 1.5;
  padding: calc(var(--rpx) * 4) calc(var(--rpx) * 14);
  border-radius: 999px; font-weight: 500;
}
.badge-open { background: #EFF4EA; color: #55704A; }
.badge-full { background: #FBF4E0; color: #8A6D12; }
.badge-pause { background: #F1F3F5; color: var(--t2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(var(--rpx) * 72); padding: 0 calc(var(--rpx) * 26);
  border-radius: calc(var(--rpx) * 16);
  font-size: calc(var(--rpx) * 26);
  background: var(--white); color: var(--xs);
  border: 1px solid var(--line);
}
.btn-red {
  background: linear-gradient(140deg, var(--dj2), var(--djh));
  color: #fff; border: none; font-weight: 500;
  box-shadow: 0 calc(var(--rpx) * 8) calc(var(--rpx) * 20) calc(var(--rpx) * -8) rgba(158, 27, 36, .6);
}
.btn-line-red { background: var(--white); color: var(--djh); border: 1px solid var(--red-line); }
.btn-sm { height: calc(var(--rpx) * 60); padding: 0 calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 24); }
.btn-block { width: 100%; }
.btn:active { opacity: .82; }

.kv { display: flex; padding: calc(var(--rpx) * 18) 0; border-bottom: 1px solid #F3EDE8; }
.kv:last-child { border-bottom: none; }
.kv-k { width: calc(var(--rpx) * 168); flex: none; color: var(--t2); font-size: calc(var(--rpx) * 26); }
.kv-v { flex: 1; font-size: calc(var(--rpx) * 28); word-break: break-all; }
.kv-go { color: var(--djh); font-size: calc(var(--rpx) * 25); margin-left: calc(var(--rpx) * 10); white-space: nowrap; }
.kv-tip { font-size: calc(var(--rpx) * 22); color: var(--t3); }

.note {
  display: flex; align-items: flex-start;
  background: #FBF3E9; border-left: calc(var(--rpx) * 6) solid var(--gyj);
  border-radius: 0 calc(var(--rpx) * 14) calc(var(--rpx) * 14) 0;
  padding: calc(var(--rpx) * 18) calc(var(--rpx) * 20);
  font-size: calc(var(--rpx) * 24); color: var(--t2);
}
.note-red { background: var(--red-l); border-left-color: var(--djh); }
.note-ico { width: calc(var(--rpx) * 26); height: calc(var(--rpx) * 26); flex: none; margin: calc(var(--rpx) * 6) calc(var(--rpx) * 10) 0 0; }

.empty { display: flex; flex-direction: column; align-items: center; padding: calc(var(--rpx) * 100) 0 calc(var(--rpx) * 80); }
.empty-img { width: calc(var(--rpx) * 240); height: calc(var(--rpx) * 240); }
.empty-t { margin-top: calc(var(--rpx) * 22); font-size: calc(var(--rpx) * 28); color: var(--t2); }
.empty-s { margin-top: calc(var(--rpx) * 8); font-size: calc(var(--rpx) * 24); color: var(--t3); text-align: center; }
.empty-btn { margin-top: calc(var(--rpx) * 28); }

.serif { font-family: "Songti SC", "STSong", Georgia, serif; }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ellipsis2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.c-red { color: var(--djh); }
.ico { width: calc(var(--rpx) * 30); height: calc(var(--rpx) * 30); flex: none; }
.ico-sm { width: calc(var(--rpx) * 24); height: calc(var(--rpx) * 24); flex: none; }

/* ---------------- 首页 ---------------- */
#pg-index { padding: 0 calc(var(--rpx) * 24); }
/* 地图下方的功能专区：左右再各留一份空白，不与屏幕边缘贴齐 */
/* 搜索/筛选区：与上方公告区块之间要留出和其它区块一致的 20rpx 间距（原先紧贴） */
#pg-index .zone { margin-top: calc(var(--rpx) * 20); }
.zone { flex: none; padding: 0 calc(var(--rpx) * 16); }

.search-row { padding-bottom: calc(var(--rpx) * 10); flex: none; }
.search-box {
  display: flex; align-items: center;
  height: calc(var(--rpx) * 72); padding: 0 calc(var(--rpx) * 22);
  background: #fff; border: 1px solid var(--line); border-radius: calc(var(--rpx) * 18);
}
.search-box .ico-sm { margin-right: calc(var(--rpx) * 12); }
.search-input { flex: 1; font-size: calc(var(--rpx) * 27); }
.search-input::placeholder { color: #B6BFC6; }
.search-clear {
  width: calc(var(--rpx) * 40); height: calc(var(--rpx) * 40); line-height: calc(var(--rpx) * 38);
  text-align: center; border-radius: 50%; background: #F1F3F5; color: var(--t2);
  font-size: calc(var(--rpx) * 28); margin-left: calc(var(--rpx) * 8); display: none;
}
.search-clear.on { display: block; }

.chips { display: flex; overflow-x: auto; padding-bottom: calc(var(--rpx) * 10); flex: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; font-size: calc(var(--rpx) * 24); color: var(--t2);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: calc(var(--rpx) * 8) calc(var(--rpx) * 20);
  margin-right: calc(var(--rpx) * 10);
  white-space: nowrap;
}
.chip.on { background: linear-gradient(140deg, var(--dj2), var(--djh)); color: #fff; border-color: transparent; font-weight: 500; }

/* 地图 */
.map-wrap {
  position: relative; flex: none;
  display: flex; flex-direction: column;
  /* 外层 .sec-map 已提供圆角+边框+裁剪+渐变底，这里只负责内部布局，
     background 必须透明 —— 否则会把卡片那条渐变盖住、又变成两截 */
  overflow: hidden; background: transparent;
  transition: height .25s ease;
}
#pg-index .map-wrap { margin: 0; }
/* 轮廓地图：仅描边，无填色（点空白处关闭气泡卡） */
.map-canvas { position: relative; flex: 1; min-height: 0; }
.map-svg { display: block; width: 100%; height: 100%; }
.map-svg .dist { cursor: pointer; }
/* transform-box: fill-box 必须加：SVG 里 transform-origin 默认按整个 viewBox 取中心，
   否则高亮放大时标点会整体位移（曾表现为地图上边缘冒出一个金色形状） */
.map-svg .pin { cursor: pointer; transition: transform .25s ease; transform-box: fill-box; transform-origin: center; }
.map-svg .pin.hot { transform: scale(1.4); }
.map-svg .halo { opacity: 0; transition: opacity .25s ease; }
.map-svg .halo.on { opacity: 1; }

/* ---------------- ECharts 轮廓图（首选） ----------------
   图由 ECharts 画在 canvas 上（四城区轮廓 + 按真实经纬度描点），
   容器绝对定位压住下面的 SVG 示意图；ECharts 没加载出来时才露出 SVG。 */
.ec-host { position: absolute; inset: 0; display: none; }
.ec-host.on {
  display: block;
  /* 渐变由外层 .sec-map 统一提供（标题条与地图同一条渐变），这里保持透明 */
  background: transparent;
}
/* ECharts 的 canvas 默认是行内元素，底部会多出几像素空白，去掉 */
.ec-host canvas { display: block; }

/* 原「收起地图」操作条（.map-toggle）与 .map-wrap.collapsed 相关样式已按需求删除：
   地图固定展开，不再有两态。 */

.bubble {
  position: absolute; left: calc(var(--rpx) * 14); right: calc(var(--rpx) * 14); bottom: calc(var(--rpx) * 60);
  background: #fff; border-radius: calc(var(--rpx) * 18);
  padding: calc(var(--rpx) * 20) calc(var(--rpx) * 22);
  box-shadow: 0 calc(var(--rpx) * 16) calc(var(--rpx) * 44) calc(var(--rpx) * -18) rgba(68, 81, 92, .45);
  display: none;
}
.bubble.on { display: block; }
.bb-head { display: flex; align-items: center; justify-content: space-between; }
.bb-name { flex: 1; font-size: calc(var(--rpx) * 29); font-weight: 600; margin-right: calc(var(--rpx) * 12); }
.bb-tags { margin: calc(var(--rpx) * 12) 0 calc(var(--rpx) * 10); }
.bb-row { display: flex; align-items: center; justify-content: space-between; }
.bb-dist { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 23); color: var(--t2); }
.cap-mini {
  flex: none; font-size: calc(var(--rpx) * 24); font-weight: 600; color: var(--djh);
  background: var(--red-l); border: 1px solid var(--red-line); border-radius: calc(var(--rpx) * 8);
  padding: calc(var(--rpx) * 3) calc(var(--rpx) * 12); margin-left: calc(var(--rpx) * 10);
  white-space: nowrap;
}
.bb-acts { display: flex; }
.bb-acts .btn { margin-left: calc(var(--rpx) * 12); }

/* 排序筛选 */
.filter-bar { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rpx) * 12) 0 calc(var(--rpx) * 8); flex: none; }
.sort-switch { display: flex; background: #F1F3F5; border-radius: calc(var(--rpx) * 14); padding: calc(var(--rpx) * 4); }
.ss-item { font-size: calc(var(--rpx) * 23); color: var(--t2); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 20); border-radius: calc(var(--rpx) * 11); }
.ss-item.on { background: #fff; color: var(--dj2); font-weight: 600; }
.fb-right-removed { display: none; }

.fac-panel-removed { display: none; }

.result-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--rpx) * 4) calc(var(--rpx) * 12); flex: none; }
.rb-count { font-size: calc(var(--rpx) * 24); color: var(--t2); }

/* 列表：不再内部滚动，随整页一起滚 */
.room-list { flex: none; min-height: 0; padding-bottom: calc(var(--rpx) * 64); }
.room-list, .detail-scroll, .modal-c { scrollbar-width: none; }
.room-list::-webkit-scrollbar, .detail-scroll::-webkit-scrollbar,
.modal-c::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* 统计条随列表一起滚（不再吸顶） */
.result-bar { display: flex; align-items: center; justify-content: space-between; background: var(--xz); padding: 0 calc(var(--rpx) * 16) calc(var(--rpx) * 12); }
.room-card {
  /* 边框加重：原来 1px #EADFD8 太淡几乎看不见。
     ⚠ 两个坑：① 用 rpx 写宽度没用 —— calc(var(--rpx)*3)=1.92px 会被浏览器按 1px 渲染
        （小于 2px 的分数边框宽度被取整），必须用固定 px。
     ② 颜色要跟页面底色 #F7F5F1 拉开差距：先用 #CDB39C 仍只深约 20%，视觉上还是淡，
        改 #BFA084 后与底色对比明显。 */
  background: #fff; border: 2px solid #BFA084;
  border-radius: calc(var(--rpx) * 20); padding: calc(var(--rpx) * 22);
  margin-bottom: calc(var(--rpx) * 16);
}
.room-card.active { border-color: var(--djh); box-shadow: 0 calc(var(--rpx) * 10) calc(var(--rpx) * 30) calc(var(--rpx) * -18) rgba(193, 39, 45, .8); }
.rc-head { display: flex; align-items: flex-start; }
.rc-no {
  flex: none; min-width: calc(var(--rpx) * 44); height: calc(var(--rpx) * 40);
  padding: 0 calc(var(--rpx) * 8);
  border-radius: calc(var(--rpx) * 10);
  background: var(--red-l); color: var(--djh);
  font-size: calc(var(--rpx) * 22); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-right: calc(var(--rpx) * 12);
}
.rc-name { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 29); font-weight: 600; color: var(--xs); line-height: 1.4; }
/* 容纳人数：独立成行但收敛表现——浅红底 + 红字，不用实心大红块抢视线 */
.cap-row { display: flex; align-items: center; justify-content: space-between; margin: calc(var(--rpx) * 12) 0 0; }
.cap-badge {
  display: inline-flex; align-items: baseline;
  background: var(--red-l);
  border: 1px solid var(--red-line);
  border-radius: calc(var(--rpx) * 10);
  padding: calc(var(--rpx) * 5) calc(var(--rpx) * 14);
}
.cap-badge .cap-k { font-size: calc(var(--rpx) * 21); color: var(--t2); margin-right: calc(var(--rpx) * 8); }
.cap-badge b { font-size: calc(var(--rpx) * 26); font-weight: 600; color: var(--djh); letter-spacing: calc(var(--rpx) * .3); }
.rc-tags { display: flex; flex-wrap: wrap; }
.rc-tags .tag { margin: 0; }
.rc-addr { display: flex; align-items: center; background: #F7F5F1; border-radius: calc(var(--rpx) * 12); padding: calc(var(--rpx) * 10) calc(var(--rpx) * 12); }
.rc-addr .ico-sm { margin-right: calc(var(--rpx) * 8); }
.rc-addr-t { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 23); }
.rc-go { flex: none; font-size: calc(var(--rpx) * 22); color: var(--djh); margin-right: calc(var(--rpx) * 4); }
.rc-facts { display: flex; flex-wrap: wrap; margin-top: calc(var(--rpx) * 12); }
.fact { display: flex; align-items: center; background: #F1F5F7; border-radius: calc(var(--rpx) * 10); padding: calc(var(--rpx) * 6) calc(var(--rpx) * 12); margin: 0 calc(var(--rpx) * 10) calc(var(--rpx) * 8) 0; }
.fact .ico-sm { margin-right: calc(var(--rpx) * 6); }
.fact-k { font-size: calc(var(--rpx) * 21); color: var(--t2); margin-right: calc(var(--rpx) * 8); }
.fact-v { font-size: calc(var(--rpx) * 23); color: var(--xs); font-weight: 500; }
.rc-acts { display: flex; justify-content: flex-end; margin-top: calc(var(--rpx) * 14); }
.rc-acts .btn { margin-left: calc(var(--rpx) * 12); }
.list-foot { text-align: center; font-size: calc(var(--rpx) * 22); color: var(--t3); padding: calc(var(--rpx) * 10) 0; }
/* 列表分页：默认只出 3 条，底部给「加载全部 N 间」按钮 */
.list-more { text-align: center; padding: calc(var(--rpx) * 26) 0 calc(var(--rpx) * 14); }
.lm-hint { font-size: calc(var(--rpx) * 22); color: var(--t3); margin-bottom: calc(var(--rpx) * 16); }
.lm-btn { width: 100%; max-width: calc(var(--rpx) * 460); }

/* ---------------- 详情页 ---------------- */
#pg-detail { background: var(--xz); }
.detail-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(var(--rpx) * 20) calc(var(--rpx) * 24) 0; }
#pg-mine, #pg-fav, #pg-correct, #pg-verify { padding: calc(var(--rpx) * 24); }
/* 详情页底部操作条：作为 flexpage 的固定子项，不随内容滚动 */
.head-card { margin-bottom: calc(var(--rpx) * 18); }
.h-no {
  display: inline-block; font-size: calc(var(--rpx) * 22); color: var(--djh);
  background: var(--red-l); border-radius: calc(var(--rpx) * 8);
  padding: calc(var(--rpx) * 3) calc(var(--rpx) * 12);
  margin-bottom: calc(var(--rpx) * 10);
}
.h-name { font-size: calc(var(--rpx) * 38); font-weight: 600; line-height: 1.45; color: var(--xs); }
.h-tags { margin-top: calc(var(--rpx) * 16); }
/* 容纳人数主卡：详情页最醒目的信息 */
.cap-card {
  background: linear-gradient(140deg, var(--dj2), var(--djh));
  border-radius: calc(var(--rpx) * 22);
  padding: calc(var(--rpx) * 28);
  color: #fff;
  box-shadow: 0 calc(var(--rpx) * 14) calc(var(--rpx) * 34) calc(var(--rpx) * -16) rgba(158, 27, 36, .75);
}
.cap-card-k { display: flex; align-items: center; font-size: calc(var(--rpx) * 24); opacity: .9; }
.cap-card-k .ico-sm { margin-right: calc(var(--rpx) * 8); }
.cap-card-v { font-size: calc(var(--rpx) * 76); font-weight: 600; line-height: 1.15; margin-top: calc(var(--rpx) * 8); }
.cap-card-v span { font-size: calc(var(--rpx) * 30); font-weight: 400; margin-left: calc(var(--rpx) * 8); }
.cap-card-s { font-size: calc(var(--rpx) * 22); opacity: .88; margin-top: calc(var(--rpx) * 6); }
.detail-text { font-size: calc(var(--rpx) * 28); color: var(--t2); line-height: 1.85; text-align: justify; }
.avatar { width: calc(var(--rpx) * 88); height: calc(var(--rpx) * 88); border-radius: 50%; flex: none; margin-right: calc(var(--rpx) * 20); }
.detail-pad { height: calc(var(--rpx) * 170); }
.bottom-bar {
  flex: none;
  display: flex; align-items: center; gap: calc(var(--rpx) * 8);
  padding: calc(var(--rpx) * 16) calc(var(--rpx) * 24) calc(var(--rpx) * 16 + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .98); border-top: 1px solid var(--line);
}
.bb-main { flex: 1; display: flex; align-items: center; justify-content: center; height: calc(var(--rpx) * 84); border-radius: calc(var(--rpx) * 18); background: linear-gradient(140deg, var(--dj2), var(--djh)); color: #fff; font-size: calc(var(--rpx) * 28); font-weight: 500; box-shadow: 0 calc(var(--rpx) * 10) calc(var(--rpx) * 24) calc(var(--rpx) * -10) rgba(158, 27, 36, .65); }
.bb-main .ico-sm { margin-right: calc(var(--rpx) * 8); }
.bb-item { width: calc(var(--rpx) * 116); display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(var(--rpx) * 84); font-size: calc(var(--rpx) * 21); color: var(--t2); }
.bb-item .ico-sm { margin-bottom: calc(var(--rpx) * 4); }
.bb-item:active { opacity: .7; }

/* ---------------- 我的 / 收藏 / 纠错 / 认证 ---------------- */
.pg-pad { padding: calc(var(--rpx) * 24); }
.profile { display: flex; align-items: center; padding: calc(var(--rpx) * 32) calc(var(--rpx) * 28); }
.profile .avatar { width: calc(var(--rpx) * 116); height: calc(var(--rpx) * 116); }
.pf-name { font-size: calc(var(--rpx) * 34); font-weight: 600; }
.pf-tags { margin-top: calc(var(--rpx) * 12); }
.stat { display: flex; align-items: center; padding: calc(var(--rpx) * 28) 0; margin-top: calc(var(--rpx) * 22); }
.st { flex: 1; text-align: center; }
.st-n { font-size: calc(var(--rpx) * 42); font-weight: 600; color: var(--djh); }
.st-l { font-size: calc(var(--rpx) * 24); color: var(--t2); margin-top: calc(var(--rpx) * 4); }
.st-line { width: 1px; height: calc(var(--rpx) * 56); background: #F3EDE8; }
.li { display: flex; align-items: center; padding: calc(var(--rpx) * 26) 0; border-bottom: 1px solid #F3EDE8; }
.li:last-child { border-bottom: none; }
.li-ico { width: calc(var(--rpx) * 68); height: calc(var(--rpx) * 68); border-radius: calc(var(--rpx) * 20); background: var(--red-l); display: flex; align-items: center; justify-content: center; flex: none; margin-right: calc(var(--rpx) * 20); }
.li-ico img { width: calc(var(--rpx) * 36); height: calc(var(--rpx) * 36); }
.li-body { flex: 1; min-width: 0; }
.li-t { font-size: calc(var(--rpx) * 28); }
.li-s { font-size: calc(var(--rpx) * 23); color: var(--t3); margin-top: calc(var(--rpx) * 4); }
.li-ar { color: var(--t3); font-size: calc(var(--rpx) * 30); margin-left: calc(var(--rpx) * 10); }

.form-item { padding: calc(var(--rpx) * 22) 0; border-bottom: 1px solid #F3EDE8; }
.form-item:last-of-type { border-bottom: none; }
.fi-label { font-size: calc(var(--rpx) * 25); color: var(--t2); margin-bottom: calc(var(--rpx) * 12); }
.fi-input, .fi-textarea, .picker-box {
  width: 100%; background: #F7F5F1; border-radius: calc(var(--rpx) * 14);
  padding: 0 calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 28);
  height: calc(var(--rpx) * 76);
}
.fi-textarea { height: calc(var(--rpx) * 190); padding: calc(var(--rpx) * 18) calc(var(--rpx) * 20); line-height: 1.6; resize: none; display: block; }
.fi-input::placeholder, .fi-textarea::placeholder { color: #B6BFC6; }
.picker-box { display: flex; align-items: center; justify-content: space-between; border: none; text-align: left; }
.picker-box:active { background: #F1EDE9; }
.picker-t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.counter { text-align: right; font-size: calc(var(--rpx) * 22); color: var(--t3); margin-top: calc(var(--rpx) * 8); }
.chips-wrap { display: flex; flex-wrap: wrap; }
.submit-btn { margin-top: calc(var(--rpx) * 30); }
.rec { padding: calc(var(--rpx) * 22) 0; border-bottom: 1px solid #F3EDE8; }
.rec:last-child { border-bottom: none; }
.rec-head { display: flex; align-items: center; justify-content: space-between; }
.rec-room { flex: 1; font-size: calc(var(--rpx) * 28); font-weight: 600; margin-right: calc(var(--rpx) * 12); }
.rec-type { font-size: calc(var(--rpx) * 24); color: var(--djh); margin-top: calc(var(--rpx) * 10); }
.rec-detail { font-size: calc(var(--rpx) * 25); color: var(--t2); line-height: 1.6; margin-top: calc(var(--rpx) * 8); }
.rec-time { font-size: calc(var(--rpx) * 22); color: var(--t3); margin-top: calc(var(--rpx) * 10); }

.done { display: flex; flex-direction: column; align-items: center; padding: calc(var(--rpx) * 50) calc(var(--rpx) * 28) calc(var(--rpx) * 36); }
.done-ico { width: calc(var(--rpx) * 96); height: calc(var(--rpx) * 96); }
.done-t { margin-top: calc(var(--rpx) * 20); font-size: calc(var(--rpx) * 34); font-weight: 600; color: var(--dj2); }
.done-s { margin-top: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 27); color: var(--t2); }
.done-party { display: flex; align-items: center; margin-top: calc(var(--rpx) * 16); }
.done-org { font-size: calc(var(--rpx) * 24); color: var(--t2); margin-left: calc(var(--rpx) * 12); }
.done-time { margin-top: calc(var(--rpx) * 14); font-size: calc(var(--rpx) * 23); color: var(--t3); }
.done-btn { margin-top: calc(var(--rpx) * 32); }

.switch { position: relative; width: calc(var(--rpx) * 92); height: calc(var(--rpx) * 52); border-radius: 999px; background: #DDE2E6; transition: background .2s; flex: none; }
.switch.on { background: var(--djh); }
.switch::after { content: ''; position: absolute; top: calc(var(--rpx) * 3); left: calc(var(--rpx) * 3); width: calc(var(--rpx) * 46); height: calc(var(--rpx) * 46); border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.switch.on::after { transform: translateX(calc(var(--rpx) * 40)); }

/* 轻提示 */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--rpx) * 200 + env(safe-area-inset-bottom));
  transform: translate(-50%, 0);
  background: rgba(30, 36, 42, .9); color: #fff;
  font-size: calc(var(--rpx) * 25);
  padding: calc(var(--rpx) * 16) calc(var(--rpx) * 30);
  border-radius: calc(var(--rpx) * 12);
  opacity: 0; pointer-events: none; transition: opacity .22s; z-index: 99;
  max-width: 80%; text-align: center;
}
.toast.on { opacity: 1; }

/* 弹窗 */
.mask { position: fixed; inset: 0; background: rgba(20, 26, 32, .45); display: none; align-items: center; justify-content: center; z-index: 100; padding: calc(var(--rpx) * 60); }
.mask.on { display: flex; }
.modal { background: #fff; border-radius: calc(var(--rpx) * 22); width: 100%; max-width: calc(var(--rpx) * 560); overflow: hidden; }
.modal-t { font-size: calc(var(--rpx) * 32); font-weight: 600; text-align: center; padding: calc(var(--rpx) * 36) calc(var(--rpx) * 30) calc(var(--rpx) * 8); }
.modal-c { font-size: calc(var(--rpx) * 26); color: var(--t2); line-height: 1.7; padding: 0 calc(var(--rpx) * 30) calc(var(--rpx) * 20); white-space: pre-line; max-height: calc(var(--rpx) * 620); overflow-y: auto; }
.modal-b { display: flex; border-top: 1px solid #F3EDE8; }
.modal-b div { flex: 1; text-align: center; padding: calc(var(--rpx) * 24) 0; font-size: calc(var(--rpx) * 29); }
.modal-b div + div { border-left: 1px solid #F3EDE8; }
.modal-ok { color: var(--djh); font-weight: 500; }
.modal-cancel { color: var(--t2); }

/* ============================================================
   党政风格统一调整
   方向：党政的"庄重规整"（红金压边、分区标题、细线分隔）
        + 当代扁平（去投影、去实心色块、留白克制）
   ============================================================ */

/* 导航栏底部金色压边：党政材料的标志性细节，两端渐隐不抢主体。
   实测 4rpx 渲染出来只有 2px，评审时容易被忽略，故加粗到 6rpx（约 3.8px）。 */
.navbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--rpx) * 6);
  background: linear-gradient(90deg, rgba(201, 162, 39, 0) 0%, var(--gyj) 18%,
              #EBD07C 50%, var(--gyj) 82%, rgba(201, 162, 39, 0) 100%);
}

/* 列表分区标题：红色竖条 + 标题 + 右侧统计；下缘金色细线分隔 */
.result-bar {
  background: transparent;
  padding: calc(var(--rpx) * 22) calc(var(--rpx) * 16) calc(var(--rpx) * 14);
  border-bottom: 1px solid rgba(201, 162, 39, .50);   /* 0.3 太淡，视觉上像中性灰线 */
}
.rb-title {
  display: flex; align-items: center;
  font-size: calc(var(--rpx) * 30); font-weight: 600;
  color: var(--xs); letter-spacing: calc(var(--rpx) * .6);
}
.rb-title i {
  flex: none; width: calc(var(--rpx) * 6); height: calc(var(--rpx) * 30);
  border-radius: calc(var(--rpx) * 3); margin-right: calc(var(--rpx) * 12);
  background: linear-gradient(180deg, #D8382F 0%, var(--djh) 65%, var(--dj2) 100%);
}

/* 卡片扁平化：去掉投影（党政风要克制），选中态改成左侧红条。
   overflow:hidden 是为了让底部图片条能贴着卡片边缘铺满。 */
.room-card { position: relative; box-shadow: none; overflow: hidden; }
.room-card.active { box-shadow: none; }
.room-card.active::before {
  content: ''; position: absolute; left: 0;
  top: calc(var(--rpx) * 22); bottom: calc(var(--rpx) * 22);
  width: calc(var(--rpx) * 5);
  border-radius: 0 calc(var(--rpx) * 3) calc(var(--rpx) * 3) 0;
  background: linear-gradient(180deg, #D8382F, var(--djh));
}

/* 可容纳：去掉淡红实心块，改「金色竖条 + 红色数字」 */
.cap-badge {
  background: none; border: none; border-radius: 0;
  padding: 0 0 0 calc(var(--rpx) * 12);
  border-left: calc(var(--rpx) * 4) solid var(--gyj);
}

/* 序号：淡红实心块改描边，与整体扁平化一致 */
.rc-no { background: none; border: 1px solid var(--red-line); }

/* ---------------- 底部导航：选中态 ---------------- */
/* 图标容器统一尺寸；内部图标绝对定位铺满，矢量用 fill、位图用两张图交叉淡入 */
.tb { position: relative; }
.tb-ico-wrap {
  position: relative; display: block;
  width: calc(var(--rpx) * 42); height: calc(var(--rpx) * 42);
  margin-bottom: calc(var(--rpx) * 6);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.tb-ico-wrap .tb-ico {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  transition: opacity .22s ease;
}
.tb-ico-wrap svg.tb-ico { fill: var(--t3); transition: fill .22s ease, opacity .22s ease; }
.tb-ico-wrap .tb-on { opacity: 0; }
/* 选中：图标变党旗红 + 轻微放大 + 文字变红加粗 + 顶部红色指示条 */
.tb.on .tb-ico-wrap { transform: scale(1.12); }
.tb.on .tb-ico-wrap svg.tb-ico { fill: var(--djh); }
.tb.on .tb-ico-wrap .tb-off { opacity: 0; }
.tb.on .tb-ico-wrap .tb-on { opacity: 1; }
.tb-lb { font-size: calc(var(--rpx) * 21); color: var(--t3); font-weight: 400; transition: color .2s ease; }
.tb.on .tb-lb { color: var(--djh); font-weight: 700; }
.tb::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 0; height: calc(var(--rpx) * 5);
  border-radius: 0 0 calc(var(--rpx) * 3) calc(var(--rpx) * 3);
  background: linear-gradient(90deg, #D8382F, var(--djh));
  transform: translateX(-50%); transition: width .24s ease;
}
/* 46rpx 在真机上太细不易察觉，加宽到 60rpx */
.tb.on::before { width: calc(var(--rpx) * 60); }
.banner { margin-top: calc(var(--rpx) * 20); overflow: hidden; position: relative; }
.bn-track { display: flex; transition: transform .45s ease; will-change: transform; }
.bn-slide { flex: 0 0 100%; min-width: 100%; }
/* Banner 卡片：AI 生成图铺满，红金渐变留在下面作为图片加载失败时的兜底。
   加一圈细边，和下方地图/公告的卡片保持同一种“细边框”语言 */
.bn-card {
  height: calc(var(--rpx) * 276);
  border-radius: calc(var(--rpx) * 20);
  padding: calc(var(--rpx) * 34) calc(var(--rpx) * 46);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; position: relative; overflow: hidden;
  border: 1px solid var(--line);
}
/* 图铺满卡片（z-index 0，压在渐变之上、文字之下） */
.bn-card .bn-img {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* 图上压一层暗色渐隐：只在 banner 带文字时加（.has-txt），保证白字读得清。
   标题/副标题垂直居中，所以中段要有足够暗（中段曾只有 .20，副标题在灯笼、
   木架这类中间调背景上发糊）。但也不能太重——调太暗会把照片压成一片黑，
   实测 .46 时"书本颜色都分不清、像深色纹理"，所以定在中段 .40 左右。
   ⚠ 当前 banner 不放文字（用户要求"图不要加文字"），所以这层不会生效，照片保持原样。 */
.bn-card.has-txt::before {
  content: ''; position: absolute; left: 0; top: 0; z-index: 1;
  width: 100%; height: 100%;
  background: linear-gradient(180deg,
    rgba(22, 6, 8, .26) 0%,
    rgba(22, 6, 8, .40) 30%,
    rgba(22, 6, 8, .44) 70%,
    rgba(22, 6, 8, .60) 100%);
}
.bn-card .bn-t, .bn-card .bn-s { position: relative; z-index: 2; }
/* 两屏各配一张 AI 图，tone-* 渐变只作图片加载失败时的兜底 */
.bn-card.tone-a { background: linear-gradient(135deg, #7E1418 0%, #C1272D 60%, #9E1B24 100%); }
.bn-card.tone-b { background: linear-gradient(135deg, #9E1B24 0%, #C1272D 46%, #6E1014 100%); }
.bn-card .bn-t {
  font-size: calc(var(--rpx) * 40); font-weight: 700; color: #fff;
  letter-spacing: calc(var(--rpx) * 1.2); line-height: 1.45;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .48);
}
/* 标题与副标题之间压一条渐隐金线，补足红金感。
   64×3rpx 实测过细过短、看着发虚，改为 104×5rpx。 */
.bn-card .bn-t::after {
  content: ''; display: block;
  width: calc(var(--rpx) * 104); height: calc(var(--rpx) * 5);
  margin: calc(var(--rpx) * 18) auto calc(var(--rpx) * 16);
  border-radius: calc(var(--rpx) * 3);
  background: linear-gradient(90deg, rgba(201, 162, 39, 0), #EBD07C, rgba(201, 162, 39, 0));
}
.bn-card .bn-s {
  /* 副标题弱不是因为颜色，是因为又小又细 —— 压在照片上必须加粗放大一点 */
  font-size: calc(var(--rpx) * 26); font-weight: 500; color: #fff;
  letter-spacing: calc(var(--rpx) * .5); line-height: 1.65;
  text-shadow: 0 1px 9px rgba(0, 0, 0, .62), 0 0 2px rgba(0, 0, 0, .5);
}
/* 指示点移到图上（原来悬在卡片下方，像一颗孤零零的红药丸）；
   照片上只能用白色才协调，选中态用更长的一条 */
.bn-dots {
  position: absolute; left: 0; right: 0; bottom: calc(var(--rpx) * 22);
  z-index: 3;
  display: flex; gap: calc(var(--rpx) * 10); justify-content: center;
}
.bn-dots i {
  /* 实测 .46 的半透明白压在中调照片上几乎看不见，提到 .72 并放大一点 */
  width: calc(var(--rpx) * 14); height: calc(var(--rpx) * 14);
  border-radius: calc(var(--rpx) * 7);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .42);
  transition: width .25s ease, background .25s ease;
}
.bn-dots i.on { width: calc(var(--rpx) * 32); background: #fff; }

/* ============================================================
   列表卡：实景图 + 开放时间 / 联系人 / 联系电话
   ============================================================ */
/* 列表卡：信息行（缩略图已移到底部图片条，这里不再并排） */
.rc-info { margin-top: calc(var(--rpx) * 14); }
.rc-info .rc-meta + .rc-meta { margin-top: calc(var(--rpx) * 8); }
/* 列表卡实景图：**拉通整幅**（左右下三边贴到卡片边），左右箭头压在图片上且都常显，
   右下角带「1 / 2」张数角标。
   做法：.rc-gal 用负外边距抵消卡片内边距 → 铺满卡片内宽，两侧不再留空档；
   箭头与角标相对它定位，所以自然压在图片边缘上。 */
.rc-gal {
  position: relative;
  margin: calc(var(--rpx) * 16) calc(var(--rpx) * -22) calc(var(--rpx) * -22);
}
.rc-shot { display: none; }
.rc-shot.on { display: block; }
.rc-shot-img {
  width: 100%; height: calc(var(--rpx) * 250);
  object-fit: cover; display: block;
  /* 不留圆角：底部两角由卡片自身的 overflow:hidden + border-radius 裁出 */
}
.rc-shot-ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed var(--djh); background: var(--red-l); color: var(--djh);
  font-size: calc(var(--rpx) * 26); font-weight: 500;
}
/* 箭头压在图片上：左右各内缩 20rpx、垂直居中；触摸目标 ≥44px。
   因为压在照片上、底色深浅不定，用近乎不透明的白底 + 细阴影保证辨识度。 */
.rc-arw {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: calc(var(--rpx) * 52); height: calc(var(--rpx) * 52);
  min-width: 44px; min-height: 44px;
  padding: 0; cursor: pointer;
  border: 1px solid rgba(193, 39, 45, .22); border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .20);
  display: flex; align-items: center; justify-content: center;
}
.rc-arw-ico { width: calc(var(--rpx) * 26); height: calc(var(--rpx) * 26); }
.rc-prev { left: calc(var(--rpx) * 20); }
.rc-prev .rc-arw-ico { transform: rotate(180deg); }
.rc-next { right: calc(var(--rpx) * 20); }
/* 张数角标：右下角半透明胶囊，压在照片上；pointer-events:none 避免挡住照片点击 */
.rc-idx {
  position: absolute; right: calc(var(--rpx) * 20); bottom: calc(var(--rpx) * 18);
  padding: calc(var(--rpx) * 3) calc(var(--rpx) * 16);
  border-radius: calc(var(--rpx) * 100);
  background: rgba(0, 0, 0, .46);
  color: #fff; font-size: calc(var(--rpx) * 22); line-height: 1.6;
  letter-spacing: calc(var(--rpx) * 1);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.rc-meta { display: flex; align-items: center; font-size: calc(var(--rpx) * 23); color: var(--t2); line-height: 1.45; }
.rc-meta .ico-sm { margin-right: calc(var(--rpx) * 8); }
.rc-meta-k { color: var(--t3); flex: none; }
.rc-meta-v { margin-left: calc(var(--rpx) * 8); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-meta-go { margin-left: auto; color: var(--djh); font-size: calc(var(--rpx) * 21); flex: none; padding-left: calc(var(--rpx) * 8); }

/* ============================================================
   详情页：容纳人数 / 掠影图片 / 通知公告
   ============================================================ */
.h-cap { margin-top: calc(var(--rpx) * 12); display: flex; align-items: baseline; }
.h-cap b { font-size: calc(var(--rpx) * 56); font-weight: 600; line-height: 1.1; color: var(--djh); }
/* 前缀「可容纳」与后缀「人」同字号同色；用独立类名，
   避免 .h-cap span 同时命中两个 span 时 margin 互相干扰 */
.h-cap-k { font-size: calc(var(--rpx) * 26); color: var(--t2); margin-right: calc(var(--rpx) * 12); }
.h-cap-u { font-size: calc(var(--rpx) * 26); color: var(--t2); margin-left: calc(var(--rpx) * 8); }
.gallery { display: flex; gap: calc(var(--rpx) * 14); margin-top: calc(var(--rpx) * 16); }
.gal-img { flex: 1; min-width: 0; height: calc(var(--rpx) * 220); border-radius: calc(var(--rpx) * 14); object-fit: cover; }
/* 只有一张掠影时：占满整行，并**按图片自身比例整幅显示**。
   不写死高度 —— 单张实景图比例各不相同（图书馆 16:9、党群服务中心 4:3 等），
   写死高度会按 object-fit:cover 把 4:3 那类照片的上下裁掉。
   height:auto 下 16:9 的图自然就是 411×232，与原先写死 363rpx 的效果一致。 */
.gallery.single .gal-img { height: auto; }
.ph-box {
  flex: 1; min-width: 0; height: calc(var(--rpx) * 220);
  border: 1px dashed var(--djh); border-radius: calc(var(--rpx) * 14);
  background: var(--red-l); color: var(--djh);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--rpx) * 16); font-size: calc(var(--rpx) * 28); line-height: 1.55; font-weight: 500;
}
.notice { display: flex; align-items: flex-start; padding: calc(var(--rpx) * 12) 0; border-bottom: 1px solid #F3EDE8; }
.notice:last-child { border-bottom: none; }
.notice .nd { width: calc(var(--rpx) * 10); height: calc(var(--rpx) * 10); border-radius: 50%; background: var(--gyj); flex: none; margin: calc(var(--rpx) * 15) calc(var(--rpx) * 12) 0 0; }
.notice-t { font-size: calc(var(--rpx) * 26); color: var(--t2); line-height: 1.7; }
.notice-empty { font-size: calc(var(--rpx) * 26); color: var(--t3); padding: calc(var(--rpx) * 8) 0; }


/* ============================================================
   首页「通知公告」模块（地图下方）
   需求：只展示第一条；做成一张淡雅小卡（浅红「公告」标签 + 标题 + 金点日期）
   ============================================================ */
/* 公告区块用 .sec 默认的 20rpx 上间距（原先为抵消地图的下边距而置 0，已不需要） */
/* 公告内容：外面已经是 .sec 白卡，这里不再套第二层卡（卡中卡会显得凌乱） */
.sn-card {
  display: flex; align-items: flex-start;
  gap: calc(var(--rpx) * 16);
}
.sn-badge {
  flex: none; margin-top: calc(var(--rpx) * 3);
  padding: calc(var(--rpx) * 2) calc(var(--rpx) * 12);
  border-radius: calc(var(--rpx) * 6);
  background: #FBEDED; color: var(--djh);
  font-size: calc(var(--rpx) * 21); font-weight: 600;
  line-height: 1.7; letter-spacing: calc(var(--rpx) * 1);
}
.sn-txt { flex: 1; min-width: 0; }
.sn-t { font-size: calc(var(--rpx) * 27); color: var(--xs); line-height: 1.5; font-weight: 500; }
.sn-meta {
  display: flex; align-items: center; gap: calc(var(--rpx) * 8);
  margin-top: calc(var(--rpx) * 9);
  /* 用 --t2 而不是 --t3：日期是 21rpx 小字，--t3 在米白底上只有 ~3:1，
     达不到小字 4.5:1；--t2 约 4.4:1，明显更清楚 */
  font-size: calc(var(--rpx) * 21); color: var(--t2);
}
.sn-dot {
  width: calc(var(--rpx) * 7); height: calc(var(--rpx) * 7);
  border-radius: 50%; background: var(--gyj);
}

/* ============================================================
   自习室列表卡 · 媒体优先版式（仅首页列表）
   ⚠ 必须用 #roomList 限定：.room-card/.rc-head/.rc-name/.cap-badge 等类名
     被「我的收藏」页复用，不加作用域会连带改坏那个页面。
   版式：媒体区在最上铺满卡片宽度 → 名称+地区 → 信息行 → 地址 → 可容纳。
   媒体高度只此一处（320rpx），带视频和不带视频的卡片整体高度因此一致。
   ============================================================ */
#roomList .room-card { padding: 0; }
#roomList .rc-gal {
  position: relative; margin: 0;
  height: calc(var(--rpx) * 320);
  background: #EFE7DE;
}
#roomList .rc-shot { display: none; position: relative; height: 100%; }
#roomList .rc-shot.on { display: block; }
#roomList .rc-shot-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 需求：个别实景图要整幅显示（如「朝阳西路社区党群服务中心」那张，主体是竖排招牌，
   按 cover 铺满会把招牌上下裁掉）→ 媒体区改用 contain：
   图片按原比例完整显示，多出的宽度在左右留白。
   留白用纯白（卡片本身也是白底），这样留白与卡片融为一体、照片像居中镶嵌，最干净；
   媒体区默认的浅暖底色 #EFE7DE 偏灰，只留给图片加载中/缺图的场景。
   卡片高度不变，列表里各卡仍保持同一高度。 */
#roomList .rc-gal.fit-contain { background: #FFFFFF; }
#roomList .rc-gal.fit-contain .rc-shot-img { object-fit: contain; }
#roomList .rc-shot-ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 0; background: var(--red-l); color: var(--djh);
  font-size: calc(var(--rpx) * 26); font-weight: 500;
}
/* 视频首屏：居中播放按钮 + 左上「视频」角标 */
#roomList .rc-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; min-width: 44px; min-height: 44px;
  padding: 0; cursor: pointer; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .44);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
#roomList .rc-play::after {
  content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
#roomList .rc-vtag {
  position: absolute; left: calc(var(--rpx) * 20); top: calc(var(--rpx) * 18);
  padding: calc(var(--rpx) * 2) calc(var(--rpx) * 14);
  border-radius: calc(var(--rpx) * 100);
  /* 用实色不透明：半透明压在深色照片上会显成"黑块"，看不出是蓝标 */
  background: #2B6B8F; color: #fff;
  font-size: calc(var(--rpx) * 21); line-height: 1.7; letter-spacing: calc(var(--rpx) * 1);
}
/* 选中卡的红色左条：媒体区在最上，红条要避开它，否则会像一道压在照片上的杂线 */
#roomList .room-card.active::before {
  top: calc(var(--rpx) * 320);
  bottom: calc(var(--rpx) * 22);
}
/* 信息区 */
#roomList .rc-body { padding: calc(var(--rpx) * 20) calc(var(--rpx) * 22) calc(var(--rpx) * 4); }
#roomList .rc-head {
  display: flex; align-items: baseline; gap: calc(var(--rpx) * 12);
  margin-bottom: calc(var(--rpx) * 14);
}
#roomList .rc-name {
  flex: 1; min-width: 0; font-size: calc(var(--rpx) * 31); font-weight: 600;
  color: var(--xs); line-height: 1.42;
}
#roomList .rc-tag {
  flex: none; font-size: calc(var(--rpx) * 21); color: var(--qhh); line-height: 1.6;
  border: 1px solid #C9DCE6; border-radius: calc(var(--rpx) * 6);
  padding: 0 calc(var(--rpx) * 10);
}
#roomList .rc-meta {
  display: flex; align-items: center;
  font-size: calc(var(--rpx) * 23); color: var(--t2); line-height: 1.5;
}
#roomList .rc-meta + .rc-meta { margin-top: calc(var(--rpx) * 10); }
#roomList .rc-meta-k { flex: none; width: calc(var(--rpx) * 120); color: var(--t3); }
#roomList .rc-meta-v { flex: 1; min-width: 0; }
#roomList .rc-addr {
  display: flex; align-items: center;
  margin-top: calc(var(--rpx) * 14);
  padding: calc(var(--rpx) * 12) calc(var(--rpx) * 14);
  border-radius: calc(var(--rpx) * 12);
  background: #F7F5F1;
}
#roomList .rc-addr .rc-addr-t { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 23); color: var(--xs); }
/* 底部「可容纳」强调条 */
#roomList .rc-cap {
  display: flex; align-items: baseline; gap: calc(var(--rpx) * 10);
  margin-top: calc(var(--rpx) * 14);
  padding: calc(var(--rpx) * 14) calc(var(--rpx) * 22) calc(var(--rpx) * 18);
  border-top: 1px solid #F1E7DE;
}
#roomList .rc-cap .cap-k { font-size: calc(var(--rpx) * 22); color: var(--t3); }
#roomList .rc-cap b { font-size: calc(var(--rpx) * 34); font-weight: 600; color: var(--djh); line-height: 1.1; }