html {
    font-size: 62.5%; /* 设置根字体大小为 10px (16px * 62.5%) */
}

/* --- 自定义字体开始 --- */

/* Source Han Sans CN - Normal/Regular Weight (400) */
@font-face {
    font-family: 'SourceHanSansCN';
    src: url('/fonts/SourceHanSansCN/SourceHanSansCN-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Source Han Sans CN - Bold Medium (500) */
@font-face {
    font-family: 'SourceHanSansCN';
    src: url('/fonts/SourceHanSansCN/SourceHanSansCN-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Alibaba PuHuiTi 3 - 55 Regular Weight - Mapping to CSS Normal (400) */
@font-face {
    font-family: 'AlibabaPuHuiTi'; /* 定义一个清晰的 CSS 字体族名 */
    /* 优先包含 EOT 格式，用于旧版 IE */
    src: url('/fonts/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-55-Regular.eot');
    /* 主 src 声明，优先使用 WOFF2, WOFF 格式 */
    src: url('/fonts/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-55-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2'), /* 现代浏览器 (最佳) */
    url('/fonts/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-55-Regular.woff') format('woff'), /* 现代浏览器 */
    url('/fonts/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-55-Regular.otf') format('opentype'), /* OpenType */
    url('/fonts/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: 400; /* 400, 对应 'Regular' */
    font-style: normal;
    font-display: swap; /* 可选: 提升感知性能 */
}

/* --- 自定义字体结束 --- */


/* Bootstrap 容器宽度覆盖 */
@media (min-width: 1400px) {
    .container,
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 1400px!important; /* 设置为您期望的最大宽度 */
    }
}

/* 定义导航栏背景色变量，方便在下面使用 */
:root {
    --main-navbar-bg: #343a40; /* 重要：请将此颜色替换为你导航栏实际的背景色 */
}

.main-nav-bar {
    background-color: var(--main-navbar-bg);
    position: relative; /* 为子元素的绝对定位提供参照，并使其 z-index 生效 */
    z-index: 1030;      /* 确保导航栏本身在较高层级 */
}

/* 基础 Body 样式 */
body {
    background-color: #f8fafc;
    font-size: 1.6rem; /* 设置 body 默认字体为 16px */
    line-height: normal; /* 使用 normal 或具体的无单位值，如 1.5 */
    font-family: 'SourceHanSansCN', sans-serif; /* 设置全局默认字体 */
    font-weight: 400; /* 设置全局默认字重 */
}

.pb-2d5{
    padding-bottom:2.5rem;
}
.pt-10{
    padding-top:10rem;
}
.error-message-full-width {
    flex-basis: 100% !important;
}
/* --- Header 样式 --- */

/* 顶部 Header Bar */
.top-header-bar {
    background-color: #252525;
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: #ffffff;
}
.logo-link img {
    max-height: 80px;
    width: auto;
}
.header-separator {
    height: 25px;
    width: 1px;
    background-color: #929292;
    margin-left: 2.4rem;
    margin-right: 2.4rem;
    transform: translateY(0.6rem);
}
.header-slogan {
    font-family: 'SourceHanSansCN', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    color: #19b4b3;
    transform: translateY(0.5rem);
}
.contact-separator {
    height: 25px;
    width: 1px;
    background-color: #929292;
    margin-right: 3rem;
    transform: translateY(0.6rem);
}
.contact-info {
    display: flex;
    align-items: center;
}
.contact-icon {
    margin-right: 1rem;
}
.contact-icon img {
    display: block;
}
.contact-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-label {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 1.8rem;
    line-height: 1.8rem;
}
.contact-number {
    color: #19b4b3;
    font-family: 'SourceHanSansCN', sans-serif;
    font-weight: 500;
    font-size: 2.8rem;
    margin-top: 0.5rem;
    line-height: 2.8rem;
}

/* --- 主导航栏 (Main Navigation Bar) --- */
.main-nav-bar {
    background-color: #1c1c1c;
    height: 4.8rem;
    display: flex;
    align-items: center;
}
.main-nav-bar .navbar {
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
}
.main-nav-bar .navbar-collapse {
    flex-grow: 1;
}
.main-nav-bar .navbar-nav {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: stretch;
    margin: 0;
    padding: 0;
}
.main-nav-bar .navbar-nav .nav-item {
    flex-grow: 1;
    margin: 0 !important;
    display: flex;
    align-items: stretch;
}
.main-nav-bar .navbar-nav .nav-link {
    height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: transparent;
    padding: 0 1rem;
    white-space: nowrap;
    flex-grow: 1;
    text-align: center;
    transition: background-color 0.2s ease-in-out;
    border-radius: 0 !important;
    font-family: 'SourceHanSansCN', sans-serif;
    font-weight: 400;
    font-size:1.6rem;
}
.main-nav-bar .navbar-nav .nav-link:not(.active):not(.show):hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.main-nav-bar .navbar-nav .nav-link.active,
.main-nav-bar .navbar-nav .nav-item.show > .nav-link {
    background-color: #19b4b3;
    color: #ffffff;
}
.main-nav-bar .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
    margin-top: 0;
    font-size: 1.4rem;
}
.main-nav-bar .dropdown-item {
    color: #333333;
    padding: 0.5rem 1.5rem;
}
.main-nav-bar .dropdown-item:hover,
.main-nav-bar .dropdown-item:focus {
    color: #111111;
    background-color: #f0f0f0;
}
.main-nav-bar .dropdown-divider {
    border-top: 1px solid #dee2e6;
}
.main-nav-bar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
    margin-right: 1rem;
}
.main-nav-bar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- End Header Styles --- */

/* --- Hero 幻灯片轮播区域 --- */
.hero-slider-section {
    height: 58.4rem;
    position: relative;
    overflow: visible;
    background-color: #343a40;
}
.hero-slider-section .carousel,
.hero-slider-section .carousel-inner,
.hero-slider-section .carousel-item {
    height: 100%;
}
.hero-slider-section .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.hero-overlay-content {
    z-index: 2;
}
.hero-overlay-content .text-center {
    max-width: 800px;
    width: 90%;
}
.hero-tagline {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 6.6rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    line-height: 1.2;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: baseline;
    white-space: nowrap;
}
.hero-tagline .highlight {
    color: #19b4b3;
}
.hero-tagline > span:nth-of-type(2) {
    margin-left: 5rem;
}
.hero-subtitle {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-weight: 300;
    font-size: 4.6rem;
    color: #ffffff;
    line-height: 4.6rem;
    margin-top: 3rem;
}
.hero-search-form {
    max-width: 73.8rem;
    margin-left: auto;
    margin-right: auto;
    margin-top:6rem;
}
.hero-search-input-group {
    width: 73.8rem;
    height: 6.2rem;
}
.hero-search-input-group .form-control {
    width: 58.7rem !important;
    flex: 0 0 58.7rem !important;
    height: 100%;
    font-size: 1.6rem;
    border: none;
    border-radius: 0.5rem 0 0 0.5rem;
    padding-left: 3rem;
    color: #c1c1c1;
}
.hero-search-input-group .form-control::placeholder {
    color: #c1c1c1;
    opacity: 0.9;
}
.hero-search-input-group .form-control:focus {
    box-shadow: none;
}
.hero-search-input-group .btn-hero-search {
    width: 15.1rem;
    flex: 0 0 15.1rem !important;
    height: 100%;
    background-color: #19b4b3;
    color: #ffffff;
    border: none;
    font-size: 1.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 0.5rem 0.5rem 0;
    transition: background-color 0.2s ease;
}
.hero-search-input-group .btn-hero-search:hover {
    background-color: #149a99;
    color: #ffffff;
}
.hero-description {
    font-size: 2rem;
    line-height: 2rem;
    color:#ffffff;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-weight: 300;
    margin-top: 3rem;
}
/* --- 交易流程说明区域样式 --- */
.transaction-flow {
    position: absolute;
    bottom: -5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1400px;
    max-width: 95%;
    height: 8rem;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.transaction-flow .container {
    width: 100%;
    max-width: 100%;
    padding: 0 3rem 0 5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.flow-steps-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 1rem;
}
.flow-step {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.flow-guarantee {
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-left: 1px solid #000000;
    padding-left: 3rem;
    margin-left: 1.5rem;
}
.flow-icon {
    font-size: 2rem;
    color: #19b4b3;
    margin-right: 0.8rem;
    flex-shrink: 0;
}
.flow-guarantee .flow-icon {
    color: #ffc107;
}
.flow-text {
    font-size: 1.8rem;
    color: #242424;
    line-height: 1;
    margin-left:.8rem;
}
.flow-guarantee .flow-text {
    color: #19b4b3;
}
.flow-separator {
    color: #242424;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 0.5rem;
    flex-shrink: 0;
}
.flow-separator-vertical {
    display: none;
}
/* --- End 交易流程说明区域样式 --- */
.hero-slider-section .carousel-control-prev,
.hero-slider-section .carousel-control-next {
    z-index: 3;
}
.hero-slider-section .carousel-control-prev-icon,
.hero-slider-section .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    background-size: 60% 60%;
}
.hero-slider-section .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    margin: 0 5px;
}
.hero-slider-section .carousel-indicators .active {
    background-color: #ffffff;
}
/* --- End Hero 幻灯片轮播区域 --- */

.demand-square-title-area {
    background: #f6f6f6;
    padding-top: 12rem;
    padding-bottom: 4rem;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.demand-square-content-area {
    width: 100%;
    background: #ededed;
    padding-top:3.4rem;
    padding-bottom:2.9rem;
}
.section-title {
    font-family: 'SourceHanSansCN', sans-serif;
    font-weight:  500;
    color: #19b4b3;
    font-size: 4rem;
    letter-spacing: 0.05em;
}
.btn-more-demands{
    color:#8b8b8b;
    text-decoration: none;
}
.demand-square-cards-row {
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
    width: 100%;
    gap: 0 2.3rem;
}
.demand-square-card {
    flex: 0 0 calc((100% - 6.9rem)/4);
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    display: flex;
    align-items: stretch;
    margin-bottom: 2rem;
}
@media (max-width: 991.98px) {
    .demand-square-card {
        flex: 0 1 48%;
        margin-bottom: 2rem;
    }
    .main-nav-bar{
        height:auto;
    }
    /* 确保导航栏容器高度稳定 */
    .main-nav-bar .container {

        align-items: center; /* 垂直居中汉堡图标和右侧认证图标 */
        position: relative; /* 为内部绝对定位的菜单提供更精确的参照（如果需要） */
    }

    /* 针对移动端的 .navbar-collapse 元素 */
    .main-nav-bar .navbar-collapse {
        position: absolute;   /* 关键：始终绝对定位，使其脱离文档流 */
        top: 100%;            /* 定位在导航栏的紧下方 */
        left: 0;
        right: 0;
        width: 100%;          /* 占据整个导航栏的宽度 */
        z-index: 1020;        /* 层级低于导航栏本身(1030)，但高于页面其他内容 */
        background-color: var(--main-navbar-bg); /* 必须设置背景色，与导航栏一致 */

        /* 当菜单展开 (show) 或正在展开 (collapsing) 时的样式 */
        &.show,
        &.collapsing {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1); /* 可选的顶部边框 */
            max-height: calc(100vh - 56px); /* 限制最大高度，例如视口高度减去导航栏高度 */
            overflow-y: auto; /* 内容过多时可滚动 */
            /* Bootstrap 的 JS 会处理 height 动画，我们这里主要负责定位和外观 */
        }
        /* 当菜单完全折叠时，Bootstrap JS 会设置 display: none 或 height: 0 */
    }

    /* 确保移动端右侧认证图标的下拉菜单在主折叠菜单之上 */
    .main-nav-bar .d-lg-none .dropdown-menu {
        z-index: 1021; /* 比 .navbar-collapse 的 z-index (1020) 稍高 */
    }

    /* 如果汉堡图标在某些情况下仍然有微小偏移，可以尝试给它一个明确的 z-index */
    /* .main-nav-bar .navbar-toggler {
        z-index: 1031; /* 高于导航栏本身，确保在最前 */
    /* } */
}
@media (max-width: 575.98px) {
    .demand-square-card {
        flex: 0 1 100%;
        margin-bottom: 1.5rem;
    }
}
.card-content {
    padding: 2.3rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
.card-demand-title {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: #333333;
    line-height: 2rem;
    margin-top: 0;
    margin-bottom: 0;
}
.card-demand-tags,
.card-demand-desc,
.card-demand-row {
    margin-top: 1.6rem;
}
.card-demand-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top:1.6rem;
}
.demand-tag {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    color: #5a5a5a;
    border-radius: 6px;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.4rem;
    padding: 0.6rem 0.9rem;
    margin-right: 1rem;
}
.demand-tag, .demand-tag-main {
    box-sizing: border-box;
}
.demand-tag-main {
    background: #fff6f5;
    border: 1px solid #ff0000;
    color: #ff0000;
}
.demand-tag-icon {
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.4rem;
}
.demand-tag:last-child {
    margin-right: 0;
}
.card-demand-desc {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2rem;
    color: #8b8b8b;
    max-height: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
    background: transparent;
}
.card-demand-row-4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:2rem;
}
.demand-deliver-date {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.6rem;
    color: #535353;
}
.demand-money {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.6rem;
    color: #ff0000;
}
.card-demand-row-5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:2rem;
}
.demand-user {
    display: flex;
    align-items: center;
    color: #8b8b8b;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.4rem;
}
.demand-user-avatar {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    margin-right: 0.8rem;
}
.demand-stats {
    display: flex;
    align-items: center;
    color: #8b8b8b;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 1.4rem;
    line-height: 1.4rem;
}
.demand-eye-icon{
    margin: 0 0.4rem;
}
.demand-task-icon {
    margin: 0 0.4rem 0 1rem;
}
.card-demand-row-6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:2.6rem;
}
.demand-pubdate {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.4rem;
    color: #8b8b8b;
}
.demand-apply-btn {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.8rem;
    color: #fff;
    background: #19b4b3;
    border: none;
    border-radius: 999px;
    padding: 0.8rem 1.6rem;
    cursor: pointer;
    outline: none;
    transition: background 0.2s;
    text-decoration: none;
}
.demand-apply-btn:hover {
    background: #159a99;
}

