/* 公开分享页样式（/card 名片页、/m 商家页、/book 预约页共用）。
 * 为什么独立成外链文件：全站 CSP 是 style-src 'self'，服务端渲染页里的内联 <style>
 * 会被浏览器整段拦掉（2026-10-22 用户实拍名片页裸奔就是这个原因），所以公开页的
 * 样式只能走同源外链 CSS，且页面里不许再出现 style 属性（同样会被 CSP 拦）。
 * 品牌色与 H5 主站一致：主蓝 #1256a0。改版式改这里，渲染结构在 services/public-page.service.js。 */
*{box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#edf1f6;margin:0;color:#1c2733;-webkit-font-smoothing:antialiased}
a{color:#1256a0}

/* 页头：品牌蓝渐变卡面，姓名大字 + 单位·职位层级 */
.hd{background:linear-gradient(135deg,#1763b3,#0d4076);color:#fff;padding:30px 22px 24px;position:relative;overflow:hidden}
.hd .brand{font-size:13px;letter-spacing:.4px;opacity:.85}
.hd h1{margin:8px 0 4px;font-size:26px;line-height:1.25}
.hd .sub{opacity:.92;font-size:14px;margin:4px 0 0;line-height:1.6}
.hd .who{display:flex;gap:16px;align-items:center;margin-top:14px}
.hd .who h1{margin:0;font-size:28px}

/* 名片卡头背景图（用户传了公司形象背景图才有 .hd-cover）：照片铺满卡头，
 * 上面压一层品牌蓝渐隐罩（上浅下深），保证姓名/单位文字在任何照片上都读得清；
 * 内容层 z-index 抬到罩子之上，背景图与罩子都不接点击。 */
.hd img.hd-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hd-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(13,64,118,.38),rgba(13,64,118,.88));z-index:1;pointer-events:none}
.hd-cover .brand,.hd-cover .who,.hd-cover .logo-plate{position:relative;z-index:2}

/* 公司 Logo 大图块：白底圆角板托在卡头底部，Logo 居中放大展示（旧版缩在正文小卡里只有 64px 高，用户点名要大）。
 * 图块宽度必须贴合图片本身（width:fit-content + 左右 auto 居中）：用户看验收卡截图点名——
 * 测试号的 1 像素假 Logo 也把图块按整行宽度撑成一条空白长板，真 Logo 比例怪时同理，不许再全宽铺板。 */
.logo-plate{width:fit-content;max-width:100%;margin:18px auto 0;background:rgba(255,255,255,.97);border-radius:12px;padding:16px 20px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(9,38,71,.18)}
.logo-plate img{max-height:88px;max-width:300px;width:auto;height:auto;object-fit:contain;display:block}
img.avatar{width:74px;height:74px;border-radius:50%;object-fit:cover;background:#dbe7f5;flex:none;border:2px solid rgba(255,255,255,.55)}
.avatar-fallback{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:600;color:#fff;flex:none}

/* 内容列：移动端贴边，桌面端居中成一张体面的卡片纸 */
.wrap{padding:18px 16px 30px;max-width:640px;margin:0 auto}
.card{background:#fff;border-radius:14px;padding:18px;margin-bottom:12px;box-shadow:0 1px 3px rgba(18,42,72,.06)}
.card h2{font-size:15px;margin:0 0 6px;color:#1c2733}
.card .body-text{line-height:1.75;margin:6px 0 0;font-size:15px}

/* 随心通好友二维码块（名片页第二用途=扫码加好友）：码居中、大小适中一眼可扫，下方一行提示 */
.qr-card{text-align:center}
.qr-img{width:184px;max-width:64vw;height:auto;display:block;margin:2px auto 10px}
.qr-hint{margin:0;color:#5a6a7d;font-size:14px}

/* 联系方式行：图标 + 字段名 + 值，电话/邮箱整行可点 */
.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #f0f2f5;text-decoration:none;color:inherit}
.row:last-child{border-bottom:0}
.row .ic{width:38px;height:38px;border-radius:50%;background:#e8f0fa;color:#1256a0;display:flex;align-items:center;justify-content:center;flex:none}
.row .ic svg{width:19px;height:19px}
.row .k{color:#8a94a3;font-size:13px;flex:none;width:64px}
.row .v{flex:1;text-align:right;word-break:break-all;font-size:15px}
a.row .v{color:#1256a0;font-weight:600}

/* 服务与价格行（商家页/预约页用，不是联系方式行） */
.svc{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #f0f2f5}
.svc:last-child{border-bottom:0}
.svc .price{font-weight:700;color:#1256a0;white-space:nowrap}

/* 身份标识小签 */
.chip{display:inline-block;font-size:12px;padding:2px 9px;border-radius:99px;background:#e8f0fa;color:#1256a0;margin-left:6px;vertical-align:3px}
.chip.warn{background:#fdf3e0;color:#9a6a12}
.chip.gray{background:#eef1f4;color:#66707c}
.chip.gold{background:#fdf6dd;color:#8a6d1a}
.cred-chips{margin:8px 0 0;line-height:2}
.cred-chips .chip{margin:0 6px 0 0}

/* 按钮层级：主按钮实心蓝、次按钮描边、底部引导浅底 */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;background:#1256a0;color:#fff;padding:14px;border-radius:10px;text-decoration:none;font-weight:600;font-size:16px;margin:0 0 12px;box-shadow:0 2px 8px rgba(18,86,160,.25)}
.btn svg{width:20px;height:20px;flex:none}
.btn.ghost{background:#fff;color:#1256a0;border:1px solid #1256a0;box-shadow:none}
.btn.soft{background:#e8f0fa;color:#1256a0;box-shadow:none;font-weight:600}

img.photo{width:100%;border-radius:10px;display:block}

/* 预约页时段 */
.slots{margin-top:10px}
.slot{display:inline-block;margin:0 8px 8px 0;padding:9px 13px;border-radius:8px;background:#e8f0fa;color:#1256a0;text-decoration:none;font-size:14px}
.slot.off{background:#eef1f4;color:#9aa3ad}

/* 法律文档页（/privacy.html 隐私政策）：章节标题比普通卡片标题大一号，正文行距放宽便于长文阅读 */
.legal h2{font-size:17px;margin:26px 0 8px;color:#1c2733}
.legal h2:first-of-type{margin-top:18px}
.legal p{line-height:1.85;margin:8px 0;font-size:15px}

.mut{color:#8a94a3;font-size:13px;line-height:1.7}
.ft{color:#9aa3ad;font-size:12px;text-align:center;padding:0 20px 34px;line-height:1.8;max-width:640px;margin:0 auto}

/* 桌面端：整页收成一张居中卡片，不再满屏拉宽 */
@media (min-width:720px){
  body{padding:36px 0 10px}
  .sheet{max-width:640px;margin:0 auto;background:#f7f9fc;border-radius:20px;overflow:hidden;box-shadow:0 12px 40px rgba(18,42,72,.16)}
  .ft{padding-bottom:6px}
}