/* SaaS 平台通用样式 */
:root {
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-soft: #eff6ff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --card: #ffffff;
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --radius: 12px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;            /* 最小正文 16px */
  line-height: 1.6;
}
a { color: var(--brand); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand-dark); }
/* 文档正文的链接保留下划线（长文阅读中需要视觉区分），其余界面一律用颜色变化代替下划线 */
.docs-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(37,99,235,.35); }
.docs-body a:hover { text-decoration-color: currentColor; }
img { max-width: 100%; height: auto; }
/* 主流显示器已是 1920×1080 起：容器停在 1180 时两侧空出大片留白、内容挤在中间很局促。
   1440 在 1920 屏上左右各留 240，比例舒适；更窄的屏靠 max-width 自动收缩，不会溢出。 */
.container { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 560px; }

/* 顶部导航 */
.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.site-header .container { display: flex; align-items: center; height: 62px; gap: 24px; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 18px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.logo-img { height: 30px; width: auto; display: block; border-radius: 6px; }
.logo span { color: var(--brand); }
.nav { display: flex; gap: 20px; flex: 1; flex-wrap: wrap; }
.nav a { color: var(--muted); font-size: 16px; }
.nav a:hover { color: var(--brand); }
.nav-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 汉堡按钮（仅移动端显示）与导航面板容器：
   桌面下 .nav-panel 就是普通一行的 flex 容器，导航与右侧按钮横向排开；
   移动端（≤768px）它变成从头部下方展开的抽屉，见下方 @media (max-width: 768px)。 */
.nav-toggle { display: none; }
.nav-panel { display: flex; align-items: center; flex: 1; gap: 24px; min-width: 0; }

/* 按钮 */
.btn {
  display: inline-block; padding: 11px 20px; border-radius: 8px; border: 1px solid var(--brand);
  background: var(--brand); color: #fff; font-size: 16px; cursor: pointer; transition: .15s;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; color: #fff; }
.btn.ghost { background: #fff; color: var(--brand); }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.gray { background: #fff; color: var(--muted); border-color: var(--line); }
.btn.gray:hover { background: #f1f5f9; color: var(--ink); }
.btn.danger { background: #fff; color: var(--danger); border-color: #fecaca; }
.btn.danger:hover { background: #fef2f2; }
.btn.sm { padding: 8px 14px; font-size: 15px; }
.btn.block { display: block; width: 100%; text-align: center; }

/* 首页 */
.hero { padding: 72px 0 56px; text-align: center; background: linear-gradient(180deg,#fff 0%, #f8fafc 100%); }
.hero h1 { font-size: 40px; line-height: 1.25; margin: 0 0 16px; }
.hero p { color: var(--muted); font-size: 18px; margin: 0 auto 28px; max-width: 640px; }
.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 48px 0; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.feature h3 { margin: 0 0 8px; font-size: 18px; }
.feature p { margin: 0; color: var(--muted); font-size: 16px; }

/* 卡片与表格 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; }
.card h2 { margin: 0 0 14px; font-size: 18px; }
.card h3 { margin: 18px 0 10px; font-size: 16px; }
.muted { color: var(--muted); font-size: 15px; }
.section-title { font-size: 24px; margin: 36px 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 500; background: #fbfcfe; }
tr:last-child td { border-bottom: none; }

/* 套餐 */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 20px 0 48px; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; }
.plan.hot { border-color: var(--brand); box-shadow: 0 8px 24px rgba(37,99,235,.12); }
.plan .name { font-size: 18px; font-weight: 700; }
.plan .tier { display: inline-block; margin: 8px 0 12px; font-size: 14px; color: var(--brand); background: var(--brand-soft); border-radius: 20px; padding: 3px 12px; }
.plan .price { font-size: 30px; font-weight: 700; margin-bottom: 4px; }
.plan .price small { font-size: 16px; font-weight: 400; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 16px 0 22px; flex: 1; }
.plan li { padding: 6px 0 6px 24px; position: relative; color: #334155; font-size: 16px; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); }

/* 对比表 */
.compare-wrap { overflow-x: auto; }
table.compare { min-width: 560px; }
table.compare th, table.compare td { text-align: center; }
table.compare th.lbl, table.compare td.lbl { text-align: left; color: var(--ink); font-weight: 500; background: #fbfcfe; white-space: nowrap; }
table.compare thead th { font-size: 16px; color: var(--ink); }
table.compare th.hl { background: var(--brand-soft); color: var(--brand-dark); }
table.compare tbody td.yes { color: var(--ok); font-weight: 700; font-size: 16px; }
table.compare tbody td:not(.yes) { color: var(--muted); }
table.compare tfoot td { border-bottom: none; padding-top: 14px; }

/* 支付方式 */
.pay-list { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pay-list li { background: var(--brand-soft); color: var(--brand-dark); border-radius: 20px; padding: 7px 16px; font-size: 15px; }

/* 微信扫码支付块 */
.wx-pay { margin-top: 22px; padding: 18px; border: 1px dashed var(--brand); border-radius: var(--radius); background: var(--brand-soft); text-align: center; }
.wx-pay h3 { margin: 0 0 12px; font-size: 18px; }
.wx-pay-qr { width: 200px; max-width: 60vw; height: auto; border-radius: 8px; background: #fff; padding: 8px; }
.wx-pay .muted { margin: 12px auto 0; max-width: 420px; }

/* 末尾 CTA */
.cta-band { background: var(--brand); color: #fff; border-radius: var(--radius); padding: 32px 36px; margin: 40px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cta-band h2 { margin: 0 0 6px; font-size: 22px; }
.cta-band p { margin: 0; opacity: .92; }
.cta-band a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cta-band .btn { background: #fff; color: var(--brand); border-color: #fff; }
.cta-band .btn:hover { background: #f1f5f9; }

/* 表单 */
.form-row { margin-bottom: 14px; }
label { display: block; font-size: 15px; color: #334155; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
textarea { min-height: 90px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.check input { width: auto; }

/* 提示 */
.alert { padding: 12px 14px; border-radius: 8px; font-size: 15px; margin-bottom: 16px; }
.alert.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert.ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.alert.info { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid #bfdbfe; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 14px; background: #f1f5f9; color: #475569; }
.badge.ok { background: #dcfce7; color: #15803d; }
.badge.warn { background: #fef3c7; color: #b45309; }
.badge.err { background: #fee2e2; color: #b91c1c; }

/* 控制台布局 */
.console { display: flex; min-height: calc(100vh - 62px); }
.sidebar { width: 208px; background: #fff; border-right: 1px solid var(--line); padding: 18px 12px; flex-shrink: 0; }
.sidebar a { display: block; padding: 10px 12px; border-radius: 8px; color: #334155; font-size: 16px; margin-bottom: 2px; }
.sidebar a:hover { background: #f1f5f9; text-decoration: none; }
.sidebar a.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.sidebar .group-title { font-size: 14px; color: #94a3b8; padding: 14px 12px 6px; }
.main { flex: 1; padding: 24px 28px; min-width: 0; }
.page-title { font-size: 24px; margin: 0 0 4px; }
.page-sub { color: var(--muted); margin: 0 0 20px; font-size: 15px; }

/* 统计小卡 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .v { font-size: 26px; font-weight: 700; }
.stat .k { color: var(--muted); font-size: 15px; }

/* 站点卡片 */
.sites { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.site-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.site-card h3 { margin: 0 0 6px; font-size: 18px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 16px; border-bottom: 1px dashed #eef2f7; flex-wrap: wrap; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* 页脚 */
.footer { border-top: 1px solid var(--line); padding: 36px 0 28px; color: var(--muted); background: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 0.8fr; gap: 28px; align-items: start; }
.footer-links h4 { font-size: 15px; color: var(--ink); margin: 0 0 10px; }
.footer-links p { margin: 0 0 6px; font-size: 16px; }
.footer-bottom p { margin: 0 0 4px; }
.footer-beian span { margin-right: 14px; }
.footer-brand .sm { font-size: 15px; }
.footer-brand .logo { font-size: 18px; }
.footer-brand .muted { margin: 10px 0 0; }
.footer-contact h4, .footer-qr h4 { font-size: 15px; color: var(--ink); margin: 0 0 10px; }
.footer-contact p { margin: 0 0 6px; font-size: 16px; }
.footer-contact .wx-id { font-weight: 700; color: var(--brand); }
.footer-qr .qr { width: 120px; height: 120px; border-radius: 8px; background: #fff; padding: 6px; border: 1px solid var(--line); }
.footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.empty { text-align: center; padding: 46px 20px; color: var(--muted); }

/* ==================== 全站公告条 ==================== */
.announce { font-size: 16px; line-height: 1.5; }
.announce .container { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.announce-ico { flex: none; }
.announce-info { background: #eff6ff; color: #1e40af; border-bottom: 1px solid #bfdbfe; }
.announce-warn { background: #fffbeb; color: #92400e; border-bottom: 1px solid #fde68a; }
.announce-danger { background: #fef2f2; color: #991b1b; border-bottom: 1px solid #fecaca; }

/* ==================== 平台设置页 ==================== */
.set-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.set-nav a { font-size: 15px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); text-decoration: none; }
.set-nav a:hover { border-color: var(--brand); color: var(--brand); }
.set-actions { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; flex-wrap: wrap; }
.set-card { scroll-margin-top: 16px; }
.set-desc { color: var(--muted); font-size: 15px; margin: -4px 0 14px; line-height: 1.6; }
.set-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.set-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.set-item.wide { grid-column: 1 / -1; }
.set-label { font-size: 15px; color: var(--ink); font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.set-hint { font-weight: 400; font-size: 13px; color: var(--muted); line-height: 1.5; }
.set-item input[type=text], .set-item input[type=number], .set-item input[type=password], .set-item select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px;
  background: #fff; color: var(--ink); box-sizing: border-box;
}
.set-item textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; font-family: inherit; background: #fff; color: var(--ink); box-sizing: border-box; resize: vertical; }
.set-item input:focus, .set-item select:focus, .set-item textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.set-switch { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink); cursor: pointer; padding: 8px 0; }
.set-switch input { width: 18px; height: 18px; accent-color: var(--brand); }
.set-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 4px 0; }
.set-check { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--ink); cursor: pointer; }
.set-check input { width: 16px; height: 16px; accent-color: var(--brand); }
.sys-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 26px; }
.sys-grid .kv .v { word-break: break-all; text-align: right; }

/* 套餐编辑 */
.plan-edit { padding: 0; }
.plan-edit > summary { cursor: pointer; padding: 16px 18px; font-size: 17px; font-weight: 600; color: var(--ink); }
.plan-edit[open] > summary { border-bottom: 1px solid var(--line); }
.plan-edit > form { padding: 18px; }
.plans-table .nowrap { white-space: nowrap; }
.inline { display: inline; }
.tag { display: inline-block; font-size: 13px; padding: 2px 8px; border-radius: 999px; }
.tag.on { background: #ecfdf5; color: #047857; }
.tag.off { background: #f3f4f6; color: #6b7280; }
.alert.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

/* 未验证邮箱提醒条 */
.verify-bar { background: #fffbeb; border-bottom: 1px solid #fde68a; color: #92400e; }
.verify-bar .container { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
.verify-bar .btn { background: #b45309; color: #fff; border-color: #b45309; }

/* 列表筛选栏 */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.filter-bar input[type=text] { flex: 1 1 260px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; background: #fff; color: var(--ink); box-sizing: border-box; }

/* 徽标补充 */
.badge.hot { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
tr.row-hot td { background: #fffbf5; }
.row-actions { white-space: nowrap; }
.row-actions form { margin: 2px 0; }

/* 列表单元格：主行 + 次要行（运营后台各列表统一用这两个类堆两行内容） */
.cell-main { line-height: 1.5; font-weight: 500; color: var(--ink); }
.batch-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }

/* 运营后台「工单列表」这类卡片式行 */
.ticket-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ticket-meta { color: var(--muted); font-size: 15px; }
.radio { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }

/* 设置页：测试发信 */
.set-test { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.set-test-row { display: flex; gap: 10px; flex-wrap: wrap; }
.set-test-row input[type=text] { flex: 1 1 260px; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; background: #fff; color: var(--ink); box-sizing: border-box; }
.set-test .set-hint { display: block; margin-top: 8px; }

/* ==================== 收银台 ==================== */
.pay-card h2 { margin-bottom: 14px; }
.pay-head { text-align: center; padding: 16px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pay-amount { font-size: 34px; font-weight: 700; color: var(--brand); line-height: 1.2; }
.pay-no { font-size: 15px; color: var(--muted); margin: 6px 0 10px; }
.pay-no b { color: var(--ink); letter-spacing: .4px; }
.pay-h3 { margin: 20px 0 12px; font-size: 17px; }
.pay-qrs { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.pay-qr { text-align: center; flex: 0 0 auto; }
.pay-qr img { width: 210px; max-width: 62vw; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 6px; }
.pay-qr-t { margin-top: 8px; font-size: 15px; color: var(--ink); font-weight: 600; }
.pay-transfer { margin-top: 16px; }
.pay-transfer pre { white-space: pre-wrap; word-break: break-all; font-family: inherit; font-size: 15px; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 12px; color: var(--ink); }
.pay-paid-form { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.pay-paid-form input[type=text] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; background: #fff; color: var(--ink); box-sizing: border-box; margin-top: 6px; }

/* ==================== 运营后台：待办 / 营收图表 / 布局 ==================== */
.sec-h { margin: 22px 0 10px; font-size: 17px; scroll-margin-top: 16px; }
.todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 12px; }
.todo { display: block; padding: 14px 16px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; background: #fff; text-decoration: none; color: var(--ink); }
.todo:hover { border-color: var(--brand); }
.todo-n { font-size: 26px; font-weight: 700; line-height: 1.1; }
.todo-l { font-size: 15px; font-weight: 600; margin-top: 4px; }
.todo-h { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.todo.ok { border-left-color: #10b981; }
.todo.info { border-left-color: #3b82f6; }
.todo.warn { border-left-color: #f59e0b; }
.todo.err { border-left-color: #ef4444; }
.todo.hot { border-left-color: #ea580c; background: #fffbf5; }
.todo.hot .todo-n { color: #ea580c; }
.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.bars { display: flex; align-items: flex-end; gap: 14px; padding: 8px 4px 0; }
.bar-col { flex: 1 1 0; text-align: center; min-width: 0; }
.bar-v { font-size: 13px; color: var(--muted); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 130px; background: #f1f5f9; border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; }
.bar-fill { width: 100%; background: linear-gradient(180deg, var(--brand), #7db8f0); border-radius: 8px 8px 0 0; min-height: 4px; }
.bar-l { font-size: 13px; color: var(--muted); margin-top: 6px; }
.dist-row { margin-bottom: 12px; }
.dist-t { font-size: 15px; margin-bottom: 5px; }
.dist-track { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.dist-fill { height: 100%; background: var(--brand); border-radius: 999px; min-width: 3px; }
.card-actions { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 8px; }
.link-more { font-size: 14px; font-weight: 400; color: var(--brand); text-decoration: none; margin-left: 8px; }
.nowrap { white-space: nowrap; }

/* ==================== 维护页 ==================== */
.maint-wrap { padding: 80px 20px; }
.maint-card { max-width: 520px; margin: 0 auto; text-align: center; }
.maint-icon { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.maint-card h2 { margin: 6px 0 10px; }
.maint-card .muted { line-height: 1.7; }
.maint-actions { margin-top: 20px; }

/* ==================== 响应式 ==================== */
@media (max-width: 900px) {
  .features, .plans { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .sites { grid-template-columns: 1fr; }
  .console { flex-direction: column; }
  .sidebar { width: 100%; display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .sidebar .group-title { display: none; }
  .hero h1 { font-size: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .set-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .sys-grid { grid-template-columns: 1fr; }
  .sys-grid .kv .v { text-align: left; }
  .footer-brand, .footer-contact, .footer-qr { display: flex; flex-direction: column; align-items: center; }
  .cta-band { flex-direction: column; text-align: center; padding: 26px 22px; }
  /* 601~900（大屏手机横屏 / 小平板）：导航项变多后收紧一点，减少折行概率 */
  .nav { gap: 14px; }
  .nav a { font-size: 15px; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .container { padding: 0 14px; }
  .site-header .container { height: auto; padding-top: 10px; padding-bottom: 8px; gap: 10px; }
  /* 移动端导航已改由下方 @media (max-width:768px) 的汉堡抽屉接管，此处不再处理 .nav */
  .hero { padding: 44px 0 36px; }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 16px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 16px; }
  .main { padding: 18px 14px; }
  .set-grid { grid-template-columns: 1fr; }
  .kv { font-size: 15px; }
  /* 移动端：表单/金额等关键信息仍保持 16px，仅装饰性徽标缩小 */
  .badge, .plan .tier { font-size: 13px; }
}

/* ==================== 移动端导航：汉堡按钮 + 抽屉菜单 ==================== */
/* 导航项最多 6 个（首页/文档/模板市场/套餐价格/控制台/运营后台），窄屏塞不下，
   按主流做法收进汉堡菜单：头部只留 logo + 汉堡，点开后从头部下方展开抽屉。
   .nav-open 由 header.html 里的脚本加在 .site-header 上。 */
@media (max-width: 768px) {
  /* 汉堡按钮 */
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 42px; height: 40px; margin-left: auto; padding: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span {
    display: block; width: 18px; height: 2px; background: var(--ink);
    border-radius: 2px; transition: transform .22s ease, opacity .18s ease;
  }
  /* 展开时三条杠变叉号 */
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* 抽屉本体：挂在 .site-header（sticky，本身就是定位祖先）下沿，铺满整宽 */
  .nav-panel {
    position: absolute; top: 100%; left: 0; right: 0;
    display: block; background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 34px -24px rgba(15,23,42,.5);
    padding: 4px 16px 16px;
    max-height: calc(100vh - 64px); overflow-y: auto;
    transform: translateY(-6px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav-open .nav-panel { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }

  /* 抽屉内导航项：整行可点，方便手指操作 */
  .nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav a {
    padding: 13px 2px; font-size: 16px; color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-child { border-bottom: none; }
  .nav a:hover { color: var(--brand); }

  /* 右侧：语言切换 + 登录/注册/退出，纵向铺满 */
  .nav-right {
    margin-left: 0; flex-direction: column; align-items: stretch;
    gap: 10px; padding-top: 14px; flex-wrap: nowrap;
  }
  .nav-right .btn { width: 100%; text-align: center; max-width: none; }
  .lang-switch { align-self: flex-start; }
}

/* ==================== 大屏适配（1440 / 1920+ 宽屏） ==================== */
@media (min-width: 1440px) {
  .container { padding: 0 28px; }
  .cards { gap: 22px; }
  .card-x { padding: 26px; }
  /* 宽屏下模板卡片放大一档，一行能排下更多，翻页感更接近「模板市场」而不是列表 */
  .tpl-grid { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 20px; }
  .section-title { font-size: 26px; margin: 44px 0 18px; }
  .section-sub { font-size: 17px; }
  .hero-stats { gap: 20px; }
  .plans, .steps { gap: 22px; }
  .panel { padding: 36px 32px; }
  .cta-band { padding: 36px 44px; }
  .chips { gap: 10px; }
}
@media (min-width: 1920px) {
  .container { max-width: 1560px; padding: 0 32px; }
  .hero { padding: 96px 0 72px; }
  .hero h1 { font-size: 48px; }
  .hero p { font-size: 19px; max-width: 780px; }
  .section-title { font-size: 28px; }
  .card-x { padding: 28px; }
  .cta-band { padding: 42px 52px; }
  .footer-grid { gap: 48px; }
}

/* ==================== 官网首页视觉版式（2026-09-17 v2） ====================
   目标：深色首屏 + 产品拟物窗 + 模板缩略图，拉开层次，避免「白底方块堆叠」的廉价感。
   只作用于官网首页用到的类，控制台/运营后台不受影响。 */

:root {
  --brand-2: #7c3aed;
  --shadow-1: 0 1px 2px rgba(15,23,42,.05), 0 10px 28px -14px rgba(15,23,42,.22);
  --shadow-2: 0 30px 60px -22px rgba(2,6,23,.7);
}

.btn.lg { padding: 14px 30px; font-size: 17px; font-weight: 600; }
.btn:active { transform: translateY(1px); }
.site-header { box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 6px 18px -14px rgba(15,23,42,.3); }

/* ---------- 首屏（深色） ---------- */
.hero {
  position: relative;
  padding: 78px 0 104px;
  text-align: left;
  color: #e8eeff;
  background:
    radial-gradient(1100px 520px at 10% -12%, rgba(56,189,248,.20), transparent 60%),
    radial-gradient(900px 480px at 92% -6%, rgba(124,58,237,.30), transparent 58%),
    linear-gradient(165deg, #0b1220 0%, #131f38 52%, #0a1120 100%);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(148,163,184,.10) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(148,163,184,.10) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(900px 420px at 50% 0, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(900px 420px at 50% 0, #000 30%, transparent 78%);
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 46px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px;
  font-size: 13px; letter-spacing: .06em; color: #a5c8ff;
  background: rgba(165,200,255,.10); border: 1px solid rgba(165,200,255,.26);
  padding: 6px 13px; border-radius: 999px;
}
.hero h1 {
  margin: 0 0 18px; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.14;
  letter-spacing: -.02em; color: #fff; font-weight: 800;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(92deg, #7dd3fc, #a78bfa 62%, #f0abfc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { margin: 0 0 26px; max-width: 620px; font-size: 18px; line-height: 1.7; color: #b7c4e2; text-align: left; }
.hero p strong { color: #fff; font-weight: 600; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; }
.hero .btn.ghost { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.3); }
.hero .btn.ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0; margin: 24px 0 0; }
.trust.left { justify-content: flex-start; margin: 14px 0 4px; }
.trust li { position: relative; padding-left: 21px; font-size: 15px; color: #c3cfe8; }
.trust li::before { content: "✓"; position: absolute; left: 0; color: #34d399; font-weight: 700; }
.trust.on-light li { color: #334155; }
.trust.on-light li::before { color: var(--ok); }
.hero-note { margin: 22px 0 0; font-size: 15px; color: #93a3c4; }
.hero-note b { color: #dbe6ff; }

/* 产品拟物窗 */
.mock { position: relative; border-radius: 16px; background: #0e1729; border: 1px solid rgba(255,255,255,.13); box-shadow: var(--shadow-2); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 13px; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #f87171; }
.mock-bar i:nth-child(2) { background: #fbbf24; }
.mock-bar i:nth-child(3) { background: #34d399; }
.mock-url { margin-left: 10px; flex: 1; font-size: 12px; color: #8fa3c4; background: rgba(255,255,255,.06); border-radius: 999px; padding: 4px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.mock-body { padding: 16px; background: linear-gradient(180deg, #ffffff, #f6f9fd); }
.mock-nav { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.mock-nav i { display: block; height: 8px; border-radius: 999px; background: #e3eaf5; width: 32px; }
.mock-nav i:nth-child(1) { width: 62px; background: linear-gradient(90deg, #2563eb, #7c3aed); }
.mock-lang { margin-left: auto; font-size: 10px; font-weight: 700; color: #2563eb; background: #eff6ff; border: 1px solid #c7d9fb; border-radius: 6px; padding: 2px 8px; }
.mock-hero { border-radius: 10px; padding: 16px; background: linear-gradient(135deg, #0b1220, #1b2c4a); margin-bottom: 12px; }
.mock-hero i { display: block; height: 9px; border-radius: 999px; background: rgba(255,255,255,.24); margin-bottom: 8px; width: 72%; }
.mock-hero i:nth-child(2) { width: 46%; background: rgba(255,255,255,.16); }
.mock-hero b { display: block; width: 92px; height: 21px; border-radius: 6px; background: linear-gradient(90deg, #38bdf8, #818cf8); margin-top: 13px; }
.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.mock-cards i { display: block; height: 52px; border-radius: 8px; background: #fff; border: 1px solid #e6edf7; box-shadow: 0 2px 6px -4px rgba(15,23,42,.3); }
.mock-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.mock-langs span { font-size: 11px; padding: 3px 10px; border-radius: 999px; background: #eef2f9; color: #64748b; }
.mock-langs span.on { background: linear-gradient(90deg, #2563eb, #7c3aed); color: #fff; }
.mock-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.mock-tags span { font-size: 13px; color: #cdd9f2; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 13px; }

/* 关键数字条（压住首屏下沿） */
.hero-stats { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: -44px 0 4px; }
.hero-stats .hs { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; text-align: center; box-shadow: var(--shadow-1); }
.hero-stats .hs b { display: block; font-size: 25px; line-height: 1.2; letter-spacing: -.01em;
  background: linear-gradient(92deg, #2563eb, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stats .hs span { display: block; margin-top: 7px; font-size: 14px; color: var(--muted); line-height: 1.5; }

.section-sub { color: var(--muted); font-size: 16px; margin: -10px 0 2px; max-width: 900px; }
.center { text-align: center; }
.panel { background: linear-gradient(180deg, #f7f9fd, #fff); border: 1px solid var(--line); border-radius: 20px; padding: 30px 26px; margin: 16px 0 20px; }

/* ---------- 能力卡 ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 10px 0 6px; }
.card-x { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; transition: .18s ease; }
.card-x:hover { transform: translateY(-3px); border-color: #c3d6f8; box-shadow: var(--shadow-1); }
.card-x h3 { margin: 0 0 8px; font-size: 17px; }
.card-x p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.68; }
.icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px;
  background: linear-gradient(135deg, #eef4ff, #e5e9ff); color: #2563eb; }
.icon svg { width: 21px; height: 21px; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.chip { font-size: 14px; color: #475569; background: #fff; border: 1px dashed #d6dfec; border-radius: 999px; padding: 6px 14px; }

/* ---------- 模板市场（带缩略图） ---------- */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 18px; padding: 6px 0 2px; }
.tpl-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: .18s ease; }
.tpl-card:hover { transform: translateY(-3px); border-color: #c3d6f8; box-shadow: var(--shadow-1); }
.tpl-thumb { height: 106px; padding: 11px; display: flex; flex-direction: column; gap: 7px;
  background-color: #0c1322;
  background-image: radial-gradient(320px 130px at 88% 0%, rgba(255,255,255,.12), transparent 72%); }
.tpl-thumb .tt-nav { display: flex; align-items: center; gap: 6px; }
.tpl-thumb .tt-nav i { height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); width: 22px; }
.tpl-thumb .tt-nav i:first-child { width: 34px; background: var(--acc, #2563eb); }
.tpl-thumb .tt-hero { flex: 1; border-radius: 8px; padding: 9px; background-color: #1b2c4a;
  background-image: linear-gradient(135deg, var(--acc, #2563eb), rgba(11,18,32,.62)); }
.tpl-thumb .tt-hero i { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.4); margin-bottom: 6px; width: 66%; }
.tpl-thumb .tt-hero i + i { width: 40%; background: rgba(255,255,255,.26); }
/* 真实模板预览图（SVG）：铺满缩略图区；加载失败时回退为骨架 */
.tpl-thumb { position: relative; padding: 0; }
.tpl-thumb img.tpl-preview { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpl-thumb .tt-fallback { display: none; position: absolute; inset: 11px;
  flex-direction: column; gap: 7px; }
.tpl-thumb .tt-fallback i { height: 6px; border-radius: 999px; background: rgba(255,255,255,.28); width: 66%; }
.tpl-thumb .tt-fallback i + i { width: 42%; background: rgba(255,255,255,.18); }
.tpl-thumb .tt-fallback i + i + i { width: 80%; height: 18px; background: rgba(255,255,255,.14); }
.tpl-thumb.no-preview { padding: 11px; }
.tpl-thumb.no-preview .tt-fallback { display: flex; }
/* 行业筛选条 */
.tpl-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.tpl-chip { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line, #e5e7eb);
  background: #fff; color: #475569; cursor: pointer; line-height: 1.4; transition: .15s; }
.tpl-chip:hover { border-color: var(--brand, #2563eb); color: var(--brand, #2563eb); }
.tpl-chip.active { background: var(--brand, #2563eb); border-color: var(--brand, #2563eb); color: #fff; }
.tpl-chip .tpl-n { font-size: 11px; opacity: .72; margin-left: 2px; }
.tpl-tag-cat { background: #eef2ff; color: #3730a3; font-weight: 600; }
.tpl-body { padding: 14px 16px 16px; }
.tpl-name { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpl-desc { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.tpl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tpl-tag { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: #f1f5f9; color: #475569; }

/* ---------- 套餐 ---------- */
.plans { padding: 18px 0 26px; }
.plan { position: relative; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.plan.hot { border: 1.5px solid var(--brand); box-shadow: 0 26px 50px -26px rgba(37,99,235,.55); }
.plan .rec { position: absolute; top: -13px; right: 18px; background: linear-gradient(92deg, #2563eb, #7c3aed); color: #fff; font-size: 13px; font-weight: 600; padding: 5px 13px; border-radius: 999px; box-shadow: 0 8px 18px -10px rgba(37,99,235,.8); }
.plan .name { font-size: 19px; }
.plan .price { font-size: 32px; letter-spacing: -.02em; }
.plan .permo { margin-top: 4px; }
.plan-sum { margin: 12px 0 0; color: #334155; font-size: 15px; line-height: 1.65; }
.plans-note { margin: -10px 0 6px; }

/* ---------- 开通流程 ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 8px 0 4px; margin: 0; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px; }
.step-n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 13px;
  background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-weight: 700; font-size: 14px; }
.step b { display: block; font-size: 17px; margin-bottom: 7px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.step::after { content: ""; position: absolute; top: 37px; right: -13px; width: 13px; height: 2px; background: linear-gradient(90deg, #c3d6f8, transparent); }
.step:last-child::after { display: none; }

/* ---------- 试用/付款/发票 ---------- */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 28px; }
.faq-grid h3 { margin: 16px 0 8px; font-size: 16.5px; }
.faq-grid p { margin: 0 0 6px; line-height: 1.7; }

/* ---------- FAQ ---------- */
.faq { margin-bottom: 20px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; transition: .18s ease; }
.faq details[open] { border-color: #c3d6f8; box-shadow: var(--shadow-1); }
.faq summary { cursor: pointer; padding: 16px 18px; font-size: 16px; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; float: right; color: var(--brand); font-weight: 700; }
.faq details[open] summary::after { content: "－"; }
.faq details p { margin: 0; padding: 0 18px 17px; color: var(--muted); font-size: 15px; line-height: 1.75; }

/* ---------- 末尾 CTA ---------- */
.cta-band {
  background: radial-gradient(700px 300px at 88% 10%, rgba(124,58,237,.42), transparent 60%),
              linear-gradient(135deg, #0b1220, #17233c 58%, #2a2560);
  border-radius: 20px; padding: 38px 40px; box-shadow: var(--shadow-1);
}
.cta-band h2 { font-size: 24px; }
.cta-band .cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-band .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.62); }
.cta-band .btn.ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
.contact-band { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: center;
  border: 1px dashed #d6dfec; background: #fff; border-radius: 14px; padding: 16px 20px; margin: 0 0 34px;
  color: var(--muted); font-size: 15px; }
.contact-band b { color: var(--brand); }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero { padding: 56px 0 88px; }
  .cards, .features { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
}
@media (max-width: 900px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hero { padding: 40px 0 76px; }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 16.5px; }
  .hero-stats { margin-top: -38px; gap: 12px; }
  .hero-stats .hs { padding: 14px 12px; }
  .hero-stats .hs b { font-size: 21px; }
  .cards, .features, .steps, .tpl-grid { grid-template-columns: 1fr; }
  .panel { padding: 20px 16px; border-radius: 16px; }
  .cta-band { padding: 26px 20px; }
  .cta-band .cta-actions { width: 100%; }
  .cta-band .cta-actions .btn { flex: 1 1 auto; text-align: center; }
  .mock-tags { justify-content: flex-start; }
}

/* ==================== 文档（文档中心） ==================== */
.docs-wrap { display: grid; grid-template-columns: 232px minmax(0, 1fr) 188px; gap: 28px;
  max-width: 1240px; margin: 0 auto; padding: 26px 20px 60px; align-items: start; }
/* 左侧导航 */
.docs-side { position: sticky; top: 16px; }
.docs-side-inner { border-right: 1px solid var(--line); padding-right: 14px; }
.docs-side-title { font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.docs-group { margin-bottom: 16px; }
.docs-group-name { font-size: 12px; font-weight: 700; color: #94a3b8; letter-spacing: .04em; margin-bottom: 6px; }
.docs-list { list-style: none; margin: 0; padding: 0; }
.docs-list li { margin: 2px 0; }
.docs-list a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 14px; color: #475569; text-decoration: none; }
.docs-list a:hover { background: #f1f5f9; color: var(--brand); text-decoration: none; }
.docs-list a.on { background: #eef2ff; color: #3730a3; font-weight: 700; }
.docs-side-foot { margin-top: 18px; padding-right: 14px; }
/* 正文 */
.docs-crumb { font-size: 13px; color: #94a3b8; margin-bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.docs-crumb a { color: #64748b; }
.docs-crumb .cur { color: #334155; font-weight: 600; }
.docs-body { min-width: 0; }
.docs-body h1 { font-size: 30px; line-height: 1.3; margin: 0 0 10px; }
.docs-body h2 { font-size: 21px; margin: 30px 0 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.docs-body h3 { font-size: 17px; margin: 22px 0 8px; }
.docs-body p { margin: 0 0 12px; line-height: 1.85; color: #334155; }
.docs-body a { color: var(--brand); }
.docs-body .lead { font-size: 16.5px; color: #475569; line-height: 1.8; }
.docs-updated { margin: 0 0 18px; font-size: 13px; color: #94a3b8; }
.docs-body code { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 5px;
  padding: 1px 6px; font-size: 13.5px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.doc-ul, .doc-ol { margin: 0 0 14px; padding-left: 22px; }
.doc-ul li, .doc-ol li { margin: 6px 0; line-height: 1.8; color: #334155; }
.doc-callout { background: #f8fafc; border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0;
  padding: 12px 16px; margin: 16px 0; font-size: 14.5px; line-height: 1.75; color: #334155; }
.doc-table { width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: 14.5px; }
.doc-table th, .doc-table td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; line-height: 1.6; }
.doc-table th { background: #f8fafc; font-weight: 700; }
/* 模板开发手册：外源手册转成文档风格后用到的容器与代码块 */
.doc-box { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; margin: 14px 0 18px; overflow-x: auto; }
.doc-box > :last-child { margin-bottom: 0; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; margin: 14px 0 18px; }
.doc-grid-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.doc-grid-label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; color: #0f172a; }
.doc-grid-desc { display: block; font-size: 14px; line-height: 1.75; color: #475569; }
.doc-grid-tag { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600;
  color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 2px 10px; }
.docs-body pre { background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 14px 16px;
  margin: 14px 0 18px; overflow-x: auto; font-size: 13.5px; line-height: 1.7;
  font-family: ui-monospace, Menlo, Consolas, monospace; }
.docs-body pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
@media (min-width: 1440px) { .doc-grid { gap: 18px; } }
/* 上下篇 */
.docs-pager { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.docs-pager-item { flex: 1 1 220px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; text-decoration: none; }
.docs-pager-item:hover { border-color: #c3d6f8; text-decoration: none; }
.docs-pager-item.next { text-align: right; }
.docs-pager-item .lbl { display: block; font-size: 12px; color: #94a3b8; }
.docs-pager-item .ttl { display: block; font-weight: 700; color: #1f2937; margin-top: 2px; }
/* 右侧目录 */
.docs-toc { position: sticky; top: 16px; }
.docs-toc-inner { border-left: 1px solid var(--line); padding-left: 14px; }
.docs-toc-title { font-size: 12px; font-weight: 700; color: #94a3b8; margin-bottom: 8px; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc li a { display: block; padding: 4px 0; font-size: 13px; color: #64748b; text-decoration: none; line-height: 1.5; }
.docs-toc li a:hover { color: var(--brand); }
.docs-toc li.lv3 a { padding-left: 12px; font-size: 12.5px; color: #94a3b8; }
@media (max-width: 1080px) {
  .docs-wrap { grid-template-columns: 208px minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 780px) {
  .docs-wrap { grid-template-columns: 1fr; }
  .docs-side { position: static; }
  .docs-side-inner { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 14px; }
}

/* ==================== 线索通知提醒 ==================== */
.nav-badge { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 5px;
  border-radius: 999px; background: #dc2626; color: #fff; font-size: 11.5px; line-height: 17px;
  text-align: center; font-weight: 600; vertical-align: 1px; }
.lead-notify-bad { margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #b91c1c; }
.lead-notify-alert { border-left: 3px solid #b91c1c; }

/* ==================== 语言切换器（右上角） ==================== */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; background: #f1f5f9; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.lang-switch a { padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #475569; text-decoration: none; line-height: 1.2; }
.lang-switch a:hover { background: #fff; color: var(--brand); text-decoration: none; }
.lang-switch a.on { background: var(--brand); color: #fff; }

/* ==================== 套餐：服务说明与选购指引 ==================== */
/* 三档套餐的差异主要在「服务」，必须让它比功能列表更显眼，否则客户只比功能会觉得贵 */
.plan-service { margin: 6px 0 2px; padding: 6px 10px; border-radius: 8px; background: #eff6ff; color: #1d4ed8; font-size: 13px; font-weight: 600; line-height: 1.5; }
.compare .no { color: #94a3b8; }
.pick-list { list-style: none; padding: 0; margin: 10px 0 0; }
.pick-list li { padding: 9px 0 9px 16px; border-bottom: 1px dashed var(--line); position: relative; font-size: 14px; line-height: 1.7; color: #475569; }
.pick-list li:before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.pick-list li:last-child { border-bottom: 0; }
.pick-list b { color: #0f172a; }

/* ==================== 价值闭环：访客留资 → 你收到 → 你成交 ====================
   客户买建站服务，真正想要的不是「一个网站」，而是「有人通过网站找上门」。
   把这条链路画出来，是首页最能促成付款的一段，所以单独做成区块而不是塞进功能卡。 */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0 8px; }
.flow-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; }
.flow-step .fi { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  margin-bottom: 15px; color: #fff; background: linear-gradient(135deg, #2563eb, #4f46e5); }
.flow-step .fi svg { width: 24px; height: 24px; }
.flow-step .fn { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; }
.flow-step b { display: block; font-size: 17.5px; margin-bottom: 8px; }
.flow-step p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.72; }
.flow-step .fhint { display: block; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line);
  font-size: 13.5px; color: #475569; }
/* 步骤之间的箭头：宽屏才画，窄屏堆叠时隐藏避免误读 */
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -17px; width: 13px; height: 13px;
  border-top: 2.5px solid #b8cdf5; border-right: 2.5px solid #b8cdf5;
  transform: translateY(-50%) rotate(45deg);
}

/* ==================== 成本对比（价格锚点） ====================
   不给参照物时，599 只是一个数字；给出「找人做要几千、改字还要等」，
   客户才能自己算出值不值 —— 这是提高付款意愿最直接的一屏。 */
.vs { display: grid; grid-template-columns: 1.02fr .98fr; gap: 20px; margin: 20px 0 8px; }
.vs-col { border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; background: #fff; }
.vs-col h4 { margin: 0 0 4px; font-size: 16.5px; }
.vs-col .vs-price { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.vs-col.old { background: #f8fafc; }
.vs-col.old .vs-price { color: var(--muted); }
.vs-col.new { border-color: #bcd0f7; background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
  box-shadow: 0 10px 30px -20px rgba(37, 99, 235, .55); }
.vs-col.new .vs-price { color: var(--brand); }
.vs-col ul { list-style: none; padding: 0; margin: 0; }
.vs-col li { position: relative; padding: 7px 0 7px 26px; font-size: 15.5px; line-height: 1.65; color: #334155; }
.vs-col.old li::before { content: "✕"; position: absolute; left: 0; color: #94a3b8; font-size: 14px; }
.vs-col.new li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.vs-foot { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

/* ==================== 控制台：新手指引三步 ====================
   刚付款的租户打开控制台，最需要的是「接下来点哪里」。做成带序号的横向三步，
   完成第一步后自动变 ✓，比一张空白统计表更能让人动起来。 */
.start-card { border-color: #cddcf8; background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%); }
.start-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; margin: 12px 0 0; }
.start-steps li { display: flex; gap: 12px; align-items: flex-start; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; }
.start-steps li.done { border-color: #b7e8c8; background: #f4fdf7; }
.start-steps .sn { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #2563eb, #4f46e5); }
.start-steps li.done .sn { background: var(--ok); }
.start-steps b { display: block; font-size: 15.5px; margin-bottom: 5px; }
.start-steps .sd { display: block; color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
.start-steps .btn { margin-right: 6px; }
@media (max-width: 900px) {
  .start-steps { grid-template-columns: 1fr; }
}
@media (min-width: 1440px) {
  .start-steps { gap: 22px; }
  .start-steps li { padding: 22px 22px 20px; }
}

/* ---------- 价值闭环 / 成本对比：响应式 ---------- */
@media (max-width: 1080px) {
  .flow { grid-template-columns: 1fr; gap: 14px; }
  .flow-step::after { display: none; }
  .vs { grid-template-columns: 1fr; }
}
@media (min-width: 1440px) {
  .flow { gap: 26px; }
  .flow-step { padding: 30px 28px; }
  .vs { gap: 26px; }
  .vs-col { padding: 28px 30px; }
}

/* ---------- 公开模板市场页 ---------- */
.market-hero { padding: 56px 0 28px; text-align: center; }
.market-hero h1 { font-size: 34px; margin: 0 0 10px; }
.market-hero p { color: var(--muted); max-width: 720px; margin: 0 auto; font-size: 16px; line-height: 1.7; }
.market-cta { text-align: center; margin: 28px 0 8px; }
@media (max-width: 640px) { .market-hero h1 { font-size: 26px; } }

/* ===== 列表分页器（模板市场 / 控制台模板页共用） ===== */
.tpl-pager, .theme-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 24px 0 8px; }
.tpl-pager .pg, .theme-pager .pg {
  min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: #fff; color: #475569;
  font-size: 14px; text-decoration: none; transition: all .15s; line-height: 1;
}
.tpl-pager .pg:hover, .theme-pager .pg:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.tpl-pager .pg.active, .theme-pager .pg.active { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; }
.tpl-pager .pg.disabled, .theme-pager .pg.disabled { opacity: .45; pointer-events: none; }
.tpl-pager .pg.ellipsis, .theme-pager .pg.ellipsis { border: none; background: none; pointer-events: none; }
.tpl-pager .pg-info, .theme-pager .pg-info { margin-left: 8px; font-size: 13px; color: #94a3b8; }

/* ===== 价格页增强：价值主张 Hero / 为什么选我们 / 信任数据 / 收尾 CTA ===== */
.pricing-hero { text-align: center; padding: 54px 0 42px; background: linear-gradient(180deg, #eef5ff 0%, #ffffff 100%); border-bottom: 1px solid var(--line); }
.pricing-hero h1 { font-size: 34px; margin: 0 0 12px; line-height: 1.3; }
.pricing-hero p { color: var(--muted); font-size: 18px; max-width: 680px; margin: 0 auto 18px; line-height: 1.7; }
.pricing-hero .trial-note { display: inline-block; background: #fff; color: var(--brand-dark); border: 1px solid #cfe0ff; border-radius: 20px; padding: 7px 16px; font-size: 15px; margin-bottom: 18px; }
.pricing-hero .btn { font-size: 17px; padding: 13px 30px; }
.reasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 8px 0 4px; }
.reason { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.reason .ico { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: var(--brand-soft); border-radius: 10px; }
.reason h3 { margin: 12px 0 8px; font-size: 17px; }
.reason p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 30px 0 8px; text-align: center; }
.stat { background: var(--brand-soft); border-radius: var(--radius); padding: 22px 14px; }
.stat b { display: block; font-size: 28px; color: var(--brand-dark); }
.stat span { color: var(--muted); font-size: 14px; }
.cta-band { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; border-radius: var(--radius); padding: 34px 24px; text-align: center; margin: 30px 0 8px; }
.cta-band h2 { color: #fff; margin: 0 0 8px; font-size: 22px; }
.cta-band p { color: #e0ecff; margin: 0 0 18px; font-size: 16px; }
.cta-band a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cta-band .btn { background: #fff; color: var(--brand); border-color: #fff; }
.cta-band .btn:hover { background: #f1f5f9; }
/* 推荐套餐更突出：不用缩放（缩放会让它比相邻卡更高更宽、边缘错位），
   改用「描边 + 浅底 + 阴影 + 顶部丝带」，三张卡始终等高对齐。 */
.plans { padding-top: 30px; }
.plan.hot { position: relative; z-index: 1; border: 2px solid var(--brand); background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 62%); box-shadow: 0 12px 30px rgba(37,99,235,.16); }
.plan.hot .name { color: var(--brand-dark); }
.plan .rec { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; border-radius: 20px; padding: 5px 16px; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 14px rgba(37,99,235,.30); }
@media (max-width: 768px) { .reasons, .stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .reasons, .stats { grid-template-columns: 1fr; } .pricing-hero { padding: 36px 0 30px; } .pricing-hero h1 { font-size: 26px; } }

/* ===== 平台设置（/ops/settings）：分组 TAB，一组一个面板各自保存 ===== */
.set-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.set-tab { -webkit-appearance: none; appearance: none; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 15px; font-family: inherit; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: .15s; }
.set-tab:hover { border-color: var(--brand); color: var(--brand); }
.set-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.set-panel { display: none; }
.set-panel.on { display: block; }
@media (max-width: 600px) { .set-tab { font-size: 14px; padding: 7px 12px; } }

/* ===== B2B 分类目录（/dir 类目首页 · /company 企业页） ===== */
.dir-hero { background: linear-gradient(180deg, #eff6ff 0%, var(--bg) 100%); padding: 34px 0 26px; border-bottom: 1px solid var(--line); }
.dir-hero h1 { margin: 0 0 8px; font-size: 28px; color: var(--ink); }
.dir-hero p { margin: 0; color: var(--muted); font-size: 15px; max-width: 760px; }
.dir-sec-title { font-size: 18px; margin: 26px 0 12px; color: var(--ink); font-weight: 600; }

.dir-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.dir-cat { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; transition: .15s; }
.dir-cat:hover { border-color: var(--brand); box-shadow: 0 6px 18px -12px rgba(37,99,235,.5); }
.dir-cat-name { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.dir-cat-num { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--brand); background: var(--brand-soft); border-radius: 20px; padding: 2px 9px; }
.dir-cat-subs { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.8; }
.dir-cat-subs i { font-style: normal; display: inline-block; margin-right: 8px; }

.dir-company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.dir-company { display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.dc-logo { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 10px; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dc-logo img { width: 100%; height: 100%; object-fit: contain; }
.dc-logo span { font-size: 20px; font-weight: 600; color: var(--brand); }
.dc-logo.big { flex-basis: 84px; width: 84px; height: 84px; background: #fff; border: 1px solid var(--line); }
.dc-logo.big span { font-size: 30px; }
.dc-body { flex: 1; min-width: 0; }
.dc-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.dc-name a { color: inherit; text-decoration: none; }
.dc-name a:hover { color: var(--brand); }
.dc-tag { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--brand); background: var(--brand-soft); border-radius: 20px; padding: 2px 8px; }
.dc-intro { margin: 6px 0 8px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.dc-meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; }
.dc-count { color: #94a3b8; }
.dc-go, .dc-site { margin-top: 8px; font-size: 13px; }
.dc-go { display: inline-block; color: var(--brand); text-decoration: none; font-weight: 600; }
.dc-go:hover { text-decoration: underline; }
.dc-site { display: inline-block; margin-left: 10px; color: var(--muted); text-decoration: none; }

.dir-pager { display: flex; align-items: center; gap: 6px; margin: 20px 0 8px; flex-wrap: wrap; }
.dir-pager .pg { min-width: 34px; text-align: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; background: #fff; }
.dir-pager .pg.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.dir-empty { text-align: center; padding: 50px 16px; color: var(--muted); }
.dir-empty h2 { color: var(--ink); margin: 0 0 8px; }
.dir-empty-link { display: inline-block; margin-top: 14px; color: var(--brand); text-decoration: none; font-weight: 600; }

.dir-crumb { font-size: 13px; color: var(--muted); margin: 16px 0 4px; }
.dir-crumb a { color: var(--muted); text-decoration: none; }
.dir-crumb a:hover { color: var(--brand); }
/* 企业详情页外壳（不能用 .dir-company，那是列表页企业卡的样式） */
.dc-layout { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; margin: 12px 0 26px; }
.dc-hero { display: flex; gap: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.dc-hero-body h1 { margin: 0 0 8px; font-size: 24px; }
.dc-hero-tags { display: flex; gap: 8px; align-items: center; }
.dc-hero-intro { margin: 10px 0 14px; color: var(--muted); line-height: 1.7; }
.dc-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dc-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.dc-side h3 { margin: 0 0 10px; font-size: 15px; }
.dc-side ul { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--ink); }
.dc-side li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.dc-side li span { color: var(--muted); flex: 0 0 48px; }
.dc-side-go { display: block; margin-top: 12px; text-align: center; color: var(--brand); text-decoration: none; font-size: 14px; font-weight: 600; }

.dir-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.dir-item { display: flex; gap: 12px; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; color: inherit; transition: .15s; }
.dir-item:hover { border-color: var(--brand); }
.di-thumb { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 8px; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.di-thumb img { width: 100%; height: 100%; object-fit: cover; }
.di-thumb span { color: var(--brand); font-size: 22px; font-weight: 600; }
.di-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.di-sum { margin: 5px 0 7px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.di-meta { font-size: 12px; color: var(--muted); }
.di-kind { color: var(--brand); }
.di-cat { margin-left: 8px; }

.dir-other-list { display: flex; flex-wrap: wrap; gap: 10px; }
.dir-other-link { display: inline-block; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 7px 14px; text-decoration: none; color: var(--ink); font-size: 14px; }
.dir-other-link:hover { border-color: var(--brand); }
.dir-other-link span { color: var(--muted); font-size: 12px; }
@media (max-width: 768px) { .dir-company { display: block; padding: 0; border: 0; background: none; } .dc-layout { grid-template-columns: 1fr; } .dir-hero { flex-direction: column; } }

/* ===== 运营后台：目录管理 ===== */
.dir-op p { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.dir-cat-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.dir-cat-form input, .dir-cat-form select, .ops-table input { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 14px; font-family: inherit; background: #fff; }
.dir-pending { display: flex; flex-direction: column; gap: 8px; }
.dir-pending-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dp-name { font-size: 14px; min-width: 220px; }
.dp-name i { color: var(--muted); font-style: normal; font-size: 12px; margin-left: 6px; }
.ops-table input { width: auto; }
/* 表单字段下的小字说明（控制台「主营类目」这类要解释用途的字段） */
.form-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---------- 运营后台 · 静态资源 ---------- */
.st-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.st-form label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; }
.st-form input[type=text], .st-form input[type=password], .st-form input:not([type]), .st-form select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 400;
  background: #fff; color: inherit; width: 100%; box-sizing: border-box;
}
.st-form label > input[type=checkbox] { width: auto; }
.st-form label > input[type=checkbox] + .st-hint { display: inline; }
.st-hint { font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.6; }
.st-samples { margin: 12px 0 0; padding-left: 0; list-style: none; }
.st-samples li { margin: 4px 0; }
.st-samples code, .card code, .st-hint code {
  background: #f3f5f9; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
  font-size: 12px; font-family: ui-monospace, Consolas, monospace;
}
@media (max-width: 768px) {
  .st-form { grid-template-columns: 1fr; }
}

/* 静态资源页：分区块、状态徽章 */
.st-sec { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.st-sec h3 { margin: 0 0 12px; font-size: 15px; }
.st-checkrow { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.st-checkrow input[type=checkbox] { width: auto; margin-top: 3px; }
.st-checkrow i, .st-form label > i { font-style: normal; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.6; }
.st-on { color: #0a8f4c; font-size: 15px !important; }
.st-off { color: #b45309; font-size: 15px !important; }
.st-ellip { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-sub { font-size: 13px; font-weight: 400; color: var(--muted); font-style: normal; }

/* 静态资源页：上传进度条 */
.up-bar { height: 14px; background: #eef1f6; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .4s ease; }
#upprog { margin-top: 14px; }
#up-text { margin: 8px 0 0; font-size: 13px; color: var(--muted); word-break: break-all; line-height: 1.7; }

/* ---------- 后台列表分页条 ---------- */
.ops-pager { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; flex-wrap: wrap; }
.ops-pager a, .ops-pager span { text-decoration: none; }
.ops-pager-info { color: var(--muted); font-size: 13px; }


/* ============================================================
   现代化增量层（2026-10-02）—— 平台官网/控制台通用
   ============================================================ */

/* ---- 暗色模式：跟随系统（中性色反转，品牌蓝保持） ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6ebf2;
    --muted: #9aa7b8;
    --line: #263040;
    --bg: #0d1117;
    --card: #161c24;
    --brand-soft: #14243d;
  }
  html { color-scheme: dark; }
  .site-header { background: #0d1117; border-bottom-color: var(--line); }
  .hero { background: linear-gradient(180deg, #0d1117 0%, #11161d 100%); }
  .card, [class*="card"] { background: var(--card); }
}

/* ---- 流式排版 ---- */
.hero h1 { font-size: clamp(28px, 4.5vw, 44px); }
.section-title { font-size: clamp(22px, 3vw, 32px); }

/* ---- 品牌渐变点缀（按钮/hero 背景） ---- */
.hero .actions .btn-primary, .btn.primary, .btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  box-shadow: 0 4px 14px rgba(37,99,235,0.28);
}
.hero .actions .btn-primary:hover, .btn.primary:hover, .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,99,235,0.36);
}

/* ---- 过渡动效 ---- */
.card, .btn, a, input, select { transition: all 180ms cubic-bezier(0.16,1,0.3,1); }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,0.10); }

/* ---- 无障碍焦点 ---- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---- 长文本 ---- */
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ---- 滚动条 ---- */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }

/* ---- 触屏目标 ---- */
@media (pointer: coarse) {
  .btn, .site-header a { min-height: 40px; }
}

/* ---- 尊重减弱动效偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   官网首页升级层（2026-10-02）：mesh 光斑 / 计数动画 / 滚动淡入 / 模板选用
   ============================================================ */
.hero-mesh { position: relative; overflow: hidden; }
.hero-glow {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.35; pointer-events: none;
  width: 480px; height: 480px;
}
.hero-glow.g1 { background: radial-gradient(circle, var(--brand) 0%, transparent 70%); top: -140px; left: -80px; }
.hero-glow.g2 { background: radial-gradient(circle, #7c3aed 0%, transparent 70%); bottom: -160px; right: -60px; opacity: 0.22; }

/* 统计数字滚动计数 */
.hero-stats .hs b { display: inline-block; }

/* 区块滚动淡入 */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out, ease), transform 600ms var(--ease-out, ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* 模板卡片「选用这套」 */
.tpl-thumb { position: relative; display: block; }
.tpl-use {
  position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 8px);
  background: var(--brand); color: #fff; font-size: 13px;
  padding: 6px 14px; border-radius: 100px; opacity: 0;
  transition: all 200ms cubic-bezier(0.16,1,0.3,1); pointer-events: none;
  box-shadow: 0 4px 14px rgba(37,99,235,0.35); white-space: nowrap;
}
.tpl-card:hover .tpl-use { opacity: 1; transform: translate(-50%, 0); }
.tpl-card:hover .tpl-thumb img { transform: scale(1.03); }
.tpl-thumb img { transition: transform 300ms cubic-bezier(0.16,1,0.3,1); }

/* 深浅色手动切换按钮 */
.theme-toggle {
  position: fixed; right: 16px; bottom: 76px; z-index: 90;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); cursor: pointer; font-size: 17px; line-height: 1;
  box-shadow: 0 2px 10px rgba(15,23,42,0.12);
  display: flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { transform: translateY(-2px); }
html.dark {
  --ink: #e6ebf2; --muted: #9aa7b8; --line: #263040;
  --bg: #0d1117; --card: #161c24; --brand-soft: #14243d;
}
html.dark .site-header { background: #0d1117; border-bottom-color: var(--line); }
html.dark .hero { background: linear-gradient(180deg, #0d1117 0%, #11161d 100%); }

/* 模板卡片操作按钮（在线演示 / 选用这套） */
.tpl-actions{display:flex;gap:8px;margin-top:10px}
.tpl-actions .btn{flex:1;text-align:center;justify-content:center}

/* 设置页图片上传控件 */
.set-image{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.set-image-preview{width:96px;height:96px;border:1px solid var(--line,#e5e7eb);border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fafafa}
.set-image-preview img{max-width:100%;max-height:100%;object-fit:contain}
.set-image-url{flex:1;min-width:220px}
.set-image-btns{display:flex;gap:8px}
.set-image-btns .btn{cursor:pointer}

/* 文档正文字号切换（访客可选：标准 / 大 / 特大），localStorage 记忆 */
.docs-body { font-size: var(--doc-fs, 16px); }
.docs-body p, .docs-body li { font-size: 1em; }
.docs-body h1 { font-size: calc(1.875em * var(--doc-fs-k, 1)); }
.docs-body h2 { font-size: calc(1.3em * var(--doc-fs-k, 1)); }
.docs-body h3 { font-size: calc(1.06em * var(--doc-fs-k, 1)); }
.docs-fs-bar { display: inline-flex; align-items: center; gap: 4px; margin-left: auto;
  border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.docs-fs-bar button { border: 0; background: none; cursor: pointer; color: #64748b;
  font-size: 12px; padding: 3px 9px; border-radius: 6px; line-height: 1.4; }
.docs-fs-bar button:hover { background: #f1f5f9; color: var(--brand); }
.docs-fs-bar button.on { background: #eef2ff; color: #3730a3; font-weight: 700; }

/* ========================================
   官网暗色模式补全 — 白底卡片/硬编码浅底全翻转
   ======================================== */

/* 白底卡片类容器 → 深底 */
html.dark .flow-step,
html.dark .step,
html.dark .card-x,
html.dark .step,
html.dark .plan,
html.dark .feature,
html.dark .tpl-card,
html.dark .card,
html.dark .panel,
html.dark .box,
html.dark .login-card,
html.dark .console-card,
html.dark .stat-card,
html.dark .notice,
html.dark .banner-box,
html.dark .faq-item,
html.dark .doc-card,
html.dark .price-card { background: var(--card) !important; border-color: var(--line) !important; }

/* 卡片内文字：标题用亮色、正文用次亮色（卡片已深底） */
html.dark .flow-step b,
html.dark .step b,
html.dark .card-x h3,
html.dark .flow-step h3,
html.dark .card h2,
html.dark .card h3,
html.dark .card-x b { color: var(--ink) !important; }
html.dark .flow-step p,
html.dark .step p,
html.dark .card-x p { color: var(--muted) !important; }

/* 浅灰/浅蓝底硬编码 */
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:#fbfcfe"],
html.dark [style*="background:#f8fafc"],
html.dark [style*="background:#f1f5f9"],
html.dark [style*="background:#f8f9fb"],
html.dark [style*="background: #fff"] { background: var(--card) !important; }

/* 浅底上的深字兜底 */
html.dark [style*="color:#0f172a"],
html.dark [style*="color:#111827"],
html.dark [style*="color:#1f2937"],
html.dark [style*="color:#374151"],
html.dark [style*="color:#334155"],
html.dark [style*="color:#475569"] { color: var(--ink) !important; }

/* 表格（比价表等） */
html.dark table { background: var(--card); }
html.dark table th, html.dark table td { border-color: var(--line) !important; color: var(--ink); }
html.dark table.compare th.lbl, html.dark table.compare td.lbl { background: #121821 !important; }
html.dark table tbody tr:hover td { background: #131a24 !important; }

/* 按钮 */
html.dark .btn.gray { background: #1a2330 !important; color: var(--ink) !important; }
html.dark .btn.light, html.dark .btn.ghost { background: transparent !important; color: var(--ink) !important; }
html.dark .btn, html.dark button { color-scheme: dark; }

/* 输入框/下拉 */
html.dark input, html.dark select, html.dark textarea {
  background: #0f141b !important; border-color: var(--line) !important; color: var(--ink) !important; color-scheme: dark;
}

/* 页脚/区块分隔 */
html.dark .site-footer, html.dark footer { background: #0d1117 !important; border-color: var(--line) !important; color: var(--muted) !important; }
html.dark .site-footer a, html.dark footer a { color: #9aa7b8 !important; }
html.dark hr, html.dark .dashed { border-color: var(--line) !important; }

/* 徽章/胶囊 */
html.dark .fn, html.dark .badge, html.dark .tag, html.dark .pill { color-scheme: dark; }
html.dark .fhint { color: var(--muted) !important; border-top-color: var(--line) !important; }

/* 暗色补全 v3 — 图标座/汉堡/杂项 */
html.dark .icon, html.dark .card-x .icon, html.dark .feature .icon { background: #1a2440 !important; }
html.dark .icon svg, html.dark .card-x .icon svg { color: #93c5fd !important; stroke: #93c5fd !important; }
html.dark .hamburger, html.dark .menu-btn { background: #1a2440 !important; border-color: #2a3a5e !important; }
html.dark .hamburger span, html.dark .menu-btn span { background: #cbd5e1 !important; }
html.dark .hamburger svg, html.dark .menu-btn svg { stroke: #cbd5e1 !important; }
html.dark .hamburger svg path, html.dark .menu-btn svg path { stroke: #cbd5e1 !important; }
html.dark .theme-toggle { background: #1a2440 !important; border-color: #2a3a5e !important; }

/* 公告条关闭按钮 */
.announce-close { flex: none; margin-left: auto; background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; opacity: .7; }
.announce-close:hover { opacity: 1; }
.announce .announce-txt { flex: 1 1 auto; min-width: 0; }


/* ================= UI 设计统一升级（2026-10-04） =================
   原则：留白呼吸感、柔和阴影分层、统一圆角与间距、克制的色彩、
   表格斑马纹与悬浮态、按钮按压反馈、平滑过渡。 */
:root {
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.12);
  --radius-sm: 8px;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -.01em; }

/* 卡片：轻阴影 + 悬浮抬升 */
.card { box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow: var(--shadow-md); }

/* 按钮：统一圆角/字重/按压反馈 */
.btn { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: .01em;
  box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.ghost, .btn.gray, .btn.danger { box-shadow: none; }
.btn.sm { padding: 6px 12px; font-size: 14px; border-radius: 7px; }

/* 表格：表头弱化大写感改为柔和灰底，行悬浮高亮，斑马纹 */
table { font-size: 15px; }
thead th, tr:first-child th { background: #f8fafc; color: var(--muted);
  font-weight: 600; font-size: 13.5px; letter-spacing: .02em;
  border-bottom: 2px solid var(--line); }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #f8fafc; }
tbody tr:nth-child(even) { background: #fcfdfe; }
tbody tr:nth-child(even):hover { background: #f8fafc; }
td { vertical-align: middle; }

/* 标签徽章 */
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1.6; }
.tag.on { background: #ecfdf5; color: #047857; }
.tag.off { background: #f1f5f9; color: var(--muted); }

/* 分页条 */
.ops-pager { display: flex; align-items: center; gap: 12px; padding: 14px 4px;
  color: var(--muted); font-size: 14px; }

/* 输入控件统一 */
input, select, textarea { border-radius: var(--radius-sm); }
select { cursor: pointer; }

/* 页面标题区 */
.page-title { font-weight: 700; }
.page-sub { max-width: 72ch; }

/* 折叠卡（details/summary）可点击暗示 */
details.card > summary { cursor: pointer; user-select: none; font-weight: 600; }
details.card > summary:hover { color: var(--brand); }

/* 滚动条（Webkit）细化 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px;
  border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 暗色模式适配 */
html.dark .card { box-shadow: none; }
html.dark thead th, html.dark tr:first-child th { background: rgba(255,255,255,.04); color: #94a3b8; }
html.dark tbody tr:hover { background: rgba(255,255,255,.05); }
html.dark tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
html.dark tbody tr:nth-child(even):hover { background: rgba(255,255,255,.05); }
html.dark ::-webkit-scrollbar-thumb { background: #334155; border-color: transparent; }