:root {
      --primary: #4f46e5;
      --primary-light: #eef2ff;
      --primary-hover: #4338ca;
      --bg: #f5f6fa;
      --border: #e4e7ed;
      --text: #1a1a2e;
      --text2: #6b7280;
      --text3: #9ca3af;
      --danger: #ef4444;
      --success: #16a34a;
      --radius: 14px;
      --radius-sm: 8px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    a { color: var(--primary); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .page { max-width: 860px; margin: 0 auto; padding: 24px 20px 80px; }

    /* 顶部标题 */
    .hero {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
      color: #fff;
      border-radius: var(--radius);
      padding: 36px 32px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }
    .hero .logo {
      width: 56px; height: 56px; border-radius: 14px;
      background: rgba(255,255,255,.18);
      display: flex; align-items: center; justify-content: center;
      font-size: 28px; margin-bottom: 16px;
    }
    .hero h1 { font-size: 26px; font-weight: 700; letter-spacing: .5px; }
    .hero p { margin-top: 8px; font-size: 15px; opacity: .92; }

    /* 工具栏 */
    .toolbar {
      display: flex; gap: 12px; flex-wrap: wrap;
      margin-bottom: 24px;
    }
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 11px 18px; border-radius: var(--radius-sm);
      font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
      transition: all .15s;
    }
    .btn-primary { background: var(--primary); color: #fff; }
    .btn-primary:hover { background: var(--primary-hover); text-decoration: none; }
    .btn-outline { background: #fff; border-color: var(--border); color: var(--text); }
    .btn-outline:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

    /* 目录 */
    .toc {
      background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
      padding: 20px 24px; margin-bottom: 28px;
    }
    .toc h3 { font-size: 14px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
    .toc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 20px; }
    .toc a { font-size: 14px; padding: 4px 0; display: block; }

    /* 卡片区块 */
    .card {
      background: #fff; border: 1px solid var(--border);
      border-radius: var(--radius); padding: 28px 30px; margin-bottom: 24px;
      scroll-margin-top: 20px;
    }
    .card h2 {
      font-size: 20px; font-weight: 700; margin-bottom: 6px;
      display: flex; align-items: center; gap: 10px;
    }
    .card h2 .badge {
      font-size: 12px; font-weight: 600; background: var(--primary-light); color: var(--primary);
      padding: 3px 10px; border-radius: 20px;
    }
    .card .lead { color: var(--text2); font-size: 14px; margin-bottom: 18px; }
    .card h3.sub { font-size: 15px; font-weight: 600; margin: 20px 0 10px; color: var(--text); }

    /* 步骤 */
    .steps { list-style: none; counter-reset: step; }
    .step {
      position: relative; padding: 12px 12px 12px 50px;
      border-left: 2px solid var(--border); margin-bottom: 4px;
    }
    .step:last-child { border-left-color: transparent; }
    .step::before {
      counter-increment: step; content: counter(step);
      position: absolute; left: -13px; top: 10px;
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--primary); color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700;
    }
    .step strong { color: var(--text); }
    .step code, code {
      background: var(--primary-light); color: var(--primary-hover);
      padding: 2px 7px; border-radius: 5px; font-size: 13px;
      font-family: "SFMono-Regular", Consolas, monospace;
    }

    .tip {
      background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
      padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px;
      margin-top: 16px; display: flex; gap: 10px;
    }
    .tip.info { background: var(--primary-light); border-color: #c7d2fe; color: var(--primary-hover); }
    .tip .ico { font-size: 16px; flex-shrink: 0; }

    /* 表格 */
    table.guide { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
    table.guide th, table.guide td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
    table.guide th { background: var(--bg); color: var(--text2); font-weight: 600; font-size: 13px; }
    table.guide tr:hover td { background: #fafafe; }

    ol.ol-guide { padding-left: 22px; }
    ol.ol-guide li { margin-bottom: 8px; }

    /* FAQ */
    .faq-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
    .faq-item:last-child { border-bottom: none; }
    .faq-q { font-weight: 600; font-size: 15px; margin-bottom: 6px; display: flex; gap: 8px; }
    .faq-q .q { color: var(--primary); font-weight: 700; }
    .faq-a { color: var(--text2); font-size: 14px; padding-left: 24px; }

    footer.foot {
      text-align: center; color: var(--text3); font-size: 13px; margin-top: 40px;
      padding-top: 20px; border-top: 1px solid var(--border);
    }

    @media (max-width: 600px) {
      .hero { padding: 28px 22px; }
      .card { padding: 22px 18px; }
      .hero h1 { font-size: 22px; }
    }
    @media print {
      body { background: #fff; }
      .toolbar { display: none; }
      .hero { background: var(--primary) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .card { break-inside: avoid; box-shadow: none; }
    }