/* ============================================================
   跃升 · 法律知识与问答平台  |  全局样式
   设计基调：浅蓝主色 + 雅金点缀，大留白、细描边、克制阴影
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 品牌色 */
  --navy:          #1462B8;
  --navy-600:      #1A6FC9;
  --navy-500:      #2F86E1;
  --navy-100:      #E3F0FC;
  --navy-050:      #F1F8FE;
  /* 标题 / 加粗文字：白底与无底色场景统一黑色系（略作层次区分） */
  --t1:            #000000;   /* h1 / h2 */
  --t2:            #0A0C10;   /* h3 */
  --t3:            #141820;   /* h4 / h5 */
  --strong:        #000000;   /* strong / b */

  --gold:          #C39C54;
  --gold-600:      #AD8636;
  --gold-050:      #FCF8F0;

  /* 中性色 */
  --ink:           #171A1F;
  --ink-2:         #3A4048;
  --muted:         #6B7280;
  --muted-2:       #9AA1AB;
  --line:          #E2EBF6;
  --line-2:        #CBDEF2;
  --bg:            #FFFFFF;
  --bg-soft:       #F5F9FF;
  --bg-soft-2:     #E9F2FD;

  /* 语义色 */
  --success:       #1E8E5A;
  --danger:        #C4453B;
  --info:          #2F86E1;

  /* 尺寸 */
  --radius-sm:     4px;
  --radius:        8px;
  --radius-lg:     14px;
  --container:     1200px;
  --header-h:      72px;

  /* 阴影 */
  --shadow-xs:     0 1px 2px rgba(20, 98, 184, .05);
  --shadow-sm:     0 2px 8px rgba(20, 98, 184, .06);
  --shadow-md:     0 6px 20px rgba(20, 98, 184, .08);
  --shadow-lg:     0 16px 40px rgba(20, 98, 184, .12);

  /* 字体 */
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
          "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "DIN Alternate", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5 { margin: 0; color: var(--t2); font-weight: 700; line-height: 1.35; letter-spacing: .01em; }
