body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
}

/* 顶部面包屑（与 product 风格保持一致的精简版） */
.p-breadcrumbs {
    /* max-width: 1200px; */
    /* margin: 10px auto 8px; */
    padding: 6px 8px;
    color: #686f7e;
    border-bottom: 1px solid #dddddd;
    background-color: antiquewhite;
}
.p-breadcrumbs .nav-lists a { color: #374151; text-decoration: none; }
.p-breadcrumbs .sep { margin: 0 6px; color: #9ca3af; }
.p-breadcrumbs .trail { color: #9ca3af; }

.main-content {
    display: flex;
    /* padding: 10px; */
    padding-bottom: 10px;
    background-color: rgb(255, 255, 255);
    align-items: center;
    /* max-width: 1200px; */
    /* margin: 10px auto; */
    /* flex: 1 0; */
    /* min-width: 0; */
    /* border: 1px solid #ededed; */
    flex-direction: column;
    flex: 2 1 0;
    min-width: 0;
    border: 1px solid #ededed;
}

/* （保留）无子导航样式，已回滚结构化子导航 */

.main-title {
    font-size: 35px; /* 字体大小 */
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #333; /* 字体颜色 */
    font-weight: 600;
    margin-bottom: 18px; /* 底部外边距 */
}

.user-welcome-one {
    font-size: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #000000;
    /* margin-bottom: 18px; */
    margin: 0;
    margin-left: 10px;
    font-weight: bold;
    display: block;
}

.user-welcome-two {
    font-size: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #999999;
    /* margin-bottom: 18px; */
    margin: 0;
    margin-left: 10px;
    font-weight: bold;
    display: block;
}

.user-profile-one-line {
    color: #727272;
}

.main-description {
    font-size: 13px; /* 字体大小 */
    color: #666; /* 字体颜色 */
    margin-bottom: 20px; /* 底部外边距 */
}

.search-form {
    display: flex;
    background-color: #ffffff;
    border: 1px solid #999;
    border-radius: 10px;
    padding: 4px;
}

.form-input {
    /* flex: 1; */
    /* padding: 13px; */
    border: none;
    font-size: 16px; /* iOS Safari 不会再触发自动缩放 */
    /* background-color: #e9e9e9; */
    /* border-radius: 10px; */
    /* flex: 1; */
    /* padding: 13px; */
    /* border: 1px solid #e0e0e0; */
    /* border-radius: 10px 0 0 10px; */
    /* font-size: 16px; */
    /* box-sizing: border-box; */
    width: 100%;
    box-sizing: border-box;
    color: #000;
}

.form-input:focus {
    background-color: #fff; /* 获取焦点时的背景颜色 */
    color: #000; /* 获取焦点时的字体颜色 */
    outline: none; /* 去除默认的聚焦边框 */
    border-color: #007bff; /* 自定义聚焦边框颜色 */
}

.form-button {
    white-space: nowrap;
    width: 65px;
    border-radius: 10px;
    border: none;
    background: #93c7ff;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
}

.form-button:hover {
    background-color: #f1f1f1;
}

.form-button img {
    width: 25px;
    height: 22px;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    position: absolute;
}

.title1, .title2, .title3, .title4 { 
    flex-direction: column; 
    background-color: #f1f1f1;
    padding: 2px 10px; /* 上下内边距为2px，左右内边距为5px */
    text-align: left; /* 文本居中对齐 */
    margin-top: 10px; /* 确保内容不被固定的header遮挡 */
}

.title1 p, .title2 p, .title3 p, .title4 p {
    padding-top: 1px;
    margin: 0px;
    font-size: 18px;
    font-weight: bold;
    color: #3d3d3d;
    box-sizing: border-box;
}

.order-btn {
    border: none;
    background-color: transparent;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    box-shadow: none;
    transition: none;
    padding: 0;
    width: 100%;
    display: contents;
}

.user-signin {
    display: flex;
    width: 100%;
    /* text-align: center; */
    /* flex-direction: column; */
}

.order-btn-span {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}


.left {
    text-align: left; /* 左对齐 */
}

.right {
    text-align: right; /* 右对齐 */
}

/*人工服务容器*/

.list-card-1 {
    display: flex;
    flex-direction: row;
    padding: 10px;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    margin-top: 10px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
}

.user-image {
    display: flex; /* 如果需要居中，可以用 flex */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width: 100px; /* 设置容器的宽度 */
    height: 100px; /* 设置容器的高度 */
    border-radius: 50%; /* 容器圆形化（如果需要容器也显示圆） */
    overflow: hidden; /* 确保图片不会超出容器 */
    background-color: #f9f9f9; /* 如果图片未加载，显示背景色 */
}

.circle-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    /* border-radius: 50%; */
}

.user-profile {
    display: flex;
    flex-direction: row;
    padding: 10px;
}

.list-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: rgb(255, 255, 255);
    margin-top: 10px;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    flex: 5 1 0;
    min-width: 0;
}

.order-list,
.rengong-card,
.fangan-card,
.liuyaban-card,
.blog-card,
.hezuo-card {
    display: flex;
    flex-direction: column;
    padding: 10px;

    background-color: rgb(255, 255, 255);
    margin-top: 10px;
    box-sizing: border-box;
}

.card-link {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    padding: 1px 10px; /* 调整上下内边距为5px，左右内边距为10px */
    background-color: rgb(255, 255, 255); /* 背景颜色 */
    text-decoration: none; /* 去掉链接的下划线 */
    margin-top: 10px;
    box-sizing: border-box;
}

.card-link p{
    font-size: 17px; /* 设置字体大小 */
    padding: 1px; /* 内边距 */
    color: #333; /* 设置字体颜色 */
    border-bottom: 1px solid #ccc; /* 底部边框 */
}

/* 悬停效果 */


.image-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    padding-bottom: 5px;
    margin-bottom: 7px; /* 每个图片容器之间的下外边距 */
    text-decoration: none; /* 去掉链接的下划线 */
    color: inherit; /* 继承父元素颜色 */
}

