:root {
      --font: 'Inter', system-ui, sans-serif;
      --mono: 'JetBrains Mono', monospace;
      --bg:       #ffffff;
      --bg-alt:   #f8fafc;
      --bg-card:  #ffffff;

      --blue:       #00579c;
      --blue-dim:   #004a85;
      --blue-deep:  #003a6e;
      --blue-glow:  rgba(0,87,156,0.22);
      --blue-faint: rgba(0,87,156,0.07);
      --blue-mid:   rgba(0,87,156,0.14);

      --orange:      #e65100;
      --orange-dim:  rgba(230,81,0,0.10);
      --teal:        #00897b;
      --teal-dim:    rgba(0,137,123,0.10);
      --green:       #2e7d32;

      --border:     rgba(148,163,184,0.28);
      --border-hi:  rgba(0,87,156,0.20);

      --t1: #0f172a;
      --t2: #475569;
      --t3: #94a3b8;

      --radius: 14px;
    }

    html { scroll-behavior: smooth; scroll-padding-top: 100px; }

    /* 本页 hero 高度减半：覆盖全站 --banner-height（722px → 361px） */
    #compatibilitylist-hero.hero-wrap.industry-hero {
      --banner-height: 361px;
      height: 361px;
      min-height: 361px;
      max-height: 361px;
    }

    #compatibilitylist-hero.hero-wrap.industry-hero .hero-inner {
      min-height: 361px;
      height: 361px;
      max-height: 361px;
      box-sizing: border-box;
    }

    .compat-list-page {
      font-family: var(--font);
      background: var(--bg);
      color: var(--t1);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    .compat-list-page a { color: inherit; text-decoration: none; }

    /* ─── Utils ────────────────────────────────────────────────── */

    .compat-list-page .btn {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font); font-weight: 600; letter-spacing: -0.01em;
      border-radius: 8px; border: none; cursor: pointer; transition: all .2s;
    }
    .compat-list-page .btn--lg { font-size: 18px; padding: 14px 28px; }
    .compat-list-page .btn--primary {
      background: var(--blue); color: #fff;
      box-shadow: 0 0 0 0 var(--blue-glow);
    }
    .compat-list-page .btn--primary:hover {
      background: var(--blue-dim);
      box-shadow: 0 0 28px 6px var(--blue-glow);
    }
    .compat-list-page .btn--ghost {
      background: transparent; color: var(--t2);
      border: 1px solid var(--border);
    }
    .compat-list-page .btn--ghost:hover { background: rgba(0,87,156,0.05); color: var(--t1); border-color: var(--blue); }
    .compat-list-page .btn--sm { font-size: 13px; padding: 8px 16px; }
    .compat-list-page .btn--outline-blue {
      background: transparent; color: var(--blue);
      border: 1.5px solid var(--blue);
    }
    .compat-list-page .btn--outline-blue:hover { background: var(--blue-faint); }

    .compat-list-page .main-section .fade {
      opacity: 1;
      transform: none;
    }

    .sec-hd { margin-bottom: 48px; text-align: center; }
    .h2 { font-size: 48px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
    .sec-sub { font-size: 18px; color: var(--t2); line-height: 1.7; margin-top: 14px; max-width: 580px; margin-left: auto; margin-right: auto; }

    /* ─── MAIN CONTENT ─────────────────────────────────────────── */
.compat-list-page .main-section {
  padding: var(--space-section) 0 0;
  background: var(--bg);
}

/* Tab bar */
.compat-list-page .tab-bar {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-card);
  border-bottom: 1px solid var(--color-border);
}
.compat-list-page .tab-btn {
  padding: 12px 24px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font-family: var(--font-sans, var(--font));
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.compat-list-page .tab-btn:hover { color: var(--color-title); }
.compat-list-page .tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.compat-list-page .tab-panel { display: none; }
.compat-list-page .tab-panel.active { display: block; }

/* ─── SERVER TAB LAYOUT ────────────────────────────────────── */
.compat-list-page .server-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-card);
  align-items: start;
}

