body,ul{
    margin: 0;
    padding: 0;
}
ul li {
    list-style: none;
}
/* Live2D 看板娘 */
.waifu {
    position: fixed !important;
    min-width: 300px;
}
.waifu-tips {
    z-index: 3;
}
.waifu-tool {
    display: inline-block!important;
}
#aplayer {
    z-index: 1;
}
#live2d {
    z-index: 1;
    display: inline-block!important;
    transition: all 2s;/*1.步骤先设置动画时间*/
    transform: rotate(0deg);/*3.步骤设置旋转初始值0deg*/
}
/* 这里原来有一条 #live2dcanvas2 { left:unset!important; right:0 } —— 那个 id 已随移动端改动
   改名成 #l2d-canvas（画布的 left/top 由 widget.inc.php 的 l2dApplyC2CanvasOff 用行内
   !important 精确压位，比这条样式表规则更强），规则一起删掉。 */
@media screen and (min-width:956px) {
    #live2d {

        width: 300px;
        height: 300px;
    }
}
/* end */

/* <!-- 音乐播放器 --> */
.la-btn {
    display: inline-block;
    padding: 4px 6px;
    color: #ffffff;
    white-space: nowrap;
    text-align: center;
    font-size: 12px;
    font-weight: 200;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #5bafd4;
    margin: 5px;
    display: none;
    z-index: 3;
    position: relative;
    text-decoration: auto;
}
.la-btn {display: inline-block;}
/* end */

.outDiv {position: absolute;left:-999em;}

/* ============================================================
 * 网站配置弹窗（自绘，替代原 artDialog）
 * ============================================================ */
.sc-mask {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(17, 18, 22, .42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}
.sc-mask.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.sc-dialog {
    width: 100%;
    max-width: 420px;
    max-height: 86vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .26), 0 2px 10px rgba(0, 0, 0, .08);
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .22s ease, transform .26s cubic-bezier(.2, .9, .3, 1.15);
}
.sc-mask.is-open .sc-dialog {
    opacity: 1;
    transform: none;
}
.sc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 14px;
    border-bottom: 1px solid #f2f3f5;
}
.sc-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #303133;
}
.sc-subtitle {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: #9095a0;
}
.sc-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: #f5f6f8;
    color: #8a8f99;
    cursor: pointer;
    transition: background-color .18s, color .18s;
}
.sc-close svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}
.sc-close:hover {
    background: #f72359;
    color: #fff;
}
.sc-body {
    padding: 6px 20px 20px;
}
.sc-group-title {
    margin: 14px 0 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    color: #a3a7b0;
}
.sc-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid #f4f5f7;
    cursor: pointer;
}
.sc-row:last-child {
    border-bottom: 0;
}
.sc-row-text {
    flex: 1 1 auto;
    min-width: 0;
}
.sc-row-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #303133;
}
.sc-row-desc {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.6;
    color: #9095a0;
}
.sc-row:hover .sc-row-name {
    color: #f72359;
}
/* 真实 checkbox 视觉隐藏，状态交给后面的 .sc-switch 呈现 */
.sc-row input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.sc-switch {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: #e4e7ec;
    transition: background-color .22s ease;
}
.sc-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    transition: transform .22s cubic-bezier(.2, .9, .3, 1.25);
}
.sc-row input:checked ~ .sc-switch {
    background: #f72359;
}
.sc-row input:checked ~ .sc-switch::after {
    transform: translateX(18px);
}
.sc-row input:focus-visible ~ .sc-switch {
    box-shadow: 0 0 0 3px rgba(247, 35, 89, .25);
}
.sc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f2f3f5;
}
.sc-btn {
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s, transform .12s;
}
.sc-btn:active {
    transform: scale(.97);
}
.sc-btn-ghost {
    border: 1px solid #e8e9ee;
    background: #fff;
    color: #606266;
}
.sc-btn-ghost:hover {
    border-color: rgba(247, 35, 89, .4);
    background: #fff7f9;
    color: #f72359;
}
.sc-btn-primary {
    background: #f72359;
    color: #fff;
    box-shadow: 0 6px 16px rgba(247, 35, 89, .28);
}
.sc-btn-primary:hover {
    background: #e51e50;
}

