/* 君珩软件官网样式 · 单文件、无外部依赖、无 CDN */
:root {
  --ink: #0c1730;
  --ink-2: #33424f;
  --muted: #6b7c8c;
  --line: #e4e9ee;
  --line-2: #eef2f6;
  --bg: #ffffff;
  --soft: #f6f8f9;
  --brand: #1664ff;
  --brand-d: #0d47c8;
  --brand-l: #e9f1ff;
  --gold: #b98b4b;
  --danger: #c0392b;
  --radius: 14px;
  --shadow-s: 0 2px 8px rgba(12, 23, 48, 0.05);
  --shadow-m: 0 14px 40px rgba(12, 23, 48, 0.08);
  --shadow-l: 0 30px 70px rgba(12, 23, 48, 0.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-d); }
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.3px; line-height: 1.3; color: var(--ink); }
p { margin: 0; }
ul { margin: 0; padding-left: 1.1em; }
code, pre { font-family: var(--mono); }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--soft { background: var(--soft); }
.section--line { border-top: 1px solid var(--line-2); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.lead { font-size: 17px; color: var(--ink-2); line-height: 1.85; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--brand); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--brand); opacity: .6; }
.h2 { font-size: 31px; line-height: 1.35; }
.h3 { font-size: 18px; }
.sub { margin-top: 14px; color: var(--muted); max-width: 640px; line-height: 1.85; }