/* Left sidebar */
.compat-list-page .table-left {
  gap: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.compat-list-page .sidebar-section {
  padding: var(--space-card);
  background: linear-gradient(358deg, #d2e7ff4d 1%, #d2e7ff1a 49%);

  box-sizing: border-box;
  border: 1px solid #E7EAF0;
  border-radius: var(--radius-md);
}
.compat-list-page .sidebar-section:last-child { border-bottom: none; }
.compat-list-page .sidebar-title {
  font-size: var(--font-size-base);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-family: var(--font-sans, var(--font));
  color: var(--color-title);
  margin-bottom: 14px;
  text-transform: none;
}

/* Vendor tree */
.compat-list-page .vendor-tree { margin: 0; }
.compat-list-page .vendor-tree dd {
  margin: 0 0 4px;
  padding: 0 10px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  background: #FFFFFF;

box-sizing: border-box;
border: 1px solid #E7EAF0;
border-radius: var(--radius-sm);
}
.compat-list-page .vendor-tree dd:last-child { margin-bottom: 0; }
.compat-list-page .vendor-tree .b-t {
  padding: 8px 0;
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: color .15s;
  user-select: none;
}
.compat-list-page .vendor-tree .b-t:hover { color: var(--color-primary); background: transparent; }
.compat-list-page .vendor-tree .b-t::before { display: none; }
.compat-list-page .vendor-tree .b-t::after {
  content: '+';
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-primary);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}
.compat-list-page .vendor-tree dd.open .b-t { color: var(--color-title); font-weight: 600; }
.compat-list-page .vendor-tree dd.open .b-t::after { content: '\2013'; }
.compat-list-page .vendor-tree .b-li {
  display: none;
  padding: 6px 0 6px 12px;
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color .1s, background .1s;
  border-top: none;
}
.compat-list-page .vendor-tree dd.open .b-li { display: block; }
.compat-list-page .vendor-tree .b-li:hover {
  background: transparent;
  color: var(--color-primary);
}
.compat-list-page .vendor-tree .b-li.cur {
  color: var(--color-primary);
  font-weight: 600;
  background: transparent;
}

/* Sidebar filter fields */
.compat-list-page .sidebar-field { margin-bottom: 10px; }
.compat-list-page .sidebar-field:last-child { margin-bottom: 0; }
.compat-list-page .sidebar-label {
  display: block;
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0;
}
.compat-list-page .sidebar-field select {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid rgba(0, 87, 156, 0.35);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font-sans, var(--font));
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-title);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2300579c' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  box-sizing: border-box;
}
.compat-list-page .sidebar-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--blue-faint);
}

/* Column filter groups in sidebar */
.compat-list-page .filter-group { margin-bottom: 14px; }
.compat-list-page .filter-group:last-child { margin-bottom: 0; }
.compat-list-page .filter-group-label {
  font-size: var(--font-size-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  font-family: var(--font-sans, var(--font));
}
.compat-list-page .filter-group .ff-search {
  width: 100%;
  padding: 6px 10px;
  font-size: var(--font-size-caption);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans, var(--font));
  color: var(--color-title);
  outline: none;
  margin-bottom: 4px;
  box-sizing: border-box;
}
.compat-list-page .filter-group .ff-search:focus { border-color: var(--color-primary); }
.compat-list-page .filter-group .ff-actions {
  display: flex; gap: 6px; margin-bottom: 3px;
}
.compat-list-page .filter-group .ff-actions button {
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.compat-list-page .filter-group .ff-actions button:hover { text-decoration: underline; }
.compat-list-page .filter-group .ff-list { max-height: 120px; overflow-y: auto; }
.compat-list-page .filter-group .ff-item {
  display: flex; align-items: center; gap: 5px; padding: 1px 0; cursor: pointer;
}
.compat-list-page .filter-group .ff-item input[type="checkbox"] {
  width: 13px; height: 13px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0;
}
.compat-list-page .filter-group .ff-item label {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  cursor: pointer;
  line-height: 1.3;
}
.compat-list-page .filter-group .ff-item input:checked + label {
  color: var(--color-primary);
  font-weight: 500;
}

/* Sidebar tips */
.compat-list-page .sidebar-tips {
  padding: 12px 0 var(--space-card);
  font-size: var(--font-size-caption);
  color: var(--t3);
  line-height: 1.6;
  
}
.compat-list-page .sidebar-tips strong {
  display: block;
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 4px;
}

/* Right — table area */
.compat-list-page .table-right {
  background: var(--bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Category tabs — dark title bar */
.compat-list-page #categoryWrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--color-primary);
  border-bottom: none;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.compat-list-page #categoryWrapper .cat-label { display: none; }
.compat-list-page #categoryWrapper .cat-tab {
  padding: 8px 14px;
  font-size: var(--font-size-body);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  background: transparent;
  font-family: var(--font-sans, var(--font));
}
.compat-list-page #categoryWrapper .cat-tab:hover {
  color: var(--color-text-on-dark);
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
}
.compat-list-page #categoryWrapper .cat-tab.active {
  color: var(--color-text-on-dark);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
}

/* Top bar — results + export */
.compat-list-page .top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--bg);
}
.compat-list-page .top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
.compat-list-page .top-bar.is-loading .top-actions,
.compat-list-page .top-actions[hidden] {
  display: none;
}
.compat-list-page .result-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  margin-right: auto;
}
.compat-list-page .result-badge.is-loading {
  color: var(--color-text-secondary);
}
.compat-list-page .compat-loading-spin {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 87, 156, 0.2);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: compat-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes compat-spin {
  to { transform: rotate(360deg); }
}
.compat-list-page .result-badge strong {
  color: var(--color-title);
  font-weight: 700;
}
.compat-list-page .btn--outline-blue {
  background: var(--bg);
  color: var(--color-primary);
  border: 1px solid rgba(0, 87, 156, 0.4);
}
.compat-list-page .btn--outline-blue:hover {
  background: var(--blue-faint);
  border-color: var(--color-primary);
}
.compat-list-page .btn--primary {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  box-shadow: none;
}
.compat-list-page .btn--primary:hover {
  background: var(--color-primary-dim);
  box-shadow: none;
}
.compat-list-page .btn--sm {
  font-size: var(--font-size-body);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  gap: 6px;
}

