html{-webkit-tap-highlight-color:transparent}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif}a{text-decoration:none}button,input,textarea{color:inherit;font:inherit}[class*=van-]:focus,a:focus,button:focus,input:focus,textarea:focus{outline:0}ol,ul{margin:0;padding:0;list-style:none}.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient:vertical}.van-clearfix::after{display:table;clear:both;content:''}[class*=van-hairline]::after{position:absolute;box-sizing:border-box;content:' ';pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #ebedf0;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--top::after{border-top-width:1px}.van-hairline--left::after{border-left-width:1px}.van-hairline--right::after{border-right-width:1px}.van-hairline--bottom::after{border-bottom-width:1px}.van-hairline--top-bottom::after,.van-hairline-unset--top-bottom::after{border-width:1px 0}.van-hairline--surround::after{border-width:1px}@-webkit-keyframes van-slide-up-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-up-enter{from{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-up-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes van-slide-up-leave{to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@-webkit-keyframes van-slide-down-enter{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-slide-down-enter{from{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-slide-down-leave{to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes van-slide-down-leave{to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@-webkit-keyframes van-slide-left-enter{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-slide-left-enter{from{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-slide-left-leave{to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes van-slide-left-leave{to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@-webkit-keyframes van-slide-right-enter{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-slide-right-enter{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes van-slide-right-leave{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes van-slide-right-leave{to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@-webkit-keyframes van-fade-in{from{opacity:0}to{opacity:1}}@keyframes van-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes van-fade-out{from{opacity:1}to{opacity:0}}@keyframes van-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes van-rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.van-fade-enter-active{-webkit-animation:.3s van-fade-in both ease-out;animation:.3s van-fade-in both ease-out}.van-fade-leave-active{-webkit-animation:.3s van-fade-out both ease-in;animation:.3s van-fade-out both ease-in}.van-slide-up-enter-active{-webkit-animation:van-slide-up-enter .3s both ease-out;animation:van-slide-up-enter .3s both ease-out}.van-slide-up-leave-active{-webkit-animation:van-slide-up-leave .3s both ease-in;animation:van-slide-up-leave .3s both ease-in}.van-slide-down-enter-active{-webkit-animation:van-slide-down-enter .3s both ease-out;animation:van-slide-down-enter .3s both ease-out}.van-slide-down-leave-active{-webkit-animation:van-slide-down-leave .3s both ease-in;animation:van-slide-down-leave .3s both ease-in}.van-slide-left-enter-active{-webkit-animation:van-slide-left-enter .3s both ease-out;animation:van-slide-left-enter .3s both ease-out}.van-slide-left-leave-active{-webkit-animation:van-slide-left-leave .3s both ease-in;animation:van-slide-left-leave .3s both ease-in}.van-slide-right-enter-active{-webkit-animation:van-slide-right-enter .3s both ease-out;animation:van-slide-right-enter .3s both ease-out}.van-slide-right-leave-active{-webkit-animation:van-slide-right-leave .3s both ease-in;animation:van-slide-right-leave .3s both ease-in}
.van-skeleton{display:-webkit-box;display:-webkit-flex;display:flex;padding:0 16px}.van-skeleton__avatar{-webkit-flex-shrink:0;flex-shrink:0;width:32px;height:32px;margin-right:16px;background-color:#f2f3f5}.van-skeleton__avatar--round{border-radius:999px}.van-skeleton__content{width:100%}.van-skeleton__avatar+.van-skeleton__content{padding-top:8px}.van-skeleton__row,.van-skeleton__title{height:16px;background-color:#f2f3f5}.van-skeleton__title{width:40%;margin:0}.van-skeleton__row:not(:first-child){margin-top:12px}.van-skeleton__title+.van-skeleton__row{margin-top:20px}.van-skeleton--animate{-webkit-animation:van-skeleton-blink 1.2s ease-in-out infinite;animation:van-skeleton-blink 1.2s ease-in-out infinite}.van-skeleton--round .van-skeleton__row,.van-skeleton--round .van-skeleton__title{border-radius:999px}@-webkit-keyframes van-skeleton-blink{50%{opacity:.6}}@keyframes van-skeleton-blink{50%{opacity:.6}}
.van-tag{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;padding:0 4px;color:#fff;font-size:12px;line-height:16px;border-radius:2px}.van-tag--default{background-color:#969799}.van-tag--default.van-tag--plain{color:#969799}.van-tag--danger{background-color:#ee0a24}.van-tag--danger.van-tag--plain{color:#ee0a24}.van-tag--primary{background-color:#1989fa}.van-tag--primary.van-tag--plain{color:#1989fa}.van-tag--success{background-color:#07c160}.van-tag--success.van-tag--plain{color:#07c160}.van-tag--warning{background-color:#ff976a}.van-tag--warning.van-tag--plain{color:#ff976a}.van-tag--plain{background-color:#fff;border-color:currentColor}.van-tag--plain::before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-color:inherit;border-radius:inherit;content:'';pointer-events:none}.van-tag--medium{padding:2px 6px}.van-tag--large{padding:4px 8px;font-size:14px;border-radius:4px}.van-tag--mark{border-radius:0 999px 999px 0}.van-tag--mark::after{display:block;width:2px;content:''}.van-tag--round{border-radius:999px}.van-tag__close{margin-left:2px;cursor:pointer}
/* ============ 设计令牌 v2（智居 · 精修） ============
 * 设计意图：延续「深色 + 蓝色交互主色」的品牌识别，同时
 *  1) 引入暖金（--gold）作为价格/精选的强调色，打破整屏蓝色的视觉疲劳；
 *  2) 中性色去蓝化（卡片/文字改为偏中性的冷灰），让蓝色只出现在"可交互"处；
 *  3) 建立统一的排版、间距、圆角、动效节奏令牌，保证 11 个页面观感一致。
 */
:root, html[data-theme="dark"]{
  /* 让原生控件（date / datetime-local / select / 滚动条）跟随深色渲染，
     否则深色下原生控件仍是白底，而文字是 near-white，会出现「状态回显看不见」的问题 */
  color-scheme:dark;

  /* —— 排版 —— */
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans SC","Segoe UI",Roboto,sans-serif;
  --font-num:"SF Pro Display",-apple-system,BlinkMacSystemFont,"HarmonyOS Sans SC","MiSans","Helvetica Neue",Arial,sans-serif;

  /* —— 间距 / 圆角节奏 —— */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-2xl:26px; --r-pill:999px;

  /* —— 动效 —— */
  --ease-out:cubic-bezier(.22,.9,.3,1);
  --ease-spring:cubic-bezier(.34,1.28,.5,1);
  --dur-1:.16s; --dur-2:.28s; --dur-3:.46s;

  /* —— 底色：偏中性墨色，弱化"海军蓝"观感 —— */
  --bg:#080A11; --bg2:#0B0E17;
  --card:#131824; --card2:#1A2030; --card3:#232B3E;
  --text1:#EEF2F9; --text2:#9AA6BC; --text3:#68748A;
  --line:rgba(255,255,255,.075); --line-strong:rgba(255,255,255,.15);
  --hair:inset 0 1px 0 rgba(255,255,255,.055);

  /* —— 交互主色（蓝，仅用于可交互/结构高亮） —— */
  --accent:#2E7BFF; --accent2:#7AB4FF;
  --accent-soft:rgba(46,123,255,.14); --accent-soft2:rgba(46,123,255,.24);
  --grad:linear-gradient(135deg,#1F63E8 0%,#3E93FF 100%);
  --grad-strong:linear-gradient(135deg,#1A55D6 0%,#2F80FF 100%);

  /* —— 暖金强调（价格 / 精选 / 高光时刻） —— */
  --gold:#FFB454; --gold2:#FFD693; --gold-soft:rgba(255,180,84,.14);
  --grad-gold:linear-gradient(135deg,#FFA83C 0%,#FFD08A 100%);

  /* —— 氛围底：多层径向光晕，制造纵深 —— */
  --page-bg:
    radial-gradient(120% 68% at 8% -10%, rgba(46,123,255,.16), transparent 58%),
    radial-gradient(96% 58% at 104% -4%, rgba(139,108,255,.11), transparent 60%),
    linear-gradient(180deg,#0C1120 0%,#080A11 38%,#080A11 100%);
  --glass:rgba(19,24,36,.62);
  --glass-strong:rgba(11,14,23,.88);
  /* 悬浮层（底部导航 / 吸顶页头 / 底部操作条）的不透明底。
     这些层都压在「滚动中的内容」之上：若用 backdrop-filter 做毛玻璃，
     滚动每一帧都要把背后的像素重新模糊一遍，是中低端机（微信 X5 等）滚动掉帧的主因。
     换成不透明底后视觉差异很小，模糊开销归零。取值约等于原来半透明底叠在页面底上的合成色。 */
  --glass-solid:#0B0E17;

  /* —— 阴影：更收敛、更真实的多层投影 —— */
  --shadow:0 18px 40px -14px rgba(2,6,18,.62);
  --shadow-sm:0 6px 18px -8px rgba(2,6,18,.5);
  --shadow-lg:0 30px 64px -22px rgba(2,6,18,.72);

  --green:#2FD67B; --orange:#FF9F43; --red:#FF5B6E; --purple:#8B6CFF;
  --tabbar:#090C14;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F6FA; --bg2:#EDF1F8;
  --card:#FFFFFF; --card2:#F5F8FD; --card3:#E9EFF9;
  --text1:#0E1626; --text2:#54627C; --text3:#7C89A0;
  --line:rgba(14,22,38,.09); --line-strong:rgba(14,22,38,.16);
  --hair:inset 0 1px 0 rgba(255,255,255,.9);

  --accent:#1F63E8; --accent2:#2E7BFF;
  --accent-soft:rgba(31,99,232,.10); --accent-soft2:rgba(31,99,232,.18);
  --grad:linear-gradient(135deg,#1F63E8 0%,#3E93FF 100%);
  --grad-strong:linear-gradient(135deg,#1A55D6 0%,#2F80FF 100%);

  /* 浅色下暖金需加深，保证价格数字在纯白卡面上的可读性 */
  --gold:#C4760F; --gold2:#9C5F08; --gold-soft:rgba(196,118,15,.12);
  --grad-gold:linear-gradient(135deg,#D98314 0%,#EFA836 100%);

  --page-bg:
    radial-gradient(120% 66% at 6% -10%, rgba(46,123,255,.12), transparent 58%),
    radial-gradient(96% 56% at 104% -4%, rgba(139,108,255,.09), transparent 60%),
    linear-gradient(180deg,#EEF3FC 0%,#F4F6FA 38%,#F4F6FA 100%);
  --glass:rgba(255,255,255,.7);
  --glass-strong:rgba(255,255,255,.93);
  --glass-solid:#FFFFFF;

  --shadow:0 18px 40px -18px rgba(20,40,90,.22);
  --shadow-sm:0 6px 18px -8px rgba(20,40,90,.16);
  --shadow-lg:0 30px 64px -24px rgba(20,40,90,.26);

  --green:#0FB963; --orange:#F18A2B; --red:#EC4A5E; --purple:#7C5CE8;
  --tabbar:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font-ui); font-size:14px; line-height:1.5; letter-spacing:.01em;
  background:var(--bg); color:var(--text1);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
  touch-action:manipulation; overscroll-behavior:none;
  user-select:none;-webkit-user-select:none;
}
input,textarea{user-select:text;-webkit-user-select:text;font-family:inherit}
img{-webkit-user-drag:none}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
/* 价格 / 计数：统一等宽数字，避免逐位跳动；大数字用专用显示字体 */
.tnum, .house-price, .map-card-side .price, .visit-info .p, .form-hero .p{
  font-family:var(--font-num); font-variant-numeric:tabular-nums; -webkit-font-variant-numeric:tabular-nums;
}
/* 顺序不能反：100vh 是老浏览器回退，支持 dvh 的浏览器用后面的 100dvh 覆盖，
   否则 iOS Safari 地址栏收起/展开时底部会被裁掉或跳动 */
#app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;position:relative;overflow:hidden;background:var(--page-bg)}
@media(min-width:481px){#app{box-shadow:0 0 80px rgba(2,6,18,.55)}}

/* 尊重系统"减少动态效果"设置 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* 低端机降级：main.js 依设备能力位（CPU 核心 / 内存）给 <html> 打 .perf-low。
 * 关闭纯装饰性的无限循环动画——消息红点脉冲、骨架流光、首页光斑/星点/横条流光/闪烁点，
 * 降低低端机持续合成开销与耗电；这些元素静止呈现同样完整可读，不影响功能与信息传达。 */
html.perf-low .tab-item .dot,
html.perf-low .sk-img,
html.perf-low .sk-line,
html.perf-low .tc-orb,
html.perf-low .tc-spark,
html.perf-low .cp-strip::before,
html.perf-low .cp-dot-blink{animation:none}
/* 低端机再降一层渲染开销：首页吸顶头里的天气块 / 搜索框是压在滚动内容之上的毛玻璃层，
 * 滚动时每一帧都要把背后的像素重新模糊一遍（与 .house-card 徽章同一类开销）。
 * 关掉模糊、保留原有半透明底，观感差异很小，滚动合成开销明显下降；
 * 只在 .perf-low（低端机）生效，正常设备保持毛玻璃质感不变。 */
html.perf-low .wx,
html.perf-low .search-bar{backdrop-filter:none;-webkit-backdrop-filter:none}
/* 图标尺寸：优先取具体容器的 CSS 规则，无规则时回落 --isize（由 iconHTML 注入） */
.icon{width:var(--isize,22px);height:var(--isize,22px);stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.badge{min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.hide{display:none!important}

/* 滚动区域 */
.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.pad-bottom{padding-bottom:calc(96px + env(safe-area-inset-bottom))}

/* 页面路由 */
.page{position:absolute;inset:0;display:none;background:var(--page-bg);z-index:1}
.page.active{display:block;animation:pageIn var(--dur-3) var(--ease-out)}
@keyframes pageIn{from{opacity:0;transform:translateY(12px) scale(.994)}to{opacity:1;transform:none}}

/* 栈式页面（从右滑入） */
.stackpage{position:absolute;inset:0;background:var(--page-bg);z-index:50;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .38s var(--ease-out);visibility:hidden;
  box-shadow:-24px 0 60px rgba(2,6,18,.5)}
.stackpage.stack-open{transform:none;visibility:visible}
.stackpage.stack-back{transition-duration:.3s}

/* ============ MPA 兼容层（html.mpa：public/index.html 的 <html> 自带 class="mpa"） ============
 * 页面显隐由 .active / .stack-open 控制；mpa 模式下强制全部可见并做进入动画。 */
html.mpa .page{display:block;animation:pageIn var(--dur-3) var(--ease-out)}
html.mpa .stackpage{transform:none;visibility:visible;animation:pageIn var(--dur-2) var(--ease-out)}
html.mpa .stackpage .sub-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 0 40px;scrollbar-width:none}
html.mpa .stackpage .sub-list::-webkit-scrollbar{display:none}

/* ============ 底部导航（Tabbar.vue） ============
 * 该组件被 5 个 tab 页共用，样式放在全局共享层：
 * 若写在组件 scoped 里，会被复制进 5 个页面 chunk（实测多传约 13KB）。 */
#tabbar.tabbar{
  position:absolute;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;
  height:58px;
  background:var(--tabbar);
  /* 不透明底替代毛玻璃：底部导航压在滚动内容之上，模糊每帧重算，
     是中低端机滚动掉帧的主因；--tabbar 已改为不透明色，观感差异极小 */
  border-radius:29px;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.22),0 -2px 8px -2px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.04);
  display:flex;align-items:stretch;
  transition:transform var(--dur-3) var(--ease-out);
}
#tabbar.tab-hide{transform:translateY(calc(100% + 10px))}
.tab-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:7px;gap:4px;color:var(--text3);position:relative;z-index:1;
  transition:color var(--dur-2) var(--ease-out);min-height:44px;
  /* 触屏响应：去掉系统点击高亮，避免按下时出现灰色方块；禁用双击缩放延迟 */
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* 图标容器必须是块级 flex：
 * 1) 否则行内 span 会被继承的 line-height:1.5 撑高，导致图标被顶偏、标签被挤压
 *    （scoped 时期有 `.tab-item span{line-height:1}` 兜底，样式移到全局后需显式声明）；
 * 2) box-sizing 为 border-box，去掉 padding 让 28px 的 svg 正好落在 28px 盒内，避免溢出。 */
.tab-item .icon{display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;position:relative;z-index:2;
  transition:transform var(--dur-2) var(--ease-spring),color var(--dur-2)}
/* 内层 svg 由 v-html 注入 */
.tab-item .icon svg{width:28px;height:28px;display:block}
.tab-label{font-size:10.5px;letter-spacing:.2px;position:relative;z-index:1;font-weight:500;line-height:1;
  /* 窄屏下文字不撑破格子：超长省略，避免挤压图标或换行导致导航变高 */
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab-item:active .icon{transform:scale(.86)}

/* 选中态：只换图标形态 + 品牌蓝，不加底板
 * 图标由 iconHTML 在选中时输出 svg.solid（填充剪影，不再描边），
 * 与微信 / 美团 / 支付宝一致：未选中线框、选中实心。
 * 位置完全不动（不缩放、不上浮），避免和下方标签挤在一起。 */
.tab-item .icon svg.solid{fill:currentColor;stroke:none}
.tab-item.on{color:var(--accent)}
.tab-item.on .tab-label{font-weight:600;color:var(--accent)}

/* 中间智居圈：收敛为「胶囊内」的品牌渐变圆钮（36px）
 * 旧版 48px + 标签使内容高 67.5px，超出 58px 胶囊 9.5px，圆钮会顶出上沿、显得像错位；
 * 现改为 36px 并与其他项使用同样的底部留白，标签基线对齐，整体落在胶囊内。
 * 仍通过品牌渐变 + 白图标 + 投影保持" C 位"识别度。 */
.tab-item.center{gap:2px;padding-bottom:7px}
.tab-item.center .icon{width:36px;height:36px;padding:0;border-radius:50%;
  background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(26,85,214,.55),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2)}
.tab-item.center .icon svg{width:24px;height:24px;stroke-width:2.2}
.tab-item.center.on .icon{transform:translateY(-1px) scale(1.04);
  box-shadow:0 8px 18px -6px rgba(26,85,214,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.tab-item.center.on .tab-label{color:var(--accent)}

/* 未读红点：消息 tab 图标右上角（脉冲幅度与频率收敛，避免持续抢注意力） */
.tab-item .dot{position:absolute;top:5px;left:calc(50% + 9px);width:8px;height:8px;border-radius:50%;
  background:var(--red);border:2px solid var(--tabbar);box-shadow:0 0 8px rgba(255,91,110,.8);z-index:3;
  pointer-events:none;animation:dot-pulse 2.6s ease-in-out infinite}
@keyframes dot-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* Toast */
#toast{position:absolute;top:calc(16px + env(safe-area-inset-top));left:50%;transform:translate(-50%,-84px) scale(.94);z-index:200;
  background:var(--glass-strong);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  color:var(--text1);padding:11px 18px;border-radius:var(--r-md);font-size:13px;display:flex;align-items:center;gap:9px;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);opacity:0;
  transition:transform .36s var(--ease-spring),opacity .26s var(--ease-out);max-width:86%;white-space:nowrap}
#toast.show{transform:translate(-50%,0) scale(1);opacity:1}
#toast .icon{width:17px;height:17px;color:var(--green)}

/* 对话框 */
#dialog{position:absolute;inset:0;z-index:180;display:none;align-items:center;justify-content:center}
#dialog.show{display:flex}
.dlg-mask{position:absolute;inset:0;background:rgba(4,8,18,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:fadeIn .25s}
.dlg-box{position:relative;width:78%;max-width:330px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-2xl);padding:28px 22px 20px;text-align:center;
  box-shadow:var(--shadow-lg),var(--hair);overflow:hidden;animation:popIn .38s var(--ease-spring)}
.dlg-box::after{content:"";display:table;clear:both}
/* 顶部一道柔光，让弹窗有"被照亮"的体积感 */
.dlg-box::before{content:"";position:absolute;left:50%;top:-70px;width:210px;height:140px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(46,123,255,.20),transparent 72%);pointer-events:none}
.dlg-check{width:64px;height:64px;margin:0 auto 6px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px rgba(31,99,232,.5),inset 0 1px 0 rgba(255,255,255,.28);animation:popIn .5s var(--ease-spring) .05s backwards;flex:none}
.dlg-check .icon{width:30px;height:30px;color:#fff;stroke-width:2.4}
/* 未登录提示图标：中性冷灰，与「成功」态的蓝色区分开 */
.dlg-check-lock{background:linear-gradient(135deg,#64748B,#475569);box-shadow:0 12px 28px rgba(51,65,85,.42),inset 0 1px 0 rgba(255,255,255,.22)}
/* 删除/警告提示图标：橙红色，与「成功」态的蓝色区分开 */
.dlg-check-warn{background:linear-gradient(135deg,#FF7A45,#FF4D4F);box-shadow:0 12px 28px rgba(255,77,79,.42),inset 0 1px 0 rgba(255,255,255,.22)}
/* ============ 通知详情弹窗（.nd-* / .dlg-box.nd-wide）已迁入 Messages.vue 非 scoped 样式块 ============
 * 内容由 showDialog 直接注入 #dlgBox，无法命中组件 scoped 选择器，故随 Messages chunk 以全局类加载 */
/* 分享弹窗样式（.share-*）已迁入 Detail.vue 非 scoped 样式块 */
/* 账号安全弹窗样式（.sec-hero / .sec-list / .sec-item / .sec-tip）已迁入 Profile.vue 非 scoped 样式块 */
/* 首页消息铃铛（.bell-*）已迁入 Home.vue 非 scoped 样式块（弹窗 HTML 注入 #dlgBox） */
.dlg-title{font-size:17px;font-weight:700;margin-bottom:7px;letter-spacing:.2px;width:100%}
.dlg-sub{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:10px;white-space:pre-line;width:100%}
/* 弹窗内的带标题表单（如「修改个人资料」） */
.dlg-form{display:flex;flex-direction:column;gap:14px;margin-bottom:18px;text-align:left}
.dlg-field{display:flex;flex-direction:column;gap:6px}
.dlg-field label{font-size:12.5px;font-weight:700;color:var(--text2);letter-spacing:.2px}
.dlg-field input{width:100%;height:46px;border-radius:var(--r-md);background:var(--card2);border:1px solid var(--line);
  padding:0 13px;font-size:14.5px;color:var(--text1);outline:none;font-family:inherit;
  transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.dlg-field input::placeholder{color:var(--text3)}
.dlg-field input:focus{border-color:var(--accent-soft2);box-shadow:0 0 0 3px var(--accent-soft)}
.dlg-field input:disabled{opacity:.58;cursor:not-allowed}
.dlg-field .dlg-hint{font-size:11px;color:var(--text3);line-height:1.5}
.dlg-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:calc(50% - 5px);height:44px;border-radius:var(--r-md);background:var(--grad-strong);color:#fff;font-size:14px;font-weight:600;
  box-shadow:0 10px 22px -8px rgba(26,85,214,.6),inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2);vertical-align:top}
.dlg-btn + .dlg-btn{margin-left:10px}
.dlg-btn:only-of-type{width:100%}
.dlg-btn:active{transform:scale(.97);box-shadow:0 6px 14px -8px rgba(26,85,214,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.dlg-btn:disabled{opacity:.55;transform:none;cursor:default}
/* 弹窗容器：消除 inline-flex 按钮间的空白间隙 */
.dlg-box{font-size:0}
.dlg-box > *:not(.dlg-btn){font-size:14px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.76)}to{opacity:1;transform:scale(1)}}

/* 通用按钮 */
.btn{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;border-radius:var(--r-md);
  transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2),filter var(--dur-2);position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad-strong);color:#fff;box-shadow:0 10px 24px -10px rgba(26,85,214,.72),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-primary:active{box-shadow:0 6px 16px -10px rgba(26,85,214,.72),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-glass{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);color:var(--text1)}
.btn-ghost{background:var(--accent-soft);color:var(--accent)}

/* 区块标题（.sec-head）已迁入 Home.vue scoped */

/* ============ 页面头部主视觉（.page-hero）与分步序号（.form-card-title .step）
   已迁入 assets/lazy/forms.css，由 Appointment / Demand 两个懒加载页共享引入 ============ */

/* ============ 我的看房 / 待看房 ============ */
.bk-chips{display:flex;gap:8px;flex-wrap:wrap}
.bk-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--text2);
  background:var(--card2);border:1.4px solid var(--line);padding:7px 13px;border-radius:var(--r-pill);transition:all var(--dur-2)}
.bk-chip i{font-style:normal;font-size:11px;font-weight:700;padding:1px 6px;border-radius:7px;background:var(--card3);color:var(--text3)}
.bk-chip.on{color:var(--accent2);border-color:var(--accent-soft2);background:var(--accent-soft);font-weight:700}
.bk-chip.on i{background:var(--accent-soft2);color:var(--accent2)}
/* 看房卡片样式已迁入 Bookings.vue 的 scoped 样式块；
   上方 .bk-chips / .bk-chip* 因 Coupons.vue 共用，保留在此。 */

/* 骨架屏：加载态占位（灰块 + 流光） */
.skeleton{position:relative;overflow:hidden;background:var(--card2);border-radius:var(--r-sm)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:shimmer 1.3s infinite}
html[data-theme="light"] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(14,22,38,.06),transparent)}
@keyframes shimmer{to{transform:translateX(100%)}}

/* 滚动入场：卡片/列表项渐进浮现，形成有节奏的首屏揭示 */
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* .rise 已移除：全量检索确认无任何页面/脚本引用（原 MPA 遗留） */
.house-card, .visit-card{animation:riseIn .46s var(--ease-out) backwards}
.house-card:nth-child(1), .visit-card:nth-child(1){animation-delay:.02s}
.house-card:nth-child(2), .visit-card:nth-child(2){animation-delay:.07s}
.house-card:nth-child(3), .visit-card:nth-child(3){animation-delay:.12s}
.house-card:nth-child(4), .visit-card:nth-child(4){animation-delay:.17s}
.house-card:nth-child(5), .visit-card:nth-child(5){animation-delay:.22s}
.house-card:nth-child(n+6), .visit-card:nth-child(n+6){animation-delay:.26s}

/* 首页顶部 .loc / .grid-8 / .grid-item / .sec-head / .banner / .home-pr 样式已迁入 Home.vue
   scoped 样式块；.bell-* 通知弹窗样式已迁入 Home.vue 非 scoped 样式块（弹窗 HTML 注入 #dlgBox） */
.icon-btn{width:40px;height:40px;border-radius:var(--r-md);background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text2);position:relative;transition:transform var(--dur-1) var(--ease-out);box-shadow:var(--shadow-sm)}
.icon-btn:active{transform:scale(.9)}
.icon-btn .icon{width:19px;height:19px}
.icon-btn .dot{position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 8px rgba(255,91,110,.75)}
/* 找房页 · 最近搜索 */
/* 搜索结果高亮 */
mark.hl{background:rgba(255,198,0,.32);color:inherit;border-radius:3px;padding:0 1px}
/* 标签内的搜索高亮：不使用黄色背景，保持标签整体风格统一 */
.house-tags mark.hl{background:transparent;color:inherit;padding:0;font-weight:700}
.empty-state .empty-act{width:auto;margin-top:14px;padding:0 18px;height:38px;font-size:13px}

/* 金刚区（.grid-8 / .grid-item）样式已迁入 Home.vue scoped */

/* ============ 首页双入口：炫酷气泡卡 · 科技底纹 ============ */
/* 列宽用 minmax(0,1fr)：1fr 等价于 minmax(auto,1fr)，轨道不会缩到小于内容
   min-content（两张卡标题都是 nowrap，min-content≈186px），窄屏会被撑爆横向溢出。
   改成 minmax(0,1fr) 后两列严格等分容器、可自由收缩，文字按需省略。 */
/* 模糊彩色光晕：营造气泡通透感（被内层圆角裁切） */
/* 呼吸星点 */

/* 浅色主题：气泡改浅底玻璃，文字转深色 */

@keyframes tcIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes tcDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,8px)}}
@keyframes tcTwinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}

