/* ================= AI快享 站点样式 ================= */
:root {
  --brand: #5b5bd6;
  --brand-2: #9b5cf6;
  --brand-3: #f25c8a;
  --grad: linear-gradient(120deg, #6366f1 0%, #8b5cf6 48%, #d946ef 100%);
  --grad-soft: linear-gradient(120deg, rgba(99,102,241,.12), rgba(217,70,239,.12));
  --ink: #0d1424;
  --ink-2: #2b3446;
  --muted: #6b7688;
  --line: #e7e9f3;
  --bg: #f6f7fc;
  --card: #ffffff;
  --ok: #12a150;
  --warn: #d97706;
  --danger: #e11d48;
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05);
  --shadow: 0 12px 32px rgba(23,29,64,.10);
  --shadow-lg: 0 24px 60px rgba(23,29,64,.16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 78px; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 12px;
  padding: 11px 20px; font-size: 15px; font-weight: 600;
  transition: .2s ease; white-space: nowrap; background: #fff; color: var(--ink);
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn.primary { background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(99,102,241,.28); }
.btn.primary:hover { box-shadow: 0 12px 26px rgba(99,102,241,.36); transform: translateY(-1px); }
.btn.ghost { background: #fff; border-color: var(--line); color: var(--ink-2); }
.btn.ghost:hover { border-color: #cfd4e6; background: #fbfbfe; }
.btn.dark { background: #11182b; color: #fff; }
.btn.sm { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }
.btn.lg { padding: 14px 28px; font-size: 16px; border-radius: 14px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }
.btn.link { background: none; color: var(--brand); padding: 4px 6px; font-weight: 600; }

/* ---------- 导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(14px);
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(231,233,243,.9);
}
.nav-inner { height: 66px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.2px; }
.logo {
  width: 32px; height: 32px; border-radius: 10px; background: var(--grad);
  color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 800;
  box-shadow: 0 6px 14px rgba(99,102,241,.35);
}
.nav-links { display: flex; gap: 22px; margin-left: 8px; }
.nav-links a { color: var(--muted); font-size: 14.5px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-user { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }

/* 导航实时时钟 */
.nav-clock {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: linear-gradient(120deg, rgba(99,102,241,.09), rgba(217,70,239,.09));
  border: 1px solid rgba(99,102,241,.16);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;   /* 任何宽度下都不允许折行/被压扁 */
  flex: 0 0 auto;
}
.clock-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.15);
  animation: dotPulse 2s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes dotPulse { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .55; transform: scale(.82) } }
.clock-date { font-size: 12.5px; color: var(--muted); }
/* 时间必须用实色：此前用 background-clip:text + color:transparent 做渐变字，
   在微信/部分国产浏览器或关闭硬件加速时会整段文字消失，改成实色保证一定能看到 */
.clock-time {
  font-size: 14px; font-weight: 800; letter-spacing: .4px;
  color: #4f46e5;
  -webkit-text-fill-color: #4f46e5;
  font-variant-numeric: tabular-nums;
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 64px 0 40px; }
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 620px;
  background:
    radial-gradient(600px 320px at 18% 10%, rgba(99,102,241,.20), transparent 60%),
    radial-gradient(520px 300px at 82% 0%, rgba(217,70,239,.16), transparent 62%);
  z-index: 0;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.06fr .94fr; gap: 48px; align-items: center; }
.badge-pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: #4f46e5; background: rgba(99,102,241,.09); border: 1px solid rgba(99,102,241,.18);
  padding: 6px 12px; border-radius: 999px;
}
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.16); }
h1.hero-title {
  font-size: clamp(34px, 4.4vw, 54px); line-height: 1.14; margin: 18px 0 16px;
  letter-spacing: -1.2px; font-weight: 800;
}
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 17.5px; color: var(--muted); max-width: 520px; margin: 0 0 26px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 26px; margin-top: 26px; }
.hero-meta div strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.hero-meta div span { font-size: 13px; color: var(--muted); }

