/* =============================================================================
   目录
   01. CSS变量与重置
   02. 基础布局（html, body）
   03. 播放器容器（#player）
   04. 关键帧动画
   05. 样式选择栏（#yangshi）
   06. 圆点指示器（#hongdian, .dot）
   07. 歌曲标题与歌手信息（#title-quality, #song-title, #artist-quality）
   08. 专辑封面（#album-art, #cover-container, #cover-image 等）
   09. 拼图游戏（#game-container, .puzzle-*）
   10. 歌词（#fullscreen-lyrics-container, #lyrics-container）
   11. 进度条（#progress-container, #progress-bar 等）
   12. 控制图标（#wutubiao）
   13. 播放控制（#controls, #play-pause-btn, #prev-btn, #next-btn）
   14. 分类面板（#category-panel, .category, .login-container 等）
   15. 播放列表面板（#playlist-panel, .playlist-item 等）
   16. 更多选项面板（#gengduo）
   17. 视频与全屏（#video-player, #fullscreen-container 等）
   18. 启动屏（#splash-screen）
   19. 消息界面（#xiaoxi-list-wrapper, #dm-chat-wrapper 等）
   20. 工具类（.fade-target, .no-transition, #rotate-warning 等）
   ============================================================================= */


/* =============================================================================
   01. CSS变量与重置
   ============================================================================= */

:root {
    --fixed-vh: 100svh;
}

@font-face {
    font-family: '公主殿下';
    src: url('https://zhangzhi.wang/元件/公主殿下.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* =============================================================================
   02. 基础布局（html, body）
   ============================================================================= */

html,
body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: var(--fixed-vh);
    min-height: 100svh;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000 !important;
    will-change: background-color;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* =============================================================================
   03. 播放器容器（#player）
   ============================================================================= */

#player {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: env(safe-area-inset-top);
    box-sizing: border-box;
    background-color: #000000;
    transition: transform 0.3s ease;
}

/* =============================================================================
   03.5 影子播放器容器（#player-ghost）- 用于滑动切歌
   ============================================================================= */

#player-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: env(safe-area-inset-top);
    box-sizing: border-box;
    background-color: #000000;
    visibility: hidden;
    opacity: 0;
    transition: none;
    will-change: transform;
}

#player-ghost.visible {
    visibility: visible;
    opacity: 1;
}

/* 影子播放器 - 全屏媒体区域（用于歌手/美图/MV模式） */
#fullscreen-media-ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}

#fullscreen-media-ghost.active {
    display: block;
}

#fullscreen-image-ghost,
#fullscreen-video-ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

#fullscreen-image-ghost.active,
#fullscreen-video-ghost.active {
    display: block;
}

/* 影子播放器 - 专辑封面区域 */
#swipe-cover-stage {
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;
    background-color: #000000;
}

#cover-background-container-ghost {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 65%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.cover-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: blur(42px) brightness(0.78);
}

.cover-bg-layer.is-active {
    opacity: 0.42;
}



#swipe-cover-container {
    position: absolute;
    top: calc(50% - 103px);
    left: 50%;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(80vw, calc(var(--fixed-vh) * 0.4));
    height: min(80vw, calc(var(--fixed-vh) * 0.4));
    margin-left: calc(-1 * (min(80vw, var(--fixed-vh) * 0.4) / 2));
    transform: translateY(-50%);
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #swipe-cover-container {
        top: calc(50% - 138px);
    }
}

#swipe-cover-image,
#swipe-overlay-image,
#swipe-biankuang-ghost {
    position: absolute;
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    clip-path: circle(49.8% at 50% 50%);
    pointer-events: none;
}

#swipe-cover-image {
    z-index: 4;
    width: 62%;
    transition: transform 0.1s ease;
}

#swipe-overlay-image {
    z-index: 3;
}

#swipe-biankuang-ghost {
    top: calc(50% - 103px);
    left: 50%;
    z-index: 2;
    width: min(80vw, calc(var(--fixed-vh) * 0.4));
    height: min(80vw, calc(var(--fixed-vh) * 0.4));
    margin-left: calc(-1 * (min(80vw, var(--fixed-vh) * 0.4) / 2));
    transform: translateY(-50%);
    opacity: 1;
}


@media (display-mode: standalone), (display-mode: fullscreen) {
    #swipe-biankuang-ghost {
        top: calc(50% - 138px);
    }
}

/* 影子播放器 - 歌曲信息区域 */
#song-info-ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#title-quality-ghost {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 20;
    width: calc(60% - 40px);
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #title-quality-ghost {
        top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    }
}


#song-title-ghost {
    margin-bottom: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: bold;
    color: #A1A1A1;
    white-space: nowrap;
    line-height: 1.2;
}

#song-title-ghost.marquee-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    line-height: 1.2;
}

#song-title-ghost .marquee-text {
    display: inline-block;
    flex: none;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.2;
    color: #A1A1A1;
    white-space: nowrap;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    will-change: transform;
    transform: translateZ(0);
}

#artist-quality-ghost {
    display: none;
}

/* 影子播放器 - 歌词容器 */
#lyrics-container-ghost {
    position: absolute;
    bottom: 195px;
    left: 50%;
    z-index: 200;
    display: block;
    width: 80%;
    height: 70px;
    overflow: hidden;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: auto;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #lyrics-container-ghost {
        bottom: 245px;
    }
}

/* 影子播放器 - 进度条已移除 */


/* =============================================================================
   04. 关键帧动画
   ============================================================================= */

@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes scaleIn {
    from {
        opacity: 0.6;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pieceShrink {
    from { transform: scale(1); }
    to   { transform: scale(0.9); }
}

@keyframes piecePop {
    0%   { transform: scale(0.9); }
    80%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@keyframes disperse {
    0%   { opacity: 1; transform: translate(0, 0); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

@keyframes fadeInContainer {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* =============================================================================
   05. 样式选择栏（#yangshi）
   ============================================================================= */

#yangshi {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 51;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(60% - 40px);
    height: 32px;
    overflow: hidden;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#yangshi span {
    font-size: 14px;
    font-weight: bold;
    color: #A1A1A1;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
}

/* =============================================================================
   07. 歌曲标题与歌手信息（#title-quality, #song-title, #artist-quality）
   ============================================================================= */

/* --- 容器 --- */
#title-quality {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 20;
    width: calc(60% - 40px);
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
}


/* --- 歌曲标题 --- */
#song-title {
    margin-bottom: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: bold;
    color: #A1A1A1;
    white-space: nowrap;
    line-height: 1.2;
}

#song-title.marquee-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    line-height: 1.2;
}

#song-title .marquee-text {
    display: inline-block;
    flex: none;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.2;
    color: #A1A1A1;
    white-space: nowrap;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    will-change: transform;
    transform: translateZ(0);
}

/* --- 歌手与音质 --- */
#artist-quality {
    display: none;
}

/* --- 跑马灯工具类 --- */
.marquee-container {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.marquee-text {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    will-change: transform;
    transform: translateZ(0);
}

.marquee-text.scroll {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


/* =============================================================================
   08. 专辑封面（#album-art, #cover-container, #cover-image 等）
   ============================================================================= */

#album-art {
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;
    background-color: #000000;
}

/* --- 封面容器 --- */
#cover-background-container {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 65%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#cover-bg-lyrics {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 65%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#cover-bg-puzzle {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 65%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#cover-bg-puzzle-ghost {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 65%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

#cover-container {
    position: absolute;
    top: calc(50% - 103px);
    left: 50%;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(80vw, calc(var(--fixed-vh) * 0.4));
    height: min(80vw, calc(var(--fixed-vh) * 0.4));
    margin-left: calc(-1 * (min(80vw, var(--fixed-vh) * 0.4) / 2));
    transform: translateY(-50%);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #cover-container {
        top: calc(50% - 138px);
    }
}


/* --- 封面图片 --- */
#cover-image {
    z-index: 4;
    width: 62%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.1s ease;
}

/* --- AI伴侣封面 --- */
#ai-cover-container {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 62.3%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

#ai-cover-container.show {
    opacity: 1;
    pointer-events: auto;
}

#ai-cover-image {
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.1s ease;
}

/* --- 遮罩层与边框（共享属性） --- */
#overlay-image,
#biankuang {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    clip-path: circle(49.8% at 50% 50%);
    pointer-events: none;
}

/* --- 边框（覆盖属性） --- */
#biankuang {
    position: absolute;
    top: calc(50% - 103px);
    left: 50%;
    z-index: 2;
    width: min(80vw, calc(var(--fixed-vh) * 0.4));
    height: min(80vw, calc(var(--fixed-vh) * 0.4));
    margin-left: calc(-1 * (min(80vw, var(--fixed-vh) * 0.4) / 2));
    transform: translateY(-50%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #biankuang {
        top: calc(50% - 138px);
    }
}

/* --- 收藏/操作容器 --- */
#container {
    position: absolute;
    top: 25px;
    left: 50%;
    z-index: 10;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    transform: translateX(-50%);
}

/* --- 粒子容器 --- */
#particle-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100vw;
    height: var(--fixed-vh);
    pointer-events: none;
}

.particle {
    position: absolute;
    pointer-events: none;
}

/* --- 背景层 --- */
#zhusediao {
    position: fixed;
    top: -10vh;
    left: -10vw;
    z-index: -9;
    display: none;
    width: 120vw;
    height: 120vh;
    transition: background-color 0.3s ease !important;
}

#background-layer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
    display: none;
    align-items: center;
    justify-content: center;
    width: 120vw;
    height: 120%;
    background-color: rgba(0, 0, 0, 0.9);
    background-size: 300% auto;
    background-position: center;
    opacity: 0.9;
    filter: blur(100px) brightness(0.5);
    transition: background-image 0.5s ease;
}


/* =============================================================================
   09. 拼图游戏（#game-container, .puzzle-*）
   ============================================================================= */

#game-container {
    position: absolute;
    top: calc(50% - 103px);
    left: 50%;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(80vw, calc(var(--fixed-vh) * 0.4));
    height: min(80vw, calc(var(--fixed-vh) * 0.4));
    margin-left: calc(-1 * (min(80vw, var(--fixed-vh) * 0.4) / 2));
    transform: translateY(-50%);
    border-radius: 10px;
    overflow: hidden; 
}


@media (display-mode: standalone), (display-mode: fullscreen) {
    #game-container  {
        top: calc(50% - 138px);
    }
}

/* --- 关闭与成绩按钮（共享属性） --- */
#close-button,
#chengji {
    position: absolute;
    top: 5px;
    right: 15px;
    width: 25px;
    height: 25px;
    padding: 0;
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    background-color: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    cursor: pointer;
}

