/*
Theme Name: Heyrain Wallpaper
Theme URI: https://www.toopic.cn/
Author: Heyrain
Description: 壁纸主题 - 复刻 toopic.cn
Version: 6.0.0
Text Domain: heyrain
*/
@charset "utf-8";
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,th,td,blockquote,p,pre,form,label,input,textarea,select,button,em,i,u,del,span,a,strong,b{margin:0;padding:0;word-break:break-all}
body{display:block;font:12px/1.5 Helvetica Neue,Helvetica,Tahoma,Arial,sans-serif,PingFang SC,Microsoft YaHei;color:#333;background:#f2f2f2}
h1,h2,h3,h4,h5,h6,input,textarea,select,button{font-size:100%}
table{border-collapse:collapse;border-spacing:0}
ul,ol{list-style:none}
i,em{font-style:normal}
input,textarea,select,button{outline:none}
input::-webkit-input-placeholder,input::-moz-placeholder,input:-ms-input-placeholder{color:#999}
img{border:0;vertical-align:middle}
a{color:#333;text-decoration:none}
.gray,.gray a{color:#999}
.blue,.blue a{color:#0078dc}
a:hover,a.gray:hover,.gray a:hover{color:#0078dc;text-decoration:underline;transition:2s;}
.fleft{float:left}
.fright{float:right}
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt25{margin-top:25px}
.mt30{margin-top:30px}
.mt35{margin-top:35px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml25{margin-left:25px}
.ml30{margin-left:30px}
.ml35{margin-left:35px}
.auto{min-width:1090px;margin-left:50px;margin-right:50px}
.pic-auto{width:1200px;margin-left:auto;margin-right:auto}
.layout-hd{line-height:30px;height:30px;position:relative;clear: both;display:flex;align-items:center}
.layout-hd h2{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500}
.layout-hd h2 svg{height:18px;font-size:18px;font-weight:600;line-height: 18px;color:#f08519}
.layout-hd span{position:absolute;right:5px;line-height: 32px;padding-top: 0;float: right}
.layout-hd .hd-r{height:30px;position:absolute;top:0;right:0;font-size:14px;color:#666}
.layout-hd .hd-r a{color:#999}
.layout-hd .hd-r a:hover{color:#0078dc}
.pic-layout{padding: 10px 15px;}
.layout{background:#fff;border-radius:6px}
.layout .layout-hd{padding:10px 15px}
.layout .layout-hd .hd-r{top:10px;right:15px}
.links li{float:left;padding:5px}
.links li a{display:block;
    padding: 6px 12px;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.links li a:hover{
     background: #1890FF;
     color: #fff!important;
     
}
.view-main{padding-bottom:0;margin-bottom:0}

.none{position:absolute;left:-9999px;top:-9999px}
.tag-active{color:#ed5444!important}
.links li a:hover{color:#0078dc;border-color:#0078dc;text-decoration:none}
.tags-list .links{padding:0 10px 10px}
.tags-list .links li a.tagc1{}
.tags-list .links li a.tagc2{font-weight:bold}
.tags-list .links li a .count{color:#666}
.tags-list .links li a:hover .count{color:#0078dc}





.header{height:60px}

.header .logo{width:122px;height:36px;background:url(images/logo.png) no-repeat center center;text-indent:-9999px;overflow:hidden;margin-right:20px;font-size:18px;font-weight:400}
/* ========== Header深色主题优化 ========== */

/* ========== Header深色主题优化 ========== */

/* 头部主容器 */
.header {
    height: 60px;
    background: #444;
    position: sticky;
    top: 0;
    z-index: 100;
}
.header .fixed {
    width: 100%;
    min-width: 1200px;
    height: 60px;
    padding: 0 55px;
    background: #444;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
}
.header .layout-l{display:flex;gap:40px;align-items:center}
.header .layout-r{display:flex;position:relative}
/* 导航 */
.header .nav {
    display: flex !important;
    align-items: center;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
    float: none !important;
}
.header .nav .item {
    position: relative;
    float: none !important;
}
.header .nav .item .one {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.25s;
    white-space: nowrap;
}
.header .nav .item .one:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}
.header .nav .item.active .one {
    color: #fff;
}
/* active底部指示线 */
.header .nav .item.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: linear-gradient(90deg, #f0a500, #ff7e00);
    border-radius: 2px;
}


/* 搜索框 */
.header .search-form {
    position: relative;
    margin-right: 16px;
    float: none !important;
    display: flex !important;
    align-items: center;
}
.header .search-form .s-txt {
    -webkit-autofill: true;
}

/* 强制覆盖浏览器自动填充样式 */
.header .search-form .s-txt:-webkit-autofill,
.header .search-form .s-txt:-webkit-autofill:hover,
.header .search-form .s-txt:-webkit-autofill:focus,
.header .search-form .s-txt:-internal-autofill-selected {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 36px rgba(68,68,68,1) inset !important;
    caret-color: #fff !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    border-radius: 20px !important;
}
/* 搜索图标 - 可点击 */
.search-form-icon {
    position: absolute;
    left: 12px;
    color: rgba(255,255,255,0.35);
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2;
    transition: color 0.25s;
}

.search-form-icon:hover {
    color: #f0a500 !important;
}

/* 输入框 */
.header .search-form .s-txt {
    width: 200px;
    height: 36px;
    padding: 0 16px 0 36px;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    border-radius: 20px !important;
    font-size: 13px;
    color: #fff;
    background: rgba(255,255,255,0.06) !important;
    outline: none;
    transition: all 0.3s;
    box-sizing: border-box;
}

.header .search-form .s-txt::placeholder {
    color: rgba(255,255,255,0.35);
}

.header .search-form .s-txt:focus {
    border-color: #f0a500 !important;
    background: rgba(255,255,255,0.1) !important;
    box-shadow: 0 0 0 3px rgba(240,165,0,0.15);
    width: 240px;
}

.header .search-form .s-txt:focus ~ .search-form-icon {
    color: #f0a500;
}

/* 隐藏原s-btn */
.header .search-form .s-btn {
    display: none !important;
}
/* 搜索错误提示 */
.search-error {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #e74c3c;
    color: #fff;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(231,76,60,0.3);
}

.search-error::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #e74c3c;
}

/* 抖动动画 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* 用户区域 */
.header .user-login {
    display: flex !important;
    align-items: center;
    float: none !important;
}

/* 未登录按钮 */
.unlogin-box {
    display: flex;
    align-items: center;
    gap: 8px;
}
.unlogin-box .login {
    padding: 7px 20px !important;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.7) !important;
    border: 1.5px solid rgba(255,255,255,0.2) !important;
    border-radius: 20px !important;
    text-decoration: none;
    transition: all 0.25s;
    background: transparent !important;
}
.unlogin-box .login:hover {
    border-color: #f0a500 !important;
    color: #f0a500 !important;
}
.unlogin-box .register {
    padding: 7px 20px !important;
    font-size: 13px;
    font-weight: 600;
    color: #fff !important;
    background: linear-gradient(135deg, #f0a500, #ff7e00) !important;
    border: none !important;
    border-radius: 20px !important;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(240,165,0,0.25);
    transition: all 0.25s;
}
.unlogin-box .register:hover {
    box-shadow: 0 4px 14px rgba(240,165,0,0.4);
    transform: translateY(-1px);
}

/* 已登录 */
.header .user-box {
    position: relative;
}
.header .user-data {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 24px;
    transition: background 0.25s;
    cursor: pointer;
    text-decoration: none;
}
.header .user-data:hover {
    background: rgba(255,255,255,0.06);
}
.header .user-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.1) !important;
    transition: border-color 0.25s;
}
.header .user-data:hover .user-avatar {
    border-color: #f0a500 !important;
}
.header .user-name {
    font-size: 13px !important;
    color: rgba(255,255,255,0.8) !important;
    font-weight: 500 !important;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 下拉箭头 - 纯CSS三角形 */
.user-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(255,255,255,0.5);
    margin-left: 4px;
    vertical-align: middle;
    transition: transform 0.25s, border-top-color 0.25s;
}

.header .user-box:hover .user-arrow {
    transform: rotate(180deg);
    border-top-color: #f0a500;
}

/* drop-menu默认隐藏 */
.header .user-box .drop-menu {
    display: none !important;
}

.header .user-box:hover .drop-menu {
    display: block !important;
}
/* 头部VIP徽章 */
.header-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
    flex-shrink: 0;
}
.header-vip-badge.vip-lifetime {
    background: linear-gradient(135deg, #f0a500, #ff7e00);
    color: #fff;
}
.header-vip-badge.vip-annual {
    background: linear-gradient(135deg, #f0a500, #e6a817);
    color: #fff;
}
.header-vip-badge.vip-guest {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-weight: 400;
}

/* ★ 下拉菜单 — 默认隐藏 */
.header .drop-menu {
    display: none;;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: #3a3a3a;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    padding: 8px 0;
    border: 1px solid rgba(255,255,255,0.08);
    z-index: 200;
}
.header .drop-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 13px;
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none;
    transition: all 0.2s;
    background: none !important;
}
.header .drop-menu a svg {
    flex-shrink: 0;
    opacity: 0.5;
    transition: all 0.2s;
}
.header .drop-menu a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.06) !important;
}
.header .drop-menu a:hover svg {
    opacity: 1;
    color: #f0a500;
}
.header .drop-menu .line {
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    margin: 4px 12px;
}

/* 下拉VIP入口 */
.drop-vip-item {
    background: rgba(240,165,0,0.08) !important;
}
.drop-vip-item svg {
    color: #f0a500 !important;
    opacity: 1 !important;
}
.drop-vip-item span {
    font-weight: 600;
    color: #fff !important;
}
.drop-vip-item em {
    margin-left: auto;
    font-size: 11px;
    font-style: normal;
    color: #ff7e00;
    font-weight: 500;
}

/* 退出按钮 */
.drop-logout {
    color: rgba(255,255,255,0.4) !important;
}
.drop-logout:hover {
    color: #e74c3c !important;
    background: rgba(231,76,60,0.08) !important;
}

/* 隐藏旧版元素 */
.header .user-icon.arrow-icon {
    display: none !important;
}
.header .vip-img {
    display: none !important;
}








/*.nav{margin-left:60px;width: 50%;overflow: hidden;display: inline-flex}*/
/*.nav .item{float:left;width:85px;position:relative}*/
/*.nav .item .one{display:block;height:60px;line-height:60px;text-align:center;font-size:16px;color:#fff;cursor:pointer;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;transition:background .3s ease}*/
/*.nav .item .one:hover,.nav .item.active .one{text-decoration:none;background:#ff8773}*/
/*.nav .item.open{width:118px;text-align: center}*/
/*.nav .item.open .arrow{display:block;width:12px;height:12px;background:url(images/arrow1.png) no-repeat 0 3px;position:absolute;right:18px;top:24px;z-index:5;cursor:pointer}*/
/*.nav .item.open .drop-menu{width:600px;padding:15px 10px;background:#14a0f5;box-shadow:0 8px 20px rgba(0,0,0,.2);border-radius:0 0 3px 3px;position:absolute;left:0;top:60px;z-index:20}*/
/*.nav .item.open .drop-menu a{float:left;width:45px;height:36px;line-height:36px;padding-left:15px;font-size:14px;color:#fff}*/
/*.nav .item.open .drop-menu .size a{width:85px;padding-left:15px}*/
/*.nav .item.open .drop-menu .line{width:570px;height:0;margin:10px auto;border-top:1px solid #46b9ff}*/
/*.nav .item.active .arrow{background-position:-13px 3px}*/
/*.search-form{height:30px;margin:15px 40px 0 0;background:#fff;border-radius:16px}*/
/*.search-form .s-txt{float:left;width:180px;height:20px;line-height:20px;padding:5px 10px;background:none;border:none;outline:none;box-sizing:content-box;border-radius:15px}*/
/*.search-form .s-btn{float:right;width:30px;height:30px;background:url(images/search.png) no-repeat center center;border:none;outline:none;cursor:pointer;margin-right:5px}*/
/*.unlogin-box{height:30px;margin:15px 0 0}*/
/*.unlogin-box a{float:left;width:58px;height:28px;line-height:28px;text-align:center;font-size:14px;color:#fff;border-radius:3px}*/
/*.unlogin-box a:hover{text-decoration:none}*/
/*.unlogin-box a.login{background-color:#3cb450;border:1px solid #3cb450;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}*/
/*.unlogin-box a.login:hover{background-color:#37aa5a;border-color:#37aa5a}*/
/*.unlogin-box a.register{margin-left:15px;border:1px solid #fff}*/
/*.user-box{position:relative}*/
/*.user-box .user-data{display:block;height:32px;padding:14px 8px;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;transition:background .3s ease}*/
/*.user-box.active .user-data{background:#14a0f5}*/
/*.user-box .user-data .user-avatar{float:left;width:32px;height:32px;border-radius:50%}*/
/*.user-box .user-data .user-name{float:left;max-width:80px;height:20px;line-height:20px;margin:6px 0 6px 6px;font-size:14px;color:#fff;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}*/
/*.user-box .user-data .arrow-icon{float:left;width:12px;height:12px;margin:10px 0 10px 6px;background:url(images/arrow1.png) no-repeat 0 3px}*/
/*.user-box.active .user-data .arrow-icon{background-position:-13px 3px}*/
/*.user-box .drop-menu{display:none;width:120px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.2);border-radius:0 0 3px 3px;position:absolute;right:0;top:60px}*/
/*.user-box .drop-menu{width:120px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.2);border-radius:0 0 3px 3px;position:absolute;right:0;top:60px}*/
/*.user-box .drop-menu a{display:block;height:40px;line-height:40px;padding:0 20px;font-size:14px;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;transition:background .3s ease}*/
/*.user-box .drop-menu a:hover{text-decoration:none;background:#f0f0f0}*/
/*.user-box .drop-menu .line{height:1px;margin:0;background-color:#ebebeb;border:0}*/
/*.user-box .user-data .vip-img{    width: 60px;*/
/*    background: #f59e02;*/
/*    color: #fff;*/
/*    float: left;*/
/*    margin: 8px 5px 0px 10px;*/
/*    text-align: center;*/
/*    border-radius: 20px;}*/

.footer{width:100%;min-width:1200px;line-height:24px;padding:40px 0 30px;margin-top:50px;text-align:center;color:#aaa;background:#333}
.footer a{color:#aaa}
/* 颜色筛选样式 */
/* ============ 胶囊按钮（分类/尺寸通用） ============ */
.product_query .box .cont1 a,
.product_query .box .cont2 a{
    display:block;float:left;padding:0 12px;color:#5a5d68;font-size:12px;
    line-height:26px;margin:2px 5px 2px 0;border-radius:13px;
    transition:all 0.25s ease;cursor:pointer;
}
.product_query .box .cont1 a:hover,
.product_query .box .cont2 a:hover{
    color:#ff8773;background:#fff0ed;text-decoration:none;
}
.product_query .box .cont1 a.active,
.product_query .box .cont2 a.active{
    color:#fff;background-color:#ff8773;border-radius:13px;font-weight:500;
}

/* ============ 颜色筛选 ============ */
/* ============ 颜色筛选 ============ */
.color-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0;
    align-items: center;
    padding-left: 15px;
}
.color-item {
    position: relative;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 3px;
    border-radius: 14px;
    background: #f5f5f5;
    border: 1.5px solid transparent;
}
.color-item:hover {
    background: #fff0ed;
    border-color: #ffd4cc;
}
.color-item.active {
    background: #fff0ed;
    border-color: #ff8773;
    box-shadow: 0 1px 6px rgba(255, 135, 115, 0.18);
}
.color-item .color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}
.color-item:hover .color-dot {
    transform: scale(1.08);
}
.color-item.active .color-dot {
    transform: scale(1.08);
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #ff8773;
}
.color-item .color-name {
    font-size: 12px;
    color: #5a5d68;
    white-space: nowrap;
    transition: all 0.2s ease;
    line-height: 1;
}
.color-item:hover .color-name {
    color: #ff8773;
}
.color-item.active .color-name {
    color: #ff8773;
    font-weight: 600;
}
.color-item[data-color="white"] .color-dot {
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px #e0e0e0;
}
.color-item[data-color="white"].active .color-dot {
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #ff8773;
}









.location{font-size:14px;font-weight:normal;position:relative;
    width: 100%;
    margin-top: 0;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04);
}
.location a{color: #1890FF;text-decoration: none;}
.gobacktop{display:none;width:40px;height:40px;background:#3c3c3c;border-radius:4px;position:fixed;right:8px;bottom:157px;cursor:pointer;z-index:900;overflow:hidden;font-size:0;line-height:0;text-indent:-9999px}.gobacktop::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:10px solid #fff;transform:translate(-50%,-60%)}

.flink{padding:0 10px 15px}
.flink li{float:left;height:20px;line-height:20px;padding:5px;white-space:nowrap;font-size:14px}

.pic-list{position:relative}
.pic-list li{float:left;width:20%;padding:9px;box-sizing:border-box}
.pic-list li .bd{background:#fff;border-radius:8px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;overflow:hidden}
.pic-list li .bd:hover{box-shadow:0 4px 16px rgba(0,0,0,.15);-webkit-transform:translate(0,-4px);-moz-transform:translate(0,-4px);transform:translate(0,-4px)}
.pic-list li .pic{display:block;aspect-ratio:16/9;max-height:280px;overflow:hidden;position:relative}
.pic-list li.device-phone .pic{aspect-ratio:9/16;max-height:320px}
.grid-item.device-desktop .pic{aspect-ratio:16/9}
.grid-item.device-phone .pic{aspect-ratio:9/16;max-height:360px}
img[loading="lazy"] {
  aspect-ratio: attr(width) / attr(height);
  max-width: 100%;
  height: auto;
  display: block;
}
.pic-list li .pic img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.pic-list li:hover .pic img{transform:scale(1.05)}
.pic-list li .text{padding:10px 12px;overflow:hidden}
.pic-list li .text p{line-height:20px;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pic-list li .text .info{margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pic-list li .text .info a{margin-right:8px}
.pic-list li .text .info a:last-of-type{margin-right:0}
.gallery{min-width:1120px;margin-left:40px;margin-right:40px}
.likearticle{margin:0 -10px}
.likearticle li{width:25%}
.pc-modeo li{width:33.3333%!important}

/*   首页手机壁纸  */
.index-sjpic{width:16.66666666666667%!important}
/*   手机壁纸列表页  */
/*   手机壁纸列表页  */
/*   手机壁纸列表页  */
.pic-list .sj-pic{width:16.66666666666667%}
/*   手机壁纸列表页  */
.page{margin:30px 0 0;text-align:center}
.page ul{display:inline-block;zoom:1;*display:inline}
.page ul li{float:left;display:inline;margin:0 5px}
.page ul li a,.page ul li span{display:inline-block;height:38px;line-height:38px;padding:0 18px;font-size:14px;background:#fff;border:1px solid #d7d7d7;border-radius:3px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
.page ul li a:hover{text-decoration:none;border-color:#0096fa}
.page ul li .active{color:#fff;background:#0096fa;border-color:#0096fa}
.page ul li .pageinfo{height:40px;line-height:40px;padding:0 5px;color:#666;background:none;border:none}

.pic-main-l{width:830px;position: relative;}
.sj-pic-main .pic-main-l{ box-sizing: border-box;margin-right:20px}
.pic-main-r{width:350px}
.pic-con{padding:30px;background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 8px 30px rgba(0,0,0,0.08);border-radius:16px}
.pic-preview{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:#f5f7fa}
.pic-preview a{display:block;line-height:0}
.pic-preview img{max-width:100%;max-height:700px;height:auto;object-fit:contain;border-radius:4px}
.pic-body{line-height:26px;padding:0 30px 20px;font-size:16px}
.pic-body p{padding:10px 0;text-indent:2em}
.preview-pic{min-height:600px;position: relative}
.preview-pic table,.preview-pic table td{width:100%;min-height:600px}
.preview-pic table td{text-align:center}
.preview-pic table td img{max-width:100%;max-height:600px}

.sj-pic-main{display:flex}
/*   手机壁纸详情页  */
.sjview-pic table td img{max-width:100%;max-height:650px!important}
/*   手机壁纸详情页  */


@media (max-width: 1280px) {
    .sj-pic-main{flex-direction: column;}
    /*.preview-section{padding:0!important; margin-right: 0px;width:100%;margin-bottom:20px}*/
    .pic-main-r{width:100%}
    }
@media (max-width: 768px) {
    .sj-pic-main{flex-direction: column;}
    /*.preview-section{padding:0!important; margin-right: 0px;}*/
    }
/* iPhone 展示区 */
.preview-section .layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background: #fff;
   padding-bottom: 30px;
    border-radius: 16px;
    box-sizing: border-box;
    padding:0 30px 30px 30px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 8px 30px rgba(0,0,0,0.08);
}
.pic-tags-list{border-radius:16px;background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 8px 30px rgba(0,0,0,0.08);}

/* 导航箭头 */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-100%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    backdrop-filter: blur(4px);
}

.nav-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: translateY(-100%) scale(1.1);
}

.nav-arrow svg {
    width: 24px;
    height: 24px;
}

.nav-prev {
    left: 0;
}

.nav-next {
    right: 0;
}


/*.sj-tag-box{*/
/*  width: 100%;*/
 
 
/*}*/
.sj-tag-box .pic-tags{display:flex;flex-wrap:wrap}


.iphone-frame {
    margin-top: 25px;
    position: relative;
    width: 280px;
    height: 600px;
    background: #000000;
    border-radius: 48px;
    padding: 0;
    box-shadow: 

        0 0 0 3px #e8e8e8,
        0 0 0 4px #c0c0c0,
        /* 阴影 */
        0 5px 60px rgba(0, 0, 0, 0.25),
        0 4px 20px rgba(0, 0, 0, 0.2);
    /*animation: float 6s ease-in-out infinite;*/
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}


.iphone-frame:hover {
    animation: none;
    box-shadow: 
        0 0 0 3px #e8e8e8,
        0 0 0 4px #c0c0c0,
        0 10px 70px rgba(0, 0, 0, 0.3),
        0 5px 50px rgba(0, 0, 0, 0.25);
}


.iphone-frame::before {
    display: none;
}

.iphone-frame::after {
    display: none;
}


.iphone-border-inner {
    display: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotateX(0deg); }
    50% { transform: translateY(-12px) rotateX(2deg); }
}


.iphone-volume-btn {
    position: absolute;
    left: -3px;
    width: 3px;
    background: linear-gradient(180deg, #d0d0d0, #a0a0a0);
    border-radius: 2px;
    z-index: 5;
}

.iphone-volume-up {
    top: 120px;
    height: 30px;
}

.iphone-volume-down {
    top: 165px;
    height: 30px;
}

.iphone-volume-mute {
    top: 80px;
    height: 15px;
}


.iphone-frame::after {
    content: '';
    position: absolute;
    left: -2px;
    top: 120px;
    width: 3px;
    height: 30px;
    background: linear-gradient(180deg, #c0c0c0, #a0a0a0);
    border-radius: 2px;
    box-shadow: 
        0 45px 0 #a0a0a0,
        0 90px 0 #a0a0a0;
}


.iphone-power-btn {
    position: absolute;
    right: -3px;
    top: 140px;
    width: 3px;
    height: 50px;
    background: linear-gradient(180deg, #d0d0d0, #a0a0a0);
    border-radius: 2px;
    z-index: 5;
}


.iphone-dynamic-island {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 27px;
    background: #000;
    border-radius: 20px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}


.iphone-dynamic-island::before {
    content: '';
    position: absolute;
    right: 12px;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 30% 30%, #2a3a4a, #0a1520);
    border-radius: 50%;
    box-shadow: 
        inset 0 0 2px rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
}


.iphone-dynamic-island::after {
    content: '';
    position: absolute;
    left: 10px;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at 30% 30%, #1a2a3a, #050a10);
    border-radius: 50%;
}

.iphone-screen {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    background: #000;
    border-radius: 42px;
    overflow: hidden;
}

.iphone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.status-bar.dark-mode {
    color: #000000;
}
.status-bar.dark-mode .signal-bar {
    background: #000000;
}
.status-bar.dark-mode .battery-body {
    border-color: #000000;
}
.status-bar.dark-mode .battery-level {
    background: #000000;
}
.status-bar.dark-mode .battery-cap {
    background: #000000;
}
.lock-screen-overlay.dark-mode .lockscreen-date {
    color: #000000;
}
.lock-screen-overlay.dark-mode .lockscreen-time {
    color: #000000;
}


/* 顶部状态栏 */
.status-bar {
    position: absolute;
    top: 12px;
    left: 20px;
    right: 20px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 25;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    /*text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);*/
}

.status-bar-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-bar-left span {
    letter-spacing: -0.3px;
}

.status-bar-right {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-bar .signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 10px;
}

.status-bar .signal-bar {
    width: 3px;
    background: #FFFFFF;
    border-radius: 1px;
}

.status-bar .signal-bar:nth-child(1) { height: 3px; }
.status-bar .signal-bar:nth-child(2) { height: 5px; }
.status-bar .signal-bar:nth-child(3) { height: 7px; }
.status-bar .signal-bar:nth-child(4) { height: 9px; }
.status-bar .signal-bar:nth-child(5) { height: 11px; }

.status-bar .battery {
    display: flex;
    align-items: center;
    gap: 0;
}

.status-bar .battery-body {
    width: 16px;
    height: 6px;
    border: 1.5px solid #FFFFFF;
    border-radius: 4px;
    padding: 2px;
    position: relative;
    display: flex;
    align-items: center;
}

.status-bar .battery-level {
    width: 77%;
    height: 100%;
    background: #FFFFFF;
    border-radius: 1px;
}

.status-bar .battery-cap {
    width: 2px;
    height: 5px;
    background: #FFFFFF;
    border-radius: 0 1px 1px 0;
}

/* 锁屏界面 */
.lock-screen-overlay {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 55px;
    opacity: 1;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.iphone-frame:hover .lock-screen-overlay {
    opacity: 0;
    transform: translateY(-20px);
}

/* 锁屏日期 */
.lockscreen-date {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    /*text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);*/
    margin-bottom: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}

/* 锁屏时间（初始状态） */
.lockscreen-time {
    font-size: 55px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    /*text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);*/
    letter-spacing: -2px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    line-height: 1;
}

/* 锁屏底部快捷按钮 */
.lockscreen-actions {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 110px;
    z-index: 15;
    opacity: 1;
    transition: all 0.5s ease;
}

.iphone-frame:hover .lockscreen-actions {
    opacity: 0;
}

.quick-btn {
    width: 40px;
    height: 40px;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.08);
}

.quick-btn svg {
    width: 20px;
    height: 20px;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 2;
    fill: none;
}

.quick-btn svg path[fill="currentColor"] {
    fill: rgba(255, 255, 255, 0.9);
    stroke: none;
}

/* 解锁后桌面（悬停状态） */
.home-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 18;
    opacity: 0;
    transition: opacity 0.5s ease 0.1s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 55px 12px 25px;
}

.iphone-frame:hover .home-screen {
    opacity: 1;
}

/* 桌面图标网格 */
.app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 12px;
    padding: 0 8px;
}

.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: scale(0.8) translateY(10px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 图标交错出现动画 */
.iphone-frame:hover .app-icon {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.iphone-frame:hover .app-icon:nth-child(1) { transition-delay: 0.05s; }
.iphone-frame:hover .app-icon:nth-child(2) { transition-delay: 0.1s; }
.iphone-frame:hover .app-icon:nth-child(3) { transition-delay: 0.15s; }
.iphone-frame:hover .app-icon:nth-child(4) { transition-delay: 0.2s; }

.ios-icon {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.ios-icon svg {
    width: 36px;
    height: 36px;
}

.ios-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transform: scale(1.02);
}

/* 日历图标样式 */
.calendar-icon {
    background: #FFFFFF !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.calendar-icon svg {
    width: 100% !important;
    height: 100% !important;
}

/* 照片图标背景 - 白色圆角矩形 */
.photos-icon {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.photos-icon svg {
    width: 44px !important;
    height: 44px !important;
}

/* 微信图标背景 - 使用SVG自带背景 */
.wechat-icon {
    background: transparent !important;
}

.wechat-icon svg {
    width: 60px !important;
    height: 60px !important;
}

/* QQ图标背景 - 渐变蓝紫圆角矩形 */
.qq-iconx {
    background: linear-gradient(180deg, #12B7F5 0%, #0099E5 100%) !important;
    border-radius: 12px !important;
}

.qq-icon svg {
    width: 38px !important;
    height: 38px !important;
}

/* Safari图标背景 - 蓝色圆角矩形 */
.safari-icon {
    background: linear-gradient(180deg, #1DA2F8 0%, #0A84FF 100%) !important;
    border-radius: 11px !important;
}

.safari-icon svg {
    width: 36px !important;
    height: 36px !important;
}

/* 相机图标背景 - 灰色圆角矩形 */
.camera-icon {
    background: linear-gradient(180deg, #8E8E93 0%, #636366 100%) !important;
    border-radius: 11px !important;
}

.camera-icon svg {
    width: 36px !important;
    height: 36px !important;
}

.app-icon span {
    font-size: 12px;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    font-weight: 500;
}

/* 底部 Dock */
.dock {
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.28);
    /*backdrop-filter: blur(25px);*/
    /*-webkit-backdrop-filter: blur(25px);*/
    border-radius: 28px;
    padding: 12px 16px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s;
}

.iphone-frame:hover .dock {
    opacity: 1;
    transform: translateY(0);
}

.dock-icon-ios {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 6px;
    box-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.3),
        0 1px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dock-icon-ios:first-child {
    margin-left: 0;
}

.dock-icon-ios:last-child {
    margin-right: 0;
}

.dock-icon-ios svg {
    width: 32px;
    height: 32px;
}

.dock-icon-ios img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transform: scale(1.02);
}

/* 底部指示条 */
.iphone-home-indicator {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    z-index: 10;
}

/* 标签区 */
.tags-section {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    justify-content: center;
}

.tag {
    padding: 6px 14px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-light);
}

.tag:hover {
    background: var(--primary-color);
    color: #FFFFFF;
    transform: translateY(-2px);
}




/* ========== Mac 显示器框架样式 ========== */




.mac-frame {
    width: 100%;
    height: auto;
    max-height: 550px;
    margin: 0 auto;
    background: #1a1a1a;
    border-radius: 12px;
    position: relative;
    box-shadow:
        0 0 0 2px #464343,
        0 0 0 5px #464343,
        0 0px 0px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

/* 屏幕区域 */
.mac-screen {

}

/* 壁纸图片 */
.mac-screen > img {
    width: 100%;
    min-height: 450px;
    object-fit: cover;
}

/* 顶部菜单栏 */
.mac-menu-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    z-index: 25;
    background: rgba(0, 0, 0, 0.1);
    /*backdrop-filter: blur(20px);*/
    /*-webkit-backdrop-filter: blur(20px);*/
    font-size: 11px;
    font-weight: 500;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    transition: color 0.3s ease, background 0.3s ease;
}

.mac-menu-bar.dark-mode {
    color: #1d1d1f;
    background: rgba(255, 255, 255, 0.75);
}

.menu-bar-left {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
}

.apple-logo {
    opacity: 0.9;
    margin-right: 2px;
}

.menu-item {
    cursor: default;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.mac-menu-bar.dark-mode .menu-item:hover {
    background: rgba(0, 0, 0, 0.08);
}

.menu-item.active {
    font-weight: 600;
}

.menu-bar-right {
    display: flex;
    align-items: center;
    height: 100%;
}

.menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: default;
    transition: background 0.2s ease;
}

.menu-icon:hover {
    background: rgba(255, 255, 255, 0.15);
}

.mac-menu-bar.dark-mode .menu-icon:hover {
    background: rgba(0, 0, 0, 0.08);
}

.menu-time {
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: default;
    transition: background 0.2s ease;
}

.menu-time:hover {
    background: rgba(255, 255, 255, 0.15);
}

.mac-menu-bar.dark-mode .menu-time:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* Mac 桌面 */
.mac-desktop {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 16px 16px 90px 16px;
}

/* 桌面图标 */
.desktop-icons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: default;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.desktop-icon:hover {
    background: rgba(255, 255, 255, 0.15);
}

.desktop-icon span {
    font-size: 11px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    text-align: center;
    max-width: 70px;
    line-height: 1.2;
}

.mac-folder {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mac-app-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Mac Dock */
.mac-dock {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(40, 40, 45, 0.3);
    /*backdrop-filter: blur(25px) saturate(180%);*/
    /*-webkit-backdrop-filter: blur(25px) saturate(180%);*/
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dock-item {
    position: relative;
    width: 25px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                margin 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 8px;
    margin: 0;
}

.dock-item:hover {
    transform: translateY(-10px) scale(1.35);
    margin: 0 8px;
}

.dock-item svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}


.dock-separator-vertical {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
    flex-shrink: 0;
}

/* 显示器边框和摄像头 */
.mac-bezel-top {
    display: none;
}

.mac-bezel-bottom {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
}

.mac-camera {
    display: flex;
    align-items: center;
    gap: 6px;
}

.camera-dot {
    width: 6px;
    height: 6px;
    background: #1a1a1a;
    border-radius: 50%;
}

.camera-indicator {
    width: 4px;
    height: 4px;
    background: transparent;
    border-radius: 50%;
}

/* 标签区 */
.tags-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.tag-boxs{
  background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 8px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 16px;
  padding: 5px 16px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.tag-boxs .pic-tags{
   list-style: none;
   width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0;
  padding: 0;
}
.tag-boxs .pic-tags li a{
    padding: 4px 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 14px;
  font-size: 12px;
  color: #666;
  transition: all 0.2s;
  border: 1px solid rgba(0,0,0,0.05);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.tag-boxs .pic-tags li a:hover{
  background: #fff; 
  color: #1496ff!important;
  border-color: #1496ff;
}




.tag {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tag:hover {
    background: #1890FF;
    color: white;
}

/* 响应式 */
@media (max-width: 1300px) {
.mac-screen > img{min-height:auto}
.pc-view{width:100%;margin-bottom:20px}
}
@media (max-width: 1024px) {
.mac-screen > img{min-height:auto}
.pc-view{width:100%;margin-bottom:15px}
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }
    .mac-frame{box-shadow:none}
    .pc-view{width:100%;margin-bottom:5px}
    .mac-screen > img{min-height:auto}
    .dock-item{display:none}
    .mac-dock{display:none}
    .mac-menu-bar{display:none}
    .search-box {
        display: none;
    }
    
    /*.preview-section {*/
    /*    padding: 0 20px;*/
    /*}*/
    
    .nav-arrow {
        width: 36px;
        height: 36px;
    }
    
   
    .mac-frame {
        width: 100%;
        max-width: 100%;
        height: auto;
        box-shadow: none;
        border-radius: 4px;
    
    }
    
    .mac-menu-bar {
        height: 20px;
        font-size: 11px;
    }
    
    .menu-bar-left {
        gap: 8px;
    }
    
    .menu-item {
        padding: 1px 4px;
    }
    
    .menu-bar-right {
        gap: 4px;
    }
    
    .menu-icon {
        width: 20px;
        height: 20px;
    }
    
    .menu-icon svg {
        width: 12px;
        height: 12px;
    }
    
    .menu-time {
        font-size: 11px;
    }
    
    .mac-dock {
        padding: 3px 6px;
        border-radius: 12px;
    }
    
    .dock-item {
        width: 32px;
        height: 32px;
    }
    
    .dock-item svg {
        width: 32px;
        height: 32px;
    }
    
    .desktop-icon span {
        font-size: 9px;
    }
    
    .desktop-icon svg {
        width: 40px;
        height: 40px;
    }
    
    .stand-neck {
        width: 60px;
        height: 45px;
    }
    
    .stand-base {
        width: 120px;
        height: 6px;
    }
}













.pic-tags{width:73%;height:auto;overflow:hidden}
.pic-tags li span{display:flex;height:30px;line-height:30px;font-size:14px;color:#666;align-items:center;gap:6px;font-weight:500}
.pic-tags li span svg{width:16px;height:16px}
.pic-tags li.title{padding:5px 0}
.pic-tags li.nodata span{color:#999}
.update-time{line-height:40px;text-align:right;color:#999}
.pic-down{padding:15px}
.pic-title{line-height:28px;font-size:18px;font-weight:600;color:#333}
.pic-title span{display:inline-block;height:18px;line-height:18px;padding:0 5px;margin-right:5px;font-size:12px;border-width:1px;border-style:solid;border-radius:2px;vertical-align:3px}
.pic-title .vip{color:#ff5722;border-color:#ff5722}
.pic-title .vip:before{
        content: 'VIP';
    display: inline-block;
    position: relative;

}


.pic-title .free{color:#1496ff;border-color:#1496ff}
.user-action{margin-top:10px}
/*.user-action>a,.user-action .wap-view{display:inline-block;height:24px;line-height:24px;padding-left:20px;margin-right:20px;font-size:14px;background-repeat:no-repeat;background-position:left center;cursor:pointer}*/
.user-action>a:hover{text-decoration:none}
.user-action>a.like{background-image:url(images/like.png)}
.user-action>a.collect{background-image:url(images/collect.png)}
.user-action .wap{position:relative}
.user-action .wap-view{color:#0078dc;background-image:url(images/qrcode.png)}
.user-action .wap-qrcode{display:none;width:122px;line-height:20px;padding:15px 15px 10px;text-align:center;background:#fff;border:1px solid #e1e1e1;border-radius:3px;position:absolute;left:-40px;top:30px;z-index:20}
.user-action .wap-qrcode .triangle{display:block;width:11px;height:6px;margin-left:-6px;background:url(images/triangle.png) no-repeat;position:absolute;left:50%;top:-6px}
.user-action .wap-qrcode .qrcode-box table,.user-action .wap-qrcode .qrcode-box img{margin:0 auto!important}
.user-action .wap-qrcode .title{margin-top:8px;font-size:14px}
.user-action .wap-qrcode .tips{margin-top:4px;color:#999}

.pic-infos{margin-top:20px}
.pic-price{display:none;height:24px;line-height:24px;padding:15px;margin-top:20px;text-align:center;font-size:14px;background:#fafafa;border:1px dashed #d7d7d7;border-radius:3px}
.pic-price .num{margin-left:10px;font-size:18px;color:#ff5000}
.pic-price .num em{margin-right:2px;font-size:14px}
.pic-price .free{margin-left:15px;font-size:14px;color:#999}
.down-btn,.open-btn{
    display: flex;
    height: 44px;
    /* line-height: 38px; */
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
    /* display: block; */
    color: #fff;
    background-color: #1496ff;
    border: 1px solid #1496ff;
    border-radius: 25px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;}
.down-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}
.open-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}
.down-btn svg{width: 18px;
    height: 18px;}
.down-btn:hover{text-decoration:none;color:#fff;background-color:#0082f0;border-color:#0082f0}
.open-btn{color:#1496ff;    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);}
.open-btn:hover{text-decoration:none;color:#0082f0;border-color:#0082f0}
.kf-qq{margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.04);
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;}
.kf-qq a{margin-left:10px}
.layui-layer-content{border-radius:0 0 5px 5px;overflow:hidden}
.immersive-detail .user-action {
  margin: 10px 0 !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  float: none !important;
  padding: 0 !important;
}
.immersive-detail .pic-down{border-radius:16px;background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 8px 30px rgba(0,0,0,0.08);}
.immersive-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 8px;
  height: auto!important;
  line-height: auto!important;
  margin-right: 0!important;
  margin-left: 0!important;
  font-size: 13px!important;
  margin-right: 0!important;
  color: #666;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.immersive-action-btn:hover {
  background: var(--immersive-accent-light, rgba(20,150,255,0.08));
  color: var(--immersive-accent, #1496ff);
  border-color: var(--immersive-accent-medium, rgba(20,150,255,0.2));
}
.immersive-action-btn.collected {
  color: #1496ff;
  border-color: rgb(20, 150, 255);
  background: rgba(20, 150, 255, 0.09);
}
.immersive-action-btn.collected svg { fill: #1496ff; }
.immersive-action-btn.liked {
  color: #ff4757;
  border-color: rgba(255,71,87,0.2);
  background: rgba(255,71,87,0.06);
}
.immersive-action-btn.liked svg { fill: #1496ff; }
.immersive-action-btn svg { width: 14px; height: 14px; }


/* ============================================================
 *  参数区域 — 基于原pic-infos结构美化
 * ============================================================ */
.pic-infos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 14px 0;
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  list-style: none;
  float: none;
}
.pic-infos li {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  font-size: 13px;
  color: #333;
  font-weight: 500;
  margin-bottom: 15px;
  line-height: 1.5;
  flex: 0 0 50%;
  box-sizing: border-box;
}
.pic-infos li .info-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--immersive-accent-light, rgba(20,150,255,0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s;
}
.pic-infos li .info-icon svg {
  width: 14px;
  height: 14px;
  color: var(--immersive-accent, #1496ff);
  transition: color 0.3s;
}
.pic-infos li .flex{display:flex;flex-direction: column;}
.pic-infos li .flex .name {
  color: #999;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 5px;
}
.pic-infos li .flex .value {
  color: #333;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

    /* 768px响应式: 参数区单列 */
    @media (max-width: 768px) {
      .immersive-detail .pic-infos {
        grid-template-columns: 1fr !important;
      }
    }

/* ========== 换一批按钮 ========== */
.refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    background: none;
    border: 1px solid #1496ff;
    border-radius: 20px;
    color: #0078dc;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.25s ease;
    outline: none;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
}
.refresh-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.refresh-btn span {
    letter-spacing: 0.3px;
    position: relative!important;
    line-height: 17px;
   right: 0px;
}

/* hover */
.refresh-btn:hover {
    background: #0078dc;
    border-color: #0078dc;
    color: #fff;
}
.refresh-btn:hover svg {
    transform: rotate(180deg);
}

/* active / 点击瞬间 */
.refresh-btn:active {
    transform: scale(0.95);
    background: #e5e5ec;
}
#relatedSection .pic-layout{justify-content:space-between;background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 8px 30px rgba(0,0,0,0.08);border-radius:16px}
#relatedSectionMobile .pic-layout{justify-content:space-between;background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 8px 30px rgba(0,0,0,0.08);border-radius:16px}
.prenext a,.prenext span{
    opacity: 1;
    filter: alpha(opacity=50);
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    z-index: 10;
    text-indent: -9999px;
    position: fixed;
    top: 50%;
    margin-top: -32px;
    overflow: hidden;
}
.prenext a{filter:alpha(opacity=50)}
.prenext a:hover{opacity:0.8;filter:alpha(opacity=80)}
.prenext a:hover svg{color:#fff}
.prenext span{opacity:0.2;filter:alpha(opacity=20)}
.prenext a svg{width: 35px;
    height: 35px;
    color: #d1d1d1;}
.prenext .prev{left:20px;}
.prenext .next{right:20px;}

.keyword{color:#f00}

.down-pay-method{padding:12px 30px}
.down-pay-method .pay-item{display:block;padding:15px 0;text-align:center;border-bottom:1px solid #ebebeb}
.down-pay-method .pay-item:last-of-type{border-bottom:none}
.down-pay-method .pay-item:hover{text-decoration:none}
.down-pay-method .pay-item .pay-icon{display:inline-block;width:32px;height:32px;background-repeat:no-repeat;background-position:center center;vertical-align:middle}
.down-pay-method .pay-item .alipay-icon{background-image:url(images/alipay.png)}
.down-pay-method .pay-item .weixin-icon{background-image:url(images/weixin.png)}
.down-pay-method .pay-item .pay-name{display:inline-block;width:120px;height:32px;line-height:32px;font-size:16px;vertical-align:middle}

.hot-tab{position:absolute;right:0;top:0}
.hot-tab a{float:left;width:88px;height:28px;line-height:28px;margin-left:10px;text-align:center;background:#fff;border:1px solid #e1e1e1;border-radius:3px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
.hot-tab a:first-child{margin-left:0}
.hot-tab a:hover{text-decoration:none;border-color:#0096fa}
.hot-tab a.active{color:#fff;background:#0096fa;border-color:#0096fa}




.card-badge{position:absolute;bottom:8px;left:8px;padding:2px 8px;border-radius:3px;font-size:11px;color:#fff;line-height:1.6;z-index:2;display:flex;align-items:center;gap:3px;pointer-events:none}
.vip-badge-card{background:linear-gradient(135deg,#f5a623,#f7c948)}
.price-badge-card{background:rgba(0,0,0,0.6)}
.pic .card-badge{position:absolute}

.heyrain-carousel{position:relative;width:100%;max-width:1200px;margin:0 auto;overflow:hidden;border-radius:4px}
.heyrain-carousel .carousel-track{display:flex;transition:transform 0.5s ease;will-change:transform}
.heyrain-carousel .carousel-slide{min-width:100%;flex-shrink:0}
.heyrain-carousel .carousel-slide a{display:block}
.heyrain-carousel .carousel-slide img{width:100%;height:auto;display:block;max-height:240px;object-fit:cover}
.heyrain-carousel .carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;background:rgba(0,0,0,0.4);border:none;color:#fff;font-size:20px;cursor:pointer;z-index:5;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.3s}
.heyrain-carousel .carousel-arrow:hover{background:rgba(0,0,0,0.7)}
.heyrain-carousel .carousel-prev{left:12px}
.heyrain-carousel .carousel-next{right:12px}
.heyrain-carousel .carousel-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.heyrain-carousel .carousel-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.5);border:none;cursor:pointer;transition:background 0.3s;padding:0}
.heyrain-carousel .carousel-dot.active{background:#fff}
.heyrain-carousel .carousel-dot:hover{background:rgba(255,255,255,0.8)}

/*banenr开始*/
.banner-box{min-width: 1090px;overflow: hidden;margin: 20px 50px 0px 50px}
.banner{width:1920px; height:200px; position: relative;overflow: hidden;left:50%;margin-left: -960px}
.banner-btn{display:none;}
.banner-btn a{display:block;line-height:40px;position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;background-color:#000;opacity:0.3;filter:alpha(opacity=30) color:rgb(255, 255, 255);overflow:hidden;z-index:4;}
.prevBtn{left:110px;}
.nextBtn{right:110px;}
.banner-img{font-size:0;*word-spacing:-1px;/* IE6、7 */ letter-spacing:-3px;position:absolute;}
.banner-img li{display:inline-block;*display:inline;*zoom:1;/* IE6、7 */ vertical-align:top;letter-spacing:normal;word-spacing:normal;font-size:12px;}
.banner-img li img{width:100%;height:100%;}
.banner i{background:url(images/allbg.png)  no-repeat;width:15px;height:23px;cursor:pointer;margin:8px 0 0 12px;display:block;}
.banner .nextBtn i{background-position:-200px -24px;}
.banner .prevBtn i{background-position:-200px 0px;}
.banner-circle{position:absolute;left:50%;bottom:15px;height:13px;text-align:center;font-size:0;border-radius:10px;background:rgba(255,255,255,0.3);filter:alpha(opacity:30);}
.banner-circle li{border-radius:10px;margin:2px;display:inline-block;display:-moz-inline-stack;vertical-align:middle;zoom:1;}
.banner-circle li a{display:block;padding-top:9px;width:9px;height:0;border-radius:50%;background:#B7B7B7;overflow:hidden;cursor: pointer}
.banner-circle .selected a{background:#F40;}

.fl-bg{
    background: #fff;
}
.fenlei-lb{
    margin-bottom: 30px;
}
.s-hh{
    padding: 15px;
    margin: 0 auto;
}
.fenlei-lb ul{
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    padding-top: 5px;
}
.fenlei-lb ul li{
    position: relative;
    text-align: center;
    margin-left: 60px;
    float: left;
    min-width: 80px;
}
.fenlei-lb li.hot a{
    color: #ff6600;
}
.fenlei-lb li.hot:after{
    position: absolute;
    content: '';
    display: block;
    width: 23px;
    height: 18px;
    background: url(images/hot.gif) no-repeat center;
    right: -17px;
    top: -6px;
}
.fenlei-lb ul li a{
    font-weight: bold;
    font-size: 15px;
    line-height: 30px;
    text-decoration: none;
    color: #636363;
}
.fenlei-lb ul li a:hover{
    color: #ff6600;
}
.shaixuan{
    min-width: 1090px;
    min-height: 100px;
    margin: 25px 50px auto 50px;
    background: #fff;
}
.shaixuanxiang{
    width: 100%;
    height: auto;
}

.shaixuanxiang ul{
    width: 100%;
    height: auto;
}
.shaixuanxiang ul li{
    width: auto;
    float: left;
    margin-right: 15px;
    height: auto;
}
.shaixuanxiang ul li a{
    margin-right: 15px;
    font-size: 16px;
}
.mibaown{
    margin-left: 20px;
    width: 200px;
    height: 50px;
}
.mibaown option{
    width: 200px;
    height: 50px;
}
.re-hot{
    padding-right: 5px;
    padding-top: 8px;
    position: absolute;
    right: 0;
    top: 0;
    width: 71px;
    height: 59px;
    background: url(images/triangle3.jpg) no-repeat top right;
    font-size: 14px;
    color: #fff;
    text-align: right;
}


.jump{
    display: inline-block;
    height: 38px;
    line-height: 38px;
    width: 50px;
    text-align: center;
    padding: 0 5px 0 15px;
    font-size: 14px;
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
}
.jump-botton{
     height: 38px;
    line-height: 38px;
    font-size: 14px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease
}
.jump-botton:hover{
    border-color:#0096fa;
    background-color:#0096fa;
    color:#fff;
}


    .search-header{margin-top:20px}
    .search-header .search-stats{    
        display: flex;
        background: #e7e7e7;
        padding: 10px;
        border-radius: 5px;}
    .search-header .search-stats .keywords{font-size:16px;}
    .search-header .search-stats .keywords{display:flex}
    .search-header .search-stats .keywords h1{color:red;font-size:16px;font-weight:700;margin-left:5px}
    .search-header .search-stats .num{margin-left:20px;font-size:16px;}
    .search-header .search-stats .num .highlight{color:red;font-size:16px;font-weight:700;margin:5px}
/*input::-webkit-outer-spin-button,*/
/*input::-webkit-inner-spin-button {*/
/*  -webkit-appearance: none;*/
/*}*/
/*input[type="number"]{*/
/*  -moz-appearance: textfield;*/
/*}*/
/*product_query*/
.product_query{ margin:0 auto 10px; background-color:#fff; width:auto;border-radius:10px;padding:10px 5px}
.product_query .box{ margin:0 7px; border-top:1px dashed #c9c9c9; padding:10px 0;}
.product_query .box:first-child{ border-top:none;}
.product_query .con{display:none;}
.box-display{display: none}
.product_query .btn{ overflow:hidden;display:flex}
.product_query .btn b{ display:block; float:left; padding:0 0 0 13px; width:85px; color:#6a6d78; font-size:14px; font-weight:bold; line-height:25px; }
.product_query .box .cont1{ float:left; width:90%; padding:0 64px 0 10px; height:auto; overflow:hidden; position:relative;}
.product_query .box .cont2{ float:left; width:90%; padding:0 64px 0 10px; height:auto; overflow:hidden; position:relative;}
.product_query .box .cont1 a{ display:block; float:left; padding:0 10px; color:#6a6d78; font-size:14px; line-height:25px; margin:4px 0 4px 8px;}
.product_query .box .cont1 a .on{ display:block;background: red; float:left; padding:0 10px; color:#6a6d78; font-size:14px; line-height:25px; margin:2px 0 2px 8px;}
.product_query .box .cont1 .active,.product_query .box .cont a:hover{ color:#fff; background-color:#ff8773;
    -moz-border-radius:15px; /* Firefox */
    -webkit-border-radius:15px; /* Safari 和 Chrome */
    border-radius:15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ }

.product_query .box .cont2 a{ display:block; float:left; padding:0 10px; color:#6a6d78; font-size:14px; line-height:25px; margin:4px 0 4px 8px;}
.product_query .box .cont2 .active,.product_query .box .cont a:hover{ color:#fff; background-color:#ff8773;
    -moz-border-radius:15px; /* Firefox */
    -webkit-border-radius:15px; /* Safari 和 Chrome */
    border-radius:15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ }

.product_query .box .right{ position:absolute; margin:0 8px 0 0; top:0; right:0;}
.product_query .close{ color:#292929; display:block; line-height:25px; height:25px; width:50px;}
.product_query .close:hover{ color:#ff8773; cursor:pointer;}
.product_query .open{ height:auto!important;}
.product_query .box .cont_cl{ float:left; width:990px; padding:0 64px 0 10px; height:25px; position:relative;}
.cont_cl a{ display:block; float:left; padding:0 10px; color:#6a6d78; font-size:14px; line-height:25px; margin:0 0 5px 8px;}
.cont_cl a.active{ color:#fff; background-color:#ff8773;
    -moz-border-radius:15px; /* Firefox */
    -webkit-border-radius:15px; /* Safari 和 Chrome */
    border-radius:15px;/* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ }
.cont_cl .cl{ width:16px!important; height:16px!important; padding:0!important; margin:5px 0 0 14px !important;
    -moz-border-radius:5px;/* Firefox */
    -webkit-border-radius:5px; /* Safari 和 Chrome */
    border-radius:5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ }
.cont_cl .cl1{ background-color:#fff100;}
.cont_cl .cl2{ background-color:#f39800;}
.cont_cl .cl3{ background-color:#e60012;}
.cont_cl .cl4{ background-color:#ed9cad;}
.cont_cl .cl5{ background-color:#d700ea;}
.cont_cl .cl6{ background-color:#b3d465;}
.cont_cl .cl7{ background-color:#00b7ee;}
.cont_cl .cl8{ background-color:#cccccc;}
.cont_cl .cl9{ background-color:#000000;}
.cont_cl .cl10{}
.cont_cl .cl11{ background-color:#ffffff; border:1px solid #a0a0a0; width:15px!important; height:15px!important;}

.cont_cl .cll1{ background-color:#fff100;border:2px solid #666;box-shadow:0 0 1px #fff100}
.cont_cl .cll2{ background-color:#f39800;border:2px solid #666;box-shadow:0 0 1px #f39800}
.cont_cl .cll2{ background-color:#f39800;border:2px solid #666;box-shadow:0 0 1px #f39800}
.cont_cl .cll3{ background-color:#e60012;border:2px solid #666;box-shadow:0 0 1px #e60012}
.cont_cl .cll4{ background-color:#ed9cad;border:2px solid #666;box-shadow:0 0 1px #ed9cad}
.cont_cl .cll5{ background-color:#d700ea;border:2px solid #666;box-shadow:0 0 1px #d700ea}
.cont_cl .cll6{ background-color:#b3d465;border:2px solid #666;box-shadow:0 0 1px #b3d465}
.cont_cl .cll7{ background-color:#00b7ee;border:2px solid #666;box-shadow:0 0 1px #00b7ee}
.cont_cl .cll8{ background-color:#cccccc;border:2px solid #666;box-shadow:0 0 1px #cccccc}
.cont_cl .cll9{ background-color:#000000;border:2px solid #666;box-shadow:0 0 1px #000000}
.cont_cl .cll10{}
.cont_cl .cll11{ background-color:#ffffff; border:1px solid #a0a0a0; width:15px!important; height:15px!important;border:2px solid #666;box-shadow:0 0 1px #a0a0a0}






.vip-title{background-image:url(images/vip.jpg);height:200px;text-align:center;}
.vip-welfare{min-height:500px;margin-top:50px;text-align:center;font-size:0}
.vip-welfare li{cursor:pointer;box-shadow:0 5px 10px rgba(0,0,0,.2);display:inline-block;width:20%;min-width:210px;max-width:300px;margin:15px;padding:20px 10px;vertical-align:top;background:#fff;border:1px solid #e6e6e6;border-radius:3px;box-sizing:border-box;position:relative;-webkit-transition:border-color .3s ease,box-shadow .3s ease,-webkit-transform .3s ease;-moz-transition:border-color .3s ease,box-shadow .3s ease,-moz-transform .3s ease;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
/*.vip-welfare li .hd h3{margin: 0 30px;padding-bottom: 12px;border-bottom: 1px solid #e1e1e1;line-height: 1.1;font-size: 26px;color: #444;text-align: center;position: relative;}*/
/*.vip-welfare li .hd h3 .discount{margin-left:3px;font-size:14px;color:#ff5000}*/
.vip-welfare li .hd .price{height:36px;line-height:36px;margin-top:12px;font-size:32px;color: #ff6600}
.vip-welfare li .hd .price .yen{margin-right:3px;font-size:16px}
.vip-welfare li .hd .price .original{margin-left:6px;font-size:16px;color:#999;text-decoration:line-through}
.vip-welfare li .hd .price-line{margin-left: -9px;font-size: 24px;color: #a7a4a4;}
.vip-welfare li .btn{margin:auto;display:block;width:190px;height:46px;line-height:46px;background:#2086ee;margin-top:12px;text-align:center;font-size:14px;color:#fff;box-sizing:border-box;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
.vip-welfare li .btn:hover{text-decoration:none;color:#fff;background:#0eb7fd;}
.vip-welfare li .bd{padding-left: 30px; margin: 30px auto; text-align: left;}
.vip-welfare li .bd h4{font-size:14px;font-weight:600;color:#666}
.vip-welfare li .bd .item{margin-top:10px;font-size:14px}
.vip-welfare li .bd .item:last-child{margin-bottom:0}
.vip-welfare li .bd .item .check-icon{width:16px;height:16px;margin-right:5px;background-position:-92px -212px;vertical-align:-3px}
.vip-welfare li .marker-icon{display:none;width:49px;height:49px;background-position:-123px -148px;position:absolute;right:-1px;top:-1px}
.vip-welfare li .check-icon{display:none;width:20px;height:20px;background-position:-92px -84px;background-size:240px 240px;position:absolute;right:5px;top:5px}
.vip-welfare li:hover,.vip-welfare li.active{box-shadow:0 5px 20px rgba(0,0,0,.2);-webkit-transform:translate(0, -8px);-moz-transform:translate(0, -8px);transform:translate(0, -8px)}
.vip-welfare li.active .user-icon{display:block;border: none!important;}
.kf-qq{line-height:26px;margin-top:30px;text-align:center;font-size:14px;color:#999}
.kf-qq a{margin-left:10px}

.user-icon{display:inline-block;background-image:url(images/icon.png);background-repeat:no-repeat}
/*img[src=''],*/
/*  img:not([src]) {*/
/*    background: url(images/user-icon.jpg);background-size: contain;*/
/*  }*/




.user-main{min-width:840px;padding:0;margin:20px;display:flex}
.user-main .main-l{width:220px;margin-right:20px}
.user-main .main-r{flex:1}
.user-card{padding:30px;text-align:center}
.user-card .user-data{width:80px;height:80px;margin:0 auto;position:relative}
.user-card .user-data .user-avatar{width:100%;height:100%;border-radius:50%;}
.user-card .user-data .vip-icon{width:20px;height:20px;background-position:-69px -84px;background-size:240px 240px;position:absolute;left:30px;top:-15px;z-index:1}
.user-card .user-data .avatar-text{display:none;width:100%;height:20px;line-height:20px;margin-top:-10px;font-size:14px;color:#fff;position:absolute;left:0;top:50%;z-index:3}
.user-card .user-data .avatar-bg{display:none;width:100%;height:100%;background:#000;opacity:.5;-moz-opacity:.5;filter:alpha(opacity=50);position:absolute;left:0;bottom:0;z-index:2}
.user-card .modify-data{width:120px;height:120px;cursor:pointer}
.user-card .user-name{max-width:120px;height:22px;line-height:22px;margin:10px auto 0;font-size:18px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.user-card .vip-endtime{max-width:120px;height:20px;line-height:20px;margin:5px auto 0;color:#999}
.user-card .signout{display:block;width:80px;height:28px;line-height:28px;margin:10px auto 0;text-align:center;font-size:14px;color:#999;border-radius:15px;border:1px solid #e1e1e1}
.user-menu a{display:block;height:50px;line-height:50px;padding:0 30px;font-size:16px;position:relative;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
.user-menu a .v-line{display:none;width:3px;height:30px;background:#1496ff;position:absolute;left:0;top:10px}
.user-menu a:hover{text-decoration:none;background:#f0f0f0}
.user-menu a.active .v-line{display:block}
.user-con{min-height:600px}
.user-con-hd{height:44px;line-height:44px;padding:0 20px;font-size:16px;border-bottom:1px solid #f0f0f0;border-radius:3px 3px 0 0}
.user-con-bd{padding:30px 20px}
.open-vip{min-height:auto;margin-top:30px}
.open-vip li .hd{height:75px}
.open-vip-title{line-height:36px;margin-top:30px;text-align:center;font-size:24px;font-weight:700;color:#999}
.open-vip-tips{line-height:24px;margin-top:6px;text-align:center;font-size:14px;color:#999}
.open-vip-btn{display:block;width:100px;height:40px;line-height:40px;margin:35px auto 0;text-align:center;font-size:14px;color:#fff;background-color:#1e9fff;border:none;border-radius:3px;cursor:pointer;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
.open-vip-btn:hover,.open-vip-btn:active{color:#fff;text-decoration:none}
.open-vip-btn:hover{opacity:.8;filter:alpha(opacity=80)}
.open-vip-btn:active{opacity:1;filter:alpha(opacity=100)}
.user-pay-method{margin-top:30px;text-align:center;font-size:0}
.user-pay-method .pay-item{display:inline-block;margin:0 30px}
.user-pay-method .pay-item input[type="radio"]{float:left;margin-top:10px}
.user-pay-method .pay-item .user-icon{float:left;width:32px;height:32px;margin-left:10px;background-size:390px 390px}
.user-pay-method .pay-item .alipay-icon{background-position:-118px -96px}
.user-pay-method .pay-item .weixin-icon{background-position:-155px -96px}
.user-pay-method .pay-item .pay-name{float:left;line-height:32px;margin-left:10px;font-size:14px}

.user-search-input{width:200px}

/* ================================================
   VIP 会员开通页 - 新版样式
   ================================================ */

/* ====== 页面容器 ====== */
.vip-page{background:#fff;border-radius:8px;overflow:hidden}

/* ====== Hero 区域 ====== */
.vip-hero{position:relative;display:flex;gap:40px;padding:28px 32px 24px;border-bottom:1px solid #f0f0f0}
.vip-hero-left{flex-shrink:0;width:400px}
.vip-hero-right{flex:1;min-width:0}

/* 右上角标签组 */
.vip-top-badges{position:absolute;top:28px;right:32px;display:flex;align-items:center;gap:8px;z-index:5}
.vip-badge-gold{display:inline-flex;align-items:center;gap:4px;padding:4px 14px;border-radius:20px;background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid rgba(230,168,23,0.2);color:#b45309;font-size:11px;font-weight:700;white-space:nowrap;animation:vipBadgePulse 2.5s ease-in-out infinite}
.vip-badge-red{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;background:rgba(239,68,68,0.06);border:1px solid rgba(239,68,68,0.12);color:#ef4444;font-size:11px;font-weight:600;white-space:nowrap}
.vip-badge-green{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;background:rgba(16,185,129,0.06);border:1px solid rgba(16,185,129,0.12);color:#059669;font-size:11px;font-weight:600;white-space:nowrap}
@keyframes vipBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(230,168,23,0.12)}50%{box-shadow:0 0 0 5px rgba(230,168,23,0)}}

/* 皇冠行 */
.vip-crown-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.vip-crown-icon{width:24px;height:24px;color:#f08519;filter:drop-shadow(0 1px 3px rgba(230,168,23,0.25))}
.vip-crown-text{display:flex;align-items:baseline;gap:8px}
.vip-crown-label{font-size:18px;font-weight:800;color:#1a1a1a}
.vip-crown-sub{font-size:12px;font-weight:500;color:#b45309;background:rgba(230,168,23,0.08);padding:2px 8px;border-radius:4px;letter-spacing:0.5px}

/* 尊贵会员徽章 */
.vip-noble-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 12px 3px 8px;border-radius:20px;background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%);color:#f6d365;font-size:11px;font-weight:700;letter-spacing:0.8px;box-shadow:0 2px 8px rgba(0,0,0,0.15);position:relative;overflow:hidden}
.vip-noble-badge::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(246,211,101,0.15),transparent);transform:skewX(-20deg);animation:vipNobleShine 3s ease-in-out infinite}
@keyframes vipNobleShine{0%,100%{left:-75%}50%{left:125%}}

/* 标题 */
.vip-hero-title{font-size:26px;font-weight:900;line-height:1.35;margin:0 0 10px;color:#1a1a1a;letter-spacing:-0.3px}
.vip-hero-hl{background:linear-gradient(135deg, #f08519, #e6a817);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.vip-hero-desc{font-size:13px;color:#666;margin:0;line-height:1.7}

/* 特权网格 */
.vip-priv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.vip-priv-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:#fafafa;border:1px solid #f0f0f0;transition:all 0.2s;cursor:default}
.vip-priv-item:hover{background:#fffdf5;border-color:rgba(230,168,23,0.15)}
.vip-priv-icon{width:30px;height:30px;border-radius:6px;background:rgba(230,168,23,0.08);display:flex;align-items:center;justify-content:center;color:#f08519;flex-shrink:0}
.vip-priv-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.vip-priv-name{font-size:12px;font-weight:600;color:#333}
.vip-priv-desc{font-size:10px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 社会认同 */
.vip-social-proof{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;background:#fafafa;border:1px solid #f0f0f0}
.vip-proof-avatars{display:flex;align-items:center}
.proof-a{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;border:2px solid #fff;margin-right:-6px;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.proof-a:last-child{margin-right:0;background:#e6a817 !important;font-size:8px}
.vip-proof-text{font-size:11px;color:#666}
.vip-proof-text strong{color:#f08519;font-weight:700}
.vip-trust-inline{display:flex;align-items:center;gap:8px;margin-left:auto}
.vip-trust-inline span{display:flex;align-items:center;gap:3px;font-size:10px;color:#ccc}

/* ====== 套餐列表容器 ====== */
.vip-plans{list-style:none !important;padding:24px 32px 45px !important;margin:0 !important;display:flex;gap:30px;min-height:auto !important;text-align:left !important;font-size:14px !important}

/* ====== 套餐卡片 ====== */
.vip-plan{cursor:pointer;flex:1;border-radius:14px;padding:20px 22px;background:#fafafa;border:2px solid #eee;transition:all 0.25s ease;display:flex;flex-direction:column;position:relative;box-shadow:none !important;width:auto !important;min-width:0 !important;max-width:none !important;margin:0 !important;box-sizing:border-box;transform:none !important;-webkit-transform:none !important;-moz-transform:none !important}
.vip-plan:hover{border-color:#ddd;background:#f8f8f8}
.vip-plan.active{border-color:#e6a817;background:#fffdf5;box-shadow:0 0 0 3px rgba(230,168,23,0.06),0 6px 20px rgba(230,168,23,0.08) !important}
.vip-plan.active .user-icon{display:none !important;border:none !important}

/* 最受欢迎角标 */
.vip-plan-tag{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:3px;padding:4px 12px;background:linear-gradient(135deg,#f6d365,#e6a817);color:#7c4a00;font-size:10px;font-weight:700;border-radius:20px;letter-spacing:0.3px;z-index:2;box-shadow:0 2px 8px rgba(230,168,23,0.2)}

/* 限时特惠标签 */
.vip-plan-sale{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:4px;background:#fef2f2;border:1px solid rgba(239,68,68,0.12);color:#ef4444;font-size:10px;font-weight:600;vertical-align:middle}

/* 选中圆圈 */
.vip-plan-radio{width:20px;height:20px;border-radius:50%;border:2px solid #d4d4d4;display:flex;align-items:center;justify-content:center;transition:all 0.2s;color:#fff;flex-shrink:0}
.vip-plan-radio.checked{border-color:#e6a817;background:linear-gradient(135deg,#f6d365,#e6a817);box-shadow:0 0 8px rgba(230,168,23,0.3)}

/* 卡片头部 */
.vip-plan-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;padding-right:0}
.vip-plan.popular .vip-plan-head{padding-right:80px}
.vip-plan-left{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0}
.vip-plan-info{flex:1;min-width:0}
.vip-plan-name-row{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.vip-plan-name{font-size:18px;font-weight:800;color:#1a1a1a;margin:0}
.vip-plan-desc{font-size:12px;color:#666;margin:0;font-weight:400}

/* 价格 */
.vip-plan-price-block{text-align:right;flex-shrink:0}
.vip-plan-price-row{display:flex;align-items:baseline;justify-content:flex-end;gap:0}
.vip-yen{font-size:16px;font-weight:700;color:#e6a817}
.vip-price{font-size:36px;font-weight:900;line-height:1;background:linear-gradient(135deg, #f08519, #e6a817);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.vip-period{font-size:12px;color:#666;font-weight:500;margin-left:3px}
.vip-original{display:block;font-size:12px;color:#ccc;text-decoration:line-through;margin-top:2px;text-align:right}

/* 亮点标签 */
.vip-plan-highlights{display:flex;gap:6px;margin-bottom:12px}
.vip-highlight-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:6px;background:#f5f5f5;border:1px solid #e8e8e8;color:#666;font-size:11px;font-weight:600;transition:all 0.15s}
.vip-highlight-tag svg{color:#ccc}
.vip-highlight-tag.popular{background:rgba(230,168,23,0.06);border-color:rgba(230,168,23,0.15);color:#b45309}
.vip-highlight-tag.popular svg{color:#e6a817}
.vip-plan.active .vip-highlight-tag{background:rgba(230,168,23,0.06);border-color:rgba(230,168,23,0.12);color:#b45309}
.vip-plan.active .vip-highlight-tag svg{color:#e6a817}

/* 福利列表 */
.vip-plan-features{list-style:none !important;padding:10px 0 0 !important;margin:0 !important;border-top:1px dashed #e8e8e8;flex:1}
.vip-feat-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#666;margin-bottom:5px}
.vip-feat-item:last-child{margin-bottom:0}
.vip-feat-item svg{color:#ccc;flex-shrink:0}
.vip-feat-item svg.feat-hl{color:#e6a817}
.feat-hl-text{color:#ef4444;font-weight:700}

/* ========== 卡片内支付行 ========== */
.vip-plan-pay-row {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f0faf5;
    border: 1px solid #d4edda;
    border-radius: 8px;
    margin: 12px 0;
    transition: all 0.3s;
}
.vip-plan.active .vip-plan-pay-row {
    display: flex;
}
.vip-plan-pay-row .vip-wechat-pay-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.vip-plan-pay-label {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}
.vip-plan-pay-row::after {
    content: '✓';
    margin-left: auto;
    font-size: 12px;
    color: #07c160;
    font-weight: 700;
}

/* ====== CTA按钮 ====== */
/* ====== 卡片内CTA按钮 ====== */
.vip-plan-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 20px;border-radius:10px;border:2px solid #e8e8e8;background:#f5f5f5;color:#666;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;margin-top:10px;box-sizing:border-box}
.vip-plan-cta:hover{border-color:#ddd}
.vip-plan-cta.active{border:none;background:linear-gradient(135deg,#f6d365 0%,#f0c040 40%,#e6a817 100%);color:#7c4a00;font-weight:700;box-shadow:0 4px 16px rgba(230,168,23,0.2);position:relative;overflow:hidden;font-size:15px}
.vip-plan-cta.active::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transform:skewX(-20deg);animation:vipCtaShine 3s ease-in-out infinite}
.vip-cta-wechat{color:#7c4a00;width:14px;height:14px}


@keyframes vipCtaShine{0%,100%{left:-75%}50%{left:125%}}
.vip-cta-wechat{color:#7c4a00;width:16px;height:16px}

/* ====== 底部提示 ====== */
.vip-footer-tip{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 32px;border-top:1px solid #f0f0f0;font-size:11px;color:#ccc}
.vip-footer-tip svg{color:#d4d4d4;flex-shrink:0}

/* ====== 隐藏旧版多余元素 ====== */
.vip-page .open-vip-title,
.vip-page .open-vip-tips{display:none}

/* ====== 响应式 ====== */
@media(max-width:1200px){
    .vip-hero{gap:24px}
    .vip-hero-left{width:320px}
    .vip-priv-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
    .vip-hero{flex-direction:column;gap:16px;padding:20px}
    .vip-hero-left{width:100%}
    .vip-priv-grid{grid-template-columns:repeat(3,1fr)}
    .vip-plans{padding:20px !important}
    .vip-pay-section{padding:0 20px 20px}
    .vip-top-badges{position:static;flex-wrap:wrap;margin-bottom:8px}
}
@media(max-width:768px){
    .vip-page{border-radius:0}
    .vip-hero{padding:16px}
    .vip-hero-title{font-size:20px}
    .vip-price{font-size:28px}
    .vip-plans{flex-direction:column !important;padding:16px !important;gap:12px}
    .vip-plan.popular .vip-plan-head{padding-right:0}
    .vip-plan-tag{position:static;margin-bottom:8px;align-self:flex-start}
    .vip-pay-section{padding:0 16px 16px}
    .vip-priv-grid{grid-template-columns:repeat(2,1fr)}
    .vip-social-proof{flex-wrap:wrap}
}

/* ========== 侧边栏优化 ========== */

/* 用户卡片 */
.main-l .user-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 20px 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    transition: box-shadow 0.3s;
}
.main-l .user-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.main-l .user-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f5f5f5;
    transition: border-color 0.3s;
}
.main-l .user-card:hover .user-avatar {
    border-color: #f0a500;
}
.main-l .user-name {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* VIP状态徽章 */
.vip-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 10px;
    letter-spacing: 0.5px;
}
.vip-status-badge.vip-lifetime {
    background: linear-gradient(135deg, #f0a500, #ff7e00);
    color: #fff;
    box-shadow: 0 2px 10px rgba(240,165,0,0.3);
}
.vip-status-badge.vip-annual {
    background: linear-gradient(135deg, #f0a500, #e6a817);
    color: #fff;
    box-shadow: 0 2px 10px rgba(240,165,0,0.25);
}
.vip-status-badge.vip-guest {
    background: #f5f5f5;
    color: #999;
}

/* 菜单区域 */
.main-l .user-menu {
    background: #fff;
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    overflow: hidden;
}
.main-l .user-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 20px;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.25s ease;
    position: relative;
    text-decoration: none;

}
.main-l .user-menu a:hover {
    color: #f0a500;
    background: linear-gradient(90deg, #fffbf0, #fff8e6);
    font-weight: 600;
    border-left-color: #f0a500;
}
.main-l .user-menu a.active {
    color: #f0a500;
    background: linear-gradient(90deg, #fffbf0, #fff8e6);
    font-weight: 600;
    border-left-color: #f0a500;
}
/* 菜单图标 */
.main-l .user-menu .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f7f7f7;
    transition: all 0.25s;
    flex-shrink: 0;
}
.main-l .user-menu a:hover .menu-icon {
    background: #fef3d0;
}
.main-l .user-menu a.active .menu-icon {
    background: linear-gradient(135deg, #f0a500, #ff7e00);
    color: #fff;
    box-shadow: 0 2px 8px rgba(240,165,0,0.3);
}
.main-l .user-menu a.active .menu-icon svg {
    stroke: #fff;
}

/* 覆盖旧版 v-line */
.main-l .user-menu a .v-line {
    display: none;
}
/* 覆盖旧版 user-icon */
.main-l .user-card .user-icon.arrow-icon {
    display: none;
}
/* 覆盖旧版 vip-img */
.main-l .user-card .vip-img {
    display: none;
}


.layui-table-view .layui-table{width:100%!important}
.layui-table-header{overflow:initial!important}

    .vip-welfare {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .vip-welfare li {
            flex: 1;
            min-width: 350px;
            border: 2px solid #e0e6ed;
            border-radius: 14px;
            padding: 25px 35px 15px 35px;
            transition: all 0.3s ease;
            position: relative;
            background: white;
            cursor: pointer;
            list-style: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .vip-welfare li.active {
            border-color: #e74c3c;
            background: linear-gradient(to bottom, #ff57221f, #fff);
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(142, 68, 173, 0.2);
        }
        
        .vip-welfare li.active .discount{background:#fff;color:#e74c3c}
        
        
        
        
        .vip-welfare li.active .hd {
            background: linear-gradient(90deg, #e74c3c, #e74c3c);
            color: white;
        }
        
        .vip-welfare li.active .hd h3,
        .vip-welfare li.active .hd .price {
            color: white;
        }
        
        .vip-welfare li .hd {
            background: #f8f9fc;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 22px;
            transition: all 0.3s ease;
        }
        
        .vip-welfare li h3 {
            font-size: 1.4rem;
            margin-bottom: 12px;
            color: #2c3e50;
            font-weight: 700;
        }
        
        .price {
            font-size: 1.8rem;
            font-weight: 700;
            color: #e74c3c;
        }
        
        .yen {
            font-size: 1.1rem;
            margin-right: 2px;
        }
        
        .vip-welfare li .bd {
            padding: 0 5px;
        }
        
        .vip-welfare li .bd h4 {
            font-size: 1.15rem;
            margin-bottom: 15px;
            color: #2c3e50;
            font-weight: 600;
            padding-bottom: 10px;
            border-bottom: 1px dashed #e0e6ed;
        }
        
        .vip-welfare .item {
            display: flex;
            align-items: center;
            margin-bottom: 14px;
            padding: 5px 0;
            font-size: 1.05rem;
            border-bottom: 1px dashed #f0f0f0;
        }
        

        
        .marker-icon {
            position: absolute;
            top: -12px;
            right: 20px;
            background: #27ae60;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s ease;
            box-shadow: 0 3px 8px rgba(39, 174, 96, 0.3);
        }
        

        
        
        .user-pay-method {
            margin-bottom: 30px;
            display: flex;
            justify-content: center;
        }
            .discount {
            background: #e74c3c;
            color: white;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            margin-left: 10px;
            font-weight: normal;
            display: inline-block;
            vertical-align: middle;
        }
          .marker-icon:before {
            content: "✓";
            font-size: 1.1rem;
        }
.user-card{padding:30px;text-align:center}
.user-card .user-data{width:80px;height:80px;margin:0 auto;position:relative}
.user-card .user-data .user-avatar{width:100%;height:100%;border-radius:50%}
.user-card .user-data .vip-icon{width:20px;height:20px;background-position:-69px -84px;background-size:240px 240px;position:absolute;left:30px;top:-15px;z-index:1}
.user-card .user-data .avatar-text{display:none;width:100%;height:20px;line-height:20px;margin-top:-10px;font-size:14px;color:#fff;position:absolute;left:0;top:50%;z-index:3}
.user-card .user-data .avatar-bg{display:none;width:100%;height:100%;background:#000;opacity:.5;-moz-opacity:.5;filter:alpha(opacity=50);position:absolute;left:0;bottom:0;z-index:2}
.user-card .modify-data{width:120px;height:120px;cursor:pointer}
.user-card .user-name{max-width:120px;height:22px;line-height:22px;margin:10px auto 0;font-size:18px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.user-card .vip-endtime{max-width:120px;height:20px;line-height:20px;margin:5px auto 0;color:#999}
.user-card .signout{display:block;width:80px;height:28px;line-height:28px;margin:10px auto 0;text-align:center;font-size:14px;color:#999;border-radius:15px;border:1px solid #e1e1e1}
.user-menu a{display:block;height:50px;line-height:50px;padding:0 30px;font-size:16px;position:relative;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
.user-menu a .v-line{display:none;width:3px;height:30px;background:#1496ff;position:absolute;left:0;top:10px}
.user-menu a:hover{text-decoration:none;background:#f0f0f0}
.user-menu a.active .v-line{display:block}
.user-con{min-height:600px}
.user-con-hd{height:44px;line-height:44px;padding:0 20px;font-size:16px;border-bottom:1px solid #f0f0f0;border-radius:3px 3px 0 0}
.user-con-bd{padding:30px 20px}
.open-vip{min-height:auto;margin-top:20px}
.open-vip li .hd{height:75px}
.open-vip-title{line-height:36px;margin-top:30px;text-align:center;font-size:26px;font-weight:normal;color:#999}
.open-vip-tips{line-height:24px;margin-top:6px;text-align:center;font-size:14px;color:#999}
.open-vip-btn{display:block;width:320px;height:40px;line-height:40px;margin:35px auto 0;text-align:center;font-size:14px;color:#fff;background-color:#e74c3c;border:none;border-radius:3px;cursor:pointer;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;margin-bottom:40px}
.open-vip-btn:hover,.open-vip-btn:active{color:#fff;text-decoration:none}
.open-vip-btn:hover{opacity:.8;filter:alpha(opacity=80)}
.open-vip-btn:active{opacity:1;filter:alpha(opacity=100)}
.user-pay-method{margin-top:30px;text-align:center;font-size:0}
.user-pay-method .pay-item{display:inline-block;margin:0 30px}
.user-pay-method .pay-item input[type="radio"]{float:left;margin-top:10px}
.user-pay-method .pay-item .user-icon{float:left;width:32px;height:32px;margin-left:10px;background-size:390px 390px}
.user-pay-method .pay-item .alipay-icon{background-position:-118px -96px}
.user-pay-method .pay-item .weixin-icon{background: url(images/weixin.png) -160px -96px}
.user-pay-method .pay-item .pay-name{float:left;line-height:32px;margin-left:10px;font-size:14px}

.user-search-input{width:200px}

.bind-acc li{padding:15px 0}
.bind-acc li .item-icon{width:16%;padding:0 20px 0 0;text-align:right;box-sizing:border-box}
.bind-acc li .item-icon .icon-box{display:inline-block;width:30px;line-height:38px;padding-left:40px;text-align:left;font-size:14px;position:relative}
.bind-acc li .item-text{width:220px;line-height:38px;text-align:center;font-size:14px;color:#666}
.bind-acc li .item-btn{width:100px;text-align:center}
.bind-acc li .user-icon{width:32px;height:32px;background-size:300px 300px;position:absolute;left:0;top:3px}
.bind-acc li .qq-icon{background-position:0 -37px}
.bind-acc li .weixin-icon{background-position:-37px -37px}
.bind-acc li .weibo-icon{background-position:-74px -37px}

.upload-layer .layui-layer-btn{padding:20px 15px!important;border-top:1px solid #eee}
.upload-layer .layui-layer-btn a{height:34px;line-height:34px;padding:0 30px;margin:0 15px}
.upload-layer .layui-btn-sm{padding:0 8px}
.upload-photo{padding:20px;display:none}
.upload-photo .upload-box-left{width:350px}
.upload-photo .upload-box-right{width:150px}
.upload-photo .original-box{height:350px}
.upload-photo .original-box .original-photo{max-width:100%}
.upload-photo .preview-box{width:150px;height:150px;border-radius:50%;overflow:hidden}
.upload-photo .preview-name{line-height:20px;margin-top:10px;text-align:center;font-size:14px;color:#666}
.upload-photo .photo-toolbar{height:30px;margin-top:10px}
.upload-photo .upload-control{width:82px;height:30px;position:relative;overflow:hidden}
.upload-photo .upload-control .upload-file{width:200%;height:100%;opacity:0;filter:alpha(opacity=0);cursor:pointer;position:absolute;left:-100%;top:0;z-index:2}
.upload-photo .upload-control .upload-btn{width:100%;padding:0}
.upload-photo .upload-control .upload-icon{width:16px;height:16px;margin-right:3px;background-position:0 -84px;background-size:190px 190px;vertical-align:text-bottom}
.upload-photo .photo-control .user-icon{width:16px;height:16px;background-size:185px 185px;vertical-align:text-bottom}
.upload-photo .photo-control .minus-icon{background-position:-17px -82px}
.upload-photo .photo-control .plus-icon{background-position:-35px -82px}
.upload-photo .photo-control .rotate-left-icon{background-position:-53px -82px}
.upload-photo .photo-control .rotate-right-icon{background-position:-71px -82px}



.login-layer-box{z-index:101;background-color:rgb(0 0 0 / 50%);top:0;left:0;width:100%;height:100%;position:fixed;display:none}
.login-layer{width:400px;height:542px;padding:30px 30px 60px;box-sizing:border-box;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:5px}
.login-layer .user-icon{display:inline-block;background-repeat:no-repeat}
.login-layer .login-bottom{width:100%;height:40px;line-height:40px;padding:0 30px;text-align:right;font-size:14px;color:#666;background:#f5f5f5;border-radius:0 0 5px 5px;box-sizing:border-box;position:absolute;left:0;bottom:0;right:0}
.login-layer .login-bottom a{color:#0078dc}
.login-layer .code-login{text-align:center}
.login-layer .acc-tabslet .acc-tab{height:40px;margin:0 auto}
.login-layer .acc-tabslet .acc-tab li a{display:inline-block;width:100%;height:38px;line-height:38px;text-align:center;font-size:20px;color:#0078dc}
.login-layer .acc-tabslet .acc-tab li a:hover{text-decoration:none}
.login-layer .acc-tabslet .acc-tab li.active a{color:#0078dc}
.login-layer .acc-tabslet .acc-form{margin-top:30px}
.login-layer .acc-form{position:relative}
.login-layer .acc-form .error-tips{line-height:20px;color:red;position:absolute;z-index:20}
.login-layer .acc-form .guide-tips{line-height:20px;color:#666;position:absolute;left:0;top:-20px;z-index:20}
.login-layer .acc-form .guide-tips a{color:#0078dc}
.login-layer .acc-form .text-box{padding:6px;margin-bottom:25px;border:1px solid #e6e6e6;border-radius:3px;position:relative;-webkit-transition:border-color .3s ease;-moz-transition:border-color .3s ease;transition:border-color .3s ease;display:flex;align-items:center}
.login-layer .acc-form .text-box.active{border-color:#1496ff}
.login-layer .acc-form .form-text{display:block;width:100%;height:30px;line-height:30px;background:0 0;border:none;font-size:14px}
.login-layer .acc-form .form-btn,.login-layer .acc-form .return-btn{display:block;width:100%;height:44px;line-height:42px;margin-top:25px;text-align:center;font-size:14px;color:#fff;background-color:#1496ff;border:1px solid #1496ff;border-radius:3px;box-sizing:border-box;cursor:pointer;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
.login-layer .acc-form .form-btn:hover{color:#fff;text-decoration:none;background-color:#0082f0;border-color:#0082f0}
.login-layer .acc-form .form-btn.disabled{opacity:.45}
.login-layer .acc-form .return-btn{color:#666;background-color:#fff;border-color:#d7d7d7}
.login-layer .acc-form .return-btn:hover{color:#333;text-decoration:none;border-color:#bebebe}
.login-layer .acc-tool{height:20px;line-height:20px;margin-top:15px;font-size:14px}
.login-layer .acc-form .auto-login{display:block;color:#666}
.login-layer .acc-form .auto-login input[type=checkbox]{margin-right:3px;vertical-align:-2px}
.login-layer .acc-form .acc-links a{color:#666}
.login-layer .acc-form .acc-links a:hover{color:#0078dc;text-decoration:underline}
.login-layer .acc-form .user-icon:first-of-type{display:block;width:20px;height:20px;margin-right:10px;background-size:240px 240px}
.login-layer .acc-form .mobile-icon{background-position:0 -84px}
.login-layer .acc-form .password-icon{background-position:-23px -84px}
.login-layer .acc-form .code-icon{background-position:-46px -84px}
.login-layer .acc-form .clear-icon,.login-layer .acc-form .eye-icon{width:24px;height:24px;margin-left:10px}
.login-layer .acc-form .clear-icon{display:none;background-position:2px -154px;background-size:245px 245px}
.login-layer .acc-form .eye-icon{display:block;background-size:300px 300px}
.login-layer .acc-form .closedeye-icon{background-position:-29px -192px}
.login-layer .acc-form .openeye-icon{background-position:-58px -192px}
.login-layer .acc-form .code-box{margin-bottom:25px}
.login-layer .acc-form .code-box .text-box{margin-bottom:0}
.login-layer .acc-form .getcode{width:100px;height:44px;line-height:42px;margin-left:10px;text-align:center;font-size:14px;color:#1496ff;background:0 0;border:1px solid #1496ff;border-radius:3px;box-sizing:border-box;cursor:pointer;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
.login-layer .acc-form .getcode.disabled{color:#999;border-color:#e6e6e6}
.login-layer .acc-form .code-pic{width:120px;height:44px}
.login-layer .other-acc-hd{width:65%;height:15px;margin:30px auto;border-bottom:1px solid #e6e6e6;text-align:center}
.login-layer .other-acc-hd h3{display:inline-block;height:30px;line-height:30px;padding:0 10px;text-align:center;font-size:14px;font-weight:400;color:#999;background:#fff}
.login-layer .other-acc{text-align:center;font-size:0}
.login-layer .other-acc a{display:inline-block;width:64px;margin:0 20px}
.login-layer .other-acc a .user-icon{width:64px;height:64px}
.login-layer .other-acc a .qq-icon{background-position:0 0;width:64px!important;height:64px!important;background-size:none}
.login-layer .other-acc a:hover .qq-icon{background-position:0 -74px}
.login-layer .other-acc a .text{display:inline-block;width:100%;line-height:20px;margin-top:5px;font-size:14px;color:#666}
.login-layer .other-acc a:hover .text{color:#0078dc;text-decoration:underline}
.login-layer .close{
     position: absolute;
    right: 15px;
    top: 15px;
    font-size: 0;
    line-height: initial;
    cursor: pointer;
}
.login-layer .close .icon{background: url(images/icon-1.png) no-repeat;width:30px;height:30px;display:block;position: absolute;
    right: -55px;
    top: -15px;
    background-position: -149px -31px;
    
}
.login-layer .close .close-icon{-webkit-transition:-webkit-transform 2s;background: url(images/icon-1.png) no-repeat;width:30px;height:30px;display:block;position: absolute;
    right: -55px;
    top: -15px;
    background-position: -149px -31px;}
.login-layer .close .close-icon:hover{-webkit-transform:rotate(180deg);}





@media (max-width:768px){
    a:hover{text-decoration:none!important}
    .flex-xs{display:-webkit-box;display:-moz-box;display:-webkit-flex;display:flex}
    .header .logo{margin-top:0!important}
    .header .nav{display:none!important}
    .layout{border-radius:0}
    .acc-hd{padding:0 15px}
    .acc-hd .acc-title{margin:15px 0 0}
    .acc-box{width:auto;padding:60px 15px}
    .other-acc a{width:48px}
    .other-acc a .user-icon{width:48px;height:48px;background-size:448px 448px}
    .other-acc a .qq-icon,.other-acc a:hover .qq-icon{background-position:0 -55px!important}
    .other-acc a .wb-icon,.other-acc a:hover .wb-icon{background-position:-111px -55px}
    .user-main{min-width:inherit;padding:0;margin:10px 0}
    .go-reg{padding:0 15px}
    .user-con-bd{padding:15px 10px}
    .user-pay-method .pay-item{margin:0 20px}
    .vip-title{height:100px;line-height:100px}
    .vip-welfare{margin-top:20px}
    .vip-welfare li{min-width:260px}
    .bind-acc li .item-icon{width:25%;padding:0 10px 0 0}
    .bind-acc li .item-text{width:50%}
    .bind-acc li .item-btn{width:25%}
    .footer{padding:10px 0;background:#333;margin: 10px 0 0 0!important;}
    .other-acc-hd{width:70%!important}
    .login-layer-box{padding: 0 5%;box-sizing:border-box;}
    .login-layer{width:80%;padding:15px 15px 60px;height:475px}
    .login-layer .other-acc a .user-icon{width:48px!important;height:48px!important}
    .login-layer .close .icon{right:-8px;z-index:102;background-position:-180px -31px;top:-10px}
    .login-layer .acc-tabslet .acc-form{margin-top:20px}
    .login-layer .acc-form .text-box{margin-bottom:20px}
    .login-layer .other-acc-hd{margin:20px auto}
    .login-layer .acc-tabslet .acc-tab li a{font-size:16px}
    /*.footer,.footer a{color:#fff}*/
    .index-tag{height: 375px;overflow: hidden}
    .page{margin: 30px 0 30px 0}
    .page span{font-size: 12px!important;}
    .page ul li a, .page ul li span{font-size: 12px;margin: 0 2px 5px 0;}
    .open-vip-title{margin-top: 0}
    /*.tags-list .links{overflow: hidden;height: 395px}*/
    .pic-list li{width:50%;padding: 5px}
    .pic-list li .text .info{display: none!important;}
    .bzfl{display: none}
    .auto{margin: 10px 5px 0 5px!important;min-width: inherit;}
    .header .logo{width: 90px;height: 30px;background-size: 100%;margin: 15px 0 0;}
    .header .search-form{display: none!important}
    .gallery{min-width: inherit;margin: 5px!important;}
    .location{display: block!important;background: #fff;padding: 5px;margin: 5px 0!important;height: inherit;box-sizing: border-box}
    .location .pic-auto{color:#666}
    .shaixuan{min-width: 100%;margin: 10px 5px;width:100%;display:none}
    .shaixuan.product_query{border-radius: 5px}
    .shaixuan .product_query .saixuan-fenlei{display: none}
    .shaixuan .product_query .saixuan-size{display: none}
    .shaixuan .product_query #colorFilterBox{display:none}
    /*pix_view*/
    .pic-auto{width: 100%;margin-top:5px!important;font-size: 12px!important;}
    .pic-main-l{width: 100%}
    .pic-con{padding: 5px;border-radius:16px}
    .preview-pic{min-height: inherit}
    .preview-pic table, .preview-pic table td{width: 100%;min-height: inherit}
    .pic-down{margin-top: 5px!important;}
    .tag-boxs{display:none}
    .tag-boxs .update-time{display: none}
    .pic-main-r{width: 100%;float: left}
    .prenext a, .prenext span{background-size: 80px;width: 40px;height: 40px;top: 45%;margin-top: 0;position: absolute}
    
    .pc-view .prenext a{top: 35%;}
    .pc-view .prenext a svg{width:25px;height:25px}
    .prenext .next{background-position: -40px 0;}
    .pic-tags{width: 100%}
    .likearticle{margin: 0}
    

    /*login*/
    .login-main,.acc-main{width:80%}
    .login-main{padding:10px 15px 56px;margin: 3% 10%;}
    .login-top{min-width: inherit;padding: 15px;box-sizing: border-box;margin-top: 10px}
    .login-logo{width: 90px;height: 30px;}
    .login-top li{margin-left: 15px;line-height: 10px}
    .login-top li a{font-size: 13px}
    .login-nr{min-width: inherit;margin: 0;position: relative;padding-top: 50px}
    .login-img{background-size: contain;width: 60%;height: 75px;margin: 0 20%;display:none}
    .login-footer{padding: 0 50px;line-height: 20px;margin-top: 15px}
    /*reg*/
    .acc-main{width: 95%}
    .acc-hd .acc-logo{width: 90px;height: 30px;margin: 16px 0 0;}
    .acc-hd .acc-title{display: none}
    .acc-box{width: 80%}
    /* user */
    .user-main .main-l{width: 100%;position: relative;margin-right:20px}
    .user-card{padding: 10px 30px}
    .user-menu{display: none}
    .user-con-hd{margin-top: 5px}
    .layui-form-item .layui-inline{display: inline-block}
    .ktvip-icon{display: none}
     /* 手机壁纸列表页  */
    .pic-list .sj-pic{width:50%}
}
@media (max-width:1440px){
    .header .tool{display: none}
    .menu-slide{display: none}
    .header .fixed .nav{display: block}
    .header .tool{display: block}
    .nav .item.open{width: 105px}
    .bzfl{width: inherit}
    .banner-box{width: 92%}
}
@media (max-width:1920px){
    .header .tool{display: none}
    .menu-slide{display: none}
}

@media (min-width:1508px){
    .pic-auto{width:1300px}
    .pic-main-l{width:930px}
    .header .tool{display: none}
    .menu-slide{display: none}
    .header .search-form{display: block}
}
@media (min-width:1600px){
    .pic-auto{width:1300px}
    .pic-main-l{width:930px}
    .header .tool{display: none}
    .menu-slide{display: none}
    .header .search-form{display: block}
}
@media (max-width:1280px){
    .header .fixed{min-width: inherit;padding: 0px 20px 0 55px}
    .header .fixed .nav{display: none}
    /*.header .unlogin-box a.register{display: none}*/
    .gallery{min-width: inherit;margin: 10px 30px 0 30px}
    .pic-list li{width:50%!important;padding: 5px!important}
    .auto{width: inherit;min-width: inherit;margin-left: 30px;margin-right:30px}
    .layout-hd h2 {height: 25px;font-size: 18px;font-weight: 600;border-left: 3px solid #E80000;line-height: 26px;padding-left: 6px;float: left;}
    .banner-box{display: none}
    .icon,.user-icon{display:inline-block;background-image:url(images/icon.png);background-repeat:no-repeat}
    .header .tool{display:block;width:50px;height:50px;padding:13px;box-sizing:border-box;position:absolute;top:5px}
    .header .tool.menu{left:0}
    .header .tool .icon{width:24px;height:24px;background-size:300px 300px}
    .header .tool .menu-icon{background-position:0 -163px}
    .mask-bg{width:100%;min-width:320px;height:100%;background:rgba(0,0,0,.45);position:fixed;left:0;top:0;z-index:1}
    .menu-slide{display:none;width:100%;min-width:320px;height:100%;padding:0 0 0 50px;background:#fff;box-sizing:border-box;overflow-y:auto;position:fixed;left:0;top:0;z-index:1000;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform .3s ease;-moz-transition:-moz-transform .3s ease;transition:transform .3s ease}
    .menu-slide .menu-item{padding:10px 0;border-bottom:1px solid #ebebeb}
    .menu-slide .menu-item.user-card{padding:30px 20px 20px}
    .menu-slide .menu-item:last-of-type{border-bottom:none}
    .menu-slide .menu-item .title{display:block;height:40px;line-height:40px;padding:0 10px;font-size:16px;color:#0078dc}
    .menu-slide .menu-item h3{line-height:20px;padding:5px 10px 0;font-size:14px;font-weight:normal;color:#666}
    .menu-slide .menu-item ul{padding:5px}
    .menu-slide .menu-item ul li{float:left;padding:5px;box-sizing:border-box}
    .menu-slide .menu-item ul.category li{width:25%}
    .menu-slide .menu-item ul.size li{width:33.333%}
    .menu-slide .menu-item ul li a{display:block;height:38px;line-height:38px;text-align:center;font-size:14px;border-radius:3px;border:1px solid #0096fa}
    .footer{min-width: inherit;padding: 25px 15px;box-sizing: border-box;margin: 10px 5px 0 5px}
    .pic-list li .text .info{display: block}
    .location{background: #fff;padding: 5px;font-size: 13px;margin: 15px 0;}
    .pic-auto{margin-top: 15px}
    .update-time{width: 27%}
}

/* ========== 购买/下载系统样式 ========== */
.wallpaper-price-tag{margin-top:10px}
.price-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:20px;font-size:13px;font-weight:600}
.points-badge{background:rgba(20,150,255,0.1);color:#1496ff;border:1px solid rgba(20,150,255,0.2)}
.vip-badge{background:linear-gradient(135deg,#f0a500,#ff7e00);color:#fff;border:none;box-shadow:0 2px 8px rgba(240,165,0,0.25)}

.buy-btn{background:linear-gradient(135deg,#f0a500,#ff7e00)!important;border-color:#f0a500!important}
.buy-btn:hover{box-shadow:0 4px 16px rgba(240,165,0,0.4)!important}
.login-btn{background:#666!important;border-color:#666!important}
.login-btn:hover{background:#555!important}
.vip-btn{background:linear-gradient(135deg,#f0a500,#ff7e00)!important;border-color:#f0a500!important;color:#fff!important}
.vip-btn:hover{box-shadow:0 4px 16px rgba(240,165,0,0.4)!important}
.recharge-btn{background:#e74c3c!important;border-color:#e74c3c!important}
.recharge-btn:hover{background:#c0392b!important}

/* Header 用户下拉菜单补充样式 */
.drop-menu-item{display:flex!important;align-items:center!important;gap:10px!important;padding:10px 18px!important;font-size:13px!important;color:rgba(255,255,255,0.7)!important;text-decoration:none!important;transition:all .2s!important}
.drop-menu-item:hover{color:#fff!important;background:rgba(255,255,255,0.06)!important}
.drop-menu-item svg{flex-shrink:0;opacity:0.5;transition:all .2s}
.drop-menu-item:hover svg{opacity:1;color:#f0a500}
.header .user-box .user-data{display:flex!important;align-items:center!important;gap:8px;padding:4px 12px 4px 4px;border-radius:24px;transition:background .25s;cursor:pointer;text-decoration:none}
.header .user-box .user-data:hover{background:rgba(255,255,255,0.06)}
.header .user-box .user-data img{width:34px!important;height:34px!important;border-radius:50%!important;object-fit:cover;border:2px solid rgba(255,255,255,0.1)}
.header .user-box .user-name{font-size:13px;color:rgba(255,255,255,0.8);font-weight:500;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-arrow{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid rgba(255,255,255,0.5);margin-left:4px;transition:transform .25s,border-top-color .25s}
.header .user-box:hover .user-arrow{transform:rotate(180deg);border-top-color:#f0a500}
.header .user-box .drop-menu{display:none!important}
.header .user-box:hover .drop-menu{display:block!important}

/* 壁纸卡片价格标签 */
.card-price-tag{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:10px;font-size:11px;font-weight:600;z-index:2}
.card-price-tag.free{background:rgba(39,174,96,0.9);color:#fff}
.card-price-tag.points{background:rgba(240,165,0,0.9);color:#fff}
.card-price-tag.vip{background:linear-gradient(135deg,#f0a500,#ff7e00);color:#fff}

/* 广告位样式 */
.heyrain-ad-slot{background:#fff;border-radius:6px;padding:10px;text-align:center;overflow:hidden}
.heyrain-ad-slot img{max-width:100%;height:auto;border-radius:4px}
.heyrain-ad-slot ins,.heyrain-ad-slot iframe{display:block;margin:0 auto}
.heyrain-ad-between{clear:both;padding:15px 9px;box-sizing:border-box}
.heyrain-ad-between .heyrain-ad-slot{padding:5px}

.uc-section a,.uc-nav a,.uc-card a,.uc-quick-link,.uc-nav-item,.uc-plan-card,.uc-vip-card,.uc-purchase-card,.uc-copy-btn{text-decoration:none}
.uc-section a:hover,.uc-nav a:hover,.uc-card a:hover,.uc-quick-link:hover,.uc-nav-item:hover,.uc-plan-card:hover,.uc-vip-card:hover,.uc-purchase-card:hover,.uc-copy-btn:hover{text-decoration:none}
.uc-section a:focus,.uc-nav a:focus,.uc-card a:focus{text-decoration:none}

/* ========== 全局布局：Footer始终粘底 ========== */
body{display:flex;flex-direction:column;min-height:100vh}
body>.footer{margin-top:auto}

/* ========== 用户中心页面修复 ========== */
.page-template-page-user .header{background:#444!important;position:sticky!important;top:0!important;z-index:100!important}
.page-template-page-user .header .fixed{background:#444!important}
.page-template-page-user .header .nav .item .one{color:#fff!important}
.page-template-page-user .header .search-form .s-txt{color:#fff!important;background:rgba(255,255,255,0.06)!important;border-color:rgba(255,255,255,0.12)!important}
.page-template-page-user .header .search-form .s-txt::placeholder{color:rgba(255,255,255,0.35)!important}
.page-template-page-user .header .user-name{color:rgba(255,255,255,0.8)!important}
.page-template-page-user .location{background:rgba(0,0,0,0.03)!important}
.page-template-page-user .user-center-wrap{flex:1}
.page-template-page-user .footer{background:#333!important;color:#aaa!important;margin-top:auto!important}
.page-template-page-user .footer a{color:#aaa!important}
.page-template-page-user .footer p{color:#aaa!important}

.single-wallpaper-content{transition:background 0.5s ease}