/* =============================================================================
   目录
   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. 聊天界面（#chat-wrapper, #chat-messages 等）
   20. 工具类（.fade-target, .no-transition, #rotate-warning 等）
   21. 横屏媒体查询
   ============================================================================= */


/* =============================================================================
   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: 100vw;
    height: var(--fixed-vh);
    min-height: 100svh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow-x: hidden;
    background-color: #000000;
    will-change: background-color;
    transition: background-color 0.3s ease !important;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


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

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


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

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

@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: 20px;
    left: 50%;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 92px;
    height: 20px;
    padding: 0 10px 0 2px;
    gap: 4px;
    border-radius: 30px;
    background-color: #000;
    color: white;
    font-size: 12px;
    white-space: nowrap;
    box-sizing: border-box;
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.5s ease;
}

@media (display-mode: standalone), (display-mode: fullscreen), (standalone) {
    #yangshi {
        top: 10px !important;
    }
}

#yangshi .online-user {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 0.6px solid white;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
}

#yangshi .online-user img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center;
    transition: transform 0.3s ease;
}

#yangshi .online-user img.rotate-180 {
    transform: translate(-50%, -50%) rotate(180deg);
}

#yangshi .online-user img.rotate-0 {
    transform: translate(-50%, -50%) rotate(0deg);
}

#yangshi .online-user img.loading {
    animation: spin 0.8s linear infinite;
}

#yangshi .online-user .loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: yangshi-spin 0.8s linear infinite;
}

#yangshi .online-user.show-loading img {
    display: none;
}

#yangshi .online-user.show-loading .loading-spinner {
    display: block;
}

#yangshi span {
    flex-grow: 0;
    overflow: hidden;
    margin-left: 0;
    font-size: 10px;
    color: #DCDCDC;
    line-height: 20px;
    white-space: nowrap;
    text-align: center;
}


/* =============================================================================
   06. 圆点指示器（#hongdian, .dot）
   ============================================================================= */

#hongdian {
    position: absolute;
    top: 25px;
    left: 50%;
    z-index: 10;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: auto;
    height: auto;
    transform: translateX(-50%);
}

@media (display-mode: standalone), (display-mode: fullscreen), (standalone) {
    #hongdian {
        top: 15px !important;
    }
}

.dot {
    width: 5px;
    height: 5px;
    margin: 0 2px;
    border-radius: 50%;
}

/* .dot.a 与 .dot.c 颜色相同 */
.dot.a,
.dot.c {
    background-color: #FFFFFF;
}

.dot.b {
    background-color: #FF0000;
}


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

/* --- 容器 --- */
#title-quality {
    position: fixed;
    bottom: 130px;
    left: 10%;
    z-index: 20;
    width: 40%;
    overflow: hidden;
    text-align: left;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #title-quality {
        bottom: 180px !important;
    }
}

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

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

#song-title .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);
}

/* --- 歌手与音质 --- */
#artist-quality {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 5;
    width: auto;
    margin-left: 0;
    padding-right: 0;
}

#artist-quality.overflow {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#artist-quality::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 10;
    width: 12px;
    height: 12px;
    background: url('/元件/搜索.png') no-repeat center center;
    background-size: contain;
    transform: translateY(-50%);
    pointer-events: none;
}

/* --- 歌手名称 --- */
#artist-name {
    position: relative;
    display: inline-block;
    z-index: 5;
    overflow: hidden;
    font-size: 12px;
    font-weight: normal;
    color: #dcdcdc;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 0;
}

#artist-name.marquee-container {
    display: inline-flex;
    align-items: center;
    width: auto;
    overflow: hidden;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

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

#artist-quality.overflow #artist-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    margin-right: 21px;
    padding-right: 0;
}

/* --- 跑马灯工具类 --- */
.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::after {
    content: "";
    display: inline-block;
    visibility: hidden;
    width: 20px;
    height: 1px;
}

.marquee-text.scroll {
    animation: marquee linear infinite;
}


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

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

/* --- 封面容器 --- */
#cover-container,
#cover-container2 {
    position: absolute;
    top: 55px;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(75vw, calc(var(--fixed-vh) * 0.4));
    height: min(75vw, calc(var(--fixed-vh) * 0.4));
    margin-left: calc(-1 * (min(75vw, var(--fixed-vh) * 0.4) / 2));
    transition: transform 0.5s ease, opacity 0.5s ease;
}

@media (display-mode: standalone), (display-mode: fullscreen), (standalone) {
    #cover-container,
    #cover-container2,
    #biankuang,
    #biankuang2 {
        top: 45px !important;
    }
}

