/* 名片本体样式：编辑器预览、客户端 H5、导出长图共用这一份 */

.card-root {
  --primary: #0a2140;
  --primary-soft: #14315c;
  --accent: #b67a32;
  --accent-soft: #fff3e0;
  --bg: #f5f7fb;
  --ink: #14233b;
  --muted: #6d7b91;
  --line: #e7ecf3;
  --card: #ffffff;

  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.card-root * { box-sizing: border-box; }
.card-root img { display: block; }

.screen { display: none; min-height: 100%; padding-bottom: 24px; }
.screen.is-active { display: block; }
.card-root[data-render="all"] .screen { display: block; }

/* ---------------------------------------------------------- 状态栏 / 导航 */

.statusbar {
  height: 34px; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; letter-spacing: .2px;
  background: var(--card);
}
.statusbar .icons { display: flex; align-items: center; gap: 5px; }
.statusbar svg { display: block; }

.navbar {
  height: 46px; padding: 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); position: relative;
}
.navbar.bordered { border-bottom: 1px solid var(--line); }
.navbar .nav-title { font-size: 15px; font-weight: 700; }
.navbar .nav-brand { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.navbar .nav-brand .mark {
  width: 20px; height: 20px; border-radius: 6px; color: #fff; background: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.navbar .nav-actions { display: flex; align-items: center; gap: 14px; color: #46566e; }
.navbar .nav-back {
  border: 0; background: none; padding: 0; cursor: pointer; color: #33445c;
  display: flex; align-items: center;
}
.navbar.centered .nav-title { position: absolute; left: 50%; transform: translateX(-50%); }

/* ---------------------------------------------------------- 首页 */

.hero {
  background: linear-gradient(160deg, #ffffff 0%, #f4f7fd 55%, #e9f0fb 100%);
  padding: 4px 20px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -60px; top: -40px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 33, 64, .05), transparent 70%);
}
.hero-photo { height: 250px; display: flex; align-items: flex-end; justify-content: center; }
.hero-photo img {
  max-height: 250px; max-width: 88%; object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(11, 30, 60, .18));
}
.hero-name { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 10px; }
.hero-name .nm { font-size: 27px; font-weight: 800; letter-spacing: 1px; color: var(--primary); }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-soft); color: #91601f;
  font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px;
  white-space: nowrap;
}
.hero-tagline {
  margin: 9px auto 0; max-width: 300px;
  font-size: 13px; color: #4d5f7a; line-height: 1.75; white-space: pre-line;
}
.hero-meta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 13px; font-size: 12px; color: #55647c;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hero-meta .sep { width: 1px; height: 11px; background: #ccd6e4; }

.statbar {
  margin-top: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px;
  display: grid; padding: 14px 0;
  box-shadow: 0 6px 18px rgba(17, 40, 78, .05);
}
.statbar .stat { text-align: center; position: relative; }
.statbar .stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: #eef1f6;
}
.statbar .stat b { display: block; font-size: 21px; font-weight: 800; color: var(--primary); }
.statbar .stat span { font-size: 10px; color: var(--muted); }

.quote {
  margin: 14px; padding: 18px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  font-size: 12.5px; line-height: 1.95; color: #4f5f75; position: relative;
}
.quote::before, .quote::after {
  content: "\201C"; position: absolute; font-size: 30px; font-family: Georgia, serif;
  color: #d9c3a3; line-height: 1;
}
.quote::before { left: 12px; top: 8px; }
.quote::after { content: "\201D"; right: 12px; bottom: 0; }
.quote p { margin: 0; padding: 0 14px; }

.cta { padding: 4px 14px 16px; display: grid; gap: 9px; }
.btn-primary {
  background: var(--primary); color: #fff; border: 0; border-radius: 12px;
  padding: 15px; font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 10px 22px rgba(10, 33, 64, .22);
}
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: var(--card); color: var(--primary); border: 1px solid #dce3ed;
  border-radius: 12px; padding: 13px; font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ---------------------------------------------------------- 个人简介 */

