.filter-bar {
      background: #fff;
      padding: 12px 16px;
      border-bottom: 1px solid #eee;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .filter-bar .label { font-size: 13px; color: #999; margin-right: 4px; }
    .filter-bar .tag {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 14px;
      font-size: 13px;
      border: 1px solid #ddd;
      color: #666;
      cursor: pointer;
      transition: .2s;
      background: #fff;
    }
    .filter-bar .tag:hover,
    .filter-bar .tag.active { border-color: #c0392b; color: #c0392b; background: #fff5f5; }
    .filter-bar .tag-red { background: #c0392b; color: #fff; border-color: #c0392b; }
    .filter-bar .tag-red:hover { background: #e74c3c; }

    .breadcrumb {
      max-width: 1200px;
      margin: 14px auto 0;
      padding: 0 16px;
      font-size: 13px;
      color: #999;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .breadcrumb a { color: #c0392b; }
    .breadcrumb span { color: #999; }

    .container { max-width: 1200px; margin: 0 auto; padding: 16px; }

    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      flex-wrap: wrap;
      gap: 8px;
    }
    .page-header h1 {
      font-size: 20px;
      font-weight: 700;
      border-left: 4px solid #c0392b;
      padding-left: 10px;
    }
    .page-header .count { font-size: 13px; color: #999; }
    .page-header .sort {
      display: flex;
      gap: 6px;
    }
    .page-header .sort a {
      font-size: 13px;
      color: #999;
      padding: 4px 10px;
      border-radius: 4px;
      border: 1px solid #eee;
      transition: .2s;
    }
    .page-header .sort a:hover,
    .page-header .sort a.active { color: #c0392b; border-color: #c0392b; background: #fff5f5; }

    .car-list { display: flex; flex-direction: column; gap: 12px; }
    .car-item {
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
      transition: .2s;
      cursor: pointer;
    }
    .car-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
    .car-item .img-wrap {
      flex: 0 0 200px;
      width: 200px;
      height: 150px;
      overflow: hidden;
      position: relative;
      background: #eee;
    }
    .car-item .img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .3s;
    }
    .car-item:hover .img-wrap img { transform: scale(1.05); }
    .car-item .img-wrap .badge {
      position: absolute;
      top: 8px;
      left: 8px;
      background: #c0392b;
      color: #fff;
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 4px;
    }
    .car-item .info {
      flex: 1;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .car-item .info .brand-tag {
      display: inline-block;
      background: #fff5f5;
      color: #c0392b;
      font-size: 11px;
      padding: 1px 8px;
      border-radius: 4px;
      margin-bottom: 6px;
      align-self: flex-start;
    }
    .car-item .info h3 {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .car-item .info .desc {
      font-size: 13px;
      color: #888;
      line-height: 1.5;
      margin-top: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .car-item .info .meta {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 6px;
      padding-top: 10px;
    }
    .car-item .info .meta .price {
      font-size: 18px;
      font-weight: 700;
      color: #c0392b;
    }
    .car-item .info .meta .price small {
      font-size: 12px;
      font-weight: 400;
      color: #999;
    }
    .car-item .info .meta .dealer { font-size: 12px; color: #999; }
    .car-item .info .meta .dealer i { font-style: normal; margin-right: 2px; }

    .car-item .info .tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .car-item .info .tags span {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid #eee;
      color: #888;
    }

    .pagination {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 24px;
      flex-wrap: wrap;
    }
    .pagination a, .pagination span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      height: 36px;
      padding: 0 10px;
      border-radius: 6px;
      font-size: 14px;
      border: 1px solid #eee;
      background: #fff;
      color: #666;
      transition: .2s;
    }
    .pagination a:hover { border-color: #c0392b; color: #c0392b; }
    .pagination .active { background: #c0392b; color: #fff; border-color: #c0392b; }
    .pagination .disabled { opacity: .4; cursor: default; }

    .wa-float {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 999;
      width: 56px;
      height: 56px;
      background: #25d366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(37, 211, 102, .4);
      transition: .2s;
      cursor: pointer;
    }
    .wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37, 211, 102, .5); }
    .wa-float svg { width: 30px; height: 30px; fill: #fff; }



    @media (max-width: 480px) {
      .car-item .img-wrap { height: 180px; }
      .car-item .info .desc { -webkit-line-clamp: 1; }
    }