/* ============================================================
* 宜度假 —— 通用样式（浅色主题）
* ============================================================ */
/* ============================================================
* 品牌字体 · 站酷庆科黄油体（OFL 免费商用授权）
* 子集仅含 宜度假后台·YIDUJIA0-9，base64 内嵌，无外链
* ============================================================ */
@font-face {
font-family: 'Yidujia Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(data:font/woff2;base64,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AAEECQADAEwBHgADAAEECQAEADoBagADAAEECQAFABoBpAADAAEECQAGADYBvgBDAG8AcAB5AHIAaQBnAGgAdAAgADIAMAAxADgAIABUAGgAZQAgAFoAQwBPAE8ATAAgAFEAaQBuAGcASwBlACAASAB1AGEAbgBnAFkAbwB1ACAAUAByAG8AagBlAGMAdAAgAEEAdQB0AGgAbwByAHMAIAAoAGgAdAB0AHAAcwA6AC8ALwB3AHcAdwAuAGcAaQB0AGgAdQBiAC4AYwBvAG0ALwBnAG8AbwBnAGwAZQBmAG8AbgB0AHMALwB6AGMAbwBvAGwALQBxAGkAbgBnAGsAZQAtAGgAdQBhAG4AZwB5AG8AdQApAFoAQwBPAE8ATAAgAFEAaQBuAGcASwBlACAASAB1AGEAbgBnAFkAbwB1AFIAZQBnAHUAbABhAHIAMQAuADAAMAAwADsAVwBZAFUARQA7AFoAQwBPAE8ATABRAGkAbgBnAEsAZQBIAHUAYQBuAGcAWQBvAHUALQBSAGUAZwB1AGwAYQByAFoAQwBPAE8ATAAgAFEAaQBuAGcASwBlACAASAB1AGEAbgBnAFkAbwB1ACAAUgBlAGcAdQBsAGEAcgBWAGUAcgBzAGkAbwBuACAAMQAuADAAMAAwAFoAQwBPAE8ATABRAGkAbgBnAEsAZQBIAHUAYQBuAGcAWQBvAHUALQBSAGUAZwB1AGwAYQByAAAAAwAAAAAAAP+1ADIAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAKABwAHgABREZMVAAIAAQAAAAA//8AAAAAAAA=) format('woff2');
}
:root {
--brand: #1f9b8e;
--brand-dark: #178073;
--brand-light: #e6f6f3;
--bg: #f5f7f9;
--card: #ffffff;
--line: #e8ecf0;
--text: #1a2430;
--text-2: #5a6a7a;
--text-3: #96a3b0;
--warn: #e8912b;
--warn-bg: #fdf3e5;
--info: #3b7fd4;
--info-bg: #eaf2fd;
--success: #2aa06c;
--success-bg: #e8f7f0;
--danger: #d9534f;
--danger-bg: #fdeceb;
--radius: 14px;
--shadow: 0 2px 12px rgba(20, 40, 60, .06);
--shadow-lg: 0 8px 28px rgba(20, 40, 60, .12);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 关掉浏览器自带的「整页左右横滑翻页 / 回退」，右滑返回交给 common.js 的
左缘手势处理，否则手机上划一下就直接退出站点 */
html, body {
margin: 0; padding: 0;
overscroll-behavior-x: none;
overscroll-behavior-y: auto;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
background: var(--bg); color: var(--text);
font-size: 14px; line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 14px; }
img { max-width: 100%; }
/* ---------- 手机外壳（H5 端） ---------- */
.phone {
max-width: 430px; margin: 0 auto; background: var(--bg);
min-height: 100vh; position: relative; padding-bottom: 76px;
box-shadow: 0 0 40px rgba(0,0,0,.06);
}
.topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
padding: 12px 16px; display: flex; align-items: center; gap: 10px;
min-height: 52px;
}
.topbar .back {
width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 18px; color: var(--text-2); margin-left: -6px;
}
.topbar .back:active { background: #eef1f4; }
.topbar h1 { font-size: 16px; margin: 0; font-weight: 600; flex: 1; }
.topbar .right { font-size: 13px; color: var(--text-3); }
/* 底部 tabbar */
.tabbar {
position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
width: 100%; max-width: 430px; z-index: 60;
background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
border-top: 1px solid var(--line);
display: flex; padding: 6px 0 10px;
}
.tabbar a {
flex: 1; text-align: center; color: var(--text-3); font-size: 11px;
display: flex; flex-direction: column; align-items: center; gap: 2px;
text-decoration: none; padding: 2px 0;
}
.tabbar a .ico { font-size: 19px; line-height: 1.1; }
.tabbar a.active { color: var(--brand); font-weight: 600; }
/* ---------- 通用组件 ---------- */
.wrap { padding: 16px; }
.wrap-tight { padding: 12px 16px; }
.card {
background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px;
}
.card-pad0 { padding: 0; overflow: hidden; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
background: var(--brand); color: #fff; border-radius: 10px;
padding: 11px 18px; font-size: 15px; font-weight: 600;
transition: transform .12s, box-shadow .12s, opacity .12s;
text-decoration: none;
}
.btn:active { transform: scale(.975); }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }
.btn.ghost { background: var(--brand-light); color: var(--brand-dark); }
.btn.outline { background: #fff; color: var(--text); border: 1px solid var(--line); }
.btn.danger { background: var(--danger); }
.btn.warn { background: var(--warn); }
.btn.muted { background: #edf0f3; color: #7b8896; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
.tag {
display: inline-block; padding: 2px 8px; border-radius: 6px;
font-size: 11px; background: #eef1f4; color: var(--text-2); margin: 0 4px 4px 0;
white-space: nowrap;
}
.tag.brand { background: var(--brand-light); color: var(--brand-dark); }
.tag.overseas { background: #f0eefb; color: #6b5fc4; }
.tag.soft { background: #f3f6f8; color: var(--text-3); }
.pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.st-warn { background: var(--warn-bg); color: var(--warn); }
.st-info { background: var(--info-bg); color: var(--info); }
.st-primary { background: var(--brand-light); color: var(--brand-dark); }
.st-success { background: var(--success-bg); color: var(--success); }
.st-danger { background: var(--danger-bg); color: var(--danger); }
.st-muted { background: #eef1f4; color: #8b98a5; }
/* BOUNTY_STATUS.closed 用的是 st-ok，早期漏定义导致「已成交」标签没有底色 */
.st-ok { background: var(--success-bg); color: var(--success); }
.sec-title {
font-size: 15px; font-weight: 700; margin: 20px 16px 10px;
display: flex; align-items: center; justify-content: space-between;
}
.sec-title .more { font-size: 12px; color: var(--text-3); font-weight: 400; }
.muted { color: var(--text-2); }
.tiny { font-size: 12px; color: var(--text-3); }
.price { color: #e8532b; font-weight: 700; }
.price small { font-size: 12px; font-weight: 500; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; }
/* 头像 */
.avatar {
width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 700; font-size: 19px;
overflow: hidden; position: relative;
}
.avatar.lg { width: 64px; height: 64px; border-radius: 18px; font-size: 25px; }
/* ============================================================
* 网络头像（"真人感"头像）
* 纯 SVG data-URI 生成，不依赖任何外部图片 / 网络请求 ——
* 断网、file:// 直开、内网环境都能正常显示，仍然是 0 外链。
* .avatar img 与 .yt-ava img 共用一套填充规则。
* ============================================================ */
.avatar img,
.yt-ava img,
.mapchip .ma img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 28%;
display: block; border-radius: inherit;
pointer-events: none;
}
/* 头像右下角在线状态点（放在 img 之上，需 z-index） */
.avatar > .ava-dot {
position: absolute; right: -1px; bottom: -1px; z-index: 3;
width: 11px; height: 11px; border-radius: 50%;
background: #2aa06c; border: 2px solid #fff;
}
.avatar > .ava-dot.ava-dot-lg { width: 14px; height: 14px; }
/* 服务质保金标记：已缴纳的地陪，头像右下角一枚金色盾牌。
和「在线小绿点」区分开：绿点在下右，质保盾放在左下，两者可同时出现。 */
.avatar > .ava-dep,
.yt-ava > .ava-dep,
.mapchip .ma .ava-dep {
position: absolute; left: -2px; bottom: -2px; z-index: 3;
width: 17px; height: 17px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f6c453, #e0951f);
color: #7a4a05; font-size: 10px; font-style: normal; line-height: 1;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(180, 120, 10, .38);
}
.yt-ava > .ava-dep { width: 24px; height: 24px; font-size: 13px; left: -2px; bottom: 2px; }
.avatar.avatar-xs > .ava-dep { width: 14px; height: 14px; font-size: 8px; border-width: 1.5px; }
/* 名字后面的质保金小标签 */
.dep-tag {
display: inline-flex; align-items: center; gap: 2px;
background: linear-gradient(135deg, #fdf3d8, #f8e3ae);
color: #8a5a08; border: 1px solid #edcf88;
font-size: 11px; font-weight: 700; line-height: 1;
padding: 2.5px 6px 2.5px 4px; border-radius: 8px;
vertical-align: middle; white-space: nowrap;
}
.dep-tag i { font-style: normal; font-size: 10px; }
/* 名字下面单独一行的资质徽标行（列表卡 / 主页通用）：
名字独占一行放大，徽标换行缩小 —— 徽标是"佐证"，不该和名字抢宽度 */
.id-row {
display: flex; flex-wrap: wrap; align-items: center;
gap: 4px; margin-top: 4px; line-height: 1;
}
.id-row .rn-badge,
.id-row .dep-tag,
.id-row .face-badge {
font-size: 10px; font-weight: 600;
padding: 2px 5px; border-radius: 7px;
vertical-align: baseline;
}
/* 接单状态徽标在资质行里跟其它徽标同尺寸 */
.id-row .av { font-size: 10px; padding: 2px 6px; gap: 4px; }
.id-row .av .dot { width: 5px; height: 5px; }
.id-row .dep-tag { padding: 2px 5px 2px 3.5px; }
.id-row .rn-badge .rn-ico,
.id-row .face-badge .fb-ico,
.id-row .dep-tag i { font-size: 9px; }
/* 主页质保金说明条 */
.dep-bar {
display: flex; align-items: center; gap: 9px;
margin-top: 10px; padding: 9px 11px;
background: linear-gradient(135deg, #fdf7e6, #fbf0d3);
border: 1px solid #f0dcab; border-radius: 12px;
}
.dep-bar-i {
width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f6c453, #e0951f);
color: #fff; font-size: 15px;
box-shadow: 0 1px 5px rgba(180, 120, 10, .32);
}
.dep-bar-t { font-size: 13px; font-weight: 700; color: #8a5a08; }
.dep-bar-s { font-size: 11.5px; color: #a8813c; margin-top: 1px; line-height: 1.4; }
/* ============================================================
* 真人相似度（点头像打开）
* ------------------------------------------------------------
* 分档四色：高=绿 / 基本=蓝 / 差异=橙 / 低=红。
* 颜色统一走 CSS 变量 --fc，由 .lv-* 注入，环、字号、胶囊共用，
* 避免每个元素各写一遍颜色。
* ============================================================ */
/* 让头像「可点」：放大镜角标 + 轻微按压反馈 */
.ava-tap { position: relative; display: inline-flex; line-height: 0; cursor: pointer; }
/* 包在 .avatar / .yt-ava 里时必须撑满父级：img 的 width:100% 以它为基准，
不撑满会和「尺寸由内容决定」互相依赖，导致图片/角标塌陷或错位 */
.avatar > .ava-tap,
.yt-ava > .ava-tap { width: 100%; height: 100%; display: block; }
.ava-tap > .ava-zoom {
position: absolute; right: -3px; top: -3px; z-index: 4;
width: 19px; height: 19px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .94); border: 1px solid rgba(15, 35, 55, .1);
font-size: 9.5px; font-style: normal; line-height: 1;
box-shadow: 0 1px 4px rgba(15, 35, 55, .18);
transition: transform .18s ease;
}
.ava-tap:active > .ava-zoom { transform: scale(1.16); }
/* 大头像角标更大更醒目；小列表头像（overflow:hidden）内缩 1px 防裁切、缩小一号 */
.avatar.lg .ava-tap > .ava-zoom, .yt-ava .ava-tap > .ava-zoom { width: 24px; height: 24px; font-size: 12px; right: 0; top: 0; }
.avatar:not(.lg) .ava-tap > .ava-zoom { width: 16px; height: 16px; font-size: 8px; right: 1px; top: 1px; }
/* 名字旁 / 列表里的相似度胶囊 */
.face-badge {
display: inline-flex; align-items: center; gap: 3px;
--fc: #2b7fc4;
background: color-mix(in srgb, var(--fc) 12%, #fff);
color: var(--fc); border: 1px solid color-mix(in srgb, var(--fc) 34%, #fff);
font-size: 11px; font-weight: 700; line-height: 1;
padding: 3px 7px; border-radius: 8px;
vertical-align: middle; white-space: nowrap; cursor: pointer;
transition: transform .16s ease, background .16s ease;
}
.face-badge:active { transform: scale(.95); }
.face-badge .fb-ico { font-style: normal; font-size: 10px; }
.face-badge.lv-high { --fc: #1f9b6e; }
.face-badge.lv-good { --fc: #2b7fc4; }
.face-badge.lv-mid { --fc: #d9871f; }
.face-badge.lv-low { --fc: #d9534f; }
/* ---- 弹层 ---- */
.face-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.face-ava {
width: 58px; height: 58px; border-radius: 18px; flex: 0 0 auto;
overflow: hidden; position: relative;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 10px rgba(15, 35, 55, .16);
}
.face-ava img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.face-name { font-size: 17px; font-weight: 800; color: var(--text); }
.face-sub { font-size: 12px; color: var(--text-2); margin-top: 3px; }
/* 环形 + 结论并排 */
.face-gauge {
display: flex; align-items: center; gap: 16px;
padding: 14px; border-radius: 16px;
background: linear-gradient(160deg, #f7fafc, #eef3f7);
border: 1px solid var(--line);
}
.face-ring-wrap { position: relative; width: 108px; height: 108px; flex: 0 0 auto; }
.face-ring { display: block; }
.face-ring-num {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
line-height: 1;
}
.face-ring-num b { font-size: 27px; font-weight: 800; letter-spacing: -.5px; }
.face-ring-num b i { font-size: 14px; font-style: normal; font-weight: 700; margin-left: 1px; }
.face-ring-num span { font-size: 10px; color: var(--text-2); margin-top: 5px; }
.face-verdict { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.face-lv {
align-self: flex-start;
font-size: 13px; font-weight: 800; line-height: 1;
padding: 6px 10px; border-radius: 9px;
background: color-mix(in srgb, var(--fc) 14%, #fff);
color: var(--fc); border: 1px solid color-mix(in srgb, var(--fc) 36%, #fff);
--fc: #2b7fc4;
}
.face-lv.lv-high { --fc: #1f9b6e; }
.face-lv.lv-good { --fc: #2b7fc4; }
.face-lv.lv-mid { --fc: #d9871f; }
.face-lv.lv-low { --fc: #d9534f; }
.face-tip { font-size: 12px; color: var(--text); line-height: 1.6; }
.face-meta { font-size: 11px; color: var(--text-3, #9aa6b2); }
.face-warn {
margin-top: 12px; padding: 10px 12px; border-radius: 12px;
background: #fdf3e3; border: 1px solid #f0d6a8;
color: #8a5a08; font-size: 12px; line-height: 1.7;
}
.face-sec-t { font-size: 12.5px; font-weight: 700; color: var(--text-2); margin: 16px 0 8px; }
.face-checks { display: flex; flex-direction: column; gap: 8px; }
.face-chk {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px; border-radius: 12px;
background: #f7fafc; border: 1px solid var(--line);
}
.face-chk .fc-i {
width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800; font-style: normal; color: #fff;
}
.face-chk.ok .fc-i { background: #1f9b6e; }
.face-chk.no .fc-i { background: #d9871f; }
.face-chk .fc-t { font-size: 13px; font-weight: 600; }
.face-chk .fc-d { font-size: 11px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.face-chk .fc-s { font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.face-chk.ok .fc-s { color: #1f9b6e; }
.face-chk.no .fc-s { color: #d9871f; }
.face-notice { display: flex; flex-direction: column; gap: 6px; }
.face-notice .fn-row { display: flex; gap: 6px; font-size: 11.5px; color: var(--text-2); line-height: 1.6; }
.face-notice .fn-row i { font-style: normal; color: var(--brand); flex: 0 0 auto; }
/* 审核人员写的核验备注（游客可见，用于解释扣分原因） */
.face-remark {
padding: 10px 12px; border-radius: 12px;
background: #f7fafc; border: 1px dashed var(--line);
font-size: 11.5px; color: var(--text-2); line-height: 1.7;
}
/* ---------- 实名认证（地陪端 / 游客端 / 后台） ---------- */
/* 名字旁的「已实名认证」标识：蓝色实心，语义=平台已核验过身份 */
.rn-badge {
display: inline-flex; align-items: center; gap: 3px;
padding: 1px 7px 1px 5px; border-radius: 999px;
font-size: 10.5px; font-weight: 700; line-height: 1.6;
color: #fff; background: linear-gradient(135deg, #3d8ee0, #2b6fc4);
white-space: nowrap; cursor: pointer; vertical-align: 1px;
box-shadow: 0 1px 3px rgba(43,111,196,.28);
}
.rn-badge .rn-ico { font-style: normal; font-size: 9px; }
/* 深色（封面）背景上的版本：白色描边更清晰 */
.rn-badge.on-dark { background: rgba(255,255,255,.94); color: #2b6fc4; box-shadow: none; }
/* 只给图标：列表右角等窄空间 */
.rn-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
font-style: normal; font-size: 9.5px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, #3d8ee0, #2b6fc4); cursor: pointer;
}
/* 弹出层里的认证状态条 */
.rn-hero {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; border-radius: 14px; margin: 12px 0 4px;
background: linear-gradient(135deg, #eef6ff, #e2efff);
border: 1px solid #cfe3fb;
}
.rn-hero-i {
width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-style: normal; font-size: 17px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, #3d8ee0, #2b6fc4);
}
.rn-hero-t { font-size: 14px; font-weight: 700; color: #1d5fa8; }
.rn-hero-s { font-size: 11.5px; color: #4b7ba8; margin-top: 2px; }
/* 证件信息：号码打码展示 */
.rn-fields {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;
}
.rn-f {
display: flex; flex-direction: column; gap: 3px;
padding: 9px 11px; border-radius: 11px;
background: #f7fafc; border: 1px solid var(--line);
}
.rn-f span { font-size: 10.5px; color: var(--text-2); }
.rn-f b { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; }
/* 关于 Tab 卡片 */
.rn-about { border-left: 3px solid #2b6fc4; }
/* 个人主页名字下方的实名说明行 */
.rn-line {
display: flex; align-items: center; gap: 5px;
margin-top: 8px; font-size: 11.5px; color: #2b6fc4; font-weight: 600;
}
.rn-line i {
font-style: normal; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, #3d8ee0, #2b6fc4);
}
/* 后台：状态胶囊（沿用 .pill 体系，额外给实名认证专用色） */
.rn-pill { display: inline-flex; align-items: center; gap: 4px; }
/* 后台：证件预览卡（模拟上传件） */
.rn-doc {
display: flex; gap: 10px; align-items: center;
padding: 10px; border-radius: 12px; margin-top: 10px;
background: #f7fafc; border: 1px dashed var(--line);
}
.rn-doc-i {
width: 52px; height: 34px; flex: 0 0 auto; border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: 18px; background: linear-gradient(135deg,#dbe7f5,#c5d8ee);
}
.rn-doc-t { font-size: 12px; font-weight: 600; }
.rn-doc-d { font-size: 11px; color: var(--text-2); margin-top: 2px; }
/* 认证待办提示条（后台） */
.rn-todo {
display: flex; align-items: center; gap: 10px;
padding: 11px 13px; border-radius: 13px; margin-bottom: 12px;
background: #fff7e8; border: 1px solid #f5dfb5;
}
.rn-todo-i { font-size: 18px; }
.rn-todo-t { font-size: 13px; font-weight: 700; }
.rn-todo-s { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
/* ---------- 支付 / 资金流水（后台） ---------- */
.pay-kpi { display: flex; gap: 10px; flex-wrap: wrap; }
.pay-kpi .k {
flex: 1 1 calc(50% - 5px); background: #fff; border-radius: 14px;
padding: 12px 13px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.pay-kpi .k .t { font-size: 11.5px; color: var(--text-3); }
.pay-kpi .k .v { font-size: 19px; font-weight: 700; margin-top: 4px; }
.pay-kpi .k .v.in { color: #1f9b8e; }
.pay-kpi .k .v.out { color: #e8532b; }
.flow-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.flow-i {
width: 34px; height: 34px; border-radius: 10px; flex: none;
display: flex; align-items: center; justify-content: center; font-size: 16px;
background: #f2f3f5;
}
.flow-i.in { background: #e8f7f4; }
.flow-i.out { background: #fdeee9; }
.flow-m { flex: 1; min-width: 0; }
.flow-t { font-size: 13.5px; font-weight: 600; }
.flow-s { font-size: 11.5px; color: var(--text-3); margin-top: 3px; word-break: break-all; }
.flow-amt { font-size: 14.5px; font-weight: 700; flex: none; }
.flow-amt.in { color: #1f9b8e; }
.flow-amt.out { color: #e8532b; }
.chip-bar { display: flex; gap: 8px; flex-wrap: wrap; }
/* ---------- 关注收藏（星标按钮 / 关注列表 / 备注标签） ---------- */
/* 星标按钮：pill（列表卡） / icon（地图卡） / dark（主页深色底） / block（整行） */
.fb {
display: inline-flex; align-items: center; gap: 4px;
border: 0; cursor: pointer; font-family: inherit;
background: rgba(255,255,255,.16); color: #fff;
border-radius: 999px; padding: 5px 11px; font-size: 12px;
line-height: 1.2; white-space: nowrap;
transition: transform .16s, background .16s, color .16s, box-shadow .16s;
-webkit-tap-highlight-color: transparent;
}
.fb:active { transform: scale(.94); }
.fb-i { font-style: normal; font-size: 12px; line-height: 1; }
.fb-pill {
background: #f2f3f5; color: #4b5563; border: 1px solid #e6e8eb;
}
.fb-pill.on { background: #fff4e5; color: #b45309; border-color: #ffd8a8; }
.fb-icon {
width: 30px; height: 30px; padding: 0; justify-content: center;
background: rgba(255,255,255,.9); color: #6b7280; box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.fb-icon .fb-i { font-size: 14px; }
.fb-icon.on { background: #ffedd5; color: #d97706; }
.fb-dark {
background: rgba(255,255,255,.18); color: #fff;
backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.28);
}
.fb-dark.on { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.fb-block {
display: flex; width: 100%; justify-content: center;
background: #f2f3f5; color: #374151; border: 1px solid #e6e8eb;
padding: 10px; font-size: 13px; border-radius: 12px;
}
.fb-block.on { background: #fff4e5; color: #b45309; border-color: #ffd8a8; }
/* 关注备注面板 */
.fs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fs-ava {
width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
background: #eceef1; flex: none;
}
.fs-t { font-size: 15px; font-weight: 600; color: #111827; }
.fs-t small { display: block; font-size: 12px; font-weight: 400; color: #6b7280; margin-top: 3px; }
.fs-sec { font-size: 12px; color: #6b7280; margin: 14px 0 8px; }
.fs-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-tag {
border: 1px solid #e6e8eb; background: #fff; color: #4b5563;
border-radius: 999px; padding: 7px 13px; font-size: 12.5px; cursor: pointer;
font-family: inherit; transition: .16s; -webkit-tap-highlight-color: transparent;
}
.fs-tag:active { transform: scale(.95); }
.fs-tag.on { background: #111827; color: #fff; border-color: #111827; }
.fs-note-box textarea {
width: 100%; box-sizing: border-box; border: 1px solid #e6e8eb; border-radius: 12px;
padding: 10px 12px; font-family: inherit; font-size: 13px; color: #111827;
resize: none; background: #fafbfc; outline: none;
}
.fs-note-box textarea:focus { border-color: #c7ccd1; background: #fff; }
.fs-note-cnt { font-size: 11px; color: #9ca3af; text-align: right; margin-top: 5px; }
.fs-btns { display: flex; gap: 10px; margin-top: 16px; }
.fs-btns .btn { flex: 1; }
.fs-tip { font-size: 11.5px; color: #9ca3af; line-height: 1.7; margin-top: 12px; }
/* 关注列表卡片 */
.fs-card {
background: #fff; border-radius: 16px; padding: 13px 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.04);
margin-bottom: 12px;
}
.fs-main { display: flex; gap: 12px; text-decoration: none; color: inherit; }
.fs-main:active { opacity: .82; }
.fs-card .fs-ava { width: 52px; height: 52px; }
.fs-body { flex: 1; min-width: 0; }
.fs-name {
font-size: 15px; font-weight: 600; color: #111827;
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.fs-meta {
font-size: 12px; color: #6b7280; margin-top: 5px;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.fs-dot { color: #d1d5db; }
.fs-rate { color: #f59e0b; font-weight: 600; }
.fs-face { color: #2563eb; }
.fs-go { color: #9ca3af; font-size: 16px; align-self: center; flex: none; }
.fs-note {
margin-top: 9px; background: #fafbfc; border-left: 3px solid #ffd8a8;
border-radius: 0 8px 8px 0; padding: 8px 10px; font-size: 12.5px; color: #4b5563;
line-height: 1.6;
}
.fs-foot {
display: flex; align-items: center; gap: 8px;
margin-top: 11px; padding-top: 10px; border-top: 1px solid #f2f3f5;
}
.fs-chip {
font-size: 11.5px; border-radius: 999px; padding: 3px 9px;
background: #f2f3f5; color: #6b7280;
}
.ft-want { background: #eef2ff; color: #4338ca; }
.ft-booked { background: #ecfdf5; color: #047857; }
.ft-repeat { background: #fff7ed; color: #c2410c; }
.ft-ref { background: #f0f9ff; color: #0369a1; }
.fs-none { background: #f9fafb; color: #9ca3af; }
.fs-at { font-size: 11.5px; color: #9ca3af; margin-left: auto; }
.fs-mini {
border: 0; background: transparent; color: #6b7280; font-size: 12px;
cursor: pointer; font-family: inherit; padding: 4px 6px; border-radius: 8px;
}
.fs-mini:active { background: #f2f3f5; }
.fs-mini.danger { color: #dc2626; }
/* 我的关注 顶部统计条 */
.fs-bar {
display: flex; align-items: center; gap: 12px;
background: linear-gradient(135deg, #111827, #374151);
border-radius: 16px; padding: 15px 16px; margin-bottom: 14px; color: #fff;
}
.fs-bar-i { font-size: 22px; flex: none; }
.fs-bar-t { font-size: 14.5px; font-weight: 600; }
.fs-bar-t b { font-size: 17px; }
.fs-bar-s { font-size: 12px; opacity: .72; margin-top: 3px; }
/* 收藏筛选条 */
.fs-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.fs-filters::-webkit-scrollbar { display: none; }
.fs-filter {
flex: none; border: 1px solid #e6e8eb; background: #fff; color: #4b5563;
border-radius: 999px; padding: 7px 14px; font-size: 12.5px; cursor: pointer;
font-family: inherit; white-space: nowrap; transition: .16s;
}
.fs-filter.on { background: #111827; color: #fff; border-color: #111827; }
.fs-empty { text-align: center; padding: 44px 20px; }
.fs-empty-i { font-size: 40px; }
.fs-empty-t { font-size: 14.5px; font-weight: 600; color: #374151; margin-top: 12px; }
.fs-empty-s { font-size: 12.5px; color: #9ca3af; margin-top: 8px; line-height: 1.8; }
/* ---------- 后台：相似度设置 ---------- */
/* 顶部概况条 */
.face-admin-bar {
display: flex; align-items: center; gap: 12px;
background: #fff; border: 1px solid var(--line); border-radius: 14px;
padding: 12px 14px; margin-bottom: 14px;
}
.face-admin-bar .fab-i {
width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #e8f4ff, #d6e9fb); font-size: 18px;
}
.face-admin-bar .fab-t { font-size: 13.5px; font-weight: 700; }
.face-admin-bar .fab-s { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.face-admin-bar .fab-s b { color: var(--text); }
/* 推荐档位快捷按钮 */
.face-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.face-presets .chip { font-size: 12px; }
.face-presets .chip b { margin-right: 3px; }
/* 逐项核验勾选 */
.face-chk-edit { display: flex; flex-direction: column; gap: 8px; }
.fce-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 9px 11px; border-radius: 12px;
background: #f7fafc; border: 1px solid var(--line); cursor: pointer;
}
.fce-row input { margin-top: 2px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--brand); }
.fce-t { font-size: 13px; font-weight: 600; }
.fce-d { font-size: 11px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
/* 游客端预览 */
.face-preview {
padding: 12px; border-radius: 12px;
background: linear-gradient(160deg, #f7fafc, #eef3f7); border: 1px solid var(--line);
}
/* ============================================================
* 注册页 · 服务质保金选择
* ============================================================ */
.dep-options { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.dep-opt {
border: 1.5px solid var(--line); border-radius: 13px;
padding: 12px 13px; cursor: pointer; transition: .16s;
background: #fff;
}
.dep-opt:active { transform: scale(.993); }
.dep-opt.on {
border-color: #e0a83a; background: linear-gradient(135deg, #fffdf6, #fdf6e4);
box-shadow: 0 0 0 3px rgba(224, 168, 58, .13);
}
.dep-opt-hd { display: flex; align-items: center; gap: 10px; }
.dep-opt-ico {
width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f6c453, #e0951f);
font-size: 14px; color: #fff;
}
.dep-opt-ico.off { background: #eef1f4; color: #a9b4bf; }
.dep-opt-name { font-size: 14px; font-weight: 700; }
.dep-opt-desc { font-size: 11.5px; color: var(--text-3); margin-top: 1px; line-height: 1.45; }
.dep-opt-price { font-size: 15px; font-weight: 700; color: #c47a11; flex: 0 0 auto; }
.dep-opt.on .dep-opt-price { color: #b06d05; }
.dep-opt-perks { margin-top: 9px; display: flex; flex-direction: column; gap: 4px; }
.dep-perk { font-size: 12px; color: var(--text-2); line-height: 1.55; }
.dep-opt.on .dep-perk { color: #7d5a1c; }
.dep-opt-note {
margin-top: 9px; padding-top: 8px; border-top: 1px dashed #edd9ac;
font-size: 11.5px; color: #a8813c; line-height: 1.6;
}
/* 浅色头像需要在深色底上有一圈描边，避免和背景糊在一起 */
.avatar.has-photo,
.yt-ava.has-photo { box-shadow: 0 0 0 1px rgba(0, 0, 0, .06) inset; }
/* 搜索框 */
.search {
display: flex; align-items: center; gap: 8px;
background: #fff; border-radius: 12px; padding: 10px 14px;
box-shadow: var(--shadow); border: 1px solid transparent;
}
.search input { border: none; outline: none; flex: 1; background: none; }
.search input::placeholder { color: var(--text-3); }
/* 表单 */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
.field label .req { color: var(--danger); }
.input, .select, .textarea {
width: 100%; padding: 11px 12px; border: 1px solid var(--line);
border-radius: 10px; outline: none; background: #fff; transition: border-color .15s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); }
.textarea { resize: vertical; min-height: 78px; }
.hint { font-size: 12px; color: var(--text-3); margin-top: 5px; }
/* 空状态 */
.empty { text-align: center; padding: 56px 20px; color: var(--text-3); }
.empty .ico { font-size: 40px; opacity: .35; margin-bottom: 10px; }
/* 列表项 */
.list-item {
background: #fff; border-radius: 12px; padding: 13px 14px;
margin-bottom: 10px; box-shadow: var(--shadow);
}
.list-item.clickable:active { background: #fafbfc; }
/* 步骤条 */
.steps { display: flex; padding: 6px 0; }
.steps .step { flex: 1; text-align: center; position: relative; font-size: 11px; color: var(--text-3); }
.steps .step .dot {
width: 10px; height: 10px; border-radius: 50%; background: #d7dee5;
margin: 0 auto 5px;
}
.steps .step.done .dot { background: var(--brand); }
.steps .step.done { color: var(--brand-dark); font-weight: 600; }
.steps .step::before {
content: ''; position: absolute; top: 4px; left: -50%; width: 100%;
height: 2px; background: #e6ebf0; z-index: -1;
}
.steps .step:first-child::before { display: none; }
/* 时间轴 */
.timeline { list-style: none; padding: 0; margin: 8px 0 0; }
.timeline li { position: relative; padding: 0 0 14px 20px; font-size: 13px; color: var(--text-2); }
.timeline li::before {
content: ''; position: absolute; left: 4px; top: 7px;
width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.timeline li::after {
content: ''; position: absolute; left: 7px; top: 16px; bottom: 0;
width: 1px; background: var(--line);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline li .t { font-size: 12px; color: var(--text-3); }
/* 评分星 */
.stars { color: #ffab2e; font-size: 12px; letter-spacing: 1px; }
/* ---------- 档期状态（往约式） ---------- */
.av {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;
white-space: nowrap;
}
.av .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.av-free { background: #e8f7f0; color: #1f8c5c; }
.av-free .dot { background: #2aa06c; animation: avpulse 1.8s infinite; }
.av-busy { background: #fdf3e5; color: #b8741f; }
.av-busy .dot { background: #e8912b; }
.av-off { background: #f0f3f6; color: #8494a3; }
.av-off .dot { background: #96a3b0; }
@keyframes avpulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(42,160,108,.5); }
50% { box-shadow: 0 0 0 4px rgba(42,160,108,0); }
}
/* 地陪端「接单状态」三段切换（可接单 / 接单中 / 休息中） */
.av-seg {
display: flex; gap: 4px; padding: 4px;
background: #f2f4f6; border-radius: 14px; margin-top: 12px;
}
.av-seg button {
flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 4px; border: 1px solid transparent; border-radius: 11px;
background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600;
font-family: inherit; line-height: 1; transition: background .16s, color .16s, box-shadow .16s;
}
.av-seg button i {
width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; opacity: .55;
}
.av-seg button.on {
background: #fff; color: var(--text-1); box-shadow: 0 1px 3px rgba(20,32,46,.12);
border-color: rgba(20,32,46,.06);
}
.av-seg button.on i { opacity: 1; }
.av-seg button:disabled { opacity: .45; }
.av-seg-note { margin-top: 9px; font-size: 12px; line-height: 1.7; color: var(--text-3); }
.av-seg-note b { color: var(--text-2); font-weight: 600; }
/* 档期选择条 */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot {
border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px;
text-align: center; background: #fff; font-size: 12px; line-height: 1.35;
transition: all .15s; cursor: pointer;
}
.slot .d { font-weight: 600; font-size: 13px; }
.slot .s { font-size: 10.5px; color: var(--text-3); }
.slot.on { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.slot.on .s { color: var(--brand-dark); }
.slot.dis { opacity: .45; background: #f7f9fa; }
.slot.dis .s { color: #b8c3cd; }
/* ---------- 套餐卡（往约式） ---------- */
.pkg {
border: 1px solid var(--line); border-radius: 12px; padding: 13px;
margin-bottom: 10px; background: #fff; position: relative;
transition: all .15s;
}
.pkg.on { border-color: var(--brand); background: #f7fdfb; box-shadow: 0 0 0 2px rgba(31,155,142,.12); }
/* 未开通的支付渠道：压暗 + 禁止点选 */
.pkg.dis { opacity: .55; cursor: not-allowed; }
.pkg.dis .pn { color: var(--text-3); }
.pkg .hot {
position: absolute; top: -8px; left: 12px; background: #e8532b; color: #fff;
font-size: 10px; padding: 2px 7px; border-radius: 6px; font-weight: 600;
}
.pkg .pn { font-weight: 600; font-size: 14.5px; }
.pkg .pd { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.55; }
.pkg .pp { color: #e8532b; font-weight: 700; font-size: 16px; flex: 0 0 auto; }
.pkg .pmeta { font-size: 11px; color: var(--text-3); margin-top: 6px; }
.pkg .radio {
width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #ccd6e0;
flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
}
.pkg.on .radio { border-color: var(--brand); background: var(--brand); }
.pkg.on .radio::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
/* ---------- 地图视图（往约式） ---------- */
.mapbox {
position: relative; height: 460px; border-radius: 14px; overflow: hidden;
background: linear-gradient(160deg,#e8f2f8 0%,#dcecf5 40%,#e6f4ef 100%);
box-shadow: var(--shadow); border: 1px solid #d9e6ef;
}
.mapbox .grid-line { position: absolute; background: rgba(150,180,205,.18); }
.maproad {
position: absolute; background: rgba(255,255,255,.75); border-radius: 2px;
box-shadow: 0 0 0 1px rgba(190,210,225,.45);
}
.mapchip {
position: absolute; transform: translate(-50%,-100%);
background: #fff; border-radius: 20px; padding: 4px 9px 4px 4px;
box-shadow: 0 3px 10px rgba(20,60,90,.18); display: flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer;
border: 1.5px solid transparent; transition: transform .15s;
}
.mapchip:active { transform: translate(-50%,-100%) scale(.95); }
.mapchip .ma {
width: 22px; height: 22px; border-radius: 50%; color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
overflow: hidden;
}
.mapchip.sel { border-color: var(--brand); z-index: 20; }
.mapchip.ov { opacity: .55; }
.ma-free { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #2aa06c; }
.ma-busy { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #e8912b; }
.ma-off { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #b8c3cd; }
.ma-overseas { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #b8aee0; }
.mapme {
position: absolute; width: 14px; height: 14px; border-radius: 50%;
background: #3b7fd4; border: 2.5px solid #fff; box-shadow: 0 0 0 3px rgba(59,127,212,.25);
transform: translate(-50%,-50%);
}
.maplabel {
position: absolute; font-size: 11px; color: #7e93a6; font-weight: 600;
letter-spacing: .3px; pointer-events: none;
}
.map-legend {
position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.94);
border-radius: 10px; padding: 8px 11px; font-size: 11px; color: var(--text-2);
box-shadow: var(--shadow); line-height: 1.9;
}
.map-legend .lg { display: flex; align-items: center; gap: 5px; }
.map-legend .lg i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.map-card {
position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 30;
background: #fff; border-radius: 14px; padding: 12px; box-shadow: var(--shadow-lg);
display: none;
}
.map-card.show { display: block; }
/* ---------- 地图视图 · 真实定位（geo.js） ---------- */
.geo-bar {
display: flex; align-items: center; gap: 9px;
background: #fff; border: 1px solid #e6edf3; border-radius: 14px;
padding: 10px 12px; box-shadow: var(--shadow);
}
.geo-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #b8c3cd; }
.geo-dot.on { background: #2aa06c; box-shadow: 0 0 0 3px rgba(42,160,108,.16); }
.geo-dot.wait { background: #e8912b; box-shadow: 0 0 0 3px rgba(232,145,43,.16); animation: geoPulse 1s infinite; }
.geo-dot.mid { background: #2f94a8; box-shadow: 0 0 0 3px rgba(47,148,168,.16); }
.geo-dot.off { background: #b8c3cd; }
@keyframes geoPulse { 50% { opacity: .35; } }
.geo-txt { flex: 1; min-width: 0; }
.geo-main { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-sub { font-size: 10.5px; color: var(--text-3); margin-top: 2px; letter-spacing: .3px; }
.geo-bar .btn.sm { flex: none; }
.dp-map-wrap { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.dp-map { width: 100%; height: 340px; background: #eef3f7; }
.dp-map-attr { font-size: 10px; color: var(--text-3); text-align: right; margin-top: 5px; padding-right: 2px; }
.map-setup {
background: #fff; border: 1px dashed #d7e2ea; border-radius: 16px;
padding: 20px 16px; text-align: center;
}
.ms-ico { font-size: 26px; line-height: 1.2; }
.ms-t { font-size: 14px; font-weight: 700; margin-top: 6px; }
.ms-d { font-size: 12px; color: var(--text-2); line-height: 1.7; margin-top: 6px; }
.ms-step { display: flex; gap: 9px; margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
.ms-step b {
flex: none; width: 20px; height: 20px; border-radius: 50%;
background: var(--brand); color: #fff; font-size: 11px;
display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.geo-row {
display: flex; gap: 10px; align-items: center;
background: #fff; border: 1px solid #eef2f6; border-radius: 14px;
padding: 10px; margin-bottom: 8px; color: inherit;
}
.geo-row:active { transform: scale(.995); }
.geo-row .avatar { width: 46px; height: 46px; border-radius: 14px; }
.gr-n { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gr-r { text-align: right; flex: none; }
.gr-km { font-size: 12px; font-weight: 700; color: var(--brand); margin-bottom: 2px; }
.gr-r .price { font-size: 13px; }
/* 段控（列表/地图） */
.seg {
display: inline-flex; background: #eaeff4; border-radius: 9px; padding: 2.5px;
}
.seg button {
padding: 5px 14px; border-radius: 7px; font-size: 12.5px; color: var(--text-2);
font-weight: 600;
}
.seg button.on { background: #fff; color: var(--brand-dark); box-shadow: 0 1px 4px rgba(0,0,0,.09); }
/* 保障承诺条 */
.guars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.guar {
display: flex; gap: 8px; align-items: flex-start;
background: #f8fbfd; border: 1px solid #e5eef5; border-radius: 10px; padding: 9px 10px;
}
.guar .gi { font-size: 15px; flex: 0 0 auto; line-height: 1.3; }
.guar .gt { font-size: 12px; font-weight: 600; }
.guar .gd { font-size: 11px; color: var(--text-3); line-height: 1.5; margin-top: 1px; }
/* 担保横幅（下单页头部） */
.safe-banner {
background: linear-gradient(135deg, #eaf7f4, #dff2ee);
border: 1px solid #c9e9e2; border-radius: 12px; padding: 11px 13px;
display: flex; gap: 9px; align-items: center;
}
.safe-banner .si { font-size: 19px; }
.safe-banner .st { font-size: 13px; font-weight: 700; color: #16786d; }
.safe-banner .sd { font-size: 11.5px; color: #4a8079; margin-top: 1px; }
/* ============================================================
* 作品素材：展示图片 + 短视频
* ============================================================ */
/* 图片九宫格 */
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mgrid > div { min-width: 0; }
/* 单张图片 */
.mph {
position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: transform .15s;
}
.mph:active { transform: scale(.97); }
.mph .mph-e { font-size: 26px; }
.mph .mph-b {
position: absolute; left: 5px; top: 5px; background: rgba(0,0,0,.55); color: #fff;
font-size: 9.5px; padding: 1.5px 6px; border-radius: 5px; font-weight: 600;
backdrop-filter: blur(4px);
}
.mph .mph-x {
position: absolute; right: 4px; top: 4px; width: 19px; height: 19px; border-radius: 50%;
background: rgba(0,0,0,.5); color: #fff; font-size: 11px; line-height: 1;
display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.mph .mph-x:active { background: var(--danger); }
/* 添加图片占位块 */
.mph-add {
border: 1.5px dashed #ccd8e2; background: #fafcfd; cursor: pointer;
flex-direction: column; gap: 3px;
}
.mph-add:active { border-color: var(--brand); background: var(--brand-light); }
.mph-add .mph-e { font-size: 20px; color: var(--text-3); }
.mph-add .mph-l { font-size: 10px; color: var(--text-3); }
.mph-wide {
aspect-ratio: auto; padding: 24px 12px; border-radius: 12px; width: 100%;
}
/* 视频封面 */
.mvd {
position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px;
overflow: hidden; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: transform .15s;
}
.mvd:active { transform: scale(.985); }
.mvd .mvd-e { font-size: 40px; }
.mvd .mvd-play {
position: absolute; width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,.9); color: #1a2430; font-size: 16px;
display: flex; align-items: center; justify-content: center; padding-left: 3px;
box-shadow: 0 3px 14px rgba(0,0,0,.22);
}
.mvd .mvd-sec {
position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,.55); color: #fff;
font-size: 10px; padding: 2px 7px; border-radius: 6px; font-weight: 600;
backdrop-filter: blur(4px);
}
.mvd .mvd-t {
position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
color: #fff; font-size: 12px; font-weight: 600;
}
.mvd-add {
border: 1.5px dashed #ccd8e2; background: #fafcfd; border-radius: 12px;
padding: 26px 12px; text-align: center; cursor: pointer;
}
.mvd-add:active { border-color: var(--brand); background: var(--brand-light); }
/* 灯箱大图 */
.gview {
width: 100%; aspect-ratio: 4 / 3; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
}
.gview .gview-e { font-size: 74px; }
/* ---------- 通用图片查看器（灯箱，可左右滑动） ----------
手指在图片上左右滑 = 原生横向滚动 + scroll-snap，不做 JS 手势模拟，
所以 iOS/安卓的惯性滑动、回弹都是系统原生的，手感不会假。 */
.dpv-top {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding-bottom: 10px;
}
.dpv-t { font-weight: 600; font-size: 15px; }
.dpv-t .tiny { font-weight: 400; margin-left: 4px; }
.dpv-stage {
display: flex; overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none; border-radius: 14px; background: #0f141a;
}
.dpv-stage::-webkit-scrollbar { display: none; }
.dpv-slide {
flex: 0 0 100%; width: 100%;
scroll-snap-align: center; scroll-snap-stop: always;
aspect-ratio: auto; height: min(50vh, 420px);
border-radius: 0; overflow: hidden;
}
.dpv-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dpv-thumbs {
display: flex; gap: 6px; overflow-x: auto;
margin-top: 10px; padding-bottom: 2px; scrollbar-width: none;
}
.dpv-thumbs::-webkit-scrollbar { display: none; }
.dpv-thumb {
flex: 0 0 auto; width: 50px; height: 50px; padding: 0;
border-radius: 9px; overflow: hidden; cursor: pointer;
border: 2px solid transparent; background: #eef1f5;
display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.dpv-thumb.on { border-color: var(--brand); }
.dpv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dpv-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-top: 8px;
}
.dpv-cap { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpv-hint { flex: 0 0 auto; color: var(--text-3); }
/* 模拟视频播放器 */
.vplayer {
position: relative; width: 100%; border-radius: 12px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.vplayer .vplayer-e { font-size: 52px; }
.vplayer .vplayer-play {
position: absolute; width: 52px; height: 52px; border-radius: 50%;
background: rgba(255,255,255,.92); color: #1a2430; font-size: 18px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 18px rgba(0,0,0,.25); cursor: pointer; user-select: none;
}
.vplayer .vplayer-bar {
position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.35);
}
.vplayer .vplayer-bar i {
display: block; height: 100%; width: 0; background: var(--brand); transition: width .1s linear;
}
/* 场景模板选择网格 */
.kits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kit { cursor: pointer; text-align: center; position: relative; }
.kit .kit-v {
aspect-ratio: 1 / 1; border-radius: 10px; display: flex; align-items: center;
justify-content: center; font-size: 22px; border: 2px solid transparent; transition: all .15s;
}
.kit .kit-l {
font-size: 10px; color: var(--text-3); margin-top: 4px; line-height: 1.35;
}
.kit .kit-tick {
position: absolute; right: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%;
background: var(--brand); color: #fff; font-size: 10px; font-weight: 700;
display: none; align-items: center; justify-content: center;
box-shadow: 0 0 0 2px #fff;
}
.kit.on .kit-v { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,155,142,.15); }
.kit.on .kit-tick { display: flex; }
.kit.on .kit-l { color: var(--brand-dark); font-weight: 600; }
/* 进度条 */
.pbar { height: 6px; background: #eef2f6; border-radius: 4px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, #2aa79a, #46c2b0); border-radius: 4px; transition: width .35s; }
/* 素材完整度徽标（列表页小图标） */
.mat-dot {
display: inline-flex; align-items: center; gap: 3px; font-size: 10px;
color: #5a6a7a; background: #f0f4f8; padding: 1.5px 6px; border-radius: 6px;
}
/* 列表卡片里的作品缩略条 */
.lthumb { display: flex; gap: 5px; margin-top: 8px; }
.lthumb .lt {
position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 3;
border-radius: 8px; display: flex; align-items: center; justify-content: center;
font-size: 17px; overflow: hidden;
}
.lthumb .lt-v { flex: 0 0 74px; cursor: pointer; }
.lthumb .lt-play {
position: absolute; width: 22px; height: 22px; border-radius: 50%;
background: rgba(255,255,255,.9); color: #1a2430; font-size: 9px;
display: flex; align-items: center; justify-content: center; padding-left: 1.5px;
font-style: normal;
}
.lthumb .lt-sec {
position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.55); color: #fff;
font-size: 8.5px; padding: 0.5px 4px; border-radius: 4px; font-style: normal; font-weight: 600;
}
.lthumb .lt-more {
position: absolute; inset: 0; background: rgba(0,0,0,.42); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600; font-style: normal;
}
/* ---------- 聊天（订单内） ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 82%; }
.msg.me { margin-left: auto; flex-direction: row-reverse; }
.msg .mb {
background: #fff; border-radius: 12px; padding: 9px 12px; font-size: 13px;
line-height: 1.55; box-shadow: var(--shadow); border-top-left-radius: 3px;
word-break: break-word;
}
.msg.me .mb { background: var(--brand); color: #fff; border-top-left-radius: 12px; border-top-right-radius: 3px; }
.msg .mt { font-size: 10.5px; color: var(--text-3); flex: 0 0 auto; padding-bottom: 2px; }
.chat-input {
display: flex; gap: 8px; align-items: center; padding: 10px 16px;
border-top: 1px solid var(--line); background: #fff;
}
.chat-input input {
flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 9px 15px; outline: none;
}
.chat-input input:focus { border-color: var(--brand); }
.chat-input button {
background: var(--brand); color: #fff; border-radius: 20px; padding: 9px 17px;
font-weight: 600; font-size: 13.5px; flex: 0 0 auto;
}
.chat-quick { display: flex; gap: 7px; overflow-x: auto; padding: 8px 16px 2px; scrollbar-width: none; }
.chat-quick::-webkit-scrollbar { display: none; }
/* ---------- 游客 ↔ 地陪 私信（本机存储，不上云） ---------- */
.dm-item {
display: flex; gap: 10px; align-items: center;
padding: 12px 0; border-bottom: 1px solid var(--line);
}
.dm-item:last-child { border-bottom: none; }
.dm-ava {
width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #e8eef3; color: #57697a; font-weight: 700; font-size: 16px;
overflow: hidden;
}
.dm-ava img { width: 100%; height: 100%; object-fit: cover; }
.dm-main { flex: 1 1 0; min-width: 0; }
.dm-name { font-weight: 600; font-size: 14px; }
.dm-last {
font-size: 12px; color: var(--text-3); margin-top: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-meta { flex: 0 0 auto; text-align: right; align-self: flex-start; padding-top: 2px; }
.dm-time { font-size: 10.5px; color: var(--text-3); }
.dm-dot {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; margin-top: 6px;
border-radius: 9px; background: #e8532b; color: #fff;
font-size: 11px; font-weight: 700;
}
.dm-chat { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 8px; }
.dm-scroll { max-height: 52vh; overflow-y: auto; }
.dm-bar {
display: flex; gap: 8px; align-items: center;
padding: 10px 0 2px; margin-top: 8px;
border-top: 1px solid var(--line);
}
.dm-bar input {
flex: 1; min-width: 0; border: 1px solid var(--line);
border-radius: 20px; padding: 10px 15px; outline: none;
font-size: 14px; font-family: inherit; background: #fff;
}
.dm-bar input:focus { border-color: var(--brand); }
.dm-bar button {
flex: 0 0 auto; background: var(--brand); color: #fff;
border-radius: 20px; padding: 10px 18px;
font-weight: 600; font-size: 13.5px; font-family: inherit;
}
.dm-empty { text-align: center; padding: 34px 20px; color: var(--text-3); font-size: 13px; line-height: 1.9; }
.dm-note { font-size: 11px; color: var(--text-3); line-height: 1.75; margin-top: 8px; }
.dm-head { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; border-bottom: 1px solid var(--line); }
.dm-head .dm-name { font-size: 15px; }
/* 距离标签 */
.dist { font-size: 11px; color: var(--text-3); display: inline-flex; align-items: center; gap: 3px; }
/* 提示条 */
.notice {
/* 不能用 flex：提示语里常混排 强调词，flex 会把每个文字段当独立子项，
「平台保障」四个字被挤成竖排一字一行（2026-11-05 用户截图实锤） */
display: block;
background: var(--info-bg); color: #2f68b0;
border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
}
.notice.warn { background: var(--warn-bg); color: #a4681a; }
.notice.ok { background: #e7f6f1; color: #17795a; }
/* 苹果风浅灰变体（首页顶部用）：中性底 + 深色强调词 */
.notice.soft { background: #f1f4f6; color: var(--text-2); border-radius: 12px; }
.notice.soft b { color: var(--text); font-weight: 700; }
.notice .ni { flex: 0 0 auto; }
/* toast */
.toast {
position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9);
background: rgba(25, 35, 45, .9); color: #fff; padding: 12px 20px;
border-radius: 10px; font-size: 14px; z-index: 999; opacity: 0;
transition: all .2s; pointer-events: none; max-width: 80%; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* 弹层 */
.sheet-mask {
position: fixed; inset: 0; background: rgba(15,25,35,.4); z-index: 200;
display: flex; align-items: flex-end; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity .2s;
}
.sheet-mask.show { opacity: 1; pointer-events: auto; }
.sheet {
background: #fff; width: 100%; max-width: 430px;
border-radius: 18px 18px 0 0; padding: 18px 16px 24px;
transform: translateY(20px); transition: transform .25s;
max-height: 82vh; overflow-y: auto;
}
.sheet-mask.show .sheet { transform: translateY(0); }
.sheet h3 { margin: 0 0 14px; font-size: 16px; }
/* ---------- 后台（PC） ---------- */
.admin { display: flex; min-height: 100vh; background: #f2f5f8; }
.sidebar {
width: 208px; background: #16232e; color: #c6d2de; flex: 0 0 auto;
padding: 18px 0; position: sticky; top: 0; height: 100vh;
}
.sidebar .logo {
font-family: 'Yidujia Display', 'PingFang SC', 'Microsoft YaHei', sans-serif;
padding: 0 20px 18px; font-size: 17px; font-weight: 400; letter-spacing: 1.5px; color: #fff;
display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #253543;
margin-bottom: 12px;
}
.sidebar nav a {
display: flex; align-items: center; gap: 9px; padding: 11px 20px;
color: #a9b9c9; font-size: 13.5px; text-decoration: none; border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: #1d2c39; color: #fff; }
.sidebar nav a.active { background: #1d2c39; color: #fff; border-left-color: var(--brand); font-weight: 600; }
/* 侧栏待办角标（内容审核待处理数，由 common.js 的 fillAuditBadge 填数） */
.sidebar nav a .nav-badge {
margin-left: auto; background: #d9534f; color: #fff; border-radius: 9px;
padding: 0 7px; font-size: 11px; font-weight: 600; line-height: 18px; display: none;
}
/* ============================================================
* 后台 · 三方支付对接配置
* ============================================================ */
.pay-ch-list { display: grid; gap: 12px; }
.pay-ch {
border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fbfcfd;
}
.sw {
flex: 0 0 auto; width: 44px; height: 24px; border-radius: 99px; border: 0; padding: 0;
background: #d4dae0; cursor: pointer; position: relative; transition: background .18s;
}
.sw > i {
position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sw.on { background: #2aa06c; }
.sw.on > i { left: 22px; }
.main { flex: 1; min-width: 0; padding: 22px 26px 60px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.page-head h2 { margin: 0; font-size: 20px; }
.page-head .sub { color: var(--text-3); font-size: 13px; margin-top: 4px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi {
background: #fff; border-radius: 12px; padding: 16px 18px;
box-shadow: var(--shadow); border-left: 3px solid var(--brand);
}
.kpi .k { font-size: 12.5px; color: var(--text-3); }
.kpi .v { font-size: 24px; font-weight: 700; margin-top: 6px; letter-spacing: -.5px; }
.kpi .v small { font-size: 13px; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.kpi.warn { border-left-color: var(--warn); }
.kpi.info { border-left-color: var(--info); }
.kpi.danger { border-left-color: var(--danger); }
.kpi.success { border-left-color: var(--success); }
.panel { background: #fff; border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px; }
.panel .ph { padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14.5px; display: flex; justify-content: space-between; align-items: center; }
.panel .pb { padding: 16px 18px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
th { background: #f8fafb; color: var(--text-2); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
tbody tr:hover { background: #fafcfd; }
tbody tr:last-child td { border-bottom: none; }
td.actions { white-space: nowrap; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button {
padding: 7px 15px; border-radius: 8px; font-size: 13.5px; color: var(--text-2);
background: #fff; border: 1px solid var(--line);
}
.tabs button.active { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.chip {
display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
border-radius: 20px; background: #fff; border: 1px solid var(--line);
font-size: 13px; color: var(--text-2); white-space: nowrap;
}
.chip.active { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.chip:disabled { opacity: .38; cursor: not-allowed; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
/* ============================================================
* 搜索页 · 标签筛选
* ============================================================ */
/* 已选条件回显条 */
.active-bar {
display: none; flex-wrap: wrap; gap: 6px; align-items: center;
padding: 8px 10px; margin-top: 8px;
background: var(--brand-light); border: 1px solid #cfe9e2; border-radius: 10px;
}
.active-bar.show { display: flex; }
.active-bar .ab-tip { font-size: 11px; color: var(--brand-dark); font-weight: 600; margin-right: 2px; }
.active-bar .ab-chip {
display: inline-flex; align-items: center; gap: 4px;
background: #fff; border: 1px solid #bfe0d8; color: var(--brand-dark);
font-size: 11.5px; padding: 3px 8px; border-radius: 20px; font-weight: 600;
}
.active-bar .ab-chip i { font-style: normal; opacity: .55; font-size: 10px; }
.active-bar .ab-chip:active { background: var(--brand); color: #fff; }
.active-bar .ab-clear {
font-size: 11.5px; color: var(--text-3); margin-left: auto;
text-decoration: underline; padding: 3px 4px;
}
/* 列表卡片里的技能标签行 */
.skill-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.sk {
font-size: 10.5px; padding: 2.5px 7px; border-radius: 6px;
background: #f0f4f8; color: var(--text-2); white-space: nowrap;
display: inline-flex; align-items: center; gap: 3px; line-height: 1.5;
}
/* 命中当前筛选条件的标签高亮 */
.sk.on { background: var(--brand-light); color: var(--brand-dark); font-weight: 600; border: 1px solid #bfe0d8; }
.sk.more { background: transparent; color: var(--text-3); border: 1px dashed #d5dde5; }
.gd { color: #d4708f; font-weight: 700; }
/* ---------- 筛选面板 ---------- */
.sheet-head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.sheet-head h3 { margin: 0; font-size: 16px; }
.sheet-body { max-height: 56vh; overflow-y: auto; padding: 4px 2px 4px 0; }
.sheet-foot {
padding-top: 12px; border-top: 1px solid var(--line); margin-top: 4px;
}
.fg { margin-top: 16px; }
.fg-h {
font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 9px;
display: flex; align-items: center; gap: 6px;
}
.fg-h::before {
content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--brand);
}
.fg-b { display: flex; flex-wrap: wrap; gap: 7px; }
/* 筛选标签 */
.ftag {
display: inline-flex; align-items: center; gap: 4px;
border: 1px solid var(--line); background: #fff; color: var(--text-2);
font-size: 12.5px; padding: 6px 10px; border-radius: 9px;
transition: all .14s; position: relative; line-height: 1.4;
}
.ftag .ft-i { font-size: 13px; }
.ftag .ft-n {
font-size: 10px; color: var(--text-3); background: #f2f5f8;
border-radius: 5px; padding: 0 4px; margin-left: 1px; min-width: 16px; text-align: center;
}
.ftag:active { transform: scale(.96); }
.ftag:disabled { opacity: .34; cursor: not-allowed; }
.ftag.on {
background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
box-shadow: 0 2px 8px rgba(31,155,142,.28);
}
.ftag.on .ft-n { background: rgba(255,255,255,.25); color: #fff; }
/* 横向滚动城市卡 */
.hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 16px 12px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
/* 首页热门目的地：固定 4 列网格，不横向滚动（2026-11-06 用户定稿：只展示 4 个） */
.hot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 16px 12px; }
.hot-grid > a { min-width: 0; display: block; text-decoration: none; }
.hot-grid .city-card { padding: 10px 8px; }
.hot-grid .city-card .cn { font-size: 12px; letter-spacing: 0; }
.hot-grid .city-card .cd { font-size: 10px; }
/* 城市卡 —— 苹果风：白色罩壳把数据里的城市渐变调成淡彩底，深色文字 */
.city-card {
flex: 0 0 140px; height: 96px; border-radius: 18px; padding: 12px;
color: var(--text); display: flex; flex-direction: column; justify-content: flex-end;
background: #fff;
box-shadow: 0 2px 10px rgba(20, 40, 60, .06), 0 10px 24px rgba(20, 40, 60, .05);
position: relative; overflow: hidden;
transition: transform .2s ease;
}
.city-card:active { transform: scale(.96); }
.city-card .cn { font-weight: 800; font-size: 13px; position: relative; z-index: 1; letter-spacing: .1px; white-space: nowrap; }
.city-card .cd { font-size: 11px; color: var(--text-2); position: relative; z-index: 1; margin-top: 1px; }
/* hero */
/* hero —— 苹果风浅色头部：淡青渐隐入页面底色，深色大标题 */
.hero {
background: #f5f7f9 url('hero-bg.svg') no-repeat top center / 100% auto;
padding: 26px 16px 6px; color: var(--text); position: relative;
}
.hero h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: .2px; }
.hero p { margin: 0; font-size: 13px; color: var(--text-2); }
.hero-search { margin: 14px 16px 2px; position: relative; z-index: 5; }
/* 首页搜索框 —— 苹果式胶囊搜索栏（作用域限定首页头部，不影响搜索页） */
.hero-search .search {
background: #fff; border: none;
border-radius: 22px; padding: 6px 6px 6px 14px;
box-shadow: 0 2px 10px rgba(20, 40, 60, .07), 0 1px 2px rgba(20, 40, 60, .04);
}
.hero-search .search input { font-size: 13.5px; }
.hero-search .search .btn.sm { border-radius: 17px; padding: 7px 16px; }
@media (max-width: 860px) {
.admin { flex-direction: column; }
.sidebar { width: 100%; height: auto; position: static; padding: 10px 0; }
.sidebar nav { display: flex; overflow-x: auto; }
.sidebar nav a { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
.sidebar nav a.active { border-left: none; border-bottom-color: var(--brand); }
.sidebar .logo { padding: 8px 16px 10px; margin-bottom: 6px; }
.main { padding: 16px; }
}
/* ============================================================
* 社区 · 帖子卡片
* ============================================================ */
.avatar.sm { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }
.avatar.xs { width: 26px; height: 26px; border-radius: 9px; font-size: 12px; }
/* 帖子配图网格：1 张大图 / 2 张并排 / 3 张平铺 */
.pimg-grid { display: grid; gap: 4px; margin-top: 12px; }
.pimg-grid.n1 { grid-template-columns: 1fr; }
.pimg-grid.n2 { grid-template-columns: 1fr 1fr; }
.pimg-grid.n3 { grid-template-columns: 1fr 1fr 1fr; }
.pimg {
position: relative; aspect-ratio: 1 / 1; display: flex;
align-items: center; justify-content: center; font-size: 28px; overflow: hidden;
}
.pimg-grid.n1 .pimg { aspect-ratio: 16 / 10; font-size: 46px; }
.pimg-grid.n2 .pimg { aspect-ratio: 4 / 3; }
.pimg-more {
position: absolute; inset: 0; background: rgba(15,25,35,.52); color: #fff;
font-size: 15px; font-weight: 700; font-style: normal;
display: flex; align-items: center; justify-content: center;
}
/* 帖子底部操作条 */
.cbtn {
display: inline-flex; align-items: center; gap: 4px;
background: none; border: none; color: var(--text-3);
font-size: 12.5px; padding: 2px 0; cursor: pointer;
}
.cbtn.on { color: #e8532b; font-weight: 600; }
.cbtn:active { opacity: .6; }
/* ============================================================
* 悬赏 · 卡片内的小标签行
* ============================================================ */
.bounty-badge {
display: inline-flex; align-items: center; gap: 3px;
background: #fff4e8; color: #c9761b; font-size: 11px; font-weight: 600;
padding: 2px 7px; border-radius: 6px;
}
/* 空状态下的引导按钮 */
.empty .cbtn { margin-top: 4px; }
/* ============================================================
* 首页滚屏轮播（近期活动 / 平台宣传位）
* 用 CSS scroll-snap 实现，不依赖 JS 定时器也能手动滑动；
* JS 只负责「自动播放 + 圆点同步」。
* ============================================================ */
.promo {
position: relative;
margin: 0 0 4px;
}
.promo-track {
display: flex; gap: 10px;
overflow-x: auto; scroll-snap-type: x mandatory;
padding: 4px 16px 10px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.promo-track::-webkit-scrollbar { display: none; }
.promo-slide {
position: relative; flex: 0 0 calc(100% - 32px);
scroll-snap-align: center;
border-radius: 20px; overflow: hidden;
min-height: 128px; padding: 16px 16px 14px;
color: #fff; display: flex; flex-direction: column; justify-content: space-between;
box-shadow: 0 8px 22px rgba(20, 40, 60, .10), 0 2px 6px rgba(20, 40, 60, .05);
cursor: pointer;
transition: transform .18s;
}
/* 左上到右下的柔光罩，苹果式光泽感（颜色仍来自数据渐变） */
.promo-slide::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%);
}
.promo-slide:active { transform: scale(.985); }
/* 装饰性大 emoji 水印 */
.promo-slide .p-emoji {
position: absolute; right: -6px; bottom: -12px;
font-size: 82px; opacity: .16; line-height: 1; pointer-events: none;
transform: rotate(-8deg);
}
.promo-slide .p-top { position: relative; display: flex; align-items: center; gap: 6px; }
.promo-slide .p-badge {
display: inline-flex; align-items: center;
background: rgba(255, 255, 255, .24); color: #fff;
font-size: 11px; font-weight: 700; letter-spacing: .3px;
padding: 2px 8px; border-radius: 20px;
backdrop-filter: blur(2px);
}
.promo-slide .p-left {
display: inline-flex; align-items: center; gap: 3px;
background: rgba(0, 0, 0, .18); color: #fff;
font-size: 11px; padding: 2px 7px; border-radius: 20px;
}
.promo-slide .p-title {
position: relative; font-size: 20px; font-weight: 800;
letter-spacing: .3px; margin-top: 8px; line-height: 1.3;
text-shadow: 0 1px 3px rgba(0, 0, 0, .10);
}
.promo-slide .p-sub {
position: relative; font-size: 12.5px; opacity: .92;
margin-top: 4px; line-height: 1.45;
text-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.promo-slide .p-cta {
position: relative; align-self: flex-start;
margin-top: 10px;
background: rgba(255, 255, 255, .96); color: #1a2430;
font-size: 12.5px; font-weight: 700;
padding: 6px 14px; border-radius: 20px;
display: inline-flex; align-items: center; gap: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}
.promo-slide .p-cta .arrow { transition: transform .18s; }
.promo-slide:active .p-cta .arrow { transform: translateX(2px); }
/* 已结束 / 非启用活动：降饱和 + 灰化 */
.promo-slide.is-off {
filter: grayscale(.85) brightness(1.06);
opacity: .82;
}
/* 圆点 + 计数 */
.promo-dots {
display: flex; align-items: center; justify-content: center;
gap: 5px; padding: 0 16px 6px;
}
.promo-dots .dot {
width: 6px; height: 6px; border-radius: 50%;
background: #cfd6dd; transition: all .22s; cursor: pointer;
border: none; padding: 0;
}
.promo-dots .dot.on { width: 16px; border-radius: 3px; background: var(--brand); }
.promo-dots .p-count {
margin-left: 6px; font-size: 11px; color: var(--text-3);
font-variant-numeric: tabular-nums;
}
/* 横向滚动时右侧渐隐提示 */
.promo::after {
content: ''; position: absolute; top: 4px; right: 0; width: 28px; height: 128px;
background: linear-gradient(90deg, rgba(245, 247, 249, 0), var(--bg));
pointer-events: none; border-radius: 0 16px 16px 0;
}
/* ============================================================
* 地陪主页 · YouTube 频道页风格
* 封面横幅 + 大圆头像 + 大字名字 + @句柄 + 统计行 +
* 「…更多」简介 + 胶囊按钮 + 下划线 Tab + 内容面板
* ============================================================ */
/* 封面横幅 */
.yt-cover {
height: 150px; position: relative;
}
.yt-cover .float-btn {
position: absolute; top: 12px;
width: 34px; height: 34px; border-radius: 50%;
background: rgba(20, 28, 36, .38); color: #fff;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
font-size: 19px; line-height: 1;
display: flex; align-items: center; justify-content: center;
border: none; cursor: pointer;
}
.yt-cover .float-btn:active { background: rgba(20, 28, 36, .55); }
.yt-cover .float-btn.l { left: 12px; }
.yt-cover .float-btn.r { right: 12px; font-size: 16px; }
/* 头像：大圆 + 白描边，压在横幅上 */
.yt-ava {
width: 84px; height: 84px; border-radius: 50%;
border: 4px solid #fff; box-shadow: 0 2px 10px rgba(20, 40, 60, .16);
display: flex; align-items: center; justify-content: center;
font-size: 32px; color: #fff; font-weight: 600;
margin: -46px 0 0 16px; position: relative;
flex: 0 0 auto;
}
/* 名字行：大字加粗 + 平台核验徽标 */
.yt-name {
display: flex; align-items: center; gap: 6px;
font-size: 21px; font-weight: 700; color: #0f1419;
margin-top: 10px; line-height: 1.25;
}
.yt-verify {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
background: #3b7fd4; color: #fff; font-size: 10px; font-weight: 700;
flex: 0 0 auto;
}
.yt-verify.off { background: #b7c0c9; }
/* @句柄 + 基础信息（灰色一行，油管式） */
.yt-handle {
font-size: 12.5px; color: var(--text-3); margin-top: 3px;
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.yt-handle b { color: var(--text-2); font-weight: 600; }
/* 数据统计行 */
.yt-stats {
font-size: 13px; color: var(--text-2); margin-top: 7px;
display: flex; gap: 5px; align-items: baseline; flex-wrap: wrap;
}
.yt-stats b { font-size: 14.5px; color: #0f1419; }
/* 简介：默认收起，「…更多」展开（油管式） */
.yt-bio {
font-size: 13px; color: var(--text-2); line-height: 1.65;
margin-top: 8px;
}
.yt-bio.clamp {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.yt-more {
color: #0f1419; font-weight: 600; cursor: pointer;
margin-left: 2px;
}
/* 胶囊按钮排：允许换行，避免第 4 个按钮被横向滚动裁掉（关注按钮曾因此「找不到」） */
.yt-actions {
display: flex; gap: 9px; margin-top: 14px;
flex-wrap: wrap; padding-bottom: 2px;
}
.pill-btn {
flex: 0 0 auto; border-radius: 20px; padding: 9px 20px;
font-size: 13.5px; font-weight: 600; cursor: pointer;
border: none; display: inline-flex; align-items: center; gap: 6px;
}
.pill-btn.dark { background: #0f1419; color: #fff; }
.pill-btn.dark:active { background: #2a323b; }
.pill-btn.grey { background: #eef1f4; color: #0f1419; }
.pill-btn.grey:active { background: #e2e7ec; }
.pill-btn.muted { background: #eef1f4; color: var(--text-3); }
/* 主页胶囊排里的关注按钮：原先用 fb-dark（白底白字）在白卡上几乎看不见，
现在跟随 pill-btn 的尺寸与浅底深字，未关注/已关注都能一眼分辨 */
.yt-actions .fb {
padding: 9px 18px; font-size: 13.5px; font-weight: 600;
background: #eef1f4; color: #0f1419; border: 1px solid transparent;
}
.yt-actions .fb .fb-i { font-size: 14px; color: #e8912b; }
.yt-actions .fb:active { background: #e2e7ec; }
.yt-actions .fb.on { background: #fff4e5; color: #b45309; border-color: #ffd8a8; }
.yt-actions .fb.on:active { background: #ffe9c9; }
/* 下划线 Tab（作品 / 套餐 / 评价 / 关于） */
.yt-tabs {
position: sticky; top: 0; z-index: 45;
display: flex; background: rgba(255, 255, 255, .96);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
margin-top: 16px; padding: 0 8px;
}
.yt-tab {
flex: 1; text-align: center; padding: 11px 0 9px;
font-size: 13.5px; color: var(--text-3); font-weight: 500;
border-bottom: 2.5px solid transparent; cursor: pointer;
white-space: nowrap;
}
.yt-tab.on { color: #0f1419; font-weight: 700; border-bottom-color: #0f1419; }
/* Tab 内容面板 */
.yt-panel { padding: 14px 16px 4px; }
/* 深色胶囊底部 CTA（配合油管风） */
.yt-cta {
border-radius: 24px; padding: 12px 30px;
background: #0f1419; color: #fff; font-weight: 700; font-size: 14.5px;
display: inline-block;
}
.yt-cta:active { background: #2a323b; }
/* ============================================================
* 社区 · 旅行保险（仅展示）
* 顶部页签（动态 / 保险）用下划线风格，与「油管风」主页保持一致。
* ============================================================ */
.ct-tabs {
display: flex; background: #fff; position: sticky; top: 0; z-index: 45;
border-bottom: 1px solid var(--line);
box-shadow: 0 1px 8px rgba(20, 40, 60, .04);
}
.ct-tab {
flex: 1; text-align: center; padding: 12px 0 10px;
font-size: 14px; color: var(--text-3); font-weight: 600;
border-bottom: 2.5px solid transparent; cursor: pointer;
}
.ct-tab.on { color: #0f1419; font-weight: 700; border-bottom-color: #0f1419; }
.ct-tab .ct-tag {
display: inline-block; margin-left: 4px; padding: 1px 6px;
border-radius: 8px; font-size: 10px; font-weight: 600;
background: var(--brand-light); color: var(--brand-dark); vertical-align: 1px;
}
/* 保险页顶部说明条 */
.ins-hero {
background: linear-gradient(135deg, #eaf7f4, #dff2ee);
border: 1px solid #d6ece7; border-radius: 12px; padding: 11px 12px;
display: flex; gap: 9px; align-items: flex-start;
}
.ins-hero .ih-ico { font-size: 17px; line-height: 1.3; flex: 0 0 auto; }
.ins-hero .ih-t { font-size: 13px; font-weight: 700; color: var(--brand-dark); }
.ins-hero .ih-d { font-size: 11.5px; color: #4d7a73; line-height: 1.6; margin-top: 1px; }
/* 险种大分类（境内 / 境外 / 专项） */
.ins-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.ins-type {
background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
padding: 11px 8px; text-align: center; cursor: pointer;
transition: border-color .15s, background .15s;
}
.ins-type .it-ico { font-size: 20px; line-height: 1.2; }
.ins-type .it-l { font-size: 13px; font-weight: 700; margin-top: 3px; }
.ins-type .it-c { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }
.ins-type.on { border-color: var(--brand); background: var(--brand-light); }
.ins-type.on .it-l { color: var(--brand-dark); }
.ins-type.on .it-c { color: #4d7a73; }
/* 保险产品卡 */
.ins-card {
background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 13px 14px; margin-bottom: 11px;
}
.ins-card-hd { display: flex; gap: 10px; align-items: flex-start; }
.ins-logo {
width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
font-size: 18px; background: var(--brand-light);
}
.ins-name { font-size: 15px; font-weight: 700; line-height: 1.35; }
.ins-company { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.ins-price { text-align: right; flex: 0 0 auto; }
.ins-price .ip-n { font-size: 17px; font-weight: 700; color: var(--danger); line-height: 1.2; }
.ins-price .ip-u { font-size: 10.5px; color: var(--text-3); }
/* 档位徽标 */
.ins-tier {
display: inline-block; padding: 1.5px 7px; border-radius: 6px;
font-size: 10.5px; font-weight: 700; margin-left: 5px; vertical-align: 1px;
}
.it-basic { background: #eef2f6; color: #64748b; }
.it-plus { background: var(--info-bg); color: var(--info); }
.it-max { background: #f0eefb; color: #6b5fc4; }
/* 保障项目 */
.ins-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 10px; }
.ins-item { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; }
.ins-item .ii-ico { flex: 0 0 auto; font-size: 12px; line-height: 1.5; }
.ins-item .ii-t { color: var(--text-2); line-height: 1.5; }
/* 免责 / 除外责任折叠 */
.ins-excl {
margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line);
font-size: 11.5px; color: var(--text-3); line-height: 1.65;
}
.ins-excl b { color: var(--warn); font-weight: 600; }
.ins-more {
display: block; width: 100%; text-align: center; margin-top: 9px;
font-size: 12.5px; color: var(--brand-dark); font-weight: 600;
padding: 6px 0; border-top: 1px solid var(--line);
}
/* 底部说明区 */
.ins-notes { margin-top: 14px; }
.ins-note {
display: flex; gap: 9px; align-items: flex-start;
background: #f8fbfd; border: 1px solid #e5eef5; border-radius: 10px;
padding: 9px 10px; margin-bottom: 8px;
}
.ins-note .in-ico { font-size: 15px; flex: 0 0 auto; line-height: 1.35; }
.ins-note .in-t { font-size: 12px; font-weight: 600; }
.ins-note .in-d { font-size: 11px; color: var(--text-3); line-height: 1.55; margin-top: 1px; }
/* ============================================================
* 首页「按服务类型找」—— 苹果官网风瓷片网格（bento tiles）
* ============================================================ */
.sec-sub {
font-size: 12px; color: var(--text-3); font-weight: 400;
margin: -6px 16px 10px; letter-spacing: .2px;
}
.svc-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.svc-tile {
display: block; position: relative; overflow: hidden;
padding: 15px 14px 13px; border-radius: 20px;
background: linear-gradient(168deg, #ffffff 8%, var(--tile-bg, #f5f5f7) 100%);
box-shadow: 0 1px 2px rgba(20,40,60,.04), 0 10px 26px rgba(20,40,60,.06);
transition: transform .22s ease, box-shadow .22s ease;
}
.svc-tile::before {
/* 右上角一团同色柔光，制造层次（苹果式渐变光晕） */
content: ''; position: absolute; right: -34px; top: -34px;
width: 120px; height: 120px; border-radius: 50%;
background: radial-gradient(circle, var(--tile-glow, rgba(31,155,142,.16)) 0%, transparent 68%);
pointer-events: none;
}
.svc-tile:active { transform: scale(.96); box-shadow: 0 2px 10px rgba(20,40,60,.08); }
.svc-ico {
width: 42px; height: 42px; border-radius: 13.5px;
display: flex; align-items: center; justify-content: center;
font-size: 21px; margin-bottom: 10px; position: relative;
background: var(--chip-bg, linear-gradient(135deg, #2fbfae, #178073));
box-shadow: 0 6px 14px var(--chip-sh, rgba(31,155,142,.35)),
inset 0 1px 0 rgba(255,255,255,.35);
}
.svc-name {
font-size: 15px; font-weight: 700; letter-spacing: .3px; position: relative;
color: var(--text); /* 覆盖 的品牌色继承，苹果风标题用深色 */
}
.svc-desc {
font-size: 11.5px; color: #86868b; line-height: 1.5;
margin-top: 2px; min-height: 34px; position: relative;
}
.svc-ct {
margin-top: 6px; font-size: 11.5px; font-weight: 600; position: relative;
color: var(--tile-acc, var(--brand));
}
.svc-ct b { font-size: 13px; font-weight: 700; }
/* ============================================================
* iOS 式左右滑动页面转场
* 进入子页：新页从右滑入，旧页同时向左退并略微缩小变暗
* 返回上一页：反过来 —— 旧页向右滑出，下层页恢复到原大小
* 由 common.js 的 slideGo() 驱动：
* 1) 给当前 .phone 加 .page-out-next / .page-out-prev
* 2) 在末尾插入一张同尺寸的「快照页」（iframe 加载目标页），加 .page-in
* 3) 新页滑到位后直接 location.href 跳过去（快照与新页完全一致，视觉无缝）
* 快照用 iframe 而非 DOM 克隆，是为了避免 id 重复影响原页面脚本。
* ============================================================ */
.phone { position: relative; }
.page-out { pointer-events: none; }
/* 旧页「左退 / 右滑出」交给内层包裹层做 transform（不直接改 .phone：
.phone 上还有定位与内容，直接动画会把整页提升为合成层并触发重栅格化）。
变暗改用 .pg-dim 遮罩层（纯透明度过渡），避免 filter 带来的逐帧重绘。 */
.page-out-grip {
transform-origin: 0% 50%;
will-change: transform;
transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.page-out-next .page-out-grip { transform: translateX(-22%) scale(.945); }
.page-out-prev .page-out-grip { transform: translateX(26%) scale(.945); }
.pg-dim {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: #0b1a26; opacity: 0;
transition: opacity .28s ease;
}
.page-out-next .pg-dim { opacity: .28; }
.page-out-prev .pg-dim { opacity: .28; }
/* 旧页此刻已固定定位：让它在合成层里待着，减少重排 */
.page-hold { contain: layout paint; }
.phone.page-hold { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 1; }
/* 后台页同样支持滑入快照（common.js 的 buildSnap 认 .admin 为主容器） */
.admin.page-hold { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 1; }
/* 手指跟手阶段：位移由 JS 每帧写入，必须关掉过渡，否则会「拖不动 / 橡皮筋」 */
.page-out-grip.swiping, .page-snap.swiping { transition: none !important; }
.page-snap {
position: absolute; inset: 0; z-index: 6;
overflow: hidden; box-shadow: -8px 0 26px rgba(15, 30, 45, .12);
will-change: transform;
/* 只过渡 transform（合成器属性），不碰 layout / paint */
transition: transform .28s cubic-bezier(.22, .61, .36, 1);
/* 默认（转场结束态）位置由下面的 .page-in-* 覆盖；这里不给 transform，
否则同优先级下会盖掉入场位移，导致没有滑动动画 */
}
/* 入场位移：进入子页从右侧滑入；返回时快照从左侧滑入（配合旧页右滑出） */
.page-snap.page-in-next { transform: translateX(100%); }
.page-snap.page-in-prev { transform: translateX(-26%); }
/* 背景底：动画期间与目标页底色一致 —— 不依赖 iframe 内容，
即使 iframe 还没渲染完也不会出现白屏或闪烁 */
.pg-bg {
position: absolute; inset: 0; z-index: 0;
background: var(--bg);
}
/* iframe 叠在底色之上；未加载完时 opacity 为 0，加载完淡入，
避免「半渲染」状态被用户看到 */
.page-snap .pg-frame {
position: absolute; inset: 0; z-index: 1;
width: 100%; height: 100%; border: 0; display: block;
background: transparent; opacity: 0;
transition: opacity .18s ease;
}
.page-snap.pg-ready .pg-frame { opacity: 1; }
.page-snap.pg-ready .pg-cap { opacity: 0; }
.page-snap .pg-cap {
position: absolute; inset: 0; z-index: 0;
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: var(--text-3);
transition: opacity .18s ease;
}
/* 转场进行中锁住滚动，避免背景跟着滚 */
body.pg-anim { overflow: hidden; }
/* 转场期间临时关掉毛玻璃：backdrop-filter 每帧都要对底下的内容重新模糊，
是滑动时掉帧的最大来源；动画完恢复，肉眼几乎察觉不到差别 */
body.pg-anim .topbar, body.pg-anim .tabbar,
body.pg-anim [class*="blur"], body.pg-anim .sheet-mask, body.pg-anim .map-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* 落地轻淡入：掩盖浏览器换页瞬间的闪变（很轻、一次性的，不抢转场动画的戏）。
挂在 body 上而不是 .phone 上 —— 转场会把 .phone 在 DOM 里搬进/搬出把手层，
挪动会重播 CSS 动画，挂在 body 则整页生命周期只播这一次 */
@keyframes bodyIn { from { opacity: .55; } to { opacity: 1; } }
body { animation: bodyIn .16s ease-out; }
/* ---------- 品牌标识 ---------- */
.brand-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.brand-row img { width: 28px; height: 28px; border-radius: 8px; display: block; }
.brand-row span { font-size: 16px; font-weight: 700; letter-spacing: 1.5px; color: var(--text); }
.sidebar .logo .brand-ico { width: 26px; height: 26px; border-radius: 8px; display: block; flex: 0 0 auto; }
/* ---------- 首页推广卡（照片拼贴风，参考剪映推广位） ---------- */
.hero-promo { padding: 14px 16px 6px; }
.promo-card {
position: relative; border-radius: 24px; overflow: hidden; padding: 18px 18px 20px;
background:
radial-gradient(130% 100% at 88% 0%, rgba(47,148,168,.5), transparent 55%),
radial-gradient(110% 90% at 0% 100%, rgba(24,110,88,.45), transparent 60%),
linear-gradient(155deg, #0e2c36 0%, #10393a 52%, #0a222c 100%);
box-shadow: 0 10px 28px rgba(15,45,55,.18);
}
.pc-brand { display: flex; align-items: center; gap: 7px; color: #fff; }
.pc-brand img { width: 22px; height: 22px; border-radius: 6px; display: block; }
.pc-brand span { font-family: 'Yidujia Display', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 2.5px; }
.pc-collage { position: relative; height: 336px; margin: 12px 2px 4px; }
.pc-collage img { display: block; }
.pc-glass {
position: absolute; left: 1%; top: 46px; width: 54px; height: 54px; z-index: 1;
border-radius: 16px; transform: rotate(-8deg);
background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28);
display: grid; place-items: center; font-size: 20px; color: #d8f0f3;
}
.pc-main-back {
position: absolute; left: 14%; top: 10px; width: 47%; height: 306px; z-index: 1;
border-radius: 18px; transform: rotate(-1.2deg);
background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.16);
}
.pc-main {
position: absolute; left: 16%; top: 0; width: 47%; z-index: 2; transform: rotate(-4deg);
border-radius: 18px; overflow: hidden; border: 2px solid rgba(255,255,255,.35);
box-shadow: 0 16px 36px rgba(0,0,0,.42);
}
.pc-main img { width: 100%; height: 302px; object-fit: cover; object-position: top; }
.pc-side {
position: absolute; right: 1%; top: 24px; width: 30%; z-index: 3; transform: rotate(6deg);
border-radius: 14px; overflow: hidden; border: 2px solid rgba(255,255,255,.35);
box-shadow: 0 12px 26px rgba(0,0,0,.4);
}
.pc-side img { width: 100%; height: 150px; object-fit: cover; }
.pc-strip {
position: absolute; left: 12%; right: 4%; bottom: 0; z-index: 4;
display: flex; gap: 8px; padding: 7px; border-radius: 14px; transform: rotate(-1.5deg);
background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
}
.pc-strip img { flex: 1; min-width: 0; height: 46px; object-fit: cover; border-radius: 9px; }
.pc-text { margin-top: 14px; }
.pc-tag { font-size: 11px; letter-spacing: 3px; color: rgba(255,255,255,.55); }
.pc-text h2 { margin: 6px 0 7px; font-size: 21px; font-weight: 800; color: #fff; letter-spacing: .3px; }
.pc-text p { margin: 0; font-size: 12px; color: rgba(255,255,255,.5); }
/* 首页主打推荐卡片 = 可点链接（跳搜索地陪页） */
.pc-link { display: block; text-decoration: none; color: inherit; }
.pc-link:active { transform: scale(.985); }
/* ============================================================
「我的」页 · 订单宫格 + 我的工具（黑白线性图标 · 简单高级）
图标 = 内联 SVG 线条（stroke: currentColor，默认深灰黑）
============================================================ */
.i19 { width: 19px; height: 19px; }
.ord-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 2px 0 0; }
.ord-cell {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 8px 0 4px; color: inherit; text-decoration: none; border-radius: 10px;
}
.ord-cell:active { background: #f3f5f7; }
.ord-cell svg { width: 25px; height: 25px; color: #262c33; }
.ord-t { font-size: 11px; color: var(--text-2); }
.ord-num, .tool-num {
position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; height: 16px;
padding: 0 4.5px; border-radius: 9px; background: #e5484d; color: #fff;
font-size: 10px; line-height: 16px; text-align: center; font-weight: 600;
box-shadow: 0 0 0 2px #fff;
}
.tool-head { padding: 14px 14px 4px; font-weight: 600; font-size: 15px; color: var(--text); }
.tool-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px 6px 12px; }
.tool-item {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 10px 2px 8px; color: inherit; text-decoration: none; border-radius: 10px;
}
.tool-item:active { background: #f3f5f7; }
.tool-item svg { width: 24px; height: 24px; color: #262c33; }
.tool-t { font-size: 11px; color: var(--text-2); }
.tool-item .tool-num { top: 4px; }
/* ═══ v7 · 极简黑白：用户卡 / 发布卡 / 话题格 ═══ */
.me-card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; }
.pub-hero { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; }
.pub-ico {
width:42px; height:42px; border:1px solid var(--line); border-radius:12px;
display:flex; align-items:center; justify-content:center; color:#262c33; flex:0 0 auto;
}
.pub-ico svg { width:22px; height:22px; }
.btn-ink {
display:block; width:100%; padding:11px; border-radius:10px; background:#1c2126;
color:#fff; font-size:14px; font-weight:600; border:0; text-align:center; cursor:pointer;
}
.btn-ink:active { opacity:.86; }
.btn-line {
display:block; width:100%; padding:9px; border-radius:10px; background:#fff;
color:#1c2126; font-size:13.5px; font-weight:600; border:1px solid #1c2126;
text-align:center; cursor:pointer;
}
.btn-line:active { background:#f3f5f7; }
/* 2026-11-05 修：两个按钮默认 width:100%，放进 .row 会把旁边按钮挤成竖条 /
霸满整行（藏宝页「我也藏一个 / 我的积分」就是这个坑）。行内改为弹性分配。 */
.row .btn-ink { width:auto; flex:1 1 auto; }
.row .btn-line { width:auto; flex:0 0 auto; }
.tp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tp-item {
position:relative; background:#fff; border:1px solid var(--line); border-radius:12px;
padding:11px 4px 9px; display:flex; flex-direction:column; align-items:center; gap:5px;
color:var(--text-2); font-size:12.5px; cursor:pointer;
}
.tp-item svg { width:21px; height:21px; color:#262c33; }
.tp-item:active { background:#f3f5f7; }
.tp-item.on { border-color:#1c2126; color:#1c2126; font-weight:600; box-shadow:inset 0 0 0 .5px #1c2126; }
.tp-cnt { position:absolute; top:6px; right:9px; font-size:10px; color:var(--text-3); font-weight:500; }
.btn-line svg { width: 16px; height: 16px; }
.me-kv svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* ============================================================
藏宝寻宝 + 平台积分（2026-11）
============================================================ */
.tb-card{display:flex;gap:12px;align-items:stretch;color:inherit;text-decoration:none}
.tb-thumb{width:88px;height:88px;border-radius:12px;flex:0 0 auto;overflow:hidden}
.tb-title{font-weight:600;font-size:15px;line-height:1.45}
.tb-pt{font-weight:700;font-size:15px;color:#b8791f}
.tb-pt.big{font-size:22px;flex:0 0 auto}
.tb-pt.big span{font-size:10.5px;font-weight:500;margin-left:3px;color:var(--text-3)}
.tb-hero{position:relative;height:220px;overflow:hidden;background:#eef1f5}
.tb-hero img{width:100%;height:100%;object-fit:cover;display:block}
.tb-hero-emo{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px}
.tb-hero-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 28%,rgba(0,0,0,.64))}
.tb-hero-txt{position:absolute;left:16px;right:16px;bottom:32px;color:#fff}
.tb-hero-title{font-size:19px;font-weight:700;line-height:1.35;margin:6px 0 4px;color:#fff}
.tb-tip{border-left:2px solid #1c2126;padding:1px 0 1px 11px;font-size:13.5px;line-height:1.7}
.tb-tip-h{font-size:11.5px;letter-spacing:.6px;color:var(--text-3);margin-bottom:2px}
.tb-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tb-pic{border-radius:10px;overflow:hidden;background:#eef1f5;aspect-ratio:4/3;position:relative;
display:flex;align-items:center;justify-content:center;font-size:20px}
.tb-pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tb-find{border-top:1px solid var(--line);padding:14px 0 6px}
.tb-find:first-of-type{border-top:0;padding-top:6px;margin-top:0}
/* 藏宝图集：详情页把上传的每张图都铺出来（以前只拿第一张当背景，
其余几张要点开灯箱才看得到，用户以为"只传上去一张"） */
.tb-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tb-gal-i{position:relative;aspect-ratio:1/1;border-radius:11px;overflow:hidden;
background:#eef1f5;cursor:pointer}
.tb-gal-i img{width:100%;height:100%;object-fit:cover;display:block}
.tb-gal-g{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:26px}
.tb-gal-i i{position:absolute;left:6px;top:6px;font-style:normal;font-size:10px;line-height:1.5;
padding:0 5px;border-radius:6px;background:rgba(0,0,0,.52);color:#fff;letter-spacing:.3px}
/* 积分中心 */
.pt-card{background:#1c2126;color:#fff;border-radius:18px;padding:20px 18px 16px;
box-shadow:0 8px 24px rgba(20,32,40,.14)}
.pt-bal{font-size:40px;font-weight:700;letter-spacing:-1.2px;line-height:1.18;margin:2px 0 3px}
.pt-bal span{font-size:14px;font-weight:500;margin-left:5px;opacity:.66;letter-spacing:0}
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px;
border-top:1px solid rgba(255,255,255,.13);padding-top:12px}
.pt-grid div{display:flex;flex-direction:column;gap:1px}
.pt-grid b{font-size:16px;font-weight:600}
.pt-grid span{font-size:10.5px;color:rgba(255,255,255,.6);letter-spacing:.3px}
.pt-act{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:14px;
padding:13px 14px;color:inherit;text-decoration:none;background:#fff}
.pt-act b{font-size:13.5px;font-weight:600}
.pt-act-i{color:#1c2126;display:inline-flex;margin-bottom:3px}
.pt-act-i svg{width:20px;height:20px}
.pt-row{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line)}
.pt-row:last-child{border-bottom:0}
.pt-row-t{font-size:13.5px;font-weight:500;line-height:1.5}
.pt-delta{font-size:16px;font-weight:700;flex:0 0 auto;letter-spacing:-.3px}
.pt-delta.in{color:#1f7a5c}
.pt-delta.out{color:#8d97a2}
/* 下单页的积分抵扣行 */
.pay-pt{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px dashed var(--line)}
.pay-pt-box{width:18px;height:18px;border:1.6px solid #c3ccd6;border-radius:5px;flex:0 0 auto;
display:flex;align-items:center;justify-content:center;background:#fff;transition:.15s}
.pay-pt.on .pay-pt-box{background:#1c2126;border-color:#1c2126;color:#fff}
.pay-pt-box svg{width:12px;height:12px;opacity:0}
.pay-pt.on .pay-pt-box svg{opacity:1}
/* 悬赏页的藏宝入口 */
.tb-entry{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}
.tb-entry-i{width:36px;height:36px;border-radius:11px;background:#f4f8fa;display:inline-flex;
align-items:center;justify-content:center;color:#1c2126;flex:0 0 auto}
.tb-entry-i svg{width:20px;height:20px}
.tb-entry-t{display:block;font-weight:600;font-size:14.5px;color:#1c2126}
.tb-entry-t b{font-weight:500;color:var(--text-3);font-size:11.5px;margin-left:4px}
.tb-entry-s{display:block;font-size:11.5px;color:var(--text-3);line-height:1.6;margin-top:1px}
/* 我的 · 积分条 */
.ico-box{width:36px;height:36px;border-radius:11px;background:#f4f8fa;display:inline-flex;
align-items:center;justify-content:center;color:#1c2126;flex:0 0 auto}
.ico-box svg{width:20px;height:20px}
/* 藏宝悬赏：发布时需支付的悬赏金 */
.tb-fee{display:flex;align-items:center;justify-content:space-between;margin-top:12px;
padding:11px 13px;border-radius:11px;background:#f7f9fb;border:1px solid var(--line);
font-size:13px;color:var(--text-2)}
.tb-fee b{font-size:19px;font-weight:700;color:#1c2126;letter-spacing:-.4px}
.pay-pt{cursor:pointer}