a, a:hover,.menu li a:hover,.menu li.on a,.menu li .subnav a:hover:after,.menu li .subnav a.on,.menu li.subcate:hover a,.menu li.subcate:hover .arrow::before,.menu li.subcate:hover>a::after,.menu li.subcate.on>a::after,.menu li.subcate:hover .subnav a:hover,.menu li.subcate:hover .subnav a.on,.menu li.subcate:hover .subnav a.on:after,.sch-m input,.sch-m input:focus,.sch-m button:after,.schfixed input:focus,.schclose,.schform input,.schform button:after,.cmstitle h4 .cmscate:hover,.cmstitle h4 .more:hover,.cmstitle h4 .more:hover::after,.cmslist li a:hover,.post h2 a:hover,.post h2 .istop:before,.post .user a:hover,.post .date a:hover,.post .cate a:hover,.post .views a:hover,.post .cmtnum a:hover,.post .edit a:hover,.post .del a:hover,.post .readmore a:hover,.post .readmore a:hover:after,.post .tags a:hover,.pages a:hover,a.backlist:hover,.cmtsfoot .reply:hover,.cmtsfoot .reply:hover:before,.cmtarea textarea:focus,.cmtform input:focus,.night .cmtform input:focus,.cmtsubmit button:hover,.cmtsubmit button:hover:before,.sidebox dd a:hover,#divTags ul li a:hover,#divCalendar td a,#divCalendar #today,#divContorPanel .cp-login a:hover,#divContorPanel .cp-vrs a:hover,#divContorPanel .cp-login a:hover:before,#divContorPanel .cp-vrs a:hover:before,.footer a:hover,.goback:hover,.goback:hover:after,.relateinfo h3 a:hover,.teles, .telesmore,.relate,.sitemap a:hover,.night .post h2 a:hover,.night .relateinfo h3 a:hover,.night #cancel-reply,.night #cancel-reply:before,.night .pages a:hover,.night .errorpage .errschtxt:focus,.errschtxt:focus,.night .errorpage .goback:hover,.night .relatelist a:hover,.night .sidebox dd .sidecmtarticle a:hover,.sidebox dd .sidelink a:hover,.night .sidebox dd .sidelink a:hover,.night .sidebox dd .sideitem .itemtitle:hover,.sidebox dd .noimg .sidelink a:hover,.archivedate.on,.archivelist h3 a:hover,.night .archivelist h3 a:hover,.copynoticetxt a:hover,.friendlink li a:hover,.sign span a,.signusermenu a:hover,.filter li.active,.filter li.active i::before,.night .filter li.active,.filter li:hover,.post mark,.sidebox dd .sidecmtarticle a:hover,.night .sidebox dd .avatartitle:hover,.night .sidebox dd .sidecmtcon a:hover,.block.forum .item h2.top a::before,.block.forum .item h2.top a,.block.forum .item h2 a:hover,.block.forum .item:hover h2 a, .block.forum .item:hover h2 a::before,.night .block.forum .item h2.top a,.night .block.forum .item h2 a:hover,.block.album .albumcon a:hover,.night .block.album .albumcon a:hover,.block.sticker .post .istop::before, .block.hotspot .post .istop::before, .block.album .albumimg a .istop::before, .block.shuo .post .istop::before, .block.waterfall .post .istop::before,.post.istop .istop::before,.block.waterfall .waterfallimg a .istop::before,.block.hotspot .post h2 .istop::before,.block.shuo .istop::before,.shuo h2 a:hover,.night .block.shuo .shuo h2 a:hover,.schitemcon mark,.schwords a:hover,.gourl,.gourl::after,.singlenext .content p.mask a,#cancel-reply,#cancel-reply::before,.night .schmore a:hover,.linkbox .wrap p.link,.linkbox .wrap a,.night .linkbox .wrap p.link { color:#0188fb; }.single p.ue-upload a,.singlenext h3 a:hover,.zbaudio_play em.pause::before,.night .zbaudio_play em.pause::before { color:#0188fb!important; }@media screen and (max-width:1080px){.menu ul li.subcate.slidedown > a:after {color:#0188fb}}.menu li:before,.schfixed button,.cmstitle h4 .cmscate::before,.post h2 em,.pagebar .now-page,.cmtpagebar .now-page,.pagebar a:hover,.cmtpagebar a:hover,a.backtotop:hover,.night .errorpage .errschbtn,.tagscloud li:hover,.night .tagscloud li:hover,.sign span a:hover,.night .signusermenu a:hover,.authinfo h1 span,.filternav li.active::after,.block.album .albumimg a em,.block.forum .item h2.top em,.gourl:hover,.night .gourl:hover,.night .singlenext .content p.mask a:hover,.linkbox .wrap a:hover,.night .linkbox .wrap p a {background:#0188fb;} .zbaudio_now,.zbaudio_bar::before,#cancel-reply:hover {background:#0188fb!important;}.gourl{background:rgba(1,136,251,.05);}.linkbox .wrap a{background:rgba(1,136,251,.05);}.menuico span,.lazyline,a.setnight:hover,a.lang:hover,.night a.backtotop:hover,.swiper-pagination-bullet-active,.maincon .swiper-button-prev:hover::after,.maincon .swiper-button-next:hover::after {background-color:#0188fb}.menu li .subnav,.schfixed,.sideuserlink p a.wechat span {border-top-color:#0188fb}.menu li.subcate .subnav a {color:#333}.menu li .subnav:before,.sch-m input,.schfixed:before,.schform input,.single h1:after,.single h2:after,.single h3:after,.single h4:after,.single h5:after,.single h6:after,.contitle h1,.contitle h2 {border-bottom-color:#0188fb}.post .readmore a:hover,.post .tags a:hover,.telesmore i,.pagebar .now-page,.pagebar a:hover,a.backlist:hover,#divTags ul li a:hover,#divCalendar td a,#divContorPanel .cp-login a:hover,#divContorPanel .cp-vrs a:hover,.goback:hover,.night .post .readmore a:hover,.night #divContorPanel .cp-login a:hover, .night #divContorPanel .cp-vrs a:hover,.night #cancel-reply,.night .pages a:hover,.cmtpagebar .now-page,.cmtpagebar a:hover,.cmtsubmit button:hover,.night .cmtsubmit button:hover,.night .errorpage .errschbtn,.night .errorpage .goback:hover,.closesite h1,.signuser.normal:hover,.sign span a,.searchnull a,.gourl,.singlenext .content p.mask a:hover,.night .singlenext .content p.mask a,#cancel-reply,.linkbox .wrap a {border-color:#0188fb}.wrapper,.main,.maincon,.closepage { background:#f1f1f1; }body,input,textarea {font-family:Penrose, "PingFang SC", "Hiragino Sans GB", Tahoma, Arial, "Lantinghei SC", "Microsoft YaHei", "simsun", sans-serif}.header { background-color:#ffffff;}.footer { color:#999999; background-color:#e4e8eb; } .footer a { color:#999999; }.banner::before { background-color:#000000; opacity:0.1; }.post > h1,
.post > .info {
    display: none;
}