.slide-left   { transform: translateX(-150%); opacity: 0; }
.slide-right  { transform: translateX(150%);  opacity: 0; }
.slide-center { transform: translateX(0);     opacity: 1; }

/* --- 封面图片 --- */
#cover-image,
#cover-image2 {
    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,
#overlay-image2,
#biankuang,
#biankuang2 {
    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: 55px;
    left: 50%;
    z-index: 2;
    width: min(75vw, calc(var(--fixed-vh) * 0.4));
    height: min(75vw, calc(var(--fixed-vh) * 0.4));
    margin-left: calc(-1 * (min(75vw, var(--fixed-vh) * 0.4) / 2));
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: none;
    transition: opacity 0.5s ease;
}

/* --- 收藏/操作容器 --- */
#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: fixed;
    top: 55px;
    left: 50%;
    z-index: 100;
    display: none;
    width: min(80vw, calc(var(--fixed-vh) * 0.4));
    height: min(80vw, calc(var(--fixed-vh) * 0.4));
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    transform: translateX(-50%);
}

/* --- 关闭与成绩按钮（共享属性） --- */
#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-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: 1;
    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: absolute;
    top: calc(55px + min(75vw, calc(var(--fixed-vh) * 0.4)));
    left: 50%;
    z-index: 200;
    display: block;
    width: 80%;
    height: calc(100% - (55px + min(75vw, calc(var(--fixed-vh) * 0.4))) - 175px);
    overflow: hidden;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: pointer;
}

/* 确保歌词容器能捕获点击事件（透明背景） */
#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;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #lyrics-container {
        height: calc(100% - (35px + min(75vw, calc(var(--fixed-vh) * 0.4))) - 220px) !important;
    }
}

.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;
}


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

#progress-container {
    position: absolute;
    bottom: 85px;
    left: 50%;
    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: 50%;
    left: 50%;
    z-index: 0;
    width: 100%;
    height: 20px;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.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: absolute;
    top: calc(100% - 165px);
    left: 50%;
    z-index: 999;
    width: 80%;
    height: 20px;
    box-sizing: border-box;
    transform: translateX(-50%);
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #wutubiao {
        top: calc(100% - 215px) !important;
    }
}

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

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

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


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

#controls {
    position: absolute;
    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;
}

@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: absolute;
    top: 10px;
    left: 0;
    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);
}

/* --- 登录容器 --- */
.login-container {
    position: relative;
    z-index: 10;
    width: 100%;
    min-height: 220px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    overflow: visible;
}

.login-container #loginForm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
    padding: 20px 15px;
    gap: 20px;
    box-sizing: border-box;
}

.login-container .input-group {
    display: flex;
    width: 100%;
    margin: 0 !important;
}

.login-container input {
    display: block;
    width: 100%;
    height: 40px !important;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05) !important;
    font-size: 13px;
    color: #FFFFFF !important;
    outline: none;
    box-sizing: border-box;
    margin: 0 !important;
}

.login-container button.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px !important;
    margin: 0 !important;
    border: none;
    border-radius: 10px;
    background-color: #4CAF50;
    font-size: 14px;
    font-weight: normal !important;
    color: white;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* 登录按钮加载状态 */
.login-container button.btn.loading {
    position: relative;
    pointer-events: none;
    background-color: #45a049;
}

/* 省略号动画 */
.loading-dots::after {
    content: '.';
    animation: dots 1.5s steps(4, end) infinite;
    display: inline-block;
    width: 0;
    overflow: hidden;
    vertical-align: bottom;
}

@keyframes dots {
    0%, 20% {
        content: '.';
        width: 0;
    }
    40% {
        content: '..';
        width: 0.5em;
    }
    60% {
        content: '...';
        width: 1em;
    }
    80%, 100% {
        content: '';
        width: 0;
    }
}

.login-container .error-message {
    position: absolute;
    bottom: -20px;
    width: 100%;
    font-size: 12px;
    color: red;
    text-align: center;
}

/* --- 用户信息面板 --- */
#user-info-container {
    position: relative;
    z-index: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 260px;
    margin-bottom: 10px;
    padding: 25px 5%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
}

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

#user-avatar {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
    border: none;
    border-radius: 10px;
    object-fit: cover;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

#name-container {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 20px;
}

#name {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

.membership-icon {
    width: auto;
    height: 16px;
}

#stats-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 260px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.stat-item .number {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

/* --- 搜索区域 --- */
.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-count-display {
    margin-left: auto;
    margin-right: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

/* --- 头部按钮（我的收藏、最近播放） --- */
#search-container {
    width: 100%;
    box-sizing: border-box;
}

