/* ==========================================================
   ★ 全站字体：三个字体组成字体栈，前一个缺字自动往后补
     字体文件目录：F:\vc\10dj\fonts\
     访问路径：/fonts/xxx.ttf（app.js 需加 app.use('/fonts', ...) 托管）
   ========================================================== */
   @font-face {
    font-family: 'NanoTikBazHei';
    src: url('/fonts/NanoTikBazHei-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;   /* 字体未加载完先用系统字体顶上，不白屏 */
}
@font-face {
    font-family: 'KirakaraMaru';
    src: url('/fonts/KirakaraMaru_v1.1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'BlackSugarPlumCandy';
    src: url('/fonts/BlackSugarPlumCandy-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-body-bg: #0b0b0b;
    --color-topbar-bg: #080808;
    --color-nav-bg: #111111;
    --color-block-bg: #141414;
    --color-side-bg: #171717;
    --color-row-bg: #181818;
    --color-row-hover: #202020;
    --color-text: #ffffff;
    --color-text-gray: #aaaaaa;
    --color-theme-red: #e03030;
    --color-theme-blue: #2563eb;
    --color-border: #222222;

    /* =====【可自定义】导航栏底部线条颜色 =====
       想换颜色只改这一行即可，例如：
       红色 #e03030 / 蓝色 #2563eb / 绿色 #21a366 / 紫色 #6a3fb5
       当前：蓝色 */
    --color-nav-underline: #2563eb;

    --banner-height: 290px;
    --space-page: 20px;
    --font-main: 'NanoTikBazHei', 'KirakaraMaru', 'BlackSugarPlumCandy', system-ui, sans-serif;
    --font-size-base: 14px;

    --album-card-width: 160px;
    --album-card-height: 180px;
    --album-card-gap: 16px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* ★ 禁止手机浏览器「自动放大文字」
   手机浏览器（尤其 iOS 横屏、部分安卓）默认会自作聪明把文字放大一档，
   导致手机上看着比电脑上大一圈。这行锁死 100%，按我们设的字号原样渲染。 */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    background-color: var(--color-body-bg);
    color: var(--color-text);
}
/* ★ 表单元素默认不继承 body 字体，这里单独指定（只给字体，不动背景色） */
button, input, select, textarea {
    font-family: var(--font-main);
}

a {
    text-decoration: none;
    color: inherit;
}

/* ========== 顶部栏【外层全屏底色，内层1200px版心，左右边界对齐下方板块】 ========== */
.top-bar {
    width: 100%;
    background: var(--color-topbar-bg);
}
.top-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ★ 左侧站点标识：Logo图 + 网站名 横向排列（后台上传 Logo 后自动显示图片） */
.top-left-company {
    font-size: 22px;
    color: #cccccc;
    display: flex;
    align-items: center;
    gap: 10px;
}
.top-left-company .site-logo-img {
    height: 32px;
    max-width: 170px;
    object-fit: contain;
    border-radius: 4px;
    display: none;        /* 无 Logo 时不占位，有 Logo 时 JS 设为 inline-block */
    vertical-align: middle;
    /* ★ 兜底：确保容器不给 Logo 垫任何底色（白底残留的最后一道防线） */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.top-left-company .site-name {
    white-space: nowrap;
}

.top-center-search{
    display:flex;
    align-items:center;
    gap:0;
}
.search-box {
    padding: 7px 10px;
    width: 270px;
    background: #1a1a1a;
    border: 1px solid var(--color-border);
    border-right:none;
    border-radius: 4px 0 0 4px;
    color: #fff;
    outline:none;
}
.search-box:focus {
    border-color: var(--color-theme-blue);
}
/* 搜索按钮改为蓝色 */
.search-btn{
    padding:7px 14px;
    background:var(--color-theme-blue);
    border:1px solid var(--color-theme-blue);
    border-radius:0 4px 4px 0;
    color:#fff;
    cursor:pointer;
}
.search-btn:hover{
    background:#1d4ed8;
}

.top-right {
    display: flex;
    gap: 16px;
    align-items: center;
}

.auth-group a {
    color: var(--color-text-gray);
    margin-left: 12px;
}
/* 登录注册链接 hover 改为红色 */
.auth-group a:hover {
    color: var(--color-theme-red);
}

/* ========== 导航分类栏【一级横向，子分类(二级下拉)hover弹出】 ========== */
.main-nav {
    width: 100%;
    background: var(--color-nav-bg);
    border-top: 1px solid var(--color-border);
    /* =====【改颜色】导航栏底部线条：原红色，现用可自定义变量（当前蓝色）===== */
    border-bottom: 1px solid var(--color-nav-underline);
    /* 【修复子菜单被遮挡】建立独立层叠上下文，整体高于播放页 .wrap-3col(z-index:100) */
    position: relative;
    z-index: 200;
}

.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 26px;
    line-height: 46px;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: flex-start;
    padding:0 22px;
    list-style: none !important;
    /* 【修复】再次确保导航自身层级 */
    position: relative;
    z-index: 201;
}

.nav-menu > li {
    position: relative;
    list-style: none;
}

.nav-menu a {
    color: #ffffff;
    position: relative;
    z-index: 2;
    overflow: visible;
    padding:6px 10px;
}

/* 导航主分类悬浮：文字变红 */
.nav-menu a:hover {
    color: var(--color-theme-red);
}

.nav-menu .fixed-home {
    font-weight: bold;
}

/* ===== 当前选中分类：只保留【左边一条】红竖线，无背景 ===== */
.nav-menu a.active-link {
    background-color: transparent;                   /* 取消半透明红框 */
    border-left: 3px solid var(--color-theme-red);   /* 只留左边一条 */
    border-right: none;                              /* 右边不要 */
    border-radius: 0;
    color: var(--color-theme-red);                   /* 文字同步变红，强化选中 */
}
.nav-menu .active-link::after,
.nav-menu .active-link::before {
    display:none;
}

.nav-menu a:hover::before {
    display:none;
}

/* ========== 子分类（二级下拉菜单） ========== */
.nav-submenu {
    position: absolute;
    top: 100%;
    /* 【修复】下拉框以父菜单为中心居中（原 left:0 会往右偏） */
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-block-bg);
    border:1px solid var(--color-border);
    min-width:160px;
    max-height: 60vh;
    overflow-y: auto;
    /* 【修复】层级提到 9999，避免被下方模块盖住 */
    z-index: 9999;
    display: none;
}
.nav-submenu a {
    display:block;
    /* 【修复】切断从 .nav-menu 继承来的 line-height:46px，行间距不再虚高 */
    line-height: 1.4;
    padding:7px 14px;
    white-space: nowrap;
    /* 【修复】子栏目文字在框内居中（默认 left 会偏左） */
    text-align: center;
    color: var(--color-text-gray);
    border-radius:0;
    transition: color 0.1s;
}
/* hover子分类：仅文字变红，背景不变 */
.nav-submenu a:hover {
    color: var(--color-theme-red);
    background: transparent;
}
/* 点击子分类：直角半透红色背景 */
.nav-submenu a:active {
    background-color: rgba(224,48,48,0.25);
}
/* 悬浮一级li，子分类下拉弹出 */
.nav-menu > li:hover .nav-submenu {
    display:block;
}

/* ========== 登录注册通用弹窗【全局通用，所有页面可调用】
   ★ 与下载弹窗统一：头部站点标识（10白字 + DJ蓝字）+ 域名，深色面板 ========== */
.auth-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.82);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px 12px;
}
.auth-modal {
    width: 420px;
    max-width: 100%;
    background: var(--color-block-bg);
    border:1px solid var(--color-border);
    border-radius: 8px;
    padding: 0;                     /* ★ 头部通栏，内边距交给下面的 form */
    position: relative;
    color: var(--color-text);
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

/* ---- 头部：站点标识 + 域名（与下载弹窗 .dl-head 完全一致的 白字+蓝字） ---- */
.auth-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    /* ★ 右边留 52px 给绝对定位的关闭按钮，避免文字和 × 重叠 */
    padding: 18px 52px 18px 22px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-row-bg);
}
.auth-brand-name {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;                 /* ★ 白字 */
    letter-spacing: 1px;
}
.auth-brand-name em {               /* ★ "DJ" 用主题蓝，与下载弹窗一致 */
    font-style: normal;
    color: var(--color-theme-blue);
}
.auth-brand-url {
    font-size: 12px;
    color: var(--color-text-gray);
    letter-spacing: 1px;
}
.auth-close {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-gray);
    cursor: pointer;
    z-index: 2;
    /* ★ 加大点击热区，但不占位、不推挤头部文字 */
    width: 26px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.auth-close:hover { color: var(--color-theme-red); background: rgba(224,48,48,0.14); }