/* ============ 分类房源页（栈）：专属样式已迁入 Cate.vue 的 scoped 样式块 ============ */

/* 轮播 .banner 样式已迁入 Home.vue scoped */
/* ============ 房源卡片（.house-card 等）已迁入 HouseCard.vue 非 scoped 样式块 ============
 * 全局保留的交叉规则：.house-price 等宽数字（.tnum 组）、riseIn 错峰入场、
 * imgFade 淡入、nav-ready 跳过动画、轻触反馈 —— 均为跨页面系统规则，见对应小节。 */

/* 首页底部 */
.home-foot{padding:22px 0 8px;text-align:center;color:var(--text3);font-size:11px;letter-spacing:1px}
.home-foot .line{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:10px}
.home-foot .line::before,.home-foot .line::after{content:"";width:46px;height:1px;background:var(--line)}

/* 下拉刷新（Vant PullRefresh）：刷新文字 / 转圈沿用品牌色 */
.van-pull-refresh__head{color:var(--accent);font-size:12px}
.van-pull-refresh__head .van-loading__spinner{color:var(--accent)}
.van-pull-refresh__head .van-loading__circular circle{stroke:var(--accent)}
/* 上拉加载（Vant List）：状态文案与页面弱化文字保持一致 */
.van-list__loading,.van-list__finished-text,.van-list__error-text{
  color:var(--text3);font-size:12px;padding:14px 0;text-align:center;letter-spacing:.4px}