#header {
    display: none !important;
    flex-direction: column !important;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box;
}

#header.visible {
    display: flex !important;
}

#my-favorites,
#recent-playlist,
#my-photo-album {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    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: pointer;
    outline: none;
    transition: all 0.3s ease;
}

#my-favorites:active,
#recent-playlist:active,
#my-photo-album:active {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

#my-favorites.active,
#recent-playlist.active,
#my-photo-album.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: none;
}

#header .button-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-left: 5px;
    margin-right: 20px;
    object-fit: contain;
}

#header button span:first-of-type {
    font-size: 14px;
    color: #FFFFFF !important;
}

#header button span:last-child {
    margin-left: auto;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

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

.category {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    font-size: 14px !important;
    font-family: inherit;
    color: #FFFFFF !important;
    box-sizing: border-box;
    cursor: pointer;
}

.category:active {
    background-color: rgba(255, 255, 255, 0.15);
    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.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: none;
}

.category span:first-of-type {
    font-size: 14px;
    color: #FFFFFF !important;
}

.category img {
    width: 28px;
    height: 28px;
    margin-right: 15px;
}

.category span:last-child {
    margin-left: auto;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

/* --- 退出登录按钮 --- */
body .button-container {
    display: none;
    align-items: center;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background-color: rgba(183, 28, 28, 0.15);
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: visible;
}

.button-container.visible {
    display: flex;
}

body .button-container:active {
    background-color: rgba(183, 28, 28, 0.2);
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

#tuichu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    outline: none;
    transform: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#tuichu img,
#tuichu .button-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-right: 15px;
    object-fit: contain;
}

#tuichu span {
    font-size: 14px;
    font-family: inherit;
    font-weight: normal;
    color: #FFFFFF;
    white-space: nowrap;
}


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

#playlist-panel {
    position: fixed;
    top: 10px;
    right: -60%;
    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: translateX(100%);
    transition: transform 0.3s ease;
}

/* --- 当前播放项 --- */
.playlist-item.active-song {
    position: relative;
    background-color: rgba(255, 255, 255, 0.15);
    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;
}

/* --- 可视化音量条 --- */
.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.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;
}

.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.1);
    border-radius: 4px;
    object-fit: cover;
}

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

.song-title {
    font-size: 14px;
    color: #FFFFFF !important;
    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;
    inset: 0;
    z-index: 2000;
    display: none;
    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;
}

#gengduo-overlay.show {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

#gengduo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 350px;
    padding-top: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: rgba(10, 10, 10, 0.85);
    transform: translateY(100%);
    transition: transform 0.3s ease-out !important;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    #gengduo {
        height: 370px;
    }
}

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

/* --- 当前播放卡片 --- */
#gengduo .top-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 90%;
    height: 80px;
    margin-top: 0;
    padding: 0 15px;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    overflow: hidden;
}

#frequency-canvas-gengduo {
    position: absolute;
    top: 40%;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;
    opacity: 0.9;
    filter: blur(10px);
    transform: scale(1.05);
}

#gengduo .top-container > div {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
    gap: 4px;
    background: transparent;
}

#left-image-container {
    align-items: flex-start;
}

#left-image-container img {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#text-container .title {
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.quality-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 3px;
}

#text-container .subtitle {
    margin: 0;
    margin-right: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

#quality-result,
#download-btn {
    padding: 0 5px;
    border: 0.8px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 13px;
}

/* --- 按钮行（共享属性） --- */
#gengduo .content-wrapper,
#gengduo .second-row,
#gengduo .third-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    gap: 10px;
}

#gengduo .content-wrapper { margin-top: 30px; }
#gengduo .second-row      { margin-top: 10px; }
#gengduo .third-row       { margin-top: 10px; }

/* --- 图标按钮 --- */
#gengduo .icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 80px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.3s ease;
}

#gengduo .icon-container img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

#gengduo .selector-label {
    margin-top: 10px;
    font-size: 12px;
    color: #FFFFFF;
    white-space: nowrap;
}

#gengduo .icon-container.active-btn {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}


/* =============================================================================
   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%;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
    background-color: #f35c0b;
    box-sizing: border-box;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

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

.splash-icon-container {
    position: absolute;
    top: 100px;
    left: 50%;
    z-index: 10000;
    width: 100%;
    pointer-events: none;
    text-align: center;
    transform: translateX(-50%);
}

.splash-icon {
    display: block;
    width: 50vw;
    max-width: 300px;
    max-height: 40vh;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.splash-text-container {
    position: absolute;
    bottom: 100px;
    left: 0;
    z-index: 10000;
    width: 100%;
    padding: 0 20px;
    pointer-events: none;
    text-align: center;
    box-sizing: border-box;
}

.splash-title {
    margin-bottom: 6px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.splash-subtitle {
    font-size: 14px;
    color: white;
    line-height: 1.2;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}


/* =============================================================================
   19. 聊天界面（#chat-wrapper, #chat-messages 等）
   ============================================================================= */