#close-button {
    z-index: 201;
    background-image: url('/元件/关闭成绩.png');
}

#chengji {
    z-index: 202;
    display: none;
    background-image: url('/元件/查看成绩.png');
}

/* --- 拼图网格 --- */
.puzzle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    gap: 1px;
}

/* 拼图模式影子容器 */
#puzzle-ghost-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

#puzzle-ghost-container.active {
    display: flex;
}

#puzzle-grid-ghost {
    width: min(80vw, 80vh);
    height: min(80vw, 80vh);
    max-width: 400px;
    max-height: 400px;
}

.puzzle-grid.no-gap {
    gap: 0;
}

.puzzle-grid.locked .puzzle-piece {
    pointer-events: none;
}

/* --- 拼图块 --- */
.puzzle-piece {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    background-size: 300% 300%;
    background-repeat: no-repeat;
    background-origin: border-box;
    cursor: move;
    user-select: none;
    touch-action: none;
    transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
}

.scale-in {
    transform: scale(0.8);
    animation: scaleIn 0.5s ease-in-out forwards;
}

.scale-down {
    opacity: 0.9;
    transform: scale(0.8);
}

.puzzle-piece.celebrate {
    animation: pieceShrink 0.18s ease-out forwards, piecePop 0.28s ease-out 0.18s forwards;
}

/* --- 统计信息遮罩 --- */
#stats-container2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.6s ease;
}

.stats-content {
    padding: 20px;
    text-align: center;
    color: white;
}

.stats-content h2 {
    margin: 0 0 20px;
    font-size: 24px;
}

.stats-content p {
    margin: 10px 0;
    font-size: 18px;
}

.stats-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.stats-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.stats-buttons button:hover {
    transform: scale(1.05);
}

#replay-button {
    width: 120px;
    height: 40px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    background-color: #EAEAEA;
    color: #808080;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}


/* =============================================================================
   10. 歌词（#fullscreen-lyrics-container, #lyrics-container）
   ============================================================================= */

/* --- 全屏歌词 --- */
#fullscreen-lyrics-container {
    position: fixed;
    top: 5%;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80%;
    overflow: hidden;
    background-color: transparent !important;
    pointer-events: auto;
    visibility: hidden;
    will-change: transform;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 5%,
        black 20%,
        black 65%,
        transparent 80%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 5%,
        black 20%,
        black 65%,
        transparent 80%
    );
}

#fullscreen-lyrics {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    will-change: transform;
    transition: transform 0.6s ease;
}

.lyric-line-fullscreen {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    line-height: 2em;
    text-align: center;
    white-space: nowrap;
    opacity: 0.5;
    transition: color 0.3s, font-size 0.3s;
}

.lyric-line-fullscreen.multi-line {
    white-space: normal;
    word-break: break-word;
    margin-left: auto;
    margin-right: auto;
}

.lyric-line-fullscreen.current {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    opacity: 1;
}

/* --- 双行歌词容器 --- */
#lyrics-container {
    position: fixed;
    bottom: 195px;
    left: 50%;
    z-index: 200;
    display: block;
    width: 80%;
    height: 70px;
    overflow: hidden;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: pointer;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #lyrics-container {
        bottom: 245px;
    }
}

/* 确保歌词容器能捕获点击事件（透明背景） */
#lyrics-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.01);
    pointer-events: auto;
    z-index: 1;
}

.lyric-line {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    width: 100%;
    margin-top: -16px;
    font-size: 16px;
    font-weight: bold;
    color: #C0C0C0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backface-visibility: hidden;
    will-change: transform, opacity;
    transition: transform 0.8s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.8s ease;
    pointer-events: auto;
}

.current-lyric {
    z-index: 3;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.next-lyric {
    z-index: 2;
    opacity: 0.5;
    transform: translateY(25px) scale(0.8);
}

.lyric-fade-out {
    opacity: 0 !important;
    transform: translateY(-25px) scale(0.8) !important;
    transition: transform 0.8s ease, opacity 0.8s ease !important;
}

@media (orientation: landscape) {
    #lyrics-container {
        width: 100%;
        left: 0;
        bottom: 0;
        transform: none;
        height: 150px;
        overflow: visible;
    }

    #lyrics-container #previous-lyric {
        display: none !important;
    }

    #lyrics-container .lyric-line {
        position: absolute;
        top: auto;
        font-size: 26px;
        margin-top: 0;
        transition: opacity 0.3s ease !important;
        transform: none !important;
    }

    #lyrics-container #current-lyric {
        left: 10%;
        bottom: 80px;
        width: auto;
        max-width: 80%;
        text-align: left;
    }

    #lyrics-container #next-lyric {
        left: auto;
        right: 10%;
        bottom: 35px;
        width: auto;
        max-width: 80%;
        text-align: right;
    }

    #lyrics-container .lyric-fade-out {
        opacity: 0.5 !important;
        transform: none !important;
        transition: opacity 0.3s ease !important;
    }

    #top-nav,
    #wutubiao {
        display: none !important;
    }

    #controls {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        align-items: stretch !important;
        transform: none !important;
        will-change: auto !important;
        pointer-events: none;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    #controls #leibie,
    #controls #leimu,
    #controls #gedan {
        display: none !important;
    }

    #controls #prev-btn {
        position: absolute;
        left: 10%;
        top: calc(50dvh - 40px);
        transform: translateY(-50%);
        pointer-events: auto;
        width: 30px !important;
        height: 30px !important;
    }

    #controls #play-pause-btn {
        position: absolute;
        left: 50%;
        top: calc(50dvh - 40px);
        width: 40px;
        height: 40px;
        margin-left: -20px;
        margin-top: -20px;
        transform: translate(0, 0);
        pointer-events: auto;
    }

    #controls #play-pause-btn .front img,
    #controls #play-pause-btn .back img {
        width: 40px !important;
        height: 40px !important;
    }

    #controls #play-pause-btn.flip-to-play       { transform: rotateX(0deg); }
    #controls #play-pause-btn.flip-to-pause      { transform: rotateX(180deg); }
    #controls #play-pause-btn.flip-transition    { transform: rotateX(90deg); }

    #controls #next-btn {
        position: absolute;
        right: 10%;
        top: calc(50dvh - 40px);
        transform: translateY(-50%);
        pointer-events: auto;
        width: 30px !important;
        height: 30px !important;
    }

    .landscape-ui-hidden #controls {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    #progress-container {
        display: none !important;
    }

    #title-quality {
        width: 80%;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    #title-quality #song-title,
    #title-quality #song-title .marquee-text {
        font-size: 18px;
    }

    #yangshi span {
        font-size: 18px;
    }

    .landscape-ui-hidden #title-quality {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    #fullscreen-container {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    #particle-canvas {
        display: none !important;
    }
}


/* =============================================================================
   11. 进度条（#progress-container, #progress-bar 等）
   ============================================================================= */

#progress-container {
    position: fixed !important;
    bottom: 85px;
    left: 10%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 40px;
    transform: translateX(-50%);
    transition: bottom 0.3s ease;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #progress-container {
        bottom: 125px !important;
    }
}

#frequency-canvas {
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: 0;
    width: 100%;
    height: 15px;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

.time-display {
    position: absolute;
    top: 30px;
    width: 25px;
    font-size: 10px;
    color: #A1A1A1;
}

#current-time {
    left: 0;
    text-align: left;
    flex-shrink: 0;
}

#total-duration {
    right: 0;
    text-align: right;
    flex-shrink: 0;
}

#progress-bar {
    position: relative;
    flex-grow: 1;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background-color: #3C3C3C;
    overflow: hidden;
    cursor: pointer;
    touch-action: pan-y;
}

#loading-progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 0%;
    height: 100%;
    border-radius: 10px;
    background-color: #a1a1a1;
    transition: width 0.3s linear;
}

#progress {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 0%;
    height: 100%;
    border-radius: 10px;
    background-color: #FFFFFF;
    transition: width 0.1s linear;
}

.progress-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FFFFFF;
    pointer-events: auto;
    transform: translateY(-50%);
}

.progress-marker {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 2px;
    height: 2px;
    background-color: #FFFFFF;
    transform: translate(-50%, -50%);
}

#marker-60s {
    display: none;
    left: 0%;
}


/* =============================================================================
   12. 控制图标（#wutubiao）
   ============================================================================= */

#wutubiao {
    position: fixed !important;
    bottom: 145px;
    left: 10%;
    z-index: 999;
    width: 80%;
    height: 20px;
    box-sizing: border-box;
    transform: translateX(-50%);
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #wutubiao {
        bottom: 190px !important;
    }
}

#wutubiao > div {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
}

#wutubiao1 { left: calc(0 - 10px);  display: block; }
#wutubiao2 { left: calc(25% - 10px); display: block; }
#wutubiao3 { left: calc(50% - 10px); display: block; }
#shoucang  { left: calc(75% - 10px); }
#wutubiao5 { right: 0; }

#wutubiao img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

#top-nav {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 50%;
    z-index: 999;
    width: 80%;
    height: 32px;
    box-sizing: border-box;
    margin-left: -40%;
}


#top-nav > div {
    position: absolute;
    top: 50%;
    height: 32px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

#leimu { 
    left: 0; 
    width: 20px;
    cursor: pointer;
}

#controls > #leimu {
    position: static;
    transform: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

#controls > #leimu img {
    width: 20px;
    height: 20px;
}

#top-nav1 { 
    left: 0; 
    width: 20px;
    position: relative;
}

#top-nav1 .top-nav-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #F44336;
    color: #FFF;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
}

#top-nav2 { 
    right: 0; 
    width: 20px;
}

/* 导航栏搜索按钮样式 */
#nav-search-btn {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}

#nav-search-btn:hover {
    opacity: 1;
}

#top-nav img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}


/* =============================================================================
   13. 播放控制（#controls, #play-pause-btn, #prev-btn, #next-btn）
   ============================================================================= */

#controls {
    position: fixed !important;
    bottom: 20px;
    left: 10%;
    z-index: 100;
    display: flex;
    align-items: center;
    width: 80%;
    padding: 20px 0;
    box-sizing: border-box;
    transition: bottom 0.3s ease;
    will-change: transform;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #controls {
        bottom: 60px !important;
    }
}

#leibie {
    margin-right: auto;
}

#gedan {
    margin-left: auto;
    z-index: 10;
    cursor: pointer;
    pointer-events: auto;
}

/* --- 播放/暂停按钮 --- */
#play-pause-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: auto;
    width: 30px;
    height: 30px;
    cursor: pointer;
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
}