/* ---------------- 顶栏 ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(12, 23, 48, .02); }
.nav { height: 70px; display: flex; align-items: center; gap: 34px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; color: #fff;
  background: linear-gradient(145deg, #4c8dff, #0d47c8);
  display: grid; place-items: center; font-size: 17px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 15.5px; letter-spacing: .2px; }
.brand-text small { font-size: 10.5px; color: var(--muted); letter-spacing: 1.6px; text-transform: uppercase; }
.nav-links { display: flex; gap: 26px; margin-left: 8px; }
.nav-links a { color: var(--ink-2); font-size: 14.5px; padding: 6px 0; position: relative; }
.nav-links a:hover { color: var(--brand); }
.nav-links a.on { color: var(--brand); font-weight: 600; }
.nav-links a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brand); border-radius: 2px;
}
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; margin-left: auto; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; margin: 0 auto;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 600; cursor: pointer; transition: .18s ease;
  background: var(--brand); color: #fff; white-space: nowrap;
}
.btn:hover { background: var(--brand-d); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(22, 100, 255, .22); }
.btn:active { transform: none; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #fff; color: var(--brand); border-color: #b9cdff; box-shadow: var(--shadow-s); }
.btn-quiet { background: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--soft); color: var(--ink); box-shadow: none; }
.btn-light { background: #fff; color: var(--brand-d); }
.btn-light:hover { background: #f2fbf8; color: var(--brand-d); }
.btn-lg { height: 48px; padding: 0 26px; font-size: 15.5px; border-radius: 11px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 8px; }

/* ---------------- Hero ---------------- */
.hero {
  position: relative; overflow: hidden; padding: 66px 0 52px;
  background:
    radial-gradient(900px 420px at 88% -10%, #dce8ff 0%, rgba(220, 232, 255, 0) 62%),
    radial-gradient(700px 380px at 6% 0%, #eff5ff 0%, rgba(246, 247, 255, 0) 55%),
    #fff;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(600px 300px at 70% 20%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(600px 300px at 70% 20%, #000 0%, transparent 78%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--brand-l); color: var(--brand-d);
  font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(22, 100, 255, .14); }
.hero h1 { margin-top: 20px; font-size: 44px; line-height: 1.26; letter-spacing: -1px; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lead { margin-top: 20px; max-width: 520px; font-size: 16.5px; }
.hero-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-meta { margin-top: 22px; display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta svg { color: var(--brand); }

.shot {
  position: relative; border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-l);
}
.shot-bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line-2); background: #fbfcfd; }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: #dfe5ea; }
.shot-bar span { margin-left: 8px; font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.shot img { width: 100%; height: auto; display: block; }
.shot-float {
  position: absolute; right: -14px; bottom: -18px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 15px; box-shadow: var(--shadow-m); display: flex; gap: 12px; align-items: center;
}
.shot-float b { font-size: 19px; color: var(--brand); }
.shot-float small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.4; }

/* ---------------- 数字条 ---------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.stat { background: #fff; padding: 22px 24px; }
.stat b { display: block; font-size: 26px; letter-spacing: -.6px; }
.stat span { font-size: 13px; color: var(--muted); }

/* ---------------- 卡片 ---------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; transition: .2s ease;
}
.card:hover { border-color: #b9cdff; box-shadow: var(--shadow-m); transform: translateY(-2px); }
.card h3 { font-size: 17px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.card-icon {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brand-l); color: var(--brand-d); margin-bottom: 16px;
}
.card-num { font-family: var(--mono); font-size: 12px; color: var(--gold); letter-spacing: 1px; }

.feat-list { display: grid; gap: 10px; margin-top: 16px; }
.feat-list li { list-style: none; display: flex; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.feat-list li::before { content: "✓"; color: var(--brand); font-weight: 700; }

/* ---------------- 截图区块 ---------------- */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.showcase.rev .showcase-media { order: 2; }
.showcase h3 { font-size: 24px; }
.showcase ul { margin-top: 18px; padding: 0; display: grid; gap: 12px; }
.showcase ul li { list-style: none; display: flex; gap: 10px; color: var(--ink-2); font-size: 14.5px; }
.showcase ul li b { color: var(--ink); }

/* ---------------- CTA ---------------- */
.cta {
  position: relative; overflow: hidden; border-radius: 20px; padding: 54px 48px;
  background: linear-gradient(135deg, #0a1b42 0%, #0d47c8 52%, #1664ff 100%); color: #fff;
}
.cta::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 66%);
}
.cta h2 { color: #fff; font-size: 30px; }
.cta p { color: rgba(255, 255, 255, .82); margin-top: 12px; max-width: 520px; }
.cta-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------- 页头 ---------------- */
.page-head { padding: 58px 0 40px; background: linear-gradient(180deg, var(--soft), #fff); border-bottom: 1px solid var(--line-2); }
.page-head h1 { font-size: 34px; letter-spacing: -.8px; }
.page-head p { margin-top: 12px; color: var(--muted); max-width: 620px; }
.crumb { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--brand); }

/* ---------------- 表格 ---------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.plain { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.plain th, table.plain td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-2); }
table.plain th { background: #fbfcfd; font-weight: 600; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
table.plain tr:last-child td { border-bottom: none; }
table.plain td.num { font-family: var(--mono); }
table.plain .yes { color: var(--brand); font-weight: 600; }
table.plain .no { color: #c2ccd4; }

/* ---------------- 表单 ---------------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.input, select.input, textarea.input {
  height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14.5px; font-family: inherit; color: var(--ink); background: #fff; width: 100%;
  transition: border-color .16s, box-shadow .16s;
}
textarea.input { height: auto; padding: 11px 13px; line-height: 1.7; resize: vertical; }
.input:focus { outline: none; border-color: #9dc0ff; box-shadow: 0 0 0 3px rgba(22, 100, 255, .1); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 12.5px; color: var(--muted); }
.msg { margin-top: 12px; font-size: 13.5px; }
.msg.ok { color: var(--brand); }
.msg.err { color: var(--danger); }

/* ---------------- 列表 ---------------- */
.log-item { display: grid; grid-template-columns: 132px 1fr; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line-2); }
.log-item:last-child { border-bottom: none; }
.log-ver { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.log-ver small { display: block; font-family: var(--font); font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 4px; }
.log-body ul { margin: 8px 0 0; padding-left: 1.05em; color: var(--ink-2); font-size: 14px; }
.log-body ul li { margin-bottom: 5px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--brand-l); color: var(--brand-d); }
.tag--gray { background: #f1f4f7; color: var(--muted); }
.tag--gold { background: #fbf3e4; color: #8c6425; }

.dl-card { display: flex; gap: 20px; align-items: center; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.dl-card .dl-icon { width: 52px; height: 52px; border-radius: 13px; background: var(--brand-l); color: var(--brand-d); display: grid; place-items: center; flex: 0 0 auto; }
.dl-card .dl-main { flex: 1; min-width: 0; }
.dl-card .dl-main b { font-size: 16px; }
.dl-card .dl-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.dl-card .dl-act { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------------- 页脚 ---------------- */
.site-footer { background: #fbfcfd; border-top: 1px solid var(--line); padding: 56px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand p { color: var(--muted); font-size: 13.5px; margin-top: 14px; max-width: 280px; line-height: 1.8; }
.foot-col h4 { font-size: 13px; color: var(--ink); margin-bottom: 12px; letter-spacing: .4px; }
.foot-col a, .foot-col span { display: block; color: var(--muted); font-size: 13.5px; padding: 4px 0; }
.foot-col a:hover { color: var(--brand); }
.foot-bottom {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--muted); font-size: 12.5px;
}

/* ---------------- 动效 ---------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 34px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: 1fr; }
  .showcase.rev .showcase-media { order: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 70px; background: #fff;
    flex-direction: column; gap: 0; padding: 8px 24px 16px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-m);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--line-2); }
  .nav-toggle { display: block; }
  .nav-right .btn-ghost, .nav-right .nav-buy { display: none; }
  .nav-uname { display: none; }
  .nav-user-btn { padding: 0 8px 0 4px; }
  .shot-float { display: none; }
}
@media (max-width: 620px) {
  .section { padding: 56px 0; }
  .hero { padding: 46px 0 56px; }
  .hero h1 { font-size: 29px; }
  .h2 { font-size: 24px; }
  .page-head h1 { font-size: 26px; }
  .cta { padding: 36px 24px; }
  .cta h2 { font-size: 23px; }
  .form-grid { grid-template-columns: 1fr; }
  .log-item { grid-template-columns: 1fr; gap: 6px; }
  .dl-card { flex-wrap: wrap; }
  .dl-card .dl-act { width: 100%; }
  .dl-card .dl-act .btn { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ---------- 产品矩阵 / 多产品 ---------- */
.p-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.p-card {
  flex: 1 1 300px; max-width: 380px;
  display: flex; flex-direction: column; gap: 10px; padding: 24px 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; transition: box-shadow .18s, transform .18s, border-color .18s;
}
.p-card:hover { box-shadow: var(--shadow-m); transform: translateY(-3px); border-color: var(--pc, var(--brand)); }
.p-icon {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--pc, var(--brand)), var(--brand-d)); color: #fff;
  font-size: 20px; font-weight: 700;
}
.p-name { display: flex; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 650; color: var(--ink); }
.p-tag { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; min-height: 40px; }
.p-meta { font-size: 12.5px; color: var(--muted); }
.p-more { margin-top: auto; font-size: 13px; color: var(--pc, var(--brand)); font-weight: 600; }

/* 产品切换 tabs（下载/更新日志） */
.prod-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.prod-tabs button {
  padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer; font-family: inherit;
}
.prod-tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }

/* 通用产品详情页 */
.pd-hero { display: flex; gap: 20px; align-items: flex-start; }
.pd-icon {
  flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--pc, var(--brand)), var(--brand-d)); color: #fff;
  font-size: 30px; font-weight: 700;
}
.pd-desc { color: var(--ink-2); line-height: 1.9; white-space: pre-line; margin-top: 14px; max-width: 760px; }
.plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.plan-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.plan-card h4 { font-size: 15.5px; }
.plan-price { margin: 10px 0 2px; font-size: 26px; font-weight: 700; color: var(--ink); }
.plan-price small { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.plan-seats { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.plan-feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.plan-feats li { list-style: none; display: flex; gap: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.plan-feats li::before { content: '✓'; color: var(--brand); font-weight: 700; }

@media (max-width: 900px) {
  .plan-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .plan-cards { grid-template-columns: 1fr; }
}

/* ---------- 首页：hero 产品卡堆叠 / 旗舰产品面板 ---------- */
.hero-stack { display: grid; gap: 16px; padding: 8px 0; }
.hcard {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; box-shadow: var(--shadow-m);
  text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.hcard:hover { transform: translateY(-3px); border-color: var(--pc, var(--brand)); box-shadow: var(--shadow-l, var(--shadow-m)); }
.hcard:nth-child(2) { transform: translateX(30px); }
.hcard:nth-child(3) { transform: translateX(-16px); }
.hcard .p-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; flex: none; }
.hcard-main { flex: 1; min-width: 0; }
.hcard-main b { display: block; font-size: 16px; color: var(--ink); }
.hcard-main small {
  display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hcard-ver {
  flex: none; font-style: normal; font-size: 12px; font-weight: 600;
  color: var(--pc, var(--brand)); background: #f4f6fd;
  border-radius: 999px; padding: 4px 10px;
}
@media (max-width: 620px) {
  .hcard:nth-child(2), .hcard:nth-child(3) { transform: none; }
}
.spot-panel {
  background: linear-gradient(150deg, var(--pc, var(--brand)), var(--brand-d));
  border-radius: 16px; min-height: 320px; padding: 56px 40px;
  display: flex; flex-direction: column; gap: 12px; justify-content: center; color: #fff;
}
.spot-panel b { font-size: 24px; }
.spot-panel span { opacity: .85; line-height: 1.7; }

/* 首页统计条：紧跟 hero，收紧上间距 */
.stats-sec { padding: 26px 0 0; }
#products-sec { padding-top: 72px; }

/* ===== 系统公告（顶部横幅 / 首次弹窗） ===== */
.ann-bar { position: relative; z-index: 30; }
.ann-bar-item {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 24px; font-size: 13.5px; line-height: 1.6; color: #fff;
}
.ann-bar-item.info { background: var(--brand-d, #0d47c8); }
.ann-bar-item.important { background: #b98b4b; }
.ann-bar-item.urgent { background: #c0392b; }
.ann-bar-item b { font-weight: 650; }
.ann-bar-item a { color: #fff; text-decoration: underline; font-weight: 600; }
.ann-bar-item .ann-x {
  margin-left: auto; border: 0; background: transparent; color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer; opacity: .8; padding: 0 4px;
}
.ann-bar-item .ann-x:hover { opacity: 1; }
.ann-mask {
  position: fixed; inset: 0; background: rgba(12, 23, 48, .52); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ann-modal {
  background: #fff; border-radius: 16px; width: 100%; max-width: 540px;
  max-height: 82vh; overflow: auto; padding: 26px 24px 20px; box-shadow: var(--shadow-l);
}
.ann-modal h3 { font-size: 20px; margin-bottom: 10px; }
.ann-modal .ann-body { white-space: pre-wrap; color: var(--ink-2); font-size: 14.5px; line-height: 1.85; }
.ann-modal .ann-foot { margin-top: 20px; display: flex; justify-content: flex-end; }

/* ===== 站内通知铃铛 ===== */
.nav-bell { position: relative; display: inline-flex; }
.nav-bell > button {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-size: 15px; line-height: 1; color: var(--ink-2);
}
.nav-bell > button:hover { border-color: var(--brand); color: var(--brand); }
.nav-bell .badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; line-height: 17px;
  text-align: center; font-weight: 600;
}
.bell-panel {
  position: absolute; top: 44px; right: 0; width: 330px; max-height: 380px; overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-m); z-index: 80; text-align: left;
}
.bell-panel .bell-head {
  padding: 10px 14px; border-bottom: 1px solid var(--line-2); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.bell-panel .bell-head button { border: 0; background: transparent; color: var(--brand); cursor: pointer; font-size: 12.5px; }
.bell-item { padding: 11px 14px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.bell-item:last-child { border-bottom: 0; }
.bell-item.unread { background: #f7f9fd; }
.bell-item .bell-title { font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.bell-item .bell-text { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.6; }
.bell-item .bell-time { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.bell-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13px; }
@media (max-width: 620px) { .bell-panel { width: 280px; } }

/* ===== 头部账号区（登录 / 注册 / 用户胶囊） ===== */
.nav-buy {
  color: var(--ink-2); font-size: 14px; font-weight: 500; padding: 7px 12px; border-radius: 9px;
  transition: color .15s, background .15s;
}
.nav-buy:hover { color: var(--brand); background: var(--brand-l); }
.nav-auth-link {
  color: var(--ink-2); font-size: 14px; font-weight: 500; padding: 7px 10px; border-radius: 9px;
  transition: color .15s, background .15s;
}
.nav-auth-link:hover { color: var(--brand); background: var(--brand-l); }
.nav-auth-link.primary { color: var(--brand); font-weight: 600; }
.nav-auth-sep { width: 1px; height: 16px; background: var(--line); margin: 0 2px; }
.nav-user { position: relative; display: inline-flex; }
.nav-user-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 5px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.nav-user-btn:hover { border-color: #b9cdff; box-shadow: var(--shadow-s); }
.nav-ava {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: linear-gradient(145deg, #4c8dff, #0d47c8); color: #fff;
  font-size: 12.5px; font-weight: 700; display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.nav-uname { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nav-caret { font-size: 9px; color: var(--muted); margin-right: 2px; transition: transform .15s; }
.nav-user:hover .nav-caret, .nav-user:focus-within .nav-caret { transform: rotate(180deg); }
.nav-user-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 168px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-m); padding: 6px; z-index: 90;
}
.nav-user:hover .nav-user-menu, .nav-user:focus-within .nav-user-menu { display: block; }
.nav-user-menu::before {
  content: ""; position: absolute; top: -6px; right: 18px; width: 10px; height: 10px;
  background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.nav-user-menu a, .nav-user-menu button {
  display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 12px;
  border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--ink-2);
  border-radius: 8px; cursor: pointer; text-align: left; text-decoration: none;
}
.nav-user-menu a:hover, .nav-user-menu button:hover { background: var(--soft); color: var(--ink); }
.nav-user-menu .sep { height: 1px; background: var(--line-2); margin: 6px 4px; }
.nav-user-menu .danger { color: var(--danger); }
.nav-user-menu .danger:hover { background: #fdf2f0; color: var(--danger); }
.nav-user-menu .mi-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.nav-user-menu .mi-main { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* ===== 公告列表 / 协议正文 ===== */
.ann-list { display: grid; gap: 14px; }
.ann-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  background: #fff; transition: box-shadow .18s, border-color .18s;
}
.ann-card:hover { border-color: var(--brand); box-shadow: var(--shadow-m); }
.ann-card h3 { font-size: 17px; margin-bottom: 6px; }
.ann-card .ann-sum { color: var(--muted); font-size: 14px; line-height: 1.7; }
.ann-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.ann-tag { font-size: 12px; font-weight: 600; border-radius: 6px; padding: 2px 8px; background: var(--brand-l); color: var(--brand-d); }
.ann-tag.important { background: #fdf3e3; color: #8a6428; }
.ann-tag.urgent { background: #fdeceb; color: #a32a1d; }
.doc-body { max-width: 820px; }
.doc-body h3 { font-size: 17px; margin: 26px 0 8px; }
.doc-body p { color: var(--ink-2); line-height: 1.95; margin-bottom: 8px; }
.doc-body p:first-child { margin-top: 0; }

/* ================= 全站视觉润色（v1.8） ================= */
::selection { background: rgba(22, 100, 255, .15); color: var(--ink); }
.btn {
  background: linear-gradient(180deg, #2b76f7 0%, #1664ff 60%, #1257e8 100%);
  box-shadow: 0 1px 2px rgba(22, 100, 255, .18), 0 4px 12px rgba(22, 100, 255, .14);
}
.btn:hover {
  background: linear-gradient(180deg, #3d84fa 0%, #1e6aff 60%, #1660f0 100%);
  box-shadow: 0 2px 4px rgba(22, 100, 255, .2), 0 8px 20px rgba(22, 100, 255, .2);
}
.btn-ghost, .btn-quiet, .btn-plain, .btn-light {
  background: #fff; box-shadow: none;
}
.btn-ghost:hover, .btn-plain:hover { box-shadow: var(--shadow-s); }
.btn-light:hover { background: #f2fbf8; }

.page-head {
  background:
    radial-gradient(720px 200px at 92% -30%, #dce8ff 0%, rgba(220, 232, 255, 0) 65%),
    linear-gradient(180deg, var(--soft), #fff);
}
.page-head h1 { letter-spacing: -1px; }
.page-head p { line-height: 1.9; }

.stat b {
  background: linear-gradient(120deg, var(--brand-d), var(--brand));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.site-footer {
  background:
    linear-gradient(180deg, #fbfcfd, #f4f7fa);
  border-top: 1px solid var(--line);
}
.foot-col h4 { letter-spacing: .8px; }
.foot-bottom { opacity: .85; }

.h2 { letter-spacing: -.8px; }
.lead { line-height: 1.9; }

/* 滚动条微调（WebKit） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cdd6e2; border-radius: 8px; border: 2px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: #b3bfd0; }
::-webkit-scrollbar-track { background: transparent; }

/* ================= 科技蓝主题强化（v1.9） ================= */
:root {
  --brand-2: #19c6ff;        /* 青色点缀 */
  --tech-glow: rgba(22, 100, 255, .35);
  --ink: #0c1730;
}
/* 顶栏玻璃拟态 + 底部光晕线 */
.site-header {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.site-header.is-stuck {
  box-shadow: 0 10px 30px rgba(12, 23, 48, .08);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22, 100, 255, .35), rgba(25, 198, 255, .35), transparent);
}
/* 品牌按钮：纯净科技蓝（无扫光） */
.btn {
  background: linear-gradient(180deg, #2b76f7 0%, #1664ff 60%, #1257e8 100%);
  position: relative; overflow: hidden;
}
.btn:hover {
  background: linear-gradient(180deg, #3d84fa 0%, #1e6aff 60%, #1660f0 100%);
  box-shadow: 0 2px 4px rgba(22, 100, 255, .2), 0 10px 22px rgba(22, 100, 255, .22);
}
.btn:active {
  background: linear-gradient(180deg, #1257e8 0%, #1257e8 100%);
  box-shadow: 0 1px 3px rgba(22, 100, 255, .22);
}
.btn::after { display: none; }
/* 标题强调线：蓝→青渐变 */
.eyebrow::before {
  width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)); opacity: 1;
}
/* 页头光晕升级（蓝+青双光源） */
.page-head {
  background:
    radial-gradient(760px 220px at 92% -30%, rgba(25, 198, 255, .18) 0%, rgba(25, 198, 255, 0) 62%),
    radial-gradient(680px 260px at 8% -20%, rgba(22, 100, 255, .14) 0%, rgba(22, 100, 255, 0) 60%),
    linear-gradient(180deg, var(--soft), #fff);
}
/* Hero 网格 + 极光 */
.hero {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(25, 198, 255, .20) 0%, rgba(25, 198, 255, 0) 62%),
    radial-gradient(700px 380px at 6% 0%, rgba(22, 100, 255, .12) 0%, rgba(22, 100, 255, 0) 55%),
    linear-gradient(180deg, #f7faff, #fff);
}
/* 卡片悬停：蓝色描边光 */
.card:hover, .pick:hover {
  border-color: rgba(22, 100, 255, .38);
  box-shadow: 0 16px 40px rgba(22, 100, 255, .12);
}
/* 选中态光圈 */
.pick.on {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22, 100, 255, .14), 0 14px 34px rgba(22, 100, 255, .14);
}
/* 统计数字渐变（蓝→青） */
.stat b {
  background: linear-gradient(120deg, var(--brand-d), var(--brand) 55%, var(--brand-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* CTA 区科技渐变 */
.cta {
  background:
    radial-gradient(600px 240px at 85% 20%, rgba(25, 198, 255, .28), transparent 65%),
    linear-gradient(135deg, #0a1b42 0%, #0d47c8 58%, #1664ff 100%) !important;
}
/* 焦点环统一 */
.input:focus, select.input:focus, textarea.input:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22, 100, 255, .14);
}
/* 页脚顶部光线 */
.site-footer { position: relative; }
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22, 100, 255, .3), rgba(25, 198, 255, .3), transparent);
}

/* ================= 语义按钮配色（v2.0 按功能分配，文字不用黑色） =================
   蓝=主操作(提交/保存/登录/购买)  绿=获取与确认(下载/通过/恢复/启用)
   青=查看与工具(查看/复制/搜索/编辑)  橙=咨询与待办(咨询/预约/续费/重试)
   红=危险与停用(删除/驳回/注销/解绑)  蓝灰=中性导航(取消/返回/退出) */
.btn-success { background: linear-gradient(180deg, #2fd06f 0%, #16b45c 60%, #11a052 100%); color: #fff; border-color: transparent; }
.btn-success:hover { background: linear-gradient(180deg, #3edd7d 0%, #1cc467 60%, #14b05b 100%); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(22, 180, 92, .26); }
.btn-success:active { background: #11a052; transform: none; }

.btn-info { background: linear-gradient(180deg, #35c2f0 0%, #12a5dd 60%, #0d92c7 100%); color: #fff; border-color: transparent; }
.btn-info:hover { background: linear-gradient(180deg, #4ecdf6 0%, #1fb2e8 60%, #109ed1 100%); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(18, 165, 221, .26); }
.btn-info:active { background: #0d92c7; transform: none; }

.btn-warn { background: linear-gradient(180deg, #ffb347 0%, #f5970a 60%, #e08600 100%); color: #fff; border-color: transparent; }
.btn-warn:hover { background: linear-gradient(180deg, #ffc062 0%, #ffa41f 60%, #ee9200 100%); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(245, 151, 10, .28); }
.btn-warn:active { background: #e08600; transform: none; }

.btn-danger { background: linear-gradient(180deg, #f4695c 0%, #e8493c 60%, #d63d31 100%); color: #fff; border-color: transparent; }
.btn-danger:hover { background: linear-gradient(180deg, #f67b6f 0%, #ef5747 60%, #e2483b 100%); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(232, 73, 60, .26); }
.btn-danger:active { background: #d63d31; transform: none; }

/* 幽灵/中性按钮：文字改为品牌蓝 / 蓝灰，绝不用黑 */
.btn-ghost { color: var(--brand-d); border-color: #c9d9f5; }
.btn-ghost:hover { color: var(--brand-d); border-color: var(--brand); background: #fff; }
.btn-quiet { color: #55709c; }
.btn-quiet:hover { color: var(--brand-d); background: var(--soft); }
.btn-plain { color: #667d9c; }
.btn-plain:hover { color: var(--brand-d); background: var(--line-2); }

/* ==================================================================
   现代按钮体系 v3.0（重做：去浮雕 / 去扫光 / 去单一蓝）
   形态：斜向柔和渐变 + 大圆角 + 彩色光晕 + 微抬升悬停
   语义：主操作=靛，获取确认=翠，查看工具=天青，待办提醒=琥珀，
        危险=玫红，描边中性=石板，深底白钮=净白，深底描边=透白
   说明：本节位于文件末尾，同优先级下覆盖前面所有历代 .btn 定义
   ================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  position: relative;
  height: 40px; padding: 0 20px;
  border: 1px solid transparent; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  letter-spacing: .2px; white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(135deg, #5b54ea 0%, #4338ca 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 18px -8px rgba(79, 70, 229, .5);
  transition: background .22s ease, box-shadow .22s ease, transform .22s ease,
              color .22s ease, border-color .22s ease;
}
/* 彻底禁用历代装饰性伪元素（扫光 / 高光条） */
.btn::after, .btn::before { display: none !important; }

.btn:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
  color: #fff; transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 26px -10px rgba(79, 70, 229, .58);
}
.btn:active {
  background: linear-gradient(135deg, #4338ca 0%, #312e81 100%);
  color: #fff; transform: translateY(0) scale(.985);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 10px -6px rgba(79, 70, 229, .42);
}
.btn:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.btn:disabled, .btn[disabled] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
  background: linear-gradient(135deg, #5b54ea 0%, #4338ca 100%); color: #fff;
}

/* —— 尺寸 —— */
.btn-lg { height: 48px; padding: 0 28px; font-size: 15.5px; border-radius: 12px; }
.btn-sm { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 9px; }
.btn-block { width: 100%; }

/* —— 语义·获取与确认（翠绿）—— */
.btn-success {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%); color: #fff; border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 18px -8px rgba(5, 150, 105, .48);
}
.btn-success:hover {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 26px -10px rgba(5, 150, 105, .55);
}
.btn-success:active {
  background: linear-gradient(135deg, #059669 0%, #065f46 100%); color: #fff;
  transform: translateY(0) scale(.985);
}

/* —— 语义·查看与工具（天青）—— */
.btn-info {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); color: #fff; border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 18px -8px rgba(2, 132, 199, .48);
}
.btn-info:hover {
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 26px -10px rgba(2, 132, 199, .55);
}
.btn-info:active {
  background: linear-gradient(135deg, #0284c7 0%, #075985 100%); color: #fff;
  transform: translateY(0) scale(.985);
}

/* —— 语义·待办与提醒（琥珀金）—— */
.btn-warn {
  background: linear-gradient(135deg, #f0a825 0%, #c2740c 100%); color: #fff; border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 18px -8px rgba(194, 116, 12, .5);
}
.btn-warn:hover {
  background: linear-gradient(135deg, #d9900f 0%, #a5600a 100%); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 26px -10px rgba(194, 116, 12, .58);
}
.btn-warn:active {
  background: linear-gradient(135deg, #c2740c 0%, #8f5208 100%); color: #fff;
  transform: translateY(0) scale(.985);
}

/* —— 语义·危险与停用（玫红）—— */
.btn-danger {
  background: linear-gradient(135deg, #f2555a 0%, #b91c1c 100%); color: #fff; border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 18px -8px rgba(185, 28, 28, .48);
}
.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 26px -10px rgba(185, 28, 28, .55);
}
.btn-danger:active {
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%); color: #fff;
  transform: translateY(0) scale(.985);
}

/* —— 描边中性（石板 · 白底净边框）—— */
.btn-ghost {
  background: #fff; color: #475569; border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.btn-ghost:hover {
  background: #fff; color: #0f172a; border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 20px -10px rgba(15, 23, 42, .2);
}
.btn-ghost:active { background: #f8fafc; transform: translateY(0) scale(.985); }

/* —— 透明文字中性 —— */
.btn-quiet { background: transparent; color: #64748b; box-shadow: none; border-color: transparent; }
.btn-quiet:hover { background: #f1f5f9; color: #0f172a; box-shadow: none; border-color: transparent; transform: none; }
.btn-quiet:active { background: #e9eef6; transform: none; }
.btn-plain { background: transparent; color: #64748b; box-shadow: none; border-color: transparent; }
.btn-plain:hover { background: #f1f5f9; color: #0f172a; box-shadow: none; border-color: transparent; transform: none; }
.btn-plain:active { background: #e9eef6; transform: none; }

/* —— 深色背景上的实心白钮 —— */
.btn-light {
  background: #fff; color: #0f172a; border-color: transparent;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 8px 18px -8px rgba(15, 23, 42, .4);
}
.btn-light:hover {
  background: #fff; color: #0f172a; transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 12px 26px -10px rgba(15, 23, 42, .5);
}
.btn-light:active { transform: translateY(0) scale(.985); }

/* —— 深色背景上的透明白描边钮（替代旧的 inline 写法）—— */
.btn-outline-light {
  background: rgba(255, 255, 255, .06); color: #fff;
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .55);
  transform: translateY(-1px); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .45);
}
.btn-outline-light:active { background: rgba(255, 255, 255, .24); transform: translateY(0) scale(.985); }
.btn-outline-light:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }

/* —— 浅调辅助钮 —— */
.btn-soft {
  background: #eef2ff; color: #4338ca; border: 1px solid #dfe4ff;
  box-shadow: none;
}
.btn-soft:hover {
  background: #e4e9ff; color: #3730a3; border-color: #c9d1ff;
  transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(67, 56, 202, .4);
}

/* ==================================================================
   臻感按钮体系 v4.0（高级感重塑 · 深宝石色 · 绒面光影）
   变化：色彩降饱和加深呈现宝石质感、1px 定义描边、双层柔影、
        高级缓动、字距微调、暖调中性色
   仍禁：浮雕内阴影 / 扫光伪元素 / 垂直多段渐变（历史教训）
   语义不变：主操作=宝紫 获取确认=祖母绿 查看工具=深青
            待办提醒=香槟金 危险=石榴红 中性=暖石
   ================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  position: relative;
  height: 40px; padding: 0 22px;
  border: 1px solid #3a32b0; border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  letter-spacing: .3px; white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(135deg, #5a52e0 0%, #4238c0 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .1), 0 12px 28px -12px rgba(80, 70, 220, .48);
  transition: all .24s cubic-bezier(.22, .75, .3, 1);
}
.btn::after, .btn::before { display: none !important; }

.btn:hover {
  background: linear-gradient(135deg, #665ee8 0%, #4a40cc 100%);
  border-color: #4238c0; color: #fff; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(28, 25, 23, .1), 0 18px 36px -12px rgba(80, 70, 220, .55);
}
.btn:active {
  background: linear-gradient(135deg, #4238c0 0%, #332b9e 100%);
  border-color: #2d2687; color: #fff; transform: translateY(0) scale(.985);
  box-shadow: 0 1px 2px rgba(28, 25, 23, .12), 0 6px 14px -8px rgba(80, 70, 220, .4);
}
.btn:focus-visible { outline: 2px solid rgba(99, 102, 241, .55); outline-offset: 2px; }
/* 禁用态只做降透明处理，不覆盖语义底色 */
.btn:disabled, .btn[disabled] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}

/* —— 尺寸 —— */
.btn-lg { height: 48px; padding: 0 30px; font-size: 15.5px; border-radius: 12px; letter-spacing: .4px; }
.btn-sm { height: 32px; padding: 0 15px; font-size: 13px; border-radius: 9px; letter-spacing: .2px; }
.btn-block { width: 100%; }

/* —— 语义·获取与确认（祖母绿）—— */
.btn-success {
  background: linear-gradient(135deg, #0f9d73 0%, #0a7455 100%); color: #fff; border-color: #096b4e;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .1), 0 12px 28px -12px rgba(12, 140, 100, .46);
}
.btn-success:hover {
  background: linear-gradient(135deg, #12ab7e 0%, #0c8060 100%); color: #fff;
  border-color: #0a7455; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(28, 25, 23, .1), 0 18px 36px -12px rgba(12, 140, 100, .54);
}
.btn-success:active {
  background: linear-gradient(135deg, #0a7455 0%, #075740 100%); color: #fff;
  border-color: #064c38; transform: translateY(0) scale(.985);
}

/* —— 语义·查看与工具（深青）—— */
.btn-info {
  background: linear-gradient(135deg, #1279a8 0%, #0c5a80 100%); color: #fff; border-color: #0b5175;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .1), 0 12px 28px -12px rgba(15, 110, 155, .46);
}
.btn-info:hover {
  background: linear-gradient(135deg, #1587ba 0%, #0e668f 100%); color: #fff;
  border-color: #0c5a80; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(28, 25, 23, .1), 0 18px 36px -12px rgba(15, 110, 155, .54);
}
.btn-info:active {
  background: linear-gradient(135deg, #0c5a80 0%, #094562 100%); color: #fff;
  border-color: #083c55; transform: translateY(0) scale(.985);
}

/* —— 语义·待办与提醒（香槟金）—— */
.btn-warn {
  background: linear-gradient(135deg, #c58a1f 0%, #96640f 100%); color: #fff; border-color: #85580c;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .1), 0 12px 28px -12px rgba(180, 125, 25, .46);
}
.btn-warn:hover {
  background: linear-gradient(135deg, #d29628 0%, #a47012 100%); color: #fff;
  border-color: #96640f; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(28, 25, 23, .1), 0 18px 36px -12px rgba(180, 125, 25, .54);
}
.btn-warn:active {
  background: linear-gradient(135deg, #96640f 0%, #764d09 100%); color: #fff;
  border-color: #674208; transform: translateY(0) scale(.985);
}

/* —— 语义·危险与停用（石榴红）—— */
.btn-danger {
  background: linear-gradient(135deg, #c23842 0%, #93232c 100%); color: #fff; border-color: #7f1c24;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .1), 0 12px 28px -12px rgba(175, 40, 50, .46);
}
.btn-danger:hover {
  background: linear-gradient(135deg, #cf424c 0%, #a02832 100%); color: #fff;
  border-color: #93232c; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(28, 25, 23, .1), 0 18px 36px -12px rgba(175, 40, 50, .54);
}
.btn-danger:active {
  background: linear-gradient(135deg, #93232c 0%, #6f161d 100%); color: #fff;
  border-color: #5e1218; transform: translateY(0) scale(.985);
}

/* —— 描边中性（暖石 · 白底暖边）—— */
.btn-ghost {
  background: #fff; color: #524d47; border: 1px solid #e4dfd8;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .06), 0 10px 24px -14px rgba(28, 25, 23, .22);
}
.btn-ghost:hover {
  background: #fff; color: #231f1c; border-color: #cfc7bd;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(28, 25, 23, .07), 0 16px 32px -14px rgba(28, 25, 23, .28);
}
.btn-ghost:active { background: #faf9f7; border-color: #bdb4a8; transform: translateY(0) scale(.985); }

/* —— 透明文字中性 —— */
.btn-quiet { background: transparent; color: #78716c; box-shadow: none; border-color: transparent; }
.btn-quiet:hover { background: #f5f4f2; color: #292524; box-shadow: none; border-color: transparent; transform: none; }
.btn-quiet:active { background: #ebe9e5; transform: none; }
.btn-plain { background: transparent; color: #78716c; box-shadow: none; border-color: transparent; }
.btn-plain:hover { background: #f5f4f2; color: #292524; box-shadow: none; border-color: transparent; transform: none; }
.btn-plain:active { background: #ebe9e5; transform: none; }

/* —— 深色背景上的实心白钮 —— */
.btn-light {
  background: #fff; color: #1c1917; border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 14px 30px -12px rgba(0, 0, 0, .42);
}
.btn-light:hover {
  background: #fff; color: #1c1917; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 20px 40px -12px rgba(0, 0, 0, .5);
}
.btn-light:active { transform: translateY(0) scale(.985); }

/* —— 深色背景上的透明白描边钮 —— */
.btn-outline-light {
  background: rgba(255, 255, 255, .07); color: #fff;
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, .15); color: #fff; border-color: rgba(255, 255, 255, .52);
  transform: translateY(-1px); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5);
}
.btn-outline-light:active { background: rgba(255, 255, 255, .22); transform: translateY(0) scale(.985); }
.btn-outline-light:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }

/* —— 浅调辅助钮（紫罗兰缎面）—— */
.btn-soft {
  background: #efedfb; color: #4238c0; border: 1px solid #dcd8f5;
  box-shadow: 0 1px 2px rgba(28, 25, 23, .05);
}
.btn-soft:hover {
  background: #e5e2f8; color: #352ca6; border-color: #c6c0ee;
  transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(66, 56, 192, .38);
}
.btn-soft:active { background: #dbd7f4; transform: translateY(0) scale(.985); }
.btn-soft:active { transform: translateY(0) scale(.985); }

/* ==================================================================
   浅色科技主题（全站视觉升级 v3.0）
   定位：白/极浅蓝底 + 靛蓝主色 + 青色点缀 + 细网格与光晕，
   玻璃拟态顶栏与卡片。只做视觉增强，不动结构与类名；
   写在文件末尾，同特异性下后置覆盖生效。
   ================================================================== */
:root {
  --cyan: #00b8d4;
  --tech-a: rgba(22, 100, 255, .14);
  --tech-b: rgba(0, 184, 212, .14);
  --grid-line: rgba(22, 100, 255, .06);
  --surface: #f5f8ff;
}
body { background: #fbfcff; }

/* ---------- 顶栏：更强的玻璃拟态 + 底部光带 ---------- */
.site-header {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(190%) blur(18px);
  -webkit-backdrop-filter: saturate(190%) blur(18px);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px -16px rgba(12, 23, 48, .22);
}
.site-header::after {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22, 100, 255, .45), rgba(0, 184, 212, .5), rgba(22, 100, 255, .3), transparent);
}
.brand-mark {
  border-radius: 11px;
  background: linear-gradient(145deg, #4c9dff 0%, #1664ff 55%, #0d47c8 100%);
  box-shadow: 0 6px 16px -6px rgba(22, 100, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.nav-links a.on::after {
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 8px rgba(22, 100, 255, .5);
}

/* ---------- Hero：三光源 + 更细网格 + 斜向光束 ---------- */
.hero {
  background:
    radial-gradient(880px 420px at 90% -12%, rgba(0, 184, 212, .18) 0%, rgba(0, 184, 212, 0) 62%),
    radial-gradient(760px 400px at 4% 4%, rgba(22, 100, 255, .14) 0%, rgba(22, 100, 255, 0) 58%),
    radial-gradient(520px 300px at 50% 108%, rgba(22, 100, 255, .07) 0%, rgba(22, 100, 255, 0) 70%),
    linear-gradient(180deg, #f6faff 0%, #fbfcff 100%);
  padding: 74px 0 58px;
}
.hero::after {
  opacity: .85;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(680px 340px at 68% 26%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(680px 340px at 68% 26%, #000 0%, transparent 80%);
}
.hero::before {
  content: ""; position: absolute; left: -6%; top: 8%; width: 46%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22, 100, 255, .5), rgba(0, 184, 212, .6), transparent);
  transform: rotate(-14deg); pointer-events: none;
}
.hero h1 em {
  background: linear-gradient(100deg, var(--brand-d) 0%, var(--brand) 55%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pill {
  background: linear-gradient(135deg, rgba(22, 100, 255, .1), rgba(0, 184, 212, .12));
  border: 1px solid rgba(22, 100, 255, .18);
  color: var(--brand-d);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pill i {
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 184, 212, .18);
  animation: tech-pulse 2.4s ease-in-out infinite;
}
@keyframes tech-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 184, 212, .18); }
  50% { box-shadow: 0 0 0 6px rgba(0, 184, 212, .06); }
}
@media (prefers-reduced-motion: reduce) { .pill i { animation: none; } }

/* ---------- 按钮：靛蓝斜向渐变 + 彩色光晕 ---------- */
.btn {
  background: linear-gradient(135deg, #2f7bff 0%, #1664ff 52%, #0e4fd8 100%);
  box-shadow: 0 1px 2px rgba(22, 100, 255, .2), 0 8px 20px -8px rgba(22, 100, 255, .5);
  border-color: transparent;
}
.btn:hover {
  background: linear-gradient(135deg, #4389ff 0%, #1e6dff 52%, #1557e2 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(22, 100, 255, .22), 0 14px 28px -10px rgba(22, 100, 255, .58);
}
.btn:active { transform: translateY(0) scale(.99); }
.btn:focus-visible { outline: 2px solid rgba(22, 100, 255, .55); outline-offset: 2px; }
.btn-ghost {
  background: #fff; color: var(--brand-d); border-color: #cadcf7;
  box-shadow: 0 1px 2px rgba(12, 23, 48, .04);
}
.btn-ghost:hover {
  color: var(--brand-d); border-color: var(--brand);
  background: linear-gradient(180deg, #fff, #f5f9ff);
  box-shadow: 0 8px 18px -10px rgba(22, 100, 255, .45);
  transform: translateY(-1px);
}
.btn-quiet:hover { color: var(--brand-d); background: var(--surface); }

/* ---------- 卡片：白卡 + 顶部科技条 + 蓝色悬停光 ---------- */
.card, .pick, .ann-card, .dl-card, .plan-card {
  position: relative; overflow: hidden;
  border-radius: 16px; border-color: #e3ecfa;
  background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
}
.card::before, .pick::before, .ann-card::before, .plan-card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--cyan));
  opacity: 0; transition: opacity .22s ease;
}
.card:hover, .pick:hover, .ann-card:hover, .plan-card:hover {
  border-color: rgba(22, 100, 255, .4);
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -22px rgba(22, 100, 255, .45);
}
.card:hover::before, .pick:hover::before, .ann-card:hover::before, .plan-card:hover::before { opacity: 1; }
.card-icon {
  background: linear-gradient(145deg, #4c9dff, #1664ff 60%, #0d47c8);
  box-shadow: 0 8px 18px -8px rgba(22, 100, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.feat-list li::before { color: var(--cyan); }

/* ---------- 浅底区块：淡蓝 + 细网格 ---------- */
.section--soft {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(180deg, var(--surface) 0%, #fbfcff 100%);
  border-top: 1px solid #e9f0fb; border-bottom: 1px solid #e9f0fb;
}
.page-head {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(760px 220px at 92% -30%, rgba(0, 184, 212, .2) 0%, rgba(0, 184, 212, 0) 62%),
    radial-gradient(680px 260px at 6% -20%, rgba(22, 100, 255, .14) 0%, rgba(22, 100, 255, 0) 60%),
    linear-gradient(180deg, var(--surface), #fff);
  border-bottom: 1px solid #e9f0fb;
}

/* ---------- 数字条 ---------- */
.stats {
  background: #e9f0fb; border-color: #e3ecfa; border-radius: 16px;
  box-shadow: 0 18px 40px -26px rgba(22, 100, 255, .5);
}
.stat { background: linear-gradient(180deg, #fff, #fbfdff); }
.stat b { background: linear-gradient(120deg, #0d47c8, var(--brand) 50%, var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- 截图展示框：科技窗口 ---------- */
.shot {
  border-radius: 14px; border-color: #dbe6fb;
  box-shadow: 0 1px 2px rgba(12, 23, 48, .05), 0 26px 50px -24px rgba(22, 100, 255, .45);
  background: #fff;
}
.shot::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--brand), var(--cyan));
}
.shot-bar {
  background: linear-gradient(180deg, #fbfcff, #f4f7fd);
  border-bottom-color: #e9f0fb;
}
.shot-bar i { background: #cfdcee; }
.shot-bar i:first-child { background: #ffb3b3; }
.shot-bar i:nth-child(2) { background: #ffd79a; }
.shot-bar i:nth-child(3) { background: #9fe0b8; }
.shot-bar span { font-size: 11.5px; letter-spacing: .2px; }
.shot-float {
  border-radius: 14px; border-color: #dbe6fb;
  box-shadow: 0 18px 34px -18px rgba(22, 100, 255, .5);
}
.showcase-media { position: relative; }
.showcase-media::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -18px; height: 40px; z-index: -1;
  background: radial-gradient(50% 60% at 50% 50%, rgba(22, 100, 255, .28), transparent 70%);
  filter: blur(6px);
}

/* ---------- 产品卡 / 图标 ---------- */
.p-card, .hcard {
  position: relative; overflow: hidden;
  border-radius: 16px; border-color: #e3ecfa;
  background: linear-gradient(180deg, #fff, #fcfdff);
}
.p-card::before, .hcard::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--pc, var(--brand)), var(--cyan));
  opacity: .55; transition: opacity .2s ease;
}
.p-card:hover, .hcard:hover { border-color: rgba(22, 100, 255, .45); box-shadow: 0 22px 44px -22px rgba(22, 100, 255, .5); }
.p-card:hover::before, .hcard:hover::before { opacity: 1; }
.p-icon, .pd-icon {
  background: linear-gradient(145deg, var(--pc, #4c9dff), var(--brand) 55%, #0d47c8);
  box-shadow: 0 10px 22px -10px rgba(22, 100, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.hcard-ver { background: linear-gradient(135deg, rgba(22, 100, 255, .1), rgba(0, 184, 212, .12)); border: 1px solid rgba(22, 100, 255, .18); }
.spot-panel {
  background:
    radial-gradient(520px 240px at 88% 8%, rgba(0, 184, 212, .3), transparent 62%),
    linear-gradient(150deg, var(--pc, var(--brand)) 0%, #1664ff 48%, #0a1b42 100%);
  box-shadow: 0 30px 60px -30px rgba(22, 100, 255, .6);
}
.prod-tabs button.on {
  background: linear-gradient(135deg, #2f7bff, #0e4fd8); border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(22, 100, 255, .55);
}
.dl-card .dl-icon {
  background: linear-gradient(145deg, rgba(22, 100, 255, .12), rgba(0, 184, 212, .14));
  border: 1px solid rgba(22, 100, 255, .18); color: var(--brand-d);
}

/* ---------- 表格 / 表单 ---------- */
.table-wrap { border-color: #e3ecfa; border-radius: 16px; }
table.plain th {
  background: linear-gradient(180deg, #f7faff, #f2f6fd);
  color: var(--brand-d); letter-spacing: .3px;
  border-bottom: 1px solid #e3ecfa;
}
table.plain tr:hover td { background: #f8fbff; }
.input, select.input, textarea.input { border-color: #dde7f6; border-radius: 11px; background: #fcfdff; }
.input:focus, select.input:focus, textarea.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22, 100, 255, .13);
}

/* ---------- 页脚 ---------- */
.site-footer {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(180deg, #f6f9ff, #eef4fc);
}
.site-footer::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22, 100, 255, .45), rgba(0, 184, 212, .5), transparent);
}
.foot-col h4 { color: var(--brand-d); }

/* ---------- 窄屏顶栏：避免「登录/注册」被挤成竖排 ---------- */
@media (max-width: 620px) {
  .nav { gap: 10px; }
  .brand { gap: 8px; min-width: 0; }
  .brand-text b { font-size: 14.5px; }
  .brand-text small { display: none; }
  .nav-right { gap: 4px; }
  .nav-auth-link {
    white-space: nowrap; font-size: 13px; padding: 6px 8px;
  }
  .nav-auth-sep { display: none; }
  .nav-toggle { margin-left: 4px; }
}

/* ================= 首页旗舰产品轮播（v3.1） ================= */
.pcar { position: relative; }
/* 堆叠切换：所有幻灯片同占一格，只有 .on 那张可见，高度取最高一张，切换时不会跳动 */
.pcar-viewport { padding: 6px 4px 26px; margin: -6px -4px -26px; }
.pcar-track { display: grid; }
.pcar-slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px) scale(.994);
  transition: opacity .42s cubic-bezier(.22, .75, .3, 1),
              transform .42s cubic-bezier(.22, .75, .3, 1),
              visibility 0s linear .42s;
}
.pcar-slide.on {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition: opacity .42s cubic-bezier(.22, .75, .3, 1),
              transform .42s cubic-bezier(.22, .75, .3, 1),
              visibility 0s;
}
.pcar-slide .showcase { align-items: center; height: 100%; }
.pcar-info { min-width: 0; }

.pcar-head { display: flex; align-items: center; gap: 14px; }
.pcar-head .p-icon {
  width: 54px; height: 54px; font-size: 25px; border-radius: 15px; flex: none;
  box-shadow: 0 12px 26px -14px rgba(22, 100, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.pcar-title { min-width: 0; }
.pcar-title b {
  display: block; font-size: 23px; line-height: 1.35; letter-spacing: -.3px; color: var(--ink);
}
.pcar-title small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

.pcar-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pcar-pills span {
  font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--brand-d);
  background: linear-gradient(135deg, rgba(22, 100, 255, .08), rgba(0, 184, 212, .10));
  border: 1px solid rgba(22, 100, 255, .16);
  border-radius: 999px; padding: 4px 12px;
}

/* 控制条 */
.pcar-ctrl {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px;
}
.pcar-arrow {
  width: 38px; height: 38px; padding: 0; border-radius: 50%;
  border: 1px solid #dbe6fb; background: #fff; color: var(--brand-d);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-s);
  transition: transform .2s cubic-bezier(.22, .75, .3, 1), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.pcar-arrow:hover {
  background: linear-gradient(135deg, #2f7bff, #0e4fd8); border-color: transparent; color: #fff;
  transform: translateY(-1px); box-shadow: 0 14px 24px -12px rgba(22, 100, 255, .72);
}
.pcar-arrow:active { transform: scale(.94); }
.pcar-arrow:focus-visible { outline: 2px solid rgba(22, 100, 255, .42); outline-offset: 2px; }

.pcar-dots { display: flex; align-items: center; gap: 7px; }
.pcar-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #cfdcee;
  cursor: pointer; transition: width .32s cubic-bezier(.22, .75, .3, 1), background .32s;
}
.pcar-dots button:hover { background: #a9c2e4; }
.pcar-dots button[aria-current="true"] {
  width: 26px; background: linear-gradient(90deg, var(--brand), var(--cyan));
}
.pcar-dots button:focus-visible { outline: 2px solid rgba(22, 100, 255, .42); outline-offset: 3px; }
.pcar-count {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  letter-spacing: .5px; min-width: 44px; text-align: center;
}

@media (max-width: 900px) {
  .pcar-title b { font-size: 20px; }
  .pcar-head .p-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 13px; }
}
@media (max-width: 620px) {
  .pcar-pills { margin-top: 14px; }
  .pcar-ctrl { gap: 8px; margin-top: 16px; }
  .pcar-count { min-width: 38px; }
}