.image-container-copy {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    padding-bottom: 5px;
    margin-bottom: 7px; /* 每个图片容器之间的下外边距 */
    text-decoration: none; /* 去掉链接的下划线 */
    color: inherit; /* 继承父元素颜色 */
}

.image-container span {
    flex-grow: 1; /* 占据剩余空间 */
    font-size: 17px; /* 设置字体大小 */
    color: #333; /* 设置字体颜色 */
    align-items: center; /* 垂直居中对齐 */
    border-bottom: 1px solid #ccc; /* 底部边框 */
    padding-bottom: 3px;
}

.image-container-copy span {
    flex-grow: 1; /* 占据剩余空间 */
    font-size: 17px; /* 设置字体大小 */
    color: #333; /* 设置字体颜色 */
    display: flex; /* 设置为flex布局 */
    align-items: center; /* 垂直居中对齐 */
    
}

.image-container img {
    max-width: 30px; /* 调整图片宽度 */
    height: auto; /* 保持图片比例 */
    margin-right: 10px; /* 图片和文字之间的间距 */
}

.text-and-icon {
    display: flex;
    align-items: center;
    flex-grow: 1;
    border-bottom: 1px solid #ccc; /* 底部边框 */
    padding-bottom: 3px;
}

.text-and-icon span {
    flex-grow: 1; /* 占据剩余空间 */
    font-size: 17px; /* 设置字体大小 */
    color: #333; /* 设置字体颜色 */
    display: flex; /* 设置为flex布局 */
    align-items: center; /* 垂直居中对齐 */
}


.chevron {
    width: 24px;
    height: 24px;
    fill: #666;
    transition: transform 0.3s ease;
}

footer {
    background-color: #ffffff;
    color: #474747;
    text-align: center;
    width: 100%;
    padding: 5px 0;
    font-size: 10px;
    margin-top: 100px; /* 距离上一个容器100px */
}

.card-content {
    display: none;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
}


.row {
    width: 100%;
    border: 1px solid #e4e4e4;
}

input#df-content {
    height: 179px;
}

.row-content {
    display: flex;
    justify-content: space-between;
    border: 1px solid #e4e4e4;
    width: 100%;
}

button.from-btn {
    width: 20%;
    padding: 1px;
    border: none;
    background-color: #e9e9e9;
}

select#df-order-select {
    background: none;
    color: #000;
}
div#my-disputes{ background-color: aliceblue; }

/* 已回滚工单中心结构化样式（dp-* 类） */


div#top {
    padding: 10px;
}



.service-wapper {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 20px auto;
}

.service-box {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
}



.service-lists {
    width: 100%;
}

/* 移动端基础排布 */
@media (max-width: 768px) {
    .service-box {
        flex-direction: column;
        gap: 12px;
    }

    .main-content,
    #dispute-center {
        width: 100%;
    }

    #dispute-center {
        margin-top: 12px;
    }

    .user-profile {
        flex-direction: column;
        align-items: flex-start;
    }

    .user-welcome-one,
    .user-welcome-two {
        margin-left: 0;
    }

    .row-content {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    /* 子导航/表单网格相关的移动端样式已回滚 */

    .row-content .form-input {
        width: 100%;
    }

    button.from-btn {
        width: 100%;
    }
}


.nav-lists {
    margin: 0 auto;
    max-width: 1200px;
}