/* ==========================================================================
 * 前台模板 · 星屿版 — 完全按设计稿 front-ui-all-demo.html 落地
 * 主色 #2F6BFF · 价格 #FF7A18 · 卡片 16 圆角细描边 · 通栏底栏 + 悬浮发布
 * 仅商户选用「星屿版」时加载；classic 不加载任何额外 CSS。
 * ========================================================================== */
:root{
  --brand:#2f6bff; --brand-2:#5b8cff; --brand-soft:#eef3ff;
  --bg:#f5f7fb; --card:#fff;
  --ink:#131a2b; --ink-2:#5b6679; --ink-3:#8b95a8;
  --line:#e9eef7; --line-soft:#f2f5fa;
  --radius:16px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -14px rgba(16,24,40,.16),0 22px 48px -32px rgba(26,56,140,.28);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 6px 18px -12px rgba(16,24,40,.14);
  --price:#ff7a18; --ok:#0fae76;
}
/* 按钮 */
.btn{height:42px;border-radius:11px;font-weight:700;letter-spacing:.01em;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 8px 18px -10px rgba(47,107,255,.75);
  transition:transform .12s ease,box-shadow .16s ease,background .16s ease}
.btn:hover{background:linear-gradient(135deg,var(--brand-2),var(--brand));box-shadow:0 12px 24px -10px rgba(47,107,255,.8)}
.btn:active{transform:translateY(1px)}
.btn.ghost,.btn.cobtn,.btn.line{background:#fff;box-shadow:none;border:1px solid var(--line);color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn.cobtn{color:var(--brand);border-color:var(--brand)}
.btn.cobtn.on{background:var(--brand);color:#fff}
.btn.sm{height:34px;border-radius:9px;font-size:12.5px;padding:0 14px;box-shadow:none}
.btn.sm:not(.ghost):not(.cobtn){box-shadow:0 6px 14px -10px rgba(47,107,255,.8)}
.tag{border-radius:7px;font-weight:650;letter-spacing:.01em}

/* 账号卡 */
.pcard{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);background:#fff;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pcard:hover{border-color:#dbe5fb;box-shadow:var(--shadow)}
.pcard:active{transform:scale(.986);box-shadow:var(--shadow-sm);border-color:#dbe5fb}
.pcard-media{height:150px;background:linear-gradient(135deg,#e9efff 0%,#dfe8ff 45%,#f1f5ff 100%)}
.pcard-media>img{border-radius:0}
.pcard-promise{display:none}
.pcard-body{padding:12px 13px 9px}
.pcard-name{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.pcard-foot{padding:10px 13px;border-top:1px solid var(--line-soft);background:linear-gradient(180deg,#fcfdff,#f9fbff)}

/* 区块标题：按设计稿走纯文字标题（图标块与斜纹都去掉） */
.sec-label{gap:6px;margin:18px 0 9px}
.sec-label .rt,.sec-label .hz{display:none}
.sec-label b{font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}

/* 首页推荐横滑 */
.rec-rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;
  padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.rec-rail::-webkit-scrollbar{display:none}
.rec-rail .pcard{flex:0 0 78%;scroll-snap-align:start;align-self:flex-start}
.rec-rail .pcard-media{height:auto}
.rec-rail .pcard-name{font-size:14px}

/* 快捷入口 */
.hquick .hq .hq-ic{border-radius:13px;background:var(--brand-soft);color:var(--brand)}
.hquick .hq1 .hq-ic,.hquick .hq2 .hq-ic,.hquick .hq3 .hq-ic,.hquick .hq4 .hq-ic,.hquick .hq5 .hq-ic{background:var(--brand-soft);color:var(--brand)}
.hquick .hq .hq-t{color:var(--ink-2);font-weight:700}
.swiper{border-radius:16px;overflow:hidden}

/* 底栏：通栏 + 悬浮发布 */
.bnav-bg{display:none}
.bnav{left:0;right:0;bottom:0;border-radius:0;border:0;border-top:1px solid var(--line);
  background:rgba(255,255,255,.96);box-shadow:0 -8px 24px -16px rgba(16,24,40,.28);
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  padding-bottom:env(safe-area-inset-bottom)}
.bnav a{padding:11px 0 13px;font-weight:600;color:var(--ink-3);transition:color .15s ease}
.bnav a.on{color:var(--brand);font-weight:800}
.bnav a.bnav-pub .bi{width:48px;height:48px;top:-18px;border-radius:17px;
  background:linear-gradient(140deg,var(--brand),#7a5cff);box-shadow:0 10px 22px -8px rgba(47,107,255,.6)}

/* 登录 / 注册 */
.lg-tabs{border-radius:13px;background:#eef2fb}
.lgtab{border-radius:9px;font-weight:650}
.lg-field{height:44px;border-radius:12px;border-color:#dfe6f2;transition:border-color .16s ease,box-shadow .16s ease}
.lg-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.lg-input{font-size:13px}
.lg-submit{height:44px;border-radius:12px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 10px 22px -12px rgba(47,107,255,.8)}
.lg-send{border-radius:12px;height:44px;font-weight:700;background:var(--brand-soft);color:var(--brand)}
.lg-agree .ck,.lga-box{border-radius:5px}
.pc-auth-dlg{border-radius:20px}

/* 面板 / 输入 */
.ucard,.pe-card,.uset-card{border-radius:16px;box-shadow:var(--shadow-sm)}
.pe-input,.field .in,.form-input{border-radius:11px;border-color:#dfe6f2}
.pe-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.pe-save{border-radius:12px;font-weight:800;background:linear-gradient(135deg,var(--brand),var(--brand-2))}

/* 个人中心头部 */
.ct-hero{background:linear-gradient(150deg,#2f6bff 0%,#4a5cf0 48%,#7a5cff 100%)}
.ct-hero-glow{opacity:.5}
.ct-hero-lines{opacity:.2}
.ct-av-ring{border-color:rgba(255,255,255,.4)}
.ct-hero-btns .ct-mp{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.26)}
.ct-hero-btns .ct-mp:active{background:rgba(255,255,255,.26)}
.ct-sheet{border-radius:22px}

/* 空状态 */
.empty{padding:54px 0 46px;text-align:center;color:var(--ink-3);font-size:13px}
.empty .eic{font-size:42px;line-height:1;margin-bottom:10px;opacity:.85}
.mp-empty{padding:58px 0 46px;text-align:center}
.mp-empty .me-icon{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center}
.mp-empty .me-icon svg{width:34px;height:34px;opacity:.92}
.mp-empty p{font-size:13px;color:var(--ink-3);margin:0}

/* 大厅 */
.zone-card{border-radius:16px}
.zone-title,.zone-name{font-weight:800;letter-spacing:-.01em}
.zone-hot{border-radius:6px}
.sortbar{background:#fff;border-bottom:1px solid var(--line)}
.sort-item{font-weight:600}
.sort-item.on{color:var(--brand);font-weight:800}
.sort-filter{border-radius:8px}
.filter-panel{border-radius:16px}
.flt-field .in,.flt-field input{border-radius:10px}
.list-sorts{position:sticky;top:0;z-index:30;background:var(--bg);padding-top:6px;padding-bottom:6px;margin:-6px 0 0}

/* 详情页 */
.depbanner{background:var(--brand-soft);border-color:#e2ecff}
.depbanner strong,.depbanner b,.depbanner em{color:var(--brand)}
.depbanner svg{color:var(--brand)}
.depbanner .depb-in{color:var(--ink-2)}
.gallery{background:linear-gradient(150deg,#2f6bff 0%,#4a5cf0 55%,#7a5cff 100%)}
.gallery-empty{color:rgba(255,255,255,.8);font-weight:600;letter-spacing:.04em}

/* PC 账号卡 */
.pac{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pac:hover{border-color:#dbe5fb;box-shadow:var(--shadow);transform:translateY(-3px)}
.pac-media,.pac-cov{background:linear-gradient(135deg,#e9efff 0%,#dfe8ff 45%,#f1f5ff 100%)}
.pac-promise{display:none}
.pac-body{padding:13px 14px 10px}
.pac-name{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.pac-price{font-weight:800;letter-spacing:-.01em}
.pac-bot,.pac-acts{border-top-color:var(--line-soft)}
.pac-btn{height:36px;border-radius:10px;font-weight:700;font-size:12.5px}
.pac-btn.buy{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:none;
  box-shadow:0 8px 18px -12px rgba(47,107,255,.9)}
.pac-btn.buy:hover{background:linear-gradient(135deg,var(--brand-2),var(--brand))}
.pac-btn.ghost{background:#fff;color:var(--brand);border:1px solid #d8e3ff;box-shadow:none}
.pac-btn.ghost:hover{background:var(--brand-soft);border-color:var(--brand)}
.pcg-gal-empty{background:linear-gradient(150deg,#2f6bff 0%,#4a5cf0 55%,#7a5cff 100%);border-color:transparent;border-radius:18px}
.pcg-noimg{color:rgba(255,255,255,.8);font-weight:600;letter-spacing:.04em}

/* 价格（P2）：金额统一走 --price，不再沿用基础样式的红 #f0483e —— 列表里一红一橙最像"旧版" */
.pcard-price,.pac-price,.price{color:var(--price)}
.pcard-price .pcp-amt,.pcard-price .pcp-tag,.pac-price b,.pac-price em{color:var(--price)}
.pcard-price .pcp-tag{opacity:.9}

/* ============================ 详情页（P1：卡片化 + 价格层级） ============================ */
.dm-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.dm-title{font-size:16px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.dm-title-sec{font-weight:800;letter-spacing:-.01em}
.dm-price .dm-cur,
.dm-price .dm-amt,
.dm-price .dm-dec{color:var(--price);font-weight:800;letter-spacing:-.02em}
.dm-price .dm-unit{color:var(--ink-3);font-weight:600}
.dm-deposit{border-radius:9px}
.dm-tag{border-radius:6px;font-weight:650}
.dm-infobar{
  background:linear-gradient(90deg,#eef3ff,#f8fbff);
  border-radius:12px;
  color:var(--ink-2);
  font-weight:600;
}
/* 底部固定购买条：白底 + 上边细线 + 柔和投影 */
.detail-bar{
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 26px -20px rgba(16,24,40,.4);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
}

/* 星屿版：主视觉沿用 h5.css 的结构，只隐藏实时条（数据条已替代它） */
.hud{display:none}

/* 6 个入口的配色（列数规则已上移到 h5.css，其它模板共用） */

/* 详情页（P1）：无图时不再顶一块 220px 大空框；标题层级收紧 */
.gallery:has(.gallery-empty){border-radius:0 0 18px 18px}
.gallery .gallery-empty{height:132px;font-size:12.5px;letter-spacing:.08em}
.dm-title{margin-top:6px}
.dm-deposit{display:inline-flex;align-items:baseline;gap:3px;background:#f4f7fd;border:1px solid var(--line);
  border-radius:8px;padding:3px 8px;font-size:12.5px;color:var(--ink-2);font-weight:700}
.dm-deposit i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-3)}
.dm-price{gap:6px}
.dm-tag{border-radius:8px}

/* 参数格（P1）：折叠按钮与卡片描边同色系，点开不顶破卡片 */
.pcard-table,.pac-metrics{border-radius:10px}
.pt-more,.pac-mt-more{color:var(--brand)}
.pt-more{font-size:11px}
.pt-cell b,.pac-mt b{font-variant-numeric:tabular-nums}

/* 卡片底部（P1）：价格独占一行（押金/租期不再被按钮挤成「押金 ¥220…」），按钮平分第二行 */
.pcard-foot{flex-wrap:wrap;row-gap:8px;padding:9px 13px 10px}
.pcard-foot .pcard-price{flex:1 1 100%}
.pcard-foot .pcard-price .pcp-sub{flex-basis:auto;margin-left:auto;font-size:10.5px;overflow:visible;text-overflow:clip}
.pcard-foot .btn{flex:1;min-width:0}
/* 区块标题右侧斜纹：收敛成一条极淡的细线（原来 6px 高 45° 强纹，像页面卡了加载条） */
.sec-label .hz{height:4px;opacity:.14;border-radius:2px}

/* 收银台 / 订单列表（P1）：与首页卡片同一套圆角+描边，金额统一用价格色 */
.cashier{background:var(--bg)}
.cashier-total{border-radius:18px;border-color:var(--line);box-shadow:var(--shadow-sm)}
.ct-num,.ct-sym{color:var(--price)}
.ct-bar{background:linear-gradient(90deg,var(--brand),var(--brand-2),#7a5cff)}
.pay-item{border-radius:14px;border-color:var(--line)}
.pay-item.on{border-color:var(--brand);background:var(--brand-soft)}
.cashier-pay{border-radius:13px;font-weight:800;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 12px 26px -14px rgba(47,107,255,.95)}
.order-card{border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.order-card-title{font-weight:800;letter-spacing:-.01em}

/* ============================ 封面（P2：真实采集号的封面） ============================
   原来固定 150px 高 + object-fit:cover，3:2 的游戏截图被横切成一条，像旧版；
   改成 16:9 等比展示 + 底部渐变压暗（编号角标压在上面也看得清）
   ★ 老浏览器（微信 X5 / 旧安卓 WebView）不支持 aspect-ratio，也给一个固定高度兜底，
     否则封面会塌成 0 高 —— 这正是"用户看到的还是旧样式"的原因之一 */
.pcard-media{height:150px;background:linear-gradient(135deg,#e9efff 0%,#dfe8ff 45%,#f1f5ff 100%)}
.pcard-media>img{width:100%;height:100%;object-fit:cover;display:block}
@supports (aspect-ratio: 16 / 9) {
  .pcard-media{height:auto;aspect-ratio:16 / 9}
}
.pcard-media::after{content:'';position:absolute;left:0;right:0;bottom:0;height:58%;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,14,26,0) 0%,rgba(9,14,26,.06) 48%,rgba(9,14,26,.46) 100%)}
/* 编号角标：磨砂深底（原来的蓝底压在截图上，颜色打架、也不够显眼） */
.pcard-media .pc-no{background:rgba(12,20,38,.58);color:#fff;font-weight:700;border-radius:7px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);letter-spacing:.3px}
.pcard-media .pc-online{background:rgba(15,174,118,.92);color:#fff;border-radius:7px}
.pac-media,.pac-cov{height:180px}
.pac-media>img,.pac-cov>img{width:100%;height:100%;object-fit:cover}
@supports (aspect-ratio: 16 / 9) {
  .pac-media,.pac-cov{height:auto;aspect-ratio:16 / 9}
}

/* ============================ 封面高度兜底 ============================ */
.pcard-media:not(:has(>img)){height:84px}

/* 详情页配色收敛（按设计稿：只保留 品牌蓝 + 价格橙 + 中性灰，不再有黄/绿/紫标签） */
.dm-ratio{background:var(--brand-soft);color:var(--brand)}
.dm-ratio .dm-r-label,.dm-ratio .dm-r-sub{color:var(--brand);opacity:.7}
.dm-tag.t1,.dm-tag.t3,.dm-tag.t4{background:#f5f7fb;border-color:var(--line);color:var(--ink-2)}
.dm-tag.t2{background:var(--brand-soft);border-color:#dbe6ff;color:var(--brand)}
.flow-ic{color:var(--brand)!important}
.flow-card .flow-conn{color:#cdd8ee}

/* 订单卡（我的租赁 / 我的出租）：金额用价格色 + 「租金」小标签 + 无封面首字占位 */
.mc-price{color:var(--price)}
.mc-price small{font-size:10px;font-weight:600;color:var(--ink-3);margin-right:3px}
.mc-img-ph{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;letter-spacing:.02em;color:rgba(47,107,255,.34)}
.mc-img{overflow:hidden}