#play-pause-btn .front,
#play-pause-btn .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#play-pause-btn .front { opacity: 1; z-index: 2; }
#play-pause-btn .back  { opacity: 0; z-index: 1; }

#play-pause-btn.flip-to-play .front  { opacity: 1; z-index: 2; }
#play-pause-btn.flip-to-play .back   { opacity: 0; z-index: 1; }
#play-pause-btn.flip-to-pause .front { opacity: 0; z-index: 1; }
#play-pause-btn.flip-to-pause .back  { opacity: 1; z-index: 2; }

@supports (backface-visibility: hidden) {
    #play-pause-btn {
        transform-style: preserve-3d;
        perspective: 1000px;
        transition: transform 0.3s ease;
    }

    #play-pause-btn .front,
    #play-pause-btn .back {
        opacity: 1;
        backface-visibility: hidden;
    }

    #play-pause-btn .front { z-index: 2; }

    #play-pause-btn .back {
        z-index: 1;
        transform: rotateX(180deg);
    }

    #play-pause-btn.flip-to-play       { transform: translate(-50%, -50%) rotateX(0deg); }
    #play-pause-btn.flip-to-pause      { transform: translate(-50%, -50%) rotateX(180deg); }
    #play-pause-btn.flip-transition    { transform: translate(-50%, -50%) rotateX(90deg); }
}

/* --- 上一首/下一首按钮 --- */
#prev-btn {
    position: absolute;
    left: 25%;
    cursor: pointer;
    perspective: 1000px;
    transform-origin: center;
    transform: translateX(-50%);
    transition: transform 0.6s ease;
}

#next-btn {
    position: absolute;
    right: 25%;
    cursor: pointer;
    perspective: 1000px;
    transform-origin: center;
    transform: translateX(50%);
    transition: transform 0.6s ease;
}


/* =============================================================================
   14. 分类面板（#category-panel, .category, .login-container 等）
   ============================================================================= */

/* --- 面板容器 --- */
#category-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 60vw;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 60vw;
    height: calc(100% - 10px);
    padding: 0 10px;
    background-color: transparent !important;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    transform: translateX(-120vw);
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* --- 用户中心全屏门户 --- */
#user-portal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-top: env(safe-area-inset-top, 0px);
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s ease, visibility 0.5s;
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    visibility: hidden;
    overflow-x: hidden;
}

#search-portal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: env(safe-area-inset-top, 0px);
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s ease, visibility 0.5s;
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    visibility: hidden;
}

.user-portal-bg,
.search-portal-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    opacity: 0.3;
    filter: blur(10px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 55%, transparent 100%);
    display: none;
    pointer-events: none;
}

.user-portal-bg.visible,
.search-portal-bg.visible {
    display: block;
}

#search-portal-bg-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

#user-portal.visible,
#search-portal.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

#user-portal.hidden,
#search-portal.hidden {
    display: none !important;
}

#user-portal:not(.hidden),
#search-portal:not(.hidden) {
    display: flex;
}

.portal-header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0 20px;
    margin-top: env(safe-area-inset-top, 0px);
    box-sizing: border-box;
}

.portal-header .back-button {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.portal-header .back-button img {
    width: 18px;
    height: 18px;
    transform: rotate(180deg);
    filter: brightness(0) invert(1);
}

.portal-title {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: white;
    pointer-events: none;
}

.portal-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 20px 40px;
    box-sizing: border-box;
    scrollbar-width: none;
}

/* --- 搜索中心页面特有样式 --- */
#search-portal-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    transition: height 0.3s ease;
    padding-top: env(safe-area-inset-top, 0px);
}

#search-portal.scrolled #search-portal-header-bg {
    height: calc(92px + env(safe-area-inset-top, 0px));
}

#search-portal .portal-header {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 90%;
    height: 32px;
    margin-left: -45%;
    z-index: 2001;
    display: flex;
    align-items: center;
    padding: 0;
}

#search-portal .search-wrapper {
    position: absolute;
    left: 50%;
    width: 100%;
    height: 50px;
    top: -10px;
    transform: translateX(-50%);
    margin-left: 0;
    z-index: 2001;
    transition: none;
}


#search-portal #search-background {
    width: 100%;
    height: 50px;
    padding: 0 15px 0 40px;
    border-radius: 10px; /* 与榜单圆角一致 */
    background-color: rgba(255, 255, 255, 0.05);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

#search-portal .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

#search-portal #search-input {
    height: 100%;
    width: 100%;
    font-size: 14px;
    padding: 0;
    background: transparent;
    border: none;
    color: white;
    outline: none;
}

#search-portal .portal-content {
    padding-top: 90px;
}

/* --- 登录容器（222风格） --- */
.login-vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events: none;
}

#user-portal .login-overlay {
    display: none;
}

.login-brand {
    text-align: center;
    margin-bottom: 32px;
    animation: loginFadeIn 1.2s ease-out;
}

.login-brand-logo {
    width: 56px;
    height: 56px;
    filter: drop-shadow(0 4px 20px rgba(255, 140, 0, 0.2));
    transition: filter 0.5s ease;
}

.login-brand-title {
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 6px;
    text-indent: 6px;
    color: #ffffff;
    margin-top: 14px;
    transition: all 0.4s ease;
}

.login-brand-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 3px;
    margin-top: 6px;
    transition: all 0.4s ease;
}

.login-card {
    margin-top: 30px;
    width: 100%;
    padding: 0;
    text-align: center;
    animation: loginFadeIn 1.2s ease-out;
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.login-card .brand h1 {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.8em;
    text-indent: 0.8em;
    color: #ffffff;
    opacity: 0.9;
}

.login-card .form-group {
    margin-bottom: 12px;
}

#loginForm {
    width: 100%;
}

.login-card .form-group input {
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.login-card .form-group input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.2em;
}

.login-card .form-group input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.login-card .btn.login-button {
    width: 100%;
    height: 50px;
    margin-top: 24px;
    background: #ffffff;
    color: #000;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.6em;
    text-indent: 0.6em;
    cursor: pointer;
    transition: all 0.35s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card .btn.login-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.05);
}

.login-card .btn.login-button:active {
    transform: translateY(0);
}

.login-card .btn.login-button.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.login-card .error-message {
    width: 100%;
    font-size: 12px;
    color: red;
    text-align: center;
    margin-top: 10px;
}

.login-footer {
    position: absolute;
    bottom: 40px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

@keyframes loginFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 用户信息面板 --- */
#user-info-container {
    position: relative;
    z-index: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    box-sizing: border-box;
}

#user-info-container.visible {
    display: flex !important;
}

/* 用户中心背景图：当前播放专辑封面，登录时隐藏 */
#user-portal-bg-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 用户中心内容容器：登录后用户信息 top 50vw */
#user-portal .portal-content {
    position: relative;
    z-index: 2;
    padding: 0 24px 10vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 100%;
    box-sizing: border-box;
    padding-top: 10vw;
}

#user-portal .portal-content.login-mode {
    justify-content: center;
    align-items: stretch;
    padding-top: 0;
}

/* 登录页面底部网址 */
.login-website {
    text-align: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: 10px;
    letter-spacing: 2px;
    margin-top: auto;
    padding-bottom: 0;
}

/* 用户信息行：左头像右信息 */
.user-avatar-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
    margin: 0 auto 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.name-badge-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10vw;
}

#name {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1px;
    line-height: 1.2;
}

.badge-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vip-badge {
    height: 14px;
    object-fit: contain;
}

#stats-container {
    display: none;
    align-items: center;
    min-height: 84px;
    height: 84px;
    flex-shrink: 0;
    width: 100%;
    margin-bottom: 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    box-sizing: border-box;
}

#stats-container.visible {
    display: flex;
}

.stat-item {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.stat-value small {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 1px;
}

.stat-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

.stat-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
}

/* --- 用户操作按钮列表 --- */
.user-nav-list {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.user-nav-list.visible {
    display: flex;
}

.user-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    box-sizing: border-box;
    text-decoration: none;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.user-nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.8;
}

.nav-label {
    font-size: 14px;
    color: #A1A1A1;
}

.nav-arrow {
    width: 14px;
    height: 14px;
    opacity: 0.2;
}

.user-logout .nav-label {
    color: #FF453A;
}

/* --- 搜索区域 --- */
.search-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    background-color: transparent;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.search-wrapper.sticky {
    position: sticky;
    top: 0;
    z-index: 100;
}

#search-background {
    display: flex !important;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    cursor: text;
}

.search-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    opacity: 0.7;
}

#search-input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 8px;
    border: none !important;
    background-color: transparent !important;
    font-size: 14px;
    color: #FFFFFF !important;
    outline: none;
}

/* --- 搜索历史 --- */
.search-history-section {
    margin-bottom: 20px;
}

.search-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-left: 5px;
}

.search-history-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.search-history-delete {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 8px;
    transition: color 0.3s;
}

.search-history-delete:hover {
    color: #ffffff;
}

.search-history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: calc(3 * 36px + 20px);
    overflow: hidden;
}

.search-history-tag {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer;
}

.search-history-tag:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* --- 热门搜索标签 --- */
.hot-search-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
    padding-left: 5px;
}

.hot-search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.hot-tag-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    transition: 0.3s;
}

.hot-tag-item:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* --- 分类列表项 --- */
.category-scroll {
    width: 100%;
    background-color: transparent !important;
    border: none !important;
    flex-shrink: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

.category-section {
    margin-bottom: 20px;
}

.category-section:last-child {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 5px;
}

.section-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.2em;
    white-space: nowrap;
    text-transform: uppercase;
}

.section-line {
    flex-grow: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin-left: 15px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.category {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    height: 90px; 
    padding: 0 5px; 
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.03);
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category:active {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

.category.active {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: none;
}

.category:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.category:hover span {
    color: #ffffff !important;
}

.category span:first-of-type {
    font-size: 12px;
    color: #ffffff; 
}

.category img {
    width: 30px;
    height: 30px;
    margin-bottom: 8px;
    margin-right: 0 !important;
    opacity: 0.8;
}


/* =============================================================================
   15. 播放列表面板（#playlist-panel, .playlist-item 等）
   ============================================================================= */

#playlist-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 60%;
    height: calc(100% - 10px);
    overflow: hidden;
    background-color: transparent !important;
    border: none !important;
    will-change: transform;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

/* --- 当前播放项 --- */
.playlist-item.active-song {
    position: relative;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease;
}

body:not(.mode-9) .playlist-item.active-song .album-image {
    visibility: hidden !important;
    opacity: 0;
}

body:not(.mode-9).spectrum-off .playlist-item.active-song .album-image {
    visibility: visible !important;
    opacity: 1;
}

/* --- 可视化音量条 --- */
.iphone-bars-container {
    position: absolute;
    top: 50%;
    left: 30px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 28px;
    height: 40px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.iphone-bar {
    width: 3.2px;
    min-height: 3px;
    border-radius: 2px;
    background-color: #FFFFFF;
    transition: height 0.08s ease-out;
}

.playlist-item.active-song::after,
.playlist-item.active-song::before {
    content: none !important;
    display: none !important;
}

/* --- 播放列表滚动区域 --- */
#playlist-body {
    flex: 1;
    padding: 0 10px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#playlist-body::-webkit-scrollbar {
    display: none;
}

/* --- 播放列表单项 --- */
.playlist-item {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.03);
    color: #FFFFFF !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.playlist-item:active {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

.album-image {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    object-fit: cover;
}

.song-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    margin-left: 12px;
}

.song-title {
    font-size: 12px;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artist-name {
    margin-top: 3px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =============================================================================
   16. 更多选项面板（#gengduo）
   ============================================================================= */

#gengduo-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    visibility: hidden;
    padding-top: env(safe-area-inset-top, 0px);
}

#gengduo-overlay.show {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

#gengduo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out !important;
    touch-action: none;
    overflow: hidden;
}

#gengduo-overlay.show #gengduo {
    transform: translateY(0);
}

.gengduo-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.3;
    filter: blur(10px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 55%, transparent 100%);
    pointer-events: none;
}

#gengduo-bg-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.gengduo-scroll {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px calc(30px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gengduo-scroll::-webkit-scrollbar {
    display: none;
}

.gengduo-section {
    margin-bottom: 20px;
}

.gengduo-section .section-header {
    padding: 0;
}

.gengduo-settings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gengduo-setting-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    box-sizing: border-box;
    text-decoration: none;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.gengduo-setting-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.capsule-switch {
    position: relative;
    width: 51px;
    height: 31px;
    border-radius: 15.5px;
    background-color: rgba(255, 255, 255, 0.15);
    transition: background-color 0.3s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.capsule-switch.active {
    background-color: #34C759;
}

.capsule-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.capsule-switch.active .capsule-thumb {
    transform: translateX(20px);
}

.portal-spectrum-canvas {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 50%;
    pointer-events: none;
    opacity: 0.5;
    filter: blur(30px);
    transform: scale(1.05);
    display: none;
}

#gengduo-overlay.show .portal-spectrum-canvas,
#search-portal:not(.hidden) .portal-spectrum-canvas,
#user-portal:not(.hidden) .portal-spectrum-canvas,
#xiaoxi-list-wrapper.show .portal-spectrum-canvas,
#dm-chat-wrapper.show .portal-spectrum-canvas {
    display: block;
}

.mini-vinyl {
    position: fixed;
    top: 50%;
    z-index: 10010;
    display: none;
    touch-action: none;
    cursor: pointer;
    transform: translateY(-50%);
}

.mini-vinyl.visible {
    display: flex;
}

.mini-vinyl.snap-left {
    left: 0;
}

.mini-vinyl.snap-right {
    right: 0;
}

.mini-vinyl.dragging {
    left: 0;
    right: 0;
}

.mini-vinyl-capsule {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    width: 60px;
    border-radius: 0 27px 27px 0;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    transition: background-color 1s ease, width 0.2s ease, border-radius 0.2s ease;
}

.mini-vinyl.snap-left .mini-vinyl-capsule {
    width: 60px;
    border-radius: 0 27px 27px 0;
    padding: 0;
}

.mini-vinyl.snap-right .mini-vinyl-capsule {
    width: 60px;
    border-radius: 27px 0 0 27px;
    padding: 0;
    flex-direction: row-reverse;
}

.mini-vinyl.dragging .mini-vinyl-capsule {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    padding: 0;
}

.mini-vinyl-disc {
    position: relative;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.mini-vinyl.snap-left .mini-vinyl-disc {
    margin-left: 8px;
    margin-right: 2px;
}

.mini-vinyl.snap-right .mini-vinyl-disc {
    margin-left: 2px;
    margin-right: 8px;
}

.mini-vinyl.dragging .mini-vinyl-disc {
    margin: 2px;
}

.mini-vinyl-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.mini-vinyl-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    height: 62%;
    margin-top: -31%;
    margin-left: -31%;
    border-radius: 50%;
    object-fit: cover;
    z-index: 2;
}

.mini-vinyl.playing .mini-vinyl-cover {
    animation: miniVinylSpin 12s linear infinite;
}

.mini-vinyl:not(.playing) .mini-vinyl-cover {
    animation: none;
}

.mini-vinyl-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    z-index: 3;
    pointer-events: none;
    opacity: 0.9;
    filter: brightness(0) invert(1);
}

.mini-vinyl.playing .mini-vinyl-play-icon {
    opacity: 0;
}

@keyframes miniVinylSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes miniVinylSlideInLeft {
    from { transform: translateY(-50%) translateX(-100%); }
    to { transform: translateY(-50%) translateX(0); }
}

@keyframes miniVinylSlideInRight {
    from { transform: translateY(-50%) translateX(100%); }
    to { transform: translateY(-50%) translateX(0); }
}

@keyframes miniVinylSlideOutLeft {
    from { transform: translateY(-50%) translateX(0); }
    to { transform: translateY(-50%) translateX(-100%); }
}

@keyframes miniVinylSlideOutRight {
    from { transform: translateY(-50%) translateX(0); }
    to { transform: translateY(-50%) translateX(100%); }
}

.mini-vinyl.slide-in-left {
    animation: miniVinylSlideInLeft 0.3s ease-out forwards;
}

.mini-vinyl.slide-in-right {
    animation: miniVinylSlideInRight 0.3s ease-out forwards;
}

.mini-vinyl.slide-out-left {
    animation: miniVinylSlideOutLeft 0.3s ease-in forwards;
}

.mini-vinyl.slide-out-right {
    animation: miniVinylSlideOutRight 0.3s ease-in forwards;
}
/* =============================================================================
   17. 视频与全屏（#video-player, #fullscreen-container 等）
   ============================================================================= */

#video-player {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20%,
        black 30%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20%,
        black 30%,
        transparent 100%
    );
    animation: fadeInContainer 0.8s ease forwards;
}

#fullscreen-container {
    position: absolute !important;
    top: 5px;
    left: 0;
    z-index: 1;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: calc(100% - 10px);
    overflow: hidden;
    background-color: transparent !important;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 30%,
        black 50%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 30%,
        black 50%,
        transparent 100%
    );
    animation: fadeInContainer 0.8s ease forwards;
}

.fullscreen-image,
.fullscreen-video {
    position: absolute;
    left: 0;
    z-index: 2;
    width: 100vw;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: brightness(0.7);
    transition: opacity 1s ease-in-out, filter 0.5s ease;
}

.fullscreen-image.active,
.fullscreen-video.active {
    opacity: 1;
}


/* =============================================================================
   18. 启动屏（#splash-screen）
   ============================================================================= */

#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: #000000;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bg-ambient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 45%, rgba(255, 140, 0, 0.06) 0%, transparent 65%);
    z-index: 1;
}

#splash-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.5;
}

.splash-stage {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 70px;
}

.splash-logo-box {
    position: relative;
    opacity: 0;
    transform: scale(0.92);
    filter: blur(15px);
    animation: splashLogoEnter 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.splash-logo-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: #ff8c00;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.1;
    animation: splashAuraPulse 8s infinite ease-in-out;
}

.splash-logo-img {
    width: 155px;
    height: 155px;
    position: relative;
    z-index: 5;
    filter: drop-shadow(0 12px 30px rgba(255, 140, 0, 0.35));
    animation: splashLogoFloat 6s infinite ease-in-out;
}

.splash-brand-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: splashFadeInUp 2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s;
}

.splash-main-title {
    font-size: 34px;
    font-weight: 100;
    letter-spacing: 18px;
    margin-bottom: 12px;
    padding-left: 18px;
    color: rgba(255, 255, 255, 0.95);
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.splash-sub-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 4px;
    font-weight: 300;
}

.splash-scan-loader {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 35px 0 0;
    position: relative;
    overflow: hidden;
}

.splash-scan-bar {
    position: absolute;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #ff8c00, transparent);
    left: -40%;
    animation: splashScanMove 3.5s infinite ease-in-out;
}

.splash-footer {
    position: absolute;
    bottom: 40px;
    font-size: 9px;
    z-index: 10;
    letter-spacing: 1px;
}

.splash-footer a {
    color: rgba(255, 255, 255, 0.28);
    text-decoration: none;
}

@keyframes splashLogoEnter {
    to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes splashAuraPulse {
    0%, 100% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.18; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes splashLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes splashFadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes splashScanMove {
    to { left: 100%; }
}
/* =============================================================================
   19. 消息界面（#xiaoxi-list-wrapper, #dm-chat-wrapper 等）
   ============================================================================= */

#xiaoxi-list-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10002;
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding-top: env(safe-area-inset-top, 0px);
}

#xiaoxi-list-wrapper.show {
    display: flex;
    transform: translateX(0);
}

#xiaoxi-list-wrapper.hide {
    transform: translateX(100%);
}

#xiaoxi-list-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.3);
    flex-shrink: 0;
    position: relative;
}

#xiaoxi-list-back {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#xiaoxi-list-back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: invert(1);
}

#xiaoxi-list-title {
    font-size: 17px;
    font-weight: 600;
    color: #FFF;
}

#xiaoxi-list-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
}

.xiaoxi-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    font-size: 14px;
    color: rgba(255,255,255,0.4);
}

.xiaoxi-user-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.xiaoxi-user-item:active {
    background: rgba(255,255,255,0.08);
}

.xiaoxi-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin-right: 12px;
}

.xiaoxi-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.xiaoxi-avatar-offline {
    filter: grayscale(100%);
    opacity: 0.7;
}

.xiaoxi-unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #F44336;
    color: #FFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.msg-badge {
    position: absolute;
    right: 16px;
    top: 50%;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #F44336;
    color: #FFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
    transform: translateY(-50%);
    box-sizing: border-box;
}

.xiaoxi-user-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.xiaoxi-user-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.xiaoxi-username {
    font-size: 16px;
    font-weight: 500;
    color: #FFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xiaoxi-time {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    flex-shrink: 0;
    margin-left: 8px;
}

.xiaoxi-last-msg {
    font-size: 14px;
    color: rgba(255,255,255,0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.xiaoxi-last-msg .dm-msg-emoji {
    height: 16px;
    width: calc(16px * 128 / 92);
    vertical-align: middle;
}


#dm-chat-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10003;
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding-top: env(safe-area-inset-top, 0px);
}

#dm-chat-wrapper.show {
    display: flex;
    transform: translateX(0);
}