#chat-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f0f1f4;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

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

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

#online-users-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    border-bottom: 1px solid #eaeaea;
    background: #FAFAFA;
}

#online-users {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.online-user {
    position: relative;
    width: 40px;
    height: 40px;
    transition: left 0.3s ease;
}

.online-user img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

#online-count {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    color: #000;
    text-align: center;
}

#back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

#back-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#chat-messages {
    flex: 1;
    padding: 10px;
    padding-bottom: 76px;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    background-color: #FFFFFF;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

#chat-input {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 76px;
    border-top: 1px solid #eaeaea;
    background: #FAFAFA;
}

#message-input {
    flex: 1;
    height: 40px;
    margin-left: 15px;
    margin-right: 15px;
    padding: 8px;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    background-color: #EAEAEA !important;
    font-size: 14px;
    color: #000000;
    line-height: 20px;
    box-sizing: border-box;
    resize: none;
    overflow-y: auto;
}

#message-input::placeholder {
    color: #808080;
}

/* --- 消息列表项 --- */
.message-item {
    position: relative;
    min-height: 40px;
    margin: 0 10px 20px 10px;
    padding-left: 50px;
    box-sizing: border-box;
}

.avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.message-content {
    width: 100%;
    margin: 0;
    color: #333;
}

.username-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.username {
    display: inline-block;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: bold;
    color: #666;
}

.username-wrap .membership-icon {
    width: 46px;
    height: 14px;
    vertical-align: middle;
}

.timestamp {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: #666;
}

.text {
    width: 100%;
    margin: 0;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
}


/* =============================================================================
   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;
}


/* =============================================================================
   21. 横屏媒体查询
   ============================================================================= */

@media screen and (orientation: landscape) {

    /* --- 隐藏横屏不需要的元素 --- */
    #video-top-gradient,
    #video-bottom-gradient,
    #hongdian,
    #wutubiao {
        display: none !important;
    }

    /* --- 基础重置 --- */
    html,
    body {
        height: 100svh;
        margin: 0;
        padding: 0;
        overflow: hidden;
        overflow-x: hidden;
    }

    #player {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    /* --- 左侧区域：专辑封面（0–40vw） --- */

    #album-art {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 99999 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 40vw !important;
        height: 100% !important;
        overflow: visible !important;
        pointer-events: none !important;
        transform: none !important;
    }

    #cover-container {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        z-index: 4 !important;
        width: 40vw !important;
        height: auto;
        margin: 0 !important;
        transform: none;
    }

    #cover-container2 {
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        z-index: 3 !important;
        width: 40vw !important;
        height: auto;
        margin: 0 !important;
        transform: none;
    }

    #cover-image,
    #cover-image2 {
        width: 62% !important;
        height: auto !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    #overlay-image,
    #overlay-image2 {
        width: 100% !important;
        height: auto !important;
        border-radius: 50% !important;
    }

    #biankuang {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        z-index: 2 !important;
        width: 40vw !important;
        height: auto;
        margin: 0 !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        transform: translate(-50%, -50%) !important;
    }

    #background-layer {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: -10 !important;
        width: 40vw !important;
        height: 100svh !important;
    }

    #video-player {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: -1 !important;
        width: 40vw !important;
        height: 100svh !important;
    }

    #particle-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 0 !important;
        width: 40vw !important;
        height: 100svh !important;
    }

    /* --- 右侧区域：控制栏（45vw–100vw） --- */

    #lyrics-container {
        position: absolute;
        top: 40% !important;
        left: 45vw !important;
        z-index: 200;
        display: block;
        width: 55vw;
        height: 100px;
        padding: 0;
        overflow: hidden;
        transform: translateY(-50%);
    }

    .lyric-line {
        position: absolute;
        left: 0;
        width: 100%;
        height: 28px;
        margin: 0;
        padding: 0;
        font-size: 20px;
        font-weight: bold;
        line-height: 28px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0;
        transform-origin: left center;
        transform: translateY(10px);
        transition: top 0.6s cubic-bezier(0.33, 1, 0.68, 1),
                    font-size 0.6s ease,
                    opacity 0.6s ease,
                    transform 0.6s ease;
    }

    .current-lyric {
        top: 24px;
        z-index: 2;
        font-size: 20px;
        font-weight: bold;
        color: #FFFFFF;
        opacity: 1;
        transform: translateY(0);
    }

    .next-lyric {
        top: 52px;
        z-index: 1;
        font-size: 20px;
        font-weight: bold;
        color: #C0C0C0;
        opacity: 0.4;
        transform: translateY(0);
    }

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

    #container {
        position: absolute !important;
        top: 5vh !important;
        left: 45vw !important;
        z-index: 10 !important;
        width: 55vw !important;
        transform: none !important;
    }

    #title-quality {
        position: absolute !important;
        top: calc(50vh - 20vw) !important;
        left: 45vw !important;
        z-index: 20 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 55vw !important;
        bottom: auto !important;
        pointer-events: none !important;
        transform: none !important;
    }

    #title-quality * {
        pointer-events: auto !important;
    }

    #song-title {
        display: inline-flex !important;
        width: auto !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    #song-title::after {
        content: "-";
        display: inline-block;
        margin-left: -8px !important;
        margin-right: 8px !important;
        font-weight: normal;
        color: inherit;
    }

    #artist-quality {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        white-space: nowrap !important;
    }

    #artist-quality::after {
        content: none !important;
        display: none !important;
    }

    #progress-container {
        position: absolute !important;
        bottom: 22vh !important;
        left: 45vw !important;
        z-index: 1000 !important;
        width: 55vw !important;
        transform: none !important;
    }

    #progress-container #frequency-canvas {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        z-index: 0 !important;
        width: 100% !important;
        height: 20px !important;
        transform: translate(-50%, -50%) !important;
    }

    .banting {
        position: absolute !important;
        top: 40% !important;
        left: 45vw !important;
        z-index: 30 !important;
        width: 55vw !important;
        transform: translateY(-50%) !important;
    }

    #controls {
        position: absolute !important;
        bottom: 5vh !important;
        left: 45vw !important;
        z-index: 9999 !important;
        width: 55vw !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    /* 隐藏controls的第一个（分类）和最后一个（播放列表）子元素 */
    #controls > *:first-child,
    #controls > *:last-child {
        display: none !important;
    }
}



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

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