/* 小屏：从底部推出的面板 */
@media screen and (max-width: 560px) {
    .sc-mask {
        align-items: flex-end;
        padding: 0;
    }
    .sc-dialog {
        max-width: none;
        max-height: 90vh;
        border-radius: 18px 18px 0 0;
        transform: translateY(24px);
    }
    .sc-head {
        padding: 18px 16px 13px;
    }
    .sc-body {
        padding: 4px 16px 18px;
    }
    .sc-foot {
        margin-top: 14px;
    }
    .sc-btn {
        flex: 1 1 auto;
    }
}
#app .aplayer-list {
    max-height: 50vh!important;
}

/* 侧边栏：网站配置入口（右侧贴边胶囊按钮） */
.weighing {
    position: fixed;
    right: 0;
    bottom: 60px;
    z-index: 1986;
    background: none;
    display: none;
}
.weighing ul {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
.weighing ul li {
    margin: 0 0;
    position: relative;
    cursor: pointer;
}
.weighing ul li .tag-a{
    color:white;
    display: inline-block;
}
.weighing ul li a.tag-a:hover{
    background: linear-gradient(to right, #fb7299, #ff5722, #ccb739)
}

.site-config-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 15px 0 13px;
    border: 1px solid rgba(0, 0, 0, .06);
    border-right: 0;
    border-radius: 19px 0 0 19px;
    background: #fff;
    color: #606266;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    box-shadow: -2px 3px 14px rgba(0, 0, 0, .1);
    transition: color .2s, background-color .2s, transform .2s, box-shadow .2s;
    -webkit-tap-highlight-color: transparent;
}
.site-config-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: currentColor;
    transition: transform .45s ease;
}
.site-config-btn:hover {
    color: #fff;
    background: #f72359;
    transform: translateX(-4px);
    box-shadow: -4px 4px 18px rgba(247, 35, 89, .28);
}
.site-config-btn:hover .site-config-icon {
    transform: rotate(90deg);
}
.site-config-btn:focus-visible {
    outline: 2px solid rgba(247, 35, 89, .5);
    outline-offset: 2px;
}
/* 侧边栏 end */
#live2d-widget {
    z-index: 99;
    height: 300px;
}

#L2D {
    position: fixed;
    left: 0;
    bottom: -20px;
    width: 375px;
    height: 540px;
    z-index: 98;
    opacity: 1;
    border: 1px dashed #3f51b514;
}

#bigSingText {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    z-index: 99;
    width: 100%;
    text-align: center;
    color: #fcfcfc;
    font-size: 60px;
    font-weight: bold;
    text-shadow: 0 0 3px black;
}
#bigSingText.full {
    height: 100%;
    height: 100dvh;            /* 移动端用真实可视高度，避免多出一截 */
    vertical-align: text-bottom;
    top: 0;
    left: 0;
    transform: none;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    /* 歌词自己滚，但不把滚动传给页面（否则页面也会跟着冒出一条滚动条） */
    overscroll-behavior: contain;
    /* 隐藏歌词自己的滚动条：全屏时右侧只留干净画面，滚轮/触摸滚动照常可用 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#bigSingText.full::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* 全屏歌词：左右两条"退出"窄边（PC 端）
 * 只做两件事：hover 时浮出来一点、点一下退出全屏（onclick 调 window.exitFullscreenLyrics）。
 * 显隐纯 CSS：`#bigSingText.full ~ .lrc-edge` —— 边必须和 #bigSingText 同级、且排在它后面，
 * 这样全屏状态一变就自动跟着变，不用 JS 去维护 body class（也就不会脱节）。
 * 宽度只留 56px，别挡住歌词；z-index 要压过 #bigSingText.full 的 99。 */
.lrc-edge {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 56px;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    cursor: pointer;
    background: transparent;
    transition: opacity .18s ease, background-color .18s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#bigSingText.full ~ .lrc-edge { display: flex; }
.lrc-edge:hover,
.lrc-edge:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, .32);
}
.lrc-edge.is-right { right: 0; }
.lrc-edge .lrc-edge-txt {
    writing-mode: vertical-rl;      /* 竖排，窄边放得下 */
    font-size: 13px;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .75);
    padding: 10px 0;
}
/* 触屏设备不给：没有 hover，还容易误触（要退出全屏直接点空白处） */
@media (hover: none) {
    #bigSingText.full ~ .lrc-edge { display: none; }
}
@media screen and (max-width: 996px) {
    .lrc-edge { width: 40px; }     /* 小屏再窄一点 */
}
#bigSingText .aplayer-lrc-current {
    font-size: 72px;
    font-weight: bold;
}
#bigSingText.full p {
    padding: 20px;
    margin: 0;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0.5;
    word-break: break-all;
    max-width: 100%;
    box-sizing: border-box;
}
#bigSingText.full p.aplayer-lrc-sung {
    /* 原来是 0.1 —— 全屏里"唱过的"那几行几乎看不见（灰到发虚），
       用户反馈"看不清、看着费劲"。提到 0.45：能看清，又不抢当前行。 */
    opacity: .45;
}
#bigSingText.full .aplayer-lrc-current {
    font-size: 72px;
    opacity: 1;
    padding: 20px 0;
    margin: 20px 0;
}

/* 卡拉OK：底部多行（当前行 + 后面几行，行数由设置面板决定） */
#bigSingText .karaoke-row {
    display: block;
    text-align: center;
}
#bigSingText .karaoke-row + .karaoke-row {
    margin-top: .14em;
}
#bigSingText .karaoke-row.karaoke-next {
    opacity: .58;
}

/* 设置面板里的歌词控件：分段按钮 + 主题色块（.sc-row 本来是 label，这几行不是，别显示手型） */
.sc-row-plain {
    cursor: default;
}
.k-seg {
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 8px;
    overflow: hidden;
    background: #f2f3f5;
}
.k-seg button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #606266;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.k-seg button + button {
    box-shadow: inset 1px 0 0 #fff;
}
.k-seg button.on {
    background: #f72359;
    color: #fff;
}
.k-themes {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    max-width: 132px;
}
.k-theme-dot {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .14);
    -webkit-tap-highlight-color: transparent;
}
.k-theme-dot.on {
    box-shadow: 0 0 0 2px #f72359;
}
/* 色块里的名字只给读屏用 */
.k-theme-dot span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* 卡拉OK逐字高亮样式 - JS动态控制 */
.karaoke-line {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    /* 颜色和描边由JS动态设置 */
}

@keyframes glow {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(255, 87, 34, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 87, 34, 0.8));
    }
}
/* 这里原来是"歌词进度条" #lrc-progress-bar（屏幕最底下那条 4px 的渐变进度）。
   2026-10-12 应要求去掉：元素与它那套 100ms 的进度定时器一并从 js/live.js 删了。 */
@media screen and (max-width: 996px) {
    .mysetting .list .item .listLeft{min-width: 60px}
    #bigSingText {
        width: 100%;
        text-align: center;
        font-size: 28px;
        bottom: 10px;
    }
    #bigSingText .aplayer-lrc-current {
        font-size: 32px;
    }
    #bigSingText.full {
        padding: 10px;
    }
    #bigSingText.full p {
        padding: 10px;
        font-size: 20px;
        word-break: break-all;
        line-height: 1.4;
    }
    #bigSingText.full .aplayer-lrc-current {
        font-size: 32px;
        padding: 15px 0;
        margin: 15px 0;
    }
}
@media screen and (max-width: 480px) {
    #bigSingText {
        font-size: 22px;
        bottom: 5px;
    }
    #bigSingText .aplayer-lrc-current {
        font-size: 26px;
    }
    #bigSingText.full p {
        padding: 8px;
        font-size: 16px;
        word-break: break-all;
        line-height: 1.4;
    }
    #bigSingText.full .aplayer-lrc-current {
        font-size: 26px;
        padding: 12px 0;
        margin: 12px 0;
    }
}

/* 全屏歌词按钮
 * 2026-10-12：位置从 bottom:120px 挪到**屏幕最右下角**（原来悬在歌词区里，碍事）。
 * 让位规则见下面 body.mini-bar-on / html.lyrics-full 那几条。 */
#fullscreen-lyrics-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
#fullscreen-lyrics-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
#fullscreen-lyrics-btn:active {
    transform: scale(0.95);
}
/* 移动端：悬浮按钮收小一圈（用户要求"按钮们都小一点"）。
   48 → 36，位置就在右下角。图标是 svg 上的 width/height 属性，
   任何 CSS 规则都盖得住，不用 !important。 */
@media screen and (max-width: 996px) {
    #fullscreen-lyrics-btn {
        width: 36px;
        height: 36px;
        right: 12px;
        bottom: 12px;
    }
    #fullscreen-lyrics-btn svg {
        width: 18px;
        height: 18px;
    }
    /* 网站配置胶囊（右侧贴边那个）也一起收小 */
    .site-config-btn {
        height: 32px;
        padding: 0 12px 0 10px;
        font-size: 12px;
        border-radius: 16px 0 0 16px;
    }
    .site-config-icon {
        width: 14px;
        height: 14px;
    }
}

/* 迷你播放条出现时，把右下角这个按钮顶上去 —— 迷你条是fixed在底边居中的
   （宽 min(420px, 100vw-24px)），手机上几乎占满宽度，不顶就会互相压。
   和 #bigSingText 的处理同一套思路（body.mini-bar-on …）。 */
body.mini-bar-on #fullscreen-lyrics-btn {
    bottom: 84px;
}
@media screen and (max-width: 996px) {
    body.mini-bar-on #fullscreen-lyrics-btn {
        bottom: 76px;
    }
}

/* ============================================================
 * 全屏歌词时的"界面清理"（2026-10-12 应要求）
 *   进全屏（live.js 会给 <html> 挂 lyrics-full）之后：
 *     · 不显示右侧的「网站配置」胶囊 —— 用户点名要去掉；
 *     · 顺手也藏掉页脚的 mkMusic 外链：它固定在桌面端右下角，正好被挪过去的
 *       全屏歌词按钮压住（桌面端 bottom:20/right:20，按钮 bottom:16/right:16），
 *       不藏就是两个东西叠在一起。要留它的话把这条删掉、再给按钮让位即可。
 * ============================================================ */
html.lyrics-full .weighing,
html.lyrics-full a.mk-music-link {
    display: none !important;
}

/* ============================================================
 * 「全屏歌词按钮用够次数就收起来」（2026-10-12 应要求）
 *   计数在 live.js：进全屏/退全屏各算一次，累计 3 次（1 组 3 次）就往 <html>
 *   挂 lyrics-full-btn-hidden，并把结果记进 localStorage（下次打开照样藏着）。
 *   藏的是两个东西：
 *     · #fullscreen-lyrics-btn —— 圆形那个（进入/退出两态都藏）
 *     · .lrc-edge —— 全屏时左右两条"退出全屏"窄边
 *   不影响使用：点歌词文字或空白处照样能进出全屏。
 * ============================================================ */
html.lyrics-full-btn-hidden #fullscreen-lyrics-btn,
html.lyrics-full-btn-hidden .lrc-edge {
    display: none !important;
}
#fullscreen-lyrics-btn .fullscreen-icon {
    display: block;
}
#fullscreen-lyrics-btn .exit-fullscreen-icon {
    display: none;
}
/* 全屏状态下的按钮 */
#fullscreen-lyrics-btn.active .fullscreen-icon {
    display: none;
}
#fullscreen-lyrics-btn.active .exit-fullscreen-icon {
    display: block;
}

/* ============================================================
 * 页面主体布局
 * PC 端整体收窄居中成一列（与下方歌单手风琴的 740px 对齐），
 * 播放器再单独收窄到 500px，不再横向铺满整屏
 * ============================================================ */
.music-main,
.page-col {
    max-width: 780px;            /* 780 - 40(左右内边距) = 740，与手风琴等宽 */
    margin: 0 auto;
    padding: 0 20px 48px;
    box-sizing: border-box;
}

/* 底部装饰性 iframe（嘉然 / 球球游戏）与主体同宽居中对齐 */
.page-col {
    padding-bottom: 24px;
}
.page-col > iframe {
    display: block;
    border: 0;
}

/* 看板娘槽位：宽屏下高度归零，模型不再把整页内容顶下去（首屏就能看到播放器）。
   看板娘画布宽约 375px 且模型会跟随鼠标移动，所以只在
   主体列（780px 居中）左边缘已经越过 375px 的宽屏下生效，避免压住内容。 */
@media screen and (min-width: 1540px) {
    .l2d-slot {
        height: 0;
    }
}

/* 播放器外层 */
.player-box {
    margin: 16px 0;
}

/* 主播放器 / 单曲播放器：宽度上限 500px，居中；窄屏自动铺满 */
.music-main meting-js,
.music-main meting-js5 {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* 小节标题 */
.music-main .section-title {
    margin: 24px 0 12px;
    padding-left: 10px;
    border-left: 4px solid #f72359;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #303133;
}

/* 神曲：迷你播放器保持单行横排并居中 */
.mini-list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* 更新日志：沿用原来的淡化小字样式，不加卡片底色。
 * 2026-10-12 应要求改版：**不要滚动条**，收起时只露约 6 行，剩下的点右边的 ＋ 展开。
 *   原来这里是 `height:95px; overflow-y:auto` —— 那条滚动条就是被点名的东西。
 *   现在把"裁"落在正文 .music-log-body 上（max-height: 95px 与原来的 height 等价，
 *   所以收起时看到的行数不变），整体用 flex 排：正文 + 右边一条放 ＋ 的窄栏。
 *   收起态用 mask 在底部做一层淡出，"下面还有"一眼可见，也不像被硬切断。 */
.music-log {
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    color: #999;
    padding: 10px;
    margin-bottom: 6px;
}

/* 日志正文（收起时被裁的就是它） */
.music-log-body {
    flex: 1 1 auto;
    min-width: 0;                     /* 长句在里面换行，别把 flex 撑宽 */
    max-height: 95px;                 /* = 原来 .music-log 的 height：收起仍是约 6 行 */
    overflow: hidden;                 /* 不要滚动条 */
    /* 这里**不做** max-height 过渡：内容只有 150 来 px，从 95 涨到 1200 的过渡
     * 在头 10ms 内就走完了 —— 视觉上等于没有，却给"展开到底生效没"留下无谓的中间态。
     * 展开/收起是瞬时的高度变化（和改动前一样，不加动画）。 */
}
.music-log.is-open .music-log-body {
    max-height: 1200px;               /* 展开：够装下全部日志（比内容高就行，不会有空白） */
}
/* 收起时底部淡出（只在收起态加，展开后不遮字） */
.music-log:not(.is-open) .music-log-body {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16px), rgba(0, 0, 0, .12));
    mask-image: linear-gradient(180deg, #000 calc(100% - 16px), rgba(0, 0, 0, .12));
}

/* 右侧的 ＋：点它展开/收起剩余日志。
 * align-self: stretch + 内部居中 → 不管收起（95px）还是展开，它都贴着这条栏垂直居中。 */
.music-log-more {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9aa0a6;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.music-log-more:hover {
    background: rgba(0, 0, 0, .05);
    color: #303133;
}

/* 歌单 id 输入区：单行不换行、各项垂直居中（输入框与“设置”按钮要保持贴合，不能用 gap） */
.music-search {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin: 20px 0 0;
}

@media screen and (max-width: 996px) {
    .music-main {
        padding: 0 12px 40px;
    }
    .player-box {
        margin: 10px 0;
    }
}

/* ============================================================
 * 定时暂停
 * 按钮贴在播放器右边缘，计时中直接显示倒计时；面板向上不遮挡播放器
 * ============================================================ */
.sleep-timer {
    position: relative;
    max-width: 500px;             /* 与播放器同宽，按钮贴播放器右边缘 */
    margin: 2px auto 0;
    text-align: right;
}

.sleep-timer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 15px;
    background: rgba(255, 255, 255, .5);
    color: #b3b7c0;
    font-size: 13px;
    line-height: 1;
    opacity: .72;                 /* 默认淡化，不跟播放器抢视觉 */
    cursor: pointer;
    transition: opacity .2s, background-color .2s, color .2s, border-color .2s, box-shadow .2s;
    -webkit-tap-highlight-color: transparent;
}
.sleep-timer-btn:hover {
    opacity: 1;
    background: #fff;
    color: #f72359;
    border-color: rgba(247, 35, 89, .32);
    box-shadow: 0 2px 10px rgba(247, 35, 89, .14);
}
.sleep-timer-btn:focus-visible {
    outline: 2px solid rgba(247, 35, 89, .45);
    outline-offset: 2px;
}
.sleep-timer-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: currentColor;
}
.sleep-timer-label {
    font-variant-numeric: tabular-nums;   /* 倒计时数字不左右跳 */
}

/* 计时中：改成淡粉底 + 粉字，不再用实心大色块 */
.sleep-timer-btn.is-active {
    opacity: .85;
    background: rgba(247, 35, 89, .09);
    border-color: rgba(247, 35, 89, .2);
    color: #f72359;
    box-shadow: none;
}
.sleep-timer-btn.is-active:hover {
    opacity: 1;
    background: rgba(247, 35, 89, .14);
    color: #f72359;
}
.sleep-timer-btn.is-active .sleep-timer-icon {
    animation: sleepTimerSpin 8s linear infinite;
}
@keyframes sleepTimerSpin {
    to { transform: rotate(360deg); }
}

/* 时间面板 */
.sleep-timer-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 60;
    width: 232px;
    padding: 12px;
    box-sizing: border-box;
    text-align: left;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .05);
    transform-origin: top right;
    animation: sleepPopIn .16s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes sleepPopIn {
    from { opacity: 0; transform: translateY(-6px) scale(.96); }
    to { opacity: 1; transform: none; }
}
.sleep-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #303133;
}
.sleep-pop-close {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #b4b8c0;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.sleep-pop-close:hover {
    background: #f2f3f5;
    color: #606266;
}
.sleep-pop-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sleep-pop-presets button {
    height: 34px;
    border: 1px solid #ececf0;
    border-radius: 10px;
    background: #fafafb;
    color: #4a4d55;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .16s, color .16s, border-color .16s;
}
.sleep-pop-presets button:hover {
    background: #fff0f4;
    border-color: rgba(247, 35, 89, .4);
    color: #f72359;
}
.sleep-pop-custom {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.sleep-pop-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #ececf0;
    border-radius: 10px;
    background: #fafafb;
    color: #303133;
    font-size: 13px;
    outline: none;
    transition: border-color .16s, background-color .16s;
}
.sleep-pop-input:focus {
    border-color: rgba(247, 35, 89, .5);
    background: #fff;
}
.sleep-pop-ok {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #f72359;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .16s;
}
.sleep-pop-ok:hover {
    background: #e51e50;
}
.sleep-pop-track {
    width: 100%;
    height: 34px;
    margin-top: 8px;
    border: 1px dashed #e2e2e8;
    border-radius: 10px;
    background: #fff;
    color: #5a5e66;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .16s, color .16s;
}
.sleep-pop-track:hover {
    border-color: rgba(247, 35, 89, .45);
    color: #f72359;
}
.sleep-pop-status {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f1f4;
    font-size: 12px;
    line-height: 1.6;
    color: #8a8f99;
}
.sleep-pop-status strong {
    color: #f72359;
    font-variant-numeric: tabular-nums;
}
.sleep-pop-cancel {
    width: 100%;
    height: 32px;
    margin-top: 8px;
    border: 1px solid rgba(247, 35, 89, .3);
    border-radius: 10px;
    background: #fff;
    color: #f72359;
    font-size: 13px;
    cursor: pointer;
    transition: background-color .16s;
}
.sleep-pop-cancel:hover {
    background: #fff0f4;
}

/* 结束提示 */
.sleep-timer-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    z-index: 2147483000;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(30, 32, 38, .9);
    color: #fff;
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity .24s ease, transform .24s ease;
}
.sleep-timer-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ============================================================
 * 封面唱片（光盘转）
 * APlayer 原生没有转盘设计（aplayer-roll 那个 keyframes 是歌词滚动用的），
 * 封面就是一张静态方图，这里改成圆盘：播放中缓慢旋转，暂停就地停住。
 * 播放状态用 APlayer 自己切换的 .aplayer-button 类名判断，纯 CSS，无需额外 JS。
 * ============================================================ */
.aplayer .aplayer-pic {
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    /* 内侧两圈浅描边，做出唱片的边缘质感 */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45),
                inset 0 0 0 4px rgba(255, 255, 255, .22),
                0 6px 16px rgba(0, 0, 0, .16);
    /* 动画常驻但默认暂停：暂停时停在当前角度，不会突然跳回 0 度 */
    animation: l2dDiscSpin 24s linear infinite;
    animation-play-state: paused;
}
/* 中间按钮反向转，保证播放/暂停图标始终正着 */
.aplayer .aplayer-pic .aplayer-button {
    animation: l2dDiscSpin 24s linear infinite reverse;
    animation-play-state: paused;
}
.aplayer .aplayer-pic:has(.aplayer-button.aplayer-pause) {
    animation-play-state: running;
}
.aplayer .aplayer-pic:has(.aplayer-button.aplayer-pause) .aplayer-button {
    animation-play-state: running;
}
@keyframes l2dDiscSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================================
 * 悬浮迷你播放条
 * 播放器滚出视野时从底部升起：封面 / 歌名 / 上一首 / 播放暂停 / 下一首
 * 点封面或歌名回到播放器；全屏歌词时自动隐藏
 * ============================================================ */
.mini-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(420px, calc(100vw - 24px));
    padding: 8px 10px 10px 8px;
    box-sizing: border-box;
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .05);
    opacity: 0;
    transform: translate(-50%, 140%);
    pointer-events: none;
    transition: transform .32s cubic-bezier(.2, .9, .3, 1.1), opacity .24s ease;
}
.mini-bar.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.mini-bar-cover {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eceef2;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 2px 6px rgba(0, 0, 0, .18);
    cursor: pointer;
    /* 沿用唱片的旋转，播放中才转 */
    animation: l2dDiscSpin 24s linear infinite;
    animation-play-state: paused;
}
.mini-bar.is-playing .mini-bar-cover {
    animation-play-state: running;
}
.mini-bar-info {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}
.mini-bar-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: #303133;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-bar-info:hover .mini-bar-title {
    color: #f72359;
}
.mini-bar-author {
    font-size: 11px;
    line-height: 1.45;
    color: #9aa0ab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mini-bar-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background-color .18s, color .18s, transform .12s;
}
.mini-bar-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}
.mini-bar-btn:hover {
    background: #f2f3f5;
    color: #f72359;
}
.mini-bar-btn:active {
    transform: scale(.94);
}
.mini-bar-play {
    width: 38px;
    height: 38px;
    background: #f72359;
    color: #fff;
    box-shadow: 0 4px 12px rgba(247, 35, 89, .34);
}
.mini-bar-play svg {
    width: 20px;
    height: 20px;
}
.mini-bar-play:hover {
    background: #e51e50;
    color: #fff;
}
/* 底部细进度线 */
.mini-bar-progress {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 4px;
    height: 2px;
    border-radius: 1px;
    background: rgba(0, 0, 0, .07);
    overflow: hidden;
}
.mini-bar-progress i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 1px;
    background: #f72359;
    transition: width .5s linear;
}