#dm-chat-wrapper.hide {
    transform: translateX(100%);
}

#dm-chat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.3);
    flex-shrink: 0;
    position: relative;
}

#dm-chat-back {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

#dm-chat-back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: invert(1);
}

#dm-chat-title {
    font-size: 17px;
    font-weight: 600;
    color: #FFF;
}

#dm-chat-messages {
    flex: 1;
    padding: 12px 16px;
    padding-bottom: 76px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
}

#dm-chat-input {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10004;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 76px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.5);
    transition: bottom 0.25s ease;
}

#dm-chat-input.emoji-active {
    bottom: 260px;
}

#dm-message-input {
    flex: 1;
    height: 40px;
    margin-left: 15px;
    margin-right: 5px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    background-color: rgba(255,255,255,0.1) !important;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
    box-sizing: border-box;
    resize: none;
    overflow-y: auto;
    outline: none;
}

#dm-message-input::placeholder {
    color: rgba(255,255,255,0.4);
}

#dm-message-input:focus {
    border-color: #07C160;
}


.dm-msg {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
}

.dm-msg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.dm-msg-mine {
    justify-content: flex-end;
}

.dm-msg-content {
    max-width: 65%;
    margin: 0 10px;
}

.dm-msg-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.dm-msg-other .dm-msg-bubble {
    background: rgba(255,255,255,0.12);
    color: #FFF;
    border-top-left-radius: 4px;
}

.dm-msg-mine .dm-msg-bubble {
    background: #07C160;
    color: #FFF;
    border-top-right-radius: 4px;
}

.dm-msg-time {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    gap: 4px;
}

.dm-msg-mine .dm-msg-time {
    text-align: right;
    justify-content: flex-end;
}

.dm-msg-read-status {
    font-size: 11px;
    white-space: nowrap;
}

.dm-msg-read-status.unread {
    color: rgba(255,255,255,0.35);
}

.dm-msg-read-status.read {
    color: #07C160;
}

.dm-chat-typing {
    font-size: 13px;
    color: #07C160;
    font-weight: 400;
    white-space: nowrap;
}

.xiaoxi-playing {
    color: #07C160;
}

#dm-emoji-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dm-emoji-btn img {
    width: 28px;
    height: 28px;
}

#dm-emoji-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 260px;
    z-index: 10003;
    background: rgba(30,30,30,0.95);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: none;
    flex-direction: column;
    box-sizing: border-box;
}

#dm-emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    padding: 8px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.dm-emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    box-sizing: border-box;
}

.dm-emoji-item:active {
    background: rgba(255,255,255,0.1);
}

.dm-emoji-item img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

#dm-emoji-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.3);
}

#dm-emoji-delete-btn, #dm-emoji-send-btn {
    padding: 6px 18px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

#dm-emoji-delete-btn {
    background: rgba(255,255,255,0.12);
    color: #FFF;
}

#dm-emoji-send-btn {
    background: #07C160;
    color: #FFF;
}

.dm-msg-emoji {
    height: 24px;
    width: calc(24px * 128 / 92);
    vertical-align: text-bottom;
    display: inline;
}

.xiaoxi-list-bg,
.dm-chat-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.3;
    filter: blur(10px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 55%, transparent 100%);
    display: none;
    pointer-events: none;
}

.xiaoxi-list-bg.visible,
.dm-chat-bg.visible {
    display: block;
}

#xiaoxi-list-bg-img,
#dm-chat-bg-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

#xiaoxi-list-header,
#xiaoxi-list-body,
#dm-chat-header,
#dm-chat-messages,
#dm-chat-input,
#dm-emoji-container {
    position: relative;
    z-index: 1;
}


/* =============================================================================
   20. 工具类（.fade-target, .no-transition, #rotate-warning 等）
   ============================================================================= */

.fade-target {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-out {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
}

.fade-in {
    opacity: 1;
    transform: scale(1);
}

.no-transition * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

#rotate-warning {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: none;
    width: 100vw;
    height: 100svh;
    background: #000000;
    font-size: 18px;
    color: white;
    text-align: center;
    line-height: 100svh;
}



/* =============================================================================
   22. 同频（Together）
   ============================================================================= */

/* --- gengduo「同频」按钮（嵌入third-row，与其他按钮同宽） --- */
/* 无需额外样式，继承 .icon-container 即可 */

/* --- yangshi 同频模式扩展 --- */
#yangshi.ys-together-mode {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ys-together {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.ys-avatar-wrap {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 0.6px solid white;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ys-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* 等待中的虚线占位头像 */
.ys-avatar-wrap.ys-avatar-ghost {
    border-style: dashed;
    border-color: rgba(255,255,255,0.4);
    gap: 2px;
}
.ys-avatar-wrap.ys-avatar-ghost span {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    animation: ys-ghost-pulse 1.2s ease-in-out infinite;
}
.ys-avatar-wrap.ys-avatar-ghost span:nth-child(2) { animation-delay: 0.2s; }
.ys-avatar-wrap.ys-avatar-ghost span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ys-ghost-pulse {
    0%,100% { opacity:0.3; transform:scale(0.8); }
    50%      { opacity:1;   transform:scale(1.2); }
}
.ys-together-text {
    font-size: 10px;
    color: #DCDCDC;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- 底部抽屉遮罩 --- */
#together-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
#together-drawer.show {
    opacity: 1;
    pointer-events: auto;
}

/* --- 同频抽屉内容卡片 --- */
#together-drawer-inner {
    position: relative;
    width: 100%;
    height: 430px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 0px;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform 0.3s ease-out !important;
    overflow: hidden;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
    #together-drawer-inner {
        height: 470px;
    }
}
#together-drawer.show #together-drawer-inner {
    transform: translateY(0);
}

/* --- 首页和加入视图半高样式 */
.td-half-height {
    height: 200px !important;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
    .td-half-height {
        height: 200px !important;
    }
}

/* 顶部拖动把手 */
#together-drawer-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    margin: 10px auto 0;
    flex-shrink: 0;
}

/* 抽屉头部 */
.together-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.together-drawer-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.together-drawer-close {
    font-size: 16px;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 10px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.together-drawer-close:active { background: rgba(255,255,255,0.1); }

/* 抽屉body可滚动 */
#together-drawer-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}
#together-drawer-body::-webkit-scrollbar { width: 3px; }
#together-drawer-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* --- 首页视图 --- */
.td-home {
    padding: 30px 0 20px; /* 顶部间距调整为 30px */
    display: flex;
    flex-direction: column;
}

/* 整体结构 */
.td-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1;
    overflow: hidden; /* 改为 hidden，让内部容器滚动 */
}


/* 验证码输入容器 */
.td-code-slots {
    display: flex;
    flex: 1;             /* 关键：自动伸展，填满除按钮外的空间 */
    justify-content: space-between; 
    align-items: center;
    height: 80px;        /* 统一高度 */
    margin-top: 0;       /* 移除之前的 margin-top */
}

/* 验证码和按钮同一行 */
.td-code-input-row {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    height: 80px;
    /* 关键：水平间距 12px */
    gap: 0px; 
    box-sizing: border-box;
}

/* 单个输入框 */
.td-code-slot {
    width: 50px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 32px;
    font-family: monospace;
    font-weight: 700;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    color: #fff;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* 输入框聚焦 */
.td-code-slot:focus {
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 10px rgba(255,255,255,0.08);
}

/* 按钮通用 */
.td-main-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* 主按钮（进入房间） */
.td-full-btn {
    width: 100px;
    height: 60px;
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
    font-weight: 600;
}

/* 创建房间按钮 */
.td-create-btn {
    width: 90%;
    height: 60px;
    margin-top: 0; 
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== 在线房间列表样式 ========== */
.td-online-rooms-container {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto;
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
}

.td-online-rooms-container::-webkit-scrollbar { width: 3px; }
.td-online-rooms-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

.td-no-rooms-tip {
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 40px 0;
    font-size: 14px;
}

.td-online-room-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #FFFFFF !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
}

.td-online-room-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.td-online-room-item:active {
    background-color: rgba(255, 255, 255, 0.15);
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

.td-room-left {
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
}

.td-room-avatar {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.td-room-info {
    flex: 1;
    overflow: hidden;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.td-room-title {
    color: #FFFFFF;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.td-room-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 按钮按压效果 */
.td-main-btn:active {

    transform: scale(0.97);

    background: rgba(255,255,255,0.16);
}

/* 修改图标颜色和间距 */
.td-btn-icon {
    font-size: 22px;            /* 调整图标大小 */
    color: #FFFFFF;             /* 设置为纯白色 */
    margin-right: 5px;         /* 在图标和“创建同频”文字之间增加 12px 的间距 */
    line-height: 1;             /* 确保高度居中 */
    display: inline-flex;       /* 更好的对齐控制 */
    align-items: center;
}


/* --- 等待配对视图 --- */
.td-waiting {
    padding: 0 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- 双头像行（等待 / 同频中复用） --- */
.td-duo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin-bottom: 18px;
}
.td-duo-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.td-duo-avatar {
    width: 52px;
    height: 52px;
    border-radius: 0;
    object-fit: cover;
    border: none;
}
/* 等待中的占位头像 */
div.td-duo-avatar.td-avatar-ghost {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
div.td-duo-avatar.td-avatar-ghost span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    animation: td-ghost-pulse 1.2s ease-in-out infinite;
}
div.td-duo-avatar.td-avatar-ghost span:nth-child(2) { animation-delay: 0.2s; }
div.td-duo-avatar.td-avatar-ghost span:nth-child(3) { animation-delay: 0.4s; }
@keyframes td-ghost-pulse {
    0%,100% { opacity:0.2; transform:scale(0.7); }
    50%      { opacity:1;   transform:scale(1.2); }
}
.td-duo-name {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-name-dim { color: rgba(255,255,255,0.3); }
.td-duo-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 0 10px;
}
.td-duo-label {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
}
.td-label-active {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.td-duration {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    font-family: monospace;
}

/* 多人头像容器 */
.td-avatars-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 0;
}

.td-participant-avatar {
    position: relative;
}

.td-participant-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 0;
    object-fit: cover;
    border: none;
    box-shadow: none;
}

/* 等待动画 */
.td-waiting-dots { display:flex; gap:8px; margin:12px 0 18px; }
.td-waiting-dots span {
    width:7px; height:7px; border-radius:50%;
    background: rgba(255,255,255,0.35);
    animation: td-pulse 1.2s ease-in-out infinite;
}
.td-waiting-dots span:nth-child(2) { animation-delay:0.2s; }
.td-waiting-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes td-pulse {
    0%,100% { opacity:0.25; transform:scale(0.8); }
    50%      { opacity:1;   transform:scale(1.2); }
}

/* 邀请码展示 */
.td-code-label {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin: 0 0 8px;
    text-align: center;
}
.td-code-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    white-space: nowrap;
}
.td-code-display.td-code-waiting {
    padding: 10px 20px;
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    margin-bottom: 12px;
}
#td-code-text {
    font-size: 36px;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 8px;
    color: #fff;
}
.td-copy-btn {
    padding: 5px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.td-copy-btn:active { background: rgba(255,255,255,0.15); }

/* 危险按钮（取消/退出） */
.td-danger-btn {
    margin-top: 10px;
    padding: 10px 28px;
    border: 1px solid rgba(255,80,80,0.3);
    border-radius: 8px;
    background: rgba(255,60,60,0.07);
    color: rgba(255,100,100,0.9);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.td-danger-btn:active { background: rgba(255,60,60,0.18); }

/* --- 加入视图 --- */
.td-join-view {
    padding: 0 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.td-code-input-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 确保两端对齐 */
    gap: 12px;           /* 验证码和按钮之间的间距 */
    width: 90%;          /* 关键：设置为 90% */
    margin: 0 auto;      /* 居中 */
    height: 80px;        /* 统一高度 */
}

.td-code-input {
    width: 160px;
    text-align: center;
    font-size: 36px;
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 8px;
    padding: 12px 8px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: #fff;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.td-code-input:focus { border-color: rgba(255,255,255,0.4); }
.td-code-input::-webkit-inner-spin-button,
.td-code-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.td-code-input-row .td-main-btn {
    flex: none;
    padding: 12px 20px;
    flex-direction: row;
}

/* --- 同频中视图 --- */
.td-active {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.td-header-section {

    padding: 12px 5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 60px;
}
.td-avatars-container {
    display: flex;
}
.td-participant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 0;
    overflow: hidden;
}
.td-participant-avatar img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}
.td-header-left {
    flex: 1;
    text-align: left;
}
.td-switch-container {
    display: flex;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 2px;
}
.td-switch-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s;
}
.td-switch-btn:active {
    background: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
}
.td-room-code-btn {
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    font-weight: normal;
}
.td-header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}
.td-header-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
}
.td-more-btn {
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.td-more-menu {
    position: absolute;
    top: 40px;
    right: 0;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 0;
    z-index: 1000;
    min-width: 120px;
}
.td-menu-item {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.td-menu-item:active {
    background: rgba(255,255,255,0.1);
}
.td-danger-menu-item {
    color: rgba(255,100,100,0.9);
}
.td-info-section {
    padding: 0 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.td-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.td-role-badge {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
}
.td-role-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
}
.td-code-row {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    margin-bottom: 6px;
}
.td-code-small {
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.6);
}

/* 分隔线 */
.td-divider {
    height: 1px;
    background: rgba(255,255,255,0.08);
    flex-shrink: 0;
    margin: 0;
}

/* --- 聊天区（占满剩余空间） --- */
.td-chat-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}
.td-chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}
.td-chat-msgs::-webkit-scrollbar { width: 3px; }
.td-chat-msgs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* 聊天消息卡片样式 - 与歌单一致 */
.td-chat-msgs .td-playlist-item {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #FFFFFF !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: calc(100% - 10vw);
}