/* ─── TABLE ────────────────────────────────────────────────── */
.compat-list-page .table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  flex: none;
  max-height: none;
}
.compat-list-page table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-size: var(--font-size-body);
  table-layout: auto;
}

.compat-list-page .empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--t3);
}
.compat-list-page .empty-state svg {
  width: 40px; height: 40px; margin-bottom: 12px; opacity: 0.4;
}
.compat-list-page .empty-state p { font-size: var(--font-size-base); }

/* ─── GUEST OS TAB ─────────────────────────────────────────── */
.compat-list-page .os-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-card);
  align-items: start;
}
.compat-list-page .os-filter-groups { padding: var(--space-card); }
.compat-list-page .os-filter-groups .filter-group { margin-bottom: 14px; }
.compat-list-page .os-filter-groups .filter-group:last-child { margin-bottom: 0; }
.compat-list-page thead th {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 14px;
  font-size: var(--font-size-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color .15s;
  position: static;
}
.compat-list-page thead th:hover { color: var(--color-primary); }
.compat-list-page thead th .sort-icon {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.25;
  font-size: 9px;
}
.compat-list-page thead th.sort-asc .sort-icon,
.compat-list-page thead th.sort-desc .sort-icon {
  opacity: 1;
  color: var(--color-primary);
}
.compat-list-page thead th.sort-asc .sort-icon::after { content: ' ▲'; }
.compat-list-page thead th.sort-desc .sort-icon::after { content: ' ▼'; }
.compat-list-page thead th:not(.sort-asc):not(.sort-desc) .sort-icon::after { content: ' ⇅'; }

.compat-list-page tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background .15s;
}
.compat-list-page tbody tr:hover { background: var(--blue-faint); }
.compat-list-page tbody td {
  padding: 10px 14px;
  color: var(--color-title);
  line-height: 1.45;
  font-size: var(--font-size-body);
  white-space: nowrap;
}

/* 分页：放在 top-bar Export 旁 */
.compat-list-page .compat-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.compat-list-page .compat-pagination--footer {
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
}
.compat-list-page .compat-skel-row td {
  vertical-align: middle;
}
.compat-list-page .compat-skel {
  display: block;
  height: 12px;
  min-width: 48px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e8eef5 25%, #f4f7fb 37%, #e8eef5 63%);
  background-size: 400% 100%;
  animation: compat-skel 1.2s ease-in-out infinite;
}
@keyframes compat-skel {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.compat-list-page .compat-page-btn {
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-title);
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
}
.compat-list-page .compat-page-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.compat-list-page .compat-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.compat-list-page .compat-page-info {
  font-size: 13px;
  color: var(--color-text-secondary);
}

    /* ─── Responsive ──────────────────────────────────────────── */
    @media (max-width: 1200px) {
      .compat-list-page .server-layout,
      .compat-list-page .os-layout {
        grid-template-columns: 1fr;
      }
      .compat-list-page .compat-layout { grid-template-columns: 1fr; }
      .compat-list-page .filter-sidebar {
        position: static;
        max-height: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
      }
      .compat-list-page .filter-sidebar-head { grid-column: 1 / -1; }
    }
    @media (max-width: 640px) {
      .compat-list-page .main-section { padding: var(--space-section) 0; }
      .compat-list-page .top-bar { flex-direction: column; align-items: stretch; }
      .compat-list-page .top-actions { margin-left: 0; justify-content: flex-start; flex-wrap: wrap; }
      .compat-list-page #categoryWrapper { gap: 2px; padding: 8px 10px; }
      .compat-list-page #categoryWrapper .cat-tab { padding: 6px 10px; }
      .compat-list-page .filter-sidebar { grid-template-columns: 1fr; }
      .compat-list-page table { font-size: var(--font-size-caption); }
      .compat-list-page .table-scroll thead th,
      .compat-list-page .table-wrap tbody td,
      .compat-list-page tbody td { padding: 8px 10px; }
    }

    /* Scrollbar styling */
    .compat-list-page .filter-options::-webkit-scrollbar,
    .compat-list-page .table-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
    .compat-list-page .filter-options::-webkit-scrollbar-track,
    .compat-list-page .table-scroll::-webkit-scrollbar-track { background: transparent; }
    .compat-list-page .filter-options::-webkit-scrollbar-thumb,
    .compat-list-page .table-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }