/**
 * Muse Music 主样式入口文件 (通过原生 @import 聚合模块化样式)
 */

/* 1. 设计系统 Tokens 与主题材质 */
@import url("tokens/theme.css");

/* 2. 基础规范与舞台排版 */
@import url("layout/base.css");
@import url("layout/stage.css");

/* 3. 核心功能组件 */
@import url("components/search.css");
@import url("components/player-stage.css");
@import url("components/controls.css");
@import url("components/modals.css");

/* 桌面端先藏移动端 UI：desktop.css 是 <head> 内联脚本动态挂的（不阻塞渲染），
   等它到之前移动端工具栏/音质按钮会先露出来闪一下。放进主样式（阻塞渲染、
   首屏就生效）；desktop-view 类由内联脚本在解析时同步加上，首帧即生效。
   desktop.css 里同一份规则留着当备份，不冲突。 */
html.desktop-view .mobile-status-bar,
html.desktop-view .mobile-toolbar,
html.desktop-view .mobile-panel-header,
html.desktop-view .mobile-overlay-scrim,
html.desktop-view .mobile-quality-chip,
html.desktop-view .mobile-close-btn,
html.desktop-view .mobile-turntable__tonearm,
html.desktop-view .mobile-turntable__label,
html.desktop-view .mobile-inline-lyrics {
    display: none;
}

/* ==========================================================================
   Muse Music 品牌覆盖：金色主色 + 赛博朋克点缀（2026-11-13 加码到看得见）
   金→青渐变字、霓虹角标、双色光晕按钮、面板折角、淡网格、渐变进度条；
   不改版式结构、不加扫描线/闪烁动画、不动深色/浅色默认
   ========================================================================== */

/* 品红霓虹 token（与 tokens 里的 --neon-cyan 配对） */
:root {
    --neon-magenta: #e879f9;
}

/* 页眉 LOGO：圆形头像 + 金色光晕 */
.header-logo-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(245, 197, 66, 0.85);
    box-shadow: 0 0 12px rgba(245, 197, 66, 0.45), 0 0 22px rgba(34, 211, 238, 0.14);
    flex-shrink: 0;
}

/* 品牌标题：金→青渐变字 + 淡淡霓虹辉光 */
.header-logo {
    background: linear-gradient(120deg, #8a6300 0%, var(--gold) 42%, var(--neon-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.35));
    position: relative;
}
.dark-mode .header-logo {
    background: linear-gradient(120deg, var(--gold) 5%, #ffe27a 45%, var(--neon-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
/* 霓虹渐变下划线：只在非小播放器模式（小播放器模式下标语在标题正下方，留空避免重叠） */
body:not(.layout-compact) .header-logo::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -5px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--neon-cyan), var(--neon-magenta));
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.55), 0 0 14px rgba(232, 121, 249, 0.3);
    pointer-events: none;
}

/* 主按钮：保存设置按钮保留切角 + 青/品红双色微光晕；搜索按钮已摘出，
   改回正常圆角、无青色光晕（用户反馈切角缺口和淡蓝圈看着怪）。 */
.save-settings-btn {
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 0 14px rgba(34, 211, 238, 0.28), 0 0 22px rgba(232, 121, 249, 0.16);
}
.save-settings-btn:hover {
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.65), 0 0 20px rgba(34, 211, 238, 0.45), 0 0 30px rgba(232, 121, 249, 0.28);
}

/* 搜索按钮：磨砂金字（只动 .search-btn，保存设置按钮保持实心金底）。
   和旁边“网易云音乐”下拉框、页眉磨砂小按钮一个路子，不再是实心金块。
   正常圆角 10px、无切角、无青色光晕，悬停只做本色加亮。 */
.search-btn {
    background: rgba(255, 255, 255, 0.55);
    color: #8a6300;
    border: 1px solid rgba(212, 160, 23, 0.5);
    border-radius: 10px;
    clip-path: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.search-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(212, 160, 23, 0.85);
    color: #8a6300;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.search-btn:disabled {
    background: rgba(255, 255, 255, 0.35);
    color: rgba(138, 99, 0, 0.55);
    border-color: rgba(212, 160, 23, 0.3);
    box-shadow: none;
}
.dark-mode .search-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #f5c542;
    border-color: rgba(245, 197, 66, 0.45);
}
.dark-mode .search-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(245, 197, 66, 0.8);
    color: #f5c542;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.dark-mode .search-btn:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(245, 197, 66, 0.5);
    border-color: rgba(245, 197, 66, 0.25);
}