/* 吸顶容器只负责「吸顶 + 不透明底」；蓝色品牌带下沉到 .find-top，
   使筛选栏与条件 chip 落在页面底色上，不再被一整条「蓝 → 白」的渐变糊住 */
/* 筛选栏：4 个等宽按钮，统一「图标 + 文案」结构，
   图标尺寸/间距一致 → 整排节奏均匀，不再出现"3 个带字 + 1 个纯图标"的割裂感 */
/* 未选任何条件时的结果标签（.chip）已迁入 Find.vue scoped 样式块 */

/* 抽屉筛选项的命中数量 */

/* 首屏骨架屏 */
.sk-card{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:10px;margin:0 16px 12px;box-shadow:var(--shadow-sm),var(--hair)}
.sk-img{width:118px;min-height:114px;border-radius:var(--r-md);flex:none;background:var(--card2);animation:skShine 1.3s ease-in-out infinite}
.sk-line{height:12px;border-radius:7px;background:var(--card2);animation:skShine 1.3s ease-in-out infinite}
@keyframes skShine{0%,100%{opacity:.45}50%{opacity:1}}

/* 筛选抽屉（#drawer-mask / #drawer）已迁入 Find.vue scoped 样式块 */
.empty-state{padding:76px 0;text-align:center;color:var(--text3)}
.empty-state .icon{width:54px;height:54px;opacity:.3;margin-bottom:15px}
.empty-state p{font-size:13px;letter-spacing:.5px}
/* 手势归属：纵向留给页面滚动，横向由 JS 接管做图片切换（不要写 pan-x，否则整页无法上下滚） */
/* 价格区：价格 + 在租状态同一行；标签靠右，放不下时自动折到下一行右对齐 */
/* 参数网格：户型/面积/朝向/楼层 四列卡片（值超出时省略，避免撑破网格） */
/* 小屏适配：iPhone SE（375px）及以下，整体压缩尺寸避免溢出（.amen 压缩规则已迁入 Detail.vue） */
/* 示意路网：用几条半透明白色斜线模拟主干道 */