/* --- 明星设计师区域样式 --- */
.star-expert-section {
    background-color: #f6f6f6;
    padding-top: 7.3rem;
}
.star-expert-title-area {
    margin-bottom:4.1rem;
}
.designer-star-tabs {
    margin-top: 0;
    /*margin-bottom: 3rem;*/
}
.designer-star-tab-row {
    margin-bottom: 3rem;
}
.designer-star-tab {
    font-family: 'SourceHanSansCN', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2rem;
    border: none;
    border-radius: 999px;
    padding: 1.6rem 6.2rem;
    cursor: pointer;
    outline: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    background-color: transparent;
    color: #666666;
}
.designer-star-tab.active,
.designer-star-tab:hover {
    background-color: #19b4b3;
    color: #ffffff;
}
.star-expert-cards-row {
    display: flex;
    justify-content: flex-start;
    gap: 0 2.3rem;
    width: 100%;
    min-width: 0;
}
.star-expert-card {
    flex: 0 0 calc((100% - 6.9rem)/4);
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* -------- 新增：带顶部大图新卡片结构及样式 -------- */
.card-with-top-img .card-top-img {
    width: 100%;
    /*height: 12rem; */
    max-height: 21rem;
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-with-top-img .card-top-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 新卡片顶部三行布局，全部垂直居中 */
.card-top-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.2rem 0 1.4rem 0;
    box-sizing: border-box;
    margin:0!important;
}
/* 第一行：名称+职位 */
.star-expert-header {
    display: flex;
    align-items: center;
    /*gap: 1.2rem;*/
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: #333;
    margin-top: 2.2rem;
    margin-bottom: 0;
}
.star-expert-header .star-expert-name {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: #000;
}
.star-expert-header .star-expert-title {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: #000;
    margin-left: .5rem;
}
/* 第二行：tag标签 */
.star-expert-tags {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
}
.star-expert-tags .star-expert-tag {
    background: #ffedd6;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: #434343;
    border-radius: 999px;
    padding: 0.3rem 1.3rem;
    display: inline-block;
}
/* 第三行：五星评价，复用star-expert-rating即可 */
.card-top-new .star-expert-rating {
    justify-content: center;
    margin-bottom: 2.2rem;
    width: 100%;
}

/* 新卡片中案例区，双行省略 */
.case-text-lines-double {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.case-text-line-double {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #999999;
    line-height: 1.6;
    margin: 0;
    background: none;
    border: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
}
.case-text-line-double span {
    color: #19b4b3;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
}

/* 新增：展会执行卡片结构样式 */
.exhibition-execution-card {
    border: 1px solid #19b4b3;
    box-sizing: border-box;
    padding: 2rem;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 0;
    flex: 0 0 calc((100% - 6.9rem)/4); /* 保持和原卡片一致 */
    max-width: calc((100% - 6.9rem)/4);
    min-width: 0;
    box-shadow: none; /* 如需阴影可恢复 */
}
.exhibition-card-inner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 3.5rem; /* 35px 间距 */
}

/* 左侧头像和姓名 */
.exhibition-card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 8rem;
}
.exhibition-card-left .star-expert-avatar {
    margin-bottom: 2rem; /* 20px */
}
.exhibition-card-left .star-expert-avatar img{
    margin-right: 0;
}
.exhibition-avatar-name {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #000;
}
/* 右侧信息 */
.exhibition-card-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 0;
    gap: 1.4rem; /* 14px 行间距 */
}
.exhibition-info-row {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #999999;
    line-height: 1.4;
}

/* -------- end 新增 -------- */

/* --------- 原有明星设计师卡片 --------- */
.card-top {
    margin: 3rem 2.3rem 2.1rem 2.3rem;
}
.star-expert-info {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}
.star-expert-avatar img {
    width: 8rem;
    height: 8rem;
    border: .5rem solid #e9e9e9;
    border-radius: 50%;
    margin-right: 2.3rem;
}
.star-expert-details .star-expert-name {
    font-size: 1.8rem;
    font-family: 'Microsoft YaHei', sans-serif;
    font-weight: bold;
    color: #333333;
    margin-bottom: 1.8rem;
}
.star-expert-tag {
    background: #19b4b3;
    color: #ffffff;
    font-size: 1.4rem;
    font-family: 'Microsoft YaHei', sans-serif;
    font-weight: 400;
    border: none;
    border-radius: 999px;
    padding: 0 0.6rem;
    margin-left: 0.5rem;
}
.star-expert-meta,
.star-expert-experience {
    font-size: 1.4rem;
    color: #8b8b8b;
    margin-bottom: 0.3rem;
}
.star-expert-rating {
    display: flex;
    font-family: 'Microsoft YaHei', sans-serif;
    font-weight: 400;
    align-items: center;
    font-size: 1.6rem;
    color: #808080;
}
.rating-stars {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}
.rating-stars .star {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right:.2rem;
    background-image: url('/images/star-border.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
    overflow: hidden;
    --star-fill-percentage: 0;
}
.rating-stars .star::before {
    content: '';
    display: block;
    height: 100%;
    width: var(--star-fill-percentage, 0%);
    /*width: calc(var(--star-fill-percentage) * 1%);*/
    background-image: url('/images/star-gold.svg');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: left center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: width 0.3s ease;
}
.rating-label,.rating-score {
    margin-left: 1.5rem;
    font-weight: 400;
    color: #808080;
}
.card-middle{
    min-width: 0;
}
.card-middle .case-images {
    display: flex;
    gap: .4rem;
}
.card-middle .case-images img {
    flex: 1;
    object-fit: cover;
    width:164px;
    height:150px;
}
.card-middle .case-text-lines{
    margin:0 2.3rem;
    border-top:1px solid #d4d4d4;
    padding-top:2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem 0;
}
.card-middle .case-text-line {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #999999;
    line-height: 1.6;
    margin: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-middle .case-text-line span {
    color: #19b4b3;
}
.card-bottom {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    padding-bottom:2rem;
}
.btn-more-cases,
.btn-hire {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 32px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    vertical-align: middle;
    border-radius: 999px;
}
.btn-more-cases {
    color: #3a3a3a;
    background-color: #ebebeb;
}
.btn-hire {
    color: #fff;
    background: #19b4b3;
}
.btn-hire:hover {
    background: #159a99;
}
.btn-more-cases + .btn-hire {
    margin-left: 18px;
}
.designer-star-swiper-area {
    width: 100%;
    padding: 3rem 0;
    overflow: hidden;
}
.designer-star-swiper-wrapper {
    width: 100%;
}
.designer-star-swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.designer-star-swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: cover;
}



/* 新闻动态主体布局 */
.news-dynamic-main {
    display: flex;
    gap: 3.5rem;
    align-items: flex-start;
    /* 保证左右部分宽度 */
    margin-bottom: 3rem;
}
.news-dynamic-img {
    width: 625px;
    height: 400px;
    overflow: hidden;
    flex-shrink: 0;
    background: #ececec;
    display: flex;
    align-items: center;
    justify-content: center;
}
.news-dynamic-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-dynamic-list-area {
    width: 740px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding-left:20px;
}
/* Tab 分类 */
.news-tabs {
    display: flex;
    align-items: center;
    margin-bottom: 2.8rem;
    margin-top: 0;
}
.news-tab {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 1.86rem;
    font-weight: 400;
    color: #333;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0 1.5rem 0 0;
    transition: color 0.2s;
}
.news-tab:last-child {
    padding-right: 0;
}
.news-tab.active {
    color: #19b4b3;
    font-weight: 500;
}
.news-tab-divider {
    display: inline-block;
    width: 2px;
    height: 2.1rem;
    background: #7c7a79;
    margin: 0 1.5rem 0 0;
    vertical-align: middle;
}
/* 新闻列表 */
.news-list {
    width: 100%;
}
.news-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0 2rem 0;
    border-bottom: 1px dashed #e0e0e0;
    margin-bottom:2rem;
    text-decoration: none;  /* 去除下划线 */
    color: inherit;  /* 保持原有文本颜色 */
    cursor: pointer; /* 显示指针光标 */
}
.news-list-item:last-child {
    border-bottom: none;
    margin-bottom:0;
}
.news-list-main {
    flex: 1 1 auto;
    padding-right: 1.5rem;
}
.news-title {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 2.13rem;
    font-weight: bold;
    color: #222;
    margin-bottom: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-desc {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: #898989;
    line-height: 1.4;
    max-width: 55rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* 只显示两行 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;            /* 允许换行但限制行数 */
}
.news-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 7.5rem;
    text-align: right;
    color: #898989;
    line-height: 1.1;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: bold;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.news-date .news-date-md {
    font-size: 2.667rem; /* 26.67px */
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: bold;
    color: inherit;
}

.news-date .news-date-year {
    font-size: 1.867rem; /* 18.67px */
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: bold;
    color: inherit;
    margin-top: 0.2rem;
}

/* 激活状态 */
.news-list-item.active .news-date,
.news-list-item.active .news-date .news-date-md,
.news-list-item.active .news-date .news-date-year,
.news-list-item:hover .news-date,
.news-list-item:hover .news-date .news-date-md,
.news-list-item:hover .news-date .news-date-year {
    color: #19b4b3;
}
.news-list-bottom-border {
    width: 100%;
    height: 1px;
    background: #d4d4d4;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}
/* 行业广告招募模块 */
.industry-ad-row-group {
    display: flex;
    flex-direction: column;
    gap: 2.2rem 0; /* 行间距22px */
    width: 100%;
}

.industry-ad-row {
    display: flex;
    flex-direction: row;
    gap: 1.6rem; /* 列间距16px */
    width: 100%;
}

.industry-ad-card {
    flex: 1 1 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: stretch;
    min-width: 0;
}

.industry-ad-img {
    width: 100%;
    height: 170px;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.industry-ad-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 标题居中 */
.industry-ad-title {
    text-align: center;
    font-family: 'SourceHanSansCN', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: #222;
    padding: 1.8rem 1rem 2rem 1rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 六大保障标签区域 */
.industry-guarantee-row-group {
    display: flex;
    flex-direction: column;
    gap: 4rem 0; /* 两行间距40px */
    margin-top: 7.5rem;
    margin-bottom: 0;
}
.industry-guarantee-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0; /* 水平间距由space-around撑开 */
    width: 100%;
}
.guarantee-tag-btn {
    border: 1px solid #000;
    background: none;
    border-radius: 6px;
    min-width: 0;
    width: 400px;
    height: 70px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow .15s;
    box-sizing: border-box;
}

.guarantee-tag-btn:hover,
.guarantee-tag-btn:active {
    box-shadow: 0 2px 12px rgba(25,180,179,.10);
    border-color: #19b4b3;
}

.guarantee-icon {
    width: 26px;
    display: block;
    margin-right: 15px;
}
.guarantee-text {
    text-align: center;
    font-family: 'SourceHanSansCN', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    color:#474747;
    white-space: nowrap;
    display: block;
}
.blank-char {
    display: inline-block;
    width: 1em;              /* 1个字宽度 */
    height: 1em;             /* 可选，和字体一致 */
    visibility: hidden;      /* 或 color: transparent; */
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}




.site-footer {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ====== 第一行 ====== */
.footer-top {
    background: #272d33;
    width: 100%;
    padding: 0;
}
.footer-top .container {
    display: flex;
    justify-content: center;
    padding: 0;
}
.footer-top-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 1330px;
    height: 170px;
    background: transparent;
    position: relative;
    z-index: 1;
    box-sizing: content-box;
    padding: 0;
    margin:60px auto 70px auto;
}
.footer-col {
    /*flex: 1 1 0;*/
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* LOGO区 */
.footer-logo-area {
    flex: 0 0 310px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-logo-img {
    width: 146px;
    height: auto;
    display: block;
}

/* 快捷导航 */
.footer-nav-area {
    flex: 0 0 348px;
    display: flex;
    flex-direction: row;
    gap: 36px;
    justify-content: center;
    align-items: center;
}
.footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-link {
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    transition: color .2s;
}
.footer-link:hover {
    color: #19b4b3;
}

/* 二维码 */
.footer-qrcode-area {
    flex: 0 0 272px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.footer-qrcode-img {
    width: 115px;
    height: 115px;
    background: #fff;
    margin-bottom: 8px;
}
.footer-qrcode-desc {
    color: #ccc;
    font-size: 13px;
    text-align: center;
    line-height: 1.6;
}

.footer-contact-area {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;        /* 水平居中整个区域 */
    justify-content: center;
    gap: 15px;
    min-width: 0;
}
.footer-contact-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 300px;           /* 控制单条最大宽度，可按实际调整 */
    margin: 0 auto;             /* 保证整体居中 */
    box-sizing: border-box;
}

.footer-contact-icon {
    width: 25px;
    min-width: 25px;
    height: auto;
    margin-right: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.footer-contact-icon img {
    width: 25px;
    height: auto;
    display: block;
}

.footer-contact-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* 三行内容左对齐 */
    justify-content: center;
    min-width: 0;
}

.footer-contact-main {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 2px;
    word-break: break-all;
}

.footer-contact-sub {
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #808080;
    line-height: 1.3;
    word-break: break-all;
}

/* 保持footer-col对齐 */
.footer-col.footer-contact-area {
    align-items: center;
    justify-content: center;
}

/* 分隔竖线 */
.footer-divider {
    width: 1px;
    height: 170px;
    align-self: center;
    background: #383d43;
    margin: 0;
    display: block;
}

/* ====== 第二行 ====== */
.footer-bottom {
    background: #161b1f;
    padding: 0;
}
.footer-bottom-content {
    padding: 14px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-copyright {
    color: #777;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.2px;
}



/* 响应式（移动端可参考调整） */
@media (max-width: 1200px) {
    .news-dynamic-main {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
    }
    .news-dynamic-img,
    .news-dynamic-list-area {
        width: 100%;
        max-width: 100%;
        padding:0;
    }
}
@media (max-width: 800px) {
    .news-dynamic-img {
        height: 220px;
    }
    .news-dynamic-list-area {
        width: 100%;
        min-width: 0;
    }
    .news-tabs{
        margin-top:2rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 991.98px) {
    .star-expert-section{
        padding-top:5rem;
    }
    .star-expert-cards-row {
        gap: 0 2rem;
    }
    .star-expert-card {
        flex: 0 0 calc((100% - 2rem)/2);
        margin-bottom: 2rem;
    }
    .designer-star-swiper-slide {
        height: 5rem;
    }
    .card-with-top-img .card-top-img {

    }
    .card-top-new {
        min-height: 12rem;
        padding: 0 1.2rem;
    }
    .industry-ad-row {
        flex-direction: column;
        gap: 2.2rem 0;
    }
    .industry-ad-card {
        min-width: 0;
        overflow: unset;
    }
    .industry-ad-img {
        height: 130px;
    }
    .guarantee-tag-btn {
        width: 130px;
        height: 60px;
        font-size: 1.3rem;
        padding: 0 8px;
    }
    .guarantee-icon {
        width: 22px;
        height: 22px;
        margin-bottom: 4px;
    }
}
@media (max-width: 575.98px) {
    .carousel-control-next, .carousel-control-prev{
        display:none;
    }
    .hero-description{
        font-size:1.4rem;
    }
    .star-expert-cards-row {
        flex-direction: column;
        gap: 1.5rem 0;
    }
    .star-expert-card {
        flex: 1 1 100%;
        margin-bottom: 0;
    }
    .designer-star-swiper-slide {
        height: 4rem;
    }
    .card-with-top-img .card-top-img {

    }
    .card-top-new {
        min-height: 9rem;
        padding: 0 0.8rem;
    }

    .news-dynamic-main {
        gap: 1.5rem;
    }
    .news-dynamic-img {
        height: 140px;
    }
    .news-list-item {
        /*flex-direction: column;*/
        gap: 1rem;
    }
    .news-title, .news-desc {
        max-width: 100%;
        white-space: normal;
    }
    .industry-ad-row-group {
        gap: 1.2rem 0;
    }
    .industry-ad-row {
        flex-direction: column;
        gap: 1.2rem 0;
    }
    .industry-ad-img {
        height: 90px;
    }

    .industry-guarantee-row-group {
        margin-top:3rem;
        gap: 2rem 0;
    }
    .industry-guarantee-row {
        flex-direction: column;
        gap: 1.2rem 0;
        justify-content: flex-start;
        align-items: stretch;
    }
    .guarantee-tag-btn {
        width: 100%;
        min-width: 0;
        font-size: 1.1rem;
        height: 44px;
        padding: 0 6px;
        margin: 0 0 0.8rem 0;
    }
    .industry-ad-title{
        font-size:1.6rem;
        padding:1rem;
    }
}
/* Add any other custom global styles here */
/* -------------------- hero-search-input-group 响应式 -------------------- */
@media (max-width: 991.98px) {
    .hero-search-form {
        max-width: 100%;
        margin-top: 3rem;
    }
    .hero-search-input-group {
        width: 100%;
        min-width: 0;
        flex-direction: column;
        height: auto;
    }
    .hero-search-input-group .form-control {
        flex: 1 1 0 !important;
        padding-left: 1.2rem;
        font-size: 1.5rem;
        height: 4.6rem;
    }
    .hero-search-input-group .btn-hero-search {
        width: 100%;
        border-radius: 0 0 0.5rem 0.5rem;
        height: 4.6rem;
        font-size: 1.6rem;
        flex:0 0 10rem !important;
    }
}
@media (max-width: 575.98px) {
    .hero-search-input-group {
        width: 100%;
        min-width: 0;
    }
    .hero-search-input-group .form-control,
    .hero-search-input-group .btn-hero-search {
        font-size: 1.3rem;
        height: 3.8rem;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
    .hero-tagline{
        font-size:2.6rem;
    }
    .hero-subtitle{
        font-size:1.8rem;
    }

    .hero-search-input-group {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        height: 3.8rem;
    }
    .hero-search-input-group .form-control {
        flex: 1 1 0;
        min-width: 0;
        font-size: 1.3rem;
        height: 100%;
        border-radius: 0.5rem 0 0 0.5rem;
        padding-left: 0.8rem;
        /* 不要设置width，否则会和flex冲突 */
    }
    .hero-search-input-group .btn-hero-search {
        flex: 0 0 auto;
        width: auto;
        min-width: 72px;
        font-size: 1.3rem;
        height: 100%;
        border-radius: 0 0.5rem 0.5rem 0;
        margin-left: -1px;
        padding: 0 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* -------------------- transaction-flow 响应式 -------------------- */
@media (max-width: 1400px) {
    .transaction-flow {
        width: 98vw;
        min-width: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media (max-width: 991.98px) {
    .transaction-flow {
        width: 98vw;
        min-width: 0;
        height: auto;
        padding: 0.8rem 0.5rem;
        bottom: -2rem;
    }
    .transaction-flow .container {
        padding: 0 0.5rem;
    }
    .flow-steps-container {
        flex-direction: column;
        gap: 1rem 0;
        align-items: flex-start;
    }
    .flow-step, .flow-guarantee {
        font-size: 1.4rem;
    }
    .flow-guarantee {
        padding-left: 1.5rem;
        margin-left: 0.5rem;
        border-left: 1px solid #000;
    }
}
@media (max-width: 575.98px) {
    .transaction-flow {
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
        min-width: 0;
        padding: 0.4rem 0;
        border-radius: 0;
        box-shadow: none;
    }
    .transaction-flow .container {
        padding: 0 0.2rem;
    }
    .flow-steps-container {
        gap: 0.5rem 0;
    }
}

/* -------------------- designer-star-tab-row 响应式 -------------------- */
@media (max-width: 991.98px) {
    .designer-star-tab-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 1rem 0.8rem;
        margin-bottom: 2rem;
    }
    .designer-star-tab {
        font-size: 1.4rem;
        padding: 1rem 2.6rem;
    }
}
@media (max-width: 575.98px) {
    .designer-star-tabs, .designer-star-tab-row {

        gap: 0.6rem 0;
        align-items: stretch;

    }
    .designer-star-tab {
        width: 30%;
        font-size: 1.2rem;
        padding: 0.7rem 1.2rem;
        text-align: center;
    }
}

/* -------------------- star-expert-cards-row 响应式 -------------------- */
@media (max-width: 991.98px) {
    .star-expert-cards-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.5rem 0;
    }
    .star-expert-card {
        flex: 0 0 48%;
        min-width: 0;
        margin-bottom: 1.2rem;
    }
}
@media (max-width: 575.98px) {
    .star-expert-cards-row {
        flex-direction: column;
        gap: 1.2rem 0;
    }
    .star-expert-card {
        flex: 1 1 100%;
        width: 100%;
        margin-bottom: 0;
    }
}

/* -------------------- site-footer 响应式 -------------------- */
@media (max-width: 1330px) {
    .footer-top-content {
        width: 100%;
        min-width: 0;
        max-width: 100vw;
    }
}
@media (max-width: 991.98px) {
    .footer-top-content {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        height: auto;
        padding: 34px 0 24px 0;
        gap: 26px;
        margin: 40px auto 30px auto;
    }
    .footer-divider {
        display: none;
    }
    .footer-col {
        align-items: center;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        flex:0 0 150px;
    }
    .footer-contact-area {
        align-items: flex-start;
        justify-content: flex-start;
    }
}
@media (max-width: 575.98px) {
    .footer-top-content {
        gap: 18px;
        padding: 16px 0 10px 0;
        margin: 20px auto 10px auto;
    }
    .footer-logo-img {
        width: 100px;
    }
    .footer-qrcode-img {
        width: 72px;
        height: 72px;
    }
    .footer-bottom-content {
        padding: 8px 0;
    }
    .footer-nav-area {
        /*flex-direction: column;
        gap: 4px;*/
    }
    .footer-contact-item {
        max-width: 100%;
        padding-left:90px;
    }
    .footer-contact-main {
        font-size: 1.3rem;
    }
    .footer-contact-sub {
        font-size: 0.92rem;
    }
}
@media (max-width: 991.98px) {
    .star-expert-card,
    .exhibition-execution-card {
        flex: 0 0 48%;
        max-width: 100%;
        min-width: 0;
    }
    .star-expert-cards-row,
    .exhibition-cards-row {
        flex-wrap: wrap;
        gap: 1.2rem 0;
    }
}
@media (max-width: 575.98px) {
    .star-expert-card,
    .exhibition-execution-card {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .star-expert-cards-row,
    .exhibition-cards-row {
        flex-direction: column;
        gap: 1rem 0;
    }
}


/* 登录弹窗 */
.modal-lg{
    width: 854px;
    max-width: 854px;
}
.custom-modal-content {
    border-radius: 18px;
    overflow: hidden;
    background: none;
    border: none;
}
.custom-modal-main {
    width: 854px;
    height: 525px;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}
.custom-modal-left {
    width: 328px;
    background: url('/images/left-login-bg.jpg') center center/cover no-repeat;
    color: #fff;
    padding: 55px 24px;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    min-height: 476px;
    position: relative;
}
.custom-modal-logo {

}
.custom-modal-slogan {
    font-size: 1.6rem;
    font-weight: 400;
    text-align: center;
    margin-top:1.5rem;
    margin-bottom: 3.5rem;
}
.custom-modal-list {
    padding-left: 0;
    list-style: none;
    font-size: 1.6rem;
}
.custom-modal-list li {
    margin-bottom: 2.5rem;
    padding-left: 1.1em;
    position: relative;
    line-height:1;
}

.custom-modal-right {
    width: 526px;
    background: #fff;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    min-height: 476px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 75px 80px 40px 80px;
}
.custom-form-content-wrapper {
    overflow-y: auto;   /* 当内容高度超过此容器高度时，显示垂直滚动条 */
    flex-grow: 1;       /* 允许此容器占据在 .custom-modal-right 中垂直方向上的所有可用空间
                           (在顶部Tabs/标题和底部社交链接/提示之间) */
    min-height: 0;      /* 非常重要！防止flex子元素在内容过多时无限撑开父元素，确保滚动条能出现 */
    padding-bottom: 1rem; /* 在滚动内容的底部增加一些内边距，避免内容紧贴滚动条末端 */
    /* 如果滚动条出现时挤压了内容，可以考虑给右侧也加一点padding，但这取决于浏览器滚动条样式 */
    /* padding-right: 5px; */
}


.form-block-container .custom-login-form,
.form-block-container #wechatQrBlock {
    display: flex;
    flex-direction: column; /* 确保表单内部元素垂直排列 */
}

/* 特别针对微信二维码块，如果其内容少于min-height，使其内容垂直居中 */
#wechatQrBlock.custom-login-form {
    justify-content: center;
    align-items: center;
}



/* 登录方式tab容器样式 */
.custom-login-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 62px;
    margin-bottom: 3.4rem;
}

/* 登录tab按钮基础样式 */
.custom-tab-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    font-weight: 500;
    color: #999999;
    border-bottom: 4px solid transparent;
    border-radius: 0;
    padding: 0 0 12px 0;
    transition: color 0.2s, border-color 0.2s;
    outline: none;
}

/* active样式 */
.custom-tab-btn.active,
.custom-tab-btn:focus {
    color: #17bab9;
    border-bottom: 4px solid #17bab9;
    background: none;
}
.custom-login-form .form-control {
    font-family: 'SourceHanSansCN', sans-serif;
    font-weight: 400;
    color:#c1c3ca;
    font-size: 1.6rem;
    padding: 8px 20px;
    border-radius: 5px;
}
.custom-login-form .form-control:focus {
    border-color: #17bab9;
    box-shadow: 0 0 0 0.1rem rgba(25,180,179,.15);
}
.custom-login-form .btn-primary {
    font-family: 'SourceHanSansCN', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    background: #17bab9;
    border: none;
    border-radius: 5px;
    height:48px;
    box-shadow: 0 4px 8px rgba(87,172,251,0.5);
}
.custom-login-form .btn-primary:hover,.btn-primary:active {
    background: #149a99!important;
}
.sms-code{
    width:calc(100% - 126px);
}
.btn-get-code {
    width: 108px;
    height: 42px;         /* 与输入框高度一致 */
    margin-left: 8px;
    background: #f0f0f0;
    color: #363636;
    border: none;
    border-radius: 5px;
    font-family: 'SourceHanSansCN', sans-serif;
    font-size: 16px;
    font-weight: 400;
    transition: background 0.2s;
    box-shadow: none;
    outline: none;
    display: inline-block;
    white-space: nowrap;
    padding: 0;
}
.btn-get-code:hover {
    background: #e0e0e0;
    color: #222;
}


.custom-social-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f3f3;
    border: none;
    margin-right: 8px;
    transition: background 0.2s;
    box-shadow: 0 2px 6px rgba(25,180,179,0.07);
    cursor: pointer;
}
.custom-social-btn img {
    width: 43px;
    height: 43px;
}
.custom-social-btn.bg-wechat { background: #e8f5e9; }
.custom-social-btn.bg-qq { background: #e3f1fa; }
.custom-social-btn.bg-wechat:hover { background: #c6efcc; }
.custom-social-btn.bg-qq:hover { background: #b3e0ff; }
.custom-agree-text {
    font-size: 1.6rem;
    color: #c1c3ca;
    margin-top: 6rem;
}
.custom-agree-link {
    color: #19b4b3;
    text-decoration: none;
    margin-left: 0.2rem;
}
.custom-agree-link:hover {
    text-decoration: underline;
}
#customHintLink{
    color:#c1c3ca;
    font-size:1.6rem;
    text-decoration:none;
}
#loginErrorBox {
    position: absolute;

    /* 调整 'top' 值，使其位于关闭按钮下方、其他主要内容之上。
       这个值需要你根据实际情况调整。例如 60px。
       如果你的关闭按钮在顶部，并且有一定高度和边距，你需要确保这个 top 值足够大，
       使得错误提示框不会与关闭按钮重叠。
    */
    top: 15px; /* 示例值，请根据你的关闭按钮和顶部布局调整 */

    left: 50%;  /* 将元素的左边缘定位到父容器的中心线 */
    transform: translateX(-50%); /* 将元素向左平移自身宽度的一半，从而使其中心与父容器的中心线对齐 */

    z-index: 10; /* 确保它在普通文档流内容之上。如果弹窗内有其他更高 z-index 的浮动元素，可能需要调整此值。
                    Bootstrap 模态框 (.modal) 的 z-index 约为 1050，
                    如果此错误框需要在模态框内其他绝对定位元素之上，可能需要类似 1056 这样的值，
                    但通常在父容器内，一个较小的正 z-index (如 10) 就足够了。
                 */

    /* Bootstrap 的 .alert 类默认有 margin-bottom，对于绝对定位元素，这个通常不需要，可以覆盖掉 */
    margin-bottom: 0 !important;
    width: 366px;
}
@media (max-width: 880px) {
    .custom-modal-main { width: 99vw; }
    .custom-modal-left { width: 220px; padding: 28px 8px;}
    .custom-modal-right { width: calc(99vw - 220px);}
}
@media (max-width: 600px) {
    .custom-modal-main { flex-direction: column; width: 98vw; min-width: 0;height:auto}
    .custom-modal-left, .custom-modal-right { width: 100%; min-width: 0; min-height: unset;}
    .custom-modal-left { border-radius: 18px 18px 0 0;display:none!important;}
    .custom-modal-right { border-radius: 0 0 18px 18px;padding:20px;}
    .custom-agree-text {font-size:1.4rem;margin-top: 3rem;}
}
/* 登录弹窗 */



/* 发布需求 */
/* 左侧面板样式 */
.left-panel {
    background: linear-gradient(to right, #16cccb, #17ccca);
    flex-shrink: 0; /* 防止面板在 flex 布局中收缩 */
    padding-top:6.6rem;
    padding-bottom:12.2rem;
}

/* 左侧面板在较大屏幕上的宽度和最小高度 */
@media (min-width: 992px) { /* Bootstrap lg 断点 */
    .left-panel {
        width: 350px;
        /* 根据你的布局调整 py-4/py-md-5 的实际值，这里假设容器垂直 padding 总共约 3rem 到 5rem */
        /* (2 * 2rem) for py-4 on container, (2 * 3rem) for py-md-5 on container */
        /* Choose a value that works, or set a fixed min-height if vh units are tricky */
        min-height: calc(100vh - 8rem); /* 这是一个估算值，你可能需要微调 */
        border-top-left-radius: 1.5rem!important;    /* Bootstrap 默认的 rounded 大小，你可以调整 */
        border-bottom-left-radius: 1.5rem!important; /* Bootstrap 默认的 rounded 大小，你可以调整 */
        border-top-right-radius: 0!important; /* 确保右侧没有圆角 */
        border-bottom-right-radius: 0!important; /* 确保右侧没有圆角 */
    }
}

/* 左侧面板中的 Logo 图片样式 */
.demand-left-panel-logo{
    width: 166px;
}
.demand-slogan-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 248px;
    height: 28px;
    background-color: rgba(20, 182, 181, 0.9);
    color: #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top:2rem;
    margin-bottom: 9rem; /* Slogan 容器下方间距 */
}

.demand-slogan-icon {
    margin-right: 8px;
    flex-shrink: 0;
}

.demand-slogan-text {
    font-size: 1.56rem;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-weight: 400;
    letter-spacing:.4px;
}
/* 步骤列表样式 */
.demand-process-list {
    width: 100%; /* 让列表项在内部自然排列 */
    padding-left: 0;
    /* 由于 left-panel 是 align-items-center, ul 如果不是100%宽会被居中。
       如果希望列表内容靠左，但整个列表块在视觉上不占满，需要调整ul的宽度或max-width */
}

.demand-step {
    /* d-flex flex-column align-items-center 已在 HTML 中 */
    /* 间距由 ::after 伪元素处理 */
    position: relative; /* 为了 ::after 元素的定位 (如果需要更复杂的定位) */
    width: 100%; /* 确保每个步骤项占据可用宽度，以便箭头能正确居中 */
}

.demand-step-icon {

    margin-bottom: 0.5rem; /* 图标和标题之间的间距 */
    /* rounded-circle 已在 HTML 中 */
    /* 如果不是 placeholder-image, 移除相关边框样式或自定义 */
    /* border: 1px solid rgba(255,255,255,0.2); */
}

.demand-step-title {
    font-size: 0.9rem; /* 步骤标题字体大小 */
    font-weight: 600; /* 步骤标题字重 */
    color: #ffffff;
    text-align: center; /* 确保标题文本居中 */
    /* margin-bottom: 0; (如果它是li中的最后一个可见元素) */
}

/* 向下箭头样式 */
.demand-step:not(:last-child)::after {
    content: '';
    display: block; /* 变为块级元素以应用 margin auto */
    width: 8px;     /* 形成V形的方形区域的边长 */
    height: 8px;
    border: solid white; /* 箭头颜色 */
    border-width: 0 2px 2px 0; /* 仅保留右边框和下边框，并设置线条粗细为2px */
    transform: rotate(45deg);  /* 旋转45度形成向下的V形 */
    margin-top: 0.75rem;       /* 箭头与上方内容的间距 */
    margin-bottom: 0.75rem;    /* 箭头与下方内容的间距 (即下一个li的间距) */
    margin-left: auto;         /* 水平居中箭头 */
    margin-right: auto;        /* 水平居中箭头 */
}



/* 右侧面板标题样式 */
.page-main-title {
    font-weight: bold;
    font-size: 28px;
    color: #3d3d3d;
}

/* 右侧面板统计数据文本样式 */
.page-stats-text {
    font-weight: bold;
    font-size: 24px;
    color: #3d3d3d;
}

/* 右侧面板统计数据高亮数字样式 */
.stats-highlight {
    color: #17cdcc;
}

/* 如果需要，可以为 right-panel 添加特定样式，但目前它主要由 Bootstrap 类控制 */
.right-panel {
    padding:4rem 3rem;
}
/* --- 新：表单整体和字段行样式 --- */
.demand-form {
    /* 表单整体的样式 */
}
.demand-form-field {
    display: flex;
    align-items: center; /* 默认垂直居中对齐 */
    margin-bottom: 2.4rem; /* 表单字段之间的垂直间距 */
    position: relative; /* 用于内部绝对定位的元素（如果需要） */
}
.demand-form-check-label{
    color:#f1952d!important;
}
.demand-form-check-input:checked{
    background-color: #f1952d!important;
    border-color: #f1952d!important;
}
.demand-form-field:last-of-type { /* 通常提交按钮行不需要下边距 */
    margin-bottom: 0;
}
.demand-form-field-align-start {
    align-items: flex-start; /* 用于多行内容，如textarea或复杂的上传控件 */
}

/* --- 新：表单标签区域 --- */
.demand-form-field-label-area {
    flex-shrink: 0; /* 防止标签区域收缩 */
    width: 110px;  /* 标签区域的总宽度，根据最长标签调整 */
    padding-right: 15px; /* 标签区域和控件区域之间的间距 */
    box-sizing: border-box;
    display: flex; /* 用于星号和label文本的对齐 */
    align-items: center; /* 垂直居中星号和label文本 */
    position: relative; /* For precise star positioning if needed */
}
.demand-form-field-align-start .demand-form-field-label-area {
    padding-top: calc((44px - (18px * 1.2)) / 2); /* 尝试使label文本与单行输入框的文本基线对齐 */
}

.demand-form-required-star,
.demand-form-optional-indicator {
    flex-shrink: 0;
    width: 1.3rem; /* 给星号或占位符一个固定宽度以保证对齐,*/
    text-align: left; /* 星号靠左 */
    font-weight: bold;
    line-height: 1; /* 确保星号高度不会影响对齐 */
}
.demand-form-required-star {
    color: #f57272;
}
.demand-form-optional-indicator {
    color: transparent; /* 占位符不可见 */
}

.demand-form-label-text { /* 这是实际的 <label> 元素 */
    font-size: 18px;
    font-weight: bold;
    color: #3d3d3d;
    margin-bottom: 0;
    line-height: 1.2; /* 调整行高 */
    white-space: nowrap; /* 防止标签文本换行 */
    /* padding-left: 5px; */ /* 如果星号宽度固定，这里就不需要额外padding */
}

/* --- 新：表单控件区域 --- */
.demand-form-field-control-area {
    flex-shrink: 0; /* 对于固定宽度的输入框，防止收缩 */
    /* 对于需要占据剩余空间的控件（如textarea），下面会有 .demand-form-field-control-area-fullwidth */
    position: relative; /* For error messages below inputs if needed */
}
.demand-form-field-control-area-fullwidth {
    flex-grow: 1; /* 允许此区域扩展以填充剩余空间 */
    flex-shrink: 1; /* 允许收缩 */
    min-width: 0; /* Necessary for flex-grow in some cases */
}

/* --- 新：表单输入框、选择框、文本域样式 --- */
.demand-form-input,
.demand-form-select,
.demand-category-select{
    width: 453px;
    height: 44px;
    max-width: 100%; /* 在小屏幕或窄容器中允许收缩 */
}
.demand-form-textarea {
    width: 100%; /* 填满其父容器 .demand-form-field-control-area-fullwidth */
    min-height: 120px; /* 示例最小高度 */
    height: auto; /* 允许根据内容调整高度，或设置固定值 */
}
.demand-form-input,
.demand-form-select,
.demand-form-textarea {
    border: 1px solid #e4e5eb;
    box-sizing: border-box;
    font-size: 1.6rem;
    padding: 0.5rem 0.75rem;
    color: #3d3d3d;
    border-radius: 0.25rem;
}
.form-control.is-invalid, .form-select.is-invalid, .demand-form-textarea.is-invalid { /* Livewire is-invalid class */
    border-color: #dc3545 !important; /* 确保覆盖 */
}
.demand-form-input:focus, .demand-form-select:focus, .demand-form-textarea:focus {
    border-color: #17cdcc;
    box-shadow: 0 0 0 0.2rem rgba(23, 205, 204, 0.25);
    outline: none;
}

/* --- 新：表单消息/错误提示区域 --- */
.demand-form-field-message-area {
    flex-grow: 1; /* 占据标签和控件之后的剩余空间 */
    padding-left: 1rem; /* 与控件的间距 */
    font-size: 1.6rem;
    color:#f1952d;
    display: flex;
    align-items: center;
    min-width: 100px; /* 最小宽度，防止被过度压缩 */
}
.demand-form-error-text {
    color: #f57272;
    width: 100%;
}
.demand-textarea-error, .demand-block-error { /* 用于控件下方的错误 */
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    color: #f57272;
}

/* --- 新：预算选项和金额输入 --- */
.demand-budget-range-group {
    display: flex;
    align-items: center;
    width: 453px; /* 总宽度与普通输入框一致 */
    max-width: 100%;
    box-sizing: border-box;
    /* 这个组本身不直接加边框，边框由内部input提供 */
}
.demand-budget-range-input { /* 应用于大致区间内的两个input */
    flex-grow: 1; /* 让两个input平分空间 */
    flex-basis: 0; /* 确保flex-grow有效 */
    width: 0; /* 与flex-basis:0配合使用 */
    text-align: center; /* 金额文本居中 */
    /* 继承 .demand-form-input 的高度、边框、padding等 */
}
.demand-budget-range-input.is-invalid { /* 确保is-invalid样式能正确应用 */
    border-color: #dc3545 !important;
}
.demand-budget-range-separator {
    padding: 0 0.5rem; /* 分隔符左右间距 */
    color: #3d3d3d;
    font-weight: normal; /* 根据设计稿调整 */
    flex-shrink: 0; /* 防止分隔符被压缩 */
    line-height: 44px; /* 使其与输入框同高并垂直居中 */
}


/* --- 新：附件和图片上传 --- */
.demand-form-attachment-upload, .demand-form-image-upload { display: flex; flex-wrap: wrap; align-items: center; }
.demand-form-actual-file-input { display: none; }
.demand-form-upload-btn { /* "点击上传" 按钮 */
    background-color: #34d0cf;
    color: black; /* Text color for "点击上传" */
    border: none; /* No border for capsule */
    padding: 0 2.5rem; /* Adjust padding for text and icon */
    font-size: 1.6rem; /* Text size for "点击上传" */
    border-radius: 50px; /* Capsule shape */
    cursor: pointer;
    height: 40px;
    box-sizing: border-box;
    line-height: normal; /* Reset line-height for flex alignment */
    margin-right: 0.75rem;
    margin-bottom: 0.5rem;
    display: inline-flex; /* For icon and text alignment */
    align-items: center;
    justify-content: center;
    font-weight: 500; /* Slightly bolder text */
}
.demand-form-upload-btn:hover {
    background-color: #2dbbb9; /* Darker shade for hover */
}
.demand-upload-btn-icon {
    margin-right: 0.5rem; /* Space between icon and text */
    fill: black; /* Icon color */
}
.demand-form-file-info { font-size: 1.6rem; color: #f1952d; margin-bottom: 0.5rem; line-height: 44px; /* 尝试与按钮垂直对齐 */ }

.demand-form-image-upload-box { width: 120px; height: 120px; border: 2px dashed #e4e5eb; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; background-color: #f8f9fa; border-radius: 0.25rem; color: #6c757d; text-align: center; margin-right: 0.75rem; margin-bottom: 0.5rem; }
.demand-form-image-upload-box:hover { border-color: #17cdcc; background-color: #e9fafa; }
.demand-form-image-upload-plus { font-size: 2.5rem; line-height: 1; }
.demand-form-image-upload-text { font-size: 0.875rem; margin-top: 0.25rem; }

.demand-form-file-loading-text, .demand-form-file-selected-text { font-size: 0.875rem; margin-top: 0.5rem; width: 100%; }
.demand-form-file-loading-text { color: #17cdcc; }
.demand-form-file-selected-text { color: #28a745; }
.demand-form-file-loading-spinner { margin-right: 0.25rem; width: 1em; height: 1em; }
.demand-form-selected-images-list { padding-left: 0; margin-top: 0.5rem; }
.demand-form-selected-images-list li { word-break: break-all; }


/* --- 新：复选框和提交按钮 --- */
.demand-form-checkbox-group { display: flex; align-items: center; }
.demand-form-checkbox-label { font-size: 1.6rem; color: #f1952d; font-weight: normal; }
/* --- 提交按钮 --- */
.demand-form-submit-btn {
    width: calc(180px + 453px); /* label-area width + input width */
    height: 44px;
    background-color: #34d0cf;
    color: black;
    font-size: 18px;
    font-weight: bold; /* Usually submit buttons are bold */
    border: none; /* Remove default bootstrap button border */
    border-radius: 0.25rem; /* Consistent with other inputs */
    padding: 0; /* Reset padding if using line-height for vertical center */
    line-height: 44px; /* For vertical centering of text */
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}
.demand-form-submit-btn:hover {
    background-color: #2dbbb9; /* Slightly darker shade for hover */
    color: black;
}
/* For the loading state, ensure text remains black if spinner is different color */
.demand-form-submit-btn .spinner-border-sm {
    color: black; /* Or a contrasting color to the button's loading bg if it changes */
}


/* 个人类型页面，如：设计师、策划师、主理人等 */
.individual-section{
    padding-top:8rem;
}
.individual-section-title{
    font-weight: 500;
    color: #010202;
    font-size: 2.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 3.8rem;
    line-height: 1;
}

.individual-filters-wrapper{
    margin-bottom:4rem;
}
/* 1. .individual-filters-panel 的样式 */
.individual-filters-panel {
    background-color: #ffffff; /* 背景颜色：#ffffff */
    border: none; /* 无边框 (移除 Bootstrap card 的默认边框) */
    border-radius: 2rem; /* 圆角加大一些 (2rem 比 Bootstrap 默认值大，可根据视觉调整) */
    padding: 30px; /* 内部边距30px (应用于整个面板，其子元素如 header 和 body 会在此内边距内部) */
}

/* 2. .individual-filters-header 的样式 */
.individual-filters-header {
    background-color: transparent; /* 无背景颜色 */
    border: none; /* 无边框 (移除 Bootstrap card-header 的默认边框) */
    padding: 0 0 20px 0; /* 仅底部内边距20px，用于标题和第一个筛选组之间的间距。面板已提供主要内边距。 */
}

/* .individual-filters-body (即 .card-body 元素) 的样式 */
.individual-filters-body {
    padding: 0; /* 移除 Bootstrap card-body 的默认内边距，因为 .individual-filters-panel 已提供30px的内边距 */
}

/* 3. .individual-filters-title 的样式 */
.individual-filters-title {
    font-size: 16px; /* 字体大小：16px */
    color: #b1b1b1; /* 字体颜色：#b1b1b1 */
    font-weight: normal; /* 默认字重 (如果设计稿未指定粗体) */
}

/* 4. & 5. .individual-filters-reset-btn 和 .individual-filters-toggle-btn 的样式 */
.individual-filters-reset-btn,
.individual-filters-toggle-btn {
    font-size: 16px; /* 字体大小：16px (同 title) */
    color: #b1b1b1; /* 字体颜色：#b1b1b1 (同 title) */
    background: none; /* 移除按钮背景 */
    border: none; /* 移除按钮边框 */
    padding: 0; /* 移除按钮内边距 */
    cursor: pointer; /* 保留指针手势，以示可交互 */
    font-family: inherit; /* 确保字体一致性 */
    display: inline-flex; /* 用于图标和文字的对齐 */
    align-items: center; /* 用于图标和文字的对齐 */
    text-decoration: none; /* 移除可能出现的下划线 */
}

/* 按钮的悬停和聚焦效果 */
.individual-filters-reset-btn:hover,
.individual-filters-reset-btn:focus,
.individual-filters-toggle-btn:hover,
.individual-filters-toggle-btn:focus {
    color: #888888; /* 示例悬停颜色，请根据设计调整 */
    outline: none; /* 移除聚焦时的轮廓（如果不需要） */
    box-shadow: none; /* 移除聚焦时的阴影（如果不需要） */
}

/* 6. .individual-filter-group 的样式 */
.individual-filter-group {
    display: flex; /* flex布局 */
    align-items: center; /* 内部元素垂直对齐 */
    margin-top: 20px; /* 上外边距20px (调整自30px，考虑到 header 可能有底部内边距) */
}
/* 第一个筛选组不需要额外的上外边距，因为它会直接位于 header 的底部内边距之下 */
.individual-filters-body > .individual-filter-group:first-child {
    margin-top: 0;
}

/* 7. .individual-filter-label-wrapper 及其内部 .individual-filter-label 的样式 */
.individual-filter-label-wrapper {
    background-color: #ebebeb; /* 背景颜色：#ebebeb */
    border-radius: 50px; /* "胶囊样式" (非常大的圆角以形成胶囊状) */
    padding: 12px 30px; /* 胶囊的内部填充 (可根据视觉效果调整) */
    display: inline-block; /* 使内边距和圆角正确显示 */
    flex-shrink: 0; /* 在 flex 容器中时防止自身被压缩 */
}

.individual-filter-label-wrapper .individual-filter-label { /* 针对内部的 span 元素 */
    font-size: 18px; /* 字体大小：18px */
    color: #010202; /* 字体颜色：#010202 */
    font-weight: bold; /* 字体粗细：bold */
    display: block; /* 确保 span 占据填充后的空间 */
    line-height: 1.2; /* 行高 (可调整以优化垂直居中) */
}

/* 8. .individual-filter-option-item 的样式 */
.individual-filter-option-item {
    /* "不要胶囊边框样式" - Bootstrap .btn 默认有轻微圆角。如果想要更锐利的直角，可以取消下面这行的注释。
       HTML 中已经移除了 .rounded-pill 类。
    */
    /* border-radius: 0; */

    font-size: 18px; /* 字体大小：18px */
    font-weight: normal; /* 字体粗细：regular (即默认) */
    color: #646464; /* 字体颜色：#646464 (直接应用，后续对特定按钮状态进行覆盖) */
    margin-left: 25px; /* 左侧外边距：25px */
    padding-top: 6px;    /* 上内边距，使其与标签高度更匹配 */
    padding-bottom: 6px; /* 下内边距，使其与标签高度更匹配 */
}

/* 覆盖 Bootstrap .btn-outline-secondary 的默认文本颜色 (如果需要) 和边框颜色 */
.individual-filter-option-item.btn-outline-secondary {
    color: #646464; /* 确保未选中项的颜色 */
    border:0;
}
.individual-filter-option-item.btn-primary{
    color: #ffffff; /* 悬停时文本颜色变深 */
    border-color:#19b4b3;
    background-color: #19b4b3; /* 可自定义 outline 按钮的悬停背景色 */
}
.individual-filter-option-item.btn-outline-secondary:hover{
    color: #ffffff; /* 悬停时文本颜色变深 */
    background-color: #19b4b3; /* 可自定义 outline 按钮的悬停背景色 */
}

/* 确保激活状态 (.btn-primary) 的文本颜色在强制设置 #646464 后依然可读 */
.individual-filter-option-item.btn-primary {
    color: #ffffff; /* Bootstrap primary 按钮的默认文本颜色 */
    border:0;
}

/* 如果选项列表中的第一个选项的左外边距不合适，可以调整 */
.individual-filter-options-list > .individual-filter-option-item:first-child {
    /* margin-left: 15px; /* 例如，减少第一个选项的左外边距 */
}

/* 如果使用 gap 来控制选项间距，而不是在每个项目上使用 margin-left */
/*
.individual-filter-options-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
*/

/* ----------------------------- */
/* 设计师列表整体包裹与基本项 */
/* ----------------------------- */
.individual-list-wrapper {
    margin: 30px auto; /* 与筛选区域的间距 */
}

.individual-list-container {
    /* 目前不需要特定样式，由子元素控制 */
    background-color: #ffffff;
    border: none;
    border-radius: 2rem;
    padding: 30px;
}

.individual-list-item {
    border-bottom: 1px solid #e0e0e0; /* 示例：条目边框 */
    padding: 25px;             /* 示例：条目内部填充 */
    margin-bottom: 25px;       /* 条目之间的间距 */
}
.individual-list-item:last-child {
    margin-bottom: 0;
}

.individual-list-item-content {
    display: flex;
    gap: 30px; /* 左侧信息区和右侧作品区之间的间距 */
}

/* ----------------------------- */
/* 左侧：设计师个人信息区域 */
/* ----------------------------- */
.individual-info-area {
    flex: 1; /* 占据可用空间，但允许作品区有固定或最小宽度 */
    /* 或者使用 flex-basis: 60%; or a fixed width if desired */
    display: flex;
    flex-direction: column;
    gap: 20px; /* 信息区域内部各“行”之间的间距 */
}

/* 左侧 - 第一行：头像 + 主要信息 */
.individual-info-row-1 {
    display: flex;
    align-items: center; /* 头像和右侧信息顶部对齐 */
    gap: 20px; /* 头像和右侧信息块的间距 */
}

.individual-avatar-wrapper {
    flex-shrink: 0; /* 防止头像被压缩 */
}

.individual-avatar-img {
    width: 8rem;
    height: 8rem;
    border: .5rem solid #e9e9e9;
    border-radius: 50%;
}

.individual-main-details {
    display: flex;
    flex-direction: column;
    gap: 5px; /* 主要信息内部各行文本的间距 */
}

.individual-detail-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* 允许内容换行，例如姓名和徽章 */
    gap: 8px; /* 同一行内元素的间距 (例如姓名和徽章，地区和分类) */
    font-size: 14px;
    color: #555555;
}

.individual-name-link {
    text-decoration: none;
}
.individual-name {
    font-size: 18px;
    font-weight: bold;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #333333;
    margin: 0; /* 重置 h3 的默认 margin */
}

.individual-signed-badge {
    background-color: #19b4b3; /* 示例：签约徽章背景色 */
    color: #ffffff;
    font-size: 10.55px;
    font-weight: 400;
    padding: 3px 8px;
    border-radius: 10px; /* 胶囊形状 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.individual-location,
.individual-category,
.individual-experience {
    font-size: 16px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #808080; /* 示例：专业领域用主题色 */
}
.individual-category {
    font-size: 16px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #808080; /* 示例：专业领域用主题色 */
}
.individual-info-separator {
    color: #aaaaaa;
    font-size: 14px;
}

/* 左侧 - 第二行：服务评价 */
.individual-info-row-2 {
    /* 可根据内容调整 */
}
.star-rating-component-wrapper{
    display:flex;
}
.individual-service-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.individual-service-rating .rating-label{
    margin-left:0;
}
.individual-service-rating .rating-label,.individual-service-rating .rating-score {
    font-size:16px;
}
.individual-rating-stars {
    color: #ffc107; /* 示例：星级颜色 */
    font-size: 18px; /* 星号可以大一点 */
}


/* 左侧 - 第三行：统计数据 */
.individual-info-row-3 {
    /* 可根据内容调整 */
}

.individual-stats-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px; /* 各统计项之间的间距 */
    font-size: 16px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #808080; /* 示例：专业领域用主题色 */
}

.individual-stat-item {
    color: #555555;
}
.individual-stat-item strong { /* 如果统计数字用 strong 包裹 */
    color: #222222;
    font-weight: 600;
}

/* 左侧 - 第四行：操作按钮 */
.individual-info-row-4 {
    margin-top: auto; /* 如果希望按钮组在左侧区域底部对齐 (当左侧内容较少时) */
}

.individual-actions-group {
    display: flex;
    align-items: center;
    gap: 15px; /* 按钮之间的间距 */
    margin-top:20px;
    margin-bottom:10px;
}

.individual-action-btn {
    padding: 7px 22px;
    line-height:1;
    font-size: 18px;
    border-radius: 20px; /* 按钮圆角 */
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.individual-btn-more-cases {
    background-color: #ebebeb;
    color: #3a3a3a;
}


.individual-btn-hire {
    background-color: #19b4b3;
    color: #ffffff;
}


/* ----------------------------- */
/* 右侧：设计师的推荐/代表作品区域 */
/* ----------------------------- */
.individual-portfolio-area {
    width: 720px; /* 示例：限制最大宽度，防止作品区过宽 */
    flex-shrink: 0; /* 防止在空间不足时被过度压缩 */
}

.individual-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 24px; /* 作品之间的间距 */
}

.individual-portfolio-item {
    background-color: #f9f9f9; /* 示例：作品项背景 */
    border-radius: 6px;
    overflow: hidden; /* 确保图片圆角生效 */
    display: flex;
    flex-direction: column; /* 图片在上，标签在下 */
}
.individual-portfolio-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%; /* 使链接填满整个 item */
}

.individual-portfolio-cover-wrapper {
    width: 100%;
    padding-top: 75%; /* 控制图片宽高比为 4:3 (100 / (4/3) = 75%)，可调整 */
    position: relative;
    background-color: #e9ecef; /* 图片加载时的占位背景色 */
}

.individual-portfolio-cover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 裁剪并填充 */
}

.individual-portfolio-tags-wrapper {
    padding: 8px 0;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto; /* 如果作品项高度不一致，标签会靠近底部 */
    background-color: #ffffff; /* 轻微透明背景 */
}

.individual-portfolio-tag {
    background-color: #f5f5f5;
    color: #5a5a5a;
    padding: 2px 6px;
    border-radius: 3px;
}

.individual-portfolio-empty {
    grid-column: 1 / -1; /* 如果网格中只有这个元素，让它占据所有列 */
    text-align: center;
    padding: 20px;
    color: #777777;
    font-size: 14px;
}


/* 可选：如果策划师的整体作品区域背景也需要调整 */
/*
.planner-specific-portfolio-area {
    background-color: #some-other-color;
}
*/

/* 单个策划师作品项 - 作为链接元素 <a> */
.planner-portfolio-item {
    display: flex;
    flex-direction: column;
    height: 100%; /* 确保在网格中填满单元格高度 */
    padding: 8px 10px; /* 内边距 */
    background-color: #f5fdfd; /* 指定的背景色 */
    border-radius: 6px; /* 轻微的圆角 */
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    text-decoration: none; /* 移除链接下划线 */
    color: inherit; /* 继承文字颜色 */
    transition: box-shadow 0.3s ease;
    position: relative; /* 用于可能的绝对定位子元素，但当前设计未使用 */
}

.planner-portfolio-item:hover {
    color: inherit; /* 保持链接 hover 时的文字颜色 */
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 轻微的阴影效果 */
}

/* 第一行：达人案例 Tag */
.planner-portfolio-tag-row {
    margin-bottom: 16px; /* Tag 下方的间距 */
    flex-shrink: 0; /* 防止缩小 */
}

.planner-portfolio-expert-tag {
    display: inline-block;
    font-size: 16px; /* 按要求 */
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #19b4b3;
    border: 1px solid #19b4b3;
    padding: 3px; /* 调整内边距以适应文字和边框 */
    border-radius: 4px; /* 较小的圆角 */
    line-height: 1; /* 确保单行 Tag 垂直居中感 */
}

/* 第二行：作品标题 */
.planner-portfolio-title {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 16px;
    color: #090909;
    line-height: 1.5; /* 1em (16px) * 1.5 = 24px 行高 */
    height: calc(2 * 1.5em); /* 固定两行高度 (48px) */
    margin-top: 0;
    margin-bottom: 10px; /* 标题下方的间距 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制为两行 */
    -webkit-box-orient: vertical;
    flex-shrink: 0; /* 防止缩小 */
}

/* 第三行：作品简介 */
.planner-portfolio-description {
    font-size: 16px; /* 按要求，通常简介会略小，如14px */
    font-weight: normal;
    color: #999999;
    line-height: 1.5; /* 1em (16px) * 1.5 = 24px 行高 */
    height: calc(3 * 1.5em); /* 固定三行高度 (72px) */
    margin-top: 0;
    margin-bottom: 0; /* 移除默认 p 标签的下边距，由 stats-row 控制 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 限制为三行 */
    -webkit-box-orient: vertical;
    flex-grow: 1; /* 占据可用空间，将第四行推到底部 */
    flex-shrink: 0; /* 防止缩小 */
}

/* 第四行：统计数据行 */
.planner-portfolio-stats-row {
    margin-top: 15px; /* 与上方简介的间距, flex-grow:1 在 description 上也会将其推到底部 */
    margin-bottom:10px;
    flex-shrink: 0; /* 防止缩小 */
    padding-top:15px;
}

.planner-portfolio-stats {
    display: flex;
    justify-content: flex-end; /* 项目右对齐 */
    align-items: center;
    font-size: 14px; /* 统计数字可以略小 */
    color: #777;
    padding-right: 10px;
}

.planner-portfolio-stat-item {
    display: flex;
    align-items: center;
    margin-left: 12px; /* 各统计项之间的间距 */
}
.planner-portfolio-stat-item:first-child {
    margin-left: 0; /* 第一个统计项无左边距 */
}

.planner-portfolio-stat-item svg { /* Bootstrap Icon 样式 */
    margin-right: 3px; /* 图标与数字之间的间距 */
    width: 16px; /* 图标大小 */
    color: #ababab; /* 图标颜色 */
}

.planner-portfolio-stat-item i.bi-eye-fill {
    /* 可以为特定图标设置不同颜色 */
}
.planner-portfolio-stat-item i.bi-heart-fill {
    color: #ff7875; /* 例如，收藏用红色系 */
}



/* =================================================== */
/* == Project Manager Right Content Area Styles      == */
/* =================================================== */

.pm-right-content-area {
    display: flex;
    flex-direction: column;
    gap: 20px; /* 作品区域和评价区域之间的垂直间距 */
}

/* --- 第一部分：代表作品区域 (图片网格) --- */
/* .individual-portfolio-area 和 .individual-portfolio-grid 可以复用设计师的样式 */
/* 如果需要特定调整，可以在 .pm-right-content-area .individual-portfolio-area 下覆盖 */

.pm-portfolio-work-item { /* 用于单个作品卡片 */
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    height: 100%; /* 确保在网格中填满 */
    display: flex;
}

.pm-portfolio-work-link {
    display: block; /* 或 flex */
    width: 100%;
    text-decoration: none;
    color: inherit;
    position: relative; /* 用于标题叠加 */
}

.pm-portfolio-work-cover-wrapper {
    /* 根据你的设计，可能需要固定高度或宽高比 */
    /* 例如：固定高度 */
    height: 150px; /* 示例高度，请调整 */
    overflow: hidden;
}

.pm-portfolio-work-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pm-portfolio-work-link:hover .pm-portfolio-work-cover-img {
    transform: scale(1.05);
}

.pm-portfolio-work-image-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 22px;
    background-color: rgba(20, 43, 53, 0.45); /* #142b35 半透明 */
    display: flex;
    align-items: center;
    text-align: center;
    line-height: 1;
    padding: 0 10px;
    box-sizing: border-box;
}

.pm-portfolio-work-image-title {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 14px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* --- 第二部分：客户评价区域 --- */
.pm-customer-reviews-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 45px;
}

.pm-customer-review-item {
    /* 单条评价的样式，如果需要边框等 */
    /* border-bottom: 1px solid #eee; */
    /* padding-bottom: 10px; */
}
/* .pm-customer-review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
} */

.pm-customer-review-text {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 16px;
    line-height: 1.5; /* 1em (16px) * 1.5 = 24px 行高 */
    height: calc(2 * 1.5em); /* 固定两行高度 (48px) */
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #999999; /* 评价文本的默认颜色 */
}

.pm-customer-review-prefix {
    color: #19b4b3;
    /* font-weight: bold; */ /* 可选 */
}

/* 可选：评价者和项目信息的样式 */
.pm-customer-review-meta {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 13px;
    color: #777;
    margin-top: 5px;
    text-align: right; /* 例如，右对齐 */
}
.pm-review-customer-name {
    font-weight: bold;
}
.pm-review-project-name {
    font-style: italic;
}

.pm-no-reviews-text {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 14px;
    color: #999;
    text-align: center;
    padding: 10px 0;
}

/* =================================================== */
/* == Exhibition Executor Card Grid Styles           == */
/* =================================================== */

.executor-card-grid {
    display: grid;
    /* 一行4个card，平分宽度 */
    /* 使用 minmax 来确保卡片在内容较少时不会过窄，并且可以扩展 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* auto-fit 会根据容器宽度调整列数，目标是接近4列 */
    /* 如果希望严格4列，即使在较小屏幕上也可能导致卡片过窄，可以使用：
       grid-template-columns: repeat(4, 1fr);
       但在小屏幕上，建议使用媒体查询调整为更少的列数。
       下面的媒体查询会处理这个问题。
    */
    gap: 24px; /* 水平和垂直间距 */
    margin-bottom:40px;
}

/* 单个展会执行人员卡片 */
.executor-card {
    background-color: #fff;
    border-radius: 0.375rem; /* Bootstrap card 的圆角 */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Bootstrap card 的阴影 */
    padding: 25px 20px; /* 卡片内部的 padding，可以根据 .individual-info-area 的需要调整 */
    display: flex; /* 确保 .individual-info-area 能正确布局 */
    flex-direction: column;
    height: 100%; /* 使卡片在网格行中高度一致（如果内容不同） */
}

/* 卡片内部的 .individual-info-area 应该能很好地适应 */
/* 如果需要，可以为 .executor-card > .individual-info-area 设置特定样式 */
.executor-card .individual-info-area {
    width: 100%; /* 确保它填满卡片宽度 */
    /* 如果 individual-info-area 本身有 padding, 可能需要调整或移除，由 .executor-card 控制 */
}

.executor-card .individual-actions-group{
    justify-content: center;
}

.executor-card .individual-info-row-1{
    justify-content: center;
}
.executor-card .individual-avatar-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.executor-card .individual-avatar-wrapper span{
    margin-top:15px;
}

/* 响应式调整： */
/* 大屏幕 (>= 1200px)，严格4列 */
@media (min-width: 1200px) {
    .executor-card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 中等屏幕 (>= 992px)，尝试3列 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .executor-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 小屏幕 (>= 768px)，尝试2列 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .executor-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 超小屏幕 (< 768px)，1列 */
@media (max-width: 767.98px) {
    .executor-card-grid {
        grid-template-columns: 1fr;
        gap: 16px; /* 减小间距 */
    }
    .executor-card {
        padding: 1rem; /* 减小卡片内边距 */
    }
    .left-panel{display:none!important;}
    .pt-10{
        padding-top:5rem;
    }
}


/* ----------------------------- */
/* 分页与空列表提示 */
/* ----------------------------- */
.individual-pagination-wrapper {
    margin-bottom: 30px;
}

.individual-list-empty {
    /* Bootstrap text-center py-5 已经处理了大部分样式 */
    /* 可以调整字体等 */
    border: 1px dashed #dddddd; /* 示例：给空状态一个虚线框 */
    border-radius: 8px;
    background-color: #fcfcfc;
}
.individual-list-empty .btn-primary {
    /* 可以为这里的按钮自定义样式，如果不想用默认的 Bootstrap primary */
}

/* 个人类型页面，如：设计师、策划师、主理人等 */

#chinaMapContainer{
    width:100%;
    height:1000px;
    margin-top:-100px;
}


.article-list-wrapper {
    /* 可以添加列表的整体样式，如最大宽度、居中等 */
    /* max-width: 1200px; */
    /* margin: 0 auto; */
}

.article-item {
    display: flex;
    gap: 55px; /* 图片和详情之间的间隙，可调整 */
    padding: 63px 30px 20px 30px;
    border-bottom: 1px solid #ebebeb;
    background-color: transparent;
    transition: background-color 0.2s ease-in-out; /* 添加过渡效果使背景变化更平滑 */
}

.article-item:hover {
    background-color: #ffffff;
}

.article-item:last-child {
    /* 可以移除最后一个条目的下边框，如果需要的话 */
    /* border-bottom: none; */
}

.article-cover-image-container {
    flex-shrink: 0; /* 防止图片容器在空间不足时被压缩 */
}

.article-cover-image {
    width: 338px;
    height: 212px;
    object-fit: cover; /* 保证图片覆盖整个区域，可能会裁剪 */
    display: block; /* 移除图片下方的额外空白 */
    border-radius: 4px; /* 轻微圆角，可选 */
}

.article-details {
    flex-grow: 1; /* 让详情区域占据剩余空间 */
    display: flex;
    flex-direction: column; /* 使标题、简介、底部垂直排列 */
    min-width: 0; /* 防止flex子项内容溢出导致布局问题 */
}

.article-title {
    font-size: 24px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-weight: bold;
    color: #3e3a39;
    margin: 0 0 30px 0; /* 移除默认上下边距，设置下边距 */
    line-height: 1; /* 调整行高以适应24px字体 */
}

.article-title a {
    color: inherit; /* 继承父元素的颜色 */
    text-decoration: none; /* 移除链接下划线 */
}

.article-title a:hover {
    color: #2b2b2b; /* 鼠标悬停时颜色变深，可选 */
    text-decoration: underline;
}

.article-excerpt {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif; /* 确保字体 */
    font-size: 16px; /* 假设简介字体大小，可调整 */
    line-height: 1.6; /* 行高，影响两行的高度 */
    color: #555555; /* 简介文字颜色，可调整 */
    margin-bottom: 25px; /* 与底部的间距，可调整 */
    margin-right: 200px; /* 距右侧边距200px */

    /* 实现最多显示2行并出现省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 为了确保即使内容不足两行也占据相应空间，可以设置一个最小高度 */
    /* min-height: calc(1.6em * 2);  1.6em 是 line-height * font-size */
    /* 然而，-webkit-line-clamp 通常能处理好视觉高度 */
}

.article-footer {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中对齐 */
    margin-top: auto; /* 将此部分推到 article-details 容器的底部 */
    padding-top: 10px; /* 与简介之间的一点间距，如果简介内容少 */
}

.article-read-more-btn {
    font-size: 18px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #2b2b2b;
    background-color: #ebebeb;
    padding: 7px 28px;
    border-radius: 50px; /* 实现胶囊形状 */
    text-decoration: none;
    display: inline-block; /* 使 padding 生效 */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* 平滑过渡效果 */
    line-height: 1;
}

.article-read-more-btn:hover {
    background-color: #dcdcdc; /* 鼠标悬停时背景变深 */
    color: #000000;
    text-decoration: none;
}

.article-publish-date {
    font-size: 20px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #a1a1a1;
}

/* =================================== */
/* Custom Bootstrap Pagination Styles  */
/* =================================== */
.article-pagination-container {
    /* 可以添加分页容器的整体样式，例如上边距 */
    margin-top: 50px; /* 与列表的间距 */
    padding-bottom: 160px; /* 页面底部的间距 */
}

.article-pagination-container .pagination {
    justify-content: center; /* 使分页组件居中显示 */
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif; /* 统一字体 */
}

.article-pagination-container .page-item {
    margin: 0 4px; /* 分页项之间的间距 */
}

.article-pagination-container .page-item .page-link {
    color: #3e3a39; /* 默认链接颜色 */
    background-color: #f7f7f7; /* 默认背景色 */
    border: 1px solid #ebebeb; /* 边框颜色 */
    border-radius: 4px; /* 轻微圆角 */
    padding: 0.5rem 0.9rem; /* 内边距，可调整 */
    font-size: 15px; /* 字体大小 */
    transition: all 0.2s ease-in-out;
    box-shadow: none; /* 移除 Bootstrap 可能的默认阴影 */
}

.article-pagination-container .page-item .page-link:hover {
    background-color: #ebebeb; /* 悬停背景色 */
    border-color: #dcdcdc;
    color: #2b2b2b;
}

.article-pagination-container .page-item.active .page-link {
    background-color: #3e3a39; /* 激活项背景色 */
    border-color: #3e3a39;    /* 激活项边框色 */
    color: #ffffff;           /* 激活项文字颜色 */
    z-index: 3; /* 确保激活项在最上层 */
}

.article-pagination-container .page-item.disabled .page-link {
    color: #a1a1a1;      /* 禁用项文字颜色 */
    background-color: #fdfdfd; /* 禁用项背景色 */
    border-color: #f0f0f0;
    pointer-events: none; /* 不可点击 */
}

/* 可选：自定义上一页/下一页的箭头或文本 */
.article-pagination-container .page-item:first-child .page-link,
.article-pagination-container .page-item:last-child .page-link {
    /* 例如，增大一点 padding 让箭头不那么挤 */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}


/* =================================== */
/* Article Show Page Styles            */
/* =================================== */

.article-show-wrapper {
    /* Using Bootstrap container, so max-width and centering are handled */
    /* You can add a background for the whole show page if different from body */
    /* background-color: #f9f9f9; */
}

.article-show-content {
    background-color: #ffffff; /* White background for the article content area */
    padding: 30px 40px; /* Inner padding for the article content */
    border-radius: 8px; /* Optional: slight rounding of content box */
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.05); */ /* Optional: subtle shadow */
}

.article-show-header {
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb; /* Similar to list item separator */
}

.article-show-title {
    font-size: 32px; /* Larger title for show page */
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-weight: bold;
    color: #3e3a39;
    margin-bottom: 15px; /* Space below title */
    line-height: 1.3;
}

.article-show-meta {
    font-size: 15px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #777777; /* Slightly lighter color for meta info */
    gap: 10px; /* Spacing between meta items when they wrap */
}

.article-show-meta span {
    display: inline-flex; /* Align icon and text */
    align-items: center;
}

.article-show-meta .bi { /* Bootstrap Icons */
    margin-right: 6px;
    font-size: 1.1em;
    color: #a1a1a1;
}

.article-category-link {
    color: #555555;
    text-decoration: none;
    font-weight: 500;
}
.article-category-link:hover {
    color: #2b2b2b;
    text-decoration: underline;
}


.article-show-cover-image-container {
    text-align: center; /* Center the image if it's not full width */
}

.article-show-cover-image {
    max-height: 500px; /* Max height for the cover image */
    width: auto; /* Maintain aspect ratio if using max-height */
    max-width: 100%; /* Ensure it's responsive */
    object-fit: cover;
}

.article-show-body {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 17px; /* Comfortable reading size */
    line-height: 1.8; /* Good line spacing for readability */
    color: #333333; /* Main body text color */
    padding-top: 25px;
    padding-bottom: 25px;
}

.article-show-body p {
    margin-bottom: 1.2em;
}

.article-show-body h2,
.article-show-body h3,
.article-show-body h4 {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #3e3a39;
    margin-top: 2em;
    margin-bottom: 0.8em;
    font-weight: bold;
}
.article-show-body h2 { font-size: 1.8em; }
.article-show-body h3 { font-size: 1.5em; }
.article-show-body h4 { font-size: 1.25em; }

.article-show-body img { /* Images within the article body */
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 15px 0;
}

.article-show-body blockquote {
    border-left: 4px solid #ebebeb;
    padding-left: 15px;
    margin: 20px 0;
    font-style: italic;
    color: #555;
}

.article-show-body pre { /* For code blocks */
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    overflow-x: auto; /* Allow horizontal scrolling for long code lines */
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.9em;
}

.article-show-tags{
    display: flex;
    align-items: center;
    gap:20px;
}
.article-tags-title,
.article-case-files-title {
    font-size: 18px;
    font-weight: bold;
    color: #3e3a39;
    margin-bottom: 10px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}

.article-tag-link {
    background-color: #ebebeb;
    color: #3e3a39;
    border: none;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 14px;
    padding: 5px 12px;
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 4px; /* Less rounded than capsule for tags */
    text-decoration: none;
}
.article-tag-link:hover {
    background-color: #dcdcdc;
    color: #2b2b2b;
}

.article-show-case-files ul {
    padding-left: 0;
}
.article-show-case-files li a {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    color: #0d6efd; /* Bootstrap primary color for links */
    text-decoration: none;
}
.article-show-case-files li a:hover {
    text-decoration: underline;
}
.article-show-case-files li .bi {
    margin-right: 5px;
}

.article-back-to-list-btn {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
    font-size: 16px;
    background-color: #6c757d; /* Bootstrap secondary color */
    color: #ffffff;
    padding: 10px 25px;
    border-radius: 50px; /* Capsule shape */
}
.article-back-to-list-btn:hover {
    background-color: #5a6268;
    color: #ffffff;
}

.article-flash-message { /* For the flash message at the top */
    margin-bottom: 20px; /* Or adjust as per your layout */
    border-radius: 4px;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}

/* Ensure Bootstrap icons are available if you haven't set them up globally */
/* @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"); */
/* It's better to include this in your main app.scss or layout if using globally */


/* --- 通用页面包裹层 --- */
.demand-detail-page-wrapper {
    padding-top: 30px; /* 根据你的设计稿调整 */
    padding-bottom: 50px; /* 根据你的设计稿调整 */
    background-color: #f8f9fa; /* 如果整个页面需要浅灰色背景，否则可移除 */
}

/* --- 返回链接和提示消息 --- */
.demand-detail-back-link {
    margin-bottom: 20px;
}
.demand-detail-back-link a {
    text-decoration: none;
    color: #0d6efd; /* Bootstrap 默认蓝色 */
    font-size: 14px;
}
.demand-detail-back-link a:hover {
    text-decoration: underline;
    color: #0a58ca;
}
.custom-alert { /* 自定义 Alert 样式 */
    margin-bottom: 20px;
    padding: 15px 20px; /* 自定义内边距 */
    border-radius: 8px; /* 自定义圆角 */
}

/* --- 第1部分：需求详情头部 --- */
.demand-details-header-section {
    background-color: #ffffff;
    border-radius: 12px; /* 圆角 */
    padding: 30px 40px; /* 内部间距 */
    margin-bottom: 30px; /* 与下方内容的间距 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* 轻微阴影 */
}

/* 第1行：发布人、标题/元信息、发布时间 */
.demand-header-row1 {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 顶端对齐 */
}

.publisher-info {
    display: flex;
    flex-direction: column; /* 头像和名称垂直排列 */
    align-items: center; /* 居中对齐 */
    text-align: center;
    flex-shrink: 0; /* 防止被压缩 */
    margin-right: 30px; /* 与中间内容的间距 */
    width: 100px; /* 固定宽度 */
}
.publisher-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%; /* 圆形头像 */
    object-fit: cover; /* 图片覆盖 */
    margin-bottom: 8px; /* 头像与名称间距 */
    border: 2px solid #eee; /* 轻微边框 */
}
.publisher-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    word-break: break-all; /* 防止名称过长溢出 */
}

.title-meta-tags {
    flex-grow: 1; /*占据剩余空间*/
}
.title-stats-line {
    display: flex;
    align-items: center; /* 顶端对齐 */
    margin-bottom: 12px; /* 与下方标签间距 */
}
.demand-title {
    font-size: 2.3rem; /* 较大标题 */
    font-weight: 400; /* 略粗 */
    margin: 0; /* 移除默认外边距 */
    line-height: 1; /* 行高 */
    padding-right: 20px; /* 与统计数据间距 */
}
.demand-page-stats {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    color: #6c757d; /* 次要文字颜色 */
    flex-shrink: 0; /* 防止被压缩 */
    white-space: nowrap; /* 不换行 */
}
.demand-page-stats span {
    margin-left: 15px; /* 各统计项间距 */
    display: inline-flex; /* 用于图标和文字对齐 */
    align-items: center;
}
.demand-page-stats span i { /* Bootstrap Icons 或其他图标库的 i 标签 */
    margin-right: 3px; /* 图标与文字间距 */
    font-size: 1.8rem; /* 图标稍大 */
}

.demand-tags-list {
    margin-top: 8px; /* 位于标题行下方 */
}
.demand-tags-list .demand-type-tag,
.demand-tags-list .demand-category-tag,
.demand-tags-list .demand-custom-tag {
    display: inline-block; /* 行内块元素 */
    font-size: 14px;
    padding: 4px 6px; /* 内边距 */
    margin-right: 8px; /* 标签间距 */
    margin-bottom: 8px; /* 换行时的底部间距 */
    line-height: 1;
    color:#5a5a5a;
    background-color:#f5f5f5;
}
/*
.demand-type-tag.demand-type-team { background-color: #e9d5ff; color: #805ad5;} 紫色系
.demand-type-tag.demand-type-individual { background-color: #cce5ff; color: #004085;} 蓝色系
.demand-category-tag { background-color: #d1e7dd; color: #0f5132;}  绿色系
.demand-custom-tag { background-color: #f8f9fa; color: #495057; border: 1px solid #dee2e6;}  浅灰色
*/

.publish-time-info {
    font-size: 14px;
    color: #666666;
    text-align: right; /* 右对齐 */
    white-space: nowrap; /* 不换行 */
    flex-shrink: 0; /* 防止被压缩 */
    align-self: flex-start;
}

/* 第2行：预算、交稿时间、剩余时间 */
.demand-header-row2 {
    display: flex;
    align-items: center;
    padding: 20px 0; /* 上下内边距 */
    /* background-color: #f8f9fa; */ /* 可选：为该行添加细微背景色 */
    /* border-radius: 8px; */
}
.budget-info, .deadline-info, .time-remaining-info {
    text-align: center; /* 文本居中 */
    padding-right: 100px; /* 各项之间的间距 */
    display:flex;
}
.info-label {
    display: block; /* 独占一行 */
    font-size: 18px;
    color: #6c757d;
    margin-bottom: 6px; /* 与下方数值的间距 */
}
.info-value {
    display: block;
    font-size: 18px;
    color: #666666;
}
.budget-value {
    color: #fe2000; /* 预算用红色突出 */
}
.time-remaining-value {
    color: #ffc107; /* 剩余时间用黄色/橙色突出 */
}

/* 第3行：需求描述和报名按钮 */
.demand-header-row3 {
    /* 如果描述是全宽的，则不需要特定的 flex 布局 */
}
.demand-description-area {
    position: relative; /* 用于绝对定位报名按钮 */
    padding-bottom: 60px; /* 为绝对定位的按钮留出空间，根据按钮大小调整 */
}
.demand-description-text {
    font-size: 18px;
    line-height: 1.2; /* 较大的行高，易于阅读 */
    color: #495057; /* 正文颜色 */
}

.apply-button-wrapper {
    position: absolute; /* 绝对定位到右下角 */
    bottom: 0;
    right: 0;
    /* 如果不使用绝对定位，而是希望按钮在描述下方右对齐：
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    */
}
.btn-apply-now { /* 所有报名按钮的共享样式 */
    border-radius: 50px !important; /* 胶囊形状，!important 确保覆盖 Bootstrap */
    padding: 10px 25px !important; /* 自定义内边距 */
    font-size: 15px !important;
    font-weight: 500 !important;
    display: inline-flex !important; /* flex 布局用于图标和文字对齐 */
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important; /* 移除链接下划线 */
    transition: all 0.2s ease-in-out; /* 过渡效果 */
}
.btn-apply-now i, /* 图标 */
.btn-apply-now .spinner-border { /* 加载指示器 */
    margin-right: 8px; /* 图标/指示器与文字间距 */
}
.btn-apply-now .spinner-border { /* 加载指示器大小 */
    width: 1.1rem !important;
    height: 1.1rem !important;
    border-width: .2em !important;
}
/* 不同状态按钮的颜色 */
.btn-apply-initiate-team { background-color: #6f42c1 !important; border-color: #6f42c1 !important; color: #fff !important; } /* 紫色 */
.btn-apply-initiate-team:hover { background-color: #5a359a !important; border-color: #5a359a !important; }
.btn-apply-manage { background-color: #ffc107 !important; border-color: #ffc107 !important; color: #212529 !important; } /* 黄色 */
.btn-apply-manage:hover { background-color: #e0a800 !important; border-color: #e0a800 !important; }
.btn-apply-individual { background-color: #198754 !important; border-color: #198754 !important; color: #fff !important; } /* 绿色 */
.btn-apply-individual:hover { background-color: #146c43 !important; border-color: #146c43 !important; }
.btn-apply-login-prompt { background-color: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; } /* 蓝色 */
.btn-apply-login-prompt:hover { background-color: #0b5ed7 !important; border-color: #0b5ed7 !important; }

.btn-disabled { /* 禁用按钮样式 */
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
    color: #6c757d !important;
    cursor: not-allowed !important; /* 不可点击光标 */
}
.btn-disabled i {
    color: #6c757d !important; /* 禁用状态图标颜色 */
}

/* 团队角色和附件区域 */
.demand-team-roles-section, .demand-attachments-section {
    margin-top: 30px; /* 与上方内容间距 */
    padding-top: 30px; /* 顶部内边距 */
    border-top: 1px solid #e9ecef; /* 顶部边框分隔线 */
}
.section-subtitle { /* 例如“团队角色需求”、“相关附件”的标题 */
    font-size: 20px;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 20px; /* 标题与列表间距 */
    border-left: 4px solid #0d6efd; /* 示例：左侧蓝色强调线 */
    padding-left: 12px; /* 强调线与文字间距 */
}
.team-roles-list .team-role-item {
    background-color: #f8f9fa; /* 轻微背景 */
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #dee2e6;
}
.team-role-name { font-size: 16px; font-weight: 500; margin-bottom: 5px; }
.team-role-description { font-size: 14px; color: #495057; }

.attachments-list {
    list-style: none; /* 移除默认列表样式 */
    padding-left: 0;
}
.attachments-list li {
    margin-bottom: 10px;
}
.attachments-list a {
    font-size: 15px;
    color: #0d6efd;
    text-decoration: none;
    font-weight: 500;
}
.attachments-list a:hover {
    text-decoration: underline;
}
.attachments-list a i { margin-right: 8px; } /* 附件图标 */
.attachments-list a span { font-size: 12px; color: #6c757d; margin-left: 8px; } /* 文件大小 */

/* --- 第2部分：报名类型 Tab 栏 --- */
.application-type-tabs-section {
    display: flex;
    justify-content: space-between; /* Tab 居左，报名人数居右 */
    align-items: center;
    margin-bottom: 30px; /* 与下方报名者列表间距 */
    padding: 15px 20px; /* 内边距 */
    background-color: #ffffff; /* 白色背景 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 轻微阴影 */
}
.custom-nav-pills .nav-item {
    margin-right: 5px; /* Tab 按钮之间的微小间隙 */
}
.custom-nav-pills .nav-link { /* 自定义 Bootstrap Tab 样式 */
    border-radius: 20px !important; /* 胶囊形状 */
    padding: 8px 20px !important; /* 内边距 */
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #495057 !important; /* 未激活文字颜色 */
    background-color: #e9ecef !important; /* 未激活背景色 */
    border: none !important; /* 移除边框 */
    transition: all 0.2s ease; /* 过渡效果 */
}
.custom-nav-pills .nav-link.active { /* 激活的 Tab */
    background-color: #0d6efd !important; /* Bootstrap 主色 */
    color: #fff !important; /* 白色文字 */
    box-shadow: 0 2px 5px rgba(13, 110, 253, 0.3); /* 轻微阴影 */
}
.custom-nav-pills .nav-link:not(.active):hover { /* 未激活 Tab 悬停效果 */
    background-color: #dee2e6 !important;
}
.total-applicants-count { /* 右侧已报名人数 */
    font-size: 15px;
    font-weight: 500;
    color: #343a40;
}

/* --- 第3部分：报名者列表 --- */
.applicants-list-section {
    /* 可根据需要为该区域添加外边距或内边距 */
}
.applicants-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 每行4个卡片 */
    gap: 24px 16px; /* 行间距 (垂直) 列间距 (水平) */
}

.applicant-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* 卡片边框 */
    border-radius: 10px; /* 卡片圆角 */
    padding: 20px; /* 卡片内边距 */
    display: flex; /* 用于 flex-direction: column 和 flex-grow */
    flex-direction: column; /* 使卡片内容垂直排列 */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* 悬停动画 */
}
.applicant-card:hover {
    transform: translateY(-5px); /* 悬停时向上移动 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* 悬停时阴影加深 */
}

/* 卡片上部：报名人信息 */
.applicant-card-top {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 15px; /* 与中部间距 */
    padding-bottom: 15px; /* 底部内边距，用于分隔线 */
    border-bottom: 1px solid #f0f0f0; /* 分隔线 */
}
.applicant-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px; /* 头像与右侧信息间距 */
}
.applicant-identity {
    flex-grow: 1; /* 占据剩余空间 */
}
.applicant-name {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 3px 0; /* 移除默认外边距，并设置底部小间距 */
}
.applicant-title-location { /* 职称和地点 */
    font-size: 13px;
    color: #6c757d;
    margin: 0;
}
.applicant-badge { /* 个人/团队标签 */
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 10px; /* 圆角标签 */
    background-color: #e0f2fe; /* 示例：浅蓝色背景 */
    color: #0c5460; /* 示例：深蓝色文字 */
    white-space: nowrap; /* 防止标签文字换行 */
}

/* 卡片中部：统计信息和自荐 */
.applicant-card-middle {
    margin-bottom: 15px; /* 与下部间距 */
    flex-grow: 1; /* 允许自荐信息部分占据更多空间，将底部推到底部 */
}
.applicant-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 网格 */
    gap: 10px 8px; /* 行间距 列间距 */
    margin-bottom: 12px; /* 与下方自荐信息间距 */
}
.stat-item {
    text-align: center;
    background-color: #f8f9fa; /* 统计项背景 */
    padding: 8px 5px; /* 内边距 */
    border-radius: 6px; /* 圆角 */
}
.stat-value {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #343a40;
}
.stat-value i.bi-star-fill { /* 星星图标颜色 */
    color: #ffc107;
    font-size: 0.8em; /* 星星图标稍小 */
    margin-left: 2px;
}
.stat-label {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-top: 2px;
}
.applicant-self-recommendation {
    font-size: 13px;
    color: #495057;
    line-height: 1.6;
    /* 如果需要限制行数并显示省略号 (可选) */
    /* max-height: 60px; */ /* 根据行高和期望行数计算 */
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 3; */ /* 限制为3行 */
    /* -webkit-box-orient: vertical; */
}

/* 卡片下部：置顶案例 */
.applicant-card-bottom {
    margin-top: auto; /* 如果卡片中部内容不足，将此部分推到卡片底部 */
    padding-top: 15px; /* 顶部内边距，用于分隔线 */
    border-top: 1px solid #f0f0f0; /* 分隔线 */
}
.pinned-case-title-header { /* “置顶案例”小标题 */
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 8px;
    text-transform: uppercase; /* 大写 */
    letter-spacing: 0.5px; /* 轻微字间距 */
}
.pinned-case-link {
    display: block; /* 块级元素，方便设置图片和文字 */
    text-decoration: none; /* 移除链接下划线 */
}
.pinned-case-image {
    width: 100%;
    height: 120px; /* 根据你的设计稿调整案例图片高度 */
    object-fit: cover; /* 图片覆盖 */
    border-radius: 6px; /* 图片圆角 */
    margin-bottom: 8px; /* 图片与标题间距 */
    border: 1px solid #eee; /* 轻微边框 */
}
.pinned-case-title {
    font-size: 14px;
    font-weight: 500;
    color: #212529;
    display: block; /* 独占一行 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
}
.pinned-case-link:hover .pinned-case-title { /* 悬停时案例标题变色 */
    color: #0d6efd;
}

/* 响应式调整：报名者卡片网格 */
@media (max-width: 1199px) { /* lg 断点以下 (Bootstrap: <1200px) */
    .applicants-grid {
        grid-template-columns: repeat(3, 1fr); /* 变为每行3个 */
    }
}
@media (max-width: 991px) { /* md 断点以下 (Bootstrap: <992px) */
    .applicants-grid {
        grid-template-columns: repeat(2, 1fr); /* 变为每行2个 */
    }
    /* 需求详情头部响应式调整 */
    .demand-header-row1 {
        flex-direction: column; /* 垂直排列 */
        align-items: stretch; /* 拉伸以适应宽度 */
    }
    .publisher-info {
        flex-direction: row; /* 小屏幕上发布者头像和名称水平排列 */
        align-items: center;
        width: auto; /* 自动宽度 */
        margin-right: 0;
        margin-bottom: 15px; /* 与下方内容间距 */
    }
    .publisher-avatar { margin-right: 10px; margin-bottom: 0; width: 40px; height: 40px;}
    .title-meta-tags { margin-bottom: 15px; }
    .title-stats-line { flex-direction: column; align-items: flex-start;}
    .demand-title { font-size: 24px; } /* 缩小标题 */
    .demand-page-stats { margin-top: 8px; }
    .demand-page-stats span { margin-left: 0; margin-right: 15px; }
    .publish-time-info { text-align: left; padding-left: 0; margin-top: 8px;}

    .demand-header-row2 {
        flex-direction: column; /* 垂直排列 */
        align-items: stretch; /* 拉伸 */
        padding: 15px 0;
    }
    .budget-info, .deadline-info, .time-remaining-info {
        text-align: left; /* 左对齐 */
        padding: 8px 0; /* 调整内边距 */
        display: flex; /* 使用 flex 使标签和值在同一行并两端对齐 */
        justify-content: space-between;
    }
    .info-label { margin-bottom: 0; } /* 移除标签下边距 */

    .demand-description-area { padding-bottom: 80px; /* 为按钮留出更多空间 */ }
    .apply-button-wrapper {
        position: static; /* 移除绝对定位 */
        display: flex;
        justify-content: center; /* 居中按钮 */
        margin-top: 20px; /* 与描述的间距 */
    }
    /* Tab 区域响应式 */
    .application-type-tabs-section {
        flex-direction: column; /* Tab 和报名人数垂直排列 */
        align-items: stretch; /* 拉伸 */
    }
    .custom-nav-pills { /* Tab 按钮组 */
        justify-content: center; /* 居中 */
        margin-bottom: 15px; /* 与报名人数间距 */
    }
    .total-applicants-count { text-align: center; } /* 报名人数居中 */
}
@media (max-width: 767px) { /* sm 断点以下 (Bootstrap: <768px) */
    .logo-link img{
        max-height: 60px;
    }
    .contact-label{
        font-size:1.2rem;
        line-height: 1;
    }
    .contact-number{
        font-size:2.2rem;
        line-height: 1;
    }
    .contact-icon{
        width:22px;
    }
    .navbar-collapse.show { /* 或者 #mainNavbarContent.show */
        z-index: 1030; /* 或者一个更高的值 */
    }

    #heroCarousel,.hero-overlay-content{
        height:300px!important;
    }
    .hero-subtitle,.hero-search-form{
        margin-top:1rem;
    }
    .hero-slider-section{
        height: auto;
    }
    .demand-square-title-area{
        padding:6rem 0 4rem 0;
    }
    .section-title{
        font-size:2.8rem;
    }

    .applicants-grid {
        grid-template-columns: 1fr; /* 每行1个 */
    }
    .demand-details-header-section {
        padding: 20px; /* 缩小内边距 */
    }
    .demand-title { font-size: 22px; } /* 进一步缩小标题 */

    .transaction-flow {
        position: static; /* 移除绝对定位，进入文档流 */
        transform: none;
        bottom: auto;
        left: auto;
        width: 100%; /* 占据父容器全部宽度 */
        max-width: 100%;
        height: auto; /* 高度由内容决定 */
        border-radius: 0; /* 移动端通常不需要圆角 */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* 更柔和的阴影或移除 */
        padding: 15px; /* 内部边距 */
        display: block; /* 不再需要flex来居中，.container会处理 */
    }

    .transaction-flow .container {
        padding: 0; /* 如果 .transaction-flow 已有内边距，这里可能不再需要 */
    }

    .flow-steps-container {
        flex-direction: row; /* 仍然尝试横向排列，但允许换行 */
        flex-wrap: wrap;     /* 关键：允许内容换行 */
        justify-content: center; /* 居中换行的项目 */
        gap: 10px 8px;      /* 行间距10px，项目间横向间距8px */
    }

    .flow-step {
        flex-direction: column; /* 图标和文字垂直堆叠 */
        align-items: center;
        text-align: center;
        padding: 5px;
        /* flex-basis: calc(50% - 10px); */ /* 可选：尝试每行显示2个，需调整gap */
        min-width: 100px; /* 保证每个步骤有最小宽度，避免过于拥挤 */
    }

    .flow-step img {
        width: 28px; /* 移动端图标稍小 */
        height: 28px;
        margin-right: 0;
        margin-bottom: 5px; /* 图标和文字之间的间距 */
    }

    .flow-step .flow-text {
        font-size: 12px;
        white-space: normal; /* 允许文字换行 */
        line-height: 1.3;
        color: #555;
    }

    .flow-separator {
        display: none; /* 在移动端隐藏步骤之间的 ">" 分隔符，因为换行后无意义 */
    }

    .flow-guarantee {
        flex-direction: column; /* 图标和文字垂直堆叠 */
        align-items: center;
        text-align: center;
        margin-left: 0; /* 重置PC端的左边距 */
        margin-top: 10px; /* 与上方步骤的间距（如果换行到新行） */
        width: 100%; /* 可选：使其占据整行以明确分隔 */
        padding: 10px 0;
        border-left:0;
    }

    .flow-guarantee .flow-separator-vertical {
        display: none; /* 隐藏竖线分隔符 */
    }

    .flow-guarantee img {
        width: 28px;
        height: 28px;
        margin-right: 0;
        margin-bottom: 5px;
    }

    .flow-guarantee .flow-text {
        font-size: 13px;
        white-space: normal;
        line-height: 1.3;
        color: #555;
    }
}