/* ============================================================
   ZeroU 官网 方案B · style.css（国际化门户 · 明暗双主题）
   依赖 ../_shared/css/tokens.css
   ============================================================ */

/* ---- 明暗双主题（变量覆盖） ---- */
html[data-theme="light"] {
  --bg-page: #F4F6FA;
  --bg-card: #FFFFFF;
  --bg-input: #EDF1F6;
  --bg-raised: #E6EBF2;
  --bg-night: #EFF2F8;
  --primary-soft: #DBEAFE;
  --text-primary: #0B1220;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --divider: #CBD5E1;
  --divider-soft: #DDE4EE;
  --shadow-card: 0 2px 10px rgba(15, 23, 42, 0.08);
  --shadow-raised: 0 8px 24px rgba(15, 23, 42, 0.14);
  --chip-success-bg: #D1FAE5;
  --chip-warning-bg: #FEF3C7;
  --chip-danger-bg: #FEE2E2;
}
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.85); }
html[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59, 130, 246, 0.15), transparent 60%),
    linear-gradient(160deg, #FFFFFF 0%, var(--bg-page) 55%);
}
html[data-theme="light"] .theme-toggle-btn { color: var(--text-primary); }

/* ---- 主题切换按钮 ---- */
.theme-toggle-btn {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--bg-raised); border: 1px solid var(--divider-soft);
  color: var(--text-primary); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.theme-toggle-btn:hover { border-color: var(--primary); }

/* ---- 面包屑 ---- */
.crumbs {
  max-width: var(--content-max); margin: 0 auto; padding: var(--space-4) var(--page-padding) 0;
  font-size: var(--fs-caption); color: var(--text-tertiary);
}
.crumbs a { color: var(--text-tertiary); }
.crumbs a:hover { color: var(--primary); }

/* ---- Hero（B 版：居中简洁） ---- */
.hero-b {
  padding: 88px 0 64px; text-align: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(59, 130, 246, 0.25), transparent 60%),
    linear-gradient(160deg, var(--bg-night) 0%, var(--bg-page) 60%);
}
.hero-b h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.2; }
.hero-b .sub { margin: var(--space-4) auto 0; max-width: 620px; color: var(--text-secondary); }
.hero-b .cta { margin-top: var(--space-6); display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* ---- 卡片网格 ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-7); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-top: var(--space-7); }
.tile { border-radius: var(--radius-lg); padding: var(--space-6); background: var(--bg-card); border: 1px solid var(--divider-soft); }
.tile .ico { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); font-size: 22px; margin-bottom: var(--space-4); }
.tile h3 { font-size: var(--fs-title); margin-bottom: var(--space-2); }
.tile p { color: var(--text-secondary); font-size: var(--fs-body-sm); }