/* 位置与周边 · 周边详情（多分类标签页） */
/* 条目卡片 */
/* 商场类型徽章：分类色浅底 + 彩色文字（如 普通商场/购物中心） */
/* 地铁线路徽章 */
/* 骨架屏（srShimmer 仅 Detail 使用，已迁入 Detail.vue） */
/* .amen 参数网格基样式已迁入 Detail.vue scoped */

/* 图片缩放状态 */

/* 高德地图注入节点样式（.amap-layer / .map-pin）已迁入 MapView.vue 非 scoped 样式块 */
/* 表单 / 预约样式（.form-* / .chip-opt / .picker / .pk-* / .select-*）已迁至 assets/lazy/forms.css，
   由 Appointment / Demand 两个懒加载页共享引入 */

/* 聊天页样式（.chat-* / .bubble / .b-from / .b-to）经全量检索确认已无页面引用，已移除 */
/* 登录按钮样式（.login-btn / .one-tap）已迁至 assets/lazy/login.css，由 Login / Profile 页按需引入 */

/* 超短屏设备（横屏/小屏）：登录页专属压缩规则已迁入 Login.vue */

/* ============ 收藏/浏览记录 列表页 ============ */
.sub-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(13px + env(safe-area-inset-top)) 14px 13px;background:var(--glass-solid);border-bottom:1px solid var(--line)}
.sub-head .icon-btn{width:38px;height:38px;border-radius:var(--r-sm);background:var(--card3);border:1px solid var(--line);color:var(--text1);box-shadow:var(--shadow-sm)}
.sub-head h2{font-size:17.5px;font-weight:800;flex:1;text-align:center;margin-right:38px;letter-spacing:.3px}
.sub-list{padding:14px 0}