/* 表单内容区左右留白（头部已通栏，这里补内边距） */
.auth-modal form { padding: 20px 22px 24px; }
.auth-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 18px;
    color: #ffffff;
}

/* ★ 登录/注册/找回密码 的提示文字（common.js 会切 msg-success / msg-error） */
.auth-message {
    min-height:20px;
    font-size:14px;
    margin-bottom:10px;
    line-height:1.5;
    color:var(--color-text-gray);
}
.auth-message.msg-error   { color:#ff8b8b; }
.auth-message.msg-success { color:#6fe0ab; }

.auth-form-item {
    margin-bottom:16px;
}
.auth-form-item label {
    display:block;
    margin-bottom:6px;
    font-size:14px;
    color:var(--color-text-gray);
}
/* ★★ 输入框模块改为【白色底 + 深色字】（DJ 蓝字在上边头部，不受影响） ★★ */
.auth-form-item input {
    width:100%;
    box-sizing: border-box;
    padding:10px 12px;
    border:1px solid #cccccc;
    background: #ffffff;
    color:#111111;
    border-radius:4px;
    font-size:14px;
    -webkit-tap-highlight-color: transparent;
}
.auth-form-item input::placeholder { color:#888888; }
.auth-form-item input:focus {
    outline: none;
    border-color: var(--color-theme-blue);
}
/* ★★ 自动填充 / 清除后重新输入：输入框始终白底深字，不变色 ★★ */
.auth-form-item input:-webkit-autofill {
    -webkit-text-fill-color: #111111 !important;
    -webkit-box-shadow: 0 0 0 100px #ffffff inset !important;
    caret-color: #111111;
    border:1px solid #cccccc;
    transition: background-color 9999s ease-in-out 0s;
}
.auth-form-item input:-webkit-autofill:hover,
.auth-form-item input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111111 !important;
    -webkit-box-shadow: 0 0 0 100px #ffffff inset !important;
    border-color: var(--color-theme-blue) !important;
}
.auth-form-item input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100px #ffffff inset !important;
}

/* ========== 登录提交按钮 ========== */
.auth-submit-btn {
    width:100%;
    padding:12px;
    background: linear-gradient(135deg,#2563eb,#3b82f6);
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:16px;
    cursor:pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.auth-submit-btn:hover {
    background:linear-gradient(135deg,#1d4ed8,#2563eb);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}
.auth-submit-btn.loading {
    background:linear-gradient(135deg,#4b77e8,#6093f0);
    cursor: wait;
    opacity:0.85;
    transform:none;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}
.auth-submit-btn.success {
    background:linear-gradient(135deg,#16a34a,#22c55e);
    cursor: not-allowed;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
    transform:none;
}
.auth-submit-btn:disabled {
    opacity:0.7;
    cursor:not-allowed;
    transform:none;
    box-shadow: none;
}

.auth-tip-row {
    display:flex;
    justify-content:space-between;
    margin-top:14px;
    font-size:14px;
}
.auth-tip-row a {
    color:var(--color-theme-blue);
    text-decoration:none;
}
.auth-tip-row a:hover{
    text-decoration: underline;
}
/* 注册表单默认隐藏 */
.register-form {
    display:none;
}
/* ========== 顶部登录弹窗打开按钮 ========== */
#openAuthModal{
    padding: 7px 18px;
    background: linear-gradient(135deg,#2563eb,#3b82f6);
    color:#fff;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-size:14px;
    transition: all 0.2s;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
}
#openAuthModal:hover{
    background:linear-gradient(135deg,#1d4ed8,#2563eb);
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.35);
}
#openAuthModal:active{
    transform: translateY(0);
}

/* ========== 【最终修正】登录成功后顶部：后台管理、退出 链接 ========== */
.user-action-group a,
.top-user-btn {
    color: var(--color-text-gray);
    margin-left: 12px;
    padding: 6px 10px;
    border-radius: 0;
    cursor: pointer;
    background: transparent;
    border: none;
    font-size:14px;
    transition: color 0.1s;
}
/* 悬浮：仅文字变红，背景不变 */
.user-action-group a:hover,
.top-user-btn:hover {
    color: var(--color-theme-red);
    background: transparent;
}
/* 点击按下：直角矩形半透红色背景，无圆角 */
.user-action-group a:active,
.top-user-btn:active {
    background-color: rgba(224,48,48,0.25);
    color: var(--color-text);
}

/* ==========================================================
   ★ 新增：后台上传「网站背景图」后的顶部栏遮罩
   说明：common.js 会把背景图铺到 .top-bar（导航栏上方那条）。
        图片可能很亮，直接铺会导致搜索框/Logo/文字看不清，
        这里加一层半透明黑遮罩压住，保证内容始终可读。
   ========================================================== */
.top-bar.has-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.top-bar.has-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(8, 8, 8, 0.55);   /* 想让背景图更明显就调小，如 0.35 */
    pointer-events: none;              /* 不挡点击 */
}
/* 内容盖在遮罩之上 */
.top-bar.has-bg .top-bar-inner {
    position: relative;
    z-index: 1;
}

/* ==========================================================
   ★★ 全站通用：舞曲下载弹窗（172MIX 风格，配色跟随本站变量）
   说明：弹窗 DOM 由 common.js 动态注入，所有引用 common.js 的页面
        （首页 / 列表页 / 播放页 / 搜索页）都能直接调用
        openDownloadModal(歌曲ID)，无需在各页面重复写 HTML。
   ========================================================== */
.dl-mask {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.82);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    overflow-y: auto;
}
.dl-box {
    width: 680px;
    max-width: 100%;
    background: var(--color-block-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text);
    font-size: var(--font-size-base);
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

/* ---- 头部：站点标识 + 编号 ---- */
.dl-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* ★ 右边留出 52px 给绝对定位的关闭按钮，避免编号和 × 重叠 */
    padding: 18px 52px 18px 22px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-row-bg);
}
.dl-brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.dl-brand-name {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
}
.dl-brand-name em {           /* "DJ" 用主题蓝，突出 */
    font-style: normal;
    color: var(--color-theme-blue);
}
.dl-brand-url {
    font-size: 12px;
    color: var(--color-text-gray);
    letter-spacing: 1px;
}
.dl-num {
    font-size: 13px;
    color: var(--color-text-gray);
}
.dl-num b {
    color: var(--color-theme-blue);
    font-size: 18px;
    margin-left: 4px;
    letter-spacing: 1px;
}
.dl-close {
    position: absolute;
    top: 14px; right: 18px;
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-gray);
    cursor: pointer;
    z-index: 2;
    /* ★ 加大点击热区，但不占位、不推挤编号 */
    width: 26px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.dl-close:hover { color: var(--color-theme-red); background: rgba(224,48,48,0.14); }
.dl-close:hover { color: var(--color-theme-red); }

/* ---- 歌名行 ---- */
.dl-title-row {
    padding: 16px 22px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    word-break: break-all;
}

/* ---- 信息区：三列网格 ---- */
.dl-info {
    margin: 0 22px;
    padding: 16px 18px;
    background: var(--color-row-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 12px;
}
.dl-info-item {
    font-size: 13px;
    color: var(--color-text-gray);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dl-info-item span { color: #fff; }
.dl-info-item .free { color: #22c55e; font-weight: bold; }
.dl-info-item .coin { color: #f5c518; font-weight: bold; }

/* ---- 提示区 ---- */
.dl-hint {
    padding: 16px 22px 0;
    font-size: 13px;
    color: var(--color-text-gray);
    line-height: 1.7;
    text-align: center;
}
.dl-hint .ok   { color: #22c55e; }
.dl-hint .warn { color: var(--color-theme-red); }

/* ---- 按钮区 ---- */
.dl-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 14px 22px 18px;
    flex-wrap: wrap;
}
/* ★ 按钮：小尺寸、方角、朴素蓝块（与 172MIX 参考图一致，不再是大圆角大按钮） */
.dl-btn-main {
    padding: 6px 16px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
    transition: background 0.15s ease;
}
.dl-btn-main:hover:not(:disabled) { background: #1d4ed8; }
.dl-btn-main:active:not(:disabled) { background: #1e40af; }
.dl-btn-main:disabled {
    background: #333;
    color: #888;
    cursor: not-allowed;
}
.dl-btn-sub {
    padding: 5px 14px;
    background: transparent;
    color: var(--color-theme-blue);
    border: 1px solid var(--color-theme-blue);
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.dl-btn-sub:hover {
    background: rgba(37, 99, 235, 0.14);
    color: #7fb6f0;
}

/* 未登录时按钮区只剩它一个：稍宽一点，视觉更稳 */
#dlLogin {
    padding: 7px 26px;
    font-size: 14px;
}

/* ---- 底部说明 + 版权 ---- */
.dl-foot {
    padding: 14px 22px;
    background: #101010;
    border-top: 1px solid var(--color-border);
    font-size: 12px;
    color: #777;
    line-height: 1.8;
}
.dl-foot b { color: var(--color-theme-blue); }
.dl-copy {
    text-align: center;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--color-border);
    color: #555;
    font-size: 12px;
}

/* ---- 窄屏：信息三列改两列 ---- */
@media (max-width: 640px) {
    .dl-info { grid-template-columns: repeat(2, 1fr); }
    .dl-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .dl-close { top: 10px; right: 14px; }
}

/* ==========================================================
   ★ 全站歌名：去掉序号方块 + 字体改灰色
     覆盖首页所有板块、顶部推荐串烧、后台动态返回的列表 HTML。
     改这里，全站生效（common.css 被所有页面引用）。
     想调深浅只改 #999：亮一点 #bbb，暗一点 #777。
   ========================================================== */

/* ① 橙色序号方块：彻底不显示 */
.item-num {
    display: none !important;
}

/* ② 歌名变灰（含后台返回 HTML 里的 <a>，一起覆盖） */
.music-item .item-name,
.music-item .item-name a,
.top-side-item,
.top-side-item a,
.home-block-body .item-name,
.home-block-body .item-name a {
    color: #999 !important;
}

/* ③ 鼠标悬停稍亮，保留"可点击"的反馈 */
.music-item:hover .item-name,
.music-item:hover .item-name a,
.top-side-item:hover,
.top-side-item:hover a {
    color: #ccc !important;
}

/* ==========================================================
   ★★【新增】收藏 / 音乐盒 / U盘 / 光盘 弹窗头部
   ----------------------------------------------------------
   说明：这套弹窗 DOM 同样由 common.js 动态注入
        （结构：.fav-head > .fav-brand-name > em(DJ) + .fav-brand-url）。
        本文件原本【没有这两条规则】，所以 DJ 继承了父级白色 → 一直显示白的。
        这里补齐，与登录/下载弹窗完全统一：10(白) DJ(蓝) .CN(白) + 域名。
   ========================================================== */
.fav-brand-name {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.2;
    color: #ffffff;
}
.fav-brand-name em {
    font-style: normal;
    color: var(--color-theme-blue, #2563eb) !important;
}
.fav-brand-url {
    font-size: 9.5px;
    color: #8b98b8;
    letter-spacing: 3px;
    margin-top: 3px;
}
/* ==========================================================
   ★★ 全站底部「备案信息」（通用模块 · 后台开关控制展现）
   ----------------------------------------------------------
   DOM 由 js/common.js 动态注入，所有引用 common.js 的页面
   （首页 / 列表页 / 播放页 / 搜索页）自动出现，不用改各页面模板。

   后台没开启（footer_on = 0）时压根不注入，页面干干净净。
   配色沿用本站变量，想换风格改 var(--color-xxx) 即可。
   ========================================================== */
.site-footer {
    width: 100%;
    background: var(--color-topbar-bg);
    border-top: 1px solid var(--color-border);
    padding: 18px 22px 20px;
    margin-top: 20px;
}
.sf-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    color: #777;
    line-height: 1.9;
    word-break: break-all;
}

/* ① 底部链接行：投诉建议 / 版权说明 / 免责声明 … */
.sf-links {
    margin-bottom: 8px;
}
.sf-links a {
    color: var(--color-text-gray);
    margin: 0 8px;
    transition: color .15s;
}
.sf-links a:hover {
    color: var(--color-theme-red);
}

/* ② 备案号行：公安 / 网文 / ICP */
.sf-icp {
    color: #888;
    margin-bottom: 4px;
}
.sf-icp a {
    color: #888;
}
.sf-icp a:hover {
    color: var(--color-theme-blue);
}

/* ③ 增值电信许可证 + 公司名 */
.sf-company {
    color: #777;
    margin-bottom: 6px;
}

/* ④ 原创 / 版权声明 */
.sf-declare {
    color: #666;
    font-size: 11.5px;
    margin-bottom: 6px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* ⑤ Copyright 行 */
.sf-copy {
    color: #555;
}

/* 窄屏：字号再小一点，链接间距收窄 */
@media (max-width: 640px) {
    .sf-inner { font-size: 11px; }
    .sf-links a { margin: 0 5px; }
    .site-footer { padding: 14px 14px 16px; }
}

/* ==========================================================
   ★★ 公告页排版（关于我们 / 版权说明 / 免责… 六个页面共用）
   ----------------------------------------------------------
   类名与 html/notice.ejs 里实际使用的一致（.notice-*）。
   内联样式已移除，改这里即可全局生效，不用再动 ejs。

   ★ 外框合一：左右两个模块装在同一个大框里，中间一条分隔线，
     不再一高一矮。左标题 / 左菜单 / 右标题字号全部保持原样，
     只有右侧正文缩小。
   ========================================================== */
.notice-wrap{max-width:1200px;margin:0 auto;padding:16px 22px 40px;}

/* ① 面包屑：导航栏下面那一行 */
.notice-crumb{font-size:12px;color:#888;line-height:1;padding:10px 0 12px;}
.notice-crumb a{color:#888;}
.notice-crumb a:hover{color:var(--color-theme-red,#e03030);}
.notice-crumb span{color:#ccc;}
.notice-crumb i{font-style:normal;color:#555;margin:0 6px;}

/* ② 唯一的大框：左右都装在这里面，整体一个外框 */
.notice-layout{
    display:flex;
    align-items:stretch;                /* 左右等高 */
    background:var(--color-block-bg,#141414);
    border:1px solid var(--color-border,#222);
    border-radius:4px;
    overflow:hidden;
}

/* ③ 左侧声明目录：不再单独有框，只留右边一条分隔线 */
.notice-side{
    width:180px;flex:0 0 180px;
    background:transparent;
    border:none;
    border-right:1px solid var(--color-border,#222);
    border-radius:0;
}
.notice-side-t{
    font-size:14px;font-weight:bold;color:#fff;      /* 左标题字号不变 */
    padding:12px 14px;
    border-bottom:1px solid var(--color-border,#222);
    background:var(--color-row-bg,#181818);
}
.notice-side a{
    display:block;padding:9px 14px;
    font-size:13px;                                   /* 左菜单字号不变 */
    color:var(--color-text-gray,#aaa);
    border-left:3px solid transparent;
}
.notice-side a:hover{color:#fff;background:var(--color-row-hover,#202020);}
.notice-side a.on{
    color:var(--color-theme-red,#e03030);
    border-left-color:var(--color-theme-red,#e03030);
    background:var(--color-row-hover,#202020);
}

/* ④ 右侧公告正文：没有自己的框，标题正常，只缩小正文 */
.notice-main{
    flex:1;min-width:0;
    background:transparent;
    border:none;
    border-radius:0;
    padding:16px 22px 20px;
}
.notice-title{
    font-size:16px;font-weight:bold;color:#fff;      /* 右标题字号不变 */
    padding-bottom:10px;margin-bottom:12px;
    border-bottom:1px solid var(--color-border,#222);
}
.notice-body p{
    font-size:12px;                                   /* ★ 仅正文缩小 */
    color:var(--color-text-gray,#aaa);
    line-height:1.9;margin-bottom:10px;
}
.notice-body b{color:#ddd;}
.notice-copy{
    margin-top:16px;padding-top:10px;
    border-top:1px solid var(--color-border,#222);
    font-size:12px;color:#666;text-align:center;
}

/* ⑤ 窄屏：侧栏收到上面横着排，外框依然是一个 */
@media(max-width:760px){
    .notice-wrap{padding:12px 14px 30px;}
    .notice-layout{flex-direction:column;}
    .notice-side{
        width:100%;flex:none;
        border-right:none;
        border-bottom:1px solid var(--color-border,#222);
        display:flex;flex-wrap:wrap;
    }
    .notice-side-t{display:none;}
    .notice-side a{
        width:auto;flex:1 1 auto;text-align:center;
        border-left:none;border-bottom:2px solid transparent;
    }
    .notice-side a.on{border-left:none;border-bottom-color:var(--color-theme-red,#e03030);}
    .notice-main{padding:14px 16px 16px;}
}

/* ============================================================
   全站通用弹窗：收藏(蓝) / 下载(红) / 分享(青) / 加购
   由 common.js 的 openFavModal 等四个函数驱动
   ============================================================ */
/* 全站通用弹窗样式：收藏(蓝) / 下载(红) / 分享(青)
   与 /js/djmodal.js 配套，页面只需引入这两个文件即可。 */

/* ===== djfav ===== */
.djfav-mask{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:rgba(0,0,0,.82)!important;backdrop-filter:blur(3px)!important;z-index:99999!important;display:none!important;align-items:center!important;justify-content:center!important;padding:20px!important;box-sizing:border-box!important;}
.djfav-mask.on{display:flex!important;animation:djfav-fade .18s ease!important;}
@keyframes djfav-fade{from{opacity:0}to{opacity:1}}
.djfav-box{width:min(500px,100%)!important;max-height:90vh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;background:#10131a!important;border:1px solid #1d2233!important;border-radius:14px!important;box-shadow:0 24px 70px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03) inset!important;box-sizing:border-box!important;animation:djfav-pop .22s cubic-bezier(.2,.9,.3,1.2)!important;}
@keyframes djfav-pop{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
.djfav-head{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:14px 18px!important;flex:none!important;background:linear-gradient(135deg,var(--fb1),var(--fb2))!important;border-bottom:1px solid #262b3d!important;}
.djfav-brand{font-size:21px!important;font-weight:800!important;color:#fff!important;letter-spacing:1.5px!important;text-shadow:0 0 18px var(--fs)!important;}
.djfav-brand em{font-style:normal!important;color:var(--fl)!important;text-shadow:0 0 14px var(--fs)!important;}
.djfav-url{font-size:9.5px!important;color:#8b98b8!important;letter-spacing:3px!important;margin-top:3px!important;}
.djfav-close{color:#8b98b8!important;font-size:22px!important;cursor:pointer!important;line-height:1!important;width:28px!important;height:28px!important;flex:none!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:8px!important;transition:all .15s!important;}
.djfav-close:hover{background:rgba(255,255,255,.1)!important;color:#fff!important;}
.djfav-body{padding:14px 18px 16px!important;overflow-y:auto!important;flex:1!important;}
.djfav-body::-webkit-scrollbar{width:5px!important;}
.djfav-body::-webkit-scrollbar-thumb{background:#333a4d!important;border-radius:3px!important;}
.djfav-subject{font-size:11px!important;color:#7b88a8!important;letter-spacing:1.5px!important;margin-bottom:8px!important;}
.djfav-song{display:flex!important;gap:10px!important;margin-bottom:10px!important;}
.djfav-band{width:3px!important;flex:none!important;border-radius:3px!important;background:linear-gradient(180deg,var(--fl),var(--fd))!important;box-shadow:0 0 10px var(--fs)!important;}
.djfav-main{flex:1!important;min-width:0!important;}
.djfav-name{font-size:15px!important;color:#fff!important;font-weight:600!important;line-height:1.4!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:0 0 6px rgba(255,255,255,.15)!important;}
.djfav-meta{font-size:12px!important;color:#7b88a8!important;margin-top:5px!important;line-height:1.5!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.djfav-meta i{font-style:normal!important;color:var(--fl)!important;margin:0 6px!important;}
.djfav-info{font-size:13px!important;color:#9aa6c2!important;line-height:1.9!important;background:#0d1018!important;border:1px solid #1d2233!important;border-radius:8px!important;padding:10px 12px!important;margin-bottom:8px!important;}
.djfav-info b{color:#e6ebf5!important;}
.djfav-hint{font-size:12.5px!important;color:#8b98b8!important;line-height:1.8!important;margin-bottom:6px!important;}
.djfav-hint .w{color:#ffb020!important;}
.djfav-hint .g{color:#6fe0ab!important;}
.djfav-target{font-size:12.5px!important;color:#8b98b8!important;margin-bottom:6px!important;}
.djfav-target b{color:var(--fl)!important;font-weight:700!important;}
.djfav-area{background:#0b0e15!important;border:1px solid #1d2233!important;border-radius:10px!important;padding:10px!important;margin-bottom:4px!important;}
.djfav-ahead{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:6px!important;padding:0 2px!important;}
.djfav-add{width:26px!important;height:26px!important;flex:none!important;border-radius:8px!important;background:linear-gradient(135deg,var(--fm),var(--fd))!important;color:#fff!important;font-size:16px!important;font-weight:600!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;box-shadow:0 3px 10px var(--fs)!important;transition:all .15s!important;}
.djfav-add:hover{transform:scale(1.08)!important;}
.djfav-ahead span:last-child{font-size:12.5px!important;color:#8b98a8!important;font-weight:500!important;}
.djfav-list{max-height:480px!important;min-height:120px!important;overflow-y:auto!important;padding:0!important;}
.djfav-list::-webkit-scrollbar{width:5px!important;}
.djfav-list::-webkit-scrollbar-thumb{background:#333a4d!important;border-radius:3px!important;}
.djfav-pick{display:flex!important;align-items:center!important;gap:8px!important;padding:9px 10px!important;background:transparent!important;border:none!important;border-bottom:1px solid #1e1e1e!important;border-radius:0!important;cursor:pointer!important;position:relative!important;overflow:hidden!important;}
.djfav-pick:last-child{border-bottom:none!important;}
.djfav-pick:hover:not(.dis){background:#1a1a1a!important;}
.djfav-pick:hover:not(.dis) .djfav-pname{color:#fff!important;}
.djfav-pick.on{background:var(--fa)!important;}
.djfav-pick.on .djfav-pname{color:var(--fl2)!important;}
.djfav-pick.on::before{content:''!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:2px!important;background:var(--fm)!important;}
.djfav-pick.dis{opacity:.5!important;cursor:not-allowed!important;}
.djfav-pname{flex:1!important;font-size:14px!important;color:#ccc!important;font-weight:400!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.djfav-pick.dis .djfav-pname{color:#666!important;}
.djfav-pcnt{font-size:12px!important;color:#888!important;flex:none!important;}
.djfav-badge{font-size:10px!important;color:#ffd700!important;flex:none!important;background:rgba(255,215,0,.1)!important;border:1px solid rgba(255,215,0,.25)!important;padding:1px 7px!important;border-radius:9px!important;white-space:nowrap!important;}
.djfav-new{display:none!important;margin-top:8px!important;padding:8px!important;background:#121622!important;border:1px dashed var(--fl)!important;border-radius:8px!important;}
.djfav-new.on{display:block!important;}
.djfav-inp{width:100%!important;padding:9px 11px!important;background:#0d1018!important;border:1px solid #2b3040!important;color:#fff!important;border-radius:7px!important;font-size:13px!important;box-sizing:border-box!important;}
.djfav-inp:focus{border-color:var(--fm)!important;outline:none!important;}
.djfav-inp[readonly]{color:#9aa6c2!important;}
.djfav-newbtns{display:flex!important;gap:8px!important;margin-top:8px!important;justify-content:center!important;}
.djfav-newok{padding:8px 16px!important;background:linear-gradient(135deg,var(--fm),var(--fd))!important;color:#fff!important;border:none!important;border-radius:7px!important;cursor:pointer!important;font-size:12.5px!important;font-weight:600!important;}
.djfav-newcc{padding:8px 16px!important;background:transparent!important;color:#9aa6c2!important;border:1px solid #2b3040!important;border-radius:7px!important;cursor:pointer!important;font-size:12.5px!important;}
.djfav-newcc:hover{background:#1a1e28!important;color:#fff!important;}
.djfav-confirm{font-size:13.5px!important;color:#c8d0e0!important;line-height:1.85!important;background:#0d1018!important;border:1px solid #1d2233!important;border-radius:10px!important;padding:13px 15px!important;margin-bottom:4px!important;}
.djfav-confirm b{color:#fff!important;}
.djfav-acts{display:flex!important;gap:10px!important;justify-content:center!important;margin-top:12px!important;flex-wrap:wrap!important;}
.djfav-ok{padding:10px 28px!important;border:none!important;border-radius:9px!important;cursor:pointer!important;font-size:14px!important;color:#fff!important;font-weight:700!important;background:linear-gradient(135deg,var(--fm),var(--fd))!important;box-shadow:0 5px 18px var(--fs)!important;transition:all .16s!important;}
.djfav-ok:hover{transform:translateY(-1px)!important;}
.djfav-ok:disabled{opacity:.5!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important;}
.djfav-cc{padding:10px 22px!important;border:1px solid #2b3040!important;border-radius:9px!important;cursor:pointer!important;font-size:13.5px!important;background:#121622!important;color:#9aa6c2!important;transition:all .16s!important;}
.djfav-cc:hover{background:#1a1e28!important;color:#fff!important;}
.djfav-result{text-align:center!important;padding:10px 0 4px!important;}
.djfav-ring{width:64px!important;height:64px!important;margin:0 auto 14px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:30px!important;}
.djfav-ring.ok{background:rgba(33,163,102,.14)!important;border:2px solid #21a366!important;color:#6fe0ab!important;}
.djfav-ring.dup{background:rgba(255,215,0,.12)!important;border:2px solid #ffd700!important;color:#ffd700!important;}
.djfav-ring.err{background:rgba(224,48,48,.12)!important;border:2px solid #e03030!important;color:#ff8b8b!important;}
.djfav-rtitle{font-size:18px!important;color:#fff!important;font-weight:700!important;margin-bottom:6px!important;}
.djfav-rdesc{font-size:13px!important;color:#9aa6c2!important;line-height:1.85!important;}
.djfav-rtip{font-size:11.5px!important;color:#6b7488!important;margin-top:8px!important;line-height:1.7!important;}

/* ===== djdl ===== */
.djdl-mask{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:rgba(0,0,0,.82)!important;backdrop-filter:blur(3px)!important;z-index:99999!important;display:none!important;align-items:center!important;justify-content:center!important;padding:20px!important;box-sizing:border-box!important;}
.djdl-mask.on{display:flex!important;animation:djdl-fade .18s ease!important;}
@keyframes djdl-fade{from{opacity:0}to{opacity:1}}
.djdl-box{width:min(500px,100%)!important;max-height:90vh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;background:#10131a!important;border:1px solid #1d2233!important;border-radius:14px!important;box-shadow:0 24px 70px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03) inset!important;box-sizing:border-box!important;animation:djdl-pop .22s cubic-bezier(.2,.9,.3,1.2)!important;}
@keyframes djdl-pop{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
.djdl-head{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:14px 18px!important;flex:none!important;background:linear-gradient(135deg,#3d1a1a,#1c1111)!important;border-bottom:1px solid #262b3d!important;}
.djdl-brand{font-size:21px!important;font-weight:800!important;color:#fff!important;letter-spacing:1.5px!important;text-shadow:0 0 18px rgba(224,48,48,.5)!important;}
.djdl-brand em{font-style:normal!important;color:#ff6b6b!important;text-shadow:0 0 14px rgba(224,48,48,.7)!important;}
.djdl-url{font-size:9.5px!important;color:#8b98b8!important;letter-spacing:3px!important;margin-top:3px!important;}
.djdl-close{color:#8b98b8!important;font-size:22px!important;cursor:pointer!important;line-height:1!important;width:28px!important;height:28px!important;flex:none!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:8px!important;transition:all .15s!important;}
.djdl-close:hover{background:rgba(255,255,255,.1)!important;color:#fff!important;}
.djdl-body{padding:14px 18px 16px!important;overflow-y:auto!important;flex:1!important;}
.djdl-body::-webkit-scrollbar{width:5px!important;}
.djdl-body::-webkit-scrollbar-thumb{background:#333a4d!important;border-radius:3px!important;}
.djdl-subject{font-size:11px!important;color:#7b88a8!important;letter-spacing:1.5px!important;margin-bottom:8px!important;}
.djdl-song{display:flex!important;gap:10px!important;margin-bottom:10px!important;}
.djdl-band{width:3px!important;flex:none!important;border-radius:3px!important;background:linear-gradient(180deg,#ff6b6b,#8f1d1d)!important;box-shadow:0 0 10px rgba(224,48,48,.5)!important;}
.djdl-main{flex:1!important;min-width:0!important;}
.djdl-name{font-size:15px!important;color:#fff!important;font-weight:600!important;line-height:1.4!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:0 0 6px rgba(255,255,255,.15)!important;}
.djdl-meta{font-size:12px!important;color:#7b88a8!important;margin-top:5px!important;line-height:1.5!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.djdl-meta i{font-style:normal!important;color:#ff6b6b!important;margin:0 6px!important;}
.djdl-info{font-size:13px!important;color:#9aa6c2!important;line-height:1.9!important;background:#0d1018!important;border:1px solid #1d2233!important;border-radius:8px!important;padding:10px 12px!important;margin-bottom:8px!important;}
.djdl-info b{color:#e6ebf5!important;}
.djdl-hint{font-size:12.5px!important;color:#8b98b8!important;line-height:1.8!important;margin-bottom:6px!important;}
.djdl-hint .w{color:#ffb020!important;}
.djdl-hint .g{color:#6fe0ab!important;}
.djdl-target{font-size:12.5px!important;color:#8b98b8!important;margin-bottom:6px!important;}
.djdl-target b{color:#ff6b6b!important;font-weight:700!important;}
.djdl-area{background:#0b0e15!important;border:1px solid #1d2233!important;border-radius:10px!important;padding:10px!important;margin-bottom:4px!important;}
.djdl-ahead{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:6px!important;padding:0 2px!important;}
.djdl-add{width:26px!important;height:26px!important;flex:none!important;border-radius:8px!important;background:linear-gradient(135deg,#e03030,#8f1d1d)!important;color:#fff!important;font-size:16px!important;font-weight:600!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;box-shadow:0 3px 10px rgba(224,48,48,.35)!important;transition:all .15s!important;}
.djdl-add:hover{transform:scale(1.08)!important;}
.djdl-ahead span:last-child{font-size:12.5px!important;color:#8b98a8!important;font-weight:500!important;}
.djdl-list{max-height:480px!important;min-height:120px!important;overflow-y:auto!important;padding:0!important;}
.djdl-list::-webkit-scrollbar{width:5px!important;}
.djdl-list::-webkit-scrollbar-thumb{background:#333a4d!important;border-radius:3px!important;}
.djdl-pick{display:flex!important;align-items:center!important;gap:8px!important;padding:9px 10px!important;background:transparent!important;border:none!important;border-bottom:1px solid #1e1e1e!important;border-radius:0!important;cursor:pointer!important;position:relative!important;overflow:hidden!important;}
.djdl-pick:last-child{border-bottom:none!important;}
.djdl-pick:hover:not(.dis){background:#1a1a1a!important;}
.djdl-pick:hover:not(.dis) .djdl-pname{color:#fff!important;}
.djdl-pick.on{background:rgba(224,48,48,.12)!important;}
.djdl-pick.on .djdl-pname{color:#ff8b8b!important;}
.djdl-pick.on::before{content:''!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:2px!important;background:#e03030!important;}
.djdl-pick.dis{opacity:.5!important;cursor:not-allowed!important;}
.djdl-pname{flex:1!important;font-size:14px!important;color:#ccc!important;font-weight:400!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.djdl-pick.dis .djdl-pname{color:#666!important;}
.djdl-pcnt{font-size:12px!important;color:#888!important;flex:none!important;}
.djdl-badge{font-size:10px!important;color:#ffd700!important;flex:none!important;background:rgba(255,215,0,.1)!important;border:1px solid rgba(255,215,0,.25)!important;padding:1px 7px!important;border-radius:9px!important;white-space:nowrap!important;}
.djdl-new{display:none!important;margin-top:8px!important;padding:8px!important;background:#121622!important;border:1px dashed #ff6b6b!important;border-radius:8px!important;}
.djdl-new.on{display:block!important;}
.djdl-inp{width:100%!important;padding:9px 11px!important;background:#0d1018!important;border:1px solid #2b3040!important;color:#fff!important;border-radius:7px!important;font-size:13px!important;box-sizing:border-box!important;}
.djdl-inp:focus{border-color:#e03030!important;outline:none!important;}
.djdl-inp[readonly]{color:#9aa6c2!important;}
.djdl-newbtns{display:flex!important;gap:8px!important;margin-top:8px!important;justify-content:center!important;}
.djdl-newok{padding:8px 16px!important;background:linear-gradient(135deg,#e03030,#8f1d1d)!important;color:#fff!important;border:none!important;border-radius:7px!important;cursor:pointer!important;font-size:12.5px!important;font-weight:600!important;}
.djdl-newcc{padding:8px 16px!important;background:transparent!important;color:#9aa6c2!important;border:1px solid #2b3040!important;border-radius:7px!important;cursor:pointer!important;font-size:12.5px!important;}
.djdl-newcc:hover{background:#1a1e28!important;color:#fff!important;}
.djdl-confirm{font-size:13.5px!important;color:#c8d0e0!important;line-height:1.85!important;background:#0d1018!important;border:1px solid #1d2233!important;border-radius:10px!important;padding:13px 15px!important;margin-bottom:4px!important;}
.djdl-confirm b{color:#fff!important;}
.djdl-acts{display:flex!important;gap:10px!important;justify-content:center!important;margin-top:12px!important;flex-wrap:wrap!important;}
.djdl-ok{padding:10px 28px!important;border:none!important;border-radius:9px!important;cursor:pointer!important;font-size:14px!important;color:#fff!important;font-weight:700!important;background:linear-gradient(135deg,#e03030,#8f1d1d)!important;box-shadow:0 5px 18px rgba(224,48,48,.4)!important;transition:all .16s!important;}
.djdl-ok:hover{transform:translateY(-1px)!important;}
.djdl-ok:disabled{opacity:.5!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important;}
.djdl-cc{padding:10px 22px!important;border:1px solid #2b3040!important;border-radius:9px!important;cursor:pointer!important;font-size:13.5px!important;background:#121622!important;color:#9aa6c2!important;transition:all .16s!important;}
.djdl-cc:hover{background:#1a1e28!important;color:#fff!important;}
.djdl-result{text-align:center!important;padding:10px 0 4px!important;}
.djdl-ring{width:64px!important;height:64px!important;margin:0 auto 14px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:30px!important;}
.djdl-ring.ok{background:rgba(33,163,102,.14)!important;border:2px solid #21a366!important;color:#6fe0ab!important;}
.djdl-ring.dup{background:rgba(255,215,0,.12)!important;border:2px solid #ffd700!important;color:#ffd700!important;}
.djdl-ring.err{background:rgba(224,48,48,.12)!important;border:2px solid #e03030!important;color:#ff8b8b!important;}
.djdl-rtitle{font-size:18px!important;color:#fff!important;font-weight:700!important;margin-bottom:6px!important;}
.djdl-rdesc{font-size:13px!important;color:#9aa6c2!important;line-height:1.85!important;}
.djdl-rtip{font-size:11.5px!important;color:#6b7488!important;margin-top:8px!important;line-height:1.7!important;}

/* ===== djsh ===== */
.djsh-mask{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;background:rgba(0,0,0,.82)!important;backdrop-filter:blur(3px)!important;z-index:99999!important;display:none!important;align-items:center!important;justify-content:center!important;padding:20px!important;box-sizing:border-box!important;}
.djsh-mask.on{display:flex!important;animation:djsh-fade .18s ease!important;}
@keyframes djsh-fade{from{opacity:0}to{opacity:1}}
.djsh-box{width:min(500px,100%)!important;max-height:90vh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;background:#10131a!important;border:1px solid #1d2233!important;border-radius:14px!important;box-shadow:0 24px 70px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03) inset!important;box-sizing:border-box!important;animation:djsh-pop .22s cubic-bezier(.2,.9,.3,1.2)!important;}
@keyframes djsh-pop{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
.djsh-head{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:14px 18px!important;flex:none!important;background:linear-gradient(135deg,#123a44,#0d1c22)!important;border-bottom:1px solid #262b3d!important;}
.djsh-brand{font-size:21px!important;font-weight:800!important;color:#fff!important;letter-spacing:1.5px!important;text-shadow:0 0 18px rgba(14,116,144,.5)!important;}
.djsh-brand em{font-style:normal!important;color:#22a8c4!important;text-shadow:0 0 14px rgba(14,116,144,.7)!important;}
.djsh-url{font-size:9.5px!important;color:#8b98b8!important;letter-spacing:3px!important;margin-top:3px!important;}
.djsh-close{color:#8b98b8!important;font-size:22px!important;cursor:pointer!important;line-height:1!important;width:28px!important;height:28px!important;flex:none!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:8px!important;transition:all .15s!important;}
.djsh-close:hover{background:rgba(255,255,255,.1)!important;color:#fff!important;}
.djsh-body{padding:14px 18px 16px!important;overflow-y:auto!important;flex:1!important;}
.djsh-body::-webkit-scrollbar{width:5px!important;}
.djsh-body::-webkit-scrollbar-thumb{background:#333a4d!important;border-radius:3px!important;}
.djsh-subject{font-size:11px!important;color:#7b88a8!important;letter-spacing:1.5px!important;margin-bottom:8px!important;}
.djsh-song{display:flex!important;gap:10px!important;margin-bottom:10px!important;}
.djsh-band{width:3px!important;flex:none!important;border-radius:3px!important;background:linear-gradient(180deg,#22a8c4,#0a4f63)!important;box-shadow:0 0 10px rgba(14,116,144,.5)!important;}
.djsh-main{flex:1!important;min-width:0!important;}
.djsh-name{font-size:15px!important;color:#fff!important;font-weight:600!important;line-height:1.4!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:0 0 6px rgba(255,255,255,.15)!important;}
.djsh-meta{font-size:12px!important;color:#7b88a8!important;margin-top:5px!important;line-height:1.5!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.djsh-meta i{font-style:normal!important;color:#22a8c4!important;margin:0 6px!important;}
.djsh-info{font-size:13px!important;color:#9aa6c2!important;line-height:1.9!important;background:#0d1018!important;border:1px solid #1d2233!important;border-radius:8px!important;padding:10px 12px!important;margin-bottom:8px!important;}
.djsh-info b{color:#e6ebf5!important;}
.djsh-hint{font-size:12.5px!important;color:#8b98b8!important;line-height:1.8!important;margin-bottom:6px!important;}
.djsh-hint .w{color:#ffb020!important;}
.djsh-hint .g{color:#6fe0ab!important;}
.djsh-target{font-size:12.5px!important;color:#8b98b8!important;margin-bottom:6px!important;}
.djsh-target b{color:#22a8c4!important;font-weight:700!important;}
.djsh-area{background:#0b0e15!important;border:1px solid #1d2233!important;border-radius:10px!important;padding:10px!important;margin-bottom:4px!important;}
.djsh-ahead{display:flex!important;align-items:center!important;gap:8px!important;margin-bottom:6px!important;padding:0 2px!important;}
.djsh-add{width:26px!important;height:26px!important;flex:none!important;border-radius:8px!important;background:linear-gradient(135deg,#0e7490,#0a4f63)!important;color:#fff!important;font-size:16px!important;font-weight:600!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;box-shadow:0 3px 10px rgba(14,116,144,.35)!important;transition:all .15s!important;}
.djsh-add:hover{transform:scale(1.08)!important;}
.djsh-ahead span:last-child{font-size:12.5px!important;color:#8b98a8!important;font-weight:500!important;}
.djsh-list{max-height:480px!important;min-height:120px!important;overflow-y:auto!important;padding:0!important;}
.djsh-list::-webkit-scrollbar{width:5px!important;}
.djsh-list::-webkit-scrollbar-thumb{background:#333a4d!important;border-radius:3px!important;}
.djsh-pick{display:flex!important;align-items:center!important;gap:8px!important;padding:9px 10px!important;background:transparent!important;border:none!important;border-bottom:1px solid #1e1e1e!important;border-radius:0!important;cursor:pointer!important;position:relative!important;overflow:hidden!important;}
.djsh-pick:last-child{border-bottom:none!important;}
.djsh-pick:hover:not(.dis){background:#1a1a1a!important;}
.djsh-pick:hover:not(.dis) .djsh-pname{color:#fff!important;}
.djsh-pick.on{background:rgba(14,116,144,.12)!important;}
.djsh-pick.on .djsh-pname{color:#67d3e8!important;}
.djsh-pick.on::before{content:''!important;position:absolute!important;left:0!important;top:0!important;bottom:0!important;width:2px!important;background:#0e7490!important;}
.djsh-pick.dis{opacity:.5!important;cursor:not-allowed!important;}
.djsh-pname{flex:1!important;font-size:14px!important;color:#ccc!important;font-weight:400!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.djsh-pick.dis .djsh-pname{color:#666!important;}
.djsh-pcnt{font-size:12px!important;color:#888!important;flex:none!important;}
.djsh-badge{font-size:10px!important;color:#ffd700!important;flex:none!important;background:rgba(255,215,0,.1)!important;border:1px solid rgba(255,215,0,.25)!important;padding:1px 7px!important;border-radius:9px!important;white-space:nowrap!important;}
.djsh-new{display:none!important;margin-top:8px!important;padding:8px!important;background:#121622!important;border:1px dashed #22a8c4!important;border-radius:8px!important;}
.djsh-new.on{display:block!important;}
.djsh-inp{width:100%!important;padding:9px 11px!important;background:#0d1018!important;border:1px solid #2b3040!important;color:#fff!important;border-radius:7px!important;font-size:13px!important;box-sizing:border-box!important;}
.djsh-inp:focus{border-color:#0e7490!important;outline:none!important;}
.djsh-inp[readonly]{color:#9aa6c2!important;}
.djsh-newbtns{display:flex!important;gap:8px!important;margin-top:8px!important;justify-content:center!important;}
.djsh-newok{padding:8px 16px!important;background:linear-gradient(135deg,#0e7490,#0a4f63)!important;color:#fff!important;border:none!important;border-radius:7px!important;cursor:pointer!important;font-size:12.5px!important;font-weight:600!important;}
.djsh-newcc{padding:8px 16px!important;background:transparent!important;color:#9aa6c2!important;border:1px solid #2b3040!important;border-radius:7px!important;cursor:pointer!important;font-size:12.5px!important;}
.djsh-newcc:hover{background:#1a1e28!important;color:#fff!important;}
.djsh-confirm{font-size:13.5px!important;color:#c8d0e0!important;line-height:1.85!important;background:#0d1018!important;border:1px solid #1d2233!important;border-radius:10px!important;padding:13px 15px!important;margin-bottom:4px!important;}
.djsh-confirm b{color:#fff!important;}
.djsh-acts{display:flex!important;gap:10px!important;justify-content:center!important;margin-top:12px!important;flex-wrap:wrap!important;}
.djsh-ok{padding:10px 28px!important;border:none!important;border-radius:9px!important;cursor:pointer!important;font-size:14px!important;color:#fff!important;font-weight:700!important;background:linear-gradient(135deg,#0e7490,#0a4f63)!important;box-shadow:0 5px 18px rgba(14,116,144,.4)!important;transition:all .16s!important;}
.djsh-ok:hover{transform:translateY(-1px)!important;}
.djsh-ok:disabled{opacity:.5!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important;}
.djsh-cc{padding:10px 22px!important;border:1px solid #2b3040!important;border-radius:9px!important;cursor:pointer!important;font-size:13.5px!important;background:#121622!important;color:#9aa6c2!important;transition:all .16s!important;}
.djsh-cc:hover{background:#1a1e28!important;color:#fff!important;}
.djsh-result{text-align:center!important;padding:10px 0 4px!important;}
.djsh-ring{width:64px!important;height:64px!important;margin:0 auto 14px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:30px!important;}
.djsh-ring.ok{background:rgba(33,163,102,.14)!important;border:2px solid #21a366!important;color:#6fe0ab!important;}
.djsh-ring.dup{background:rgba(255,215,0,.12)!important;border:2px solid #ffd700!important;color:#ffd700!important;}
.djsh-ring.err{background:rgba(224,48,48,.12)!important;border:2px solid #e03030!important;color:#ff8b8b!important;}
.djsh-rtitle{font-size:18px!important;color:#fff!important;font-weight:700!important;margin-bottom:6px!important;}
.djsh-rdesc{font-size:13px!important;color:#9aa6c2!important;line-height:1.85!important;}
.djsh-rtip{font-size:11.5px!important;color:#6b7488!important;margin-top:8px!important;line-height:1.7!important;}


/* ============================================================
   弹窗头部统一风格：logo 在上 / 域名 在下，颜色跟对应按钮走
   色值取自 play.ejs 按钮真实定义：
     分享 #0e7490 青 / 下载 #e03030 红 / 收藏 #21a366 淡绿
     U盘 #1e5fa8 蓝 / 刻录 #6a3fb5 紫
     登录弹窗整套跟随「加入U盘」= 蓝 #1e5fa8 系列
   ============================================================ */

.auth-head,
.auth-head.dj-blue,
.auth-head.dj-green,
.auth-head.dj-purple{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:2px!important;
    padding:14px 52px 14px 18px!important;
    background:linear-gradient(135deg,#16375f,#0a1728)!important;
    border-bottom:1px solid #1e5fa8!important;
}
.auth-head .auth-brand-name{
    font-size:21px!important;
    font-weight:800!important;
    letter-spacing:1.5px!important;
    line-height:1.2!important;
    color:#ffffff!important;
}
.auth-head .auth-brand-name em{
    font-style:normal!important;
    color:#7fb6f0!important;
    text-shadow:0 0 16px rgba(30,95,168,.85)!important;
}
.auth-head .auth-brand-url{
    font-size:9.5px!important;
    color:#8b98b8!important;
    letter-spacing:3px!important;
    margin-top:3px!important;
}




.djdl-head{
    background:linear-gradient(135deg,#3d1a1a,#1c1111)!important;
    border-bottom:1px solid #e03030!important;
}
.djdl-head .djdl-brand em{
    color:#ff8b8b!important;
    text-shadow:0 0 16px rgba(224,48,48,.85)!important;
}

.djsh-head{
    background:linear-gradient(135deg,#123a44,#0d1c22)!important;
    border-bottom:1px solid #0e7490!important;
}
.djsh-head .djsh-brand em{
    color:#67d3e8!important;
    text-shadow:0 0 16px rgba(14,116,144,.85)!important;
}

.dl-head{
    background:linear-gradient(135deg,#3d1a1a,#1c1111)!important;
    border-bottom:1px solid #e03030!important;
}
.dl-head .dl-brand-name em{
    color:#ff8b8b!important;
}

.fav-head{
    background:linear-gradient(135deg,#1a4030,#0d2018)!important;
    border-bottom:1px solid #21a366!important;
}
.fav-head .fav-brand-name em{
    color:#6fe0ab!important;
}

/* 收藏/音乐盒/U盘/刻录 弹窗整套配色：头部 + 按钮 + 符号 全部跟随按钮色 */
.djfav-box{
    --fm:#1e5fa8;
    --fd:#0f2f56;
    --fl:#7fb6f0;
    --fl2:#a3cdf7;
    --fs:rgba(30,95,168,.5);
    --fa:rgba(30,95,168,.12);
    --fb1:#16375f;
    --fb2:#0a1728;
}
.djfav-head.dj-green,
.djfav-head.dj-green ~ .djfav-body{
    --fm:#21a366;--fd:#0d5233;--fl:#6fe0ab;--fl2:#8fecc4;
    --fs:rgba(33,163,102,.5);--fa:rgba(33,163,102,.12);
    --fb1:#1a4030;--fb2:#0d2018;
}
.djfav-head.dj-purple,
.djfav-head.dj-purple ~ .djfav-body{
    --fm:#6a3fb5;--fd:#3b1f70;--fl:#b799f0;--fl2:#c9b3f7;
    --fs:rgba(106,63,181,.5);--fa:rgba(106,63,181,.12);
    --fb1:#2e1a52;--fb2:#150c28;
}
.djfav-head.dj-blue,
.djfav-head.dj-blue ~ .djfav-body{
    --fm:#1e5fa8;--fd:#0f2f56;--fl:#7fb6f0;--fl2:#a3cdf7;
    --fs:rgba(30,95,168,.5);--fa:rgba(30,95,168,.12);
    --fb1:#16375f;--fb2:#0a1728;
}
.djfav-head.dj-cyan,
.djfav-head.dj-cyan ~ .djfav-body{
    --fm:#0e7490;--fd:#0a4f63;--fl:#67d3e8;--fl2:#8fe0f2;
    --fs:rgba(14,116,144,.5);--fa:rgba(14,116,144,.12);
    --fb1:#123a44;--fb2:#0d1c22;
}
.djfav-head.dj-red,
.djfav-head.dj-red ~ .djfav-body{
    --fm:#e03030;--fd:#8f1d1d;--fl:#ff8b8b;--fl2:#ffb3b3;
    --fs:rgba(224,48,48,.5);--fa:rgba(224,48,48,.12);
    --fb1:#3d1a1a;--fb2:#1c1111;
}
.djfav-head{border-bottom:1px solid var(--fm)!important;}
.djfav-head.dj-green{border-bottom:1px solid #21a366!important;}
.djfav-head.dj-purple{border-bottom:1px solid #6a3fb5!important;}
.djfav-head.dj-blue{border-bottom:1px solid #1e5fa8!important;}
.djfav-head.dj-cyan{border-bottom:1px solid #0e7490!important;}
.djfav-head.dj-red{border-bottom:1px solid #e03030!important;}

/* 登录弹窗整套改蓝（与「加入U盘」弹窗同色） */
.auth-submit-btn:not(.success):not(.loading){
    background:linear-gradient(135deg,#1e5fa8,#0f2f56)!important;
    box-shadow:0 4px 12px rgba(30,95,168,.3)!important;
}
.auth-submit-btn:not(.success):not(.loading):hover{
    background:linear-gradient(135deg,#174d8a,#1e5fa8)!important;
    box-shadow:0 6px 16px rgba(30,95,168,.4)!important;
}
.auth-submit-btn.loading{
    background:linear-gradient(135deg,#3a72bd,#4d8bff)!important;
    box-shadow:0 2px 8px rgba(30,95,168,.2)!important;
}
.auth-form-item input:focus{
    border-color:#1e5fa8!important;
}
.auth-form-item input:-webkit-autofill:focus,
.auth-form-item input:-webkit-autofill:hover{
    border-color:#1e5fa8!important;
}
.auth-tip-row a{
    color:#7fb6f0!important;
}
.auth-tip-row a:hover{
    color:#a3cdf7!important;
}
.auth-message.msg-success{color:#6fe0ab!important;}