.article-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      padding: 1.2rem 1.5rem;
      margin-bottom: 1rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    .article-card:hover {
      border-color: var(--color-primary);
      transform: translateY(-1px);
    }
    .article-card h3 { font-size: 1rem; margin-bottom: 0.4rem; }
    .article-card .article-meta {
      font-size: 0.8rem;
      color: var(--color-text-muted);
      display: flex;
      gap: 1rem;
      align-items: center;
    }
    .article-detail { line-height: 1.8; font-size: 0.95rem; }
    .article-detail-header {
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--color-border);
    }
    .article-detail-header h2 { font-size: 1.3rem; margin-bottom: 0.5rem; }
    .pagination {
      display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem;
    }
    .pagination button {
      padding: 0.4rem 1rem;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      color: var(--color-text);
      cursor: pointer;
      font-family: inherit;
    }
    .pagination button:hover { background: var(--color-surface-hover); }
    .pagination button:disabled { opacity: 0.3; cursor: not-allowed; }
    .pagination .current-page {
      padding: 0.4rem 0.8rem;
      color: var(--color-text-muted);
      font-size: 0.9rem;
      display: flex;
      align-items: center;
    }
    .back-link {
      color: var(--color-primary);
      text-decoration: none;
      font-size: 0.9rem;
      display: inline-block;
      margin-bottom: 1rem;
    }
    .back-link:hover { text-decoration: underline; }
    .category-tag {
      display: inline-block;
      padding: 0.15rem 0.5rem;
      background: rgba(99, 102, 241, 0.15);
      border-radius: 4px;
      font-size: 0.75rem;
      color: var(--color-primary);
    }
    .company-tag {
      display: inline-block;
      padding: 0.15rem 0.5rem;
      background: rgba(251, 191, 36, 0.12);
      border-radius: 4px;
      font-size: 0.75rem;
      color: var(--color-warning);
    }
    .hero-banner {
      text-align: center;
      padding: 1.5rem 1rem;
      margin-bottom: 1.5rem;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
    }
    .hero-banner p {
      color: var(--color-text-muted);
      font-size: 0.9rem;
      margin-top: 0.5rem;
      line-height: 1.6;
    }
    .share-buttons {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-top: 1.2rem;
      padding-top: 1rem;
      border-top: 1px solid var(--color-border);
    }
    .share-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.9rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius);
      background: var(--color-surface);
      color: var(--color-text);
      font-size: 0.78rem;
      font-family: inherit;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.15s;
    }
    .share-btn:hover { background: var(--color-surface-hover); border-color: var(--color-primary); }
    .share-btn svg { width: 16px; height: 16px; flex-shrink: 0; }