#think_page_trace_open { display: none; }

:root {
    --yzf-blue:#0071e3;
    --yzf-blue-a:#0f95ff;
    --yzf-blue-b:#3256fd;
    --yzf-dark:#100f11;
    --yzf-gray:#757575;
    --yzf-tag-bg:#e3effe;
    --yzf-tag-color:#1a7af8;
    --yzf-hot-bg:#ffeedf;
    --yzf-hot-color:#b15e2c;
    --yzf-card-a:#eff3f7;
    --yzf-card-b:#ffffff;
    --yzf-radius:12px;
    --yzf-shadow:0 4px 16px rgba(0,0,0,.05);
    --yzf-orange-a:#fe951e;
    --yzf-orange-b:#ffb35b;
}
body.yzf-design-skin { background:#fff; }

/* 页面整体布局：左侧栏导航 + 右侧主内容 */
.yzf-layout { display:flex; gap:24px; max-width:1320px; margin:0 auto; padding:20px 15px; align-items:flex-start; }
.yzf-sidebar {
    width:210px; flex:0 0 210px; background:#fff; border-radius:var(--yzf-radius);
    box-shadow:var(--yzf-shadow); padding:10px 0; position:sticky; top:20px;
}
.yzf-sidebar ul { list-style:none; margin:0; padding:0; }
.yzf-sidebar a,
.yzf-sidebar .yzf-nav-item {
    display:block; padding:15px 22px; color:#333; font-size:15px; text-decoration:none;
    border-left:3px solid transparent; transition:all .2s; font-weight:500;
}
.yzf-sidebar a:hover,
.yzf-sidebar a.active {
    background-image:linear-gradient(to right,var(--yzf-blue-a),var(--yzf-blue-b));
    color:#fff; border-left-color:var(--yzf-blue);
}
.yzf-sidebar .yzf-nav-other { padding:15px 22px; color:#999; font-size:14px; }

.yzf-main { flex:1; min-width:0; }

/* 顶部：banner + 右侧预约设计师卡片 */
.yzf-top { display:flex; gap:10px; margin-bottom:14px; align-items:stretch; }
.yzf-appoint-card {
    width:300px; flex:0 0 300px; background:#fff; border-radius:var(--yzf-radius);
    box-shadow:var(--yzf-shadow); padding:22px 20px 18px;
}
.yzf-appoint-card h3 { font-size:18px; color:var(--yzf-dark); margin:0 0 6px; font-weight:700; }
.yzf-appoint-card .yzf-tip-sub { font-size:13px; color:#999; margin:0 0 14px; }
.yzf-appoint-card .form-group { margin-bottom:12px; }
.yzf-appoint-card input[type="text"],
.yzf-appoint-card input[type="tel"] {
    width:100%; height:44px; border:1px solid #e6e9ef; border-radius:8px;
    padding:0 14px; font-size:14px; color:#333; outline:none; transition:border-color .2s,box-shadow .2s;
}
.yzf-appoint-card input:focus { border-color:var(--yzf-blue); box-shadow:0 0 0 3px rgba(15,149,255,.15); }
.yzf-appoint-card button.submit-btn {
    width:100%; height:46px; border:none; border-radius:8px; cursor:pointer; margin-top:4px;
    background-image:linear-gradient(to right,var(--yzf-orange-a),var(--yzf-orange-b));
    color:#fff; font-size:16px; font-weight:700;
}
.yzf-appoint-card button.submit-btn:hover { opacity:.94; }

.yzf-banner { flex:1; border-radius:var(--yzf-radius); overflow:hidden; min-height:260px; background:#e9eef3; align-self:stretch; }
.yzf-banner img { width:100%; height:100%; min-height:260px; object-fit:cover; display:block; }

/* 设计师卡片区 */
body.yzf-design-skin .projects-section-five { background:#f5f7fa; padding:0; }
body.yzf-design-skin .mixitup-gallery.text-center { text-align:left; }
body.yzf-design-skin .projects-section-five .filters.imgText { text-align:left; margin:0 0 22px; }
body.yzf-design-skin .projects-section-five .imgText ul.filter-tabs {
    display:flex; gap:12px; justify-content:flex-start; border:none; padding:0; margin:0; list-style:none;
}
body.yzf-design-skin .projects-section-five .imgText ul li.filter {
    background:#fff !important; border-radius:8px; box-shadow:var(--yzf-shadow);
    padding:10px 24px; list-style:none;
}
body.yzf-design-skin .projects-section-five .imgText ul li.filter a {
    color:#333 !important; font-weight:600; font-size:15px; background:transparent !important;
}
body.yzf-design-skin .projects-section-five .imgText ul li.filter.active,
body.yzf-design-skin .projects-section-five .imgText ul li.filter:hover {
    background-image:linear-gradient(to bottom,var(--yzf-blue-a),var(--yzf-blue-b)) !important;
    background-color:transparent !important;
}
body.yzf-design-skin .projects-section-five .imgText ul li.filter.active a,
body.yzf-design-skin .projects-section-five .imgText ul li.filter:hover a { color:#fff !important; }

body.yzf-design-skin .filter-list.row.clearfix { display:flex; flex-wrap:wrap; gap:24px; margin:0; }
body.yzf-design-skin .filter-list .col-lg-4,
body.yzf-design-skin .filter-list .col-md-6,
body.yzf-design-skin .filter-list .col-xs-12 { width:calc(33.333% - 16px); padding:0; }

body.yzf-design-skin .filter-list .inner-box {
    display:block;
    background:#fff;
    border-radius:var(--yzf-radius); box-shadow:var(--yzf-shadow);
    overflow:hidden; margin:0; transition:transform .25s ease,box-shadow .25s ease;
}
body.yzf-design-skin .filter-list .inner-box:hover { transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.10); }

/* 形象照：固定背景框，人像完整显示（contain 不裁切） */
body.yzf-design-skin .filter-list .inner-box .image-box { width:310px; max-width:100%; height:160px; margin:0 auto; background:#eef1f4 url('/pub/picture/designer-bg.jpg') no-repeat center center / cover; overflow:hidden; border-radius:0; }
body.yzf-design-skin .filter-list .inner-box .image-box a { display:block; width:100%; height:100%; }
body.yzf-design-skin .filter-list .inner-box .image-box img,
body.yzf-design-skin .filter-list .inner-box img {
    width:100%; height:100%; object-fit:contain; border-radius:0; display:block;
    transition:transform .3s ease;
}
body.yzf-design-skin .filter-list .inner-box:hover .image-box img,
body.yzf-design-skin .filter-list .inner-box:hover img { transform:scale(1.04); }

body.yzf-design-skin .filter-list .inner-box .content-box,
body.yzf-design-skin .filter-list .inner-box .lower-content { padding:14px 18px 18px; min-width:0; text-align:left; }
body.yzf-design-skin .filter-list .inner-box .designer-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px; }
body.yzf-design-skin .filter-list .inner-box .designer-name,
body.yzf-design-skin .filter-list .inner-box h3 { font-size:22px; font-weight:700; color:var(--yzf-dark); margin:0; line-height:1.2; }
body.yzf-design-skin .filter-list .inner-box .designer-name a { color:inherit; text-decoration:none; }
body.yzf-design-skin .filter-list .inner-box .designation,
body.yzf-design-skin .filter-list .inner-box .subtitle { font-size:12px; font-weight:700; color:#e4393c; margin:0; }
body.yzf-design-skin .filter-list .inner-box .designer-head .dh-left { display:flex; align-items:baseline; gap:10px; min-width:0; }
body.yzf-design-skin .filter-list .inner-box .designer-head .theme-btn.yzf-appoint {
    flex:none; align-self:center; margin:0; height:32px; padding:0 18px;
    font-size:13px; font-weight:700; border-radius:18px; white-space:nowrap;
}

/* 字段标签（擅长风格 / 设计理念） */
body.yzf-design-skin .filter-list .inner-box .field-label { font-size:13px; color:#444; font-weight:600; }
body.yzf-design-skin .filter-list .inner-box .style-block { margin:0 0 8px; line-height:22px; }
body.yzf-design-skin .filter-list .inner-box .text-block { margin:0 0 8px; }
body.yzf-design-skin .filter-list .inner-box .text,
body.yzf-design-skin .filter-list .inner-box p { font-size:13px; color:var(--yzf-gray); line-height:1.6; }

body.yzf-design-skin .filter-list .inner-box .style-tags span,
body.yzf-design-skin .filter-list .inner-box .labels span,
body.yzf-design-skin .filter-list .inner-box .tag {
    display:inline-block; height:22px; line-height:22px; padding:0 10px;
    background:var(--yzf-tag-bg); color:var(--yzf-tag-color);
    border-radius:3px; margin:0 6px 4px 0; font-size:12px; vertical-align:middle;
}
body.yzf-design-skin .filter-list .inner-box .hot span,
body.yzf-design-skin .filter-list .inner-box .experience {
    display:inline-block; padding:0 10px; height:24px; line-height:24px;
    background:var(--yzf-hot-bg); color:var(--yzf-hot-color);
    border-radius:3px; font-size:13px; margin:0 0 8px;
}
body.yzf-design-skin .filter-list .inner-box .hot span b,
body.yzf-design-skin .filter-list .inner-box .experience b { font-weight:700; color:#c44d15; }

body.yzf-design-skin .filter-list .inner-box .labels,
body.yzf-design-skin .filter-list .inner-box .style-tags {
    margin:4px 0 0; font-size:12px; color:#888; line-height:1.8;
}
body.yzf-design-skin .filter-list .inner-box .labels span,
body.yzf-design-skin .filter-list .inner-box .style-tags span {
    display:inline; background:none; color:#888; padding:0; margin:0 8px 0 0;
    border-radius:0; height:auto; line-height:inherit; font-size:12px;
}

body.yzf-design-skin .filter-list .inner-box .theme-btn,
body.yzf-design-skin .filter-list .inner-box .read-more,
body.yzf-design-skin .filter-list .inner-box a.btn {
    display:inline-flex; align-items:center; justify-content:center;
    height:38px; padding:0 24px; margin-top:6px;
    background-image:linear-gradient(to bottom,var(--yzf-blue-a),var(--yzf-blue-b));
    color:#fff !important; font-weight:700; font-size:14px; border-radius:8px;
    text-decoration:none; border:none; cursor:pointer;
}
body.yzf-design-skin .filter-list .inner-box .theme-btn:hover { opacity:.92; }

/* 每位设计师下方的三套设计案例：横排3个 */
.yzf-cases { display:grid!important; grid-template-columns:repeat(3,1fr)!important; gap:6px!important; margin-top:10px!important; }
.yzf-cases .yzf-case-item { display:block; text-decoration:none; overflow:hidden; }
.yzf-cases .yzf-case-item img { width:100%; height:84px; object-fit:cover; border-radius:6px; display:block; background:#eef1f4; transition:transform .3s ease; }
.yzf-cases .yzf-case-item:hover img { transform:scale(1.04); }
.yzf-cases .yzf-case-item span { display:block; font-size:12px; color:#555; margin-top:4px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 分页 */
body.yzf-design-skin .styled-pagination.text-center.pt-2.imgText { text-align:center !important; margin:30px 0 10px; }
body.yzf-design-skin .styled-pagination.imgText ul,
body.yzf-design-skin .styled-pagination.imgText .pagination { display:inline-flex !important; gap:8px !important; list-style:none !important; padding:0 !important; margin:0 !important; }
body.yzf-design-skin .styled-pagination.imgText li { background:#fff !important; border-radius:8px !important; box-shadow:var(--yzf-shadow) !important; min-width:38px; height:38px; line-height:38px; text-align:center; }
body.yzf-design-skin .styled-pagination.imgText li a,
body.yzf-design-skin .styled-pagination.imgText li span { color:#333 !important; display:block !important; background:transparent !important; }
body.yzf-design-skin .styled-pagination.imgText li.active,
body.yzf-design-skin .styled-pagination.imgText li:hover { background-image:linear-gradient(to bottom,var(--yzf-blue-a),var(--yzf-blue-b)) !important; background-color:transparent !important; }
body.yzf-design-skin .styled-pagination.imgText li.active a,
body.yzf-design-skin .styled-pagination.imgText li.active span,
body.yzf-design-skin .styled-pagination.imgText li:hover a { color:#fff !important; }

/* 所有弹窗共用（预约TA / 算报价 / 预约量房） */
.yzf-modal-mask {
    position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999;
    display:none; align-items:center; justify-content:center; padding:15px;
}
.yzf-modal {
    position:relative; width:100%; max-width:440px; background:#fff;
    border-radius:14px; padding:30px 28px; box-shadow:0 20px 50px rgba(0,0,0,.25); animation:yzfPop .25s ease;
}
@keyframes yzfPop { from{transform:translateY(20px);opacity:0} to{transform:none;opacity:1} }
.yzf-modal h2 { font-size:20px; color:var(--yzf-dark); margin:0 0 4px; text-align:center; font-weight:700; }
.yzf-modal h3 { font-size:18px; color:var(--yzf-dark); margin:0 0 20px; font-weight:700; }
.yzf-modal h3 .yzf-modal-name { color:var(--yzf-blue); }
.yzf-modal .yzf-sub { text-align:center; color:#666; font-size:14px; margin:0 0 18px; }
.yzf-modal .form-group { margin-bottom:14px; }
.yzf-modal input[type="text"],
.yzf-modal input[type="tel"],
.yzf-modal input[type="number"] {
    width:100%; height:48px; border:1px solid #e6e9ef; border-radius:8px;
    padding:0 14px; font-size:14px; color:#333; outline:none; transition:border-color .2s,box-shadow .2s; box-sizing:border-box;
}
.yzf-modal input:focus { border-color:var(--yzf-blue); box-shadow:0 0 0 3px rgba(15,149,255,.15); }
.yzf-modal button.submit-btn {
    width:100%; height:48px; border:none; border-radius:8px; cursor:pointer; margin-top:6px;
    background-image:linear-gradient(to right,#fe951e,#ffb35b); color:#fff; font-size:16px; font-weight:700;
}
.yzf-modal button.submit-btn:hover { opacity:.94; }
.yzf-modal .yzf-tip { font-size:13px; color:#999; margin:12px 0 0; text-align:center; }
.yzf-modal .yzf-modal-close {
    position:absolute; top:10px; right:14px; width:32px; height:32px;
    border:none; background:transparent; font-size:26px; line-height:32px; color:#999; cursor:pointer;
}
.yzf-modal .yzf-modal-close:hover { color:#333; }

/* 移动端 */
@media (max-width:900px) {
    .yzf-layout { flex-direction:column; }
    .yzf-sidebar { width:100%; flex:none; position:static; }
    .yzf-sidebar ul { display:flex; flex-wrap:wrap; }
    .yzf-sidebar a, .yzf-sidebar .yzf-nav-other { border-left:none; }
    .yzf-top { flex-direction:column; }
    .yzf-appoint-card { width:100%; flex:none; }
    body.yzf-design-skin .filter-list .col-lg-4,
    body.yzf-design-skin .filter-list .col-md-6,
    body.yzf-design-skin .filter-list .col-xs-12 { width:100%; }
    body.yzf-design-skin .filter-list .inner-box { flex-direction:column; text-align:center; }
    body.yzf-design-skin .filter-list .inner-box .image-box { width:100%; flex:none; margin:0 auto; }
    /* 手机端每页只显示 6 条（后端每页 15，用 CSS 隐藏第 7 条起；分页仍保留） */
    body.yzf-design-skin .filter-list .col-lg-4:nth-child(n+7),
    body.yzf-design-skin .filter-list .col-md-6:nth-child(n+7),
    body.yzf-design-skin .filter-list .col-xs-12:nth-child(n+7) { display:none !important; }
}