/* 查看记录卡片的样式已迁入 List.vue 的 scoped 样式块 */

/* 页面栈遮罩（详情背景压暗） */
#stack-dim{position:absolute;inset:0;z-index:45;background:rgba(4,8,18,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity var(--dur-3)}
#stack-dim.show{opacity:1}

/* ============ MPA 多页面模式（已废弃：前端已迁移至 Vue2 SPA，html.mpa 无任何代码启用）============ */

.stackpage .sub-head h2{text-align:center}
/* 支持的浏览器自动启用跨文档转场 */
@view-transition{navigation:auto}
/* 图片统一淡入，避免"跳一下"造成的廉价感 */
.house-img img, .visit-img img, .map-card-img img, .form-hero-img img{
  animation:imgFade .5s var(--ease-out) backwards;
}
@keyframes imgFade{from{opacity:0}to{opacity:1}}
/* 滚动容器加入阻尼与底部回弹留白 */
.scroll, .form-scroll, .sub-list, .chat-scroll{overscroll-behavior-y:contain}
/* 无子项动效的列表（会话/通知）由容器整体上浮揭示，避免与子项动效叠加 */
#convList,#noticeList{animation:riseIn .5s var(--ease-out) backwards}
/* 轻触反馈：可点区域统一按下轻微缩放，抬手回弹 */
.grid-item, .house-card, .visit-card, .conv, .notice-item, .time-opt, .chip, .mp-chip{
  -webkit-tap-highlight-color:transparent;
}
/* 空态/加载文案更克制 */
.empty-state p{color:var(--text3)}
/* 让骨架屏在有内容替换时平滑过渡 */
#homeList,#findList,#cateList,#favsList{transition:opacity var(--dur-2)}

