/* ============================================================
   贝壳 APP · 找房·旅居频道 — 共享移动端外壳 / 组件
   lvju-app-*.html 系列子页面统一引用本文件 + 各页少量页内样式
   品牌色：青绿 var(--brand) + 金 var(--gold)（与 贵州旅居总览 对齐）
   ============================================================ */
:root{
  --surface:#ffffff; --fg:#0f172a; --muted:#6b7785; --border:#e7ece9;
  --brand:#0f766e; --brand-deep:#0b5d56; --brand-2:#14b8a6;
  --brand-soft:color-mix(in oklab,var(--brand) 12%,transparent);
  --gold:#b48a3f; --gold-deep:#8c6224; --gold-soft:color-mix(in oklab,var(--gold) 16%,transparent);
  --ink:#10171c;
  --font:system-ui,-apple-system,'PingFang SC','Noto Sans CJK SC',sans-serif;
  --serif:'Noto Serif SC','Songti SC','Source Han Serif SC',Georgia,'Times New Roman',serif;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:radial-gradient(1000px 600px at 50% -10%,#13322e 0%,#0b0f12 60%);
  font-family:var(--font);-webkit-font-smoothing:antialiased;display:flex;justify-content:center;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;}

/* app column = phone screen, full height */
.app{width:100%;max-width:430px;height:100dvh;background:#f5f7f6;color:var(--fg);
  display:flex;flex-direction:column;overflow:hidden;position:relative;box-shadow:0 0 80px rgba(0,0,0,.5);}
.scr{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.scr::-webkit-scrollbar{width:0;}

/* image gradient placeholders */
.g1{background:linear-gradient(135deg,#0d8074,#5eead4 130%);}
.g2{background:linear-gradient(135deg,#155e63,#7dd3fc 130%);}
.g3{background:linear-gradient(135deg,#1f6f5f,#0c4d44);}
.g4{background:linear-gradient(135deg,#7a5a23,#caa45e 130%);}
.g5{background:linear-gradient(135deg,#0e7490,#67e8f9 130%);}
.g6{background:linear-gradient(135deg,#3f6212,#a3e635 130%);}
.g7{background:linear-gradient(135deg,#9a3412,#fdba74 130%);}
.g8{background:linear-gradient(135deg,#4c1d95,#c4b5fd 130%);}

/* ---------- appbar ---------- */
.appbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top));
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.appbar .bk{width:34px;height:34px;border-radius:50%;background:#f1f4f3;display:grid;place-items:center;font-size:19px;color:var(--ink);flex-shrink:0;}
.appbar .ttl{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink);line-height:1.15;}
.appbar .ttl small{display:block;font-family:var(--font);font-weight:400;font-size:10px;color:var(--muted);margin-top:1px;letter-spacing:.02em;}
.appbar .act{margin-left:auto;display:flex;gap:8px;}
.appbar .act span{width:34px;height:34px;border-radius:50%;background:#f1f4f3;display:grid;place-items:center;font-size:15px;}
.appbar.ghost{background:transparent;border-bottom:0;position:absolute;left:0;right:0;color:#fff;}
.appbar.ghost .bk,.appbar.ghost .act span{background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(6px);}
.appbar.ghost .ttl{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.3);}

/* ---------- compact hero ---------- */
.hero-sm{position:relative;color:#fff;padding:60px 20px 24px;overflow:hidden;}
.hero-sm .bg{position:absolute;inset:0;z-index:0;}
.hero-sm .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,18,16,.42),rgba(8,18,16,.05) 48%,#f5f7f6 100%);}
.hero-sm .in{position:relative;z-index:2;}
.hero-sm .ek{font-size:10px;letter-spacing:.36em;text-transform:uppercase;opacity:.9;}
.hero-sm h1{font-family:var(--serif);font-size:27px;font-weight:700;line-height:1.2;margin-top:7px;text-shadow:0 2px 16px rgba(0,0,0,.3);}
.hero-sm p{font-size:12px;opacity:.92;margin-top:7px;max-width:30ch;}
.hero-sm .stat{display:flex;gap:20px;margin-top:15px;}
.hero-sm .stat b{font-family:var(--serif);font-size:18px;display:block;}
.hero-sm .stat span{font-size:10px;opacity:.85;}

/* ---------- section header ---------- */
.sec-h{display:flex;align-items:baseline;gap:9px;padding:0 18px;margin:18px 0 12px;}
.sec-h .bar{width:3px;height:15px;border-radius:2px;background:linear-gradient(var(--brand),var(--gold));}
.sec-h h2{font-size:15px;font-weight:700;font-family:var(--serif);color:var(--ink);}
.sec-h .more{margin-left:auto;font-size:11px;color:var(--muted);}

/* ---------- filter chips ---------- */
.filt{display:flex;gap:8px;overflow-x:auto;padding:12px 16px 4px;}
.filt::-webkit-scrollbar{height:0;}
.filt a{flex:0 0 auto;font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--border);padding:6px 13px;border-radius:999px;}
.filt a.on{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;font-weight:600;}

/* ---------- listing magazine card ---------- */
.wrap{padding:8px 18px 24px;}
.mcard{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:14px;box-shadow:0 8px 22px rgba(15,42,38,.06);}
.mcard .img{height:140px;position:relative;}
.mcard .img::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.34),transparent 55%);}
.mcard .img .star{position:absolute;top:11px;left:11px;background:rgba(8,18,16,.5);backdrop-filter:blur(6px);
  color:#ffd98a;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,217,138,.35);}
.mcard .img .like{position:absolute;top:11px;right:11px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(4px);display:grid;place-items:center;font-size:13px;color:#fff;}
.mcard .img .cap{position:absolute;left:13px;bottom:11px;color:#fff;}
.mcard .img .cap .nm{font-family:var(--serif);font-size:16px;font-weight:700;}
.mcard .img .cap .lo{font-size:10.5px;opacity:.92;margin-top:1px;}
.mcard .ci{padding:11px 13px 13px;}
.mcard .tags{display:flex;gap:6px;flex-wrap:wrap;}
.mcard .tags span{font-size:10px;color:var(--brand-deep);background:var(--brand-soft);padding:2px 8px;border-radius:6px;}
.mcard .pr{display:flex;align-items:baseline;justify-content:space-between;margin-top:10px;}
.mcard .pr b{color:var(--gold-deep);font-size:18px;font-family:var(--serif);}
.mcard .pr b small{font-size:10px;color:var(--muted);font-weight:400;font-family:var(--font);}
.mcard .pr .bk{font-size:11px;font-weight:600;color:#fff;background:linear-gradient(90deg,var(--brand),var(--brand-2));padding:7px 16px;border-radius:999px;}

/* ---------- compact list row (长租/二手/新房) ---------- */
.lrow{display:flex;gap:11px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px;margin-bottom:11px;box-shadow:0 6px 16px rgba(15,42,38,.05);}
.lrow .th{width:108px;height:90px;border-radius:10px;flex-shrink:0;position:relative;overflow:hidden;}
.lrow .th .star{position:absolute;left:6px;top:6px;font-size:9px;font-weight:700;color:#ffd98a;background:rgba(8,18,16,.5);backdrop-filter:blur(4px);padding:1px 7px;border-radius:999px;}
.lrow .info{flex:1;min-width:0;}
.lrow .info .nm{font-weight:700;font-size:14px;color:var(--ink);}
.lrow .info .meta{font-size:11px;color:var(--muted);margin-top:3px;}
.lrow .info .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
.lrow .info .tags span{font-size:9.5px;color:var(--brand-deep);background:var(--brand-soft);padding:1px 7px;border-radius:5px;}
.lrow .pr{margin-top:8px;display:flex;align-items:baseline;justify-content:space-between;}
.lrow .pr b{color:var(--gold-deep);font-size:17px;font-family:var(--serif);}
.lrow .pr b small{font-size:10px;color:var(--muted);font-weight:400;font-family:var(--font);}
.lrow .pr .unit{font-size:10px;color:var(--muted);}

/* ---------- tiles grid (内容服务 / 便民) ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:0 18px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:0 18px;}
.tile{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 7px;text-align:center;color:var(--ink);transition:.15s;}
.tile:hover{border-color:color-mix(in oklab,var(--brand) 30%,var(--border));box-shadow:0 8px 18px rgba(15,42,38,.08);}
.tile .ic{font-size:24px;}
.tile b{font-size:12px;display:block;margin-top:6px;font-weight:600;}
.tile small{font-size:9.5px;color:var(--muted);}

/* ---------- spot card (景点) ---------- */
.spot{position:relative;border-radius:16px;overflow:hidden;height:152px;color:#fff;margin-bottom:13px;box-shadow:0 8px 22px rgba(15,42,38,.1);display:block;}
.spot .bg{position:absolute;inset:0;}
.spot .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.52),transparent 58%);}
.spot .lv{position:absolute;top:11px;left:11px;z-index:2;font-size:10px;font-weight:700;background:rgba(8,18,16,.5);backdrop-filter:blur(6px);color:#ffd98a;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,217,138,.35);}
.spot .in{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;}
.spot .nm{font-family:var(--serif);font-size:19px;font-weight:700;}
.spot .meta{font-size:11px;opacity:.92;margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- timeline (路线) ---------- */
.tl{padding:0 18px;}
.tlday{margin-bottom:8px;}
.tlday .d{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:700;font-size:15px;color:var(--brand-deep);margin:6px 0 10px;}
.tlday .d .n{width:25px;height:25px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;display:grid;place-items:center;font-size:11px;font-family:var(--font);}
.tlstep{position:relative;padding:0 0 15px 20px;border-left:2px solid var(--border);margin-left:12px;}
.tlstep::before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid #fff;}
.tlstep:last-child{border-left-color:transparent;}
.tlstep .t{font-weight:600;font-size:13px;color:var(--ink);}
.tlstep .badge{font-size:10px;color:var(--brand-deep);background:var(--brand-soft);padding:1px 7px;border-radius:5px;margin-left:6px;font-weight:400;}
.tlstep .s{font-size:11px;color:var(--muted);margin-top:3px;}

/* ---------- food row (美食) ---------- */
.food{display:flex;gap:11px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px;margin-bottom:11px;box-shadow:0 6px 16px rgba(15,42,38,.05);}
.food .th{width:96px;height:92px;border-radius:10px;flex-shrink:0;position:relative;}
.food .th .rk{position:absolute;top:6px;left:6px;font-size:9px;font-weight:800;color:#06090b;background:linear-gradient(90deg,#e9c98c,#b48a3f);padding:1px 7px;border-radius:5px;}
.food .info{flex:1;min-width:0;}
.food .info .nm{font-weight:700;font-size:14px;color:var(--ink);}
.food .info .rate{color:var(--gold-deep);font-size:11px;font-weight:600;margin-top:2px;}
.food .info .meta{font-size:11px;color:var(--muted);margin-top:3px;}
.food .info .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px;}
.food .info .tags span{font-size:9.5px;color:var(--brand-deep);background:var(--brand-soft);padding:1px 7px;border-radius:5px;}

/* ---------- banner (cross-link) ---------- */
.banner{margin:14px 18px;border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(110deg,#0b5d56,#117c6f);box-shadow:0 10px 24px rgba(11,93,86,.22);}
.banner.gold{background:linear-gradient(110deg,#8c6224,#b48a3f);box-shadow:0 10px 24px rgba(140,98,36,.22);}
.banner .bi{font-size:26px;}
.banner .bt{flex:1;}
.banner .bt b{font-size:14px;font-family:var(--serif);}
.banner .bt p{margin:2px 0 0;font-size:11px;opacity:.9;}
.banner .go{font-size:12px;font-weight:700;background:rgba(255,255,255,.2);padding:7px 14px;border-radius:999px;flex-shrink:0;}

/* ---------- mini tool / kv rows ---------- */
.panel{margin:6px 18px 0;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;}
.kv{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px;}
.kv:last-child{border-bottom:0;}
.kv .k{color:var(--muted);}
.kv .v{font-weight:600;color:var(--ink);}
.kv.big .v{color:var(--gold-deep);font-size:18px;font-family:var(--serif);}
.rate-row{display:flex;align-items:center;gap:9px;padding:7px 14px;font-size:12px;}
.rate-row .k{width:64px;color:var(--muted);}
.rate-row .bar{flex:1;height:6px;border-radius:3px;background:#eef2f1;overflow:hidden;}
.rate-row .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--gold));}
.rate-row .v{width:26px;text-align:right;font-weight:700;color:var(--brand-deep);}

/* ---------- tab bar ---------- */
.tabbar{flex-shrink:0;display:flex;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--border);padding:8px 0 max(10px,env(safe-area-inset-bottom));z-index:25;}
.tabbar a{flex:1;text-align:center;font-size:10px;color:#97a3a0;}
.tabbar a .ti{font-size:19px;display:block;}
.tabbar a.on{color:var(--brand);font-weight:700;}

/* ---------- sticky CTA (详情页) ---------- */
.cta{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--border);}
.cta .p b{color:var(--gold-deep);font-size:21px;font-family:var(--serif);}
.cta .p b small{font-size:10px;color:var(--muted);font-weight:400;font-family:var(--font);}
.cta .p span{font-size:10px;color:var(--muted);display:block;}
.cta .heart{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;font-size:18px;color:var(--brand);}
.cta .btn{margin-left:auto;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;font-weight:700;font-size:14px;padding:13px 30px;border-radius:999px;}

/* ---------- real photo scenes (assets/lvju/*) ---------- */
.s-xijiang,.s-stilt,.s-wanfeng,.s-huangguoshu,.s-xiaoqikong,.s-fanjing,.s-dong,
.s-qingyan,.s-city,.s-river,.s-country,.s-food1,.s-food2,.s-food3,.s-food4{
  background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0c4d44;}
.s-xijiang{background-image:url(assets/lvju/xijiang-night.jpg);}
.s-stilt{background-image:url(assets/lvju/stilt-miao.jpg);}
.s-wanfeng{background-image:url(assets/lvju/wanfenglin.jpg);}
.s-huangguoshu{background-image:url(assets/lvju/huangguoshu.jpg);}
.s-xiaoqikong{background-image:url(assets/lvju/xiaoqikong.jpg);}
.s-fanjing{background-image:url(assets/lvju/fanjingshan.jpg);}
.s-dong{background-image:url(assets/lvju/zhaoxing-dong.jpg);background-position:center 30%;}
.s-qingyan{background-image:url(assets/lvju/qingyan.jpg);}
.s-city{background-image:url(assets/lvju/guiyang-city.jpg);}
.s-river{background-image:url(assets/lvju/guiyang-river.jpg);}
.s-country{background-image:url(assets/lvju/countryside.jpg);}
.s-food1{background-image:url(assets/lvju/food-sourfish.jpg);}
.s-food2{background-image:url(assets/lvju/food-banquet.jpg);}
.s-food3{background-image:url(assets/lvju/food-noodle.jpg);}
.s-food4{background-image:url(assets/lvju/food-snack.jpg);}
.tlstep .rthumb{height:104px;border-radius:10px;margin-top:8px;background-size:cover;background-position:center;box-shadow:0 4px 12px rgba(15,42,38,.08);}

/* ============================================================
   交易闭环组件：预定 / 下单 / 支付 / 订单 / 我的
   ============================================================ */
/* 流程进度 */
.steps{display:flex;align-items:center;justify-content:center;gap:7px;padding:14px 16px 4px;font-size:11px;flex-wrap:wrap;}
.steps .st{display:flex;align-items:center;gap:6px;color:var(--muted);}
.steps .st .n{width:20px;height:20px;border-radius:50%;background:#e4eae8;color:#90a09b;display:grid;place-items:center;font-size:11px;font-weight:700;}
.steps .st.on{color:var(--brand-deep);font-weight:700;}
.steps .st.on .n{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;}
.steps .st.done .n{background:var(--brand-soft);color:var(--brand-deep);}
.steps .sep{color:#cdd6d3;}

/* 段标题 */
.seg{padding:15px 18px 7px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;}

/* 房源迷你卡（下单/预定顶部） */
.minihouse{display:flex;gap:11px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:11px;margin:12px 16px;box-shadow:0 6px 16px rgba(15,42,38,.05);}
.minihouse .th{width:78px;height:66px;border-radius:9px;flex-shrink:0;background-size:cover;background-position:center;}
.minihouse .mi{flex:1;min-width:0;}
.minihouse .mi .nm{font-size:14px;font-weight:700;color:var(--ink);}
.minihouse .mi .meta{font-size:11px;color:var(--muted);margin-top:3px;}
.minihouse .mi .st{font-size:11px;color:var(--gold-deep);font-weight:600;margin-top:4px;}

/* 表单字段 */
.field{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;background:#fff;border-bottom:1px solid var(--border);}
.field:last-child{border-bottom:0;}
.field .l{color:var(--muted);font-size:13px;}
.field .r{font-weight:600;color:var(--ink);font-size:13.5px;display:flex;align-items:center;gap:7px;}
.field .r .ar{color:#c2ccc9;font-weight:400;}
.qty{display:flex;align-items:center;gap:14px;}
.qty .b{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--brand);font-size:16px;display:grid;place-items:center;line-height:1;}

/* 支付方式 */
.payopt{display:flex;align-items:center;gap:11px;padding:13px 16px;background:#fff;border-bottom:1px solid var(--border);}
.payopt:last-child{border-bottom:0;}
.payopt .pi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:16px;}
.payopt .nm{flex:1;font-size:13.5px;font-weight:500;color:var(--ink);}
.payopt .nm small{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:1px;}
.payopt .rd{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;}
.payopt.sel .rd{border-color:var(--brand);background:radial-gradient(circle at center,var(--brand) 0 5px,#fff 5px);}

/* 订单卡 */
.ordcard{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:13px;box-shadow:0 6px 16px rgba(15,42,38,.05);}
.ordcard .oh{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border);}
.ordcard .oh .shop{font-size:12px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;}
.ordcard .stt{font-size:11px;font-weight:700;}
.stt.wait{color:var(--gold-deep);} .stt.stay{color:var(--brand);} .stt.done{color:var(--muted);}
.ordcard .ob{display:flex;gap:11px;padding:12px 14px;}
.ordcard .ob .th{width:86px;height:66px;border-radius:9px;flex-shrink:0;background-size:cover;background-position:center;}
.ordcard .ob .oi{flex:1;min-width:0;}
.ordcard .ob .oi .nm{font-size:13.5px;font-weight:600;color:var(--ink);}
.ordcard .ob .oi .meta{font-size:11px;color:var(--muted);margin-top:3px;}
.ordcard .ob .oi .amt{margin-top:6px;font-size:11px;color:var(--muted);}
.ordcard .ob .oi .amt b{color:var(--gold-deep);font-size:15px;font-family:var(--serif);}
.ordcard .of{display:flex;justify-content:flex-end;gap:9px;padding:0 14px 12px;}
.ordcard .of a{font-size:12px;padding:7px 16px;border-radius:999px;border:1px solid var(--border);color:var(--muted);}
.ordcard .of a.primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent;font-weight:600;}

/* 订单筛选 tabs */
.otabs{display:flex;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;}
.otabs a{flex:1;text-align:center;padding:12px 0;font-size:13px;color:var(--muted);position:relative;}
.otabs a.on{color:var(--brand-deep);font-weight:700;}
.otabs a.on::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:24px;height:3px;border-radius:2px;background:var(--brand);}

/* 成功页 */
.success{text-align:center;padding:42px 24px 18px;}
.success .ck{width:66px;height:66px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:34px;margin:0 auto 15px;}
.success h2{font-family:var(--serif);font-size:21px;color:var(--ink);}
.success p{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6;}
.btnrow{display:flex;gap:11px;padding:18px 18px 0;}
.btnrow a{flex:1;text-align:center;padding:12px 0;border-radius:999px;font-size:13.5px;font-weight:600;}
.btnrow a.ghost{border:1px solid var(--border);color:var(--brand-deep);}
.btnrow a.solid{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;}

/* 我的 · 头部 */
.me-hd{position:relative;padding:56px 20px 26px;color:#fff;overflow:hidden;}
.me-hd .bg{position:absolute;inset:0;z-index:0;}
.me-hd .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,16,.5),rgba(8,18,16,.2) 55%,rgba(8,18,16,.5));}
.me-hd .u{position:relative;z-index:2;display:flex;align-items:center;gap:14px;}
.me-hd .av{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);display:grid;place-items:center;font-size:31px;border:2px solid rgba(255,255,255,.55);flex-shrink:0;}
.me-hd .ui .nm{font-family:var(--serif);font-size:21px;font-weight:700;}
.me-hd .ui .ph{font-size:12px;opacity:.9;margin-top:3px;}
.me-hd .vip{position:relative;z-index:2;margin-top:14px;display:inline-flex;align-items:center;gap:7px;background:linear-gradient(90deg,#e9c98c,#b48a3f);color:#3a2a0c;font-size:11px;font-weight:700;padding:5px 13px;border-radius:999px;}
.mestat{display:flex;background:#fff;margin:-18px 16px 0;position:relative;z-index:5;border-radius:14px;box-shadow:0 8px 22px rgba(15,42,38,.12);padding:14px 0;}
.mestat a{flex:1;text-align:center;color:var(--ink);}
.mestat b{font-family:var(--serif);font-size:18px;display:block;}
.mestat span{font-size:10.5px;color:var(--muted);}

/* 订单入口条 */
.ordbar{display:flex;background:#fff;margin:13px 16px 0;border-radius:14px;padding:15px 0 13px;border:1px solid var(--border);}
.ordbar a{flex:1;text-align:center;font-size:11px;color:var(--ink);position:relative;}
.ordbar a .ic{font-size:22px;display:block;margin-bottom:4px;}
.ordbar a .bdg{position:absolute;top:-5px;right:22%;background:#dc2626;color:#fff;font-size:9px;min-width:15px;height:15px;border-radius:999px;display:grid;place-items:center;padding:0 3px;font-weight:700;}

/* 菜单列表 */
.menu{background:#fff;margin:13px 16px;border-radius:14px;overflow:hidden;border:1px solid var(--border);}
.menu a{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);font-size:14px;color:var(--ink);}
.menu a:last-child{border-bottom:0;}
.menu a .ic{font-size:18px;width:22px;text-align:center;}
.menu a .ar{margin-left:auto;color:#c2ccc9;}
.menu a .tip{font-size:11px;color:var(--muted);margin-left:auto;}
.menu a .tip + .ar{margin-left:8px;}

/* ============================================================
   订单详情 / 退改 / 评价 / 搜索 / 地图
   ============================================================ */
/* 订单状态条 */
.statusbar{padding:18px 18px 16px;color:#fff;}
.statusbar.stay{background:linear-gradient(120deg,var(--brand-deep),var(--brand));}
.statusbar.wait{background:linear-gradient(120deg,#8c6224,#b48a3f);}
.statusbar.done{background:linear-gradient(120deg,#475569,#64748b);}
.statusbar .s1{font-family:var(--serif);font-size:19px;font-weight:700;}
.statusbar .s2{font-size:12px;opacity:.92;margin-top:5px;}

/* 评分星组 */
.starset{display:flex;align-items:center;gap:10px;padding:9px 16px;}
.starset .k{width:60px;color:var(--muted);font-size:12px;}
.starset .stars{color:var(--gold);font-size:19px;letter-spacing:2px;}
.starset .v{margin-left:auto;font-weight:700;color:var(--brand-deep);font-size:12px;}

/* 排序条 */
.sortbar{display:flex;background:#fff;border-bottom:1px solid var(--border);}
.sortbar a{flex:1;text-align:center;padding:11px 0;font-size:12.5px;color:var(--muted);}
.sortbar a.on{color:var(--brand-deep);font-weight:700;}

/* 搜索输入条（appbar 内） */
.searchin{flex:1;display:flex;align-items:center;gap:8px;background:#f1f4f3;border-radius:999px;padding:9px 14px;font-size:13px;color:var(--ink);min-width:0;}
.searchin .ic{color:var(--brand);flex-shrink:0;}
.searchin .kw{font-weight:600;}
.searchin .ph{color:#90a09b;}

/* 晒图上传格 */
.upgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 16px 4px;}
.upgrid .ph{aspect-ratio:1;border-radius:10px;background-size:cover;background-position:center;}
.upgrid .add{aspect-ratio:1;border-radius:10px;border:1.5px dashed var(--border);display:grid;place-items:center;font-size:24px;color:#b6c2be;background:#fff;}

/* 文本域 */
.tarea{margin:6px 16px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:13px;color:var(--ink);line-height:1.65;min-height:84px;}
.tarea .gray{color:#9aa6a2;}

/* 地图找房 */
.mapwrap{position:relative;flex:1;overflow:hidden;}
/* 地图模式：纯 CSS 示意地图（路网+水系+绿地），非景区照片 */
.mapcanvas{position:absolute;inset:0;overflow:hidden;background-color:#e4ebe2;
  background-image:
    /* 绿地公园 */
    radial-gradient(circle at 20% 28%, rgba(122,170,120,.42) 0 64px, transparent 66px),
    radial-gradient(circle at 82% 64%, rgba(122,170,120,.34) 0 52px, transparent 54px),
    radial-gradient(circle at 58% 86%, rgba(122,170,120,.30) 0 44px, transparent 46px),
    /* 水塘 */
    radial-gradient(ellipse 96px 64px at 72% 20%, rgba(120,178,210,.62) 0 86%, transparent 100%),
    /* 街区细路网 */
    repeating-linear-gradient(0deg, rgba(20,40,30,.06) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(90deg, rgba(20,40,30,.06) 0 1px, transparent 1px 54px);}
/* 河流：旋转的蓝色带，斜穿地图 */
.mapcanvas::before{content:"";position:absolute;left:-30%;top:-30%;width:160%;height:160%;
  transform:rotate(-22deg);transform-origin:center;
  background:linear-gradient(180deg, transparent 47.5%, rgba(108,168,205,.55) 48.5% 53.5%, transparent 54.5%);}
/* 主干道（白）+ 顶/底压暗，保证 pin 与卡片可读 */
.mapcanvas::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(0deg, transparent 0 41%, rgba(255,255,255,.9) 41% 43.5%, transparent 43.5%),
    linear-gradient(90deg, transparent 0 60%, rgba(255,255,255,.9) 60% 62%, transparent 62%),
    linear-gradient(180deg, rgba(8,18,16,.05), rgba(8,18,16,.04) 60%, rgba(8,18,16,.16));}
.pin{position:absolute;transform:translate(-50%,-100%);background:#fff;border:1px solid var(--border);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;color:var(--gold-deep);box-shadow:0 6px 16px rgba(8,18,16,.28);white-space:nowrap;z-index:2;}
.pin::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:#fff;border-right:1px solid var(--border);border-bottom:1px solid var(--border);}
.pin.on{background:linear-gradient(90deg,var(--brand),var(--brand-deep));color:#fff;border-color:transparent;z-index:3;}
.pin.on::after{background:var(--brand-deep);border-color:transparent;}
.maptoggle{position:absolute;top:12px;right:14px;z-index:6;background:#fff;border-radius:999px;padding:8px 15px;font-size:12px;font-weight:700;color:var(--brand-deep);box-shadow:0 6px 16px rgba(8,18,16,.22);display:inline-flex;gap:6px;align-items:center;}
.mapsheet{position:absolute;left:10px;right:10px;bottom:12px;z-index:5;background:#fff;border-radius:16px;padding:11px;box-shadow:0 -2px 24px rgba(8,18,16,.2);display:flex;gap:11px;align-items:center;}
.mapsheet .th{width:78px;height:64px;border-radius:10px;flex-shrink:0;background-size:cover;background-position:center;}
.mapsheet .mi{flex:1;min-width:0;}
.mapsheet .mi .nm{font-size:14px;font-weight:700;color:var(--ink);}
.mapsheet .mi .meta{font-size:11px;color:var(--muted);margin-top:3px;}
.mapsheet .mi .pr{font-size:11px;color:var(--muted);margin-top:4px;}
.mapsheet .mi .pr b{color:var(--gold-deep);font-family:var(--serif);font-size:15px;}
.mapsheet .bk{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;font-size:12px;font-weight:600;padding:9px 16px;border-radius:999px;flex-shrink:0;}

/* ============================================================
   消息 / 钱包 / 优惠券 / 客服·管家会话 / 入住核销
   ============================================================ */
/* 消息中心 */
.msg{display:flex;gap:12px;background:#fff;padding:14px 16px;border-bottom:1px solid var(--border);}
.msg .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0;color:#fff;}
.msg .ico.ord{background:linear-gradient(135deg,var(--brand),var(--brand-deep));}
.msg .ico.host{background:linear-gradient(135deg,#8c6224,#b48a3f);}
.msg .ico.act{background:linear-gradient(135deg,#9a3412,#f59e0b);}
.msg .ico.sys{background:linear-gradient(135deg,#475569,#64748b);}
.msg .mc{flex:1;min-width:0;}
.msg .mc .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.msg .mc .t{font-size:14px;font-weight:700;color:var(--ink);}
.msg .mc .tm{font-size:10px;color:var(--muted);flex-shrink:0;}
.msg .mc .d{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5;}
.msg.unread .t::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#dc2626;margin-left:6px;vertical-align:middle;}

/* 钱包头部 */
.wallet-hd{background:linear-gradient(135deg,#0b5d56,#0f766e);color:#fff;padding:24px 20px 26px;}
.wallet-hd .lab{font-size:12px;opacity:.85;}
.wallet-hd .bal{font-family:var(--serif);font-size:38px;font-weight:800;margin-top:6px;line-height:1;}
.wallet-hd .row{display:flex;gap:10px;margin-top:18px;}
.wallet-hd .row a{flex:1;text-align:center;background:rgba(255,255,255,.16);border-radius:12px;padding:11px 0;font-size:11px;color:#fff;}
.wallet-hd .row a b{display:block;font-family:var(--serif);font-size:18px;margin-bottom:2px;}

/* 优惠券 */
.coupon{display:flex;align-items:stretch;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:12px;box-shadow:0 6px 16px rgba(15,42,38,.05);}
.coupon .amt{width:104px;flex-shrink:0;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.coupon .amt b{font-family:var(--serif);font-size:30px;line-height:1;}
.coupon .amt b small{font-size:13px;font-weight:400;}
.coupon .amt span{font-size:10px;opacity:.92;margin-top:4px;}
.coupon .ci{flex:1;padding:12px 14px;border-left:1px dashed var(--border);}
.coupon .ci .nm{font-size:14px;font-weight:700;color:var(--ink);}
.coupon .ci .cond{font-size:11px;color:var(--muted);margin-top:3px;}
.coupon .ci .exp{font-size:10px;color:var(--muted);margin-top:7px;}
.coupon .use{align-self:center;margin:0 13px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;font-size:12px;font-weight:600;padding:7px 14px;border-radius:999px;flex-shrink:0;}
.coupon.gray .amt{background:linear-gradient(135deg,#94a3b8,#64748b);}
.coupon.gray .use{background:#e4eae8;color:#90a09b;}

/* 会话（客服 / 管家） */
.chat{flex:1;overflow-y:auto;padding:14px 14px 6px;background:#eef2f1;}
.chat::-webkit-scrollbar{width:0;}
.chat .day{text-align:center;font-size:10px;color:var(--muted);margin:4px 0 14px;}
.cmsg{display:flex;gap:9px;margin-bottom:14px;align-items:flex-end;}
.cmsg .av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:17px;background:#fff;border:1px solid var(--border);}
.cmsg .bub{max-width:74%;background:#fff;border-radius:4px 14px 14px 14px;padding:9px 12px;font-size:13px;line-height:1.55;color:var(--ink);box-shadow:0 2px 8px rgba(15,42,38,.06);}
.cmsg.me{flex-direction:row-reverse;}
.cmsg.me .bub{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;border-radius:14px 4px 14px 14px;}
.cmsg .bub .hcard{display:flex;gap:9px;align-items:center;margin-top:2px;background:rgba(15,118,110,.06);border-radius:9px;padding:7px;}
.cmsg .bub .hcard .th{width:46px;height:40px;border-radius:7px;background-size:cover;background-position:center;flex-shrink:0;}
.cmsg .bub .hcard .nm{font-size:12px;font-weight:700;}
.cmsg .bub .hcard .pr{font-size:11px;color:var(--gold-deep);font-weight:700;}
.qreplies{flex-shrink:0;display:flex;gap:8px;overflow-x:auto;padding:9px 14px;background:#eef2f1;}
.qreplies::-webkit-scrollbar{height:0;}
.qreplies a{flex:0 0 auto;background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:12px;color:var(--brand-deep);}
.chatbar{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:10px 14px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--border);}
.chatbar .ic{font-size:22px;color:var(--muted);flex-shrink:0;}
.chatbar .ipt{flex:1;background:#f1f4f3;border-radius:999px;padding:10px 15px;font-size:13px;color:#90a09b;}
.chatbar .snd{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-size:16px;flex-shrink:0;}

/* 入住核销 */
.checkin{text-align:center;padding:20px 24px 8px;}
.checkin .badge{display:inline-block;font-size:11px;font-weight:700;color:var(--brand-deep);background:var(--brand-soft);padding:4px 13px;border-radius:999px;}
.checkin .qrwrap{width:208px;height:208px;margin:18px auto 8px;background:#fff;border-radius:18px;box-shadow:0 12px 30px rgba(15,42,38,.14);display:grid;place-items:center;}
.checkin .qrwrap img{width:172px;height:172px;}
.checkin .code{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;color:var(--ink);letter-spacing:1px;}
.checkin .hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6;}