:root { color-scheme: light dark; --brand:#2b6cb0; --brand-soft:#ebf4ff; --brand-strong:#1e4e8c; --ink:#2d3748; --muted:#718096; --line:#e2e8f0; --card:#fff; --bg:#f7fafc; --code-bg:#edf2f7; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin:0; }
body { font-family:-apple-system,"Segoe UI","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); line-height:1.75; -webkit-font-smoothing:antialiased; }
a { color:var(--brand); }
a:focus-visible, button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
img { max-width:100%; height:auto; }

/* ===== Top bar (logo top-left) ===== */
.topbar { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1180px; margin:0 auto; padding:14px 22px; background:rgba(255,255,255,0.85); backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:12px; min-width:0; text-decoration:none; color:var(--ink); }
.brand-mark { width:34px; height:34px; flex:0 0 auto; display:block; }
.brand-text { display:flex; flex-direction:column; line-height:1.15; }
.brand-name { font-size:18px; font-weight:700; letter-spacing:0.2px; }
.brand-sub { font-size:11px; color:var(--muted); margin-top:3px; }
.topbar-cta { flex:0 0 auto; font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; background:var(--brand); color:#fff; text-decoration:none; transition:background .15s; }
.topbar-cta:hover { background:var(--brand-strong); }

/* ===== Layout grid (sidebar + content [+ toc]) ===== */
.layout { max-width:1180px; margin:0 auto; padding:0 22px; display:grid; grid-template-columns:210px minmax(0,1fr); gap:40px; min-height:calc(100vh - 140px); }
.layout.has-toc { grid-template-columns:210px minmax(0,1fr) 190px; gap:36px; }

/* ===== Sidebar ===== */
.sidebar { padding:32px 0; }
.sidebar-nav { position:sticky; top:78px; }
.sidebar-section { font-size:11px; font-weight:700; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:10px; padding-left:12px; }
.sidebar-nav ul { list-style:none; padding:0; margin:0; }
.sidebar-nav li a { display:flex; flex-direction:column; gap:2px; padding:9px 12px; border-radius:8px; color:var(--ink); text-decoration:none; transition:background .15s, color .15s; }
.sidebar-nav li a:hover { background:var(--brand-soft); }
.sidebar-nav li a.active { background:var(--brand-soft); color:var(--brand); font-weight:600; }
.sidebar-nav li a .zh { font-size:14px; }
.sidebar-nav li a .en { font-size:11px; color:var(--muted); }
.sidebar-nav li a.active .en { color:var(--brand); opacity:0.7; }

/* ===== Table of contents (right rail) ===== */
.toc { padding:32px 0; }
.toc-inner { position:sticky; top:78px; max-height:calc(100vh - 120px); overflow-y:auto; border-left:1px solid var(--line); padding-left:14px; }
.toc-title { font-size:11px; font-weight:700; letter-spacing:1px; color:var(--muted); text-transform:uppercase; margin-bottom:8px; }
.toc ul { list-style:none; padding:0; margin:0; }
.toc li { margin:0; }
.toc a { display:block; margin-left:-15px; padding:4px 0 4px 14px; border-left:2px solid transparent; font-size:12.5px; line-height:1.5; color:var(--muted); text-decoration:none; transition:color .15s, border-color .15s; }
.toc a:hover { color:var(--brand); }
.toc a.active { color:var(--brand); border-left-color:var(--brand); font-weight:600; }
.toc .toc-h3 a { padding-left:26px; font-size:12px; }

/* ===== Page content ===== */
.page { padding:36px 0 64px; min-width:0; max-width:800px; }
h1 { font-size:30px; line-height:1.3; margin:0 0 6px; }
h1 .en { display:block; font-size:16px; font-weight:500; color:var(--muted); margin-top:8px; }
h2 { font-size:22px; margin:48px 0 4px; padding-bottom:8px; border-bottom:2px solid var(--brand); color:var(--brand); scroll-margin-top:84px; }
h2 .en { display:block; font-size:14px; font-weight:500; color:var(--muted); margin-top:2px; }
h3 { font-size:17px; margin:28px 0 4px; color:var(--ink); scroll-margin-top:84px; }
.lead { font-size:16px; color:#4a5568; }
.zh { margin:12px 0 0; }
.en { margin:4px 0 0; color:var(--muted); font-size:14px; }
p { margin:10px 0; }
ul, ol { padding-left:22px; }
li { margin:4px 0; }
hr { border:none; border-top:1px solid var(--line); margin:32px 0; }

/* rich text */
code { background:var(--code-bg); padding:1px 6px; border-radius:4px; font-size:0.9em; font-family:Consolas,"Courier New",monospace; }
pre { background:var(--code-bg); border:1px solid var(--line); border-radius:10px; padding:14px 16px; overflow-x:auto; font-size:13px; line-height:1.6; }
pre code { background:none; padding:0; font-size:inherit; }
blockquote { margin:16px 0; padding:12px 16px; background:var(--brand-soft); border-left:3px solid var(--brand); border-radius:0 8px 8px 0; color:var(--muted); font-size:14px; }
blockquote p { margin:2px 0; }
table { width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; }
th, td { border:1px solid var(--line); padding:8px 12px; text-align:left; }
th { background:var(--brand-soft); font-weight:600; }
tbody tr:nth-child(even) { background:rgba(0,0,0,0.02); }

/* figures */
figure { margin:20px 0 8px; }
figure img, figure svg { width:100%; height:auto; border:1px solid var(--line); border-radius:14px; background:#fff; display:block; }
figcaption { font-size:13px; color:var(--muted); margin-top:8px; text-align:center; }

/* ===== Tips list ===== */
.tips { list-style:none; padding:0; margin:14px 0 0; counter-reset: tip; }
.tips li { position:relative; padding:12px 14px 12px 48px; margin:10px 0; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.tips li::before { counter-increment: tip; content:counter(tip); position:absolute; left:12px; top:12px; width:24px; height:24px; border-radius:50%; background:var(--brand); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.tips li b { display:block; margin-bottom:4px; color:var(--brand); }
.tips li .zh { margin-top:6px; }
.tips li .en { margin-top:2px; }
.tips li img.tip-gif { float:right; width:200px; max-width:42%; margin:2px 0 8px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; }
@media (prefers-color-scheme: dark){ .tips li img.tip-gif { border-color:#333; } }

/* ===== Footer ===== */
.site-footer { max-width:1180px; margin:48px auto 0; padding:18px 22px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; text-align:center; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { color:var(--brand); }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .layout.has-toc { grid-template-columns:210px minmax(0,1fr); }
  .toc { display:none; }
}
@media (max-width: 820px) {
  .layout, .layout.has-toc { grid-template-columns:1fr; padding:0 16px; gap:8px; }
  .sidebar { padding:16px 0 0; }
  .sidebar-nav { position:static; }
  .sidebar-section { display:none; }
  .sidebar-nav ul { display:flex; gap:8px; flex-wrap:wrap; }
  .sidebar-nav li a { padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); }
  .sidebar-nav li a.active { border-color:var(--brand); }
  .sidebar-nav li a .en { display:none; }
  
  .topbar { padding:10px 16px; }
  .brand-sub { display:none; }
  .page { padding:20px 0 48px; max-width:none; }
  h1 { font-size:24px; }
  h2 { font-size:18px; margin:36px 0 4px; }
  .tips li img.tip-gif { float:none; width:100%; max-width:100%; margin:0 0 8px; }
}

/* ===== Dark ===== */
@media (prefers-color-scheme: dark) {
  :root { --ink:#e8e8e8; --muted:#aaa; --line:#333; --card:#1a1a1a; --bg:#111; --brand-soft:#1c2a3f; --code-bg:#1a202c; }
  .topbar { background:rgba(17,17,17,0.85); }
  figure img, figure svg { background:#1a1a1a; }
  .lead, .tips li { color:var(--ink); }
  .sidebar-nav li a.active { color:#fff; }
  .sidebar-nav li a.active .en { color:#cbd5e0; opacity:0.8; }
  .toc a.active { color:#fff; }
  tbody tr:nth-child(even) { background:rgba(255,255,255,0.03); }
}

/* ===== Print (隐私政策常被打印/存 PDF) ===== */
@media print {
  .topbar, .sidebar, .toc, .site-footer { display:none !important; }
  .layout, .layout.has-toc { display:block; max-width:none; padding:0; }
  .page { max-width:none; padding:0; }
  h2 { border-bottom-color:#999; color:#000; }
  a { color:#000; text-decoration:underline; }
  figure img, figure svg { border:none; }
}

/* ===== Wide landing layout (buy page) ===== */
body.wide-page .topbar,
body.wide-page .site-footer { max-width:1200px; }
.layout.is-wide { max-width:1200px; }
.layout.is-wide .page { max-width:none; }

/* ===== Buy page: pricing cards ===== */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:22px 0 10px; }
.pricing-card { position:relative; padding:26px 18px 22px; border:1px solid var(--line); border-radius:16px; background:var(--card); display:flex; flex-direction:column; text-align:center; transition:transform .18s, box-shadow .18s, border-color .18s; }
.pricing-card:hover,
.pricing-card:focus-within { transform:translateY(-3px); border-color:var(--brand); box-shadow:0 6px 26px rgba(43,108,176,0.14); }
.pricing-card h3 { margin:0 0 6px; font-size:18px; color:var(--ink); font-weight:700; }
.pricing-card .period { margin:0 0 20px; font-size:14px; color:var(--muted); }
.pricing-card .price { margin:0 0 20px; padding-top:16px; border-top:1px dashed var(--line); }
.pricing-card .price-tag { display:block; min-height:18px; font-size:12px; font-weight:700; color:var(--brand); }
.pricing-card .price-tag s { color:var(--muted); font-weight:600; }
.pricing-card .price-num { display:block; margin-top:4px; font-size:14px; color:var(--muted); }
.pricing-card .price-num b { font-size:38px; font-weight:800; color:var(--brand); letter-spacing:-1px; }
.pricing-card .price-num .dec { font-size:20px; font-weight:800; color:var(--brand); letter-spacing:0; }
.pricing-card .price-note { display:block; min-height:36px; margin-top:4px; font-size:12px; color:var(--muted); line-height:1.6; }
.pricing-card .price-note-en { display:block; font-size:11px; line-height:1.5; opacity:.8; }
.pricing-card .features { list-style:none; padding:0; margin:0 0 22px; font-size:14px; color:var(--ink); text-align:left; flex:1; }
.pricing-card .features li { display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-bottom:1px dashed var(--line); line-height:1.5; }
.pricing-card .features li:last-child { border-bottom:none; }
.pricing-card .features li::before { content:"✓"; flex:0 0 14px; color:#7c5cff; font-weight:700; font-size:14px; }
.pricing-card .btn { display:block; padding:12px 26px; border-radius:8px; background:#fff; color:var(--ink); font-size:15px; font-weight:700; border:1px solid var(--line); margin-top:auto; text-decoration:none; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.pricing-card:hover .btn,
.pricing-card:focus-within .btn { background:var(--brand); color:#fff; border-color:var(--brand); }
.pricing-card .btn:hover { background:var(--brand-strong); border-color:var(--brand-strong); }
.pricing-card .btn-current { display:block; padding:12px 22px; border-radius:8px; background:var(--bg); color:var(--muted); font-size:14px; font-weight:600; border:1px dashed var(--line); margin-top:auto; }
.cta-note { margin:4px 0 0; text-align:center; font-size:13px; color:var(--muted); letter-spacing:.5px; }

/* 侧栏占位后三列卡片会挤到 ~200px，"官方基准价"行会折行，故在此宽度下改为单列 */
@media (max-width:1100px){
  .pricing-grid { grid-template-columns:1fr; gap:14px; max-width:420px; margin:22px 0 10px; }
  .cta-note { text-align:left; }
}

/* ===== FAQ cards (activate page) ===== */
.faq { list-style:none; padding:0; margin:14px 0 0; }
.faq > li { padding:18px 22px; margin:12px 0; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.faq > li b { display:block; margin-bottom:6px; color:var(--brand); font-size:15px; }
.faq > li p { margin:6px 0 0; font-size:14px; color:var(--ink); }
.kbd { display:inline-block; padding:1px 8px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--ink); font-size:12px; font-family:Consolas,Menlo,monospace; }

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .pricing-card .btn { background:#1a1a1a; color:var(--ink); border-color:var(--line); }
  .pricing-card:hover .btn,
  .pricing-card:focus-within .btn { background:var(--brand); color:#fff; border-color:var(--brand); }
  .pricing-card .price-tag,
  .pricing-card .price-num b,
  .pricing-card .price-num .dec { color:#7fb3e8; }
  .pricing-card .price,
  .pricing-card .features li { border-color:#333; }
  .cta-note { color:var(--ink); }
  .faq > li { background:#1a1a1a; }
}