/* ============================================================
   琦通官网 · 页面级样式（在 qitong.css 设计系统之上扩展）
   ============================================================ */

/* ---------- 首页 ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(ellipse 60% 80% at 78% 40%, rgba(201,161,92,.16), transparent),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(176,42,48,.22), transparent),
    linear-gradient(160deg, #1D1F24, #2B2E36 55%, #23252B);
  padding: 110px 0 120px;
}
.hero .ring { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: 480px; height: 480px; opacity: .9; pointer-events: none; }
/* 新 logo 徽章装饰：细金环 + 徽章本体 + 柔光 */
.hero .ring-mark { display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.hero .ring-mark::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(201,161,92,.28);
}
.hero .ring-mark::after {
  content: ''; position: absolute; inset: -26px; border-radius: 50%;
  border: 1px dashed rgba(201,161,92,.14);
}
.hero .ring-mark img {
  width: 62%; height: auto;
  filter: drop-shadow(0 0 42px rgba(201,161,92,.35));
  animation: markFloat 7s ease-in-out infinite;
}
@keyframes markFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hero h1 { font-family: var(--serif); font-size: 52px; letter-spacing: .12em; line-height: 1.35; }
.hero h1 em { font-style: normal; color: var(--qitong-gold-light); }
.hero .slogan { margin-top: 18px; color: #C9C9CE; letter-spacing: .3em; font-size: 15px; }
.hero .desc { margin-top: 22px; max-width: 520px; color: #A9A9B0; font-size: 15px; }
.hero .actions { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; }
.hero .license {
  margin-top: 46px; display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: #8F8F97; border: 1px solid rgba(255,255,255,.14);
  padding: 9px 18px; border-radius: 999px;
}
.hero .license b { color: var(--qitong-gold-light); font-weight: 500; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why .card h3 { display: flex; align-items: center; gap: 10px; }
.why .ico {
  flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(176,42,48,.1), rgba(201,161,92,.15));
  color: var(--qitong-red); font-family: var(--serif); font-size: 18px; font-weight: 700;
}
.pkg-mini { border-radius: 14px; padding: 40px 36px; color: #fff; position: relative; overflow: hidden; }
.pkg-mini.a { background: linear-gradient(150deg, #B02A30, #7E1B21); }
.pkg-mini.b { background: linear-gradient(150deg, #2B2E36, #1D1F24); }
.pkg-mini .tagline { font-size: 13px; letter-spacing: .25em; color: rgba(255,255,255,.65); }
.pkg-mini h3 { font-family: var(--serif); font-size: 27px; margin: 10px 0 14px; }
.pkg-mini li { font-size: 14px; color: rgba(255,255,255,.85); padding: 5px 0; display: flex; gap: 8px; }
.pkg-mini li::before { content: "✓"; color: var(--qitong-gold-light); }
.pkg-mini .price { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.6); }
.pkg-mini .price b { font-family: var(--serif); font-size: 30px; color: var(--qitong-gold-light); margin-right: 6px; }
.pkg-mini .corner { position: absolute; right: -40px; top: -40px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.06); }
.article-item { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.article-item .date { flex: none; text-align: center; width: 64px; }
.article-item .date .d { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--qitong-red); line-height: 1.1; }
.article-item .date .m { font-size: 12px; color: var(--ink-3); }
.article-item h4 { font-size: 16px; font-weight: 600; }
.article-item p { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.cta-band { background: linear-gradient(120deg, var(--qitong-red-dark), var(--qitong-red)); color: #fff; text-align: center; padding: 64px 0; }
.cta-band h2 { font-family: var(--serif); font-size: 30px; }
.cta-band p { color: rgba(255,255,255,.8); margin: 12px 0 28px; }

/* ---------- 关于琦通 ---------- */
.about-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: start; }
.about-text p { margin-bottom: 18px; color: var(--ink-2); font-size: 15.5px; text-align: justify; }
.values { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 40px; }
.value-chip {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; text-align: center;
  padding: 18px 6px; font-family: var(--serif); font-size: 17px; font-weight: 600; transition: .25s;
}
.value-chip:hover { border-color: var(--qitong-gold); color: var(--qitong-red); transform: translateY(-3px); }
.mission-box { background: linear-gradient(150deg, var(--dark), #33363F); color: #fff; border-radius: 14px; padding: 36px; }
.mission-box h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 14px; color: var(--qitong-gold-light); }
.mission-box p { font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 10px; }
.logo-mean { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.logo-stage { background: linear-gradient(150deg, #FDFCFA, #EFEAE1); border-radius: 16px; padding: 56px; text-align: center; }
.logo-stage img { margin: 0 auto; max-width: 380px; }
.mean-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px dashed var(--line); }
.mean-item:last-child { border: none; }
.mean-item .badge { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 19px; font-weight: 700; color: #fff; }
.mean-item h4 { font-family: var(--serif); font-size: 17px; margin-bottom: 4px; }
.mean-item p { font-size: 14px; color: var(--ink-2); }
.env-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.env { aspect-ratio: 4/3; border-radius: 12px; background: linear-gradient(160deg, #ECE7DE, #DBD4C7); display: grid; place-items: center; color: #AFA793; font-size: 13px; overflow: hidden; }
.env img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 专业领域 ---------- */
.area-hero-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.area-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 36px; display: flex; gap: 24px; transition: .25s; }
.area-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.area-card .no { font-family: var(--serif); font-size: 40px; font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--qitong-gold); line-height: 1; }
.area-card h3 { font-family: var(--serif); font-size: 21px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.area-card p { font-size: 14px; color: var(--ink-2); }
.area-card .lnk { margin-top: 14px; display: inline-block; font-size: 13px; color: var(--qitong-red); }
.area-card.featured { background: linear-gradient(150deg, #B02A30, #8E1F26); border: none; color: #fff; }
.area-card.featured .no { -webkit-text-stroke: 1px rgba(255,255,255,.5); }
.area-card.featured p { color: rgba(255,255,255,.85); }
.area-card.featured h3 { color: #fff; }
.area-card.featured .lnk { color: var(--qitong-gold-light); }
.keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ---------- 领域详情 ---------- */
.detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.module-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }
.module { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.module.big { grid-column: 1/-1; background: linear-gradient(140deg, rgba(176,42,48,.05), rgba(201,161,92,.08)); border-color: rgba(201,161,92,.35); }
.module b { display: block; font-family: var(--serif); font-size: 17px; margin-bottom: 8px; color: var(--ink); }
.module b span { color: var(--qitong-gold-deep); margin-right: 8px; }
.module p { font-size: 13.5px; color: var(--ink-2); }
.flow { background: var(--paper-warm); border-radius: 14px; padding: 36px; margin-top: 36px; }
.flow ol { counter-reset: step; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 20px; }
.flow li { counter-increment: step; position: relative; padding-left: 44px; font-size: 14.5px; }
.flow li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 2px;
  font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--qitong-gold-deep);
}
.side-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; margin-bottom: 20px; position: sticky; top: 100px; }
.side-card h4 { font-family: var(--serif); font-size: 18px; margin-bottom: 14px; }
.side-card li { font-size: 14px; color: var(--ink-2); padding: 8px 0; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 10px; }
.side-card li:last-child { border: none; }
/* 进度说明：标签与说明文字连排一行，标签不折行 */
.side-card .legend-list li { display: block; line-height: 1.7; }
.side-card .legend-list li b { white-space: nowrap; margin-right: 2px; }
.side-card.promo { background: linear-gradient(150deg, #B02A30, #8E1F26); border: none; color: #fff; }
.side-card.promo h4 { color: var(--qitong-gold-light); }
.owner { display: flex; gap: 14px; align-items: center; }
.owner .ava { flex: none; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(160deg,#EDE9E2,#DCD6CC); display: grid; place-items: center; color: #B9B2A6; font-size: 11px; overflow: hidden; }
.owner .ava img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 专业团队 ---------- */
.team-group { margin-bottom: 56px; }
.team-group h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.team-group .desc { font-size: 13.5px; color: var(--ink-3); margin-bottom: 24px; }
.advisor-card { border: 1.5px dashed var(--qitong-gold); background: linear-gradient(150deg, rgba(201,161,92,.06), rgba(201,161,92,.12)); }
.advisor-card .photo { background: linear-gradient(160deg,#F0EBE0,#E2D9C6); }
/* 律师照片：顶部对齐裁剪——框比原图「矮」时只裁底部，保住头顶 */
.lawyer-card .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ---------- 律师个人页 ---------- */
.profile { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
.profile-photo { border-radius: 14px; aspect-ratio: 3/3.8; background: linear-gradient(160deg,#EDE9E2,#DCD6CC); display: grid; place-items: center; color: #B9B2A6; font-size: 14px; overflow: hidden; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.profile h1 { font-family: var(--serif); font-size: 34px; }
.profile .title { color: var(--qitong-gold-deep); margin: 8px 0 18px; letter-spacing: .06em; }
.profile .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
/* 律师微信二维码卡（团队详情页侧栏） */
.qr-card { margin-top:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px; text-align:center; }
.qr-card .qr-head { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:.02em; }
.qr-card .qr-head::before { content:''; width:8px; height:8px; border-radius:50%; background:#2AAE67; box-shadow:0 0 0 3px rgba(42,174,103,.15); flex:none; }
.qr-card .qr-frame { margin:14px auto 0; width:172px; max-width:100%; padding:10px; background:#FBFAF8; border:1px solid var(--line); border-radius:10px; }
.qr-card .qr-frame img { display:block; width:100%; aspect-ratio:1/1; object-fit:contain; }
.qr-card .qr-tip { margin-top:10px; font-size:12px; color:var(--ink-3); }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 18px; font-size: 14.5px; margin: 18px 0; }
.kv dt { color: var(--ink-3); }
.kv dd { color: var(--ink-2); }
.block { margin-top: 40px; }
.block h3 { font-family: var(--serif); font-size: 21px; margin-bottom: 16px; padding-left: 12px; border-left: 4px solid var(--qitong-gold); }
.block p, .block li { font-size: 14.5px; color: var(--ink-2); }
.case-list li { padding: 14px 0; border-bottom: 1px dashed var(--line); display: flex; gap: 10px; }
.case-list li::before { content: "▪"; color: var(--qitong-gold); }
.cred-list { display: flex; flex-wrap: wrap; gap: 10px; }
.cred-list li { background: var(--paper-warm); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; font-size: 14px; }

/* ---------- 会员权益 ---------- */
.pkg-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 64px; }
.pkg { border-radius: 16px; color: #fff; overflow: hidden; }
.pkg .head { padding: 34px 38px 26px; }
.pkg.a .head { background: linear-gradient(140deg, #B02A30, #8E1F26); }
.pkg.b .head { background: linear-gradient(140deg, #2B2E36, #1D1F24); }
.pkg .head .tagline { font-size: 12px; letter-spacing: .25em; opacity: .6; }
.pkg .head h3 { font-family: var(--serif); font-size: 26px; margin: 8px 0 6px; }
.pkg .head p { font-size: 13.5px; opacity: .75; }
.pkg .body { background: #fff; border: 1px solid var(--line); border-top: none; border-radius: 0 0 16px 16px; padding: 30px 38px; }
.pkg li { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; color: var(--ink-2); }
.pkg li:last-child { border: none; }
.pkg li::before { content: "✓"; color: var(--qitong-gold-deep); font-weight: 700; }
.pkg li b { color: var(--ink); font-weight: 600; }
.pkg .price-note { font-size: 13px; color: var(--ink-3); margin-top: 18px; }
.cmp-note { background: var(--paper-warm); border: 1px solid var(--line); border-radius: 12px; padding: 22px 28px; font-size: 13.5px; color: var(--ink-2); margin-top: 48px; }

/* ---------- 琦通洞察 ---------- */
.tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 44px; flex-wrap: wrap; }
.tabs a { padding: 10px 28px; border-radius: 999px; border: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.tabs a.on { background: linear-gradient(135deg, var(--qitong-red), var(--qitong-red-dark)); color: #fff; border-color: transparent; }
.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ins-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: .25s; display: block; }
.ins-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.ins-card .cover { height: 150px; background: linear-gradient(150deg, #ECE7DE, #DCD4C4); display: grid; place-items: center; color: #B4AB97; font-size: 12px; overflow: hidden; }
.ins-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.ins-card .body { padding: 22px; }
.ins-card h3 { font-size: 16.5px; line-height: 1.55; margin: 10px 0; font-weight: 600; }
.ins-card p { font-size: 13px; color: var(--ink-2); }
.ins-card .meta { margin-top: 14px; font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; }

/* ---------- 文章详情 ---------- */
.article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; max-width: 1140px; margin: 0 auto; }
.article-body { font-size: 16px; line-height: 2; color: var(--ink-2); }
.article-body p { margin-bottom: 20px; text-align: justify; }
.article-body h3 { font-family: var(--serif); font-size: 20px; color: var(--ink); margin: 32px 0 14px; }
.article-head { border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 32px; }
.article-head h1 { font-family: var(--serif); font-size: 32px; line-height: 1.5; }
.article-head .meta { font-size: 13px; color: var(--ink-3); margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; }
.article-cover { width: 100%; border-radius: 12px; margin-bottom: 28px; }

/* ---------- 在线咨询 ---------- */
.consult-layout { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; max-width: 1080px; margin: 0 auto; }
.consult-form { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 40px; }
.consult-form h2 { font-family: var(--serif); font-size: 24px; margin-bottom: 6px; }
.consult-form .sub { font-size: 13.5px; color: var(--ink-3); margin-bottom: 28px; }
.steps { display: flex; gap: 8px; margin-bottom: 30px; }
.steps span { flex: 1; text-align: center; font-size: 12.5px; padding: 9px 0; border-radius: 999px; background: var(--paper-warm); color: var(--ink-3); border: 1px solid var(--line); }
.steps span.on { background: linear-gradient(135deg, var(--qitong-red), var(--qitong-red-dark)); color: #fff; border: none; }
.iter-note { background: linear-gradient(140deg, rgba(201,161,92,.08), rgba(176,42,48,.05)); border: 1px dashed var(--qitong-gold); border-radius: 12px; padding: 20px 24px; font-size: 13.5px; color: var(--ink-2); margin-top: 24px; }
.form-tip { font-size: 13px; margin-top: 18px; padding: 12px 16px; border-radius: 8px; display: none; }
.form-tip.ok { display: block; background: rgba(46,125,50,.08); color: #2E7D32; border: 1px solid rgba(46,125,50,.2); }
.form-tip.err { display: block; background: rgba(176,42,48,.08); color: var(--qitong-red); border: 1px solid rgba(176,42,48,.2); }

/* ---------- 人才招募 ---------- */
.job { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 32px; margin-bottom: 20px; }
.job .head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.job h3 { font-family: var(--serif); font-size: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.job .meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.job .req { font-size: 14px; color: var(--ink-2); }
.job .req b { color: var(--ink); }
.growth { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.growth .card { text-align: center; padding: 26px 18px; }
.growth .ico { font-family: var(--serif); font-size: 22px; color: var(--qitong-gold-deep); margin-bottom: 8px; }
.growth b { font-size: 15px; }
.growth p { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }

/* ---------- 联系我们 ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.info-item { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px dashed var(--line); }
.info-item .ico { flex: none; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, rgba(176,42,48,.08), rgba(201,161,92,.14)); display: grid; place-items: center; font-size: 19px; }
.info-item b { display: block; font-size: 15px; margin-bottom: 4px; }
.info-item p { font-size: 14px; color: var(--ink-2); }
.map-box { aspect-ratio: 16/9; border-radius: 14px; background: linear-gradient(150deg, #E9EFE6, #D8E0D2); display: grid; place-items: center; color: #8FA083; font-size: 14px; border: 1px solid var(--line); overflow: hidden; }
.map-box iframe { width: 100%; height: 100%; border: 0; }
.qr-row { display: flex; gap: 24px; margin-top: 24px; flex-wrap: wrap; }
.qr-item { text-align: center; }
.qr-item .box { width: 132px; height: 132px; background: #fff; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; color: var(--ink-3); font-size: 12px; margin: 0 auto 10px; overflow: hidden; }
.qr-item .box img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.qr-item p { font-size: 12.5px; color: var(--ink-2); }
.resp { background: linear-gradient(140deg, rgba(201,161,92,.1), rgba(176,42,48,.06)); border-radius: 12px; padding: 20px 24px; font-size: 13.5px; color: var(--ink-2); margin-top: 24px; }

/* ---------- 执业信息公示 ---------- */
.pub-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 36px; margin-bottom: 24px; }
.pub-card h3 { font-family: var(--serif); font-size: 21px; margin-bottom: 18px; padding-left: 12px; border-left: 4px solid var(--qitong-red); }
.pub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 40px; }
.pub-grid div { display: flex; gap: 14px; font-size: 14.5px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.pub-grid span { color: var(--ink-3); flex: none; width: 120px; }
.pub-grid b { font-weight: 500; color: var(--ink-2); }

/* ---------- 404 ---------- */
.nf { text-align: center; padding: 120px 0; }
.nf h1 { font-family: var(--serif); font-size: 60px; color: var(--qitong-red); }
.nf p { color: var(--ink-2); margin: 18px 0 30px; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .hero h1 { font-size: 34px; }
  .hero .ring { opacity: .25; }
  .grid-3, .grid-6, .grid-4, .why { grid-template-columns: 1fr; }
  .ins-grid { grid-template-columns: 1fr; }
  .about-grid, .logo-mean, .pkg-hero, .contact-grid, .consult-layout, .detail-layout, .article-layout, .area-hero-list, .module-list, .profile { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(3, 1fr); }
  .env-grid, .growth, .pub-grid { grid-template-columns: repeat(2, 1fr); }
  .side-card { position: static; }
  .flow ol { grid-template-columns: 1fr; }
}

/* ---------- 卡片内拨号（span 模拟链接，避免 <a> 嵌套 <a> 破坏布局） ---------- */
.tel-inline { color: var(--ink-3); cursor: pointer; border-bottom: 1px dashed var(--line); }
.tel-inline:hover { color: var(--qitong-red); border-bottom-color: var(--qitong-red); }

/* ---- 工单进度查询 ---- */
.track-box { margin-top:36px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 30px; }
.track-box h3 { font-family:'Noto Serif SC',serif; font-size:20px; margin:0 0 6px; }
.track-box .sub { font-size:13px; color:var(--ink-3); }
.track-inputs { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.track-inputs input { flex:1; min-width:180px; }
.track-steps { display:flex; margin-top:26px; }
.track-step { flex:1; text-align:center; position:relative; padding-top:28px; color:var(--ink-3); font-size:13px; }
.track-step::before { content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:12px; height:12px; border-radius:50%; background:#D8D3C8; z-index:1; }
.track-step::after { content:''; position:absolute; top:13px; left:calc(50% + 10px); width:calc(100% - 20px); height:2px; background:#E5E0D5; }
.track-step:last-child::after { display:none; }
.track-step.done::before { background:var(--qitong-gold); }
.track-step.done::after { background:var(--qitong-gold); }
.track-step.on::before { background:var(--qitong-red); box-shadow:0 0 0 4px rgba(176,42,48,.12); }
.track-step.on { color:var(--qitong-red); font-weight:600; }
.track-status { margin-top:16px; font-size:14px; font-weight:600; color:var(--ink); }
.track-meta { margin-top:10px; font-size:12.5px; color:var(--ink-3); display:flex; gap:18px; flex-wrap:wrap; }
.track-meta b { color:var(--qitong-red); }
.track-err { margin-top:12px; color:var(--qitong-red); font-size:13.5px; }

/* ---- 提交成功弹窗 ---- */
.cs-modal { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:20px; }
.cs-modal.show { display:flex; }
.cs-mask { position:absolute; inset:0; background:rgba(20,20,24,.5); backdrop-filter:blur(2px); }
.cs-dialog {
  position:relative; width:100%; max-width:460px; background:#fff; border-radius:16px;
  padding:36px 34px 30px; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.22);
  animation:csPop .22s ease-out;
}
@keyframes csPop { from { transform:translateY(14px) scale(.97); opacity:0 } to { transform:none; opacity:1 } }
.cs-icon {
  width:56px; height:56px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  background:rgba(46,125,50,.1); color:#2E7D32; font-size:28px; font-weight:700;
}
.cs-dialog h3 { font-family:var(--serif); font-size:24px; margin:0 0 10px; letter-spacing:.05em; }
.cs-lead { font-size:14px; color:var(--ink-2); line-height:1.7; margin:0; }
.cs-lead b { color:var(--qitong-red); }
.cs-code {
  margin-top:20px; background:#FBF8F2; border:1px dashed rgba(201,161,92,.7); border-radius:12px;
  padding:16px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
}
.cs-code-label { font-size:12.5px; color:var(--ink-3); }
.cs-code-val { font-size:22px; font-weight:700; letter-spacing:.06em; color:var(--qitong-red); font-family:var(--serif); }
.cs-copy {
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:5px 12px;
  font-size:12.5px; color:var(--ink-2); cursor:pointer;
}
.cs-copy:hover { border-color:var(--qitong-gold); color:var(--qitong-gold-deep); }
.cs-note { margin-top:14px; font-size:12.5px; color:var(--ink-3); line-height:1.7; }
.cs-actions { margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cs-actions .btn { min-width:140px; justify-content:center; }

/* 提交成功后的行内提示（工单号高亮） */
.form-tip.ok { font-size:14px; font-weight:500; }
.form-tip .code-strong { font-size:17px; font-weight:700; letter-spacing:.05em; color:var(--qitong-red); font-family:var(--serif); margin:0 2px; }

/* ============================================================
   客户端账号：登录 / 注册 / 个人中心 / 我的咨询
   ============================================================ */
.user-area { display:flex; align-items:center; gap:8px; font-size:13.5px; white-space:nowrap; }
/* 用户区占位后防止导航文字换行 */
.header .container { gap:10px; }
.header .brand .name { white-space:nowrap; }
.header .nav { flex:none; }
.header .nav a { white-space:nowrap; padding:8px 10px; font-size:14.5px; }
.header .nav a.header-cta { white-space:nowrap; }
.ua-link { color:var(--ink-2); }
.ua-link:hover { color:var(--qitong-red); }
.ua-sep { color:var(--line); }
.ua-name { color:var(--qitong-red); font-weight:600; }

.auth-wrap { display:grid; grid-template-columns: 1fr 340px; gap:32px; align-items:start; }
.auth-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 36px; }
.auth-tabs { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.auth-tabs button {
  border:none; background:none; padding:12px 18px; font-size:15px; color:var(--ink-3);
  cursor:pointer; border-bottom:2px solid transparent; font-family:var(--serif); letter-spacing:.05em;
}
.auth-tabs button.on { color:var(--qitong-red); border-bottom-color:var(--qitong-red); font-weight:600; }
.auth-card .field { margin-bottom:18px; }
.auth-submit { width:100%; justify-content:center; }
.auth-wx { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.auth-note { margin-top:12px; font-size:12.5px; color:var(--ink-3); line-height:1.7; }
.cs-qr { margin:18px auto 6px; width:200px; height:200px; display:grid; place-items:center; background:#fff; }
.cs-qr img { width:200px; height:200px; }

/* 个人中心 */
.my-layout { display:grid; grid-template-columns: 1fr 320px; gap:32px; align-items:start; }
.my-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:12px; }
.my-head h2 { font-family:var(--serif); font-size:22px; margin:0; }
.lead-card {
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 28px; margin-bottom:18px;
}
.lead-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.lead-code { font-family:var(--serif); font-size:19px; font-weight:700; color:var(--qitong-red); letter-spacing:.05em; margin-right:12px; }
.lead-time { font-size:12.5px; color:var(--ink-3); }
.lead-meta { margin-top:12px; display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); }
.lead-content {
  margin-top:14px; font-size:13.5px; color:var(--ink-2); line-height:1.8;
  background:#FBF9F5; border-left:3px solid var(--qitong-gold); padding:12px 16px; border-radius:0 8px 8px 0;
}
.lead-card .track-steps { margin-top:22px; }
.reply-box { margin-top:18px; background:rgba(46,125,50,.06); border:1px solid rgba(46,125,50,.18); border-radius:10px; padding:16px 18px; }
.reply-head { font-size:12.5px; font-weight:600; color:#2E7D32; margin-bottom:8px; }
.reply-body { font-size:13.5px; color:var(--ink); line-height:1.9; white-space:pre-wrap; }
.reply-none { margin-top:16px; font-size:12.5px; color:var(--ink-3); }
.tag { display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; border:1px solid transparent; }
.tag.red { color:var(--qitong-red); background:rgba(176,42,48,.08); border-color:rgba(176,42,48,.18); }
.tag.gold { color:#8A6A22; background:rgba(201,161,92,.14); border-color:rgba(201,161,92,.35); }
.tag.green { color:#2E7D32; background:rgba(46,125,50,.08); border-color:rgba(46,125,50,.2); }
/* 深色「重点领域」卡片上的角标：按后台选择的颜色适配深底 */
.area-card.featured .tag.red { background: rgba(226,96,102,.26); color: #F6B0B4; border-color: rgba(226,96,102,.5); }
.area-card.featured .tag.gold { background: rgba(201,161,92,.24); color: var(--qitong-gold-light); border-color: rgba(201,161,92,.45); }
.area-card.featured .tag:not(.red):not(.gold) { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); }

.acct-row { display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px dashed var(--line); }
.acct-row span { color:var(--ink-3); }
.acct-row b { color:var(--ink); font-weight:600; }
/* VIP 客户标识（企业法律顾问 / 私人律师） */
.vip-badge { display:inline-block; vertical-align:middle; margin-left:6px; padding:3px 9px; border-radius:3px;
  background:linear-gradient(135deg,#B99457,#8C6D33); color:#fff; font-size:11px; font-weight:600; letter-spacing:.03em; }
.acct-btns { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.acct-btns .btn { flex:1; justify-content:center; padding:9px 12px; font-size:13px; }

/* 咨询页登录态提示条 */
.login-bar { margin:18px 0 6px; padding:12px 16px; border-radius:10px; font-size:13.5px; line-height:1.8; }
.login-bar.need { background:rgba(176,42,48,.06); border:1px solid rgba(176,42,48,.18); color:var(--qitong-red); }
.login-bar.need a { color:var(--qitong-red); font-weight:600; text-decoration:underline; }
.login-bar.ok { background:rgba(46,125,50,.06); border:1px solid rgba(46,125,50,.16); color:#2E7D32; }
.login-bar.ok a { color:#2E7D32; font-weight:600; text-decoration:underline; }
.lb-wx { margin-left:10px; font-size:12px; padding:1px 8px; border-radius:999px; background:rgba(46,125,50,.12); }
.lb-wx.gray { background:rgba(0,0,0,.05); color:var(--ink-3); }
.lb-wx.gray a { color:var(--ink-2); }
.side-card .field { margin-bottom:14px; }

/* 演示模式：模拟微信授权页 */
.wxmock { min-height:100vh; display:grid; place-items:center; padding:30px; background:linear-gradient(160deg,#F6F3EC,#EFEAE0); }
.wxmock-card { width:100%; max-width:400px; background:#fff; border-radius:16px; padding:36px 32px; text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.1); }
.wxmock-logo { margin-bottom:14px; }
.wxmock-card h2 { font-family:var(--serif); font-size:21px; margin:0 0 6px; }
.wxmock-sub { font-size:13px; color:var(--ink-3); margin:0 0 26px; }
.wxmock-tip { font-size:14px; color:var(--ink-2); margin-bottom:20px; }
.wxmock-note { margin-top:16px; font-size:12.5px; color:var(--ink-3); }
.wxmock-foot { margin-top:22px; padding-top:16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-3); line-height:1.7; }

@media (max-width: 900px) {
  .auth-wrap, .my-layout { grid-template-columns: 1fr; }
  .user-area { font-size:12.5px; }
}

/* ---- 导航用户区悬停下拉菜单 ---- */
.ua-drop { position:relative; display:inline-block; }
.ua-trigger { cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:6px 2px; }
.ua-caret { width:0; height:0; border:4px solid transparent; border-top-color:currentColor; margin-top:3px; transition:transform .15s; }
.ua-drop:hover .ua-caret { transform:rotate(180deg); }
.ua-menu { position:absolute; top:100%; right:0; display:none; z-index:60; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 28px rgba(60,40,30,.14); padding:6px; min-width:132px; }
.ua-drop:hover .ua-menu, .ua-drop:focus-within .ua-menu { display:block; }
.ua-menu a { display:block; padding:9px 14px; border-radius:7px; color:var(--ink-2); font-size:13.5px; white-space:nowrap; }
.ua-menu a:hover { background:#F7F3EC; color:var(--qitong-red); }