/* StmtPdf — design system v4「Tech Console」
   深色科技风，加载在 site.css / v3.css 之后，整体覆写配色与卡片质感。
   对应 Pixso 效果图：首页 / 购买与激活 / 后台仪表盘。 */

:root {
  --primary: #22D3EE;
  --dark: #070B16;
  --bg: #070B16;
  --border: rgba(255, 255, 255, .10);
  --text: #E6EAF3;
  --muted: #9AA7BD;
  --faint: #64748B;
  --soft: rgba(255, 255, 255, .04);
  --success: #34D399;

  --v4-surface: rgba(255, 255, 255, .035);
  --v4-surface-2: rgba(255, 255, 255, .06);
  --v4-line: rgba(255, 255, 255, .09);
  --v4-line-soft: rgba(255, 255, 255, .06);
  --v4-grad: linear-gradient(135deg, #22D3EE, #7C5CFF);
  --v4-violet: #7C5CFF;
  --v4-cyan-soft: rgba(34, 211, 238, .10);
  --v4-mono: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;

  --v3-navy: #0A0F1C;
  --v3-teal: #22D3EE;
  --v3-teal-dark: #6EE7F9;
  --v3-teal-soft: rgba(34, 211, 238, .10);
  --v3-teal-border: rgba(34, 211, 238, .32);
  --v3-amber: #F59E0B;
  --v3-amber-soft: rgba(245, 158, 11, .10);
  --v3-amber-border: rgba(245, 158, 11, .30);
  --v3-line: var(--v4-line);
  --v3-line-soft: var(--v4-line-soft);
  --v3-text: var(--text);
  --v3-body: var(--muted);
  --v3-muted: var(--faint);
  --v3-faint: #5B6A83;
}

body {
  background:
    radial-gradient(900px 520px at 10% -8%, rgba(34, 211, 238, .16), transparent 70%),
    radial-gradient(820px 480px at 96% 0%, rgba(124, 92, 255, .18), transparent 70%),
    #070B16;
  background-attachment: fixed;
  color: var(--text);
}

/* ------------------------------------------------------------------ header */
.site-header {
  background: rgba(7, 11, 22, .82);
  border-bottom: 1px solid var(--v4-line);
  backdrop-filter: blur(14px);
}
.site-header .wrap { display: flex; align-items: center; }
.logo img { filter: brightness(0) invert(1); opacity: .96; }
.nav { color: var(--muted); }
.nav a { position: relative; }
.nav a:hover { color: #fff; }
.nav a.active { color: #fff; font-weight: 600; }
.nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -27px; height: 2px;
  background: var(--v4-grad);
}
.lang summary { color: var(--muted); border-color: var(--v4-line); background: rgba(255, 255, 255, .03); }
.lang summary:hover { border-color: rgba(34, 211, 238, .45); color: #fff; }
.lang-menu {
  background: #0C1322; border: 1px solid var(--v4-line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.lang-menu a:hover { background: rgba(255, 255, 255, .06); }

/* ----------------------------------------------------------------- buttons */
.btn {
  border-radius: 10px; font-weight: 600; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary {
  background: var(--v4-grad); color: #05101D;
  box-shadow: 0 10px 26px rgba(34, 211, 238, .22);
}
.btn-primary:hover { background: var(--v4-grad); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(124, 92, 255, .30); }
.btn-secondary {
  background: rgba(255, 255, 255, .04); border-color: var(--v4-line); color: #DCE4F2;
}
.btn-secondary:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }

/* -------------------------------------------------------------------- hero */
.hero {
  background:
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 56px 56px;
  border-bottom: 1px solid var(--v4-line);
}
.eyebrow {
  background: rgba(34, 211, 238, .08); border: 1px solid rgba(34, 211, 238, .32);
  color: #6EE7F9; font-family: var(--v4-mono); font-size: 11px; letter-spacing: 1.2px;
}
h1 { color: #F4F7FD; font-weight: 800; letter-spacing: -1.8px; }
h1 .accent {
  background: linear-gradient(100deg, #22D3EE, #7C5CFF 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { color: var(--muted); }
.tiny { color: var(--faint); }
.tiny a { color: #6EE7F9; }
.trust { border-top-color: var(--v4-line-soft); }
.trust span { color: var(--muted); }
.tick { background: rgba(52, 211, 153, .14); color: #34D399; }

/* hero 面板 */
.hero-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  border: 1px solid var(--v4-line); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.hc { background: rgba(9, 14, 26, .72); border-color: var(--v4-line); }
.hc-ico { background: rgba(244, 63, 94, .14); color: #FB7185; border: 1px solid rgba(244, 63, 94, .30); }
.hc-ico.ok { background: rgba(52, 211, 153, .14); color: #34D399; border-color: rgba(52, 211, 153, .30); }
.hc-name { color: #E6EAF3; font-family: var(--v4-mono); }
.hc-meta, .hc-link { color: var(--faint); }
.hc-state { color: #34D399; font-family: var(--v4-mono); }
.quota-bar { background: rgba(255, 255, 255, .08); }
.quota-bar i { background: var(--v4-grad); }
.quota-foot { color: var(--faint); font-family: var(--v4-mono); }
.privacy-chip {
  background: rgba(34, 211, 238, .06); border: 1px dashed rgba(34, 211, 238, .32); color: #8FA0BA;
}

/* 银行条 */
.banks { border-top-color: var(--v4-line); }
.banks p { color: #5B6A83; }
.bank-row span { color: #6F7E96; font-family: var(--v4-mono); font-size: 12px; letter-spacing: .6px; }

/* ---------------------------------------------------------------- sections */
.section { position: relative; }
.section.alt { background: rgba(255, 255, 255, .018); border-top: 1px solid var(--v4-line-soft); border-bottom: 1px solid var(--v4-line-soft); }
.kicker { color: #22D3EE; font-family: var(--v4-mono); letter-spacing: 2px; font-size: 11.5px; }
h2 { color: #F4F7FD; letter-spacing: -1.1px; }
.section-sub { color: var(--muted); }

.step, .feature, .plan, .faq details, .bank-card, .works-item, .howto-row,
.dl-card, .pack, .early-step, .notify, .early-it, .serp {
  background: var(--v4-surface);
  border-color: var(--v4-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.step h3, .feature h3, .dl-card h2, .plan h3 { color: #EAF0FA; }
.step p, .feature p, .plan li, .plan ul, .bullet-list li, .howto-text { color: var(--muted); }
.step .num, .howto-num, .early-step .n {
  background: var(--v4-cyan-soft); color: #6EE7F9; border: 1px solid rgba(34, 211, 238, .28);
}
.feature .icon {
  background: linear-gradient(135deg, rgba(34, 211, 238, .22), rgba(124, 92, 255, .22));
  color: #7FE9FA; border: 1px solid rgba(34, 211, 238, .25);
}
.step-visual { background: rgba(255, 255, 255, .02); border-color: var(--v4-line-soft); color: #4A5A72; }

/* 对比表 */
.compare-table { background: var(--v4-surface); border-color: var(--v4-line); }
.compare-row { border-top-color: var(--v4-line-soft); color: var(--muted); }
.compare-row.head { background: rgba(255, 255, 255, .03); color: #6B7A91; }
.compare-row .cap { color: #C7D2E4; }
.compare-row .v.yes { color: #34D399; }
.compare-row .v.no { color: #5B6A83; }

/* 价格卡 */
.plan.popular {
  border: 1px solid rgba(124, 92, 255, .55);
  box-shadow: 0 0 0 1px rgba(124, 92, 255, .18), 0 24px 60px rgba(124, 92, 255, .16);
}
.plan-tag {
  background: var(--v4-grad); color: #05101D; font-weight: 800;
  letter-spacing: .4px; border-radius: 999px;
}
.plan h3 { color: #8B9AB2; }
.plan .desc, .plan .price small, .plan .pages, .plan .price-year { color: var(--faint); }
.plan .price { color: #F4F7FD; }
.plan .pages { color: #6EE7F9; font-family: var(--v4-mono); font-size: 12px; }
.plan ul { border-top-color: var(--v4-line-soft); }
.plan li i { background: rgba(52, 211, 153, .14); color: #34D399; }
.plan .cta { background: rgba(255, 255, 255, .05); border: 1px solid var(--v4-line); color: #DCE4F2; }
.plan .cta.cta-primary { background: var(--v4-grad); border: 0; color: #05101D; font-weight: 700; }

/* 价格页分组标题 */
.plan-group-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; }
.plan-group-title { font-size: 24px; letter-spacing: -.6px; margin: 0; }
.plan-group-note { font-size: 12.5px; color: var(--faint); }
.plan-group-badge {
  font-family: var(--v4-mono); font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .3); color: #34D399;
}

/* 计费切换 */
.billing-toggle { background: rgba(255, 255, 255, .04); border-color: var(--v4-line); border-radius: 999px; padding: 4px; }
.billing-toggle a { color: var(--muted); border-radius: 999px; }
.billing-toggle a.on { background: var(--v4-grad); color: #05101D; }
.billing-toggle .save { background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .3); color: #34D399; }

/* 页数包 */
.packs { background: var(--v4-surface); border-color: var(--v4-line); }
.pack .n { color: #EAF0FA; }
.pack .d, .pack .p { color: var(--faint); }
.pack .p { color: #6EE7F9; }

/* FAQ */
.faq { border-top-color: var(--v4-line); }
.faq details { border-radius: 12px; margin-bottom: 0; }
.faq summary { color: #EAF0FA; }
.faq summary::after { color: #5B6A83; }
.faq p { color: var(--muted); }

/* 大横幅 */
.band {
  background:
    radial-gradient(600px 260px at 12% 0%, rgba(34, 211, 238, .18), transparent 70%),
    linear-gradient(120deg, rgba(34, 211, 238, .10), rgba(124, 92, 255, .16));
  border: 1px solid var(--v4-line); border-radius: 18px;
}
.band h2 { color: #F4F7FD; }
.band p { color: #A9B4C8; }
.band .right span { color: #64748B; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: rgba(255, 255, 255, .018); border-top: 1px solid var(--v4-line); }
.footer-col h4 { color: #5B6A83; font-family: var(--v4-mono); letter-spacing: 1px; }
.footer-col a { color: var(--muted); }
.footer-col a:hover { color: #6EE7F9; }
.footer-brand p { color: var(--faint); }
.footer-bottom { border-top-color: var(--v4-line); color: #5B6A83; }

/* --------------------------------------------------------------- page head */
.page-head {
  background:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 56px 56px;
  border-bottom: 1px solid var(--v4-line);
}
.page-head h1 { color: #F4F7FD; }
.page-head .lede { color: var(--muted); }
.sub-title { color: #EAF0FA; }

/* 表单 / 激活 */
.notice { border-radius: 10px; }
.notice-ok { background: rgba(52, 211, 153, .10); border-color: rgba(52, 211, 153, .30); color: #6EE7B7; }
.notice-err { background: rgba(251, 113, 133, .10); border-color: rgba(251, 113, 133, .30); color: #FDA4AF; }
.form-row input, .notify form input {
  background: rgba(6, 10, 20, .75); border: 1px solid var(--v4-line); color: var(--text); border-radius: 10px;
}
.form-row input:focus, .notify form input:focus { border-color: rgba(34, 211, 238, .6); box-shadow: 0 0 0 3px rgba(34, 211, 238, .12); }
.checksum { background: rgba(255, 255, 255, .03); border-color: var(--v4-line); color: var(--muted); }

.activate-card, .works-item, .howto-row {
  background: var(--v4-surface); border-color: var(--v4-line);
}
.field-label { color: #93A2B8; font-family: var(--v4-mono); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.text-input, .code-box {
  background: rgba(6, 10, 20, .75); border: 1px solid rgba(255, 255, 255, .12); color: #E6EAF3;
}
.text-input:focus, .code-box:focus { border-color: rgba(34, 211, 238, .65); box-shadow: 0 0 0 3px rgba(34, 211, 238, .12); }
.text-input::placeholder { color: #4B5A72; }
input[type="file"].text-input { padding: 9px 10px; color: var(--muted); font-size: 12.5px; }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .10);
  color: #6EE7F9; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.tabs { border-bottom-color: var(--v4-line); }
.tabs a { color: var(--muted); }
.tabs a.on { color: #6EE7F9; border-bottom-color: #22D3EE; }
.result-box { background: rgba(52, 211, 153, .07); border-color: rgba(52, 211, 153, .32); }
.result-box h3 { color: #EAF0FA; }
.result-meta { color: var(--muted); }
.privacy-line { color: #6EE7F9; }

/* 银行页 / 其它卡片 */
.bank-card { border-radius: 12px; }
.bank-name { color: #EAF0FA; }
.bank-type { color: var(--faint); }
.pill { background: rgba(255, 255, 255, .06); color: #93A2B8; }
.pill-on { background: rgba(52, 211, 153, .12); color: #6EE7B7; }
.works-item span { background: var(--v4-cyan-soft); color: #6EE7F9; }
.works-item p { color: var(--muted); }

/* 下载页 */
.dl-card .dl-tile { background: var(--v4-grad); color: #05101D; }
.dl-card .dl-btn { background: var(--v4-grad); color: #05101D; border-radius: 10px; }
.dl-card .dl-meta, .dl-card .sha { color: var(--faint); }
.is-disabled, .btn.is-disabled, .dl-card .dl-btn.is-disabled {
  background: rgba(255, 255, 255, .08) !important; border-color: var(--v4-line) !important; color: #64748B !important;
}
.early-card {
  background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .28); border-radius: 14px;
}
.early-card h3 { color: #FCD34D; }
.early-card p { color: #C7A97A; }
.early-step { background: rgba(255, 255, 255, .035); border-color: rgba(245, 158, 11, .22); }
.early-step .n { background: rgba(245, 158, 11, .18); color: #FCD34D; border-color: transparent; }
.early-step span { color: var(--muted); }
.early-step strong { color: #EAF0FA; }
.early-it { color: var(--muted); }
.notify { background: var(--v4-surface); }
.notify b { color: #EAF0FA; }
.notify p { color: var(--faint); }
.changelog-entry { border-top-color: var(--v4-line-soft); color: var(--muted); }
.changelog-entry .ver { color: #6EE7F9; font-family: var(--v4-mono); }

@media (max-width: 1100px) {
  .nav { display: none; }
}

/* 头部按钮：桌面隐藏首页按钮，手机隐藏下载按钮（保留原有移动端紧凑布局） */
.home-btn { display: none; }
@media (max-width: 820px) {
  .home-btn { display: inline-flex; }
  .dl2-btn { display: none; }
}