/* ============ 切页即时呈现（消除"白屏→内容浮现"）============
 * 页面容器与列表卡片的入场动画都从「全透明」开始（pageIn / riseIn / imgFade / tcIn 等，
 * 卡片还带最长 .26s 的错峰延迟，末尾元素约 .7s 后才可见）。
 * 这套编排只在「首次进入 App」时有价值；SPA 内每次切页都重放，就会表现为
 * 「先白屏 0.x 秒 → 内容逐条浮现」。首屏开场后给 <html> 加 .nav-ready，
 * 后续切页一律跳过这些入场动画，内容首帧即完整可见（保留元素自身的过渡/交互动效）。 */
html.nav-ready .page, html.nav-ready .stackpage, html.nav-ready .rise, html.nav-ready .house-card, html.nav-ready .visit-card, html.nav-ready .house-img img, html.nav-ready .visit-img img, html.nav-ready .map-card-img img, html.nav-ready .form-hero-img img, html.nav-ready #convList, html.nav-ready #noticeList{
  animation:none !important;
}

/* ============ Vant 骨架屏接入项目主题 ============
 * Vant 2 的骨架占位色硬编码为浅灰 #f2f3f5，本项目有深色主题（data-theme=dark），
 * 直接用会在深色页面里发亮突兀。这里换成中性半透明灰，深浅主题下都自然。
 * （挂全局：van-skeleton 的内部行由组件渲染，scoped 样式选不中） */
.van-skeleton__avatar,
.van-skeleton__title,
.van-skeleton__row{
  background-color:rgba(127,140,170,.18);
}

/* 列表加载骨架容器：仅在加载态出现，加载完成后整块移除，不影响最终列表布局 */
.skel-list{padding:14px 0 6px}
.skel-list .van-skeleton + .van-skeleton{margin-top:20px}
/* 齿孔：分隔线上下各一个半圆缺口（色取页面底色，读作"打孔"） */
/* 待发放：蓝色印章 */
/* 不可用（已使用 / 已过期）：整卡去色，仅保留轮廓 */

/* 首页「领券中心」横条 */

/* ============ 领券条 / 券中心 公共动效 ============
 * cpShine 仅保留给首页「领券中心」横条的流光；cpBlink 为横条上的闪烁小圆点。
 * 券中心内部已不再使用流光扫描 / 脉冲等炫技动效（移动端 WebView 下晃眼且耗电）。 */
@keyframes cpShine{0%{transform:translateX(-130%) skewX(-18deg)}55%,100%{transform:translateX(240%) skewX(-18deg)}}
@keyframes cpBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* 券中心 hero：更大更抢眼 + 一键领取 */
/* 库存紧张：meta 里红字提示 */

/* ---------- 主视觉 Hero ---------- */

