* {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: var(--bg-deep);
        color: var(--text-primary);
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
      }
      .cat-main {
        max-width: 1100px;
        margin: 0 auto;
        padding: calc(var(--nav-height) + var(--space-6)) var(--space-5) var(--space-10);
      }
      .cat-hero {
        text-align: center;
        margin-bottom: var(--space-8);
      }
      .cat-hero-icon {
        font-size: 3rem;
        line-height: 1;
      }
      .cat-hero h1 {
        font-size: 1.9rem;
        margin: var(--space-3) 0 var(--space-2);
      }
      .cat-intro {
        max-width: 640px;
        margin: 0 auto var(--space-3);
        color: var(--text-secondary);
        line-height: 1.7;
      }
      .cat-meta {
        margin: 0;
        font-family: var(--font-mono);
        font-size: 0.8rem;
        color: var(--text-muted);
      }
      .cat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: var(--space-3);
      }
      .cat-card {
        display: flex;
        gap: var(--space-3);
        padding: var(--space-4);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        background: var(--bg-card);
        color: inherit;
        text-decoration: none;
        transition:
          border-color var(--transition),
          transform var(--transition);
      }
      .cat-card:hover {
        border-color: var(--accent-cyan);
        transform: translateY(-2px);
      }
      .cat-card-icon {
        flex-shrink: 0;
        font-size: 1.5rem;
        line-height: 1.2;
      }
      .cat-card-body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }
      .cat-card-name {
        font-weight: 600;
      }
      .cat-card-desc {
        font-size: 0.82rem;
        line-height: 1.5;
        color: var(--text-secondary);
      }
      .cat-faq {
        margin-top: var(--space-10);
      }
      .cat-faq h2 {
        font-size: 1.1rem;
        margin-bottom: var(--space-3);
      }
      .cat-footer {
        margin-top: var(--space-8);
        text-align: center;
      }
      .cat-footer a {
        font-size: 0.9rem;
        color: var(--accent-cyan);
        text-decoration: none;
      }
      .cat-footer a:hover {
        text-decoration: underline;
      }
      
      
.cat-card-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* 控制只显示 2 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}