.song-card-header {
    text-align: center;
    padding: 30px 20px 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e4e8eb;
}

.song-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.song-meta-row {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.song-meta-row i {
    font-size: 14px;
    opacity: 0.7;
}

.tag-box {
    background-color: #fdebd0; /* 浅橙色背景 */
    color: #d35400;            /* 深橙色文字 */
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
}

.quark-tip {
    display: block;
    text-align: center;
    color: #2ecc71; /* 绿色 */
    font-size: 13px;
    margin: 20px 0 15px 0;
}


.quark-download-box {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 0; /* 由外部控制间距 */
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.quark-download-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    font-family: "Microsoft YaHei", sans-serif;
}

.quark-meta-info {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.quark-meta-info span {
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
}

.quark-meta-info .artist {
    background: #FF9900; 
    color: #fff;
    font-weight: bold;
}

.quark-notice {
    color: #28a745; 
    font-size: 13px;
    margin-bottom: 20px;
    font-weight: 500;
}


.download-wrapper {
    width: 80%;       
    margin: 20px auto; 
}


.btn-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* 两端对齐 */
    gap: 10px; /* 两个按钮之间的间距 */
    width: 100%;
}


.dl-btn {
    display: flex;           /* 让文字和图标垂直居中 */
    align-items: center;
    justify-content: center;
    flex: 1;                 /* 核心：让所有存在的按钮平均分配剩余空间 */
    padding: 12px 0;         /* 按钮高度由内边距撑开 */
    background-color: #ff4d79; /* 粉红色背景 */
    color: #fff;             /* 白色文字 */
    text-decoration: none;   /* 去除下划线 */
    border-radius: 6px;      /* 圆角 */
    font-weight: bold;
    transition: opacity 0.3s;
}

/* 鼠标悬停效果 */
.dl-btn:hover {
    opacity: 0.9;
    color: #fff;
}


/* 移动端适配 */
@media (max-width: 480px) {
    .quark-download-box {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .quark-btn-group {
        flex-direction: column;
    }
    .quark-btn {
        max-width: 100%;
    }
}

.post p {
    font-size: 15px;
    line-height: 1;       /* 增加行高，阅读更舒适 */
    color: #444;            /* 稍微柔和的文字颜色 */
    margin-bottom: 10px;    /* 段落之间的间距 */
    text-align: justify;    /* 两端对齐，排版更整齐 */
}

.post h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 30px 0 15px 0;  
    padding-left: 12px;
    border-left: 4px solid #FF3377;
    line-height: 1.4;
}

.post h4 {
    font-size: 17px;
    font-weight: bold;
    color: #d35400;         
    margin: 20px 0 10px 0;
    line-height: 1.5;
}

/* 1. 标签容器（可选：控制整体布局，如左对齐、间距等） */
.tags {
  display: flex;       /* 用弹性布局让标签横向排列 */
  flex-wrap: wrap;     /* 标签过多时自动换行 */
  gap: 8px;            /* 标签之间的水平+垂直间距（也可单独设 margin-right） */
  align-items: center; /* 标签垂直居中对齐 */
}

/* 2. 单个标签 <a> 的核心样式 */
.tags a {
  display: inline-block;   /* 转为行内块元素，支持宽高、边框、圆角 */
  padding: 4px 12px;       /* 上下内边距4px，左右内边距12px（控制文字与边框的距离） */
  border: 1px solid #ddd;  /* 浅灰色边框（颜色可根据需求调整） */
  border-radius: 4px;      /* 圆角半径4px（数值越大越圆） */
  text-decoration: none;   /* 去掉链接默认下划线 */
  color: #333;             /* 文字颜色（深灰，可读性强） */
  font-size: 14px;         /* 文字大小（根据设计稿调整） */
  line-height: 1.5;        /* 行高，让文字垂直居中更自然 */
  white-space: nowrap;     /* 防止文字换行（保持单行显示） */
  transition: all 0.3s;    /* 鼠标悬停时的过渡动画（可选，提升交互感） */
}

/* 3. 鼠标悬停时的交互效果（可选） */
.tags a:hover {
  border-color: #999;      /* 悬停时边框变深 */
  background-color: #f5f5f5; /* 悬停时背景变浅灰 */
  color: #000;             /* 悬停时文字变黑 */
}