/* 展示卡 */
.demo-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-lg); padding: 20px; position: relative;
}
.demo-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.traffic { display: flex; gap: 6px; }
.traffic i { width: 10px; height: 10px; border-radius: 50%; background: #e6e8f0; display: block; }
.demo-title { font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.demo-chip { display: inline-block; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.demo-body { background: #fbfbfe; border: 1px solid #eef0f8; border-radius: 14px; padding: 16px; }
.demo-line { height: 10px; border-radius: 6px; background: #e9ecf6; margin-bottom: 10px; }
.demo-line.w80 { width: 80%; } .demo-line.w60 { width: 60%; } .demo-line.w90 { width: 90%; }
.demo-line.shine { background: linear-gradient(90deg,#e9ecf6 20%,#f5f7fd 40%,#e9ecf6 60%); background-size: 200% 100%; animation: shine 1.6s linear infinite; }
@keyframes shine { to { background-position: -200% 0; } }
.demo-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.demo-tags span { font-size: 11.5px; color: #6d5bd0; background: rgba(99,102,241,.09); padding: 4px 8px; border-radius: 7px; }
.float-tag {
  position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 13px; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow); display: flex; gap: 7px; align-items: center;
}
.float-tag.t1 { right: -14px; top: 64px; animation: float 5s ease-in-out infinite; }
.float-tag.t2 { left: -22px; bottom: 66px; animation: float 6s ease-in-out infinite .8s; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

/* ---------- 热点条 ---------- */
.hot-bar { margin: 26px 0 8px; }
.hot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hot-head h3 { font-size: 14px; margin: 0; font-weight: 700; }
.hot-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.hot-scroll::-webkit-scrollbar { height: 6px; }
.hot-scroll::-webkit-scrollbar-thumb { background: #dfe3f0; border-radius: 99px; }
.hot-chip {
  flex: 0 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap;
  display: flex; align-items: center; gap: 8px; transition: .18s;
}
.hot-chip:hover { border-color: #c9cdf0; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.hot-chip b { font-size: 11px; color: #fff; background: var(--grad); border-radius: 5px; padding: 1px 5px; }
.hot-chip .heat { color: #98a1b3; font-size: 11.5px; }
.hot-chip .hot-no { font-size: 11px; color: #98a1b3; font-variant-numeric: tabular-nums; min-width: 14px; text-align: center; }

/* ---------- 工作台：多平台热榜 ---------- */
.hot-panel { padding: 0; overflow: hidden; }
.hot-panel-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; flex-wrap: wrap; }
.hot-panel-head h3 { margin: 0; font-size: 15px; }
.hot-panel-head .hint { font-size: 12.5px; color: var(--muted); }
.hot-meta { margin-left: auto; font-size: 12px; color: #98a1b3; font-variant-numeric: tabular-nums; }
.hot-refresh { font-size: 12.5px; }

.hot-tabs { display: flex; gap: 8px; padding: 0 20px 12px; overflow-x: auto; scrollbar-width: none; }
.hot-tabs::-webkit-scrollbar { display: none; }
.hot-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  background: #f6f7fb; border: 1px solid transparent; border-radius: 10px;
  padding: 7px 12px; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: .16s;
}
.hot-tab:hover { background: #eef0f9; }
.hot-tab.on { background: #fff; border-color: #cfd3f7; color: #4f46e5; box-shadow: 0 2px 10px rgba(99,102,241,.12); font-weight: 600; }
.hot-tab b { font-size: 11px; font-weight: 600; color: #98a1b3; background: #eef1f8; border-radius: 6px; padding: 1px 5px; }
.hot-tab.on b { color: #4f46e5; background: #eef0ff; }
.ht-ico { font-size: 13px; }

.hot-list { max-height: 430px; overflow-y: auto; border-top: 1px solid var(--line); }
.hot-list::-webkit-scrollbar { width: 8px; }
.hot-list::-webkit-scrollbar-thumb { background: #e2e6f2; border-radius: 99px; }
.hot-list::-webkit-scrollbar-thumb:hover { background: #cfd5e8; }

.hot-row {
  width: 100%; display: grid; align-items: center; gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) auto auto 44px auto;
  padding: 10px 20px; background: none; border: 0; border-bottom: 1px solid #f2f4fa;
  text-align: left; cursor: pointer; transition: background .14s;
}
.hot-row:last-child { border-bottom: 0; }
.hot-row:hover { background: #f8f9fe; }
.hot-row.on { background: #eef0ff; box-shadow: inset 3px 0 0 #6366f1; }

.hr-pos { font-size: 13px; font-weight: 700; color: #b6bdcf; font-variant-numeric: tabular-nums; text-align: center; }
.hr-pos.hot1 { color: #ef4444; }
.hr-pos.hot2 { color: #f97316; }
.hr-pos.hot3 { color: #eab308; }

.hr-main { min-width: 0; display: flex; align-items: center; gap: 6px; }
.hr-title { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hot-row.on .hr-title { font-weight: 600; color: #4338ca; }
.hr-tag { flex: 0 0 auto; font-style: normal; font-size: 10.5px; line-height: 16px; padding: 0 4px; border-radius: 4px; }
.hr-tag.t-新 { background: #eef2ff; color: #4f46e5; }
.hr-tag.t-热 { background: #fff1f2; color: #e11d48; }
.hr-tag.t-爆 { background: #fff7ed; color: #ea580c; }
.hr-tag.t-荐 { background: #ecfdf5; color: #059669; }

.hr-plat { font-size: 11.5px; color: #98a1b3; white-space: nowrap; }
.hr-heat { font-size: 12px; color: #8b94a8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hr-trend { font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; color: #b6bdcf; }
.hr-trend.up { color: #ef4444; }
.hr-trend.down { color: #10b981; }
.hr-trend.new { color: #4f46e5; font-weight: 600; }
.hr-use { font-size: 11px; color: #b6bdcf; white-space: nowrap; }

.hot-empty { padding: 34px 20px; text-align: center; color: #98a1b3; font-size: 13px; }
.hot-foot { padding: 10px 20px 14px; font-size: 11.5px; color: #a8b0c2; border-top: 1px solid #f4f6fb; }

@media (max-width: 560px) {
  .hot-panel-head { padding: 14px 14px 10px; }
  .hot-tabs { padding: 0 14px 10px; }
  .hot-row { grid-template-columns: 26px minmax(0, 1fr) auto auto; grid-column-gap: 8px; padding: 9px 14px; }
  .hr-plat, .hr-use, .hot-meta { display: none; }
  .hot-foot { padding: 9px 14px 12px; }
}

/* ---------- 通用区块 ---------- */
section.block { padding: 68px 0; }
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.sec-head .kicker { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--brand); text-transform: uppercase; }
.sec-head h2 { font-size: clamp(26px, 3vw, 36px); margin: 10px 0 10px; letter-spacing: -.8px; font-weight: 800; }
.sec-head p { color: var(--muted); margin: 0; font-size: 15.5px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  transition: .22s;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #dfe3f5; }
.feature .ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--grad-soft); color: var(--brand); margin-bottom: 14px;
}
.feature h3 { font-size: 16.5px; margin: 0 0 6px; font-weight: 700; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; position: relative; }
.step::before {
  counter-increment: s; content: "0" counter(s);
  font-size: 13px; font-weight: 800; color: #c7cbe6; letter-spacing: 1px;
}
.step h3 { margin: 10px 0 6px; font-size: 17px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

/* 模板（炫动效果） */
.tpl-section { position: relative; overflow: hidden; }
.tpl-section > .wrap { position: relative; z-index: 1; }
.tpl-aurora { position: absolute; border-radius: 50%; pointer-events: none; opacity: .6; }
.tpl-aurora.a1 {
  width: 520px; height: 520px; left: -170px; top: -200px;
  background: radial-gradient(circle at 35% 35%, rgba(99,102,241,.32), transparent 62%);
  animation: auroraA 17s ease-in-out infinite;
}
.tpl-aurora.a2 {
  width: 460px; height: 460px; right: -150px; bottom: -210px;
  background: radial-gradient(circle at 60% 40%, rgba(217,70,239,.28), transparent 62%);
  animation: auroraB 21s ease-in-out infinite;
}
@keyframes auroraA { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(70px,50px) scale(1.14) } }
@keyframes auroraB { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(-60px,-46px) scale(1.12) } }

.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; perspective: 1000px; }
.tpl {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px;
  display: flex; gap: 14px; align-items: flex-start;
  transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: opacity .55s ease, translate .55s cubic-bezier(.2,.9,.3,1),
    transform .18s ease, box-shadow .28s ease, border-color .28s ease;
  transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s, 0s;
}
.anim-ready .tpl { opacity: 0; translate: 0 22px; }
.tpl.in { opacity: 1; translate: 0 0; }
.tpl::before {
  content: ""; position: absolute; inset: -40% -70%;
  background: linear-gradient(100deg, transparent 38%, rgba(139,92,246,.18) 47%, rgba(217,70,239,.20) 53%, transparent 63%);
  transform: translateX(-75%) rotate(7deg); opacity: 0;
  transition: transform .85s ease, opacity .35s ease;
  pointer-events: none;
}
.tpl:hover::before { transform: translateX(75%) rotate(7deg); opacity: 1; }
.tpl:hover {
  border-color: #cfd3f7;
  box-shadow: 0 20px 44px rgba(99,102,241,.20);
  transform: perspective(820px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) scale(1.014);
}
.tpl .em {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 19px;
  background: var(--grad-soft); flex: 0 0 auto;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.5), box-shadow .35s ease;
  animation: emBob 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .37s);
}
.tpl:hover .em { transform: scale(1.16) rotate(-8deg); box-shadow: 0 10px 22px rgba(139,92,246,.30); }
@keyframes emBob { 0%,100% { translate: 0 0 } 50% { translate: 0 -4px } }
.tpl-glow {
  position: absolute; width: 130px; height: 130px; right: -42px; bottom: -52px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.24), transparent 70%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.tpl:hover .tpl-glow { opacity: 1; }
.tpl h4 { margin: 0 0 4px; font-size: 15px; position: relative; }
.tpl p { margin: 0; font-size: 13px; color: var(--muted); position: relative; }

@media (prefers-reduced-motion: reduce) {
  .tpl, .tpl .em, .tpl-aurora, .clock-dot { animation: none !important; transition: none !important; }
  .tpl { opacity: 1; translate: none; }
}

/* 价格 */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px;
  position: relative; transition: .22s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card.pop { border-color: transparent; box-shadow: 0 18px 44px rgba(99,102,241,.20); }
.price-card.pop::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 21px; background: var(--grad); z-index: -1;
}
.price-card .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(139,92,246,.35);
}
.price-name { font-size: 16px; font-weight: 700; }
.price-amount { display: flex; align-items: flex-end; gap: 6px; margin: 12px 0 4px; }
.price-amount .cur { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.price-amount .val { font-size: 42px; font-weight: 800; letter-spacing: -2px; line-height: 1; }
.price-amount .unit { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.price-origin { color: #a3aab9; font-size: 13px; text-decoration: line-through; }
.price-feats { list-style: none; padding: 18px 0 0; margin: 16px 0 0; border-top: 1px dashed var(--line); }
.price-feats li { display: flex; gap: 9px; font-size: 14px; color: var(--ink-2); padding: 6px 0; }
.price-feats li svg { flex: 0 0 auto; margin-top: 5px; color: var(--ok); }

/* 套餐周期次数 + 加油包（v1.3） */
.price-quota {
  font-size: 13px; color: var(--ink-2); background: #f3f4fd; border-radius: 10px;
  padding: 8px 12px; margin-top: 12px;
}
.price-quota b { color: var(--brand); font-size: 15px; font-weight: 800; }
.pack-block { grid-column: 1 / -1; margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 22px; }
.pack-block-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pack-block-head h4 { margin: 0; font-size: 15.5px; letter-spacing: -.2px; }
.pack-block-head span { font-size: 12.5px; color: var(--muted); }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.price-card.pack { padding: 20px; background: linear-gradient(180deg, #fff, #fafaff); }
.price-card.pack .price-amount .val { font-size: 32px; letter-spacing: -1px; }
.price-card.pack .price-quota { margin-top: 10px; }

.quota-bar { height: 8px; border-radius: 999px; background: #eef0f8; margin-top: 18px; overflow: hidden; }
.quota-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); transition: width .4s; }
.quota-bar-note { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

.exhaust-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.exhaust { text-align: left; }
.exhaust-desc { color: var(--muted); font-size: 13.5px; line-height: 1.75; }
.exhaust-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin-bottom: 12px;
}
.faq summary { font-weight: 600; font-size: 15.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-weight: 700; font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--muted); font-size: 14.5px; margin: 12px 0 2px; }

/* CTA */
.cta-box {
  background: var(--grad); border-radius: 26px; padding: 54px 40px; text-align: center; color: #fff;
  box-shadow: 0 24px 60px rgba(99,102,241,.30); position: relative; overflow: hidden;
}
.cta-box::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 20% 0%, rgba(255,255,255,.28), transparent 60%);
}
.cta-box h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 10px; position: relative; z-index: 1; }
.cta-box p { margin: 0 0 24px; opacity: .92; position: relative; z-index: 1; }
.cta-box .btn { background: #fff; color: #4f46e5; position: relative; z-index: 1; }

/* footer */
footer { border-top: 1px solid var(--line); background: #fff; padding: 40px 0 30px; margin-top: 60px; }
.foot-grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
.foot-links a { color: var(--muted); font-size: 14px; }
.foot-copy { color: #98a1b3; font-size: 13px; margin-top: 22px; }

/* 工作台模式下收起营销导航 */
body.in-app .nav-links { display: none; }
body.in-app #btnEnter { display: none; }

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(13,20,36,.42); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 100; padding: 20px;
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.modal {
  background: #fff; border-radius: 20px; width: min(440px, 100%); padding: 30px 28px;
  box-shadow: var(--shadow-lg); position: relative; animation: pop .22s cubic-bezier(.2,.9,.3,1.3);
  max-height: 92vh; overflow: auto;
}
.modal.wide { width: min(560px, 100%); }
@keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0 } }
.modal h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.4px; }
.modal .sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.modal-close {
  position: absolute; right: 14px; top: 12px; border: 0; background: none; font-size: 22px;
  color: #a3aab9; line-height: 1; padding: 6px;
}
.tabs { display: flex; background: #f2f3fa; border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.tabs button {
  flex: 1; border: 0; background: none; padding: 9px; border-radius: 9px; font-weight: 600;
  font-size: 14px; color: var(--muted); transition: .18s;
}
.tabs button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.input, textarea.input, select.input {
  width: 100%; border: 1px solid var(--line); background: #fbfbfe; border-radius: 11px;
  padding: 11px 13px; font-size: 14.5px; color: var(--ink); outline: none; transition: .18s;
  font-family: inherit;
}
.input:focus, textarea.input:focus { border-color: #a5a8f0; background: #fff; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
textarea.input { resize: vertical; min-height: 84px; line-height: 1.6; }
.form-tip { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.form-err { color: var(--danger); font-size: 13px; margin: 4px 0 10px; min-height: 18px; }

/* 支付弹窗 */
.pay-amount { text-align: center; margin: 4px 0 18px; }
.pay-amount .v { font-size: 34px; font-weight: 800; letter-spacing: -1px; color: var(--brand); }
.qr-wrap { display: flex; gap: 18px; justify-content: center; margin: 6px 0 16px; }
.qr-item { text-align: center; }
.qr-item .box {
  width: 150px; height: 150px; border: 1px solid var(--line); border-radius: 12px; background: #fbfbfe;
  display: grid; place-items: center; overflow: hidden;
}
.qr-item img { width: 100%; height: 100%; object-fit: contain; }
.qr-item span { display: block; font-size: 13px; color: var(--muted); margin-top: 8px; }
.pay-steps { background: #f7f8fd; border-radius: 12px; padding: 14px 16px; font-size: 13.5px; color: var(--ink-2); }
.pay-steps li { margin: 4px 0; }
.order-no { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.order-no code { background: #f2f3fa; padding: 3px 8px; border-radius: 6px; color: var(--ink-2); }

/* toast */
#toast { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast {
  background: #11182b; color: #fff; padding: 11px 18px; border-radius: 11px; font-size: 14px;
  box-shadow: var(--shadow-lg); animation: toastIn .22s ease; max-width: 90vw;
}
.toast.err { background: #b91c3c; }
.toast.ok { background: #0f7a45; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px) } }

/* ---------- 工作台 ---------- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; padding: 26px 0 60px; align-items: start; }
.side { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; position: sticky; top: 86px; }
.side-user { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.avatar {
  width: 42px; height: 42px; border-radius: 13px; background: var(--grad); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: 0 0 auto;
}
.side-user .u-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.vip-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.vip-tag.on { background: linear-gradient(120deg,#fff1d6,#ffe0f0); color: #b45309; }
.vip-tag.off { background: #f1f2f8; color: var(--muted); }
.side-nav { padding: 12px 0 0; display: grid; gap: 4px; }
.side-nav button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none;
  padding: 10px 12px; border-radius: 10px; font-size: 14.5px; color: var(--ink-2); font-weight: 500; transition: .16s;
}
.side-nav button:hover { background: #f6f7fc; }
.side-nav button.on { background: var(--grad-soft); color: #4f46e5; font-weight: 700; }
.side-nav .ico { width: 18px; display: grid; place-items: center; }
.side-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

.panel { min-height: 60vh; }
.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: 22px; letter-spacing: -.5px; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.card + .card { margin-top: 18px; }
.card h3 { margin: 0 0 14px; font-size: 15.5px; }
.card h3 .hint { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 8px; }

.opt-row { display: flex; gap: 9px; flex-wrap: wrap; }
.opt {
  border: 1px solid var(--line); background: #fbfbfe; border-radius: 11px; padding: 9px 14px;
  font-size: 13.5px; color: var(--ink-2); font-weight: 500; transition: .16s;
}
.opt:hover { border-color: #c7cbef; }
.opt.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(99,102,241,.26); }

.gen-bar { display: flex; gap: 12px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.gen-bar .btn { min-width: 150px; }
.gen-left { font-size: 13px; color: var(--muted); }

.result { margin-top: 18px; scroll-margin-top: 84px; }
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.result-head .t { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.result-body {
  background: #fbfbfe; border: 1px solid #eef0f8; border-radius: 14px; padding: 20px;
  font-size: 15px; line-height: 1.85; white-space: pre-wrap; word-break: break-word; color: var(--ink-2);
  max-height: 640px; overflow: auto;
}
.result-body.empty { color: #98a1b3; text-align: center; padding: 60px 20px; }
.typing::after { content: "▌"; color: var(--brand); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.stat span { font-size: 13px; color: var(--muted); }
.stat strong { display: block; font-size: 20px; letter-spacing: -.4px; margin-top: 2px; }

.orders-table, .table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.table td { padding: 11px 8px; border-bottom: 1px solid #f2f3fa; color: var(--ink-2); }
.table tr:last-child td { border-bottom: 0; }
.pill { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; font-weight: 600; }
.pill.ok { background: #e8f7ee; color: #0f7a45; }
.pill.wait { background: #fff4e5; color: #b45309; }
.pill.off { background: #f1f2f8; color: #6b7688; }
.pill.info { background: #eef0ff; color: #4f46e5; }

.empty-tip { text-align: center; color: #98a1b3; padding: 44px 10px; font-size: 14px; }

/* ---------- 微信扫码 · 同步平台额度 ---------- */
.sync-card { background: linear-gradient(160deg, #fff 0%, #faf8ff 100%); }
.sync-grid { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; }
.sync-qr {
  width: 150px; height: 150px; border: 1px dashed #d7dbf0; border-radius: 14px; background: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.sync-qr img { width: 100%; height: 100%; object-fit: contain; }
.sync-qr-empty { font-size: 12.5px; color: #98a1b3; text-align: center; padding: 0 12px; }
.sync-body { min-width: 0; }
.sync-desc { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); }
.sync-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 26px; font-weight: 800; letter-spacing: 4px; text-align: center; color: #4f46e5;
  background: linear-gradient(120deg, rgba(99,102,241,.08), rgba(217,70,239,.08));
  border: 1px dashed rgba(99,102,241,.30); border-radius: 12px; padding: 12px; margin-bottom: 12px;
  transition: .25s;
}
.sync-code.ok { color: var(--ok); border-color: rgba(18,161,80,.35); background: rgba(18,161,80,.07); }
@media (max-width: 520px) { .sync-grid { grid-template-columns: 1fr; } .sync-qr { margin: 0 auto; } }

/* ---------- 密保 ---------- */
.sec-block { background: #fbfbfe; border: 1px dashed #e2e5f5; border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.sec-block-title { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.sec-block-title span { font-weight: 400; color: var(--muted); }
.sec-q { background: #f7f8fd; border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--ink-2); min-height: 42px; }
.sec-q.empty { color: #98a1b3; }

/* 移动端 */
.tabbar { display: none; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .demo-card { order: 0; max-width: 560px; }
  .feature-grid, .tpl-grid, .price-grid, .steps { grid-template-columns: 1fr 1fr; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .side-nav { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .side-nav button { width: auto; white-space: nowrap; }
  .side-user { border-bottom: 0; padding-bottom: 8px; }
  .side-foot { display: none; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .nav-user span:first-child { display: none; }
  .clock-date { display: none; }
  .nav-clock { padding: 6px 9px; gap: 5px; }
  .clock-time { font-size: 13px; }
  .nav-inner { gap: 10px; }
  .nav-right { gap: 8px; }
  .brand { white-space: nowrap; flex: 0 0 auto; font-size: 16px; }
  .nav-actions .btn.sm { padding: 8px 11px; font-size: 13px; }
  .float-tag.t2 { left: 0; bottom: 8px; }
  .float-tag.t1 { right: 0; top: 40px; }
  .wrap { width: calc(100% - 28px); }
  .feature-grid, .tpl-grid, .price-grid, .steps { grid-template-columns: 1fr; }
  .hero { padding: 36px 0 20px; }
  section.block { padding: 44px 0; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .modal { padding: 24px 20px; }
  .qr-wrap { flex-direction: column; align-items: center; }
}
@media (max-width: 370px) {
  .nav-inner { gap: 8px; }
  .nav-clock { padding: 5px 8px; }
  .clock-time { font-size: 12.5px; }
  .brand span:not(.logo) { display: none; }
}