/* ---------- 顶部 Tab：容器保持中性，选中态不再用大色块 ---------- */
/* 浅色主题：白底 + 暖色文字，与容器（浅灰）形成清晰的选中层次 */

/* ============ 图片加载占位（智居圈：信息流 / 详情 / 我的帖子）============
 * 图片未就绪时展示闪烁占位，加载完成后由 JS 给 img 加 .on 淡入；
 * 加载失败时给 img 与容器加 .err，停掉闪烁并保持静态灰底。 */
@keyframes imgShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.img-skel{position:absolute;inset:0;background:var(--card3);overflow:hidden;pointer-events:none}
.img-skel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);animation:imgShimmer 1.15s ease-in-out infinite}
.err > .img-skel::after{animation:none}
img.err{opacity:0 !important}
/* 图片加载完成后移除占位层（骨架在 DOM 中紧跟 img，故用相邻选择器） */
img.on + .img-skel{display:none}

/* ============ Vant 弹层 / 选择器（暗色主题适配） ============
 * Calendar / DatetimePicker 默认白底，暗色主题下与页面卡片色统一；
 * 亮色主题保持组件默认样式，不改动。 */
html[data-theme="dark"] .van-popup,
html[data-theme="dark"] .van-calendar,
html[data-theme="dark"] .van-picker{background:var(--card)}
html[data-theme="dark"] .van-calendar__header,
html[data-theme="dark"] .van-picker__toolbar{background:var(--card);color:var(--text1)}
html[data-theme="dark"] .van-calendar__header-title,
html[data-theme="dark"] .van-calendar__month-title,
html[data-theme="dark"] .van-picker__title{color:var(--text1)}
html[data-theme="dark"] .van-calendar__weekday,
html[data-theme="dark"] .van-calendar__day{color:var(--text2)}
html[data-theme="dark"] .van-calendar__day--disabled{color:var(--text3);opacity:.45}
html[data-theme="dark"] .van-calendar__bottom-info{color:var(--text3)}
html[data-theme="dark"] .van-picker-column__item{color:var(--text2)}
html[data-theme="dark"] .van-picker-column__item--selected{color:var(--text1)}
html[data-theme="dark"] .van-picker__cancel{color:var(--text2)}
html[data-theme="dark"] .van-picker__confirm{color:var(--accent2)}

/* ============ 图片预览左右切换（core/lightbox.js 动态挂到 body） ============
 * 首/末张由 JS 控制显隐；按钮悬浮在图片两侧，不遮挡页码与关闭按钮。 */
.pv-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:2100;
  width:42px;height:42px;border-radius:50%;border:none;padding:0;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity var(--dur-2),background var(--dur-2)}
.pv-nav:active{background:rgba(255,255,255,.32)}
.pv-nav svg{width:22px;height:22px;display:block}
.pv-prev{left:calc(10px + env(safe-area-inset-left))}
.pv-next{right:calc(10px + env(safe-area-inset-right))}