/* ============================================================
   华知知产 App —— 设计稿对齐样式（知产通风格 → 华知）
   主色 #2F7BF6 · 页面底 #F0F6FF · 白卡大圆角 · 蓝/绿/橙/红状态
   ============================================================ */
:root {
  --brand: #2F7BF6; --brand-600: #1E63D8; --brand-50: #EAF2FE; --brand-100: #D8E7FD;
  --pg: #F0F6FF; --card: #fff;
  --tx1: #16233A; --tx2: #4A5B77; --tx3: #94A1B5;
  --ln: #E9EFF9; --ln2: #DFE8F6;
  --ok: #12B76A; --ok-bg: #E7F8F0; --run: #2F7BF6; --run-bg: #EAF2FE;
  --todo: #F79009; --todo-bg: #FEF3E2; --bad: #F04438; --bad-bg: #FDECEA;
  --gold: #E9B949;
  --r: 16px; --r-sm: 12px;
  --sh: 0 1px 2px rgba(22,35,58,.04), 0 6px 20px rgba(22,35,58,.06);
  --sh2: 0 2px 6px rgba(22,35,58,.06), 0 12px 34px rgba(22,35,58,.08);
  --tab-h: calc(64px + env(safe-area-inset-bottom, 0px));
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  background: var(--pg); color: var(--tx1); letter-spacing: .1px;
  min-height: 100dvh; max-width: 560px; margin: 0 auto; position: relative;
}
@media (min-width: 561px) { body { box-shadow: 0 0 60px rgba(22,35,58,.08); } }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }

#app { padding-bottom: calc(var(--tab-h) + 12px); min-height: 100dvh; }
/* 滚动定位时为底部 Tab 栏留出空间，防止按钮被遮挡 */
#app button, #app a.btn, #app input, #app textarea, #app select {
  scroll-margin-bottom: calc(var(--tab-h) + 16px);
}
.page { padding: 12px 14px 8px; animation: fadein .22s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 顶部栏 ---------- */
.appbar {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  height: 54px; padding: 0 6px;
  background: rgba(240,246,255,.9); backdrop-filter: saturate(180%) blur(18px);
}
.appbar .back {
  width: 40px; height: 40px; border: 0; background: none; color: var(--tx1);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.appbar .back svg { width: 22px; height: 22px; }
.appbar .title { text-align: center; font-size: 16.5px; font-weight: 700; }
.appbar .sub { text-align: center; font-size: 10.5px; color: var(--tx3); letter-spacing: 2px; margin-top: 1px; }
.appbar .cap { height: 40px; }
.appbar.ghost { background: none; }

/* ---------- 卡片 ---------- */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--sh); padding: 16px; margin-bottom: 12px; }
.card h3 { font-size: 16px; margin-bottom: 10px; }
.sect-title { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px 10px; }
.sect-title b { font-size: 17px; }
.sect-title a, .sect-title span.more { font-size: 12px; color: var(--tx3); }