/* --- yangshi 同频模式扩展 --- */
#yangshi.ys-together-mode {
    width: auto !important;
    min-width: 110px;
    max-width: 200px;
    padding: 0 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#yangshi.ys-together-mode:active {
    background-color: rgba(255,255,255,0.1);
}
.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: 10px 20px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    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-code-display {
    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;
    white-space: nowrap;
    display: inline-block;
}
.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: marquee linear 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 {
    background: linear-gradient(135deg, rgba(100,40,200,0.92), rgba(160,100,240,0.88));
    cursor: pointer;
}
#yangshi.colisten-pulse {
    animation: yangshi-colisten-pulse 0.6s ease;
}
@keyframes yangshi-colisten-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(192,132,252,0.7); }
    50%  { box-shadow: 0 0 0 8px rgba(192,132,252,0);   }
    100% { box-shadow: 0 0 0 0   rgba(192,132,252,0);   }
}

/* ---------- 同频聊天中歌曲信息卡片样式 ---------- */
.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-switch-container {
    display: flex;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 2px;
}

.td-switch-btn {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

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

/* 更多菜单样式 */
.td-more-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(30,30,30,0.95);
    border-radius: 8px;
    padding: 8px;
    min-width: 120px;
    z-index: 100;
}

.td-menu-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    border-radius: 4px;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

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

.td-danger-menu-item {
    color: rgba(255,100,100,0.9);
}

.td-danger-menu-item:hover,
.td-danger-menu-item:active {
    background: rgba(255,100,100,0.1);
}

/* 点歌台样式 */
.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;
}

.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 {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

.td-notification-sound-label {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

.td-notification-message-label {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

.td-visual-sync-label {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

.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-playlist-body {
    flex: 1;
    overflow-y: auto;
}



/* ========== 同频畅聊页面 ========== */
#td-page-chat {
    display: flex;
    flex-direction: column;
}

/* 同频畅聊页面 - 消息列表容器 */
.td-chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 0px 0;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

/* ========== 同频歌单页面 ========== */
#td-page-playlist {
    display: flex;
    flex-direction: column;
}

/* 同频歌单页面 - 歌单列表容器 */
.td-playlist-body {
    padding: 0px 0;
}

/* ========== 房间设置页面 ========== */
#td-page-settings {
    display: flex;
    flex-direction: column;
}

/* 房间设置页面 - 设置内容容器 */
.td-settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 0px 0;
}