.article-list { max-width: 960px; margin: 0 auto; }

    .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
    .top-bar h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
    .btn-new { padding: 8px 18px; background: #1a1a1a; color: #fff; text-decoration: none; font-size: 14px; }
    .btn-new:hover { background: #000; }

    .filters-wrap { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 14px 0; margin-bottom: 36px; }
    .filters { font-size: 13px; color: #666; line-height: 2; }
    .filters + .filters { margin-top: 4px; }
    .filters a { color: #666; text-decoration: none; margin-right: 14px; }
    .filters a:hover { color: #1a1a1a; }
    .filters a.active { color: #1a1a1a; border-bottom: 1px solid #1a1a1a; }
    .filters .label { color: #999; margin-right: 6px; }

    .item { position: relative; max-width: 760px; margin: 0 auto 32px; border-radius: 8px; overflow: hidden; text-align: center; background: #fafafa; border: 1px solid #eee; }
    .item:last-child { margin-bottom: 0; }
    .item-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; }
    .item-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%); }
    .item-body { position: relative; z-index: 1; padding: 40px 48px; background: transparent; height: 100%; box-sizing: border-box; }

    .item h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: #111; }
    .item h3 a { color: #111; text-decoration: none; }
    .item h3 a:hover { color: #000; }
    .item .meta { font-size: 12px; color: #444; margin-bottom: 10px; }
    .item .meta span { margin-right: 12px; }
    .item .meta a { color: #444; text-decoration: none; margin-right: 6px; }
    .item .meta a:hover { color: #111; }
    .item .summary { font-size: 15px; color: #222; line-height: 1.7; }

    .item.item-has-bg .item-body h3 { color: #fff; }
    .item.item-has-bg .item-body h3 a { color: #fff; }
    .item.item-has-bg .item-body h3 a:hover { color: #fff; opacity: .85; }
    .item.item-has-bg .item-body .meta { color: #fff; }
    .item.item-has-bg .item-body .meta a { color: #fff; }
    .item.item-has-bg .item-body .summary { color: #fff; }

    .pagination { margin-top: 28px; text-align: center; font-size: 13px; }
    .pagination a, .pagination .current { padding: 4px 10px; margin: 0 2px; color: #666; text-decoration: none; border: 1px solid #e5e5e5; }
    .pagination a:hover { color: #1a1a1a; border-color: #1a1a1a; }
    .pagination .current { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

    .empty { text-align: center; color: #bbb; padding: 60px 0; font-size: 14px; }