:root {
    --c-brand: #1e80ff;
    --c-brand-light: #4d9eff;
    --c-text: #2c3e50;
    --c-text-light: #5a6d7e;
    --c-bg: #ffffff;
    --c-bg-soft: #f6f8fa;
    --c-bg-mute: #f0f2f5;
    --c-border: #e2e5e9;
    --c-divider: #eaecef;
    --c-success: #52c41a;
    --c-warning: #fa8c16;
    --c-danger: #ff4d4f;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
    --radius: 8px;
    --radius-lg: 12px;
    --max-w: 1000px;
    --font-mono: 'SF Mono','Fira Code','Fira Mono',Menlo,Consolas,monospace;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','PingFang SC','Microsoft YaHei',sans-serif;
    color: var(--c-text); background: var(--c-bg); line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  a { color: var(--c-brand); text-decoration:none; }
  a:hover { color: var(--c-brand-light); }

  /* Nav */
  .nav {
    position: sticky; top:0; z-index:100;
    background: rgba(255,255,255,.88); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-divider); padding: 0 24px;
  }
  .nav-inner { max-width: var(--max-w); margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:56px; }
  .nav-logo { font-size:18px; font-weight:700; color:var(--c-text); display:flex; align-items:center; gap:8px; }
  .nav-logo .icon { width:28px; height:28px; background:var(--c-brand); border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; }
  .nav-links { display:flex; gap:20px; list-style:none; font-size:14px; }
  .nav-links a { color: var(--c-text-light); transition:color .2s; }
  .nav-links a:hover { color: var(--c-brand); }
  .nav-links .btn-dl { background:var(--c-brand); color:#fff; padding:6px 16px; border-radius:20px; font-weight:500; }
  .nav-links .btn-dl:hover { background:var(--c-brand-light); color:#fff; }

  /* 汉堡菜单按钮 */
  .nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; z-index:101; }
  .nav-toggle span { display:block; width:24px; height:2.5px; background:var(--c-text); border-radius:2px; transition:all .3s ease; }
  .nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .nav-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
  .nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

  /* Hero */
  .hero { padding:80px 24px 60px; text-align:center; background:linear-gradient(135deg, #f0f5ff 0%, #e8f0fe 50%, #f5f3ff 100%); }
  .hero-badge { display:inline-block; padding:4px 14px; border-radius:20px; background:var(--c-brand); color:#fff; font-size:13px; font-weight:600; margin-bottom:20px; letter-spacing:.5px; }
  .hero h1 { font-size:42px; font-weight:800; letter-spacing:-1px; margin-bottom:12px; color:#1a1a2e; }
  .hero h1 span { color:var(--c-brand); }
  .hero .subtitle { font-size:18px; color:var(--c-text-light); max-width:640px; margin:0 auto 32px; }
  .hero-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .btn { display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:24px; font-size:15px; font-weight:600; border:none; cursor:pointer; transition:all .25s; }
  .btn-primary { background:var(--c-brand); color:#fff; box-shadow:0 2px 12px rgba(30,128,255,.3); }
  .btn-primary:hover { background:var(--c-brand-light); transform:translateY(-1px); box-shadow:0 4px 18px rgba(30,128,255,.4); }
  .btn-outline { background:#fff; color:var(--c-brand); border:2px solid var(--c-brand); }
  .btn-outline:hover { background:var(--c-brand); color:#fff; }
  .btn-demo { background:linear-gradient(135deg, #52c41a, #73d13d); color:#fff; box-shadow:0 2px 12px rgba(82,196,26,.3); }
  .btn-demo:hover { background:linear-gradient(135deg, #73d13d, #95de64); color:#fff; transform:translateY(-1px); box-shadow:0 4px 18px rgba(82,196,26,.4); }

  .ver-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; background:#fff; border:1px solid var(--c-border); border-radius:20px; font-size:13px; font-weight:600; }
  .ver-dot { width:8px; height:8px; background:var(--c-success); border-radius:50%; }

  /* Section */
  .section { padding:64px 24px; }
  .section-alt { background:var(--c-bg-soft); }
  .section-inner { max-width:var(--max-w); margin:0 auto; }
  .section-tag { display:inline-block; padding:3px 12px; border-radius:12px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; }
  .tag-original { background:#e6f7ff; color:#1890ff; }
  .tag-fix { background:#fff2f0; color:#ff4d4f; }
  .tag-feature { background:#f6ffed; color:#52c41a; }
  .tag-dl { background:#fff7e6; color:#fa8c16; }
  .section h2 { font-size:30px; font-weight:700; margin-bottom:8px; }
  .section .desc { color:var(--c-text-light); font-size:15px; margin-bottom:36px; }

  /* Feature Grid */
  .feature-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap:16px; }
  .feature-card { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); padding:20px; transition:all .25s; }
  .feature-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
  .feature-card .num { font-size:11px; font-weight:700; color:var(--c-brand); opacity:.5; margin-bottom:6px; }
  .feature-card h4 { font-size:15px; margin-bottom:4px; }

  /* Mod list for fixes */
  .fix-group { margin-bottom:32px; }
  .fix-group h3 { font-size:20px; margin-bottom:12px; color:#1a1a2e; display:flex; align-items:center; gap:8px; }
  .fix-group h3 .icon-fix { width:24px; height:24px; background:#fff2f0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:#ff4d4f; }
  .fix-group p { color:var(--c-text-light); font-size:14px; margin-bottom:12px; }
  .fix-table { width:100%; border-collapse:collapse; font-size:14px; }
  .fix-table th { text-align:left; padding:10px 14px; background:var(--c-bg-mute); font-weight:600; font-size:13px; color:var(--c-text-light); }
  .fix-table td { padding:10px 14px; border-bottom:1px solid var(--c-divider); vertical-align:top; }
  .fix-table tr:hover td { background:#fafafa; }
  .fix-table .file { font-family:var(--font-mono); font-size:12px; color:var(--c-brand); }
  .fix-table .tag-cell { white-space:nowrap; }
  .badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
  .badge-fix { background:#fff2f0; color:#ff4d4f; }
  .badge-new { background:#f6ffed; color:#52c41a; }

  .code-inline { font-family:var(--font-mono); font-size:12px; background:#f0f2f5; padding:2px 6px; border-radius:3px; color:#d4380d; }

  /* Feature cards large */
  .feature-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
  .feat-item { background:#fff; border:1px solid var(--c-border); border-radius:var(--radius); padding:20px; border-left:4px solid var(--c-success); transition:all .25s; }
  .feat-item:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
  .feat-item h4 { font-size:16px; margin-bottom:6px; color:#1a1a2e; }
  .feat-item p { font-size:13px; color:var(--c-text-light); }

  /* Download */
  .download-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
  .dl-card { background:#fff; border:2px solid var(--c-border); border-radius:var(--radius-lg); padding:28px; text-align:center; transition:all .25s; }
  .dl-card:hover { border-color:var(--c-brand); box-shadow:var(--shadow-md); }
  .dl-card .dl-icon { font-size:40px; margin-bottom:12px; }
  .dl-card .dl-icon svg { width:28px !important; height:28px !important; max-width:28px; max-height:28px; display:block; margin:0 auto; }
  .dl-card h4 { font-size:17px; margin-bottom:4px; }
  .dl-card .dl-hint { font-size:13px; color:var(--c-text-light); margin-bottom:16px; }
  .dl-card .btn { width:100%; justify-content:center; }

  /* Steps */
  .steps { counter-reset:step; list-style:none; }
  .steps li { counter-increment:step; position:relative; padding-left:44px; margin-bottom:24px; }
  .steps li::before { content:counter(step); position:absolute; left:0; top:0; width:28px; height:28px; background:var(--c-brand); color:#fff; font-size:14px; font-weight:700; border-radius:50%; display:flex; align-items:center; justify-content:center; }
  .steps li h4 { font-size:16px; margin-bottom:4px; }
  .steps li p { font-size:14px; color:var(--c-text-light); }

  /* Stats row */
  .stats-row { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-bottom:36px; }
  .stat-item { text-align:center; min-width:100px; }
  .stat-item .stat-num { font-size:36px; font-weight:800; color:var(--c-brand); }
  .stat-item .stat-label { font-size:13px; color:var(--c-text-light); margin-top:4px; }

  /* Notice */
  .notice { background:#fffbe6; border:1px solid #ffe58f; border-radius:var(--radius); padding:16px 20px; margin-top:32px; font-size:14px; }
  .notice strong { color:#d48806; }

  /* Footer */
  .footer { border-top:1px solid var(--c-divider); padding:32px 24px; text-align:center; font-size:13px; color:var(--c-text-light); }
  .footer a { color:var(--c-brand); }

  /* Tabs */
  .tab-nav { display:flex; gap:0; margin-bottom:24px; border-bottom:2px solid var(--c-divider); }
  .tab-btn { padding:10px 24px; font-size:15px; font-weight:600; border:none; background:none; color:var(--c-text-light); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .2s; }
  .tab-btn.active { color:var(--c-brand); border-bottom-color:var(--c-brand); }

  /* 表格横向滚动容器 */
  .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; max-width:100%; }
  .table-wrap .fix-table { min-width:600px; width:100%; }

  /* ===== 移动端适配 ===== */
  @media (max-width:768px) {
    /* 汉堡菜单 */
    .nav-toggle { display:flex; }
    .nav-links {
      position:fixed; top:56px; left:0; right:0;
      background:rgba(255,255,255,.98); backdrop-filter:blur(12px);
      flex-direction:column; padding:8px 0; gap:0;
      border-bottom:1px solid var(--c-divider);
      box-shadow:var(--shadow-lg);
      transform:translateY(-120%); opacity:0; visibility:hidden; pointer-events:none;
      transition:all .3s ease;
      z-index:99;
    }
    .nav-links.open { transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
    .nav-links li { padding:0; border-bottom:1px solid var(--c-divider); }
    .nav-links li:last-child { border-bottom:none; }
    .nav-links li a { display:block; padding:14px 24px; font-size:15px; }
    .nav-links .btn-dl { display:inline-block; margin:12px 24px; text-align:center; }

    /* Hero */
    .hero { padding:48px 20px 40px; }
    .hero h1 { font-size:26px; letter-spacing:0; }
    .hero .subtitle { font-size:15px; padding:0 8px; }
    .hero-actions { flex-direction:column; align-items:center; gap:10px; }
    .hero-actions .btn { width:100%; max-width:280px; justify-content:center; }

    /* Section */
    .section { padding:40px 16px; }
    .section h2 { font-size:22px; }
    .section .desc { font-size:14px; }

    /* Grid */
    .feature-grid,.feature-list { grid-template-columns:1fr; }
    .download-grid { grid-template-columns:1fr; }

    /* Fix table */
    .fix-table { font-size:12px; }
    .fix-table td,.fix-table th { padding:8px 8px; }

    /* Stats */
    .stats-row { gap:12px; }
    .stat-item .stat-num { font-size:28px; }
    .stat-item .stat-label { font-size:12px; }

    /* Footer */
    .footer { padding:24px 16px; font-size:12px; }

    /* Notice */
    .notice { font-size:13px; padding:12px 16px; }

    /* Steps */
    .steps li { padding-left:36px; }
    .steps li::before { width:24px; height:24px; font-size:12px; }

    /* Fix group */
    .fix-group h3 { font-size:17px; flex-wrap:wrap; }
    .fix-group p { font-size:13px; }
  }

  @media (max-width:480px) {
    .hero h1 { font-size:22px; }
    .hero .subtitle { font-size:14px; }
    .hero-badge { font-size:12px; padding:3px 10px; }
    .ver-badge { font-size:12px; }
    .section h2 { font-size:20px; }
    .nav-logo { font-size:15px; }
    .nav-logo .icon { width:24px; height:24px; font-size:13px; }
    .dl-card { padding:20px; }
    .feat-item { padding:16px; }
    .feature-card { padding:16px; }
  }