/* ============================================================
   听心树 — 设计师主页  v4.0
   ============================================================ */

/* ===== 深色 Hero ===== */
.zh_ms_hero {
    background: var(--zh-grad-deep);
    padding: 34px 0 44px;
    position: relative;
    overflow: hidden;
    color: rgba(234, 244, 241, .72);
}
.zh_ms_hero::after {
    content: "";
    position: absolute;
    right: -110px; top: -130px;
    width: 420px; height: 420px;
    border-radius: 62% 38% 55% 45%;
    background: radial-gradient(circle at 40% 42%, rgba(155, 201, 138, .12), transparent 66%);
    pointer-events: none;
}
.zh_ms_hero > .zh_container { position: relative; z-index: 2; }
.zh_ms_hero .zh_breadcrumb { color: rgba(234, 244, 241, .5); margin-bottom: 26px; }
.zh_ms_hero .zh_breadcrumb a { color: rgba(234, 244, 241, .68); }
.zh_ms_hero .zh_breadcrumb a:hover { color: #fff; }
.zh_ms_hero .zh_breadcrumb i { color: rgba(234, 244, 241, .35); }
.zh_ms_hero .zh_breadcrumb .zh_crumb_current { color: var(--zh-leaf); }

.zh_ms_top {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.zh_ms_avatar {
    width: 108px; height: 108px;
    font-size: 42px;
    flex-shrink: 0;
    border: 4px solid rgba(255, 255, 255, .14);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}
.zh_ms_intro { flex: 1; min-width: 260px; }
.zh_ms_name {
    margin: 0 0 10px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    letter-spacing: -.01em;
}
.zh_ms_verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--zh-primary-deep);
    background: var(--zh-leaf);
    padding: 4px 14px;
    border-radius: var(--zh-radius-pill);
}
.zh_ms_desc {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.9;
    color: rgba(234, 244, 241, .62);
    max-width: 660px;
}
.zh_ms_stats { display: flex; gap: 34px; flex-wrap: wrap; margin-bottom: 22px; }
.zh_ms_stat_num {
    font-size: 26px;
    font-weight: 700;
    color: var(--zh-leaf);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}
.zh_ms_stat_num span { font-size: 14px; margin-left: 3px; color: rgba(234, 244, 241, .6); }
.zh_ms_stat_label { font-size: 12.5px; color: rgba(234, 244, 241, .52); }
.zh_ms_actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== 主体 ===== */
.zh_ms_body { padding: 46px 0 76px; }
.zh_ms_layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: flex-start;
}

.zh_ms_panel {
    background: #fff;
    border: 1px solid var(--zh-border);
    border-radius: var(--zh-radius-lg);
    padding: 26px 28px 28px;
    box-shadow: var(--zh-shadow-sm);
}
.zh_ms_panel_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--zh-border);
}
.zh_ms_panel_head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--zh-text-primary);
    display: flex;
    align-items: center;
    gap: 11px;
}
.zh_ms_panel_head h2::before {
    content: "";
    width: 5px; height: 20px;
    border-radius: 3px;
    background: var(--zh-grad-coral);
}
.zh_ms_count { font-size: 13.5px; color: var(--zh-text-muted); }
.zh_ms_count strong { color: var(--zh-primary); font-size: 16px; font-weight: 700; margin: 0 2px; }

/* 信息卡网格 */
.zh_ms_infos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.zh_ms_info {
    display: flex;
    gap: 14px;
    border: 1px solid var(--zh-border);
    border-radius: var(--zh-radius-md);
    padding: 12px;
    transition: all .3s ease;
}
.zh_ms_info:hover { border-color: transparent; box-shadow: var(--zh-shadow-card); transform: translateY(-3px); }
.zh_ms_info_cover {
    width: 108px; height: 82px;
    flex-shrink: 0;
    border-radius: var(--zh-radius-sm);
    overflow: hidden;
    background: var(--zh-primary-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--zh-primary-mid);
    font-size: 18px;
}
.zh_ms_info_cover img { width: 100%; height: 100%; object-fit: contain; }
.zh_ms_info_body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.zh_ms_info_title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--zh-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zh_ms_info:hover .zh_ms_info_title { color: var(--zh-primary); }
.zh_ms_info_meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--zh-text-muted);
    flex-wrap: wrap;
}
.zh_ms_info_meta span { display: inline-flex; align-items: center; gap: 5px; }
.zh_ms_info_meta i { font-size: 11px; color: var(--zh-primary-mid); }

