/* =============================================================================
   字节爱好者 bytelover.cn — 前台样式
   以 redesign-mockups/mockup-home.html + mockup-software.html 为唯一视觉来源。
   类名与效果图保持一致（bl- 前缀），不再混用 Bootstrap 的 .btn / .card。
   弹窗 / 支付 / toast 为功能性样式（效果图无此块），风格与效果图对齐后保留。
   ============================================================================= */

:root {
  --ink: #0f1319; --ink2: #4b5563; --ink3: #8b95a5;
  --line: #e8ecf1; --bg: #ffffff; --bg2: #f7f9fb;
  --brand: #0a7f66; --brand-d: #065f4b; --brand-soft: #eaf7f3;
  --navy: #0d1a2d; --navy-2: #12233c; --mint: #3ddcae;
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-full: 999px;
  --sh-1: 0 1px 3px rgba(13,26,45,.06), 0 1px 2px rgba(13,26,45,.04);
  --sh-2: 0 4px 12px rgba(13,26,45,.07), 0 18px 40px rgba(13,26,45,.07);
  --wrap: 1200px;
  /* 历史别名：模板里残留的 bl- 变量继续可用 */
  --bl-ink: var(--ink); --bl-ink2: var(--ink2); --bl-ink3: var(--ink3);
  --bl-line: var(--line); --bl-line2: #f1f4f8;
  --bl-bg: var(--bg); --bl-bg2: var(--bg2);
  --bl-brand: var(--brand); --bl-brand-d: var(--brand-d); --bl-brand-soft: var(--brand-soft);
  --bl-navy: var(--navy); --bl-mint: var(--mint);
  --bl-wrap: var(--wrap); --bl-pad: 32px;
  --bl-gx: max(var(--bl-pad), calc((100% - var(--bl-wrap)) / 2));
  --bl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 13px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 52px;
  --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 80px;
}

* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  margin: 0; padding: 0;
}
a { text-decoration: none; color: inherit; }
/* 全站链接 hover / focus / active 一律不出现下划线（覆盖 Bootstrap 默认的 a:hover 下划线） */
a:hover, a:focus, a:active { text-decoration: none; }

/* ---------- 版心 ---------- */
.bl-wrap { max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding: 0 32px; }

/* ---------- 按钮（效果图：全胶囊） ---------- */
.bl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; font-weight: 600; font-size: 15px;
  padding: 10px 22px; border-radius: var(--r-full);
  background: var(--brand); color: #fff; transition: .18s;
  font-family: inherit; white-space: nowrap; line-height: 1.4;
}
.bl-btn:hover { background: var(--brand-d); transform: translateY(-1px); color: #fff; }
.bl-btn-soft { background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(6px); }
.bl-btn-soft:hover { background: rgba(255,255,255,.2); }
.bl-btn.ghost, .bl-btn-hero-ghost {
  background: transparent; border: 1px solid rgba(255,255,255,.28); color: #fff;
}
.bl-btn.ghost:hover, .bl-btn-hero-ghost:hover {
  border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); color: #fff; transform: none;
}
.bl-btn-lg { font-size: 16px; padding: 14px 34px; }
.bl-btn-sm { font-size: 13px; padding: 7px 14px; }
.bl-btn-ghost { background: transparent; border: 1.5px solid rgba(13,26,45,.22); color: var(--ink); }
.bl-btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); transform: none; }
.bl-btn-vip { background: var(--navy); }
.bl-btn-vip:hover { background: #17273f; }
.bl-btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ---------- 顶部导航（效果图：72px 毛玻璃） ---------- */
.bl-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 40px; height: 72px;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid #f1f4f8;
}
.bl-nav > .bl-wrap { display: flex; align-items: center; gap: 40px; width: 100%; }
.bl-brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; color: var(--ink); }
.bl-nav-brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; color: var(--ink); }
.bl-logo {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, #0a7f66, #3ddcae);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; font-weight: 800;
}
.bl-nav-brand img { height: 44px; width: auto; border-radius: 10px; display: block; }
.bl-nav-links { display: flex; gap: 30px; font-size: 14.5px; color: var(--ink2); }
.bl-nav-links a { padding: 4px 0; color: var(--ink2); }
.bl-nav-links a:hover { color: var(--ink); }
.bl-nav-links a.on { color: var(--brand); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); }
.bl-nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* 登录态只显示用户名（邮箱），不显示「个人中心」按钮 */
.bl-user-mail {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink2); padding: 7px 14px;
  border-radius: var(--r-full); background: var(--bg2);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: default;
}
.bl-user-mail:hover { color: var(--brand-d); background: var(--brand-soft); }
.bl-user-mail .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; }
/* 下载 VIP 角标：金色王冠 SVG，有权限才渲染 */
.bl-vip-ic { flex: none; display: inline-flex; vertical-align: -2px; }
.bl-btn-out {
  font-size: 13.5px; color: var(--ink3); background: none;
  border: 1px solid var(--line); padding: 6px 14px;
  border-radius: var(--r-full); cursor: pointer; font-family: inherit;
}
.bl-btn-out:hover { color: var(--ink); border-color: var(--ink3); }