/* ---------- Hero banner ---------- */
.hero {
  position: relative; border-radius: var(--r); overflow: hidden; color: #fff;
  background:
    radial-gradient(560px 300px at 90% -20%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(120deg, #1A55BE 0%, #2F7BF6 58%, #5AA8FF 100%);
  padding: 22px 18px; margin-bottom: 12px; box-shadow: 0 10px 30px rgba(47,123,246,.28);
}
.hero h1 { font-size: 23px; line-height: 1.35; }
.hero p { font-size: 13px; color: rgba(255,255,255,.85); margin-top: 8px; }
.hero .chips { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.hero .chips i {
  font-style: normal; font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
}

/* ---------- 宫格入口 ---------- */
.grid8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
.grid8 a { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; color: var(--tx2); }
.gicon {
  width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--brand-50), #F6FAFF); color: var(--brand);
  border: 1px solid var(--brand-100);
}
.gicon svg { width: 22px; height: 22px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* ---------- 数据条 ---------- */
.stats { display: flex; text-align: center; padding: 14px 0; }
.stats > div { flex: 1; }
.stats b { display: block; font-size: 21px; color: var(--brand-600); }
.stats b i { font-style: normal; font-size: 12px; margin-left: 1px; }
.stats span { font-size: 11.5px; color: var(--tx3); }
.stats .blue { color: var(--brand); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 46px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 600; transition: transform .15s;
}
.btn:active { transform: scale(.97); }
.btn-p { background: linear-gradient(135deg, var(--brand), var(--brand-600)); color: #fff; box-shadow: 0 6px 18px rgba(47,123,246,.3); }
.btn-o { background: #fff; color: var(--brand); border: 1px solid var(--brand-100); }
.btn-plain { background: #fff; color: var(--tx2); border: 1px solid var(--ln2); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 999px; }
.btn-block { width: 100%; }
.btn-mini { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 999px; background: var(--brand-50); color: var(--brand); border: 0; }

/* 底部操作条（服务详情等） */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  max-width: 560px; margin: 0 auto;
  display: flex; gap: 10px; align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96); backdrop-filter: blur(16px);
  border-top: 1px solid var(--ln); box-shadow: 0 -6px 24px rgba(22,35,58,.07);
}
.actionbar .side { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--tx3); width: 52px; }
.actionbar .side svg { width: 21px; height: 21px; stroke: var(--tx2); }
.actionbar .side.on svg { stroke: var(--brand); fill: var(--brand-50); }
.actionbar .btn { flex: 1; height: 44px; }

/* ---------- 表单 ---------- */
.field { display: flex; align-items: center; gap: 10px; padding: 13px 2px; border-bottom: 1px solid var(--ln); }
.field:last-child { border-bottom: 0; }
.field label { width: 88px; font-size: 14px; color: var(--tx2); flex: none; }
.field label i { color: var(--bad); font-style: normal; margin-right: 2px; }
.field input, .field select, .field textarea {
  flex: 1; border: 0; outline: none; background: none; font-size: 15px; color: var(--tx1);
  font-family: inherit; min-width: 0;
}
.field textarea { resize: none; min-height: 72px; line-height: 1.6; }
.field .ph { color: var(--tx3); }
.field input::placeholder, .field textarea::placeholder { color: var(--tx3); }
.hint { font-size: 11.5px; color: var(--tx3); margin: 6px 2px 0; }
.err-text { color: var(--bad); font-size: 12px; margin-top: 6px; }

/* 单选/胶囊 */
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg i {
  font-style: normal; font-size: 13px; padding: 8px 16px; border-radius: 999px;
  background: #F5F9FF; color: var(--tx2); border: 1px solid var(--ln2); cursor: pointer;
  transition: all .15s;
}
.seg i.on { background: var(--brand-50); color: var(--brand); border-color: var(--brand); font-weight: 600; }

/* ---------- 步骤条 ---------- */
.steps { display: flex; align-items: flex-start; padding: 14px 4px 6px; }
.steps > div { flex: 1; text-align: center; position: relative; }
.steps .dot {
  width: 26px; height: 26px; border-radius: 50%; margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  background: #E3ECFB; color: var(--tx3); font-size: 12px; font-weight: 700;
}
.steps .done .dot, .steps .cur .dot { background: var(--brand); color: #fff; }
.steps span { display: block; font-size: 11px; color: var(--tx3); }
.steps .cur span { color: var(--brand); font-weight: 600; }
.steps > div:not(:last-child)::after {
  content: ""; position: absolute; top: 13px; left: calc(50% + 16px); right: calc(-50% + 16px);
  height: 2px; background: #E3ECFB;
}
.steps > div.done:not(:last-child)::after { background: var(--brand); }

/* ---------- 列表卡（服务/订单/案件/资讯） ---------- */
.item {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border-radius: var(--r); box-shadow: var(--sh);
  padding: 14px; margin-bottom: 10px;
}
.item .ic {
  width: 48px; height: 48px; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--brand-50), #F6FAFF); color: var(--brand);
  border: 1px solid var(--brand-100);
}
.item .ic svg { width: 24px; height: 24px; }
.item .bd { flex: 1; min-width: 0; }
.item .bd b { font-size: 15px; display: block; margin-bottom: 3px; }
.item .bd p { font-size: 12.5px; color: var(--tx3); line-height: 1.6; }
.item .price { color: var(--brand); font-weight: 700; font-size: 15px; }
.item .price small { font-size: 11px; font-weight: 400; }
.item .ft { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; align-items: center; }

/* 徽章 */
.badge { font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 600; }
.b-ok { background: var(--ok-bg); color: var(--ok); }
.b-run { background: var(--run-bg); color: var(--run); }
.b-todo { background: var(--todo-bg); color: var(--todo); }
.b-bad { background: var(--bad-bg); color: var(--bad); }
.b-gray { background: #F0F3F8; color: var(--tx3); }
.b-brand { background: var(--brand-50); color: var(--brand); }
.b-gold { background: #FCF3DC; color: #B8860B; }

/* tabs（页面内） */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs i {
  font-style: normal; flex: none; font-size: 13px; padding: 8px 16px; border-radius: 999px;
  background: #fff; color: var(--tx2); border: 1px solid var(--ln2); cursor: pointer;
}
.tabs i.on { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.tabs.underline { gap: 26px; padding: 0; border-bottom: 1px solid var(--ln); background: #fff; border-radius: 0; }
.tabs.underline i { border: 0; background: none; color: var(--tx2); padding: 12px 2px; border-radius: 0; position: relative; }
.tabs.underline i.on { color: var(--brand); }
.tabs.underline i.on::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 3px; border-radius: 2px; background: var(--brand); }

/* ---------- 时间线 ---------- */
.tl { padding: 4px 0; }
.tl-i { display: flex; gap: 12px; position: relative; padding-bottom: 22px; }
.tl-i:last-child { padding-bottom: 4px; }
.tl-i::before {
  content: ""; position: absolute; left: 10px; top: 24px; bottom: 0; width: 2px; background: var(--ln2);
}
.tl-i:last-child::before { display: none; }
.tl-dot {
  width: 21px; height: 21px; border-radius: 50%; flex: none; z-index: 1;
  background: #E3ECFB; display: flex; align-items: center; justify-content: center;
}
.tl-dot svg { width: 12px; height: 12px; stroke: #fff; }
.tl-i.done .tl-dot { background: var(--brand); }
.tl-i.cur .tl-dot { box-shadow: 0 0 0 4px var(--brand-50); background: var(--brand); }
.tl-bd b { font-size: 14px; display: block; }
.tl-bd.done b { color: var(--tx1); }
.tl-bd p { font-size: 12px; color: var(--tx3); margin-top: 2px; line-height: 1.55; }
.tl-time { font-size: 11px; color: var(--tx3); white-space: nowrap; }

/* ---------- 套餐 ---------- */
.pkg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pkg > div {
  border: 1.5px solid var(--ln2); border-radius: var(--r-sm); padding: 14px 8px; text-align: center;
  position: relative; cursor: pointer; background: #fff;
}
.pkg > div.on { border-color: var(--brand); background: linear-gradient(180deg, #F4F9FF, #fff); }
.pkg .pname { font-size: 14px; font-weight: 700; }
.pkg .pdesc { font-size: 10.5px; color: var(--tx3); margin: 4px 0 8px; min-height: 26px; }
.pkg .pprice { font-size: 19px; color: var(--brand); font-weight: 800; }
.pkg .pprice small { font-size: 11px; }
.pkg .tag {
  position: absolute; top: -9px; right: 8px; background: linear-gradient(120deg, var(--brand), #5AA8FF);
  color: #fff; font-size: 10px; padding: 2px 9px; border-radius: 999px;
}

/* 对比表 */
.cmp { width: 100%; border-collapse: collapse; font-size: 12px; }
.cmp th, .cmp td { padding: 9px 4px; text-align: center; border-bottom: 1px solid var(--ln); }
.cmp th { color: var(--tx3); font-weight: 500; }
.cmp td:first-child { text-align: left; color: var(--tx2); }
.cmp .y { color: var(--brand); font-weight: 700; }
.cmp .n { color: #C6CFDC; }

/* ---------- 搜索 ---------- */
.searchbar { display: flex; gap: 8px; margin-bottom: 12px; }
.searchbar .box {
  flex: 1; display: flex; align-items: center; gap: 8px; background: #fff;
  border-radius: 999px; padding: 0 16px; height: 44px; border: 1px solid var(--ln2);
}
.searchbar .box svg { width: 18px; height: 18px; stroke: var(--tx3); flex: none; }
.searchbar .box input { flex: 1; border: 0; outline: none; background: none; font-size: 14px; min-width: 0; }
.searchbar .btn { height: 44px; padding: 0 20px; }

/* chips（热门/最近/标签） */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips i {
  font-style: normal; font-size: 12.5px; padding: 6px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ln2); color: var(--tx2); cursor: pointer;
}
.chips i.on { background: var(--brand-50); border-color: var(--brand); color: var(--brand); }

/* ---------- 底部 Tab ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  max-width: 560px; margin: 0 auto;
  display: flex; height: var(--tab-h); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255,255,255,.97); backdrop-filter: blur(18px);
  border-top: 1px solid var(--ln);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; color: var(--tx3); position: relative;
}
.tabbar a svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a.on { color: var(--brand); font-weight: 600; }
.tabbar .red-dot { position: absolute; top: 8px; right: calc(50% - 16px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--bad); color: #fff; font-size: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ---------- Toast / 空态 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%);
  background: rgba(22,35,58,.88); color: #fff; font-size: 13.5px;
  padding: 10px 20px; border-radius: 999px; z-index: 999; max-width: 80vw;
}
.empty { text-align: center; padding: 60px 0 40px; color: var(--tx3); font-size: 13.5px; }
.empty svg { width: 54px; height: 54px; stroke: #C6CFDC; margin-bottom: 12px; }

/* ---------- 登录页 ---------- */
.login-hero { padding: 46px 24px 24px; }
.login-hero h1 { font-size: 26px; }
.login-hero p { color: var(--tx3); font-size: 13px; margin-top: 8px; }
.login-card { margin: 0 14px; }
.login-foot { display: flex; justify-content: space-between; padding: 14px 4px; font-size: 13px; color: var(--tx2); }
.login-foot a { color: var(--brand); }

/* 上传块 */
.upl {
  border: 1.5px dashed var(--brand-100); border-radius: var(--r-sm); background: #F8FBFF;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 18px 8px; color: var(--brand); font-size: 12.5px; cursor: pointer; text-align: center;
}
.upl svg { width: 24px; height: 24px; }
.upl.has { border-style: solid; border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.upl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* 评价星 */
.stars { display: flex; gap: 6px; justify-content: center; }
.stars svg { width: 34px; height: 34px; cursor: pointer; }
.stars svg path { fill: #E3ECFB; }
.stars svg.on path { fill: var(--brand); }
.stars-sm svg { width: 14px; height: 14px; }
.stars-sm path { fill: var(--gold); }

/* 通知开关 */
.switch { width: 46px; height: 27px; border-radius: 999px; background: #DDE5F0; position: relative; cursor: pointer; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.switch.on { background: var(--brand); }
.switch.on::after { left: 21px; }

/* 设置分组 */
.group-title { font-size: 12.5px; color: var(--tx3); margin: 14px 4px 8px; }
.list-card { background: #fff; border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.li { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--ln); cursor: pointer; }
.li:last-child { border-bottom: 0; }
.li .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: none; }
.li .ic svg { width: 19px; height: 19px; }
.li .bd { flex: 1; min-width: 0; }
.li .bd b { font-size: 14.5px; display: block; }
.li .bd p { font-size: 11.5px; color: var(--tx3); margin-top: 1px; }
.li .arr { color: #C6CFDC; }

/* 聊天 */
.chat-wrap { display: flex; flex-direction: column; height: calc(100dvh - 54px - var(--tab-h)); }
.chat-body { flex: 1; overflow-y: auto; padding: 14px; }
.msg { display: flex; gap: 10px; margin-bottom: 16px; }
.msg .ava { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-50); display: flex; align-items: center; justify-content: center; flex: none; color: var(--brand); }
.msg .bub { max-width: 76%; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: var(--sh); font-size: 14.5px; line-height: 1.7; white-space: pre-wrap; }
.msg.me { flex-direction: row-reverse; }
.msg.me .bub { background: linear-gradient(135deg, var(--brand), var(--brand-600)); color: #fff; border-radius: 16px 4px 16px 16px; }
.chat-foot { padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--ln); }
.quick { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.quick i { font-style: normal; flex: none; font-size: 12px; padding: 7px 13px; border-radius: 999px; background: var(--brand-50); color: var(--brand); cursor: pointer; }
.chat-input { display: flex; gap: 8px; }
.chat-input input { flex: 1; height: 44px; border: 1px solid var(--ln2); border-radius: 999px; padding: 0 18px; outline: none; font-size: 14px; background: #F8FBFF; }
.chat-input .btn { width: 66px; height: 44px; padding: 0; border-radius: 999px; }

/* 支付方式 */
.paym { display: flex; align-items: center; gap: 12px; padding: 15px 2px; border-bottom: 1px solid var(--ln); cursor: pointer; }
.paym:last-child { border-bottom: 0; }
.paym .ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; font-size: 18px; }
.paym .bd { flex: 1; }
.paym .bd b { font-size: 15px; display: block; }
.paym .bd p { font-size: 11.5px; color: var(--tx3); }
.radio { width: 21px; height: 21px; border-radius: 50%; border: 2px solid #C6CFDC; flex: none; position: relative; }
.paym.on .radio { border-color: var(--brand); }
.paym.on .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); }

/* 支付成功 */
.paysuc { text-align: center; padding: 34px 0 10px; }
.paysuc .big { width: 72px; height: 72px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; box-shadow: 0 10px 30px rgba(47,123,246,.35); }
.paysuc .big svg { width: 34px; height: 34px; }
.paysuc h1 { font-size: 22px; }
.paysuc p { color: var(--tx3); font-size: 13px; margin-top: 8px; }
.kv { display: flex; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid var(--ln); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--tx3); }
.kv b { font-weight: 500; text-align: right; }
.kv .money { color: var(--brand); font-weight: 800; font-size: 16px; }

/* 会员 */
.member-card {
  border-radius: var(--r); padding: 20px 18px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(120deg, #2B3A67 0%, #3E5FBF 55%, #5AA8FF 100%);
  box-shadow: 0 10px 28px rgba(40,70,160,.3); margin-bottom: 12px;
}
.member-card .lv { font-size: 12px; background: rgba(255,255,255,.2); padding: 3px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); }
.member-card h2 { font-size: 21px; margin: 10px 0 4px; }
.member-card p { font-size: 12px; color: rgba(255,255,255,.8); }

/* 关于时间线 */
.about-tl { display: flex; justify-content: space-between; text-align: center; padding: 6px 0; }
.about-tl > div { flex: 1; position: relative; }
.about-tl .y { color: var(--brand); font-weight: 800; font-size: 15px; }
.about-tl .t { font-size: 13px; font-weight: 700; margin: 4px 0; }
.about-tl .d { font-size: 10.5px; color: var(--tx3); line-height: 1.5; }
.about-tl > div::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--brand-100); }
.about-tl > div:first-child::before { left: 50%; }
.about-tl > div:last-child::before { right: 50%; }
.about-tl .dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); margin: 0 auto 8px; position: relative; z-index: 1; }

/* 资讯卡 */
.news-item { display: flex; gap: 12px; background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: 12px; margin-bottom: 10px; }
.news-item .cover { width: 108px; height: 76px; border-radius: 10px; object-fit: cover; flex: none; background: var(--brand-50); }
.news-item .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.news-item .bd b { font-size: 14.5px; line-height: 1.45; }
.news-item .bd p { font-size: 11.5px; color: var(--tx3); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-item .meta { margin-top: auto; display: flex; gap: 12px; font-size: 10.5px; color: var(--tx3); align-items: center; }

/* 文章 */
.article { background: #fff; border-radius: var(--r); box-shadow: var(--sh); padding: 20px 18px; }
.article h1 { font-size: 20px; line-height: 1.5; }
.article .meta { font-size: 12px; color: var(--tx3); margin: 10px 0 16px; }
.article .body p { font-size: 15px; line-height: 1.9; margin-bottom: 14px; color: var(--tx2); }
.article .body h3 { font-size: 16px; margin: 18px 0 10px; }
.quote { background: var(--brand-50); border-radius: var(--r-sm); padding: 14px 16px; font-size: 13.5px; color: var(--brand-600); line-height: 1.8; margin: 14px 0; }

/* FAQ 手风琴 */
.faq { background: #fff; border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.faq .q { padding: 15px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; border-bottom: 1px solid var(--ln); font-size: 14.5px; font-weight: 600; }
.faq .q .n { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-50); color: var(--brand); font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.faq .a { display: none; padding: 2px 16px 15px 48px; font-size: 13.5px; color: var(--tx2); line-height: 1.8; }
.faq .q.on + .a { display: block; }
.faq .q .arr { margin-left: auto; color: var(--tx3); transition: transform .2s; }
.faq .q.on .arr { transform: rotate(180deg); }

/* 案例徽章组 */
.tagrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tagrow i { font-style: normal; font-size: 10.5px; padding: 2px 9px; border-radius: 999px; background: var(--brand-50); color: var(--brand); }

/* 协议勾选 */
.agree { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx2); margin: 12px 2px; }
.agree .ck { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #C6CFDC; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.agree .ck.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.agree .ck svg { width: 11px; height: 11px; stroke: #fff; }
.agree a { color: var(--brand); }

/* 提交按钮区 */
.submit-zone { padding: 6px 2px 16px; }
.safe-note { text-align: center; font-size: 11px; color: var(--tx3); margin-top: 10px; }

/* ---------- 确认弹层 ---------- */
.dlg-mask {
  position: fixed; inset: 0; z-index: 9998; background: rgba(15,26,45,.42);
  display: flex; align-items: center; justify-content: center; padding: 0 32px;
  opacity: 0; transition: opacity .18s ease; backdrop-filter: blur(2px);
}
.dlg-mask.on { opacity: 1; }
.dlg {
  width: 100%; max-width: 320px; background: #fff; border-radius: 18px;
  padding: 24px 20px 0; text-align: center; transform: scale(.94); transition: transform .18s ease;
  box-shadow: 0 12px 48px rgba(15,26,45,.22);
}
.dlg-mask.on .dlg { transform: scale(1); }
.dlg-t { font-size: 16.5px; font-weight: 700; color: var(--tx1); }
.dlg-d { font-size: 13px; color: var(--tx3); margin-top: 8px; line-height: 1.65; }
.dlg-b { display: flex; border-top: 1px solid var(--ln); margin-top: 20px; }
.dlg-b button {
  flex: 1; height: 50px; border: 0; background: none; font-size: 15.5px;
  font-family: inherit; cursor: pointer;
}
.dlg-no { color: var(--tx2); border-right: 1px solid var(--ln) !important; }
.dlg-yes { color: var(--bad); font-weight: 700; }

/* ================= 启动页 ================= */
#splash {
  position: fixed; inset: 0; z-index: 10000;
  background: linear-gradient(168deg, #1E63D8 0%, #2F7BF6 52%, #5AA8FF 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; transition: opacity .4s ease, transform .4s ease;
}
#splash.leaving { opacity: 0; transform: scale(1.04); pointer-events: none; }

/* 背景装饰：漂浮圆环 */
.sp-deco { position: absolute; inset: 0; pointer-events: none; }
.sp-deco .ring {
  position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.16);
  animation: spFloat 7s ease-in-out infinite;
}
.sp-deco .r1 { width: 320px; height: 320px; right: -110px; top: -90px; }
.sp-deco .r2 { width: 190px; height: 190px; left: -60px; bottom: 12%; animation-delay: 1.6s; }
.sp-deco .r3 { width: 84px; height: 84px; right: 18%; bottom: 22%; border-color: rgba(255,255,255,.24); animation-delay: 3s; }
@keyframes spFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}

/* 主体 */
.sp-core { position: relative; z-index: 2; text-align: center; transform: translateY(-3dvh); }
.sp-logo {
  width: 118px; height: 118px; border-radius: 28px; margin: 0 auto;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 48px rgba(10,42,98,.34), inset 0 1px 0 rgba(255,255,255,.28);
  animation: spPop .72s cubic-bezier(.34,1.4,.5,1) both;
}
.sp-logo img { width: 78px; height: auto; display: block; filter: drop-shadow(0 3px 6px rgba(8,32,74,.4)); }
.sp-name {
  margin-top: 26px; font-size: 25px; font-weight: 800; letter-spacing: 6px; text-indent: 6px;
  color: #fff; animation: spRise .6s .18s cubic-bezier(.2,.8,.3,1) both;
  text-shadow: 0 2px 10px rgba(10,42,98,.3);
}
.sp-slogan {
  margin-top: 12px; font-size: 13.5px; letter-spacing: 7px; text-indent: 7px;
  color: rgba(255,255,255,.78); animation: spRise .6s .32s cubic-bezier(.2,.8,.3,1) both;
  white-space: nowrap;
}
.sp-bar {
  margin-top: 32px; width: 132px; height: 3px; border-radius: 2px; margin-left: auto; margin-right: auto;
  background: rgba(255,255,255,.22); overflow: hidden; animation: spRise .5s .45s both;
}
.sp-bar i {
  display: block; height: 100%; width: 40%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.5), #fff);
  animation: spSlide 1.15s .5s ease-in-out infinite;
}
.sp-foot {
  position: absolute; bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0; text-align: center; z-index: 2;
  font-size: 11px; color: rgba(255,255,255,.6); letter-spacing: .6px;
  animation: spRise .6s .55s both;
}
@keyframes spPop { 0% { opacity: 0; transform: scale(.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes spRise { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes spSlide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

@media (min-width: 700px) {
  .sp-logo { width: 134px; height: 134px; }
  .sp-logo img { width: 88px; }
  .sp-name { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-logo, .sp-name, .sp-slogan, .sp-bar, .sp-foot { animation: none; }
  .sp-deco .ring { animation: none; }
  .sp-bar i { animation: none; width: 100%; }
}

/* ================= 电脑端（≥1024px）================= */
.topnav { display: none; }

@media (min-width: 1024px) {
  /* 隐藏手机底部 Tab 与页头，启用顶部导航 */
  .tabbar { display: none !important; }
  .appbar { display: none !important; }
  #app { padding-bottom: 40px !important; max-width: 1180px; margin: 0 auto; }
  body { padding-top: 64px; background:
      radial-gradient(1200px 500px at 85% -80px, #DFEBFD 0%, rgba(223,235,253,0) 60%),
      linear-gradient(180deg, #EAF2FE 0%, #F5F8FE 260px); }

  /* ---- 顶部导航 ---- */
  .topnav {
    display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    background: rgba(255,255,255,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(233,239,249,.9);
    box-shadow: 0 1px 0 rgba(47,123,246,.04), 0 6px 24px rgba(22,35,58,.05);
  }
  .topnav-in {
    max-width: 1180px; margin: 0 auto; height: 64px; padding: 0 24px;
    display: flex; align-items: center; gap: 36px;
  }
  .tn-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .tn-brand img { width: 40px; height: 40px; object-fit: contain; }
  .tn-bt { display: flex; flex-direction: column; line-height: 1.25; }
  .tn-bt b { font-size: 17px; color: var(--tx1); letter-spacing: 2px; }
  .tn-bt i { font-style: normal; font-size: 10px; color: var(--tx3); letter-spacing: 2.5px; }
  .tn-links { display: flex; gap: 6px; flex: 1; justify-content: center; }
  .tn-links a {
    position: relative; padding: 8px 14px; font-size: 14.5px; color: var(--tx2);
    text-decoration: none; border-radius: 10px; transition: all .18s ease;
  }
  .tn-links a:hover { color: var(--brand); background: var(--brand-50); }
  .tn-links a.on { color: var(--brand); font-weight: 600; }
  .tn-links a.on::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2.5px;
    border-radius: 2px; background: var(--brand);
  }
  .tn-acts { display: flex; align-items: center; gap: 12px; }
  .tn-ghost, .tn-cta {
    height: 38px; padding: 0 18px; border-radius: 10px; display: inline-flex; align-items: center;
    font-size: 13.5px; text-decoration: none; transition: all .18s ease;
  }
  .tn-ghost { color: var(--brand); border: 1px solid var(--brand-100); background: #fff; }
  .tn-ghost:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(47,123,246,.16); }
  .tn-cta { color: #fff; background: linear-gradient(135deg, var(--brand-600), var(--brand)); font-weight: 600; }
  .tn-cta:hover { box-shadow: 0 6px 18px rgba(47,123,246,.35); transform: translateY(-1px); }

  /* ---- 首页 Hero：大横幅 ---- */
  .page { padding: 20px 0 8px; }
  .hero {
    border-radius: 22px; padding: 58px 56px 54px; position: relative; overflow: hidden;
    background:
      linear-gradient(96deg, rgba(245,250,255,.99) 0%, rgba(235,244,255,.96) 42%, rgba(214,233,255,.78) 66%, rgba(196,222,253,.62) 100%),
      linear-gradient(120deg, #3D85E8, #2F6FD0),
      url(../assets/img/hero.jpg) center right / cover no-repeat;
    box-shadow: var(--sh-2);
  }
  .hero::before, .hero::after { display: none; }
  .hero h1 { font-size: 42px; line-height: 1.28; letter-spacing: 1px; color: var(--tx1); }
  .hero h1 br + * { }
  .hero p { font-size: 17px; margin-top: 14px; color: var(--tx2); }
  .hero .chips { margin-top: 22px; }
  .hero .chips i {
    font-size: 13.5px; padding: 7px 16px; background: rgba(255,255,255,.8);
    border: 1px solid rgba(47,123,246,.16); border-radius: 999px;
  }

  /* ---- 宫格 ---- */
  .grid8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; padding: 26px 8px; }
  .grid8 a { padding: 10px 0; border-radius: 14px; }
  .grid8 a:hover { background: var(--brand-50); transform: translateY(-2px); }
  .grid8 .gicon { width: 54px; height: 54px; }
  .grid8 a { font-size: 13.5px; }

  /* ---- 数据条 ---- */
  .stats { display: flex; }
  .stats > div { flex: 1; }
  .stats b { font-size: 34px; }

  /* ---- 通用卡片 ---- */
  .card {
    border-radius: 18px; padding: 24px 26px;
    border: 1px solid rgba(255,255,255,.9);
  }
  .card:hover { box-shadow: 0 8px 30px rgba(47,123,246,.10); }

  /* ---- 列表双列 ---- */
  .sect-title { margin-top: 30px; }
  .item { padding: 18px 20px; }
  .news-grid, .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 1024px) {
  body { max-width: none !important; box-shadow: none !important; }
  #app { max-width: 1180px !important; }
  .actionbar { max-width: 1180px !important; padding-left: max(24px, calc((100vw - 1180px)/2 + 24px)); padding-right: max(24px, calc((100vw - 1180px)/2 + 24px)); }
  .actionbar .btn { height: 48px; }
}

/* grid4 图标尺寸约束（修复 SVG 无尺寸导致的巨大图标） */
.grid4 svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* 咨询报价标签 */
.quote-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-600);
  font-size: 12.5px; font-weight: 600; border: 1px solid var(--brand-100);
}
.quote-tag svg { width: 13px; height: 13px; stroke: currentColor; }
.quote-tag i { font-style: normal; }

/* ============================================================
   悬浮智能助手气泡（右下角）
   - 底部 tabbar/actionbar 之上，不遮挡主操作
   - 拖拽/点击均可；点击进 #/consult
   ============================================================ */
.ai-fab {
  position: fixed; right: 16px; z-index: 80;
  bottom: calc(var(--tab-h) + 16px);
  width: 54px; height: 54px; border: 0; border-radius: 50%;
  background: linear-gradient(140deg, #3E86F0, #1E63D8 70%);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(30,99,216,.38), 0 2px 6px rgba(16,32,60,.14);
  transition: transform .24s cubic-bezier(.34,1.3,.5,1), box-shadow .24s, opacity .24s;
  -webkit-tap-highlight-color: transparent;
}
.ai-fab svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ai-fab::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(62,134,240,.45);
  animation: aifabRing 2.6s ease-out infinite; pointer-events: none;
}
@keyframes aifabRing {
  0% { transform: scale(.94); opacity: .9; }
  70% { transform: scale(1.24); opacity: 0; }
  100% { transform: scale(1.24); opacity: 0; }
}
.ai-fab:active { transform: scale(.94); }
.ai-fab .ai-fab-dot {
  position: absolute; top: 7px; right: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22C55E; border: 2px solid #fff;
}
.ai-fab.hide { opacity: 0; pointer-events: none; transform: scale(.6); }

/* 首次进入的引导气泡，5 秒后自动消失 */
.ai-tip {
  position: fixed; right: 78px; z-index: 80;
  bottom: calc(var(--tab-h) + 26px);
  max-width: 200px; padding: 9px 12px;
  background: #fff; color: var(--tx1);
  font-size: 12.5px; line-height: 1.55;
  border-radius: 12px; border: 1px solid var(--ln);
  box-shadow: 0 8px 22px rgba(22,35,58,.12);
  opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.ai-tip.on { opacity: 1; transform: none; }
.ai-tip::after {
  content: ''; position: absolute; right: -5px; bottom: 14px;
  width: 10px; height: 10px; background: #fff;
  border-right: 1px solid var(--ln); border-bottom: 1px solid var(--ln);
  transform: rotate(-45deg);
}

/* 电脑端：固定在内容区右下，尺寸略大 */
@media (min-width: 1024px) {
  .ai-fab { right: max(24px, calc((100vw - 1180px)/2 - 72px)); bottom: 32px; width: 58px; height: 58px; }
  .ai-fab svg { width: 28px; height: 28px; }
  .ai-tip { right: max(90px, calc((100vw - 1180px)/2 - 4px)); bottom: 40px; }
}

/* AI 助手机器人头像：品牌蓝渐变底 + 白色描边机器人 */
.msg .ava.ai {
  background: linear-gradient(140deg, #4B8CF3, #1E63D8 72%);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(30,99,216,.28);
}
.msg .ava.ai svg { width: 21px; height: 21px; stroke: currentColor; fill: none; }
.ai-fab svg { stroke-width: 1.75; }

/* ============================================================
   3D 机器人头像（统一视觉：圆形 + 品牌蓝渐变底 + 白色光圈）
   ============================================================ */
/* 悬浮助手按钮：圆形渐变，机器人居中 */
.ai-fab {
  background: radial-gradient(120% 120% at 30% 22%, #6FA8F8 0%, #3E86F0 42%, #1E63D8 100%);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 10px 26px rgba(30,99,216,.42), inset 0 1px 0 rgba(255,255,255,.35);
}
.ai-fab img { width: 40px; height: 40px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(10,30,70,.25)); }
@media (min-width: 1024px) {
  .ai-fab img { width: 44px; height: 44px; }
}
/* 聊天页 AI 头像：圆形渐变底 + 机器人 */
.msg .ava.ai {
  background: radial-gradient(120% 120% at 30% 22%, #6FA8F8 0%, #3E86F0 42%, #1E63D8 100%);
  color: #fff; border-radius: 50%;
  box-shadow: 0 3px 10px rgba(30,99,216,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.msg .ava.ai img { width: 27px; height: 27px; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(10,30,70,.2)); }
.msg .ava.ai svg { width: 21px; height: 21px; stroke: currentColor; fill: none; }

/* ============ 聊天页：AI 免责小字（老版风格：浅灰小字 + 轻微模糊感） ============ */
.msg .bub .disc {
  display: block;
  margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed rgba(150,165,190,.35);
  font-size: 10.5px; line-height: 1.6;
  color: #A9B6C8;
  filter: blur(.25px);
  letter-spacing: .2px;
}
.chat-note {
  margin-top: 7px; text-align: center;
  font-size: 10.5px; color: #A9B6C8;
  filter: blur(.25px); letter-spacing: .2px;
}

/* ============ 联系我们页 ============ */
.tel-hero { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.tel-hero .tel-ic { width: 46px; height: 46px; border-radius: 13px; flex: none;
  background: linear-gradient(150deg, var(--brand-50), #F6FAFF); color: var(--brand);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--brand-100); }
.tel-hero .tel-ic svg { width: 24px; height: 24px; }
.tel-hero b { font-size: 17px; }
.tel-hero p { font-size: 11.5px; color: var(--tx3); margin-top: 2px; }

.wx-card { display: flex; align-items: center; gap: 12px; background: #fff;
  border-radius: var(--r); box-shadow: var(--sh); padding: 16px 14px; margin-bottom: 12px; }
.wx-card .wx-ava { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.wx-card .wx-qrcode { width: 120px; height: 120px; border-radius: 12px; flex: none; border: 1px solid var(--ln); }
.wx-card .wx-bd { flex: 1; }
.wx-card .wx-bd b { font-size: 15px; display: block; }
.wx-card .wx-bd p { font-size: 12px; color: var(--tx3); margin-top: 4px; line-height: 1.6; }
.wx-card .arr { color: var(--tx3); }

.office { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--ln); }
.office:last-of-type { border-bottom: 0; }
.office .ic { width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: linear-gradient(150deg, var(--brand-50), #F6FAFF); color: var(--brand);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--brand-100); }
.office .ic svg { width: 20px; height: 20px; }
.office .bd b { font-size: 13.5px; }
.office .bd p { font-size: 12px; color: var(--tx3); margin-top: 3px; line-height: 1.65; }

/* ============ 免费预约咨询（留资） ============ */
.lead-cta {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 46px);
  margin: -6px 0 16px 46px; padding: 11px 14px;
  background: linear-gradient(120deg, #FFF8EC, #FFF3DD);
  border: 1px solid #F0DCB2; border-radius: 12px;
  color: #8A6A1F; font-size: 12.5px; font-weight: 600;
  animation: leadPulse 2.2s ease-in-out infinite;
}
@keyframes leadPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(200,163,89,.35); }
  50% { box-shadow: 0 0 0 6px rgba(200,163,89,0); }
}