/* ===== 右侧栏 ===== */
.zh_ms_side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }

.zh_ms_contact {
    background: #fff;
    border: 1px solid var(--zh-border);
    border-radius: var(--zh-radius-lg);
    overflow: hidden;
    box-shadow: var(--zh-shadow-card);
}
.zh_ms_contact_head {
    background: linear-gradient(120deg, #EAF4F1 0%, #FAE7DE 100%);
    padding: 18px 22px;
}
.zh_ms_contact_head h3 { margin: 0 0 3px; font-size: 16px; font-weight: 700; color: var(--zh-text-primary); }
.zh_ms_contact_head p { margin: 0; font-size: 12.5px; color: var(--zh-text-body); }
.zh_ms_contact_body { padding: 8px 22px 22px; }
.zh_ms_c_item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px dashed var(--zh-border);
}
.zh_ms_c_item:last-of-type { border-bottom: none; }
.zh_ms_c_icon {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--zh-primary-soft);
    color: var(--zh-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.zh_ms_c_label { font-size: 11.5px; color: var(--zh-text-muted); letter-spacing: 1px; }
.zh_ms_c_value { font-size: 14px; font-weight: 600; color: var(--zh-text-primary); line-height: 1.55; word-break: break-all; }
.zh_ms_c_phone {
    display: block;
    font-size: 21px;
    font-weight: 700;
    color: var(--zh-coral-hover);
    letter-spacing: .4px;
    line-height: 1.35;
}
.zh_ms_c_phone:hover { color: var(--zh-coral); }
.zh_ms_c_btn { margin-top: 16px; }

/* 入驻信息 */
.zh_ms_meta_card {
    background: linear-gradient(160deg, #EAF4F1 0%, #F6F2EC 100%);
    border-radius: var(--zh-radius-lg);
    padding: 20px 22px;
}
.zh_ms_meta_title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--zh-text-primary);
    display: flex;
    align-items: center;
    gap: 9px;
}
.zh_ms_meta_title i { color: var(--zh-primary); font-size: 13px; }
.zh_ms_meta_list { list-style: none; margin: 0; padding: 0; }
.zh_ms_meta_list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(45, 110, 100, .1);
    font-size: 13.5px;
}
.zh_ms_meta_list li:last-child { border-bottom: none; }
.zh_ms_meta_list em { font-style: normal; color: var(--zh-text-muted); }
.zh_ms_meta_list b { color: var(--zh-text-primary); font-weight: 600; }

/* 平台提示 */
.zh_ms_tip {
    background: var(--zh-coral-soft);
    border-left: 3px solid var(--zh-coral);
    border-radius: 0 var(--zh-radius-md) var(--zh-radius-md) 0;
    padding: 15px 18px;
    font-size: 12.5px;
    line-height: 1.85;
    color: #8C4A33;
}
.zh_ms_tip strong { color: #7A3B26; font-weight: 700; }

/* 响应式 */
@media (max-width: 1024px) {
    .zh_ms_layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .zh_ms_side { position: static; }
}
@media (max-width: 768px) {
    .zh_ms_hero { padding: 24px 0 32px; }
    .zh_ms_hero .zh_breadcrumb { margin-bottom: 18px; }
    .zh_ms_top { gap: 18px; }
    .zh_ms_avatar { width: 76px; height: 76px; font-size: 30px; }
    .zh_ms_intro { min-width: 0; }
    .zh_ms_stats { gap: 24px; margin-bottom: 18px; }
    .zh_ms_stat_num { font-size: 22px; }
    .zh_ms_actions .zh_btn { flex: 1; }
    .zh_ms_body { padding: 32px 0 52px; }
    .zh_ms_panel { padding: 20px 16px 22px; }
    .zh_ms_infos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}