/* ---------- Hero（效果图：深色，无搜索、无统计） ---------- */
.bl-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #15304f 100%);
  color: #fff; padding: 96px 0 104px;
}
.bl-hero::before {
  content: ""; position: absolute; right: -180px; top: -160px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(61,220,174,.22), transparent 65%);
}
.bl-hero::after {
  content: ""; position: absolute; left: -120px; bottom: -220px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43,100,246,.18), transparent 65%);
}
.bl-hero .bl-wrap { position: relative; z-index: 1; }
.bl-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 2px; color: var(--mint);
  border: 1px solid rgba(61,220,174,.35); padding: 6px 16px;
  border-radius: var(--r-full); margin-bottom: 26px;
}
.bl-hero h1 {
  font-size: 52px; line-height: 1.18; font-weight: 800;
  letter-spacing: -1px; max-width: 640px; margin: 0; color: #fff;
}
.bl-hero h1 em { font-style: normal; color: var(--mint); }
.bl-hero p {
  margin: 20px 0 0; font-size: 17px; line-height: 1.8;
  color: rgba(255,255,255,.72); max-width: 560px;
}
.bl-hero-cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- 软件库区块 ---------- */
.bl-sec { padding: 72px 0 24px; }
.bl-sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.bl-sec-head h2 { font-size: 28px; font-weight: 800; margin: 0; letter-spacing: -.3px; }
.bl-sec-head .sub, .bl-sec-head span { font-size: 14px; color: var(--ink3); }
.bl-chips, .bl-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.bl-chip {
  font-size: 14px; color: var(--ink2); background: var(--bg2);
  padding: 8px 20px; border-radius: var(--r-full); cursor: pointer;
  border: 1px solid transparent; font-family: inherit; transition: .16s;
}
.bl-chip:hover { color: var(--ink); }
.bl-chip.on {
  background: var(--brand-soft); color: var(--brand); font-weight: 600;
  border-color: rgba(10,127,102,.18);
}
/* 下载说明（效果图：浅绿底；措辞不含「全部免费下载」） */
.bl-notice {
  display: flex; gap: 14px; background: var(--brand-soft);
  border-radius: var(--r-md); padding: 18px 22px; margin-bottom: 30px;
  font-size: 14px; line-height: 1.75; color: #1c4d40;
}
.bl-notice b { flex-shrink: 0; color: #1c4d40; }
.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bl-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: #fff; border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--sh-1); transition: .2s; color: inherit;
}
.bl-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); color: inherit; }
.bl-card-top { display: flex; gap: 14px; align-items: center; }
.bl-icon, .bl-card-icon {
  width: 56px; height: 56px; border-radius: 16px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; font-weight: 800; overflow: hidden;
}
.bl-card-icon { font-size: 22px; }
.bl-icon img, .bl-card-icon img, .bl-dicon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-card h3 { font-size: 17.5px; font-weight: 700; margin: 0; }
.bl-ver, .bl-card-meta { font-size: 13px; color: var(--ink3); margin-top: 3px; }
.bl-card p {
  font-size: 14px; line-height: 1.7; color: var(--ink2); flex: 1; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 48px;
}
.bl-card-foot { display: flex; gap: 8px; align-items: center; padding-top: 6px; flex-wrap: wrap; }
.bl-pill {
  font-size: 12px; font-weight: 600; padding: 4px 12px;
  border-radius: var(--r-full); background: var(--bg2); color: var(--ink2); flex: none;
}
.bl-pill-android { background: #eaf7ee; color: #1e8e4e; }
.bl-pill-ios { background: #eef1f6; color: #3c4a5e; }
.bl-pill-windows { background: #e8f1fb; color: #1e6fc4; }
.bl-pill-mac { background: #f0edfa; color: #6a4fc0; }
.bl-pill-web { background: #fdf3e7; color: #b06f18; }
.bl-more { margin-left: auto; font-size: 13px; color: var(--brand); font-weight: 600; }
.bl-vip-badge {
  position: absolute; top: 20px; right: 20px;
  font-size: 12px; font-weight: 700; color: #8a5a00;
  background: linear-gradient(135deg, #ffe9bd, #ffd88a);
  padding: 5px 12px; border-radius: var(--r-full);
}

/* ---------- 首页 CTA（深色圆角横幅） ---------- */
.bl-cta {
  margin: 64px 0; background: linear-gradient(135deg, var(--navy), #16304e);
  border-radius: var(--r-lg); color: #fff; padding: 44px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.bl-cta h3 { font-size: 23px; font-weight: 800; margin: 0; color: #fff; }
.bl-cta p { margin: 8px 0 0; font-size: 14.5px; color: rgba(255,255,255,.66); }
.bl-cta .bl-btn { background: #fff; color: var(--navy); flex: none; }
.bl-cta .bl-btn:hover { background: var(--mint); color: var(--navy); transform: translateY(-1px); }

/* ---------- Footer（效果图：深色四列 + 备案行） ---------- */
.bl-foot { background: var(--navy); color: rgba(255,255,255,.78); padding: 56px 0 0; margin-top: 24px; }
.bl-foot-cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px;
}
.bl-foot h4 { color: #fff; font-size: 15px; margin: 0 0 14px; }
.bl-foot p { font-size: 13.5px; line-height: 1.9; margin: 0 0 6px; }
.bl-foot .dim { color: rgba(255,255,255,.42); }
.bl-foot a { color: inherit; }
.bl-foot a:hover { color: #fff; }
.bl-foot-brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 800; font-size: 17px; margin-bottom: 12px;
}
.bl-foot-brand img { height: 32px; width: auto; border-radius: 8px; display: block; }
.bl-fcol p a { color: var(--mint); }
.bl-fcol p a:hover { color: #fff; }
.bl-wxchip, .bl-dychip {
  border-radius: var(--r-sm); padding: 5px 12px; cursor: pointer;
  font-weight: 600; display: inline-block; transition: background .16s ease;
}
.bl-wxchip { background: rgba(61,220,174,.14); color: #6ee7c0; }
.bl-wxchip:hover { background: rgba(61,220,174,.24); }
.bl-dychip { background: rgba(255,255,255,.10); color: #fff; }
.bl-dychip:hover { background: rgba(255,255,255,.18); }
.bl-foot-stats {
  display: flex; gap: 32px; flex-wrap: wrap; justify-content: center;
  padding: 20px 32px 0; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 13px; color: rgba(255,255,255,.42);
}
.bl-foot-stats b { color: rgba(255,255,255,.82); }
.bl-foot-info {
  border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0;
  text-align: center; font-size: 12.5px; color: rgba(255,255,255,.4);
}
.bl-foot-info a { color: inherit; margin: 0 6px; }
.bl-foot-info .sep { margin: 0 8px; color: rgba(255,255,255,.22); }

/* ---------- 详情页 ---------- */
.bl-dwrap { padding: 0 0 10px; }
.bl-crumb { padding: 28px 0 0; font-size: 13.5px; color: var(--ink3); }
.bl-crumb a { color: var(--ink3); }
.bl-crumb a:hover { color: var(--brand); }
.bl-dhead {
  display: flex; gap: 28px; align-items: flex-start;
  padding: 26px 0 30px; border-bottom: 1px solid var(--line);
}
.bl-dicon {
  width: 96px; height: 96px; border-radius: 24px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 42px; font-weight: 800;
  box-shadow: var(--sh-2); overflow: hidden;
}
.bl-dinfo { flex: 1; min-width: 0; }
.bl-dinfo h1, .bl-dhead h1 { font-size: 32px; font-weight: 800; letter-spacing: -.5px; margin: 0; }
.bl-dmeta {
  display: flex; align-items: center; gap: 10px; margin-top: 10px;
  font-size: 13.5px; color: var(--ink3); flex-wrap: wrap;
}
.bl-dmeta .sep { color: #d5dae3; }
.bl-dsum { margin-top: 14px; font-size: 15.5px; line-height: 1.75; color: var(--ink2); max-width: 620px; }
.bl-dlbox { flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; min-width: 280px; }
.bl-dlrow { display: flex; flex-direction: column; gap: 12px; }
.bl-dlrow .bl-btn { width: 100%; }
.bl-dlnote {
  font-size: 13px; line-height: 1.7; color: var(--ink3);
  background: var(--bg2); border-radius: var(--r-md); padding: 12px 16px;
}
.bl-dltip { font-size: 13px; color: var(--ink3); margin-top: 8px; line-height: 1.7; }
.bl-vipnote {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 24px;
  background: var(--bg2); border-radius: var(--r-lg); padding: 24px 26px;
  font-size: 14px; color: var(--ink2); line-height: 1.85;
}
.bl-vipnote b { color: var(--ink); }
.bl-vipnote u { text-decoration-style: dotted; text-underline-offset: 3px; }

/* 视频介绍（效果图：深色横幅） */
.bl-video, .bl-videocta {
  display: flex; align-items: center; gap: 18px; margin-top: 26px;
  background: linear-gradient(135deg, var(--navy), #16304e);
  border-radius: var(--r-lg); padding: 22px 28px; color: #fff;
}
.bl-video .ic, .bl-videocta .ic {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: rgba(61,220,174,.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--mint);
}
.bl-video b, .bl-videocta b { font-size: 15.5px; color: #fff; display: block; }
.bl-video p, .bl-videocta p { font-size: 13.5px; color: rgba(255,255,255,.65); margin: 4px 0 0; line-height: 1.7; }
.bl-video .bl-btn, .bl-videocta .bl-btn {
  margin-left: auto; background: rgba(255,255,255,.12); font-size: 14px; flex: none;
}
.bl-video .bl-btn:hover, .bl-videocta .bl-btn:hover { background: rgba(255,255,255,.22); transform: none; }

/* Tabs（效果图：只保留 软件介绍 / 截图预览） */
.bl-tabs { display: flex; gap: 8px; margin-top: 34px; border-bottom: 2px solid var(--bg2); }
.bl-tabs div, .bl-tab {
  font-size: 15px; font-weight: 600; color: var(--ink3);
  padding: 12px 22px; cursor: pointer; border-radius: 10px 10px 0 0; position: relative;
}
.bl-tabs div:hover { color: var(--ink); }
.bl-tabs div.on, .bl-tab.on { color: var(--brand); }
.bl-tabs div.on::after, .bl-tab.on::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -2px;
  height: 2.5px; background: var(--brand); border-radius: 2px;
}
.bl-tabbody { padding: 32px 0 10px; max-width: 820px; }
.bl-body { padding: 32px 0 10px; max-width: 820px; }
.bl-body h3, .bl-tabbody h3 { font-size: 19px; font-weight: 800; margin: 26px 0 12px; color: var(--ink); }
.bl-body h3:first-child, .bl-tabbody h3:first-child { margin-top: 0; }
.bl-body p, .bl-tabbody p { font-size: 15px; line-height: 1.9; color: var(--ink2); margin: 0 0 12px; }
.bl-tabbody ul { margin: 0 0 16px; padding-left: 22px; color: var(--ink2); font-size: 15px; line-height: 1.9; }
.bl-tabbody li { margin-bottom: 8px; }
.bl-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.bl-feat { display: flex; gap: 12px; background: var(--bg2); border-radius: var(--r-md); padding: 16px 18px; }
.bl-feat .n {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--brand-soft); color: var(--brand);
  font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.bl-feat b { font-size: 14.5px; display: block; margin-bottom: 3px; color: var(--ink); }
.bl-feat span { font-size: 13px; color: var(--ink3); line-height: 1.6; }
.bl-rich img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.bl-rich h3 { font-size: 19px; font-weight: 800; color: var(--ink); margin: 26px 0 12px; }
.bl-rich h3:first-child { margin-top: 0; }
.bl-rich p { font-size: 15px; line-height: 1.9; color: var(--ink2); }
.bl-rich a { color: var(--brand); }

/* 截图（效果图：9/16 占位） */
.bl-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.bl-shot {
  aspect-ratio: 9/16; max-height: 420px; border-radius: var(--r-md);
  background: linear-gradient(160deg, #f2f6fa, #e6edf4);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink3); font-size: 14px; box-shadow: var(--sh-1); overflow: hidden;
}
.bl-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-hid { display: none !important; }

/* 更多软件（效果图：小横卡） */
.bl-more-sec { margin: 60px 0 30px; }
.bl-more-sec h2 { font-size: 22px; font-weight: 800; margin: 0 0 20px; }
.bl-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bl-mini-card, .bl-more-sec .bl-card {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  background: #fff; border-radius: var(--r-lg); padding: 18px 20px;
  box-shadow: var(--sh-1); transition: .2s;
}
.bl-mini-card:hover, .bl-more-sec .bl-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.bl-icon-sm {
  width: 48px; height: 48px; border-radius: 13px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 800; overflow: hidden;
}
.bl-icon-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-mini-card b, .bl-more-sec .bl-card b { font-size: 15px; display: block; color: var(--ink); }
.bl-mini-card .v, .bl-more-sec .bl-card .v { font-size: 12.5px; color: var(--ink3); margin-top: 2px; display: block; }
.bl-mini-card .go, .bl-more-sec .bl-card .go { margin-left: auto; color: var(--brand); font-size: 13px; font-weight: 600; }

/* ---------- 弹窗（保留功能，风格对齐效果图） ---------- */
.bl-modal-mask {
  position: fixed; inset: 0; background: rgba(13,26,45,.5); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.bl-modal {
  background: #fff; border-radius: 22px; width: 100%; max-width: 560px;
  max-height: 88vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(13,26,45,.3);
}
.bl-modal-h { padding: 24px 28px; border-bottom: 1px solid var(--bg2); font-size: 20px; font-weight: 700; }
.bl-modal-b { padding: 26px 28px; font-size: 14px; color: var(--ink2); line-height: 1.85; }
.bl-modal-f { padding: 18px 28px 24px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.bl-payprice { text-align: center; padding: 4px 0 32px; }
.bl-payprice .num { font-size: 48px; font-weight: 800; line-height: 1.05; letter-spacing: -1px; }
.bl-payprice .num small { font-size: 24px; font-weight: 700; }
.bl-payprice .cap { font-size: 13px; color: var(--ink3); margin-top: 6px; }
.bl-paylist { list-style: none; margin: 0 0 32px; padding: 0; }
.bl-paylist li { display: flex; gap: 12px; margin-bottom: 16px; font-size: 14px; line-height: 1.8; }
.bl-paylist .tk {
  width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 3px;
  background: var(--brand-soft); color: var(--brand-d);
  font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.bl-payterms { border-radius: var(--r-md); background: var(--bg2); margin-bottom: 16px; }
.bl-payterms summary { padding: 14px 18px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.bl-payterms summary::-webkit-details-marker { display: none; }
.bl-payterms summary::before { content: "▸ "; color: var(--brand); }
.bl-payterms[open] summary::before { content: "▾ "; }
.bl-payterms-body { padding: 0 18px 16px; font-size: 13px; line-height: 1.9; }
.bl-payterms-body p { margin: 0 0 10px; }
.bl-payterms-body .dim { color: var(--ink3); }
.bl-payagree { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.8; cursor: pointer; }
.bl-payagree input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--brand); }
.bl-mono { font-family: var(--bl-mono); }

/* ---------- 轻提示 ---------- */
.bl-toast, #blToast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%,20px);
  background: var(--navy); color: #fff; padding: 13px 24px;
  border-radius: var(--r-md); font-size: 14px; opacity: 0; transition: .25s;
  z-index: 300; pointer-events: none; max-width: 80vw; text-align: center;
  box-shadow: 0 12px 32px rgba(13,26,45,.28);
}
.bl-toast.on { opacity: 1; transform: translate(-50%,0); }

/* ---------- 通用内容页（想法征集 / 关于 / 登录等，沿用效果图语言） ---------- */
/* 注意：与 .bl-wrap 同用时，水平内边距需与 .bl-wrap 一致，否则会覆盖成贴边 */
.bl-page { padding: 40px max(32px, calc((100% - var(--wrap)) / 2)) 64px; }
.bl-page-head { margin-bottom: 24px; }
.bl-page-head h1 { font-size: 28px; font-weight: 800; margin: 0; letter-spacing: -.3px; }
.bl-page-head p { margin: 8px 0 0; font-size: 14px; color: var(--ink3); }
/* 居中头：与关于页 bl-about-head 对齐（想法征集页用） */
.bl-page-head.center { text-align: center; }
.bl-panel { background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 28px; }
/* 窄列容器：与关于页正文同宽（820px 居中），想法征集页用 */
.bl-narrow { max-width: 820px; margin-left: auto; margin-right: auto; }

/* ---------- 想法征集（TAB：我的想法 / 提交想法） ---------- */
.bl-idea-tabs { margin-top: 6px; }
.bl-idea-filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; align-items: center; }
.bl-filter-label { font-size: 13px; color: var(--ink3); margin-right: 2px; flex: none; }
.bl-idea-list { display: flex; flex-direction: column; gap: 14px; }
.bl-idea {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border-radius: var(--r-lg); padding: 22px 24px;
  box-shadow: var(--sh-1); transition: .2s; position: relative; color: inherit;
}
.bl-idea:hover { transform: translateY(-2px); box-shadow: var(--sh-2); color: inherit; }
.bl-idea-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bl-idea-title {
  flex: 1; min-width: 200px; font-size: 15.5px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bl-idea-sum {
  font-size: 14px; line-height: 1.7; color: var(--ink2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bl-idea-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink3); flex-wrap: wrap; }
.bl-pill-ok { background: #eaf7ee; color: #1e8e4e; }
.bl-pill-wait { background: var(--bg2); color: var(--ink3); }
.bl-pill-cat { background: var(--brand-soft); color: var(--brand-d); }

/* 空状态 / 未登录引导 */
.bl-empty {
  text-align: center; padding: 56px 24px; color: var(--ink3);
  background: var(--bg2); border-radius: var(--r-lg);
}
.bl-empty .ic { font-size: 34px; margin-bottom: 12px; }
.bl-empty b { display: block; font-size: 16px; color: var(--ink2); margin-bottom: 6px; }
.bl-empty p { font-size: 13.5px; margin: 0 0 18px; }

/* 提交表单（轻量输入风格，与整站胶囊/圆角语言一致） */
.bl-form { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.bl-field { display: flex; flex-direction: column; gap: 8px; }
.bl-field > label { font-size: 14px; font-weight: 600; color: var(--ink); }
.bl-field .req { color: #e5484d; margin-left: 2px; }
.bl-field .hint { font-size: 12.5px; color: var(--ink3); font-weight: 400; margin-left: 6px; }
.bl-input, .bl-textarea {
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--bg2); border: 1.5px solid transparent; border-radius: var(--r-sm);
  padding: 11px 14px; outline: none; transition: .16s; width: 100%;
}
.bl-input::placeholder, .bl-textarea::placeholder { color: var(--ink3); }
.bl-input:focus, .bl-textarea:focus { border-color: var(--brand); background: #fff; }
.bl-textarea { min-height: 150px; resize: vertical; line-height: 1.7; }
.bl-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bl-radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bl-radio { position: relative; display: inline-block; }
.bl-radio input { position: absolute; opacity: 0; pointer-events: none; }
.bl-radio span {
  display: inline-block; font-size: 14px; padding: 8px 20px; border-radius: var(--r-full);
  background: var(--bg2); color: var(--ink2); cursor: pointer;
  border: 1px solid transparent; transition: .16s; user-select: none;
}
.bl-radio span:hover { color: var(--ink); }
.bl-radio input:checked + span {
  background: var(--brand-soft); color: var(--brand); font-weight: 600;
  border-color: rgba(10,127,102,.18);
}
.bl-radio input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.bl-captcha { display: flex; gap: 10px; align-items: stretch; max-width: 320px; }
.bl-captcha .bl-input { flex: 1; min-width: 0; }
.bl-captcha img { height: 44px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--line); background: #fff; }
label.error { font-size: 12.5px; color: #e5484d; }

/* 想法征集页分页（覆盖 bootstrap 默认外观） */
.bl-page .pagination { margin: 28px 0 0; justify-content: center; gap: 6px; flex-wrap: wrap; }
.bl-page .page-link { border: 0; background: var(--bg2); color: var(--ink2); border-radius: var(--r-sm) !important; padding: 7px 14px; font-size: 13.5px; }
.bl-page .page-link:hover { background: var(--brand-soft); color: var(--brand); }
.bl-page .page-item.active .page-link { background: var(--brand); color: #fff; }
.bl-page .page-item.disabled .page-link { background: var(--bg2); color: var(--ink3); }

/* ---------- 关于我们 ---------- */
.bl-about-head { text-align: center; padding: 64px 0 12px; }
.bl-about-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 2px; color: var(--brand);
  background: var(--brand-soft); border: 1px solid rgba(10,127,102,.16);
  padding: 6px 16px; border-radius: var(--r-full); margin-bottom: 20px;
}
.bl-about-head h1 { font-size: 36px; font-weight: 800; letter-spacing: -.5px; margin: 0; color: var(--ink); }
.bl-about-head .sub { margin: 14px auto 0; font-size: 15px; line-height: 1.8; color: var(--ink3); max-width: 640px; }
.bl-about-body {
  max-width: 820px; margin: 32px auto 0;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: 44px 52px;
  font-size: 15.5px; line-height: 2; color: var(--ink2);
}
.bl-about-body h1, .bl-about-body h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 34px 0 14px; letter-spacing: -.3px; }
.bl-about-body h3, .bl-about-body h4 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 28px 0 12px; }
.bl-about-body h1:first-child, .bl-about-body h2:first-child, .bl-about-body h3:first-child, .bl-about-body h4:first-child { margin-top: 0; }
.bl-about-body p { margin: 0 0 16px; }
.bl-about-body strong, .bl-about-body b { color: var(--ink); }
.bl-about-body a { color: var(--brand); }
.bl-about-body a:hover { color: var(--brand-d); }
.bl-about-body ul, .bl-about-body ol { padding-left: 24px; margin: 0 0 16px; }
.bl-about-body li { margin-bottom: 8px; }
.bl-about-body li::marker { color: var(--brand); }
.bl-about-body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.bl-about-body blockquote {
  margin: 20px 0; padding: 16px 22px; background: var(--bg2);
  border-left: 3px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink2);
}
.bl-about-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.bl-about-body th, .bl-about-body td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.bl-about-body th { background: var(--bg2); color: var(--ink); font-weight: 600; }
.bl-about-body hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.bl-about-body code { font-family: var(--bl-mono); font-size: 13.5px; background: var(--bg2); padding: 2px 6px; border-radius: 4px; }

/* ---------- 想法征集 / 关于我们 响应式 ---------- */
@media (max-width: 860px) {
  .bl-page { padding-left: 20px; padding-right: 20px; }
  .bl-page-head h1 { font-size: 24px; }
  .bl-tabs div, .bl-tab { padding: 10px 16px; font-size: 14px; }
  .bl-idea { padding: 18px; }
  .bl-idea-title { white-space: normal; }
  .bl-form-grid { grid-template-columns: 1fr; }
  .bl-about-head { padding: 40px 0 4px; }
  .bl-about-head h1 { font-size: 27px; }
  .bl-about-body { padding: 26px 22px; margin-top: 24px; font-size: 15px; line-height: 1.95; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .bl-grid, .bl-mini-grid, .bl-shots { grid-template-columns: repeat(2, 1fr); }
  .bl-dhead { flex-wrap: wrap; }
  .bl-dlbox { min-width: 0; width: 100%; }
  .bl-dlrow { flex-direction: row; }
  .bl-dlrow .bl-btn { flex: 1; }
}
@media (max-width: 860px) {
  .bl-wrap { padding: 0 20px; }
  .bl-nav { height: auto; padding-top: 12px; padding-bottom: 12px; }
  .bl-nav > .bl-wrap { gap: 14px; flex-wrap: wrap; }
  .bl-nav-links { order: 3; width: 100%; gap: 24px; }
  .bl-hero { padding: 56px 0 52px; }
  .bl-hero h1 { font-size: 32px; }
  .bl-hero p { font-size: 16px; }
  .bl-user-mail { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bl-sec { padding-top: 52px; }
  .bl-sec-head { flex-direction: column; gap: 4px; }
  .bl-grid, .bl-mini-grid { grid-template-columns: 1fr; gap: 12px; }
  .bl-cta { margin-top: 56px; padding: 32px 28px; }
  .bl-cta .bl-btn { width: 100%; }
  .bl-foot { padding-top: 52px; }
  .bl-foot-cols { grid-template-columns: 1fr 1fr; padding-bottom: 40px; }
  .bl-dhead { gap: 16px; padding-bottom: 20px; }
  .bl-dicon { width: 76px; height: 76px; border-radius: 20px; font-size: 30px; }
  .bl-video, .bl-videocta { flex-direction: column; align-items: flex-start; }
  .bl-video .bl-btn, .bl-videocta .bl-btn { margin-left: 0; }
  .bl-feats { grid-template-columns: 1fr; }
  .bl-shots { grid-template-columns: 1fr 1fr; }
  .bl-modal-f .bl-btn { flex: 1; }
}
@media (max-width: 520px) {
  .bl-foot-cols { grid-template-columns: 1fr; }
  .bl-shots { grid-template-columns: 1fr 1fr; }
}

/* =============================================================================
   登录页（mem_login.html）：深色底 + 粒子星链
   作用域：所有选择器都以 body.bl-login-page 或 .bl-login- 打头 ⇒ 只影响登录页，
   不改动 inc_header / inc_footer，其它页面零影响。
   效果图：redesign-mockups/mockup-login.html
   ============================================================================= */
body.bl-login-page {
  background: var(--navy);
  display: flex; flex-direction: column; min-height: 100vh;
}

/* ---------- 背景三层 ---------- */
.bl-login-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #15304f 100%);
}
.bl-login-bg > * { position: absolute; inset: 0; }
/* 细网格：给纯色底一点质感 */
.bl-login-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 100%);
}
/* canvas 是替换元素：width/height 必须显式写，
   否则会退回 width 属性当内在尺寸，且隐藏状态下量到 0 就永久画不出来 */
.bl-login-canvas { width: 100%; height: 100%; display: block; }
/* 上下渐隐：压住动画，不抢表单注意力 */
.bl-login-fade {
  background: linear-gradient(180deg, rgba(13,26,45,.35) 0%, rgba(13,26,45,0) 28%, rgba(13,26,45,.50) 100%);
}
/* 鼠标跟随的极淡光斑（去掉不影响主效果） */
.bl-login-spot {
  background: radial-gradient(circle 380px at var(--mx,50%) var(--my,40%), rgba(61,220,174,.10), transparent 70%);
  transition: background .25s linear; pointer-events: none;
}

/* ---------- 深色导航：只覆盖登录页内的 .bl-nav，不动 inc_header ---------- */
.bl-login-page .bl-nav {
  background: rgba(13,26,45,.42);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: rgba(255,255,255,.08);
}
.bl-login-page .bl-brand { color: #fff; }
.bl-login-page .bl-nav-links,
.bl-login-page .bl-nav-links a { color: rgba(255,255,255,.66); }
.bl-login-page .bl-nav-links a:hover { color: #fff; }
.bl-login-page .bl-nav-links a.on { color: var(--mint); box-shadow: inset 0 -2px 0 var(--mint); }
.bl-login-page .bl-user-mail { background: rgba(255,255,255,.10); color: rgba(255,255,255,.82); }
.bl-login-page .bl-user-mail:hover { background: rgba(255,255,255,.16); color: #fff; }
.bl-login-page .bl-btn-out { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.22); }
.bl-login-page .bl-btn-out:hover { color: #fff; border-color: rgba(255,255,255,.5); }

/* ---------- 主区（flex:1 自适应导航高度，不写死 calc） ---------- */
.bl-login-stage {
  position: relative; z-index: 1; flex: 1 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 24px 32px;
}

/* ---------- 登录卡 ---------- */
.bl-login-card {
  width: 100%; max-width: 430px; padding: 38px 34px 30px; color: var(--ink);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px rgba(3,10,20,.45), 0 2px 6px rgba(3,10,20,.20);
  animation: blLoginRise .7s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes blLoginRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* 卡片顶部图标 = 站点 logo（方形白底图，圆角裁切）；无 logo 时退回渐变「字」方块 */
.bl-login-logo { display: flex; justify-content: center; margin: 0 0 16px; }
.bl-login-logo img {
  height: 64px; width: auto; border-radius: 16px; display: block;
  box-shadow: 0 8px 20px rgba(10,127,102,.22);
}
.bl-login-logo .bl-logo { width: 64px; height: 64px; border-radius: 16px; font-size: 30px; }

.bl-login-card h1 { font-size: 22px; font-weight: 800; margin: 0; text-align: center; letter-spacing: -.2px; }
.bl-login-sub { text-align: center; font-size: 13.5px; color: var(--ink3); margin: 8px 0 26px; line-height: 1.6; }

.bl-login-field { margin-bottom: 14px; }
.bl-login-field label { display: block; font-size: 13px; color: var(--ink2); font-weight: 600; margin-bottom: 7px; }
.bl-login-input {
  width: 100%; height: 48px; padding: 0 15px; min-width: 0;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  font-size: 15px; color: var(--ink); font-family: inherit; outline: none; transition: .16s;
}
.bl-login-input::placeholder { color: #a9b2c0; }
.bl-login-input:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(10,127,102,.13); }

.bl-login-coderow { display: flex; gap: 10px; }
.bl-login-coderow .bl-login-input { flex: 1; }
.bl-login-code {
  flex: none; height: 48px; padding: 0 18px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1px solid rgba(10,127,102,.30); color: var(--brand);
  font-size: 14px; font-weight: 600; font-family: inherit; transition: .16s; white-space: nowrap;
}
.bl-login-code:hover { background: var(--brand-soft); }
.bl-login-code[disabled] { opacity: .55; cursor: not-allowed; }

.bl-login-submit {
  width: 100%; height: 52px; margin-top: 22px; border: 0; cursor: pointer;
  border-radius: var(--r-full); background: var(--brand); color: #fff;
  font-size: 16px; font-weight: 700; font-family: inherit; letter-spacing: .5px;
  transition: .18s; box-shadow: 0 8px 22px rgba(10,127,102,.34);
}
.bl-login-submit:hover { background: var(--brand-d); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(10,127,102,.42); }
.bl-login-submit[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

.bl-login-tip { text-align: center; font-size: 12.5px; color: var(--ink3); margin: 16px 0 0; line-height: 1.7; }
.bl-login-tip a { color: var(--brand); }
.bl-login-hr { height: 1px; background: var(--line); margin: 24px 0 16px; }
.bl-login-note { text-align: center; font-size: 12.5px; color: var(--ink3); }
.bl-login-note .dot { color: #cfd6e0; margin: 0 6px; }

/* 卡片内的提示条（复用模板原有的 .alert 类名，只收紧边距） */
.bl-login-card .alert { margin-bottom: 14px; font-size: 13.5px; padding: 12px 16px; border-radius: 12px; }

/* ---------- 页脚备案（复用 .bl-foot-info 的深色配色，去掉顶部分隔线） ---------- */
.bl-login-foot { position: relative; z-index: 1; flex: none; }
.bl-login-foot .bl-foot-info { border-top: 0; padding: 0 24px 30px; }

@media (max-width: 860px) {
  .bl-login-stage { padding: 32px 20px 24px; }
  .bl-login-card { padding: 30px 22px 24px; }
  .bl-login-logo img, .bl-login-logo .bl-logo { height: 58px; width: auto; }
  .bl-login-logo .bl-logo { width: 58px; font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-login-card { animation: none !important; }
}

/* =============================================================================
   商品信息与价格展示
   目的：站上必须公开看得到「卖什么、多少钱、怎么交付、怎么退、找谁」，这类经营
   信息是支付宝「电脑网站支付」审核会核对的（驳回理由「网站为非真实经营网站」
   就是因为它看不到）。只新增类，不覆盖既有类，其它页面零影响。
   ============================================================================= */

/* ---------- 首页价格说明条 ---------- */
.bl-pricebar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 22px; margin: 0 0 26px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  border: 1px solid rgba(10,127,102,.18);
}
.bl-pricebar .tag {
  flex: none; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--brand); color: #fff;
}
.bl-pricebar .txt { flex: 1 1 320px; font-size: 14px; line-height: 1.8; color: var(--ink2); }
.bl-pricebar .txt b { color: var(--brand-d); }
.bl-pricebar .go { flex: none; }

/* ---------- 价格徽标（首页卡片 / 详情页），配合 .bl-pill 使用 ---------- */
.bl-pill-buy { background: #fdf3e7; color: #b06f18; font-weight: 700; }
.bl-pill-free { background: #eaf7ee; color: #1e8e4e; font-weight: 700; }

/* ---------- 购买说明页（/pricing） ---------- */
.bl-buybox {
  max-width: 820px; margin: 0 auto; padding: 34px 38px 30px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.bl-buybox + .bl-buybox { margin-top: 22px; }
.bl-buybox h2 { font-size: 21px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.2px; }
.bl-buybox .hint { font-size: 13px; color: var(--ink3); margin: 0 0 18px; line-height: 1.8; }

/* 商品规格：左列项目 / 右列说明 */
.bl-spec { margin: 0; padding: 0; }
.bl-spec div { display: flex; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); }
.bl-spec div:first-child { border-top: 0; }
.bl-spec dt { flex: none; width: 124px; font-size: 14px; font-weight: 600; color: var(--ink); }
.bl-spec dd { flex: 1; margin: 0; font-size: 14px; line-height: 1.85; color: var(--ink2); }
.bl-spec dd b { color: var(--brand-d); }

/* 开通流程 */
.bl-flow { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.bl-flow li { flex: 1 1 200px; padding: 16px 18px; border-radius: var(--r-md); background: var(--bg2); }
.bl-flow .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; margin-bottom: 8px;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
}
.bl-flow b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.bl-flow span { font-size: 13px; color: var(--ink3); line-height: 1.7; }

@media (max-width: 680px) {
  .bl-buybox { padding: 26px 20px 22px; }
  .bl-spec div { flex-direction: column; gap: 4px; }
  .bl-spec dt { width: auto; }
  .bl-flow li { flex: 1 1 100%; }
}

/* ================= 确认订单 / 收银台（/checkout） =================
   只服务 checkout.html，全部 bl-co- 前缀，不影响其它页面。 */
.bl-co-steps {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 0 0 26px; padding: 0; list-style: none;
}
.bl-co-steps li {
  flex: 1 1 160px; display: flex; align-items: center; gap: 9px;
  padding: 12px 15px; border-radius: var(--r-md); background: var(--bg2);
  font-size: 13.5px; color: var(--ink3);
}
.bl-co-steps li b { font-weight: 700; color: var(--ink3); }
.bl-co-steps li .n {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(13, 26, 45, .1); color: var(--ink2);
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.bl-co-steps li.done .n,
.bl-co-steps li.on .n { background: var(--brand); color: #fff; }
.bl-co-steps li.done b { color: var(--ink2); }
.bl-co-steps li.on { background: var(--brand-soft); }
.bl-co-steps li.on b { color: var(--brand-d); }

.bl-co-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px; align-items: start;
}
@media (max-width: 900px) { .bl-co-grid { grid-template-columns: 1fr; } }

.bl-co-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bl-co-table th {
  text-align: left; padding: 0 0 10px; font-size: 12.5px; font-weight: 600;
  color: var(--ink3); border-bottom: 1px solid var(--line);
}
.bl-co-table th.col { width: 84px; }
.bl-co-table td {
  padding: 16px 0; vertical-align: top; color: var(--ink2);
  border-bottom: 1px solid var(--line);
}
.bl-co-table td:first-child b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 5px; }
.bl-co-table td:first-child span { display: block; font-size: 12.5px; line-height: 1.75; color: var(--ink3); }
.bl-co-table td.sub { color: var(--ink); font-weight: 700; }

.bl-co-total {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 16px;
  padding: 18px 0 2px;
}
.bl-co-total span { font-size: 14px; color: var(--ink3); }
.bl-co-total b { font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: var(--brand-d); }
.bl-co-total b small { font-size: 17px; font-weight: 700; }

.bl-co-pay {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  border: 1.5px solid var(--brand); border-radius: var(--r-md); background: var(--brand-soft);
}
.bl-co-pay input { position: absolute; opacity: 0; pointer-events: none; }
.bl-co-pay .ic {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: #1677ff; color: #fff; font-size: 17px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.bl-co-pay .nm { flex: 1; min-width: 0; }
.bl-co-pay .nm b { display: block; font-size: 15px; color: var(--ink); }
.bl-co-pay .nm i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink3); margin-top: 2px; }
.bl-co-pay .ck {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}

.bl-co-amt {
  padding: 20px 0 18px; text-align: center;
  font-size: 40px; font-weight: 800; letter-spacing: -1px; color: var(--ink);
}
.bl-co-amt small { font-size: 22px; font-weight: 700; }

.bl-co-agree {
  display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px;
  font-size: 13px; line-height: 1.7; color: var(--ink2); cursor: pointer;
}
.bl-co-agree input { flex: none; margin-top: 3px; }
.bl-co-agree a { color: var(--brand); font-weight: 600; }

.bl-co-tip { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--ink3); }

.bl-co-tx { margin-top: 22px; }

/* 支付结果面板：从支付宝回跳后替换掉「支付方式」表单，把结果直接说清楚。
   三态共用一套结构，靠 .ok / .pending / .closed 换图标底色。 */
.bl-co-ok { text-align: center; padding: 4px 0 18px; }
.bl-co-ok .ic {
  display: block; width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 25px; font-weight: 700; line-height: 52px; text-align: center;
}
.bl-co-ok.pending .ic { background: #c8891a; }
.bl-co-ok.closed .ic { background: #b6554d; }
.bl-co-ok h3 { margin: 0 0 8px; font-size: 18.5px; font-weight: 800; letter-spacing: -.2px; color: var(--ink); }
.bl-co-ok p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--ink3); }
.bl-co-res-btn { display: block; width: 100%; text-align: center; margin-top: 18px; }
/* 订单号是 36 位无分隔符的长串，右栏只有 360px，不收紧会撑破卡片。
   flex 子项默认 min-width:auto，光有 word-break 不够，必须同时归零。 */
.bl-co-res-order { min-width: 0; word-break: break-all; }