.content { padding: 12px 14px 6px; display: grid; gap: 11px; }
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 15px;
  box-shadow: 0 4px 14px rgba(17, 40, 78, .04);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.panel-title .ico { color: var(--primary); display: flex; }
.panel-more { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 2px; }
.panel p.body { margin: 0; font-size: 12.5px; line-height: 1.95; color: #55647c; white-space: pre-line; }

.timeline { position: relative; padding-left: 16px; }
.timeline::before {
  content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: #e6ebf3;
}
.tl-item { position: relative; padding-bottom: 14px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -16px; top: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; border: 2px solid var(--primary);
}
.tl-item .period { font-size: 11px; color: var(--muted); }
.tl-item .role { font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.tl-item .role .org { color: var(--accent); font-weight: 700; }
.tl-item .desc { font-size: 11.5px; color: #64738a; line-height: 1.7; margin-top: 3px; }

/* 一行一条，条数是单数时不会留半个空卡片 */
.edu-list { display: grid; gap: 12px; }
.edu-row { display: flex; gap: 11px; align-items: flex-start; }
.edu-row + .edu-row { border-top: 1px solid #f0f3f8; padding-top: 12px; }
.edu-row .ico {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px;
  background: #eef3fb; color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.edu-main { flex: 1; min-width: 0; }
.edu-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.edu-line b { font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.edu-degree { font-size: 11px; color: var(--accent); font-weight: 600; }
.edu-note { font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 3px; word-break: break-word; }

.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cert-item { text-align: center; }
.cert-item .ico {
  width: 30px; height: 30px; margin: 0 auto 6px; border-radius: 10px;
  background: #eef3fb; color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.cert-item b { font-size: 12px; display: block; }
.cert-item span { font-size: 9.5px; color: var(--muted); }

.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.thumbs img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; border-radius: 8px; }
.thumbs.wide img { aspect-ratio: 1 / 1.25; object-fit: cover; background: #f6f2ea; }
.empty-thumbs {
  border: 1px dashed #d6deea; border-radius: 10px; padding: 16px;
  text-align: center; font-size: 11px; color: #93a0b3;
}

/* ---------------------------------------------------------- 服务项目 */

.service-hero {
  border-radius: 14px; padding: 18px 16px; color: #6f4a1e;
  background: linear-gradient(120deg, #fdf3e4 0%, #f3e6d3 60%, #ead9c2 100%);
  position: relative; overflow: hidden;
}
.service-hero b { font-size: 16px; font-weight: 800; display: block; }
.service-hero span { font-size: 11.5px; opacity: .85; display: block; margin-top: 6px; }
.service-hero .glyph { position: absolute; right: 14px; bottom: -6px; opacity: .28; color: #8a6231; }

.tabs { display: flex; gap: 26px; padding: 14px 4px 10px; font-size: 13.5px; font-weight: 700; }
.tabs .tab { color: #8b96a7; padding-bottom: 8px; cursor: pointer; border-bottom: 2px solid transparent; }
.tabs .tab.on { color: var(--primary); border-bottom-color: var(--primary); }

.svc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 15px;
  box-shadow: 0 4px 14px rgba(17, 40, 78, .04);
}
.svc-head { display: flex; gap: 11px; align-items: flex-start; }
.svc-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px;
  background: #f0f4fb; color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.svc-name { font-size: 14.5px; font-weight: 700; }
.svc-price { font-size: 14px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.svc-price small { font-size: 10.5px; font-weight: 600; }
.svc-desc { font-size: 11.5px; color: #66748a; line-height: 1.75; margin: 9px 0 0; }
.svc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; }
.svc-foot .time { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.btn-pick {
  background: var(--primary); color: #fff; border: 0; border-radius: 9px;
  padding: 9px 15px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.svc-foot-note { text-align: center; font-size: 11px; color: #93a0b3; padding: 6px 0 2px; }

/* ---------------------------------------------------------- 发起咨询 */

.picked { display: flex; gap: 11px; align-items: flex-start; }
.picked .meta { flex: 1; }
.picked .time { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-top: 6px; }

.form-row { margin-bottom: 14px; }
.form-row:last-child { margin-bottom: 0; }
.form-row > label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 7px; }
.form-row .grid-label { display: flex; align-items: center; gap: 12px; }
.form-row .grid-label > label { width: 52px; font-size: 12px; font-weight: 700; flex: 0 0 52px; }
.field-input {
  width: 100%; border: 1px solid #e2e8f1; border-radius: 10px; background: #fbfcfe;
  padding: 11px 12px; font-size: 12.5px; color: var(--ink); outline: none;
  font-family: inherit;
}
.field-input:focus { border-color: var(--primary); background: #fff; }
.field-input::placeholder { color: #a9b4c4; }
select.field-input { appearance: none; background-image: none; }
textarea.field-input { resize: none; line-height: 1.7; }
.char-count { text-align: right; font-size: 10px; color: #a9b4c4; margin-top: 4px; }
.form-error { font-size: 11px; color: #c0392b; margin-top: 8px; min-height: 14px; }

.paybar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.paybar .amount { font-size: 12.5px; color: #55647c; }
.paybar .amount b { font-size: 19px; color: var(--accent); margin-left: 2px; }
.btn-pay {
  background: var(--primary); color: #fff; border: 0; border-radius: 11px;
  padding: 14px 22px; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 18px rgba(10, 33, 64, .2);
}
.btn-pay[disabled] { opacity: .6; cursor: default; box-shadow: none; }
.pay-note { text-align: center; font-size: 10.5px; color: #93a0b3; margin-top: 12px; }

.order-done { text-align: center; padding: 10px 4px 4px; }
.order-done .tick {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 50%;
  background: #ecf7f0; color: #2f8f5b; display: flex; align-items: center; justify-content: center;
}
.order-done b { font-size: 15px; display: block; }
.order-done p { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 8px 0 0; }
.order-done .no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: #55647c; }

/* ---------------------------------------------------------- 荣誉与身份 */

.honors { display: grid; gap: 13px; }
.honor { display: flex; gap: 11px; align-items: flex-start; }
.honor + .honor { border-top: 1px solid #f0f3f8; padding-top: 13px; }
.honor-ico {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px;
  background: linear-gradient(140deg, #fdf4e6, #f4e6d0); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.honor-main { flex: 1; min-width: 0; }
.honor-top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.honor-top b { font-size: 12.8px; font-weight: 700; line-height: 1.5; }
.honor-when { font-size: 10.5px; color: var(--muted); white-space: nowrap; flex: 0 0 auto; }
.honor-meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; flex-wrap: wrap; }
.honor-tag {
  font-size: 9.5px; font-weight: 700; color: #8a5f22;
  background: var(--accent-soft); border-radius: 5px; padding: 2px 6px; flex: 0 0 auto;
}
.honor-org { font-size: 11px; color: #5b6a80; }
.honor-desc { font-size: 11px; color: #6d7b91; line-height: 1.7; margin-top: 5px; }

/* ---------------------------------------------------------- 连续滚动模式 */

.card-root.is-flow { position: relative; overflow-anchor: none; }
.card-root.is-flow * { overflow-anchor: none; }
.flow { padding-bottom: 6px; }

.flow-top { position: sticky; top: 0; z-index: 12; background: var(--card); }
.flow-nav { border-bottom: 1px solid var(--line); }
.flow-nav [data-role="flowTitle"] { transition: opacity .25s; }

.flow-sec { scroll-margin-top: 46px; }
.flow-sec + .flow-sec { padding-top: 2px; }

/* 首屏底部只留一个轻轻跳动的箭头，不写引导文案 */
.scroll-hint {
  display: flex; align-items: center; justify-content: center;
  padding: 2px 0 18px; color: #93a1b5; cursor: pointer;
}
.scroll-hint svg { animation: nudge 1.9s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* 入场动画只在连续滚动模式里生效；分页模式和导出长图必须始终可见 */
.card-root.is-flow .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.7,.3,1);
}
.card-root.is-flow .reveal.in { opacity: 1; transform: none; }
.card-root.instant .reveal { transition: none !important; }

.flow-end { padding: 18px 14px 16px; display: grid; gap: 9px; }

/* 底部常驻预约条 */
.dock {
  position: sticky; bottom: 0; z-index: 11;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 10px 10px; padding: 10px 12px 10px 16px;
  background: rgba(255, 255, 255, .93); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 30px rgba(16, 36, 66, .14);
  opacity: 0; transform: translateY(120%); pointer-events: none;
  transition: opacity .3s, transform .35s cubic-bezier(.22,.7,.3,1);
}
.dock.show { opacity: 1; transform: none; pointer-events: auto; }
.dock-info b { display: block; font-size: 13px; }
.dock-info span { display: block; font-size: 11px; color: var(--accent); font-weight: 700; margin-top: 2px; }
.dock .btn-pay { padding: 11px 18px; font-size: 13px; border-radius: 12px; }

/* 咨询浮层 */
/* 浮层要贴着"当前看到的那一屏"，不是贴着整页内容的底部，
   所以用一个高度为 0 的 sticky 锚点把它钉在滚动视口下沿。 */
.sheet-anchor { position: sticky; bottom: 0; height: 0; z-index: 20; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--sheet-h, 100dvh);
  display: flex; align-items: flex-end;
  background: rgba(12, 22, 40, 0); pointer-events: none;
  /* 关闭后彻底隐藏，滚到页面最底时不会露出半截；visibility 延后切换，
     这样关闭时的下滑动画还能完整播完 */
  visibility: hidden;
  transition: background .3s, visibility 0s linear .38s;
}
.sheet.open {
  background: rgba(12, 22, 40, .45); pointer-events: auto;
  visibility: visible; transition: background .3s, visibility 0s;
}
.sheet-card {
  width: 100%; max-height: 88%; background: var(--bg);
  border-radius: 20px 20px 0 0; overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .38s cubic-bezier(.22,.75,.3,1);
  box-shadow: 0 -14px 40px rgba(10, 25, 50, .2);
}
.sheet.open .sheet-card { transform: none; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px 12px; font-size: 14.5px; font-weight: 700;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.sheet-close { border: 0; background: #f2f5fa; border-radius: 9px; padding: 6px; color: #55647c; cursor: pointer; display: flex; }
.sheet-body { padding: 12px 14px 18px; overflow-y: auto; display: grid; gap: 11px; }
.sheet-body::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .card-root.is-flow .reveal { opacity: 1; transform: none; }
  .scroll-hint svg { animation: none; }
  .sheet-card, .dock { transition: none; }
}

/* ---------------------------------------------------------- 分享 */

.nav-icon { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; display: flex; }
.contact-line {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px; color: #5b6a80; padding: 2px 0 2px;
}
.contact-line a { color: var(--primary); text-decoration: none; font-weight: 700; }
.contact-line .sep { width: 1px; height: 11px; background: #ccd6e4; }

.share-panel { display: grid; gap: 14px; }
.share-tip { margin: 0; font-size: 12px; color: #5b6a80; line-height: 1.8; }
.share-link { display: flex; gap: 8px; }
.share-link .field-input { font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.share-link .btn-pick { white-space: nowrap; }
.share-qr { display: flex; gap: 14px; align-items: center; }
.share-qr img { width: 116px; height: 116px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.share-qr span { font-size: 11.5px; color: var(--muted); line-height: 1.8; }

.static-summary {
  margin: 0; padding: 13px; background: #f7f9fc; border: 1px solid var(--line);
  border-radius: 10px; font-size: 12px; line-height: 1.9; color: #3f4f66;
  white-space: pre-wrap; word-break: break-word;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}