/* ---- 数据亮点条 ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: 72px; }
.stat { text-align: center; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--divider-soft); }
.stat .v { font-size: 30px; font-weight: 800; color: var(--accent-cyan); }
.stat .l { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: 4px; }

/* ---- 0 手续费对比 ---- */
.fee-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-7); }
.fee-card { border-radius: var(--radius-xl); padding: var(--space-6); border: 1px solid var(--divider-soft); background: var(--bg-card); }
.fee-card .t { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: 800; font-size: var(--fs-title); }
.fee-card p { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--fs-body-sm); display: flex; gap: var(--space-2); align-items: flex-start; }
.fee-card p::before { content: "•"; color: var(--primary); }
.fee-card.zerou { border-color: rgba(56, 189, 248, 0.5); background: linear-gradient(160deg, #132A4A 0%, #101E38 100%); box-shadow: var(--shadow-hero); }
html[data-theme="light"] .fee-card.zerou { background: linear-gradient(160deg, #DBEAFE 0%, #EFF6FF 100%); border-color: var(--primary); }
.fee-card.zerou p::before { color: var(--accent-cyan); }

/* ---- 流程示意（安全页） ---- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-7); counter-reset: flow; }
.flow-step { text-align: center; position: relative; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--divider-soft); }
.flow-step .n { counter-increment: flow; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 auto var(--space-3); border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; }
.flow-step .n::before { content: counter(flow); }
.flow-step .t { font-weight: 700; font-size: var(--fs-body-sm); margin-bottom: 4px; }
.flow-step .d { font-size: var(--fs-caption); color: var(--text-tertiary); }

/* ---- FAQ（B 版手风琴） ---- */
.faq-list { margin-top: var(--space-7); max-width: 760px; margin-left: auto; margin-right: auto; }
.faq-item { border-bottom: 1px solid var(--divider-soft); }
.faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--text-primary); font-size: var(--fs-body); font-weight: 700; padding: var(--space-5) 0; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; }
.faq-q .arrow { color: var(--primary); transition: transform .2s ease; }
.faq-item.open .faq-q .arrow { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; color: var(--text-secondary); font-size: var(--fs-body-sm); }
.faq-item.open .faq-a { max-height: 240px; padding-bottom: var(--space-5); }

/* ---- 版本时间线 ---- */
.timeline { margin-top: var(--space-7); border-left: 2px solid var(--divider-soft); padding-left: var(--space-6); }
.tl-item { position: relative; padding-bottom: var(--space-6); }
.tl-item::before { content: ""; position: absolute; left: calc(-1 * var(--space-6) - 5px); top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.tl-item .t { font-weight: 700; }
.tl-item .d { font-size: var(--fs-body-sm); color: var(--text-secondary); margin-top: 4px; }

/* ---- 下载页 ---- */
.dl-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; margin-top: var(--space-6); }
.steps { counter-reset: step; }
.step { display: flex; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--divider-soft); }
.step:last-child { border-bottom: none; }
.step .num { counter-increment: step; }
.step .num::before { content: counter(step); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: var(--fs-body-sm); }
.step .t { font-weight: 700; margin-bottom: 4px; }
.step .d { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.sha-card { margin-top: var(--space-6); }
.sha-card .mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: var(--fs-caption); color: var(--text-tertiary); background: var(--bg-input); border: 1px dashed var(--divider); border-radius: var(--radius-sm); padding: var(--space-4); word-break: break-all; margin-top: var(--space-3); }
.qr { width: 168px; height: 168px; margin: 0 auto var(--space-3); border-radius: var(--radius-md); background: #FFFFFF; padding: 10px; display: flex; align-items: center; justify-content: center; }
.qr-placeholder { color: #0B1220; font-size: var(--fs-caption); font-weight: 700; text-align: center; }

/* ---- 首页 CTA 横幅 ---- */
.cta-banner {
  margin-top: var(--space-7); padding: var(--space-7); text-align: center;
  border-radius: var(--radius-xl); border: 1px solid rgba(59, 130, 246, 0.4);
  background: linear-gradient(150deg, #14264A 0%, #0E1B36 100%);
}
html[data-theme="light"] .cta-banner { background: linear-gradient(150deg, #DBEAFE 0%, #EFF6FF 100%); }
.cta-banner h2 { font-size: var(--fs-title-xl); margin-bottom: var(--space-2); }
.cta-banner p { color: var(--text-secondary); margin-bottom: var(--space-5); }

/* ---- 响应式 ---- */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .dl-page-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar-inner { height: 56px; }
  .nav { display: none; }
  .burger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--bg-raised); border: 1px solid var(--divider-soft); color: var(--text-primary); font-size: 18px; }
  .nav.open {
    display: flex; flex-direction: column; gap: var(--space-2);
    position: fixed; top: 56px; left: 0; right: 0; z-index: 99;
    background: var(--bg-card); border-bottom: 1px solid var(--divider-soft);
    padding: var(--space-4); box-shadow: var(--shadow-raised); overflow-y: auto; max-height: calc(100vh - 56px);
  }
  .nav.open a { padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-body); }
  .nav.open a:hover { background: var(--primary-soft); }
  .nav.open .theme-toggle-btn { margin-left: 0; }
  .grid-3, .grid-2, .fee-compare { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .stat .v { font-size: 24px; }
  .flow { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .crumbs { display: none; }
  .hero-b { padding: 64px 0 48px; }
}
@media (min-width: 641px) {
  .burger { display: none; }
}

/* 移动端常驻下载条 */
@media (max-width: 640px) {
  .dl-sticky {
    display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 98;
    padding: var(--space-3) var(--page-padding) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--bg-card); border-top: 1px solid var(--divider-soft);
  }
  body { padding-bottom: 84px; }
}
.dl-sticky { display: none; }