/* 迷你条出现时把底部大字歌词顶上去，别叠在一起 */
#bigSingText {
    transition: bottom .3s ease;
}
body.mini-bar-on #bigSingText {
    bottom: 96px;
}

@media screen and (max-width: 560px) {
    .mini-bar {
        bottom: 10px;
        width: calc(100vw - 16px);
        gap: 8px;
        padding: 7px 8px 9px;
    }
    body.mini-bar-on #bigSingText {
        bottom: 84px;
    }
}

/* ============================================================
 * 页脚的 mkMusic 外链（music2233.php 里那个 <a>，行内写着 fixed 右下角）
 *   桌面：维持原样，浮在右下角；
 *   移动端：不再浮在视口上，回到文档流、落在**页面最底部** ——
 *           它本来就是 body 的最后一个元素，改成 static 就正好在版权信息下面。
 *   原因：手机上它固定在右下角会跟底部的大字歌词/迷你条抢位置，
 *         而且离页面内容太远、很突兀。行内是 position:fixed，只能用 !important 盖。
 * ============================================================ */
@media screen and (max-width: 996px) {
    a.mk-music-link {
        position: static !important;
        display: block;                 /* 独占一行，落在页面最底部 */
        text-align: center;
        margin: 12px 0 20px;
    }
}

/* ============================================================
 * 页面底部留白（2026-10-12 应要求）
 *   底部的大字歌词、迷你播放条都是 position:fixed 的，页面最后那点内容容易被它们压住；
 *   索性在文档末尾留 30em 空白，滚到底就是干净的空白。
 *   只作用于音乐页（body.live2d_body），别的引入 live.css 的页面不受影响。
 * ============================================================ */
body.live2d_body {
    padding-bottom: 30em;
}

/* ============================================================
 * 歌单输入行搬进设置弹窗后（原来挂在页面内容区底部 .music-search）
 *   弹窗比整页窄，原来那套固定宽度（输入框 200px + 两个 90px 按钮）会撑出去，
 *   所以在这里改成"能换行 + 按比例缩小"，观感仍和原来一致（输入框和按钮贴着）。
 * ============================================================ */
#musicSetting .music-search {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin: 8px 0 2px;
}
#musicSetting .music-search .inpurTextLa {
    flex: 1 1 130px;
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 10px 0 14px;
    line-height: 40px;
    font-size: 14px;
    text-align: left;
    border-radius: 20px 0 0 20px;
}
#musicSetting .music-search .buttonLa {
    width: auto;
    height: 40px;
    padding: 0 14px;
    line-height: 40px;
    font-size: 13px;
}
#musicSetting .music-search .buttonLa.fullBR {
    margin-left: 0;
    border-radius: 20px;
}

/* ============================================================
 * 本地开发用：逐字歌词编辑器入口（线上不输出这段 HTML）
 * 只跳转，不内嵌
 * ============================================================ */
.lrc-editor-entry {
    max-width: 500px;
    margin: 8px auto 0;
    text-align: right;
}
.lrc-editor-entry a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 12px;
    border: 1px dashed rgba(247, 35, 89, .35);
    border-radius: 14px;
    background: rgba(255, 255, 255, .6);
    color: #f72359;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    opacity: .75;
    transition: opacity .18s, background-color .18s, border-color .18s;
    -webkit-tap-highlight-color: transparent;
}
.lrc-editor-entry a:hover {
    opacity: 1;
    background: #fff0f4;
    border-style: solid;
    border-color: rgba(247, 35, 89, .6);
}
.lrc-editor-entry svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: currentColor;
}
/* 只在本地显示的标签（线上不输出这段 HTML） */
.lrc-editor-entry .lrc-editor-tag {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(247, 35, 89, .12);
    color: #f72359;
    font-size: 10px;
    font-style: normal;
    line-height: 14px;
}