h1, h2 { color: var(--t1); }
h4, h5 { color: var(--t3); }
/* 加粗文字：白底 / 无底色场景统一黑色 */
strong, b { color: var(--strong); }
/* 按钮 / 标签内的粗体跟随所在容器的颜色（避免 hover 态失效） */
button b, button strong, .btn b, .btn strong, .tag b, .tag strong, .chip b, .chip strong { color: inherit; }
h1 { font-size: 38px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
p  { margin: 0 0 14px; }
a  { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--navy-500); }
img { max-width: 100%; display: block; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
::selection { background: var(--navy-100); color: var(--navy); }

/* ---------- 3. 布局工具 ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 880px; }
.row { display: flex; gap: 24px; }
.spacer { flex: 1; }

.section { padding: 76px 0; }
.section-sm { padding: 48px 0; }
.section-soft { background: var(--bg-soft); }
.section-navy { background: var(--navy); color: rgba(255,255,255,.78); }
.section-navy h2, .section-navy h3 { color: #fff; }

.section-head { margin-bottom: 36px; }
.section-head.center { text-align: center; max-width: 660px; margin-left: auto; margin-right: auto; }
.section-head .eyebrow { display: inline-block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 10px; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--muted); font-size: 15px; margin: 0; }
.section-head.center p { margin: 0 auto; }
.section-head .divider { width: 44px; height: 3px; background: var(--gold); border-radius: 2px; margin-top: 16px; }
.section-head.center .divider { margin-left: auto; margin-right: auto; }

/* ---------- 4. 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 22px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  transition: all .22s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-gold { background: var(--gold-600); color: #fff; }
.btn-gold:hover { background: #95691F; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(184,145,79,.28); }
.btn-outline { border: 1px solid var(--line-2); background: #fff; color: var(--navy); }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--navy-050); }
.btn-ghost-light { border: 1px solid rgba(255,255,255,.34); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.6); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 50px; padding: 0 30px; font-size: 15px; }
.btn-block { width: 100%; }

/* ---------- 5. 顶部栏 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; height: var(--header-h); gap: 32px; }

.logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.logo-mark {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-600) 100%);
  display: grid; place-items: center; color: var(--gold);
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  box-shadow: var(--shadow-xs);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text strong { font-size: 17px; color: var(--t1); letter-spacing: .04em; font-weight: 700; }
.logo-text span { font-size: 11px; color: var(--muted-2); letter-spacing: .14em; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  position: relative; padding: 8px 14px; font-size: 15px; font-weight: 500; color: var(--ink-2);
  border-radius: var(--radius-sm);
}
.main-nav a:hover { color: var(--navy); background: var(--navy-050); }
.main-nav a.active { color: var(--navy); font-weight: 600; }
.main-nav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -19px;
  height: 2px; background: var(--gold); border-radius: 2px;
}
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.header-phone { display: flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 600; font-size: 14px; }
.header-phone svg { width: 16px; height: 16px; }

.nav-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); align-items: center; justify-content: center; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--navy); position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--navy); }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }

/* ---------- 6. 页脚 ---------- */
.site-footer { background: #1d1e1e; color: rgba(255,255,255,.62); font-size: 14px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1.6fr 1.35fr; gap: 40px; padding: 60px 0 44px; }
.footer-brand .logo-text strong { color: #fff; }
.footer-brand .logo-text span { color: rgba(255,255,255,.45); }
.footer-brand p { margin: 18px 0 0; max-width: 320px; line-height: 1.85; }
.footer-col h4 { color: #fff; font-size: 15px; margin-bottom: 18px; letter-spacing: .04em; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: rgba(255,255,255,.62); }
.footer-col a:hover { color: #fff; }
/* 热门领域：8 个分两列，每列 4 个 */
.footer-fields .field-list {
  display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column;
  column-gap: 28px; row-gap: 11px;
}
.footer-fields .field-list li { margin-bottom: 0; white-space: nowrap; }
.footer-contact li { display: flex; gap: 10px; }
.footer-contact svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 4px; color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.45);
}
.footer-bottom a { color: rgba(255,255,255,.55); margin-left: 18px; }
.footer-bottom a:hover { color: #fff; }
.footer-note { background: var(--bg-soft); border-top: 3px solid var(--gold); padding: 26px 0; font-size: 13px; color: var(--muted); line-height: 1.9; }

/* ---------- 6b. 页脚友情链接 ---------- */
.footer-links {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px; color: rgba(255,255,255,.45);
}
.footer-links b { color: rgba(255,255,255,.7); font-weight: 600; letter-spacing: .06em; flex-shrink: 0; }
.footer-links span { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,.55); }
.footer-links a:hover { color: #fff; }

/* ---------- 7. 通用卡片 / 标签 ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: all .25s var(--ease);
}
.card-hover:hover { border-color: var(--navy-100); box-shadow: var(--shadow-md); transform: translateY(-3px); }

.tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  font-size: 12px; font-weight: 600; border-radius: 3px;
  background: var(--navy-050); color: var(--navy-500); letter-spacing: .02em;
}
.tag-gold { background: var(--gold-050); color: var(--gold-600); }
.tag-line { background: transparent; border: 1px solid var(--line-2); color: var(--muted); }
.tag-green { background: #EAF6EF; color: var(--success); }
.tag-red { background: #FBEEEC; color: var(--danger); }

.meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted-2); flex-wrap: wrap; }
.meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }

/* ---------- 8. 面包屑 & 分页 ---------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-2); padding: 22px 0; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb svg { width: 12px; height: 12px; opacity: .6; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-2); background: #fff; transition: all .2s var(--ease);
}
.pagination a:hover { border-color: var(--navy); color: var(--navy); }
.pagination .current { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.pagination .disabled { color: var(--muted-2); background: var(--bg-soft); }

/* ---------- 9. 搜索框 ---------- */
.searchbar {
  display: flex; align-items: center; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px; box-shadow: var(--shadow-sm); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.searchbar:focus-within { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(47,134,225,.1); }
.searchbar input {
  flex: 1; height: 44px; border: 0; outline: none; padding: 0 16px; font-size: 15px; background: transparent;
}
.searchbar input::placeholder { color: var(--muted-2); }
.searchbar .btn { height: 44px; }

/* ---------- 10. 领域入口 ---------- */
.field-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.field-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: all .25s var(--ease);
}
.field-card:hover { border-color: var(--navy-500); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.field-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--navy-050); color: var(--navy-600);
  display: grid; place-items: center; font-size: 20px;
  transition: all .25s var(--ease);
}
.field-card:hover .field-icon { background: var(--navy); color: var(--gold); }
.field-body h4 { font-size: 15px; margin-bottom: 3px; }
.field-body p { margin: 0; font-size: 12.5px; color: var(--muted-2); }

/* ---------- 11. 首页 Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    linear-gradient(100deg, rgba(10,32,66,.86) 0%, rgba(13,42,84,.58) 46%, rgba(13,42,84,.18) 78%, rgba(13,42,84,.08) 100%),
    url("../img/banner.png") center right / cover no-repeat;
  color: #fff; padding: 92px 0 84px;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,32,66,.12) 0%, rgba(10,32,66,0) 30%, rgba(10,32,66,.18) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 780px; }
.hero .eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.hero h1 { color: #fff; font-size: 46px; line-height: 1.28; margin: 18px 0 18px; letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-lead { font-size: 16.5px; line-height: 1.85; color: rgba(255,255,255,.76); max-width: 620px; margin-bottom: 34px; }
.hero-search { max-width: 620px; }
.hero-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; font-size: 13px; align-items: center; }
.hero-tags span { color: rgba(255,255,255,.5); }
.hero-links { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-tags a {
  padding: 5px 12px; border-radius: 20px; background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.14); transition: all .2s var(--ease);
  line-height: 1.6;
}
.hero-tags a:hover { background: rgba(255,255,255,.2); color: #fff; }

.hero-stats { display: flex; gap: 56px; margin-top: 52px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.14); flex-wrap: wrap; }
.hero-stats .stat b { display: block; font-size: 30px; color: #fff; font-weight: 700; letter-spacing: .01em; font-family: var(--font-num); }
.hero-stats .stat b i { font-style: normal; font-size: 15px; color: var(--gold); margin-left: 2px; }
.hero-stats .stat span { font-size: 13px; color: rgba(255,255,255,.55); }

/* ---------- 12. 列表卡片 ---------- */
.list-grid { display: grid; gap: 16px; }
/* 知识卡片（图文结构：缩略图 + 正文 + 数据） */
.know-card {
  display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 22px; align-items: center;
  padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: all .25s var(--ease);
}
.know-card:hover { border-color: var(--navy-100); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.thumb {
  position: relative; width: 116px; height: 84px; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: #fff; overflow: hidden; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb b {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 0 5px; z-index: 2;
  font-size: 11px; font-weight: 600; text-align: center; letter-spacing: .04em;
  background: linear-gradient(to top, rgba(8,38,72,.78) 0%, rgba(8,38,72,.35) 100%);
  color: rgba(255,255,255,.96);
}
.thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 60%);
}

/* 延伸阅读（图文卡片） */
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rel-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: all .25s var(--ease);
}
.rel-card:hover { border-color: var(--navy-100); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.rel-thumb { position: relative; height: 104px; display: grid; place-items: center; color: #fff; overflow: hidden; }
.rel-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rel-thumb b {
  position: absolute; left: 12px; bottom: 10px; font-size: 11.5px; font-weight: 600; z-index: 2;
  padding: 2px 9px; border-radius: 3px; background: rgba(6,20,36,.66); letter-spacing: .04em;
}
.rel-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.rel-body h4 {
  font-size: 14.5px; line-height: 1.6; margin-bottom: 8px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rel-body p {
  font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rel-body .meta { margin-top: auto; font-size: 12px; }
.know-card h3 { font-size: 17px; margin-bottom: 8px; line-height: 1.5; }
.know-card .excerpt {
  font-size: 13.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.72;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.know-card .card-side { text-align: right; color: var(--muted-2); font-size: 12.5px; white-space: nowrap; }
.know-card .card-side .num { font-family: var(--font-num); }

.qa-card {
  padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: all .25s var(--ease);
}
.qa-card:hover { border-color: var(--navy-100); box-shadow: var(--shadow-md); }
.qa-q { display: flex; gap: 12px; align-items: flex-start; }
.qa-badge {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 3px;
  background: var(--navy); color: #fff; font-size: 13px; font-weight: 700;
  display: grid; place-items: center; margin-top: 3px;
}
.qa-card h3 { font-size: 16.5px; line-height: 1.55; margin-bottom: 10px; font-weight: 600; }
.qa-answer {
  margin: 12px 0 14px; padding: 14px 16px; background: var(--bg-soft);
  border-left: 3px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13.5px; color: var(--muted); line-height: 1.78;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qa-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-2); }
.qa-lawyer { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--navy-100); color: var(--navy-600);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
  overflow: hidden; position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
/* 平台助手头像（与品牌标识一致） */
.avatar-bot { background: var(--navy); color: var(--gold); font-size: 13px; font-weight: 700; }
.chat-head .avatar-bot { background: var(--gold); color: var(--navy); font-size: 16px; }

/* ---------- 13. 筛选器 ---------- */
.filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 16px 20px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 28px;
}
.filter-bar .filter-label { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.chip {
  padding: 6px 14px; border-radius: 20px; font-size: 13.5px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--navy-500); color: var(--navy-500); }
.chip.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.sort-select { margin-left: auto; height: 34px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 10px; background: #fff; font-size: 13px; outline: none; }

.result-bar { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.result-bar b { color: var(--strong); font-family: var(--font-num); }

/* ---------- 14. 内容页正文 ---------- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.article-main { min-width: 0; }
.article-header { padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.article-header h1 { font-size: 32px; line-height: 1.42; margin: 14px 0 18px; }
.article-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.article-meta .author { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-weight: 600; }
.article-meta .avatar { width: 34px; height: 34px; font-size: 13px; }

.article-body { font-size: 16px; line-height: 1.95; color: var(--ink-2); }
.article-body h2 {
  font-size: 22px; margin: 44px 0 16px; padding-left: 14px;
  border-left: 4px solid var(--gold); line-height: 1.45;
}
.article-body h3 { font-size: 17.5px; margin: 30px 0 12px; }
.article-body p { margin: 0 0 18px; }
.article-body ul, .article-body ol { margin: 0 0 20px; }
.article-body li { margin-bottom: 9px; }
.article-body strong { color: var(--t1); font-weight: 600; }
.article-body a { color: var(--navy-500); text-decoration: underline; text-underline-offset: 3px; }

.lead {
  font-size: 16.5px; line-height: 1.9; color: var(--muted);
  padding: 18px 22px; background: var(--bg-soft); border-radius: var(--radius);
  margin-bottom: 32px; border-left: 3px solid var(--navy);
}
.callout {
  padding: 18px 22px; border-radius: var(--radius); margin: 26px 0;
  background: var(--gold-050); border: 1px solid rgba(184,145,79,.28); font-size: 14.5px; line-height: 1.85;
}
.callout .callout-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--gold-600); margin-bottom: 8px; font-size: 14px; }
.callout p:last-child { margin-bottom: 0; }
.callout-law { background: var(--navy-050); border-color: var(--navy-100); }
.callout-law .callout-title { color: var(--navy-600); }

.law-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px; margin: 26px 0; background: #fff;
}
.law-box h4 { font-size: 15px; margin-bottom: 12px; color: var(--t3); }
.law-box ol { margin: 0; padding-left: 20px; font-size: 14.5px; color: var(--ink-2); }
.law-box li { margin-bottom: 10px; }
.law-box li b { color: var(--strong); }

.data-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px; }
.data-table th, .data-table td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; }
.data-table th { background: var(--navy-050); color: var(--navy); font-weight: 600; }
.data-table td { color: var(--ink-2); }

.article-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.article-share { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 13px; color: var(--muted); }

/* 侧栏组件 */
.side-widget { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 20px; overflow: hidden; }
.side-widget-head { padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14.5px; color: var(--navy); background: var(--bg-soft); }
.side-widget-body { padding: 16px 18px; }
.side-toc { list-style: none; padding: 0; margin: 0; }
.side-toc li { margin: 0; }
.side-toc a {
  display: block; padding: 8px 18px; font-size: 13.5px; color: var(--muted);
  border-left: 2px solid transparent; transition: all .2s var(--ease);
}
.side-toc a:hover { color: var(--navy); background: var(--navy-050); }
.side-toc a.active { color: var(--navy); font-weight: 600; border-left-color: var(--gold); background: var(--navy-050); }
.side-toc .sub { padding-left: 32px; font-size: 13px; }

.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { padding: 12px 0; border-bottom: 1px dashed var(--line); margin: 0; }
.side-list li:last-child { border-bottom: 0; }
.side-list a { font-size: 14px; line-height: 1.6; color: var(--ink-2); display: block; }
.side-list a:hover { color: var(--navy-500); }
.side-list .rank { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 3px; background: var(--bg-soft-2); color: var(--muted); font-size: 12px; font-weight: 700; margin-right: 8px; }
.side-list li:nth-child(1) .rank, .side-list li:nth-child(2) .rank, .side-list li:nth-child(3) .rank { background: var(--navy); color: #fff; }

.side-cta { background: linear-gradient(150deg, var(--navy) 0%, var(--navy-600) 100%); color: #fff; padding: 24px 22px; border-radius: var(--radius); text-align: center; }
.side-cta h4 { color: #fff; font-size: 16px; margin-bottom: 8px; }
.side-cta p { font-size: 13px; color: rgba(255,255,255,.66); margin-bottom: 18px; line-height: 1.7; }
.side-cta .btn { width: 100%; }

.side-sticky { position: sticky; top: calc(var(--header-h) + 20px); }

/* ---------- 15. 问答详情页 ---------- */
.qa-detail-q { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 32px; }
.qa-detail-q h1 { font-size: 26px; line-height: 1.5; margin-bottom: 18px; }
.qa-detail-q .desc { font-size: 15.5px; line-height: 1.9; color: var(--ink-2); margin-bottom: 18px; }
.qa-detail-q .desc p:last-child { margin-bottom: 0; }

.answer-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; margin-bottom: 20px; }
.answer-head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.answer-head .avatar { width: 48px; height: 48px; font-size: 16px; }
.answer-head .who { flex: 1; min-width: 0; }
.answer-head .who strong { display: block; font-size: 16px; color: var(--t1); }
.answer-head .who span { font-size: 13px; color: var(--muted); }
.answer-body { font-size: 15.5px; line-height: 1.95; }
.answer-body h3 { font-size: 17px; margin: 26px 0 12px; }
.answer-body ul { margin-bottom: 18px; }
.answer-foot {
  display: flex; align-items: center; gap: 20px; margin-top: 24px; padding-top: 18px;
  border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted);
}
.answer-foot button { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); transition: color .2s var(--ease); }
.answer-foot button:hover { color: var(--navy-500); }
.answer-foot button.liked { color: var(--gold-600); }
.badge-best {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
  background: var(--gold-600); color: #fff; font-size: 12px; font-weight: 700; border-radius: 3px;
}

/* ---------- 16. 关于我们 ---------- */
.about-hero {
  background:
    linear-gradient(100deg, rgba(10,32,66,.72) 0%, rgba(10,32,66,.38) 45%, rgba(10,32,66,.06) 100%),
    url("../img/abut.png") center right / cover no-repeat;
  color: #fff; padding: 84px 0 76px;
}
.about-hero h1 { color: #fff; font-size: 40px; margin-bottom: 16px; }
.about-hero p { color: rgba(255,255,255,.74); font-size: 16px; max-width: 640px; margin: 0; line-height: 1.85; }

.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value-card { padding: 28px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: all .25s var(--ease); }
.value-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--navy-100); }
.value-num { font-family: var(--font-num); font-size: 13px; color: var(--gold); font-weight: 700; letter-spacing: .1em; margin-bottom: 12px; }
.value-card h4 { font-size: 17px; margin-bottom: 10px; }
.value-card p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.78; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: all .25s var(--ease); }
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.team-photo {
  position: relative; height: 210px; overflow: hidden;
  background: linear-gradient(160deg, var(--navy-050) 0%, var(--navy-100) 100%);
  border-bottom: 1px solid var(--line);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.team-info { padding: 20px; }
.team-info h4 { font-size: 16.5px; margin-bottom: 4px; }
.team-info .role { font-size: 13px; color: var(--gold-600); font-weight: 600; margin-bottom: 12px; }
.team-info p { font-size: 13px; color: var(--muted); line-height: 1.72; margin: 0 0 14px; }
.team-tags { display: flex; gap: 6px; flex-wrap: wrap; }
a.team-card { display: block; color: inherit; text-decoration: none; }
.team-photo-txt {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 68px; font-weight: 700; color: #fff; letter-spacing: 2px;
  background: linear-gradient(135deg, var(--navy-600) 0%, var(--navy-500) 60%, #56A2EC 100%);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.team-more { text-align: center; margin-top: 30px; }
.team-more .btn { padding: 12px 28px; font-size: 14.5px; }

.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
.timeline-item { position: relative; padding-bottom: 30px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -34px; top: 8px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; border: 3px solid var(--gold);
}
.timeline-item .year { font-family: var(--font-num); font-size: 14px; font-weight: 700; color: var(--gold-600); letter-spacing: .05em; }
.timeline-item h4 { font-size: 16.5px; margin: 6px 0 8px; }
.timeline-item p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.8; }

/* 合作律所展示 */
.firm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.firm-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: all .25s var(--ease);
}
.firm-card:hover { border-color: var(--navy-500); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.firm-seal {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--navy-050); color: var(--navy-600); border: 1px solid var(--navy-100);
  display: grid; place-items: center; font-size: 17px; font-weight: 700;
  transition: all .25s var(--ease);
}
.firm-card:hover .firm-seal { background: var(--navy); color: var(--gold); border-color: var(--navy); }
.firm-body { min-width: 0; }
.firm-body h4 { font-size: 15.5px; line-height: 1.5; margin-bottom: 6px; }
.firm-body .region { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.firm-body .region .tag { height: 21px; padding: 0 8px; font-size: 11.5px; }

.partner-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 28px; padding: 24px 28px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
}
.partner-cta h4 { font-size: 16px; margin-bottom: 6px; }
.partner-cta p { margin: 0; font-size: 13.5px; color: var(--muted); }

.honor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.honor-card { display: flex; gap: 14px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.honor-card .hi { font-size: 24px; color: var(--gold); line-height: 1; }
.honor-card h4 { font-size: 15.5px; margin-bottom: 6px; }
.honor-card p { font-size: 13px; color: var(--muted); margin: 0; }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.14); border-radius: var(--radius); overflow: hidden; }
.stat-strip .s { background: var(--navy); padding: 30px 20px; text-align: center; }
.stat-strip .s b { display: block; font-family: var(--font-num); font-size: 32px; color: #fff; font-weight: 700; }
.stat-strip .s span { font-size: 13px; color: rgba(255,255,255,.6); }

/* 联系 / 表单 */
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.contact-info li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--line); list-style: none; margin: 0; }
.contact-info { list-style: none; padding: 0; margin: 0; }
.contact-info .ci { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--navy-050); color: var(--navy-600); display: grid; place-items: center; flex-shrink: 0; }
.contact-info b { display: block; font-size: 14px; color: var(--strong); }
.contact-info span { font-size: 13.5px; color: var(--muted); }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 14px; outline: none; background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(47,134,225,.08); }
.form-group textarea { resize: vertical; min-height: 110px; line-height: 1.7; }
.form-note { font-size: 12.5px; color: var(--muted-2); margin-top: 14px; line-height: 1.7; }

/* ---------- 17. CTA 条 ---------- */
.cta-strip {
  background: linear-gradient(115deg, #1462B8 0%, #2F86E1 100%);
  border-radius: var(--radius-lg); padding: 48px 52px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.cta-strip h3 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.cta-strip p { color: rgba(255,255,255,.7); margin: 0; font-size: 14.5px; }
.cta-strip .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 17b. 导航下拉 ---------- */
.main-nav .nav-item { position: relative; display: flex; align-items: center; }
.main-nav .nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.caret {
  width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.nav-item:hover .caret { transform: rotate(-135deg); margin-top: 2px; }

.dropdown {
  position: absolute; top: calc(100% + 18px); left: 50%;
  min-width: 460px; padding: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown::before { content: ""; position: absolute; top: -20px; left: 0; right: 0; height: 20px; }
.dropdown-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; letter-spacing: .1em; color: var(--muted-2);
  padding: 0 8px 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.dropdown-head a { color: var(--navy-500); font-weight: 600; letter-spacing: 0; }
.dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.dropdown-grid a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-2);
  transition: all .18s var(--ease);
}
.dropdown-grid a:hover { background: var(--navy-050); color: var(--navy); }
.dropdown-grid a i { font-style: normal; font-size: 16px; width: 20px; text-align: center; }
.dropdown-grid a em { font-style: normal; font-size: 12px; color: var(--muted-2); margin-left: auto; }
.dropdown-foot {
  margin-top: 12px; padding: 12px 10px 2px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px;
}
.dropdown-foot a { color: var(--gold-600); font-weight: 600; }

/* ---------- 17c. 吸底咨询横幅 ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 26px rgba(20,98,184,.10);
  transform: translateY(0);
  transition: transform .34s var(--ease), opacity .28s var(--ease);
}
.sticky-cta.hide { transform: translateY(115%); opacity: 0; }
/* 滑到页面最底部：变为整幅展示条（docked）；上滑恢复悬浮细条 */
.sticky-cta.docked {
  background: linear-gradient(115deg, #1462B8 0%, #1D70CE 55%, #2F86E1 100%);
  border-top: 0; box-shadow: none;
}
.sticky-cta.docked .st-icon { background: rgba(255,255,255,.14); color: var(--gold); width: 48px; height: 48px; font-size: 21px; }
.sticky-cta.docked .st-text b { color: #fff; font-size: 17px; }
.sticky-cta.docked .st-text span { color: rgba(255,255,255,.62); font-size: 13px; }
.sticky-cta.docked .st-actions .btn-outline { background: transparent; border-color: rgba(255,255,255,.34); color: #fff; }
.sticky-cta.docked .st-actions .btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.sticky-cta.docked .st-close { display: none; }
.sticky-cta.docked .sticky-cta-inner { padding: 18px 0; }
@media (max-width: 860px) {
  .sticky-cta.docked .st-text span { display: none; }
  .sticky-cta.docked .st-text b { font-size: 15px; }
  .sticky-cta.docked .st-icon { display: none; }
}
.sticky-cta-inner {
  display: flex; align-items: center; gap: 20px;
  padding: 13px 0; min-height: 66px;
}
.sticky-cta .st-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  background: var(--navy); color: var(--gold); display: grid; place-items: center;
  font-size: 18px; font-weight: 700;
}
.sticky-cta .st-text { flex: 1; min-width: 0; }
.sticky-cta .st-text b { display: block; font-size: 15px; color: var(--strong); line-height: 1.5; }
.sticky-cta .st-text span { font-size: 12.5px; color: var(--muted); }
.sticky-cta .st-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sticky-cta .st-close {
  width: 28px; height: 28px; border-radius: 50%; color: var(--muted-2);
  display: grid; place-items: center; font-size: 16px; flex-shrink: 0;
}
.sticky-cta .st-close:hover { background: var(--bg-soft-2); color: var(--ink-2); }
body.has-sticky-cta { padding-bottom: 96px; }

/* ---------- 17d. 咨询页（模拟对话） ---------- */
.chat-page { background: var(--bg-soft); padding: 28px 0 76px; }
.chat-panel {
  display: flex; flex-direction: column; height: 660px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.chat-head {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--navy); color: #fff;
}
.chat-head .avatar { width: 42px; height: 42px; background: rgba(255,255,255,.14); color: #fff; font-size: 15px; }
.chat-head .who { flex: 1; min-width: 0; }
.chat-head .who strong { display: block; font-size: 15.5px; color: #fff; }
.chat-head .who span { font-size: 12.5px; color: rgba(255,255,255,.62); }
.chat-head .online { font-size: 12px; color: rgba(255,255,255,.72); display: flex; align-items: center; gap: 6px; }
.chat-head .online i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; display: inline-block; }

.chat-body { flex: 1; overflow-y: auto; padding: 22px; background: var(--bg-soft); scroll-behavior: smooth; }
.chat-sys { text-align: center; font-size: 12.5px; color: var(--muted-2); margin: 0 auto 20px; max-width: 76%; line-height: 1.7; }
.msg { display: flex; gap: 10px; margin-bottom: 18px; align-items: flex-start; }
.msg .avatar { width: 34px; height: 34px; background: var(--navy-100); color: var(--navy-600); font-size: 13px; }
.msg.out { flex-direction: row-reverse; }
.msg.out .avatar { background: var(--navy); color: #fff; }
.bubble {
  max-width: 74%; padding: 12px 16px; border-radius: 12px;
  font-size: 14.5px; line-height: 1.8; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line);
  border-top-left-radius: 3px; box-shadow: var(--shadow-xs);
}
.msg.out .bubble {
  background: var(--navy); color: rgba(255,255,255,.92); border-color: var(--navy);
  border-top-left-radius: 12px; border-top-right-radius: 3px;
}
.bubble p { margin: 0 0 8px; } .bubble p:last-child { margin: 0; }
.bubble b { color: var(--strong); }
.msg.out .bubble b { color: #fff; }
.msg-time { font-size: 11.5px; color: var(--muted-2); margin: 6px 4px 0; }

.typing { display: flex; gap: 4px; padding: 15px 16px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.chat-quick { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 22px 16px; background: #fff; }
.chat-quick button {
  padding: 7px 14px; border-radius: 20px; font-size: 13.5px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); transition: all .2s var(--ease);
}
.chat-quick button:hover { border-color: var(--navy-500); color: var(--navy-500); background: var(--navy-050); }
.chat-quick button.done { opacity: .45; pointer-events: none; }

.chat-input { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); background: #fff; align-items: flex-end; }
.chat-input textarea {
  flex: 1; min-height: 44px; max-height: 120px; resize: none;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 14.5px; line-height: 1.6; outline: none; background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.chat-input textarea:focus { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(47,134,225,.08); }
.chat-input .btn { height: 44px; }
.chat-hint { padding: 10px 18px 14px; font-size: 12px; color: var(--muted-2); background: #fff; text-align: center; }

/* 引流入口（问答列表页底部） */
.ask-entry { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.ask-points { list-style: none; padding: 0; margin: 0; }
.ask-points li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 14.5px; color: var(--ink-2); }
.ask-points li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--success); font-weight: 700; font-size: 13px;
}
.chat-preview {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-md);
}
.chat-preview .cp-head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.chat-preview .cp-head .avatar { width: 36px; height: 36px; }
.chat-preview .cp-head b { display: block; font-size: 14.5px; color: var(--strong); }
.chat-preview .cp-head span { font-size: 12px; color: var(--muted-2); }
.chat-preview .msg { margin-bottom: 12px; }
.chat-preview .msg:last-child { margin-bottom: 0; }
.bubble-sm { font-size: 13.5px; padding: 10px 14px; }

.consent-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.consent-row input { width: 15px; height: 15px; accent-color: var(--navy); }

.step-list { list-style: none; padding: 0; margin: 0; }
.step-list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); margin: 0; font-size: 13.5px; color: var(--muted); }
.step-list li:last-child { border-bottom: 0; }
.step-list li .n {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  background: var(--navy-050); color: var(--navy-600);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

/* ---------- 18. 响应式 ---------- */
@media (max-width: 1080px) {
  .field-grid { grid-template-columns: repeat(3, 1fr); }
  .firm-grid { grid-template-columns: 1fr 1fr; }
  .value-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .article-layout { grid-template-columns: 1fr; gap: 32px; }
  .side-sticky { position: static; }
}
@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-phone { display: none; }
  .hero { padding: 64px 0 56px; }
  .hero h1 { font-size: 32px; }
  .hero-stats { gap: 32px; margin-top: 40px; }
  .hero-stats .stat b { font-size: 24px; }
  h1 { font-size: 30px; } h2 { font-size: 24px; }
  .section { padding: 56px 0; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .honor-grid { grid-template-columns: 1fr 1fr; }
  .cta-strip { padding: 34px 26px; }
  .article-header h1 { font-size: 25px; }
  .article-body { font-size: 15.5px; }
  .qa-detail-q, .answer-block { padding: 22px; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .container { padding: 0 16px; }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .value-grid, .team-grid, .honor-grid, .firm-grid { grid-template-columns: 1fr; }
  .partner-cta { padding: 20px; }
  .partner-cta .btn { width: 100%; }
  .footer-top { grid-template-columns: 1fr; }
  .know-card { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .know-card .card-side { display: none; }
  .thumb { width: 92px; height: 66px; }
  .thumb i { font-size: 22px; }
  .form-row { grid-template-columns: 1fr; }
  .filter-bar { padding: 14px; }
  .sort-select { margin-left: 0; width: 100%; }
  .hero-tags { display: none; }
  .breadcrumb { padding: 14px 0; }
}

/* ---------- 19. 移动端抽屉导航 ---------- */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: #fff; padding: 20px 24px; transform: translateX(100%);
  transition: transform .3s var(--ease); overflow-y: auto;
  display: none;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a { display: block; padding: 15px 0; font-size: 16px; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: 22px; }
@media (max-width: 860px) { .mobile-nav { display: block; } }

/* 咨询页内嵌表单（对话收尾时生成） */
.chat-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.cf-cell label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.cf-cell input {
  width: 100%; height: 38px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 0 10px; font-size: 13.5px; outline: none; background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cf-cell input:focus { border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(47,134,225,.08); }
.cf-note { font-size: 11.5px; color: var(--muted-2); line-height: 1.7; margin: 10px 0 0; }

/* ---------- 表单提交结果：AJAX 原地提示，不跳转 ---------- */
.form-tip {
  border-radius: var(--radius); padding: 14px 16px 15px;
  margin-bottom: 16px; border: 1px solid transparent; line-height: 1.75;
}
.form-tip .ft-title { display: block; font-size: 15px; margin-bottom: 4px; }
.form-tip p { margin: 0; font-size: 13.5px; }
.form-tip.ok { background: #F1FAF5; border-color: #BFE6D2; color: #14603C; }
.form-tip.ok .ft-title { color: #0F7A4C; }
.form-tip.ok .ft-title::before { content: "\2713\00a0"; font-weight: 700; }
.form-tip.err { background: #FEF4F3; border-color: #F3C9C5; color: #8A2F27; }
.form-tip.err .ft-title { color: var(--danger); }
.form-tip.err .ft-title::before { content: "!\00a0"; font-weight: 700; }
.cf-cell.cf-error input,
.form-group.cf-error input,
.form-group.cf-error textarea {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(196,69,59,.10) !important;
}
.ok-flag { color: #0F7A4C; font-size: 15px; }

/* ---------- 20. 下拉/吸底/咨询页 响应式 ---------- */
@media (max-width: 1080px) {
  .chat-panel { height: 620px; }
  .ask-entry { grid-template-columns: 1fr; gap: 30px; }
  .rel-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .sticky-cta .st-text span { display: none; }
  .sticky-cta .st-icon { display: none; }
}
@media (max-width: 620px) {
  .dropdown { min-width: 0; left: 0; right: 0; transform: translateY(-8px); width: calc(100vw - 32px); }
  .nav-item:hover .dropdown, .nav-item:focus-within .dropdown { transform: translateY(0); }
  .dropdown-grid { grid-template-columns: 1fr; }
  .sticky-cta-inner { gap: 12px; padding: 10px 0; min-height: 60px; }
  .sticky-cta .st-text b { font-size: 13.5px; }
  .sticky-cta .st-actions .btn { height: 38px; padding: 0 14px; font-size: 13px; }
  body.has-sticky-cta { padding-bottom: 88px; }
  .rel-grid { grid-template-columns: 1fr; }
  .cf-row { grid-template-columns: 1fr; }
  .chat-panel { height: calc(100vh - 190px); min-height: 460px; border-radius: var(--radius); }
  .chat-page { padding: 16px 0 60px; }
  .bubble { max-width: 84%; font-size: 14px; }
  .chat-head { padding: 13px 16px; }
}


/* ---------- 律师模块（执业年限自动计算） ---------- */
.lawyer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.lawyer-card {
  padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 14px; transition: all .25s var(--ease);
}
.lawyer-card:hover { border-color: var(--navy-100); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.lawyer-top { display: flex; gap: 14px; align-items: flex-start; }
.lawyer-avatar {
  width: 60px; height: 60px; border-radius: 50%; background: var(--navy-100); color: var(--navy-600);
  display: grid; place-items: center; font-size: 22px; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.lawyer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lawyer-avatar-lg { width: 96px; height: 96px; font-size: 32px; }
.lawyer-avatar-txt { background: linear-gradient(135deg, var(--navy-100), var(--gold-050)); }
.lawyer-who { min-width: 0; flex: 1; }
.lawyer-who h3 { font-size: 18px; margin-bottom: 4px; }
.lawyer-pos { font-size: 13.5px; color: var(--ink-2); margin-bottom: 6px; }
.lawyer-year { font-size: 12.5px; color: var(--muted); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; }
.lawyer-year b { color: var(--strong); font-size: 14.5px; font-weight: 700; }
.lawyer-desc { font-size: 13.5px; color: var(--muted); line-height: 1.8; margin: 0; }
.lawyer-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.lawyer-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 13px; color: var(--gold-600); font-weight: 600;
}

/* 律师详情 */
.lawyer-profile { padding: 30px 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.lawyer-profile-top { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.lawyer-who-lg { min-width: 0; flex: 1; }
.lawyer-who-lg h1 { font-size: 26px; margin-bottom: 6px; }
.lawyer-stat { display: flex; gap: 30px; margin-top: 18px; flex-wrap: wrap; }
.lawyer-stat > div { min-width: 84px; }
.lawyer-stat b { display: block; font-family: var(--font-num); font-size: 22px; color: var(--strong); line-height: 1.3; }
.lawyer-stat span { font-size: 12.5px; color: var(--muted); }
.lawyer-profile-desc { margin: 18px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.85; }
.lawyer-profile .lawyer-tags { margin-top: 16px; }
.lawyer-actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

/* 解答下方的律师标签行 */
.answer-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 640px) {
  .lawyer-grid { grid-template-columns: 1fr; gap: 14px; }
  .lawyer-card { padding: 18px; }
  .lawyer-profile { padding: 20px; }
  .lawyer-profile-top { gap: 16px; }
  .lawyer-who-lg h1 { font-size: 21px; }
  .lawyer-stat { gap: 18px; }
  .lawyer-stat b { font-size: 19px; }
}


/* ---------- 解答区律师信息标签（置于 answer-head 卡片内） ---------- */
.answer-head { align-items: flex-start; }
.answer-head > .avatar { flex: none; }
.answer-head .who-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.answer-head .who-tags .tag { height: 22px; padding: 0 8px; font-size: 11.5px; font-weight: 500; }
.answer-head .badge-best { align-self: flex-start; flex: none; }
@media (max-width: 640px) {
  .answer-head { flex-wrap: wrap; }
  .answer-head .who { flex: 1 1 60%; }
  .answer-head .who-tags { margin-top: 7px; }
}


/* ---------- 解答时间标签 ---------- */
.ans-time { display: inline-flex; align-items: center; gap: 6px; }
.ans-time::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex: none; }

/* ---------- 移动端问答内容页（简化） ---------- */
.qa-mobile .qa-detail-q { padding: 18px; margin-bottom: 0; }
.qa-mobile .qa-detail-q h1 { font-size: 22px; line-height: 1.5; }
.qa-mobile .qa-detail-q .desc { font-size: 14.5px; line-height: 1.8; }
.qa-mobile .answer-block { padding: 18px; margin-bottom: 14px; }
.qa-mobile .answer-head { gap: 12px; padding-bottom: 15px; margin-bottom: 15px; }
.qa-mobile .answer-head .avatar { width: 42px; height: 42px; font-size: 15px; }
.qa-mobile .answer-head .who strong { font-size: 15px; }
.qa-mobile .answer-head .who-tags { margin-top: 7px; }
.qa-mobile .answer-head .who-tags .tag { height: 20px; padding: 0 7px; font-size: 11px; }
.qa-mobile .answer-head .badge-best { height: 22px; padding: 0 8px; font-size: 11.5px; }
.qa-mobile .answer-body { font-size: 15px; line-height: 1.85; }
.qa-mobile .answer-body h3 { font-size: 16px; margin: 20px 0 10px; }
.qa-mobile .answer-foot { gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; font-size: 12.5px; }
.qa-mobile .side-widget { margin-bottom: 0; }


/* ---------- 问答页侧栏：律师推荐 ---------- */
.side-lawyer { display: flex; flex-direction: column; gap: 16px; }
.side-lawyer-item { display: flex; gap: 11px; align-items: flex-start; }
.side-lawyer-item .lawyer-avatar { width: 46px; height: 46px; font-size: 17px; transition: box-shadow .2s var(--ease); }
.side-lawyer-item:hover .lawyer-avatar { box-shadow: 0 0 0 2px var(--gold); }
.side-lawyer-item:hover .sl-who b { color: #8A6415; }
.side-lawyer-item .sl-who { min-width: 0; flex: 1; }
.side-lawyer-item .sl-who b { display: block; font-size: 14.5px; color: var(--strong); transition: color .2s var(--ease); }
.side-lawyer-item .sl-who em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.side-lawyer-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; font-style: normal; }
.side-lawyer-tags .tag { height: 20px; padding: 0 7px; font-size: 11px; font-weight: 500; }
.side-lawyer-more {
  display: block; text-align: center; padding-top: 13px; border-top: 1px dashed var(--line);
  font-size: 13px; font-weight: 600; color: var(--navy-500); transition: color .2s var(--ease);
}
.side-lawyer-more:hover { color: var(--gold-600); }

/* 深底色容器内的标题与加粗保持白色 */
.hero, .about-hero, .cta-strip, .side-cta, .section-navy, .site-footer,
.stat-strip .s, .chat-head, .msg.out .bubble, .thumb, .rel-thumb,
.sticky-cta.docked, .rank.top, .avatar-bot {
  --t1: #fff; --t2: #fff; --t3: #fff; --strong: #fff;
}