:root {
    --bg: #eceff4;
    --panel: #ffffff;
    --text: #1e2130;
    --text-dim: #6c7080;
    --border: #e0e3e9;
    --border-soft: #eeeff3;
    --accent: #2563eb;
    --accent-2: #3b82f6;
    --accent-soft: #eff3ff;
    --green: #16a34a;
    --green-soft: #f0fdf4;
    --orange: #ca8a04;
    --orange-soft: #fefce8;
    --blue: #2563eb;
    --blue-soft: #eff3ff;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
    --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --radius: 8px;
    --radius-sm: 5px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--accent); text-decoration: none; }

  .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px 24px; flex: 1; display: flex; flex-direction: column; }
  .layout { flex: 1; }

  /* 顶部 */
  header.top {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; padding: 18px 2px 14px; margin-bottom: 20px;
    border-bottom: 1px solid transparent;
    background: linear-gradient(135deg, #f0f4ff 0%, #f8f9fc 100%);
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .brand { display: flex; align-items: center; gap: 12px; }
  .brand .mark {
    width: 40px; height: 40px; border-radius: 10px; 
    background: linear-gradient(135deg, var(--accent-2), var(--accent));
    display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,.25);
  }
  .brand .txt h1 { display: inline; font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: -.2px; }
  .brand .txt span { display: block; font-size: .7rem; color: var(--text-dim); margin-top: 1px; }
  .top .status { font-size: .76rem; color: var(--green); font-weight: 500; display: flex; align-items: center; gap: 6px; background: var(--green-soft); padding: 4px 12px; border-radius: 20px; }
  .top .status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

  /* 布局 */
  .layout { display: flex; gap: 18px; align-items: flex-start; }

  /* 左侧 */
  aside.tree { 
    width: 210px; flex-shrink: 0; background: var(--panel); 
    border: 1px solid var(--border); border-radius: var(--radius); 
    box-shadow: var(--shadow-sm); overflow: hidden;
  }
  .tree .tree-group { 
    padding: 14px 16px 8px; font-weight: 700; font-size: .72rem; 
    color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; 
    background: #fafbfd; 
  }
  .tree .menu { padding: 4px 6px 10px; display: flex; flex-direction: column; gap: 1px; }
  .tree .leaf {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer;
    border-radius: 6px; color: var(--text); transition: all .15s; position: relative;
  }
  .tree .leaf::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; 
    border-radius: 0 3px 3px 0; background: transparent; transition: background .15s;
  }
  .tree .leaf .ic {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; display: grid; place-items: center;
    font-size: .68rem; font-weight: 700; background: #f3f4f7; color: var(--text-dim); 
    transition: all .15s;
  }
  .tree .leaf .lf-txt { flex: 1; font-size: .84rem; }
  .tree .leaf .cnt { font-size: .7rem; color: var(--text-dim); }
  .tree .leaf:hover { background: #f8f9fc; }
  .tree .leaf.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .tree .leaf.active::before { background: var(--accent); }
  .tree .leaf.active .ic { background: var(--accent); color: #fff; }

  /* 右侧 */
  main.content { 
    flex: 1; min-width: 0; background: var(--panel); 
    border: 1px solid var(--border); border-radius: var(--radius); 
    padding: 20px 22px; box-shadow: var(--shadow-sm);
  }
  .content-head { 
    display: flex; justify-content: space-between; align-items: center; 
    flex-wrap: wrap; gap: 12px; padding-bottom: 16px; 
    border-bottom: 2px solid var(--border-soft); margin-bottom: 6px;
  }
  .content-head h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.3px; }
  .search { position: relative; display: flex; align-items: center; }
  .search input {
    padding: 8px 34px 8px 14px; 
    border: 1.5px solid var(--border); border-radius: 20px;
    font-size: .82rem; width: 230px; background: #f9fafb; color: var(--text); 
    font-family: inherit; outline: none; transition: all .2s;
  }
  .search input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
  .search .search-clear {
    position: absolute; right: 8px; width: 22px; height: 22px; border: none; border-radius: 50%;
    background: var(--border-soft); color: var(--text-dim); cursor: pointer; 
    font-size: .75rem; line-height: 1; display: none; align-items: center; justify-content: center;
  }
  .search .search-clear:hover { background: #e0e3e9; color: var(--text); }
  .search.has-text .search-clear { display: flex; }
  .note-line { font-size: .78rem; color: var(--text-dim); padding: 12px 0; }
  .ver-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 12px; }
  .ver-tab { 
    padding: 5px 14px; font-size: .76rem; font-weight: 500;
    border: 1px solid var(--border); border-radius: 16px; 
    background: #fff; color: var(--text-dim); cursor: pointer; 
    transition: all .18s;
  }
  .ver-tab:hover { border-color: var(--accent-2); color: var(--accent); background: var(--accent-soft); }
  .ver-tab.active { 
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); 
    border-color: var(--accent); color: #fff; font-weight: 600;
    box-shadow: 0 2px 6px rgba(37,99,235,.25);
  }
  .empty { text-align: center; color: var(--text-dim); padding: 50px 0; font-size: .9rem; }
  .clear-btn { 
    margin-left: 8px; padding: 5px 16px; border: 1px solid var(--accent); 
    background: #fff; color: var(--accent); border-radius: 16px; cursor: pointer; 
    font-family: inherit; font-size: .8rem; font-weight: 500; transition: all .15s;
  }
  .clear-btn:hover { background: var(--accent); color: #fff; }

  /* 列表项 */
  .item { 
    border: 1px solid var(--border); border-radius: var(--radius-sm); 
    margin-bottom: 8px; overflow: hidden; 
    background: #fff; transition: all .2s;
    box-shadow: 0 1px 2px rgba(0,0,0,.02);
  }
  .item:hover { border-color: #d0d5de; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
  .item.open { border-color: var(--accent-2); box-shadow: 0 0 0 1px rgba(37,99,235,.1), 0 4px 12px rgba(0,0,0,.06); }
  .item-row { padding: 12px 16px; cursor: pointer; display: flex; align-items: center; gap: 14px; }
  .item-row:hover { background: #f9fafb; }
  .item-row .name { flex: 1; min-width: 0; }
  .item-row .name b { font-weight: 600; font-size: .9rem; }
  .item-row .tags { display: flex; gap: 6px; flex-shrink: 0; }
  .tag { font-size: .7rem; padding: 2px 10px; border-radius: 4px; font-weight: 600; letter-spacing: .2px; }
  .tag.x64 { color: #16a34a; background: #f0fdf4; }
  .tag.x86 { color: #ca8a04; background: #fefce8; }
  .tag.arm64 { color: #2563eb; background: #eff3ff; }
  .tag:not(.x64):not(.x86):not(.arm64) { color: var(--text-dim); background: #f3f4f7; }
  .item-row .arrow { 
    color: var(--text-dim); font-size: .7rem; transition: all .2s; 
    opacity: .5; width: 20px; height: 20px; display: grid; place-items: center;
    border-radius: 50%; background: var(--border-soft);
  }
  .item.open .item-row .arrow { transform: rotate(90deg); opacity: 1; color: var(--accent); background: var(--accent-soft); }

  .detail { display: none; padding: 10px 16px 16px; border-top: 1px dashed var(--border-soft); background: #fafbfd; }
  .item.open .detail { display: block; animation: slideDown .2s ease; }
  @keyframes slideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  .detail .field { display: grid; grid-template-columns: 80px 1fr; gap: 8px; padding: 6px 0; font-size: .83rem; align-items: baseline; }
  .detail .field .k { color: var(--text-dim); font-size: .78rem; font-weight: 500; }
  .detail .field .v { word-break: break-all; }
  .detail .field .v.mono { font-family: "SF Mono","Consolas","Fira Code",monospace; font-size: .78rem; color: #374151; background: #f3f4f7; padding: 2px 6px; border-radius: 3px; display: inline; }

  .dl-label { font-size: .76rem; color: var(--text-dim); margin-top: 12px; margin-bottom: 8px; font-weight: 600; }
  .dl-methods { display: flex; flex-direction: column; gap: 6px; }
  .dl-row {
    display: flex; align-items: flex-start; gap: 10px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 12px; cursor: pointer; color: var(--text);
    transition: all .18s; font-size: .82rem;
  }
  .dl-name { flex: 0 0 64px; font-weight: 600; }
  .dl-link {
    flex: 1; min-width: 0;
    font-family: "SF Mono","Consolas","Fira Code",monospace;
    font-size: .76rem; color: #374151; word-break: break-all;
  }
  .dl-row:hover {
    transform: translateY(-1px);
    border-color: var(--accent-2);
    background: var(--accent-soft);
    box-shadow: 0 2px 8px rgba(37,99,235,.12);
  }
  .dl-row:active { transform: translateY(0); }
  .dl-row.done {
    border-color: var(--green); background: var(--green-soft);
    box-shadow: 0 2px 8px rgba(22,163,74,.12);
  }
  .dl-row.done .dl-name { color: var(--green); }
  .dl-copy {
    flex: 0 0 auto; margin-left: auto; padding: 3px 11px;
    font-size: .72rem; font-family: inherit; cursor: pointer; white-space: nowrap;
    color: var(--accent); background: var(--accent-soft);
    border: 1px solid var(--border); border-radius: 12px; transition: all .15s;
  }
  .dl-copy:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
  .dl-row.done .dl-copy { color: #fff; background: var(--green); border-color: var(--green); }

  footer { 
    color: var(--text-dim); font-size: .76rem; padding: 28px 4px 0; 
    border-top: 1px solid var(--border); margin-top: 32px; text-align: center; 
  }
  footer .disclaimer { max-width: 640px; margin: 0 auto 10px; line-height: 1.9; }
  footer .copy { font-size: .72rem; opacity: .5; }

  @media (max-width: 820px) {
    .wrap { padding: 0 12px 36px; }
    header.top { padding: 14px 8px; border-radius: 0; background: transparent; }
    .top .status { font-size: .72rem; }
    .layout { flex-direction: column; gap: 12px; margin-top: 12px; }
    aside.tree { width: 100%; padding: 12px 12px 6px; box-shadow: none; }
    .tree .tree-group { display: block; padding: 10px 2px 6px; }
    .tree .menu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 0 8px; }
    .tree .leaf {
      border: 1px solid var(--border); padding: 8px 12px; background: #fff; white-space: nowrap; border-radius: 6px;
    }
    .tree .leaf::before { display: none; }
    .tree .leaf .ic { display: grid; width: 24px; height: 24px; font-size: .64rem; }
    .tree .leaf.active { background: var(--accent-soft); border-color: var(--accent); }
    .tree .leaf.active .ic { background: var(--accent); color: #fff; }
    main.content { padding: 16px; }
    .content-head { gap: 10px; }
    .content-head .search { width: 100%; }
    .search input { width: 100%; border-radius: var(--radius-sm); }
    .item-row { padding: 12px; }
    .item-row .tags { display: none; }
    .detail { padding: 10px 12px 14px; }
    .detail .field { grid-template-columns: 64px 1fr; }
    .dl-methods { display: flex; flex-direction: column; }
    .dl-row { flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 10px; }
    .dl-name { flex: none; font-size: .76rem; color: var(--text-dim); }
    .dl-copy { align-self: flex-end; margin-left: 0; }
    .dl-link { font-size: .72rem; }
  }


    /* 品牌名由 h1 改为 p（页面 H1 让位给内容标题），样式保持与原站一致 */
    .brand .txt .brand-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.2px; margin: 0; color: var(--text); }
    /* 内容标题由 h2 升级为 h1（每页唯一的 H1 = 页面主题），样式沿用原站 h2 */
    .content-head h1 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.3px; }
    a.leaf { text-decoration: none; color: inherit; }
    a.leaf:hover { text-decoration: none; }
    a.ver-tab { text-decoration: none; color: inherit; }
    a.ver-tab:hover { text-decoration: none; }
    .home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    @media (max-width: 640px) { .home-cards { grid-template-columns: 1fr; } }
    .home-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; background: #fff; transition: all .18s; }
    .home-card:hover { border-color: var(--accent-2); box-shadow: 0 2px 8px rgba(37,99,235,.10); }
    .home-card h3 { font-size: .92rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
    .home-card h3 .ic { width: 26px; height: 26px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: .68rem; font-weight: 700; }
    .home-card h3 a { color: var(--text); }
    .home-card p { font-size: .78rem; color: var(--text-dim); margin-bottom: 8px; }
    .home-card .vers { display: flex; flex-wrap: wrap; gap: 6px; }
    .home-card .vers a { font-size: .72rem; padding: 2px 10px; border-radius: 12px; background: #f3f4f7; color: var(--text-dim); }
    .home-card .vers a:hover { background: var(--accent-soft); color: var(--accent); }
    .home-card .more { font-size: .74rem; margin-left: 4px; }