.td-chat-msgs .td-playlist-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.td-chat-msgs .td-playlist-item:active {
    background-color: rgba(255, 255, 255, 0.05);
    transform: none;
    transition: none;
}

.td-chat-marquee-container {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    margin-top: 3px;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.td-chat-marquee-text {
    display: inline-block;
    flex: none;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.2;
    color: #FFFFFF;
    white-space: nowrap;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    will-change: transform;
    transform: translateZ(0);
}

.td-chat-marquee-text::after {
    content: "";
    display: inline-block;
    visibility: hidden;
    width: 20px;
    height: 1px;
}

.td-chat-marquee-text.scroll {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.td-chat-membership-icon {
    width: auto;
    height: 16px;
    vertical-align: middle;
}

/* 聊天输入行 */
.td-chat-input-row {
    display: flex;
    gap: 0;
    padding: 0 5vw;
    flex-shrink: 0;
    height: 80px;
    align-items: center;
    justify-content: center;
    width: 90%;
    position: relative;
}
.td-chat-input-row::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    z-index: 0;
}
.td-chat-input {
    width: 90%;
    padding: 8px 45px 8px 20px;
    border-radius: 20px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 13px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* 禁用浏览器自动填充 */
    -webkit-text-security: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    height: 40px;
    box-sizing: border-box;
    width: 90%;
    position: relative;
    z-index: 1;
}
/* 禁用 Chrome/Safari 的自动填充背景色 */
.td-chat-input:-webkit-autofill,
.td-chat-input:-webkit-autofill:hover,
.td-chat-input:-webkit-autofill:focus,
.td-chat-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgba(255,255,255,0.05) inset !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}
.td-chat-input::placeholder { color: rgba(255,255,255,0.22); }
.td-toggle-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 6px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.td-toggle-btn:active { background: rgba(255,255,255,0.1); }
.td-chat-send {
    padding: 8px 14px;
    border-radius: 20px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.td-chat-send:active { background: rgba(255,255,255,0.2); }
.td-emoji-btn {
    padding: 0;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.td-emoji-btn:active { background: transparent; }
.td-emoji-btn img {
    width: 30px;
    height: 30px;
}
.td-emoji-container {
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background-color: #F2F2F2;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}
.td-emoji-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    overflow-y: auto;
    padding-bottom: 60px;
    width: 100%;
    box-sizing: border-box;
    max-height: 300px;
}
.td-emoji-item {
    text-align: center;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.td-emoji-item:active {
    background: rgba(255,255,255,0.1);
}
.td-emoji-item img {
    width: 100%;
    max-width: 40px;
    height: auto;
    aspect-ratio: 128 / 92;
    object-fit: contain;
}
.td-msg-emoji {
    width: 24px;
    height: auto;
    aspect-ratio: 128 / 92;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}
.td-emoji-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 10px;
    right: 14px;
    z-index: 10;
}
.td-emoji-delete-btn,
.td-emoji-send-btn {
    padding: 8px 24px;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.td-emoji-delete-btn {
    background: #888888;
    color: #fff;
}
.td-emoji-send-btn {
    background: #007aff;
    color: #fff;
}
.td-emoji-delete-btn:active,
.td-emoji-send-btn:active {
    opacity: 0.7;
}

/* =============================================================================
   同频（Together）样式
   ============================================================================= */

/* ---------- yangshi 同频激活态 ---------- */
#yangshi.colisten-active-bar {
    cursor: pointer;
}
#yangshi.colisten-pulse {
    animation: yangshi-colisten-pulse 0.6s ease;
}
@keyframes yangshi-colisten-pulse {
    0%   { opacity: 0.6; }
    50%  { opacity: 1;   }
    100% { opacity: 0.6; }
}

/* ---------- 同频聊天中歌曲信息卡片样式 ---------- */
.td-song-bubble {
    max-width: 60vw !important;
    cursor: pointer;
    transition: background 0.2s;
}
.td-song-bubble:active {
    background: rgba(255,255,255,0.2) !important;
}
.td-song-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: transparent;
}
.td-song-cover {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}
.td-song-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    flex: 1;
}
.td-song-title, .td-song-artist {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.td-song-title::after {
    content: ' - ';
}

/* 点歌台样式 */
.td-playlist-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

.td-playlist-body {
    padding: 8px 0;
}

.td-playlist-item {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #FFFFFF !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: calc(100% - 10vw);
}

.td-playlist-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.td-playlist-item:active {
    background-color: rgba(255, 255, 255, 0.15);
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

.td-playlist-item.active-song {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    position: relative;
}

body:not(.mode-9) .td-playlist-item.active-song img[alt]:not([alt="点赞"]):not([alt="收藏"]) {
    visibility: hidden !important;
    opacity: 0;
}

body:not(.mode-9).spectrum-off .td-playlist-item.active-song img[alt]:not([alt="点赞"]):not([alt="收藏"]) {
    visibility: visible !important;
    opacity: 1;
}

.td-playlist-item .iphone-bars-container {
    position: absolute;
    top: 50%;
    left: 30px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 28px;
    height: 40px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

/* 同频模式下隐藏歌单栏高亮和频谱 */
.together-mode-active .playlist-item.active-song {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

.together-mode-active .playlist-item.active-song:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.together-mode-active .playlist-item.active-song:active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: scale(0.96) !important;
    transition: transform 0.1s ease !important;
}

.together-mode-active .playlist-item.active-song .album-image {
    visibility: visible !important;
    opacity: 1 !important;
}

.together-mode-active .playlist-item.active-song .iphone-bars-container {
    display: none !important;
}

.together-mode-active .playlist-item.active-song::after,
.together-mode-active .playlist-item.active-song::before {
    content: none !important;
    display: none !important;
}

/* 强制覆盖 body:not(.mode-9) 的样式 */
body.together-mode-active:not(.mode-9) .playlist-item.active-song .album-image {
    visibility: visible !important;
    opacity: 1 !important;
}

.td-playlist-controls {
    display: flex;
    gap: 8px;
}

.td-move-up-btn,
.td-remove-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.td-move-up-btn:hover,
.td-remove-btn:hover {
    background: rgba(255,255,255,0.1);
}

.td-move-up-btn:active,
.td-remove-btn:active {
    opacity: 0.7;
}

.td-remove-btn {
    color: rgba(255,100,100,0.8);
}

/* 标签页容器 */
.td-tabs-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    height: 80px;
    position: relative;
    border-bottom: none;
    width: 100%;
    box-sizing: border-box;
}

.td-tab-btn {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 15px;
    font-weight: 500;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    position: relative;
    flex: 0 0 auto;
}

.td-tab-btn:active {
    opacity: 0.7;
}

.td-tab-btn.active {
    color: #FFFFFF;
}

/* 页面容器 */
.td-pages-container {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

.td-page {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.3s ease-out;
}

/* 设置页面样式 */
.td-settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.td-settings-section {
    margin-bottom: 10px;
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
}

.td-settings-title {
    display: none;
}

.td-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 10px 20px 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
    height: 60px;
    box-sizing: border-box;
}

.td-settings-row:active {
    background-color: rgba(255, 255, 255, 0.08);
}

.td-ai-bot-label,
.td-notification-sound-label,
.td-notification-message-label,
.td-visual-sync-label,
.td-link-join-only-label {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

/* 微信风格开关选择器 */
.td-switch {
    width: 51px;
    height: 30px;
    background-color: #e5e5e5;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
    -webkit-tap-highlight-color: transparent;
    margin-right: -5px;
}

.td-switch.td-switch-on {
    background-color: #07c160;
}

.td-switch.td-switch-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.td-switch-knob {
    width: 26px;
    height: 26px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.td-switch.td-switch-on .td-switch-knob {
    transform: translateX(20px);
}

.td-copy-code-btn {
    display: none;
}

.td-settings-buttons {
    display: flex;
    gap: 0;
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
}

.td-settings-buttons .td-danger-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background-color: rgba(183, 28, 28, 0.15);
    color: #FFFFFF;
    margin-top: 0;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.td-settings-buttons .td-danger-btn:active {
    background-color: rgba(183, 28, 28, 0.2);
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

/* 在线用户容器样式 - 类似点歌台 */
.td-users-grid-container {
    width: 100%;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 20px 0px; 
    box-sizing: border-box;
}

.td-users-grid-container:active {
    background-color: rgba(255, 255, 255, 0.05);
    transform: none;
    transition: none;
}

/* 设置页面第一个区域的上边距调整 */
.td-settings-content .td-settings-section:first-child {
    margin-top: 0;
    margin-bottom: 10px;
}

/* 用户网格样式 - 5 列布局，自动换行 */
.td-users-grid {
    display: grid;
    grid-template-columns: repeat(5, 50px);
    justify-content: space-evenly; 
    width: 100%;
    row-gap: 10px;
}

.td-user-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
    flex-shrink: 0;
}

/* 移除之前所有的 calc margin 代码，由 space-evenly 自动接管 */

.td-user-placeholder {
    opacity: 0.3;
}

.td-user-placeholder .td-user-placeholder-img {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-sizing: border-box;
}

.td-user-grid-item img {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-sizing: border-box;
    object-fit: cover;
}

.td-user-name {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-top: 6px; /* 统一间距控制 */
}

.td-user-offline img {
    filter: grayscale(100%);
    opacity: 0.5;
}

.td-user-offline .td-user-name {
    color: rgba(255,255,255,0.3);
}

#td-page-chat,
#td-page-playlist,
#td-page-settings {
    display: flex;
    flex-direction: column;
}

/* =============================================================================
   23. 管理端（Admin Panel）
   ============================================================================= */

.admin-app {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    background: #000000;
    color: rgba(255, 255, 255, 0.9);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
}

.admin-app.hidden {
    display: none !important;
}

.admin-modal-overlay.hidden {
    display: none !important;
}

.admin-popup.hidden {
    display: none !important;
}

.admin-sidebar {
    width: 220px;
    min-width: 220px;
    background: #0a0a0a;
    border-right: 1px solid #1e1e1e;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.admin-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 18px;
    border-bottom: 1px solid #1e1e1e;
}

.admin-sidebar-logo {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 2px 8px rgba(255, 140, 0, 0.3));
}

.admin-sidebar-brand {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.9);
}

.admin-sidebar-nav {
    flex: 1;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: all 0.15s;
    font-size: 13px;
}

.admin-nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.admin-nav-item:hover {
    background: #1a1a1a;
    color: rgba(255, 255, 255, 0.9);
}

.admin-nav-item.active {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
}

.admin-sidebar-footer {
    padding: 14px 14px;
    border-top: 1px solid #1e1e1e;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.admin-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s;
}

.admin-info:hover { background: #1a1a1a; }

.admin-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.admin-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-name {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-level {
    font-size: 10px;
    color: #ff8c00;
}

.admin-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-top-bar {
    height: 56px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    border-bottom: 1px solid #1e1e1e;
    background: #0a0a0a;
}

.admin-top-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-page-title {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.9);
}

.admin-btn-back-site {
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    padding: 6px 14px;
    border: 1px solid #1e1e1e;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1px;
}

.admin-btn-back-site:hover {
    color: #ff8c00;
    border-color: #ff8c00;
}

.admin-mobile-admin-btn {
    display: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.admin-mobile-admin-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #2a2a2a;
}

.admin-mobile-nav {
    display: none;
}

.admin-page {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
    display: none;
    -webkit-overflow-scrolling: touch;
}

.admin-page.active { display: block; }

.admin-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.admin-stat-card {
    background: #111111;
    border: 1px solid #1e1e1e;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: border-color 0.2s;
}

.admin-stat-card:hover { border-color: #2a2a2a; }

.admin-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-stat-icon svg { width: 22px; height: 22px; }

.admin-songs-icon { background: rgba(255, 140, 0, 0.15); color: #ff8c00; }
.admin-users-icon { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.admin-plays-icon { background: rgba(46, 204, 113, 0.15); color: #2ecc71; }
.admin-online-icon { background: rgba(168, 85, 247, 0.15); color: #a855f7; }

.admin-stat-info {
    display: flex;
    flex-direction: column;
}

.admin-stat-value {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.5px;
    color: rgba(255, 255, 255, 0.9);
}

.admin-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 2px;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.admin-dashboard-section {
    background: #111111;
    border: 1px solid #1e1e1e;
    border-radius: 8px;
    padding: 20px;
}

.admin-section-title {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 16px;
    letter-spacing: 1px;
}

.admin-top-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #1e1e1e;
}

.admin-top-list-item:last-child { border-bottom: none; }

.admin-top-rank {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: #1a1a1a;
    color: rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}

.admin-top-rank.r1 { background: rgba(255, 140, 0, 0.15); color: #ff8c00; }
.admin-top-rank.r2 { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.admin-top-rank.r3 { background: rgba(46, 204, 113, 0.15); color: #2ecc71; }

.admin-top-info { flex: 1; min-width: 0; }

.admin-top-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.9);
}

.admin-top-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
}

.admin-top-value {
    font-size: 13px;
    color: #ff8c00;
    flex-shrink: 0;
}

.admin-msg-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.admin-msg-stat-item {
    text-align: center;
    padding: 16px;
    background: #1a1a1a;
    border-radius: 4px;
}

.admin-msg-stat-value {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.admin-msg-stat-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 4px;
}

.admin-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.admin-toolbar-left, .admin-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-search-input {
    padding: 8px 14px;
    background: #0d0d0d;
    border: 1px solid #1e1e1e;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    outline: none;
    width: 240px;
    transition: border-color 0.2s;
}

.admin-search-input:focus { border-color: #ff8c00; }
.admin-search-input::placeholder { color: rgba(255, 255, 255, 0.3); }

.admin-select-input {
    padding: 8px 12px;
    background: #0d0d0d;
    border: 1px solid #1e1e1e;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    outline: none;
    cursor: pointer;
}

.admin-select-input:focus { border-color: #ff8c00; }

.admin-btn-primary {
    width: 100%;
    padding: 12px;
    background: #ff8c00;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    letter-spacing: 4px;
}

.admin-btn-primary:hover { background: #ff9f2e; }
.admin-btn-primary:active { transform: scale(0.98); }

.admin-btn-secondary {
    padding: 8px 16px;
    background: #1a1a1a;
    border: 1px solid #1e1e1e;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.admin-btn-secondary:hover { border-color: #ff8c00; color: #ff8c00; }

.admin-btn-danger {
    padding: 8px 16px;
    background: rgba(231, 76, 60, 0.15);
    border: 1px solid transparent;
    border-radius: 4px;
    color: #e74c3c;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.admin-btn-danger:hover { background: #e74c3c; color: #fff; }
.admin-btn-danger.admin-btn-disabled { opacity: 0.4; pointer-events: none; }

.admin-table-wrapper {
    overflow-x: auto;
    border: 1px solid #1e1e1e;
    border-radius: 8px;
}

.admin-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-data-table th {
    background: #0a0a0a;
    padding: 10px 14px;
    text-align: left;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid #1e1e1e;
    position: sticky;
    top: 0;
    z-index: 1;
}

.admin-data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #1e1e1e;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.admin-data-table tr:hover td { background: #1a1a1a; }

.admin-data-table input[type="checkbox"] {
    accent-color: #ff8c00;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.admin-col-check { width: 40px; text-align: center; }
.admin-col-id { width: 60px; white-space: nowrap; }
.admin-col-avatar { width: 50px; }
.admin-col-username { min-width: 100px; white-space: nowrap; }
.admin-col-gender { width: 60px; white-space: nowrap; }
.admin-col-level { width: 100px; white-space: nowrap; }
.admin-col-time { min-width: 100px; white-space: nowrap; }
.admin-col-count { width: 80px; white-space: nowrap; }
.admin-col-active { min-width: 120px; white-space: nowrap; }
.admin-col-date { min-width: 100px; white-space: nowrap; }
.admin-col-title { min-width: 150px; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-col-artist { min-width: 100px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-col-tags { min-width: 150px; max-width: 250px; }
.admin-col-plays { width: 80px; white-space: nowrap; }
.admin-col-actions { width: 120px; white-space: nowrap; }
.admin-col-sender { min-width: 90px; white-space: nowrap; }
.admin-col-receiver { min-width: 90px; white-space: nowrap; }
.admin-col-message { min-width: 200px; max-width: 400px; }

.admin-user-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.admin-tag {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
    border-radius: 10px;
    font-size: 11px;
    margin: 1px 2px;
}

.admin-level-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.admin-level-admin { background: rgba(255, 140, 0, 0.15); color: #ff8c00; }
.admin-level-vip { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.admin-level-normal { background: #1a1a1a; color: rgba(255, 255, 255, 0.3); }

.admin-btn-action {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    margin-right: 4px;
}

.admin-btn-edit { background: rgba(255, 140, 0, 0.15); color: #ff8c00; }
.admin-btn-edit:hover { background: #ff8c00; color: #000; }
.admin-btn-del { background: rgba(231, 76, 60, 0.15); color: #e74c3c; }
.admin-btn-del:hover { background: #e74c3c; color: #fff; }

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
    padding-bottom: 10px;
}

.admin-page-btn {
    padding: 6px 12px;
    background: #111111;
    border: 1px solid #1e1e1e;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.admin-page-btn:hover { border-color: #ff8c00; color: #ff8c00; }
.admin-page-btn.active { background: rgba(255, 140, 0, 0.15); border-color: #ff8c00; color: #ff8c00; }
.admin-page-btn:disabled { opacity: 0.3; pointer-events: none; }

.admin-page-info {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin: 0 8px;
}

.admin-popup {
    position: fixed;
    bottom: 20px;
    left: 14px;
    width: 192px;
    background: #111111;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    z-index: 3100;
}

.admin-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1e1e1e;
}

.admin-popup-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.admin-popup-info {
    display: flex;
    flex-direction: column;
}

.admin-popup-name {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

.admin-popup-level {
    font-size: 11px;
    color: #ff8c00;
}

.admin-popup-back-site {
    display: none;
    width: 100%;
    padding: 8px;
    background: #1a1a1a;
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 8px;
}

.admin-popup-back-site:hover {
    color: #ff8c00;
    background: rgba(255, 140, 0, 0.15);
}

.admin-popup-logout {
    width: 100%;
    padding: 8px;
    background: rgba(231, 76, 60, 0.15);
    border: none;
    border-radius: 4px;
    color: #e74c3c;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}

.admin-popup-logout:hover { background: #e74c3c; color: #fff; }

.admin-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3200;
    backdrop-filter: blur(4px);
}

.admin-modal-box {
    width: 440px;
    max-width: 90vw;
    background: #111111;
    border: 1px solid #1e1e1e;
    border-radius: 12px;
    overflow: hidden;
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #1e1e1e;
}

.admin-modal-title {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
}

.admin-modal-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.admin-modal-close:hover { color: rgba(255, 255, 255, 0.9); }

.admin-modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.admin-form-group {
    margin-bottom: 16px;
}

.admin-form-label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.admin-form-input {
    width: 100%;
    padding: 10px 14px;
    background: #0d0d0d;
    border: 1px solid #1e1e1e;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.admin-form-input:focus { border-color: #ff8c00; }

.admin-form-select {
    width: 100%;
    padding: 10px 14px;
    background: #0d0d0d;
    border: 1px solid #1e1e1e;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.admin-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid #1e1e1e;
}

.admin-modal-footer .admin-btn-secondary,
.admin-modal-footer .admin-btn-primary {
    width: auto;
    padding: 8px 24px;
    letter-spacing: 1px;
}

.admin-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 3300;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-toast {
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    animation: adminToastIn 0.3s ease;
    min-width: 200px;
}

.admin-toast-success { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.3); }
.admin-toast-error { background: rgba(231, 76, 60, 0.15); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.3); }
.admin-toast-info { background: rgba(255, 140, 0, 0.15); color: #ff8c00; border: 1px solid rgba(255, 140, 0, 0.3); }

@keyframes adminToastIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

.admin-tag-checkboxes {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.admin-tag-group-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 8px;
    font-weight: 500;
}

.admin-tag-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.admin-tag-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #1a1a1a;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.admin-tag-checkbox input {
    width: 12px;
    height: 12px;
    accent-color: #ff8c00;
}

.admin-tag-checkbox:hover {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
}

.admin-confirm-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
}

.admin-confirm-highlight {
    color: #ff8c00;
    font-weight: 500;
}

.admin-msg-text {
    white-space: normal;
    word-break: break-all;
    max-width: 400px;
    line-height: 1.4;
}

.admin-popup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3099;
}

@media (max-width: 768px) {
    .admin-sidebar {
        display: none;
    }

    .admin-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid #1e1e1e;
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 3100;
    }

    .admin-mobile-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 12px 0 10px;
        color: rgba(255, 255, 255, 0.3);
        text-decoration: none;
        font-size: 10px;
        transition: color 0.15s;
        -webkit-tap-highlight-color: transparent;
    }

    .admin-mobile-nav-item svg {
        width: 22px;
        height: 22px;
    }

    .admin-mobile-nav-item.active {
        color: #ff8c00;
    }

    .admin-top-bar {
        padding: 0 16px;
        height: 48px;
        min-height: 48px;
    }

    .admin-page-title {
        font-size: 15px;
    }

    .admin-btn-back-site {
        display: none;
    }

    .admin-mobile-admin-btn {
        display: flex;
    }

    .admin-page {
        padding: 12px 14px;
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }

    .admin-stat-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .admin-stat-card {
        padding: 14px;
        gap: 10px;
    }

    .admin-stat-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .admin-stat-icon svg {
        width: 18px;
        height: 18px;
    }

    .admin-stat-value {
        font-size: 18px;
    }

    .admin-stat-label {
        font-size: 11px;
    }

    .admin-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .admin-dashboard-section {
        padding: 14px;
    }

    .admin-section-title {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .admin-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

    .admin-toolbar-left {
        width: 100%;
    }

    .admin-toolbar-right {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }

    .admin-search-input {
        width: 100%;
        flex: 1;
        min-width: 0;
        padding: 10px 14px;
        font-size: 16px;
    }

    .admin-btn-secondary {
        padding: 10px 16px;
        font-size: 13px;
    }

    .admin-select-input {
        padding: 8px 10px;
        font-size: 12px;
        flex: 1;
        min-width: 0;
    }

    .admin-btn-danger {
        padding: 8px 12px;
        font-size: 12px;
    }

    .admin-table-wrapper {
        border: none;
        background: transparent;
        overflow-x: visible;
    }

    .admin-data-table thead {
        display: none;
    }

    .admin-data-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        background: #111111;
        border: 1px solid #1e1e1e;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 14px;
        position: relative;
        align-items: center;
    }

    .admin-data-table tbody tr:hover td {
        background: transparent;
    }

    .admin-data-table tbody td {
        display: block;
        padding: 2px 0;
        border-bottom: none;
        white-space: normal;
        width: 100%;
    }

    .admin-data-table tbody td.admin-col-check {
        position: absolute;
        top: 14px;
        right: 14px;
        width: auto;
        text-align: right;
    }

    .admin-data-table tbody td.admin-col-id {
        display: none;
    }

    .admin-data-table tbody td.admin-col-title {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
        padding-right: 30px;
        padding-bottom: 2px;
        width: 100%;
    }

    .admin-data-table tbody td.admin-col-artist {
        color: rgba(255, 255, 255, 0.55);
        font-size: 13px;
        padding-bottom: 8px;
        width: 100%;
    }

    .admin-data-table tbody td.admin-col-artist::before {
        content: '歌手: ';
        color: rgba(255, 255, 255, 0.3);
        font-size: 11px;
    }

    .admin-data-table tbody td.admin-col-tags {
        padding-bottom: 8px;
        width: 100%;
    }

    .admin-data-table tbody td.admin-col-tags::before {
        content: '标签: ';
        color: rgba(255, 255, 255, 0.3);
        font-size: 11px;
    }

    .admin-data-table tbody td.admin-col-plays {
        flex: 0 0 auto;
        width: auto;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.3);
        padding-right: 12px;
    }

    .admin-data-table tbody td.admin-col-plays::before {
        content: '▶ ';
        color: #ff8c00;
        font-size: 10px;
    }

    .admin-data-table tbody td.admin-col-time {
        flex: 0 0 auto;
        width: auto;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.3);
    }

    .admin-data-table tbody td.admin-col-actions {
        width: 100%;
        padding-top: 10px;
        margin-top: 6px;
        border-top: 1px solid #1e1e1e;
    }

    .admin-data-table tbody td.admin-col-avatar {
        flex: 0 0 auto;
        width: auto;
        padding-right: 10px;
    }

    .admin-data-table tbody td.admin-col-avatar img {
        width: 36px;
        height: 36px;
    }

    .admin-data-table tbody td.admin-col-username {
        flex: 1;
        width: auto;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
        padding-right: 8px;
    }

    .admin-data-table tbody td.admin-col-level {
        flex: 0 0 auto;
        width: auto;
    }

    .admin-data-table tbody td.admin-col-gender {
        flex: 0 0 auto;
        width: auto;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.3);
        padding-right: 12px;
    }

    .admin-data-table tbody td.admin-col-count {
        flex: 0 0 auto;
        width: auto;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.3);
        padding-right: 12px;
    }

    .admin-data-table tbody td.admin-col-count::before {
        content: '登录';
        font-size: 11px;
        color: rgba(255, 255, 255, 0.3);
    }

    .admin-data-table tbody td.admin-col-active {
        flex: 0 0 auto;
        width: auto;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.3);
        padding-right: 12px;
    }

    .admin-data-table tbody td.admin-col-active::before {
        content: '活跃: ';
        font-size: 11px;
        color: rgba(255, 255, 255, 0.3);
    }

    .admin-data-table tbody td.admin-col-date {
        flex: 0 0 auto;
        width: auto;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.3);
    }

    .admin-data-table tbody td.admin-col-date::before {
        content: '注册: ';
        font-size: 11px;
        color: rgba(255, 255, 255, 0.3);
    }

    .admin-data-table tbody td.admin-col-sender {
        flex: 0 0 auto;
        width: auto;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
        padding-right: 30px;
    }

    .admin-data-table tbody td.admin-col-sender::after {
        content: ' → ';
        color: rgba(255, 255, 255, 0.3);
        font-weight: 300;
    }

    .admin-data-table tbody td.admin-col-receiver {
        flex: 1;
        width: auto;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
        padding-right: 30px;
    }

    .admin-data-table tbody td.admin-col-message {
        padding: 8px 0;
        color: rgba(255, 255, 255, 0.55);
        font-size: 13px;
        line-height: 1.5;
    }

    .admin-msg-text {
        max-width: 100%;
    }

    .admin-popup {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: auto;
        margin-bottom: 0;
        border-radius: 16px 16px 0 0;
        padding: 20px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 30px rgba(0,0,0,0.5);
        z-index: 3200;
    }

    .admin-popup-back-site {
        display: block;
    }

    .admin-modal-box {
        width: 95vw;
        max-height: 85vh;
        border-radius: 12px;
    }

    .admin-modal-body {
        max-height: 55vh;
        padding: 16px;
    }

    .admin-modal-header {
        padding: 14px 16px;
    }

    .admin-modal-footer {
        padding: 12px 16px;
    }

    .admin-modal-footer .admin-btn-secondary,
    .admin-modal-footer .admin-btn-primary {
        padding: 10px 20px;
    }

    .admin-form-input, .admin-form-select {
        font-size: 16px;
        padding: 12px 14px;
    }

    .admin-toast-container {
        top: auto;
        bottom: calc(68px + env(safe-area-inset-bottom));
        right: 12px;
        left: 12px;
    }

    .admin-toast {
        min-width: auto;
        text-align: center;
    }

    .admin-pagination {
        flex-wrap: wrap;
        padding-bottom: 16px;
    }

    .admin-page-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .admin-msg-stats {
        grid-template-columns: 1fr !important;
    }

    .admin-msg-stat-item {
        padding: 12px;
    }

    .admin-msg-stat-value {
        font-size: 18px;
    }

    .admin-top-list-item {
        padding: 8px 0;
    }

    .admin-btn-action {
        padding: 6px 14px;
        font-size: 12px;
    }
}