.service-list-page { background: #f6f8fb; }
.service-list-wrap { min-height: 70vh; }
.service-list-hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.service-list-eyebrow { margin: 0 0 8px; color: #155bd5; font-weight: 700; }
.service-list-title { margin: 0; color: #132238; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.service-list-subtitle { margin: 10px 0 0; color: #6c7a8d; }
.service-list-count { color: #64748b; font-weight: 700; white-space: nowrap; }
.service-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; padding: 14px; border: 1px solid #e4eaf2; border-radius: 8px; background: #fff; }
.service-list-tabs { display: flex; gap: 6px; }
.service-list-tab { border: 0; border-radius: 6px; padding: 9px 14px; background: transparent; color: #5b6b80; font-weight: 700; }
.service-list-tab.active { background: #155bd5; color: #fff; }
.service-list-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.service-list-selects { display: flex; flex-wrap: wrap; gap: 8px; }
.service-list-search { display: flex; align-items: center; gap: 8px; min-width: 230px; border: 1px solid #d8e0eb; border-radius: 6px; padding: 0 10px; background: #fff; }
.service-list-search input { width: 100%; min-height: 38px; border: 0; outline: 0; }
.service-list-category, .service-list-sort { min-height: 38px; border: 1px solid #d8e0eb; border-radius: 6px; padding: 0 10px; color: #334155; background: #fff; }
.service-list-status { min-height: 24px; color: #6c7a8d; }
.service-list-grid > [class*="col-"] { display: flex; }
.service-list-grid .home-service-card { width: 100%; }
.service-list-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 70px 20px; color: #718096; }
.service-list-empty i { font-size: 38px; color: #9aa9bc; }
.service-list-empty strong { color: #334155; }
.service-list-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; }
.service-page-btn { min-width: 36px; min-height: 34px; border: 1px solid #d8e0eb; border-radius: 6px; background: #fff; color: #475569; }
.service-page-btn.active { border-color: #155bd5; background: #155bd5; color: #fff; }
.service-page-btn:disabled { cursor: not-allowed; opacity: .45; }
.service-page-ellipsis { color: #94a3b8; padding: 0 3px; }
@media (max-width: 767.98px) {
    .service-list-wrap { padding-top: 12px !important; padding-bottom: 20px !important; }

    /* 移动端隐藏头部 hero 区域 */
    .service-list-hero { display: none !important; }

    /* 头部：压缩为一行标题 + 计数徽章（保留规则供桌面端降级参考） */
    .service-list-hero {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px !important;
    }
    .service-list-hero-copy { min-width: 0; flex: 1 1 auto; }
    .service-list-eyebrow { display: none; }
    .service-list-title { font-size: 1.22rem; line-height: 1.3; font-weight: 800; }
    .service-list-subtitle {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.4;
        color: #8494a8;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .service-list-count {
        flex: 0 0 auto;
        align-self: flex-start;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(21, 91, 213, 0.08);
        color: #155bd5;
        font-size: 12px;
        font-weight: 800;
    }

    /* 筛选区：无边框贴合式面板 */
    .service-list-toolbar {
        display: block;
        margin-bottom: 12px;
        padding: 10px;
        border: 0;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(15, 43, 88, 0.06);
    }

    /* 分段控件 tabs */
    .service-list-tabs {
        gap: 2px;
        padding: 3px;
        border-radius: 999px;
        background: #f1f4f9;
    }
    .service-list-tab {
        flex: 1 1 0;
        min-width: 0;
        min-height: 34px;
        padding: 0 6px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
        transition: background .18s ease, color .18s ease;
    }
    .service-list-tab.active { box-shadow: 0 3px 10px rgba(21, 91, 213, 0.28); }

    .service-list-filters { display: block; margin-top: 8px; }

    .service-list-search {
        width: 100%;
        min-width: 0;
        gap: 6px;
        padding: 0 12px;
        border-radius: 999px;
        background: #f6f8fb;
        border-color: #e8edf4;
    }
    .service-list-search i { color: #94a3b8; font-size: 15px; }
    .service-list-search input {
        min-height: 40px;
        font-size: 14px;
        background: transparent;
    }
    .service-list-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

    /* 两个下拉并排，减少纵向占位 */
    .service-list-selects {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 8px;
    }
    .service-list-selects.is-single { grid-template-columns: minmax(0, 1fr); }
    .service-list-category, .service-list-sort {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        padding: 0 28px 0 12px;
        border-radius: 999px;
        border-color: #e8edf4;
        background: #f6f8fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M8 11.5 3.5 7h9L8 11.5Z'/%3E%3C/svg%3E") no-repeat right 10px center / 12px 12px;
        color: #475569;
        font-size: 13px;
        font-weight: 600;
        -webkit-appearance: none;
        appearance: none;
    }

    /* 计数已在头部展示，避免重复 */
    .service-list-status { display: none; }

    .service-list-empty { padding: 48px 16px; }
    .service-list-pagination { margin-top: 18px; flex-wrap: wrap; }
    .service-page-btn { min-height: 32px; font-size: 13px; }
}