/* ========== ucenter 公共样式 ========== */

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f5f6f7; font-family: "Microsoft YaHei", "微软雅黑", sans-serif; color: #333; font-size: 14px; }
a { text-decoration: none; color: #333; }
a:hover { text-decoration: none; }
img { border: 0; max-width: 100%; }
ul, li { list-style: none; }


/* ========== 布局容器（与 style.css 的 .box_center 保持一致 1400px） ========== */

.box_center { margin: 0 auto; width: 1400px; }

/* ucenter 主体包裹（Default.aspx 用） */
.ucenter_wrap {
    width: 1400px;
    margin: 20px auto;
    display: flex;
    min-height: 600px;
}

/* uc_wrap / uc_body（Favorite.aspx / Purchased.aspx 用） */
.uc_wrap {
    width: 1400px;
    margin: 20px auto;
}

.uc_body {
    display: flex;
    min-height: 600px;
}

/* 通用左侧菜单（两个命名都支持） */
.uc_menu,
.ucenter_menu {
    width: 200px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
    margin-right: 20px;
}

.uc_menu a,
.ucenter_menu a {
    display: block;
    padding: 15px 25px;
    font-size: 14px;
    color: #666;
    border-left: 3px solid transparent;
    transition: all 0.3s;
}

.uc_menu a:hover,
.ucenter_menu a:hover {
    background: #f8f9fa;
    color: #15b894;
}

.uc_menu a.cur,
.uc_menu a.active,
.ucenter_menu a.cur,
.ucenter_menu a.active {
    background: #f0faf6;
    color: #15b894;
    border-left-color: #15b894;
    font-weight: 600;
}

/* 通用右侧内容区 */
.uc_content,
.ucenter_content {
    flex: 1;
    min-width: 0;
}


/* ========== 空状态提示 ========== */

.uc_empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 15px;
}

.uc_empty a {
    color: #15b894;
}


/* ========== layui-table 兼容样式（JS 动态生成表格用） ========== */

.layui-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.layui-table thead tr {
    background: #f8f9fa;
}

.layui-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 14px;
    color: #666;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}

.layui-table td {
    padding: 14px 16px;
    text-align: left;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.layui-table tbody tr:hover td {
    background: #f8f9fa;
}

.layui-table .title_link,
.layui-table a {
    color: #333;
    text-decoration: none;
}

.layui-table a:hover {
    color: #15b894;
}


/* ========== 用户卡片（Default.aspx） ========== */

.ucenter_info {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 30px;
}

.ucenter_card {
    display: flex;
    align-items: center;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
    margin-bottom: 25px;
}

.card_avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: #e8f5f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
}

.card_avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card_name {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.card_stats {
    display: flex;
    gap: 40px;
}

.stat_item {
    text-align: center;
}

.stat_num {
    display: block;
    font-size: 22px;
    font-weight: bold;
    color: #15b894;
    margin-bottom: 4px;
}

.stat_label {
    font-size: 13px;
    color: #999;
}


/* ========== 快捷链接按钮 ========== */

.ucenter_links {
    display: flex;
    gap: 15px;
}

.ucenter_links .link_btn {
    display: inline-block;
    padding: 10px 28px;
    background: #15b894;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
    transition: background 0.3s;
}

.ucenter_links .link_btn:hover {
    background: #12a07e;
}


/* ========== 数据表格（已购/收藏通用） ========== */

.data_table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.data_table th,
.data_table td {
    padding: 14px 16px;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.data_table th {
    background: #f8f9fa;
    color: #666;
    font-weight: 600;
}

.data_table td {
    color: #333;
}

.data_table tr:hover td {
    background: #f8f9fa;
}

.data_table .title_link {
    color: #333;
}

.data_table .title_link:hover {
    color: #15b894;
}


/* ========== 收藏列表 ========== */

.fav_list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fav_item {
    display: flex;
    align-items: center;
    padding: 14px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: background 0.3s;
}

.fav_item:hover {
    background: #f0f4f3;
}

.fav_item .fav_img {
    width: 80px;
    height: 60px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 15px;
    flex-shrink: 0;
}

.fav_item .fav_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fav_item .fav_info {
    flex: 1;
    min-width: 0;
}

.fav_item .fav_title {
    font-size: 15px;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav_item .fav_title a {
    color: #333;
}

.fav_item .fav_title a:hover {
    color: #15b894;
}

.fav_item .fav_meta {
    font-size: 13px;
    color: #999;
}

.fav_item .fav_time {
    font-size: 13px;
    color: #999;
    flex-shrink: 0;
    margin-left: 15px;
}

.fav_item .fav_action {
    margin-left: 15px;
    flex-shrink: 0;
}

.fav_item .fav_action .btn_cancel {
    padding: 5px 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
}

.fav_item .fav_action .btn_cancel:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}


/* ========== 分页 ========== */

.pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 25px;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    color: #666;
    background: #fff;
}

.pagination a:hover {
    border-color: #15b894;
    color: #15b894;
}

.pagination .current {
    background: #15b894;
    color: #fff;
    border-color: #15b894;
}


/* ========== 响应式 ========== */

@media (max-width: 768px) {
    .ucenter_wrap,
    .uc_wrap {
        width: 100%;
        padding: 0 10px;
    }
    .uc_body,
    .ucenter_wrap {
        flex-direction: column;
    }
    .uc_menu,
    .ucenter_menu {
        width: 100%;
        display: flex;
        margin-right: 0;
        margin-bottom: 15px;
        border-radius: 0;
    }
    .uc_menu a,
    .ucenter_menu a {
        flex: 1;
        text-align: center;
        padding: 12px 10px;
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    .uc_menu a.cur,
    .uc_menu a.active,
    .ucenter_menu a.cur,
    .ucenter_menu a.active {
        border-left: none;
        border-bottom-color: #15b894;
    }
    .ucenter_card {
        flex-direction: column;
        text-align: center;
    }
    .card_avatar {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .card_stats {
        justify-content: center;
    }
}