/* ========================================
   开开无损音乐 - 现代设计系统 v2.1
   蓝色主题 · 暖橙强调 · 卡片化布局 · 流畅动效
   ======================================== */

/* ----- CSS 设计变量 ----- */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #3b82f6;
    --primary-lighter: #93c5fd;
    --accent: #f97316;
    --accent-dark: #ea580c;
    --highlight: #0ea5e9;
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
    --gradient-accent: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
    --gradient-nav: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #2563eb 100%);
    --gradient-hero: linear-gradient(135deg, #2563eb 0%, #0ea5e9 50%, #06b6d4 100%);

    --bg: #f1f5f9;
    --bg-soft: #f8fafc;
    --card-bg: #ffffff;
    --text: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-light: #f1f5f9;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
    --shadow-primary: 0 4px 14px 0 rgba(37, 99, 235, 0.22);
    --shadow-accent: 0 4px 14px 0 rgba(249, 115, 22, 0.22);

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- 全局重置 ----- */
*{ margin: 0; padding: 0; list-style: none; box-sizing: border-box; font-style: normal;}
body{
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}
a{ text-decoration: none; color: var(--text); transition: var(--transition-fast);}

/* 自定义滚动条 */
::-webkit-scrollbar{ width: 8px; height: 8px;}
::-webkit-scrollbar-track{ background: var(--bg-soft);}
::-webkit-scrollbar-thumb{ background: var(--primary-lighter); border-radius: var(--radius-full);}
::-webkit-scrollbar-thumb:hover{ background: var(--primary-light);}

/* ----- 工具类 ----- */
.bg-white{ background-color: var(--card-bg);}
.size{ width: 1200px;}

/* ========================================
   头部导航
   ======================================== */
.topbox.pcmenu{
    position: relative;
    z-index: 100;
}

/* 顶部欢迎栏 */
.top{
    height: 36px;
    background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
    color: rgba(255,255,255,0.7);
    border-bottom: none;
    font-size: 13px;
}
.top p{
    letter-spacing: 0.3px;
}

/* Logo 区域 */
.bg-white{
    background: var(--card-bg);
}
.headcont{
    height: 80px;
    transition: var(--transition);
}
.headcont img{
    transition: var(--transition);
}
.headcont:hover img{
    transform: scale(1.02);
}

/* 热门搜索 */
.hotsearch{
    font-size: 12px;
    margin-top: 5px;
    color: var(--text-muted);
}
.hotsearch a{
    margin-right: 6px;
    color: var(--primary);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(37, 99, 235, 0.08);
    transition: var(--transition);
    display: inline-block;
    margin-bottom: 2px;
}
.hotsearch a:hover{
    color: #fff;
    background: var(--primary);
    transform: translateY(-1px);
}

/* 搜索框 */
input.searchinput{
    height: 42px;
    width: 260px;
    padding-left: 18px;
    border: 2px solid var(--border);
    outline: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font-size: 14px;
    color: var(--text);
    background: var(--bg-soft);
    transition: var(--transition);
}
input.searchinput::placeholder{ color: var(--text-muted);}
input.searchinput:focus{
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
button.searchbtn{
    height: 42px;
    width: 56px;
    color: #fff;
    cursor: pointer;
    background: var(--gradient-primary);
    border: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
button.searchbtn:hover{
    opacity: 0.9;
    box-shadow: var(--shadow-primary);
}
button.searchbtn i{ font-size: 18px;}

/* 导航栏 */
.nav{
    background: var(--gradient-nav);
    height: 52px;
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.2);
}
ul.navcont{ display: flex;}
.navcont li{
    position: relative;
}
.navcont li a{
    color: rgba(255,255,255,0.92);
    font-weight: 600;
    font-size: 15px;
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    transition: var(--transition);
    position: relative;
}
.navcont li a::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: #fbbf24;
    border-radius: 3px 3px 0 0;
    transition: var(--transition);
    transform: translateX(-50%);
}
.navcont li a:hover{
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.navcont li a:hover::after{ width: 60%;}

/* 热门标记动画 */
.hotli{ position: relative;}
.hotli i{
    position: absolute;
    top: 8px;
    right: 2px;
    font-size: 13px;
    animation: bounceHot 0.8s ease-in-out infinite;
}
@keyframes bounceHot {
    0%, 100% { transform: translateY(0); opacity: 1;}
    50% { transform: translateY(-4px); opacity: 0.8;}
}

/* ========================================
   首页 - 卡片区块
   ======================================== */
.swiperbox{ width: 390px; height: 330px;}

/* 关键修复: 三栏卡片宽度与防溢出 */
.newbox{
    width: 415px;
    height: 330px;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.newbox:hover{
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}
.hotbox{
    width: 340px;
    height: 330px;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--border-light);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.hotbox:hover{
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* 区块标题 */
.blocktitle{
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 8px;
    position: relative;
    flex-shrink: 0;
}
.blocktitle::after{
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
}
.blocktitle h2{
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
}
a.seemore i{
    color: var(--text-muted);
    font-size: 22px;
    transition: var(--transition);
}
a.seemore:hover i{ color: var(--primary);}

/* 关键修复: 列表项 flex 布局溢出 */
ul.smalllist{
    display: block;
    flex: 1;
    overflow: hidden;
}
ul.smalllist li{
    display: flex;
    height: 33px;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    border-radius: var(--radius-xs);
    transition: var(--transition-fast);
    gap: 8px;
}
ul.smalllist li:hover{
    background: var(--bg-soft);
    padding-left: 8px;
}
ul.smalllist li p{
    display: flex;
    align-items: center;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}
ul.smalllist li p i{
    color: var(--primary-light);
    font-size: 14px;
    transition: var(--transition);
    flex-shrink: 0;
}
ul.smalllist li:hover p i{ color: var(--primary);}
ul.smalllist li p a{
    margin-left: 6px;
    display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-secondary);
    transition: var(--transition-fast);
    font-size: 13px;
}
ul.smalllist li p a:hover{ color: var(--primary);}
ul.smalllist li em{
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* 排名样式 */
span.px{
    color: var(--text-muted);
    font-style: italic;
    font-weight: 800;
    margin-right: 6px;
    font-size: 13px;
    min-width: 22px;
    display: inline-block;
    text-align: center;
}
span.px01{
    color: #fff;
    background: var(--gradient-accent);
    font-style: italic;
    font-weight: 800;
    margin-right: 6px;
    width: 22px;
    height: 22px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    font-size: 12px;
}
span.px02{
    color: #fff;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    font-style: italic;
    font-weight: 800;
    margin-right: 6px;
    width: 22px;
    height: 22px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    font-size: 12px;
}
span.px03{
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    font-style: italic;
    font-weight: 800;
    margin-right: 6px;
    width: 22px;
    height: 22px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    font-size: 12px;
}

/* ----- 标签区 ----- */
.tagtitle{ font-size: 16px; font-weight: 700;}
.tagtitle strong{
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tagbox li a{
    display: flex;
    margin-right: 6px;
    margin-bottom: 6px;
    height: 26px;
    align-items: center;
    padding: 0 12px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
}
.tagbox li a:hover{
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-md);
    color: #fff !important;
}
a.tag0{ background: #fef3c7; color: #92400e;}
a.tag0:hover{ background: #f59e0b;}
a.tag1{ background: #dbeafe; color: #1e40af;}
a.tag1:hover{ background: #2563eb;}
a.tag2{ background: #fef3c7; color: #92400e;}
a.tag2:hover{ background: #f59e0b;}
a.tag3{ background: #fee2e2; color: #b91c1c;}
a.tag3:hover{ background: #ef4444;}
a.tag4{ background: #fef9c3; color: #854d0e;}
a.tag4:hover{ background: #eab308;}
a.tag5{ background: #d1fae5; color: #047857;}
a.tag5:hover{ background: #10b981;}
a.tag6{ background: #ede9fe; color: #6d28d9;}
a.tag6:hover{ background: #8b5cf6;}

/* ----- 首页分类卡片 ----- */
.index-item{
    width: 32%;
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    height: auto;
    min-height: 290px;
    margin-bottom: 15px;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    transition: var(--transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.index-item:hover{
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--primary-lighter);
}
.index-item dt{
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 8px;
    position: relative;
    flex-shrink: 0;
}
.index-item dt::after{
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
}
.index-item dt h2{ font-size: 16px; font-weight: 700;}
.index-item dd{ flex: 1; overflow: hidden;}

/* 歌手标签 */
a.taga{
    height: 24px;
    align-items: center;
    color: #fff !important;
    background: var(--gradient-primary);
    padding: 0 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex !important;
}
a.taga:hover{
    opacity: 0.9;
    box-shadow: var(--shadow-primary);
}

/* ========================================
   页脚
   ======================================== */
.footer{
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: rgba(255,255,255,0.7);
    margin-top: 30px;
    border-top: 3px solid var(--primary);
}
.footer p{
    letter-spacing: 0.3px;
}
.footer a{
    color: var(--primary-lighter);
    transition: var(--transition);
}
.footer a:hover{ color: #fff;}

/* ========================================
   列表页 / 搜索页 / 详情页
   ======================================== */
.leftbox{
    width: 70.7%;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.rightbox{
    width: 28%;
}

/* 面包屑 */
.position{
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-light);
}
.position a{
    margin: 0 6px;
    font-size: 13px;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}
.position a:hover{ color: var(--primary);}
.position h4{
    color: var(--text);
    font-weight: 600;
    margin-left: 6px;
}
.position i{ color: var(--primary); margin-right: 4px;}

/* 列表项 */
ul.listbox{ display: block;}
ul.listbox li{
    display: block;
    width: 100%;
    padding: 16px 16px;
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
    position: relative;
}
ul.listbox li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-primary);
    transform: scaleY(0);
    transition: var(--transition);
}
ul.listbox li:hover{
    background: var(--bg-soft);
}
ul.listbox li:hover::before{ transform: scaleY(1);}
ul.listbox li h2{
    font-size: 17px;
    padding-left: 6px;
    font-weight: 600;
}
ul.listbox li h2 a{
    color: var(--text);
    transition: var(--transition-fast);
}
ul.listbox li h2 a:hover{ color: var(--primary);}
ul.listbox li small{
    color: var(--text-muted);
    font-size: 13px;
    padding-left: 8px;
    display: flex;
    align-items: center;
    margin-top: 8px;
}
ul.listbox li small i{ font-size: 14px; color: var(--primary-light);}
ul.listbox li small em{ margin-left: 0px; margin-right: 18px;}

/* ----- 详情页 ----- */
.detial{ padding: 20px;}
.detail h1{ text-align: center;}
.detialheader{
    padding: 10px 0 20px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 20px;
}
.detialheader h1{
    font-size: 26px !important;
    font-weight: 800;
    color: var(--text);
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
p.info{
    color: var(--text-muted);
    margin-top: 8px;
}
p.info em{ margin-right: 15px; margin-left: 5px;}
.pinfo{
    align-items: start;
    justify-content: start !important;
    flex: 1;
    width: 50%;
    padding-left: 15px;
    margin-top: 18px;
}
.pinfo div{ margin-bottom: 6px;}
.pinfo i{ color: var(--primary-light);}
.bqinfo{ margin-top: 0 !important;}

/* 下载按钮区 */
.downbox{
    gap: 8px;
}
.downbox a{
    height: 44px;
    background: var(--gradient-accent);
    margin: 0;
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-accent);
}
.downbox a:hover{
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35);
}
.downbox a strong{ margin-left: 5px;}
.downbox a i{ font-size: 18px;}

.downitem{
    display: flex;
    align-items: center;
    height: 44px;
    flex: 1;
}
.downitem a{
    display: flex;
    font-size: 16px;
    justify-content: center;
    background: var(--gradient-accent);
    text-decoration: none;
    color: #fff;
    height: 44px;
    align-items: center;
    flex: 1;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-accent);
}
.downitem a:hover{
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35);
}
.downitem a i{ margin-right: 5px;}

/* 手机下载 */
.phonedown{
    display: flex;
    cursor: pointer;
    position: relative;
    color: #fff;
    padding: 0 12px;
    height: 44px;
    background: #3b82f6;
    align-items: center;
    width: 120px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.phonedown:hover{ background: #2563eb;}
.phonedown strong{ font-size: 14px;}
.phonedown i{ margin-right: 5px;}
.showqrcode{
    display: none;
    width: 120px;
    background: #3b82f6;
    height: 120px;
    position: absolute;
    top: -120px;
    left: 0;
    border-radius: var(--radius-sm);
}
.phonedown:hover .showqrcode{ display: block;}

/* 歌词区 */
.musictext{
    line-height: 180%;
    margin-top: 30px;
    padding: 20px;
    background: var(--bg-soft);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
}
.musictext h2{
    text-align: center;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--text);
}
.musictext p{ color: var(--text-muted); text-align: center;}

/* 播放器条 */
.play{
    background: var(--gradient-primary);
    height: 60px;
    margin: 5px 10px;
    border-radius: var(--radius);
    margin-top: 20px;
    box-shadow: var(--shadow-primary);
}
.playleft{
    width: 60px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
.playleft p{
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
}
.playleft p i{ font-size: 40px; color: #fff;}
.playright{ flex: 1; margin-right: 15px;}
.playright p{
    height: 8px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.3);
}
.playright p em{
    width: 20%;
    display: flex;
    height: 8px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.8);
}

/* 展开收起 */
.showall{
    position: relative;
    color: var(--primary);
    text-align: center;
    font-weight: 600;
    margin-top: 10px;
}
.showall::before{ content: '[ 展开歌词 ]'; cursor: pointer; font-size: 13px;}
.showall.on::before{ content: '[ 收起歌词 ]'; cursor: pointer; font-size: 13px;}
.text{
    max-height: 315px;
    overflow: hidden;
    text-align: center;
}
.text.on{ height: auto !important;}
.textopen{
    height: auto !important;
    overflow: hidden;
    text-align: center;
}

/* 新音乐标记 */
a.newmusic{ color: var(--accent) !important; font-weight: 600;}

/* ----- 分页 ----- */
.page{ padding: 20px 0;}
.page ul.pagination{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}
.page ul.pagination li{ margin: 0 2px; margin-bottom: 3px;}
.page ul.pagination li a{
    display: flex;
    align-items: center;
    background: #fff;
    color: var(--text-secondary);
    height: 34px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: var(--transition);
    font-weight: 500;
}
.page ul.pagination li a:hover{
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.page ul.pagination li span{
    display: flex;
    align-items: center;
    background: #fff;
    color: var(--text-secondary);
    height: 34px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.page ul.pagination li.active span{
    display: flex;
    align-items: center;
    color: #fff;
    background: var(--gradient-primary);
    height: 34px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: var(--radius-sm);
    border: none;
    font-weight: 600;
    box-shadow: var(--shadow-primary);
}

/* ----- 友情链接 ----- */
ul.linkul{ margin-top: 12px;}
ul.linkul li{
    margin-right: 15px;
    margin-bottom: 10px;
}
ul.linkul li a{
    color: var(--text-muted);
    font-size: 13px;
    transition: var(--transition);
}
ul.linkul li a:hover{ color: var(--primary);}

.linkbox{
    border: 1px solid var(--border-light) !important;
}
.linktitle{
    font-weight: 700;
    color: var(--text);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 4px;
    position: relative;
}
.linktitle::after{
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

/* ========================================
   弹窗
   ======================================== */
.modelbox{
    display: none;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2500;
    top: 0;
    left: 0;
}
.modelcont{
    background: #fff;
    border-radius: var(--radius-xl);
    width: 420px;
    height: auto;
    padding: 24px;
    box-shadow: var(--shadow-xl);
    animation: modalIn 0.3s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px);}
    to { opacity: 1; transform: scale(1) translateY(0);}
}
span.closemodel{
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    transition: var(--transition);
}
span.closemodel:hover{ background: var(--bg-soft);}
span.closemodel i{ font-size: 20px; color: var(--text-muted);}
span.method1{
    display: flex;
    align-items: center;
    font-weight: bold;
    justify-content: center;
    background: var(--gradient-accent);
    border-radius: var(--radius-full);
    padding: 0 14px;
    height: 26px;
    color: #fff;
    font-size: 14px;
}
a.linkdown{ text-decoration: underline; color: var(--text-muted);}

/* ========================================
   打赏页
   ======================================== */
.dashangbox{
    width: 1200px;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    margin: 20px auto;
    padding: 36px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-light);
}
.dashangbox p{ margin-bottom: 10px;}
img.skmimg{ width: 300px; border-radius: var(--radius);}
ul.dsul{ display: block; width: 300px; margin: 15px auto;}
ul.dsul li span{ font-weight: bold;}
ul.dsul li{ height: 36px;}

/* ========================================
   移动端显示控制
   ======================================== */
.mbhide{ display: block;}
.pchide{ display: none;}
.phonemenu{ display: none;}
.phonesearch{ display: none;}
.smallinfo{ display: flex; align-items: center;}

/* ========================================
   侧边悬浮
   ======================================== */
.asid_share{position: fixed; width:50px; bottom:25%; right:0; z-index:890; padding-bottom:15px;}
.asid_share .asid_share_box{width:100%; margin-bottom:3px; background:var(--gradient-primary); text-align:center; border-radius: 8px 0 0 8px;}
.asid_share .asid_share_box a{display:flex; flex-direction:column; align-items:center; justify-content:center; height:60px; width:50px;}
.asid_share .asid_share_box a:hover{background:var(--primary-dark); text-decoration:none;}
.asid_share .asid_share_box a:hover .asid_title,.asid_share .asid_share_box .asid_title{color:#fff; font-size:12px; display:block; padding-left:6px; line-height:18px; width:30px; margin-top:-2px;}
.asid_share .red_bag{background:var(--accent); text-decoration:none;}
.asid_share .asid_sha_layer{border:1px solid var(--border); background:#fff; position:absolute; right:50px; bottom:0; padding-bottom:15px; display:none; border-radius: var(--radius);}
.sweep_img{padding:10px;}
.asid_share_box .asid_help_list li{line-height:26px; height:26px;}
.asid_share_box .asid_help_list li a{line-height:26px; height:26px; padding:0 0 0 14px; text-align:left;}
.asid_help_list li a:hover{color:#fff;}
.asid_share_triangle{width:12px; height:40px; position:absolute; right:45px; bottom:-12px; z-index:100;}
.border_sj,.con_sj{display:block; width:18px; height:28px; font-size:18px; overflow:hidden;}
.border_sj{color:var(--border); font-style:normal;}
.con_sj{color:#fff; margin:-14px -2px 0 0; margin:-28px 0 0 -2px;}

/* 横幅 */
.qqqbanner{ margin:10px auto; margin-top:10px; max-width:1200px;}
.qqqbanner img{ width:100%; border-radius: var(--radius); overflow: hidden;}

/* Swiper */
.swiper{ width:100%; height:100%;}
.swiper-slide{ text-align:center; font-size:18px; background:#fff; display:flex; justify-content:center; align-items:center;}
.swiper-slide img{ display:block; width:100%; height:100%; object-fit:cover;}
.swiper-wrapper{position:relative;}
.swiper-wrapper a{ display:flex; position:absolute; top:0; left:0; bottom:0; right:0; align-items:center; justify-content:center;}
.swiper-wrapper a img{ display:block; object-fit:cover; width:100%; height:100%;}

/* 右侧栏卡片 */
.rightbox .bg-white{
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.rightbox .bg-white:hover{
    box-shadow: var(--shadow-md);
}

/* "猜你喜欢" 区块 */
.youlike{
    padding: 16px !important;
}
.youlike .blocktitle{
    margin-bottom: 10px;
}

/* ========================================
   响应式 - 移动端
   ======================================== */
@media screen and (max-width:600px) {
    .asid_share{ display:none;}
    .mbhide{ display:none;}
    .pchide{ display:block;}
    .dashangbox{ width:95%; padding:20px;}
    .modelcont{ width:90%; padding:20px;}

    body{ padding-top:50px; background: var(--bg);}
    .pcmenu{ display:none;}
    .phonedown{ display:none;}
    .size{ width:100%;}

    .topbox{ flex-direction: column !important;}
    .swiperbox{ width:96%; margin:0 auto;}
    .newbox,.hotbox,.linkbox,.tagbox{
        width:96%;
        margin:12px auto 0 auto;
        height: auto !important;
        min-height: 280px;
    }
    .mainbox{ flex-direction: column !important; margin-top:0 !important;}
    .index-item{ width:96%; margin:10px auto 0 auto;}
    .footer{ margin-top:15px; padding: 15px 10px;}

    /* 移动端导航 */
    .phonemenu{
        display:block;
        height:50px;
        background: var(--gradient-nav);
        position:fixed;
        z-index:5000;
        top:0;
        left:0;
        width:100%;
        box-shadow: 0 2px 12px rgba(30, 58, 138, 0.3);
    }
    .phonemenutop{height:50px;}
    span.openSearch{ display:flex; justify-content:center; height:50px; width:50px; align-items:center;}
    span.openBtn{ display:flex; justify-content:center; height:50px; width:50px; align-items:center;}

    .phonenav{
        position:absolute;
        top:50px;
        left:0;
        z-index:5000;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        width:100%;
        overflow:hidden;
        height:0;
        transition: height 0.3s ease;
    }
    .phonenav.on{ height: calc(100vh - 50px);}
    .phonesearch{
        position:absolute;
        top:50px;
        left:0;
        z-index:5000;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        width:100%;
        overflow:hidden;
        height:0;
        transition: height 0.3s ease;
    }
    .phonesearch.on{ display:block; height: calc(100vh - 50px);}

    .phonenav ul li{ display:block;}
    .phonenav ul li a{
        display:block;
        height:48px;
        width:100%;
        font-size:16px;
        font-weight:600;
        color:#fff;
        text-align:center;
        line-height:48px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        transition: var(--transition);
    }
    .phonenav ul li a:hover{ background: rgba(37, 99, 235, 0.2);}

    .leftbox{ width:96%; margin:12px auto 0 auto; border-radius: var(--radius);}
    .rightbox{ width:96%; margin:10px auto 0 auto;}

    ul.listbox li h2{ font-size:16px;}
    .smallinfo{ display:block;}
    ul.listbox li small{
        color: var(--text-muted);
        font-size:12px;
        padding-left:8px;
        display:block;
        align-items:center;
        margin-top:3px;
    }
    p.info{ font-size:12px; flex-direction: column !important;}
    ul.smalllist li p a{
        margin-left:5px;
        line-height:33px;
        font-size:13px;
    }
    .downbox a{ font-size:14px;}
    .pclose{
        text-align:center;
        height:55px;
        line-height:55px;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .pclose2{
        text-align:center;
        height:55px;
        line-height:55px;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .text img{ width:100%;}
    .textopen img{ width:100%;}

    .detialheader h1{ text-align:center; font-size:20px !important;}
    .ar-type{ display:none;}
    .position{ display:none;}
    .detial{ padding:15px;}
    .pinfo{
        align-items:start;
        justify-content:start !important;
        flex:1;
        width:100%;
        padding-left:15px;
        margin-top:18px;
    }
    .pinfo div{ margin-bottom:6px;}
    .bqinfo{ margin-top:0 !important;}

    .downitem a{ font-size:14px;}
    .blocktitle h2{ font-size:15px;}
    .newbox, .hotbox{ padding: 12px;}
}