/* 搜索区卡片：去掉四角青色折角装饰（.spotlight-card::after）。
   该装饰 inset 8px、z-index 3 盖在内容之上，搜索按钮贴着卡片右缘，
   其右上/右下角的青色折角正好压在按钮右上角/右下角、截断金色描边，
   右侧两条 2px 竖线则在按钮右侧形成青色竖线。其他面板的折角不动。 */
.search-area.spotlight-card::after {
    display: none;
}

/* 调试台标题：等宽字体点缀 */
.debug-info-title {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

/* 容器：很淡的霓虹网格底纹 + 一圈细霓虹描边（低透明度，不抢内容） */
.container {
    background-image:
        linear-gradient(rgba(34, 211, 238, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    box-shadow: var(--container-shadow), 0 0 0 1px rgba(34, 211, 238, 0.16), 0 0 28px rgba(34, 211, 238, 0.1);
}
.dark-mode .container {
    background-image:
        linear-gradient(rgba(34, 211, 238, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    box-shadow: var(--container-shadow), 0 0 0 1px rgba(34, 211, 238, 0.22), 0 0 32px rgba(34, 211, 238, 0.14);
}

/* 三块主面板（封面/播放列表/歌词）：四角霓虹折角装饰 */
.spotlight-card::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    background:
        linear-gradient(var(--neon-cyan), var(--neon-cyan)) left top / 18px 2px,
        linear-gradient(var(--neon-cyan), var(--neon-cyan)) left top / 2px 18px,
        linear-gradient(var(--neon-cyan), var(--neon-cyan)) right top / 18px 2px,
        linear-gradient(var(--neon-cyan), var(--neon-cyan)) right top / 2px 18px,
        linear-gradient(var(--neon-cyan), var(--neon-cyan)) left bottom / 18px 2px,
        linear-gradient(var(--neon-cyan), var(--neon-cyan)) left bottom / 2px 18px,
        linear-gradient(var(--neon-cyan), var(--neon-cyan)) right bottom / 18px 2px,
        linear-gradient(var(--neon-cyan), var(--neon-cyan)) right bottom / 2px 18px;
    background-repeat: no-repeat;
    opacity: 0.5;
    pointer-events: none;
    z-index: 3;
}

/* 进度条 / 音量条：金→青渐变填充 + 发光滑块 */
.progress-container input[type="range"] {
    background: linear-gradient(to right, var(--gold) 0%, var(--neon-cyan) var(--progress, 0%), rgba(255, 255, 255, 0.4) var(--progress, 0%), rgba(255, 255, 255, 0.15) 100%);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.35);
}
.volume-container input[type="range"] {
    background: linear-gradient(to right, var(--gold) 0%, var(--neon-cyan) var(--volume-progress, 80%), rgba(255, 255, 255, 0.2) var(--volume-progress, 80%), rgba(255, 255, 255, 0.1) 100%);
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.3);
}
input[type="range"]::-webkit-slider-thumb {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.6), 0 2px 8px rgba(0, 0, 0, 0.25);
}
input[type="range"]::-moz-range-thumb {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.6), 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* 修改密码弹窗：跟着现有主题走（金色主色、磨砂圆角） */
.change-password-field { display: block; margin-bottom: 12px; font-size: 14px; }
.change-password-field span { display: block; margin-bottom: 6px; color: var(--text-color); }
.change-password-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--apple-glass-border);
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-color);
    font-size: 14px;
}
.dark-mode .change-password-field input { background: rgba(255, 255, 255, 0.08); }
.change-password-field input:focus { outline: none; border-color: var(--primary-color); }
.change-password-error { color: #d43d2a; font-size: 13px; min-height: 18px; margin: 4px 0 0; }