/* ============================================================
   A5歌词网 - 公共样式
   路径：/static/css/style.css
   说明：只放全站公共部分（导航、语言切换、面包屑、卡片、
        底部、返回顶部等）。页面特有样式保留在各模板 <style> 中。
   重构说明：同一选择器只保留一条规则（历史上多次覆盖的写法已合并，行为完全等价）。
   ============================================================ */

/* ---------- 全局重置 ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: #f5faf5;
    color: #1e2e1e;
    line-height: 1.6;
    padding: 0 16px;
}

a {
    color: #2e7d32;
    text-decoration: none;
    transition: 0.2s;
}

a:hover {
    color: #1b5e20;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.empty-state {
    text-align: center;
    padding: 30px 20px;
    color: #6a8a6a;
}

/* ============================================================
   导航
   ============================================================ */
.header_wrap {
    background: #fff;
    border-bottom: 2px solid #e8f5e9;
    padding: 8px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.floow-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

#header #logo h2 {
    font-size: 0;
    margin: 0;
}

#header #logo a {
    display: block;
}

#header #logo img {
    height: 48px;
    width: auto;
    display: block;
}

.navbar-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px 4px;
    cursor: pointer;
}

.navbar-toggle .nav-bar-fr {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 26px;
    height: 3px;
    background: #2e4a2e;
    border-radius: 3px;
    transition: 0.2s;
}

#navigation {
    display: flex;
    align-items: center;
}

#nav {
    display: flex;
    list-style: none;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
}

#nav li {
    list-style: none;
}

#nav li a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #2e4a2e;
    transition: 0.2s;
    white-space: nowrap;
}

#nav li a i {
    font-size: 0.9rem;
    color: #43a047;
}

#nav li a:hover {
    background: #e8f5e9;
    color: #1b5e20;
    text-decoration: none;
}

#nav li a:hover i {
    color: #2e7d32;
}

#nav li.active a {
    background: #2e7d32;
    color: #fff;
}

#nav li.active a i {
    color: #fff;
}

#nav li.active a:hover {
    background: #1b5e20;
}

/* ============================================================
   桌面端导航「单行自适应」
   多语言下歌手名翻译后变长会挤到第二行；
   下面规则仅在 JS 添加 .nav-nowrap 后生效（无 JS 时保持原有换行，不退化）
   ============================================================ */
@media (min-width: 769px) {
    .floow-nav.nav-nowrap {
    flex-wrap: nowrap;
}

    #header {
    flex: 0 0 auto;
}

    /* 菜单整体靠右。原来靠 #nav 的 margin-left:auto，改成容器的
       justify-content 之后，#nav 的宽度就完全由内容决定，溢出量更好测。 */
    #navigation.nav-nowrap {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

    #nav.nav-nowrap {
    flex-wrap: nowrap;
    min-width: 0;
}

    #nav.nav-nowrap > li {
    flex: 0 0 auto;
}
}

/*#nav li:first-child a {*/
/*    background: #2e7d32;*/
/*    color: #fff;*/
/*}*/

/*#nav li:first-child a i {*/
/*    color: #fff;*/
/*}*/

/*#nav li:first-child a:hover {*/
/*    background: #1b5e20;*/
/*}*/

/*#nav li:first-child.active a {*/
/*    background: #1b5e20;*/
/*}*/

/* 导航内搜索框（nav.php 使用） */
.nav-search {
    display: flex;
    align-items: center;
    background: #f0f7f0;
    border-radius: 30px;
    padding: 4px 4px 4px 16px;
    border: 1px solid #d0e6d0;
    margin-left: 8px;
    transition: 0.2s;
}

.nav-search:focus-within {
    border-color: #2e7d32;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);
}

.nav-search input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    padding: 6px 0;
    min-width: 120px;
    color: #1e2a1e;
}

.nav-search button {
    background: #2e7d32;
    border: none;
    color: #fff;
    border-radius: 30px;
    padding: 5px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.2s;
    font-weight: 500;
}

.nav-search button:hover {
    background: #1b5e20;
}

/* ============================================================
   语言切换
   ============================================================ */
.lang-switch {
    position: relative;
}

.lang-switch > a {
    cursor: pointer;
}

.lang-switch .lang-current i {
    margin-right: 4px;
}

.lang-switch .lang-current .arrow {
    font-size: 0.7rem;
    margin-left: 2px;
    transition: transform 0.2s;
}

.lang-switch.open .lang-current .arrow {
    transform: rotate(180deg);
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e8f5e9;
    min-width: 180px;
    padding: 6px 0;
    list-style: none;
    z-index: 200;
    margin-top: 4px;
    max-height: 400px;
    overflow-y: auto;
}

.lang-dropdown.open {
    display: block;
}

.lang-dropdown li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 18px;
    font-size: 0.9rem;
    color: #2e4a2e;
    transition: 0.2s;
    border-radius: 0;
    white-space: nowrap;
}

.lang-dropdown li a:hover {
    background: #e8f5e9;
    color: #1b5e20;
}

.lang-dropdown li a .lang-code {
    font-size: 0.7rem;
    color: #8aaa8a;
    background: #f0f7f0;
    padding: 0 8px;
    border-radius: 10px;
    font-weight: 400;
}

.lang-dropdown li a.active-lang {
    background: #e8f5e9;
    color: #2e7d32;
    font-weight: 600;
}

.lang-dropdown li a.active-lang .lang-code {
    background: #2e7d32;
    color: #fff;
}

/* ============================================================
   导航「更多」下拉（桌面端一行放不下时的折叠出口）
   容器由 nav.php 输出（默认 hidden），放不下的栏目由 js.js 移进 .nav-more-list。
   ⚠️ 移进来的子项仍然命中 `#nav li a`（带 ID，优先级更高），
      所以下面这些选择器也必须带 `#nav` 才盖得住那套胶囊样式。
   ============================================================ */
.nav-more {
    position: relative;
}

.nav-more > a {
    cursor: pointer;
}

.nav-more > a .arrow {
    font-size: 0.7rem;
    margin-left: 3px;
    transition: transform 0.2s;
}

.nav-more > a:hover,
.nav-more.open > a {
    background: #e8f5e9;
    color: #1b5e20;
}

.nav-more.open > a .arrow {
    transform: rotate(180deg);
}

.nav-more-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 168px;
    margin: 6px 0 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e8f5e9;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    z-index: 200;
}

.nav-more.open .nav-more-list {
    display: block;
}

#nav .nav-more-list li {
    list-style: none;
}

#nav .nav-more-list li a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 0;
    font-size: 0.9rem;
    color: #2e4a2e;
    white-space: nowrap;
    transition: 0.2s;
}

#nav .nav-more-list li a:hover {
    background: #e8f5e9;
    color: #1b5e20;
    text-decoration: none;
}

#nav .nav-more-list li a i {
    color: #43a047;
}

#nav .nav-more-list li.active a {
    background: #e8f5e9;
    color: #2e7d32;
    font-weight: 600;
}

#nav .nav-more-list li.active a i {
    color: #2e7d32;
}

/* ============================================================
   面包屑
   ============================================================ */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 14px 0 10px;
    font-size: 0.95rem;
    color: #4a6a4a;
    border-bottom: 1px solid #e8f5e9;
    margin-bottom: 24px;
}

.breadcrumb a {
    color: #2e7d32;
    display: flex;
    align-items: center;
    gap: 4px;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .sep {
    color: #a5d6a7;
    font-size: 0.8rem;
}

.breadcrumb .current {
    color: #1e3a1e;
    font-weight: 500;
}

/* ============================================================
   面包屑里的「合作歌手」下拉
   合唱曲目在面包屑上只能放一个链接，合作歌手会"进不去" ——
   所以歌手名后面挂一个 ▾，点开列出全部歌手。单歌手时不显示三角。
   ============================================================ */

.bc-artist {
    position: relative;       /* 下拉菜单的定位基准 */
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* 三角按钮：做小一点、弱一点，不要抢歌手名的视觉重量 */
.bc-artist-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #66bb6a;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s;
}

.bc-artist-toggle:hover,
.bc-artist.open .bc-artist-toggle {
    background: #e8f5e9;
    color: #1b5e20;
}

.bc-artist.open .bc-artist-toggle i {
    transform: rotate(180deg);
}

.bc-artist-toggle i {
    transition: transform 0.2s;
}

.bc-artist-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 140px;
    max-width: 260px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid #e0efe0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(27, 94, 32, 0.12);
}

.bc-artist-menu.open {
    display: block;
}

.bc-artist-menu li {
    list-style: none;
}

/* 菜单项单独写，不用 .breadcrumb a 的 flex 布局（否则每项会被撑成整行块） */
.bc-artist-menu a {
    display: block;
    padding: 7px 12px;
    border-radius: 8px;
    color: #2e4a2e;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.15s;
}

.bc-artist-menu a:hover {
    background: #f2f8f2;
    color: #1b5e20;
    text-decoration: none;
}

/* 当前这位（面包屑上已经显示的那位）标出来，避免"点了一圈又回来"的困惑 */
.bc-artist-menu a.is-current {
    color: #66bb6a;
    font-weight: 600;
}

.bc-artist-menu a.is-current::after {
    content: "✓";
    margin-left: 6px;
    font-size: 0.8rem;
}

/* 窄屏：菜单不超出屏幕 */
@media (max-width: 480px) {
    .bc-artist-menu {
        left: auto;
        right: 0;
    }
}

/* ============================================================
   板块标题
   ============================================================ */




.section-title .count {
    font-size: 0.9rem;
    color: #6a8a6a;
    font-weight: 400;
}

.section-title a {
    font-size: 0.95rem;
    color: #388e3c;
}

.section-title a:hover {
    text-decoration: underline;
}

/* ============================================================
   卡片网格
   ============================================================ */




.music-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(46, 125, 50, 0.10);
}















.music-card .card-body .snippet a {
    color: inherit;
}

.music-card .card-body .snippet a:hover {
    color: #2e7d32;
}

.music-card .card-body .card-date {
    font-size: 0.8rem;
    color: #8aaa8a;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.badge {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 14px;
    border-radius: 20px;
    margin-top: 8px;
}

.badge-interpret {
    display: inline-block;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 14px;
    border-radius: 20px;
    margin-top: 6px;
}

/* ============================================================
   底部
   ============================================================ */
.site-footer {
    margin-top: 40px;
    padding: 35px 0 25px;
    border-top: 2px solid #dcedc8;
    background: #fff;
    border-radius: 24px 24px 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: #4a6a4a;
}

.site-footer .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #4a6a4a;
}
.site-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #4a6a4a;
}

.site-footer .footer-links a {
    color: #2e7d32;
}
.site-footer .footer-bottom a {
    color: #2e7d32;
}

.site-footer .footer-links a:hover {
    text-decoration: underline;
}
.site-footer .footer-bottom a:hover {
    text-decoration: underline;
}

.site-footer .copyright {
    text-align: center;
    font-size: 0.85rem;
    color: #6a8a6a;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #edf7ed;
}

/* 页脚免责声明（全站公共） */
.site-footer .footer-declare {
    max-width: 900px;
    margin: 0 auto 12px;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #7a967a;
}

/* ============================================================
   返回顶部
   ============================================================ */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2e7d32;
    color: #fff;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(46, 125, 50, 0.25);
    transition: 0.3s;
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
}

.back-to-top:hover {
    background: #1b5e20;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(46, 125, 50, 0.35);
}

.back-to-top.visible {
    display: flex;
}

/* ============================================================
   页面收藏（右下角两个浮动按钮，在"返回顶部"上方）
     · 星星 = 收藏 / 取消当前页
     · 书签 = 展开收藏列表
   数据只存 localStorage（换浏览器就没了），不经过服务端。
   ============================================================ */
.fav-fab {
    position: fixed;
    right: 30px;
    width: 48px;
    height: 48px;
    display: flex;                    /* 常显（不像返回顶部要滚动才出现） */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #2e7d32;
    border: 1px solid #cfe0d3;
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    transition: 0.25s;
    z-index: 999;
}

#favListBtn { bottom: 88px; }         /* 返回顶部：30 + 48 + 10 */
#favStar    { bottom: 146px; }        /* 列表按钮：88 + 48 + 10 */

.fav-fab:hover {
    background: #f2f8f3;
    color: #1b5e20;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(46, 125, 50, .25);
}

/* 已收藏 / 面板已展开：按钮点亮 */
.fav-fab.on {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}
.fav-fab.on:hover { background: #1b5e20; }

/* 收藏列表：在按钮左侧展开 */
.fav-panel {
    position: fixed;
    right: 90px;
    bottom: 30px;
    width: min(320px, calc(100vw - 110px));
    max-height: min(62vh, 460px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #dfe8e2;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    z-index: 1000;
    overflow: hidden;
}
.fav-panel[hidden] { display: none; }

.fav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #eef3ef;
    background: #f7faf8;
}
.fav-title { font-size: 14px; font-weight: 600; color: #2e4a37; }
.fav-close {
    border: 0;
    background: transparent;
    padding: 0 2px;
    font-size: 20px;
    line-height: 1;
    color: #8ba394;
    cursor: pointer;
}
.fav-close:hover { color: #45624e; }

.fav-list { overflow-y: auto; padding: 6px; }
.fav-item { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.fav-item:hover { background: #f4f8f5; }
.fav-item-link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 6px;
    font-size: 13px;
    color: #33503d;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fav-item-link:hover { color: #1b5e20; }
.fav-del {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    color: #a8b8ad;
    cursor: pointer;
}
.fav-del:hover { color: #c0392b; background: #fdecea; }
.fav-empty {
    margin: 0;
    padding: 14px 12px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #8ba394;
}
.fav-empty[hidden] { display: none; }

@media (max-width: 640px) {
    .fav-fab { right: 16px; width: 42px; height: 42px; font-size: 1rem; }
    #favListBtn { bottom: 80px; }
    #favStar    { bottom: 132px; }
    .fav-panel { right: 66px; bottom: 20px; }
}

/* ============================================================
   打印公共隐藏
   ============================================================ */
@media print {
    body {
    background: #fff;
    padding: 0;
}

    .header_wrap {
    display: none !important;
}
.breadcrumb {
    display: none !important;
}
.section-title {
    display: none !important;
}
.card-grid {
    display: none !important;
}
.site-footer {
    display: none !important;
}
.nav-search {
    display: none !important;
}
.back-to-top {
    display: none !important;
}
#navToggle {
    display: none !important;
}
.navbar-toggle {
    display: none !important;
}
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px) {
    /* 导航条本身当定位上下文，展开的菜单才能相对它悬浮 */
    .floow-nav {
    position: relative;
}

    .navbar-toggle {
    display: block;
}

    /* 展开的菜单**脱离文档流**，悬浮在页面之上。
       原来它在文档流里（width:100%），一点开就把整个页面往下推、内容整体跳一下；
       改成绝对定位后页面纹丝不动，菜单像抽屉一样浮在上面。 */
    #navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
    padding: 12px 16px 16px;
    background: #fff;
    border-top: 1px solid #e8f5e9;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    z-index: 150;
}

    #navigation.open {
    display: flex;
}

    #nav {
    flex-direction: column;
    width: 100%;
    gap: 4px;
}

    #nav li a {
    padding: 8px 16px;
    width: 100%;
    border-radius: 8px;
}

    /*#nav li:first-child a,*/
    #nav li.active a {
    background: #2e7d32;
    color: #fff;
}

    .nav-search {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
}

    .nav-search input {
    flex: 1;
    min-width: auto;
}

    .lang-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    background: #f8fbf8;
    border-radius: 8px;
    margin-top: 0;
    padding: 4px 0;
    width: 100%;
    display: none;
    max-height: none;
}

    .lang-dropdown.open {
    display: block;
}


    .lang-switch .lang-dropdown.open {
    display: block;
}

    .lang-dropdown li a {
    padding: 8px 16px 8px 36px;
    justify-content: flex-start;
}

    .card-grid {
    grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 480px) {
    #header #logo img {
    height: 40px;
}

    body {
    padding: 0 10px;
}

    .card-grid {
    grid-template-columns: 1fr;
}

    .section-title h2 {
    font-size: 1.4rem;
}

    .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
}
}

/* ============================================================
   卡片图片：加载中的闪烁占位 + 整卡可点击
   .is-loading / .is-error 由 JS 添加；无 JS 时不影响正常显示
   ============================================================ */


/* 整卡可点击：标题链接拉伸覆盖整张卡片（点图片、点空白处都能进详情页） */
.music-card .card-body h3 a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* 歌手链接浮在拉伸层之上，保证还能单独点歌手 */
.music-card .card-body .artists a {
    color: #388e3c;
    position: relative;
    z-index: 2;
}



.music-card .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.music-card:hover .card-img img {
    transform: scale(1.04);
}

/* 加载中：图片先隐藏，显示闪烁扫光 */
.music-card .card-img.is-loading img {
    opacity: 0;
}



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

/* 加载失败：改用中性底色 */
.music-card .card-img.is-error {
    background: #e8efe8;
}


/* ============================================================
   UI 精修：Hero 光晕、板块标题装饰、卡片网格对齐
   ============================================================ */

/* ----- Hero：渐变光晕 + 标题渐变字 ----- */
.hero {
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: -30% -10%;
    background:
        radial-gradient(55% 55% at 18% 20%, rgba(102,187,106,0.30), transparent 62%),
        radial-gradient(45% 45% at 88% 12%, rgba(46,125,50,0.22), transparent 62%);
    animation: heroGlow 14s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes heroGlow {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to { transform: translate3d(1.5%, 1%, 0) scale(1.07); }
}
.hero h1 {
    color: #1b3a1b;
    letter-spacing: 1.5px;
    background: linear-gradient(115deg, #14461c 0%, #43a047 48%, #1b5e20 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----- 板块标题：左侧渐变装饰条 + 更多链接动效 ----- */

.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 62%;
    border-radius: 999px;
    background: linear-gradient(180deg, #66bb6a, #1b5e20);
    box-shadow: 0 0 10px rgba(67,160,71,0.45);
}
.section-title h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e3a1e;
    letter-spacing: 0.5px;
}

.section-title > a:hover {
    color: #1b5e20;
    transform: translateX(3px);
}

/* ----- 卡片网格：同行等高 + 标题/简介两行截断（消除参差） ----- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 20px;
    grid-auto-rows: 1fr;
}
.music-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: 0.25s;
    border: 1px solid #eaf5ea;
    position: relative;
    display: flex;
    flex-direction: column;
}


.music-card .card-body .snippet {
    font-size: 0.92rem;
    color: #3d4f3d;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: auto;
}

/* ============================================================
   UI 精修 Part2：按钮统一 / 板块节奏 / 封面遮罩 / 歌词排版 / 返回顶部 / 深色模式
   ============================================================ */

/* ----- 按钮体系统一（去平台收听 / 工具按钮） ----- */
.play-link {
    border-radius: 999px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.section-title > a {
    display: inline-block;
    border-radius: 999px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.play-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.tool-btn {
    border-radius: 999px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    background: #f2f8f2;
    border: 1px solid #dcedc8;
    color: #2e4a2e;
}
.tool-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    background: #e8f5e9;
    border-color: #a5d6a7;
    color: #1b5e20;
}
.tool-btn.active {
    background: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}

/* ----- 板块节奏：标题上方淡分隔 ----- */
.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 30px 0 16px;
    border-bottom: 2px solid #dcedc8;
    padding-bottom: 8px;
    position: relative;
    padding-left: 16px;
    border-top: 1px dashed #e8f2e8;
    padding-top: 22px;
    margin-top: 32px;
}
.section-title:first-of-type {
    border-top: 0;
    margin-top: 10px;
    padding-top: 0;
}

/* 歌词收录页用的是 h1（页面主标题），样式对齐板块标题的 h2 */
.section-title h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1b5e20;
    margin: 0;
    line-height: 1.4;
}

/* ----- 卡片封面渐变遮罩（底部压暗，提升层级感） ----- */


/* ----- 歌词正文排版（含 LRC 左侧时间轴竖线 + 逐行高亮） ----- */
.lyric-version p {
    margin: 0 0 .55em;
    line-height: 1.95;
    color: #26402a;
    border-radius: 8px;
    padding: 2px 8px;
    transition: background .18s ease, color .18s ease;
}
.lyric-version p:hover {
    background: #eef7ee;
    color: #14351a;
}
.right-column .lyric-version p {
    padding-left: 14px;
    border-left: 3px solid #d7ecd7;
    color: #3a5a3a;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .95em;
}
.right-column .lyric-version p:hover {
    border-left-color: #43a047;
    background: #f4fbf4;
}

/* ----- 返回顶部按钮 ----- */
#backToTop {
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #43a047, #1b5e20);
    color: #fff;
    box-shadow: 0 8px 22px rgba(27,94,32,.35);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#backToTop:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 28px rgba(27,94,32,.45);
}

/* ----- 滚动出场动画 ----- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
}
.reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) { .reveal {
    opacity: 1;
    transform: none;
    transition: none;
}
.reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
} }

/* ----- 深色模式 ----- */
@media (prefers-color-scheme: dark) and (min-width: 999999px) {  /* ★ 夜间模式暂时停用（2026-10 ✓ 用户要求）✗ 恢复就删掉 and (min-width: 999999px) ✓ */
    body {
    background: #10160f !important;
    color: #d9e6d9 !important;
}
    .header_wrap {
    background: #131c15 !important;
    border-bottom-color: #24352a !important;
}
    .music-card {
    background: #162013 !important;
    border-color: #24352a !important;
    box-shadow: none !important;
}
.lyric-main {
    background: #162013 !important;
    border-color: #24352a !important;
    box-shadow: none !important;
}
.artist-list-box {
    background: #162013 !important;
    border-color: #24352a !important;
    box-shadow: none !important;
}
.faq-section {
    background: #162013 !important;
    border-color: #24352a !important;
    box-shadow: none !important;
}
.site-footer {
    background: #162013 !important;
    border-color: #24352a !important;
    box-shadow: none !important;
}
    .card-grid .music-card .card-body h3 a {
    color: #d9e6d9 !important;
}
.lyric-main h1 {
    color: #d9e6d9 !important;
}
#nav li a {
    color: #d9e6d9 !important;
}
    #nav li a:hover {
    background: #1e2c22 !important;
}
    .music-card .card-body .artists {
    color: #93ab93 !important;
}
.card-body .snippet a {
    color: #93ab93 !important;
}
.section-title .count {
    color: #93ab93 !important;
}
    .lyric-version p {
    color: #cfe0cf !important;
}
    .lyric-version p:hover {
    background: #1d2a20 !important;
}
    .section-title {
    border-top-color: #22301f !important;
}
    .hero {
    background: linear-gradient(180deg, #16231a, #10160f) !important;
}
    .hero h1 {
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(115deg,#a5d6a7,#66bb6a,#c8e6c9) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
}
html[data-theme="dark"] body {
    background: #10160f !important;
    color: #d9e6d9 !important;
}html[data-theme="dark"] .header_wrap {
    background: #131c15 !important;
    border-bottom-color: #24352a !important;
}html[data-theme="dark"] .music-card {
    background: #162013 !important;
    border-color: #24352a !important;
    box-shadow: none !important;
}html[data-theme="dark"] .lyric-main {
    background: #162013 !important;
    border-color: #24352a !important;
    box-shadow: none !important;
}html[data-theme="dark"] .artist-list-box {
    background: #162013 !important;
    border-color: #24352a !important;
    box-shadow: none !important;
}html[data-theme="dark"] .faq-section {
    background: #162013 !important;
    border-color: #24352a !important;
    box-shadow: none !important;
}html[data-theme="dark"] .site-footer {
    background: #162013 !important;
    border-color: #24352a !important;
    box-shadow: none !important;
}html[data-theme="dark"] .card-grid .music-card .card-body h3 a {
    color: #d9e6d9 !important;
}html[data-theme="dark"] .lyric-main h1 {
    color: #d9e6d9 !important;
}html[data-theme="dark"] #nav li a {
    color: #d9e6d9 !important;
}html[data-theme="dark"] #nav li a:hover {
    background: #1e2c22 !important;
}html[data-theme="dark"] .music-card .card-body .artists {
    color: #93ab93 !important;
}html[data-theme="dark"] .card-body .snippet a {
    color: #93ab93 !important;
}html[data-theme="dark"] .section-title .count {
    color: #93ab93 !important;
}html[data-theme="dark"] .lyric-version p {
    color: #cfe0cf !important;
}html[data-theme="dark"] .lyric-version p:hover {
    background: #1d2a20 !important;
}html[data-theme="dark"] .section-title {
    border-top-color: #22301f !important;
}html[data-theme="dark"] .hero {
    background: linear-gradient(180deg, #16231a, #10160f) !important;
}html[data-theme="dark"] .hero h1 {
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(115deg,#a5d6a7,#66bb6a,#c8e6c9) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}


/* ============================================================
   UI 精修 Part3：歌手页头部长卡片 + 歌词元信息 + 解读页 TOC
   ============================================================ */

/* ----- 卡片封面叠字相关规则见下方「卡片」段落 ----- */






/* ----- 歌手页头部：渐变大背景 + 统计胶囊 ----- */
.artist-header {
    background: linear-gradient(135deg, #eef9ee 0%, #d7eed7 55%, #c3e6c6 100%);
    border: 1px solid #dcedc8;
    border-radius: 24px;
    padding: 26px 30px;
    position: relative;
    overflow: hidden;
}
.artist-header::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102,187,106,.35), rgba(102,187,106,0) 70%);
    pointer-events: none;
}
.artist-header .artist-info .meta {
    gap: 10px;
    flex-wrap: wrap;
}
.artist-header .artist-info .meta > span {
    background: rgba(255,255,255,.78);
    border: 1px solid #dcedc8;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .9rem;
    color: #2e4a2e;
    box-shadow: 0 2px 8px rgba(46,125,50,.06);
}
.artist-header .artist-avatar {
    box-shadow: 0 8px 26px rgba(46,125,50,.18);
}

/* ----- 歌词元信息条 ----- */
.lyric-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 14px;
}
.lyric-meta-bar span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f2f9f2;
    border: 1px solid #dcedc8;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: .85rem;
    color: #3a5a3a;
}
.lyric-meta-bar span i {
    color: #43a047;
}

/* ----- 解读页：阅读进度条 + 目录 ----- */
.read-progress {
    position: fixed;
    left: 0;
    top: 0;
    height: 3px;
    width: 0;

/* ============================================================
   五线谱（staff-core.js 渲染的 SVG）
   ------------------------------------------------------------
   放在 style.css 而不是 page-static.css 或 page-tool.css：
   **乐理页和在线乐器页都要用它**，而工具外壳（temp/tool.php）
   只加载 style.css + page-tool.css，乐理页加载 style.css + page-static.css。
   style.css 是两边唯一的交集，放这里才能一份样式走遍全站。

   谱面数据由 MusicTheory::staffScore()（服务端）或
   Staff.fromMidi()（乐器页，MIDI 给定）算好，前端只画。
   这里只管外观：白底、细边框、窄屏可横向滚动。
   ============================================================ */
.staff-box {
    margin: 14px 0 18px;
    padding: 12px 14px 10px;
    background: #fcfdfc;
    border: 1px solid #e6ece8;
    border-radius: 10px;
    overflow-x: auto;              /* 音多的谱子（音阶 8 个音）窄屏要能滑 */
    text-align: center;
}

.staff-box.is-chord { padding-bottom: 6px; }

.staff-svg {
    display: inline-block;
    max-width: none;               /* 不缩，靠容器滚动，免得音符挤成一团 */
    vertical-align: top;
}

.staff-clef { font-family: "Bravura", "Noto Music", "Segoe UI Symbol", serif; }
.staff-names { font-family: inherit; letter-spacing: .02em; }

/* 谱子下方的音名/说明 */
.staff-caption {
    margin: 6px 0 0;
    font-size: 12px;
    color: #7a8f80;
    text-align: center;
}

/* 谱子右上角（标题 + 播放按钮） */
.staff-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.staff-title {
    font-size: 13px;
    font-weight: 600;
    color: #46604c;
}

/* 谱子右上角的按钮组（调页的「上行 / 下行」两个听法）。
   按钮本身复用 .th-play（在 page-static.css 里），
   这里只负责横向排齐 —— 否则两个按钮各自的 margin-left 会让间距不一致。 */
.staff-actions {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.staff-actions > .th-play:first-child { margin-left: 0; }

/* 窄屏：左右内边距收一点，给谱子留宽度 */
@media (max-width: 640px) {
    .staff-box { padding: 10px 8px 8px; }
}

/* 在线乐器页的实时谱面：复用上面的 .staff-box 外观，
   外层只是给它一点上下留白 + 空态提示。 */
.piano-staff,
.fret-staff {
    margin: 12px 0 4px;
}
.piano-staff .staff-box,
.fret-staff .staff-box { margin: 6px 0 0; }
.piano-staff-empty {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: #7a8f80;
    text-align: center;
}
.piano-staff-empty[hidden] { display: none; }

    background: linear-gradient(90deg, #66bb6a, #1b5e20);
    z-index: 999;
    transition: width .12s linear;
}
.article-toc {
    background: #f7fcf7;
    border: 1px solid #e6f1e6;
    border-radius: 16px;
    padding: 16px 20px;
    margin: 0 0 22px;
}
.article-toc h3 {
    font-size: 1rem;
    margin: 0 0 10px;
    color: #1b5e20;
}
.article-toc ol {
    margin: 0;
    padding-left: 20px;
}
.article-toc li {
    margin: 5px 0;
    line-height: 1.5;
}
.article-toc a {
    color: #2e7d32;
}
.article-toc a:hover {
    text-decoration: underline;
}

/* ----- 深色模式补充 ----- */
@media (prefers-color-scheme: dark) and (min-width: 999999px) {  /* ★ 夜间模式暂时停用（2026-10 ✓ 用户要求）✗ 恢复就删掉 and (min-width: 999999px) ✓ */
    
    .artist-header {
    background: linear-gradient(135deg,#1a2a1d,#162013 60%,#101a12) !important;
    border-color: #24352a !important;
}
    .artist-header .artist-info .meta > span {
    background: rgba(255,255,255,.06) !important;
    border-color: #24352a !important;
    color: #cfe0cf !important;
}
    .artist-header .artist-info h1 {
    color: #d9e6d9 !important;
}
.artist-header .desc {
    color: #d9e6d9 !important;
}
    .lyric-meta-bar span {
    background: #182418 !important;
    border-color: #24352a !important;
    color: #b9cdb9 !important;
}
    .article-toc {
    background: #162013 !important;
    border-color: #24352a !important;
}
    .article-toc h3 {
    color: #a5d6a7 !important;
}
.article-toc a {
    color: #a5d6a7 !important;
}
}
html[data-theme="dark"] .artist-header {
    background: linear-gradient(135deg,#1a2a1d,#162013 60%,#101a12) !important;
    border-color: #24352a !important;
}html[data-theme="dark"] .artist-header .artist-info .meta > span {
    background: rgba(255,255,255,.06) !important;
    border-color: #24352a !important;
    color: #cfe0cf !important;
}html[data-theme="dark"] .artist-header .artist-info h1 {
    color: #d9e6d9 !important;
}html[data-theme="dark"] .artist-header .desc {
    color: #d9e6d9 !important;
}html[data-theme="dark"] .lyric-meta-bar span {
    background: #182418 !important;
    border-color: #24352a !important;
    color: #b9cdb9 !important;
}html[data-theme="dark"] .article-toc {
    background: #162013 !important;
    border-color: #24352a !important;
}html[data-theme="dark"] .article-toc h3 {
    color: #a5d6a7 !important;
}html[data-theme="dark"] .article-toc a {
    color: #a5d6a7 !important;
}


/* ============================================================
   卡片：标题叠在封面之上（歌手落在底部白底区）
   ============================================================ */

.music-card .card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position: relative;
    z-index: 2;
    margin-top: 0 !important;
    padding-top: 14px !important;
    background: transparent !important;
}


.music-card .card-body h3 a:hover {
    color: #c8f5cb !important;
}
@media (prefers-color-scheme: dark) and (min-width: 999999px) {  /* ★ 夜间模式暂时停用（2026-10 ✓ 用户要求）✗ 恢复就删掉 and (min-width: 999999px) ✓ */
    .music-card .card-body {
    background: transparent !important;
}
}
html[data-theme="dark"] .music-card .card-body {
    background: transparent !important;
}


/* ============================================================
   Part5：封面可点击 + 标题两行截断 + 点击穿透
   ============================================================ */

.music-card .card-img.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 25%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0) 75%);
    transform: translateX(-100%);
    animation: cardShimmer 1.2s linear infinite;
    pointer-events: none;
}
/* 标题整块不拦截点击，空白处穿透到封面链接 */



/* ============================================================
   Part6：封面盖一层「极淡的朦胧蒙版」+ 收紧标题下方留白 + 歌手两行省略
   （首页 / 歌手列表页 / 歌词页猜你喜欢·随机歌词 / 解读页 共用）
   ============================================================ */

/* ----- 0) 封面独立成一个图层，整块压在标题（card-body z-index:2）之下 ----- */
.music-card .card-img {
    aspect-ratio: 16 / 9;
    background: #dcedc8;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ----- 1) 蒙版：一层极淡的薄纱盖在图片上（不做模糊），文字压在这层之上 ----- */
.music-card .card-img::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    height: 100% !important;
    z-index: 3 !important;
    background: linear-gradient(180deg,
        rgba(10, 22, 12, .12) 0%,
        rgba(10, 22, 12, .16) 50%,
        rgba(10, 22, 12, .45) 100%) !important;
}

/* ----- 2) 标题：撤掉之前的投影，只保留一层很轻的文字阴影 ----- */
.music-card .card-body h3 {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    z-index: 3;
    min-height: 44px;
    display: flex;
    align-items: flex-end;
    padding: 0 2px;
    pointer-events: none;
    filter: none;
    margin: -70px 0 18px !important;
}
.music-card .card-body h3 a {
    color: #fff !important;
    pointer-events: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45) !important;
}

/* ----- 3) 歌手最多占两行，超出部分用省略号截断（纯 CSS，不改 HTML） ----- */
.music-card .card-body .artists {
    font-size: 0.9rem;
    color: #5a7a5a;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 封面上手指光标 */
.music-card .card-img > a.card-img-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

/* ============================================================
   MANUAL DARK MODE (2026-10)
   ------------------------------------------------------------
   与上面的 @media (prefers-color-scheme: dark) 逐条同源，
   只是触发条件换成 html[data-theme=dark]（右侧按钮 + js.js 控制）。
   本块由 tools 脚本生成，请勿手改：改了 @media 那块后重跑脚本即可。
   注意：规则必须放在顶层（前缀加在选择器上），
   否则声明块里套规则属于非法结构，会被浏览器整块忽略。
   ============================================================ */

/* ============================================================
   Dark mode toggle button position + fab colors (2026-10)
   - Button reuses .fav-fab, only differs in bottom offset.
     Existing stack (bottom-up): backtotop 30 / favListBtn 88 / favStar 146
     New button => 204 (= 146 + 48 + 10), sits above the favorites buttons.
     Narrow screens (<= 640px): 132 + 42 + 10 => 190.
   - Floating buttons are white by default, which looks harsh in dark mode,
     so both trigger paths get a dark variant (auto + manual).
   ============================================================ */
#favTheme { bottom: 204px; }
@media (max-width: 640px) { #favTheme { bottom: 190px; } }

@media (prefers-color-scheme: dark) and (min-width: 999999px) {  /* ★ 夜间模式暂时停用（2026-10 ✓ 用户要求）✗ 恢复就删掉 and (min-width: 999999px) ✓ */
    .fav-fab { background: #162013; color: #8fd9a0; border-color: #24352a; box-shadow: none; }
    .fav-fab:hover { background: #1d2a1e; color: #a8e6b8; }
    .fav-fab.on { background: #2e7d32; border-color: #2e7d32; color: #fff; }
    .fav-panel { background: #131c15; border-color: #24352a; }
    .fav-title { color: #d9e6d9; }
    .fav-item { border-color: #24352a; }
    .fav-item a { color: #cfe4d4; }
    .fav-empty { color: #7e9a86; }
}
html[data-theme="dark"] .fav-fab { background: #162013; color: #8fd9a0; border-color: #24352a; box-shadow: none; }
html[data-theme="dark"] .fav-fab:hover { background: #1d2a1e; color: #a8e6b8; }
html[data-theme="dark"] .fav-fab.on { background: #2e7d32; border-color: #2e7d32; color: #fff; }
html[data-theme="dark"] .fav-panel { background: #131c15; border-color: #24352a; }
html[data-theme="dark"] .fav-title { color: #d9e6d9; }
html[data-theme="dark"] .fav-item { border-color: #24352a; }
html[data-theme="dark"] .fav-item a { color: #cfe4d4; }
html[data-theme="dark"] .fav-empty { color: #7e9a86; }

/* ===== 深色美化补丁（手动按钮那条路 ✓ 由脚本从 dark_polish.css 生成 ✗ 勿手改）===== */

/* ============================================================
   深色模式美化补丁（2026-10 ✓ 用户逐条反馈后加）
   ------------------------------------------------------------
   用户反馈原话汇总 ✓：
     · 钢琴页主体背景还是白的 ✗ 要变深
     · 深色下绿色字没变亮 ✗ 和背景"融在一起"✗ 很丑 ⇒ 要"绿里带白"地提亮
     · 卡片要有"淡淡的绿/白"层次 ✗ 现在太平
     · 钢琴曲谱页 / 钢琴曲库 / 歌词收录 还有白块 ✗ 文字也要更白
     · 卡片底色要比页面底稍绿一点 ✗ 才能分出层次
     · 音乐百科 / 音乐工具 / 在线乐器 三个分类页背景要美化
   做法说明 ✓：
     · 全部带 !important ✗ 因为本站基础规则权重不低（与站里既有深色写法一致 ✓）
     · 每组都**同时**写成两种触发（媒体查询 + 手动 data-theme ✗ 见文件末尾的孪生块）
     · 配色沿用站里那套 ✓：底 #10160f ✗ 卡片 #1a261c ✗ 边框 #2a3f2e
       正文 #dff3e4（绿里带白 ✗ 比原来的 #2e7d32 亮得多 ✓ 这才是"不融进背景"✓）
       链接 #a8e6b8 ✗ 标题 #ecf9f0 ✗ 次要文字 #9cc4a8
   ============================================================ */

/* ① 页面底：不用纯黑 ✗ 用带一点绿的深色（用户要的"透亮的墨绿"✓） */
html[data-theme="dark"] body {
    background: #10160f !important;
    color: #dff3e4 !important;
}

/* ② 所有"白底容器"统一变深 ✗ 并且比页面底**稍亮稍绿**✗ 层次才出来 ✓ */
html[data-theme="dark"] .tool-panel,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .tool-card-body,
html[data-theme="dark"] .tool-embed-body,
html[data-theme="dark"] .tool-wrap,
html[data-theme="dark"] .music-card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .piano-panel,
html[data-theme="dark"] .piano-staff,
html[data-theme="dark"] .pkl-table,
html[data-theme="dark"] .pkl-box,
html[data-theme="dark"] .hub-cta,
html[data-theme="dark"] .article,
html[data-theme="dark"] .lyric-main,
html[data-theme="dark"] .artist-list-box,
html[data-theme="dark"] .lang-dropdown,
html[data-theme="dark"] .fav-panel {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}

/* ③ 卡片再给一层"极淡的绿白渐变" ✗ 不要平涂（用户要的"淡淡的效果"✓） */
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .music-card,
html[data-theme="dark"] .piano-panel {
    background: linear-gradient(180deg, #202f22 0%, #1a261c 46%, #162013 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 6px 18px rgba(0, 0, 0, .35) !important;
}

/* ④ 文字：绿 → **绿里带白**（这是用户最在意的一条 ✗ 原来的绿在深底上"融进去"了 ✓）
      标题最亮 ✗ 正文次之 ✗ 次要文字再暗一档 ✓ */
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] strong,
html[data-theme="dark"] .tool-panel h1, html[data-theme="dark"] .tool-panel h2,
html[data-theme="dark"] .tool-panel h3, html[data-theme="dark"] .tool-title,
html[data-theme="dark"] .card-title, html[data-theme="dark"] .pkl-title {
    color: #ecf9f0 !important;
}
html[data-theme="dark"] .tool-panel,
html[data-theme="dark"] .tool-panel p,
html[data-theme="dark"] .tool-panel li,
html[data-theme="dark"] .tool-panel span,
html[data-theme="dark"] .tool-panel label,
html[data-theme="dark"] .tool-panel div,
html[data-theme="dark"] .pkl-table td,
html[data-theme="dark"] .article p,
html[data-theme="dark"] .fav-item a {
    color: #dff3e4 !important;
}
html[data-theme="dark"] a,
html[data-theme="dark"] a:visited,
html[data-theme="dark"] .tool-panel a,
html[data-theme="dark"] .pkl-table a,
html[data-theme="dark"] .fav-item a {
    color: #a8e6b8 !important;
}
html[data-theme="dark"] a:hover,
html[data-theme="dark"] .tool-panel a:hover {
    color: #cdf5d8 !important;
}
/* 次要文字：时间 / 统计 / 提示 / 鸣谢 / 表格表头 */
html[data-theme="dark"] .tool-stat,
html[data-theme="dark"] .tool-hint,
html[data-theme="dark"] .piano-hint,
html[data-theme="dark"] .piano-credit,
html[data-theme="dark"] .piano-time,
html[data-theme="dark"] .pkl-meta,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted {
    color: #9cc4a8 !important;
}

/* ⑤ 按钮 / 下拉 / 输入框：深底 + 亮边 ✗ 不用纯白块（不然一片白点很刺眼 ✓） */
html[data-theme="dark"] .tool-btn:not(.primary),
html[data-theme="dark"] .pkl-btn,
html[data-theme="dark"] .pkl-btn.ghost,
html[data-theme="dark"] .hub-cta a.ghost,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] button:not(.primary):not(.pk-white):not(.pk-black) {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .tool-btn:hover:not(.primary),
html[data-theme="dark"] .pkl-btn:hover {
    background: #263a28 !important;
    color: #ecf9f0 !important;
}
html[data-theme="dark"] .tool-btn.primary,
html[data-theme="dark"] button.primary {
    background: #2f7d3f !important;
    border-color: #3f9b52 !important;
    color: #f2fff5 !important;
}

/* ⑥ 三个分类页（音乐百科 / 音乐工具 / 在线乐器）：底上再补一层**极淡的绿光**✗
      让大面积深色不至于死板（用户要的"美化"✓） */
html[data-theme="dark"] .hub-hero,
html[data-theme="dark"] .tool-hero,
html[data-theme="dark"] .page-head,
html[data-theme="dark"] .wiki-head,
html[data-theme="dark"] .instruments-head {
    background:
        radial-gradient(1200px 320px at 50% -60px, rgba(90, 200, 130, .10), transparent 70%),
        #121c14 !important;
    border-color: #2a3f2e !important;
}

/* ⑦ 表格 / 分割线 / 标签：换成低饱和深绿边 ✗ 不要灰白线 ✓ */
html[data-theme="dark"] hr,
html[data-theme="dark"] .pkl-table th,
html[data-theme="dark"] .pkl-table td,
html[data-theme="dark"] .tool-panel table,
html[data-theme="dark"] .tool-panel th,
html[data-theme="dark"] .tool-panel td {
    border-color: #2a3f2e !important;
}
html[data-theme="dark"] .pkl-table thead th,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .chip {
    background: #1e2b20 !important;
    color: #a8e6b8 !important;
}

/* ⑧ 滚动条：跟着变深 ✗ 否则深色页面上一条亮白滚动条很跳 ✓ */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #141d16 !important; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2f4a33 !important; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3d6142 !important; }


/* ===== 深色美化补丁（跟随系统那条路 ✓ 由脚本从 dark_polish.css 生成 ✗ 勿手改）===== */
@media (prefers-color-scheme: dark) and (min-width: 999999px) {  /* ★ 夜间模式暂时停用（2026-10 ✓ 用户要求）✗ 恢复就删掉 and (min-width: 999999px) ✓ */
/* ============================================================
   深色模式美化补丁（2026-10 ✓ 用户逐条反馈后加）
   ------------------------------------------------------------
   用户反馈原话汇总 ✓：
     · 钢琴页主体背景还是白的 ✗ 要变深
     · 深色下绿色字没变亮 ✗ 和背景"融在一起"✗ 很丑 ⇒ 要"绿里带白"地提亮
     · 卡片要有"淡淡的绿/白"层次 ✗ 现在太平
     · 钢琴曲谱页 / 钢琴曲库 / 歌词收录 还有白块 ✗ 文字也要更白
     · 卡片底色要比页面底稍绿一点 ✗ 才能分出层次
     · 音乐百科 / 音乐工具 / 在线乐器 三个分类页背景要美化
   做法说明 ✓：
     · 全部带 !important ✗ 因为本站基础规则权重不低（与站里既有深色写法一致 ✓）
     · 每组都**同时**写成两种触发（媒体查询 + 手动 data-theme ✗ 见文件末尾的孪生块）
     · 配色沿用站里那套 ✓：底 #10160f ✗ 卡片 #1a261c ✗ 边框 #2a3f2e
       正文 #dff3e4（绿里带白 ✗ 比原来的 #2e7d32 亮得多 ✓ 这才是"不融进背景"✓）
       链接 #a8e6b8 ✗ 标题 #ecf9f0 ✗ 次要文字 #9cc4a8
   ============================================================ */

/* ① 页面底：不用纯黑 ✗ 用带一点绿的深色（用户要的"透亮的墨绿"✓） */
body {
    background: #10160f !important;
    color: #dff3e4 !important;
}

/* ② 所有"白底容器"统一变深 ✗ 并且比页面底**稍亮稍绿**✗ 层次才出来 ✓ */
.tool-panel,
.tool-card,
.tool-card-body,
.tool-embed-body,
.tool-wrap,
.music-card,
.card-body,
.piano-panel,
.piano-staff,
.pkl-table,
.pkl-box,
.hub-cta,
.article,
.lyric-main,
.artist-list-box,
.lang-dropdown,
.fav-panel {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}

/* ③ 卡片再给一层"极淡的绿白渐变" ✗ 不要平涂（用户要的"淡淡的效果"✓） */
.tool-card,
.music-card,
.piano-panel {
    background: linear-gradient(180deg, #202f22 0%, #1a261c 46%, #162013 100%) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 6px 18px rgba(0, 0, 0, .35) !important;
}

/* ④ 文字：绿 → **绿里带白**（这是用户最在意的一条 ✗ 原来的绿在深底上"融进去"了 ✓）
      标题最亮 ✗ 正文次之 ✗ 次要文字再暗一档 ✓ */
h1, h2,
h3, h4,
h5, strong,
.tool-panel h1, .tool-panel h2,
.tool-panel h3, .tool-title,
.card-title, .pkl-title {
    color: #ecf9f0 !important;
}
.tool-panel,
.tool-panel p,
.tool-panel li,
.tool-panel span,
.tool-panel label,
.tool-panel div,
.pkl-table td,
.article p,
.fav-item a {
    color: #dff3e4 !important;
}
a,
a:visited,
.tool-panel a,
.pkl-table a,
.fav-item a {
    color: #a8e6b8 !important;
}
a:hover,
.tool-panel a:hover {
    color: #cdf5d8 !important;
}
/* 次要文字：时间 / 统计 / 提示 / 鸣谢 / 表格表头 */
.tool-stat,
.tool-hint,
.piano-hint,
.piano-credit,
.piano-time,
.pkl-meta,
small,
.muted {
    color: #9cc4a8 !important;
}

/* ⑤ 按钮 / 下拉 / 输入框：深底 + 亮边 ✗ 不用纯白块（不然一片白点很刺眼 ✓） */
.tool-btn:not(.primary),
.pkl-btn,
.pkl-btn.ghost,
.hub-cta a.ghost,
input,
select,
textarea,
button:not(.primary):not(.pk-white):not(.pk-black) {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #dff3e4 !important;
}
.tool-btn:hover:not(.primary),
.pkl-btn:hover {
    background: #263a28 !important;
    color: #ecf9f0 !important;
}
.tool-btn.primary,
button.primary {
    background: #2f7d3f !important;
    border-color: #3f9b52 !important;
    color: #f2fff5 !important;
}

/* ⑥ 三个分类页（音乐百科 / 音乐工具 / 在线乐器）：底上再补一层**极淡的绿光**✗
      让大面积深色不至于死板（用户要的"美化"✓） */
.hub-hero,
.tool-hero,
.page-head,
.wiki-head,
.instruments-head {
    background:
        radial-gradient(1200px 320px at 50% -60px, rgba(90, 200, 130, .10), transparent 70%),
        #121c14 !important;
    border-color: #2a3f2e !important;
}

/* ⑦ 表格 / 分割线 / 标签：换成低饱和深绿边 ✗ 不要灰白线 ✓ */
hr,
.pkl-table th,
.pkl-table td,
.tool-panel table,
.tool-panel th,
.tool-panel td {
    border-color: #2a3f2e !important;
}
.pkl-table thead th,
.tag,
.chip {
    background: #1e2b20 !important;
    color: #a8e6b8 !important;
}

/* ⑧ 滚动条：跟着变深 ✗ 否则深色页面上一条亮白滚动条很跳 ✓ */
::-webkit-scrollbar-track { background: #141d16 !important; }
::-webkit-scrollbar-thumb { background: #2f4a33 !important; }
::-webkit-scrollbar-thumb:hover { background: #3d6142 !important; }
}

/* ============================================================
   深色模式补丁 · 第二批（2026-10 ✓ 用户逐条反馈后加）
   ------------------------------------------------------------
   对应用户反馈 ✓：
     · 音乐工具页头部简介"太墨了"✗ 要"绿白绿白的"⇒ 提亮
     · 音乐工具页的工具卡片 背景还是白的 ✗ 字体没变 ⇒ 一起改
     · 每个具体工具页**几乎都有大面积白** ⇒ 统一处理
     · 音乐百科头部简介发灰 ⇒ 提亮
     · 歌词收录页**页码数字太浅**（白底上更看不清 ✓）⇒ 加深加边框
     · 钢琴曲库头部简介/统计说明太浅 ✗ 12 首曲目列表**背景还是白的**⇒ 改
     · 首页**绿字要荧光效果** ✗ 背景"黑得要死"⇒ 提亮 + 加光晕
     · 首页"在线钢琴试听"副盒子是白的 ⇒ 改
     · 首页**常见问题答案字太淡** ⇒ 改白
   ============================================================ */

/* ① 首页底：提亮一点（用户原话"黑得要死"✗ 纯 #10160f 确实偏沉 ✓） */
html[data-theme="dark"] body { background: #121b14 !important; }

/* ② 首页绿字 → 加**荧光**（淡淡的光晕 ✗ 不要刺眼 ✓） */
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .hp-title h2 {
    color: #eaf9ee !important;
    text-shadow: 0 0 16px rgba(110, 220, 150, .22), 0 0 2px rgba(180, 255, 205, .18) !important;
}
html[data-theme="dark"] .hp-more,
html[data-theme="dark"] .hp-more:hover {
    color: #86efac !important;
    text-shadow: 0 0 12px rgba(134, 239, 172, .38) !important;
}
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .section-title p { color: #d6ecd9 !important; }

/* ③ 首页「在线钢琴试听」副盒子（.hp-stage 整块原来是白的 ✓） */
html[data-theme="dark"] .hp-stage {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
}
html[data-theme="dark"] .hp-stage-body,
html[data-theme="dark"] .hp-bar { background: transparent !important; }
html[data-theme="dark"] .hp-bar b { color: #eaf9ee !important; }
html[data-theme="dark"] .hp-bar em,
html[data-theme="dark"] .hp-tip { color: #9cc4a8 !important; }
html[data-theme="dark"] .hp-bar-tag {
    background: #1e2b20 !important;
    color: #a8e6b8 !important;
    border-color: #33502f !important;
}
html[data-theme="dark"] .hp-pick-label { color: #9cc4a8 !important; }
html[data-theme="dark"] .hp-pick-select {
    background: #1e2b20 !important;
    color: #dff3e4 !important;
    border-color: #33502f !important;
}

/* ④ 首页卡片（曲目卡 / 工具卡） */
html[data-theme="dark"] .music-card,
html[data-theme="dark"] .pc-card {
    background: linear-gradient(180deg, #1f2e21 0%, #162013 100%) !important;
    border-color: #2a3f2e !important;
}
html[data-theme="dark"] .card-body { color: #dff3e4 !important; }

/* ⑤ 首页「常见问题」答案要更白（用户说"看着不明显"✓） */
html[data-theme="dark"] .faq-section h3 { color: #eaf9ee !important; }
html[data-theme="dark"] .faq-item h4 { color: #a8e6b8 !important; }
html[data-theme="dark"] .faq-item p,
html[data-theme="dark"] .faq-section p { color: #e4f6e9 !important; }

/* ⑥ 音乐工具 / 百科 / 乐器：头部简介"太墨"⇒ 加绿白 */
html[data-theme="dark"] .hub-hero,
html[data-theme="dark"] .tool-hero,
html[data-theme="dark"] .pkl-hero { color: #eaf9ee !important; }
html[data-theme="dark"] .hub-hero p,
html[data-theme="dark"] .tool-hero p,
html[data-theme="dark"] .tool-intro,
html[data-theme="dark"] .pkl-hero p,
html[data-theme="dark"] .pkl-hero .tool-intro { color: #dcf0e0 !important; }

/* ⑦ 工具卡片：白底 → 深绿渐变 + 字体变亮 */
html[data-theme="dark"] .tool-card {
    background: linear-gradient(180deg, #1f2e21 0%, #162013 100%) !important;
    border-color: #2a3f2e !important;
}
html[data-theme="dark"] .tool-card h3 { color: #ecf9f0 !important; }
html[data-theme="dark"] .tool-card p { color: #cfe6d5 !important; }
html[data-theme="dark"] .tool-card-more,
html[data-theme="dark"] .tool-card-badge { color: #a8e6b8 !important; }

/* ⑧ 具体工具页：几乎每个都有大面积白 ⇒ 统一压深 */
html[data-theme="dark"] .tool-panel,
html[data-theme="dark"] .tool-panel .tool-sec,
html[data-theme="dark"] .tool-panel .tool-block,
html[data-theme="dark"] .tool-panel .tool-box,
html[data-theme="dark"] .tool-panel .tool-card,
html[data-theme="dark"] .tool-panel .tool-side { background: #1a261c !important; }
html[data-theme="dark"] .tool-panel .tool-intro,
html[data-theme="dark"] .tool-panel .tool-desc,
html[data-theme="dark"] .tool-panel .tool-note,
html[data-theme="dark"] .tool-panel .tool-sub { color: #dcf0e0 !important; }
html[data-theme="dark"] .tool-panel input,
html[data-theme="dark"] .tool-panel select,
html[data-theme="dark"] .tool-panel textarea {
    background: #1e2b20 !important;
    color: #dff3e4 !important;
    border-color: #33502f !important;
}
html[data-theme="dark"] .tool-panel textarea::placeholder,
html[data-theme="dark"] .tool-panel input::placeholder { color: #7fa389 !important; }

/* ⑨ 钢琴曲库：头部 / 统计 / 12 首曲目列表 */
html[data-theme="dark"] .pkl-table,
html[data-theme="dark"] .pkl-work {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
}
html[data-theme="dark"] .pkl-work:hover { border-color: #4a8a58 !important; }
html[data-theme="dark"] .pkl-work-b b { color: #ecf9f0 !important; }
html[data-theme="dark"] .pkl-work-b em,
html[data-theme="dark"] .pkl-search-reset,
html[data-theme="dark"] .pkl-stat span { color: #9cc4a8 !important; }
html[data-theme="dark"] .pkl-stat b { color: #8ce0a2 !important; }
html[data-theme="dark"] .pkl-search input[type="search"] {
    background: #1e2b20 !important;
    color: #dff3e4 !important;
    border-color: #33502f !important;
}

/* ⑩ 歌词收录：页码数字太浅（白底时更看不清 ✓）⇒ 加深 + 描边 + 选中态点亮 */
html[data-theme="dark"] .lyrics-pager,
html[data-theme="dark"] .pg-nums { color: #cfe6d5 !important; }
html[data-theme="dark"] .lyrics-pager a,
html[data-theme="dark"] .pg-nums a,
html[data-theme="dark"] .pg-nums span {
    color: #dff3e4 !important;
    background: #1e2b20 !important;
    border: 1px solid #33502f !important;
}
html[data-theme="dark"] .lyrics-pager a:hover,
html[data-theme="dark"] .pg-nums a:hover { background: #263a28 !important; color: #ecf9f0 !important; }
html[data-theme="dark"] .pg-nums .is-on,
html[data-theme="dark"] .pg-nums .on,
html[data-theme="dark"] .pg-nums .current,
html[data-theme="dark"] .lyrics-pager .is-on {
    background: #2f7d3f !important;
    color: #f4fff7 !important;
    border-color: #46a05a !important;
}


/* ===== 深色补丁 第二批（跟随系统那条路 ✓ 脚本生成 ✗ 勿手改）===== */
@media (prefers-color-scheme: dark) and (min-width: 999999px) {  /* ★ 夜间模式暂时停用（2026-10 ✓ 用户要求）✗ 恢复就删掉 and (min-width: 999999px) ✓ */
/* ============================================================
   深色模式补丁 · 第二批（2026-10 ✓ 用户逐条反馈后加）
   ------------------------------------------------------------
   对应用户反馈 ✓：
     · 音乐工具页头部简介"太墨了"✗ 要"绿白绿白的"⇒ 提亮
     · 音乐工具页的工具卡片 背景还是白的 ✗ 字体没变 ⇒ 一起改
     · 每个具体工具页**几乎都有大面积白** ⇒ 统一处理
     · 音乐百科头部简介发灰 ⇒ 提亮
     · 歌词收录页**页码数字太浅**（白底上更看不清 ✓）⇒ 加深加边框
     · 钢琴曲库头部简介/统计说明太浅 ✗ 12 首曲目列表**背景还是白的**⇒ 改
     · 首页**绿字要荧光效果** ✗ 背景"黑得要死"⇒ 提亮 + 加光晕
     · 首页"在线钢琴试听"副盒子是白的 ⇒ 改
     · 首页**常见问题答案字太淡** ⇒ 改白
   ============================================================ */

/* ① 首页底：提亮一点（用户原话"黑得要死"✗ 纯 #10160f 确实偏沉 ✓） */
body { background: #121b14 !important; }

/* ② 首页绿字 → 加**荧光**（淡淡的光晕 ✗ 不要刺眼 ✓） */
.hero h1,
.section-title h2,
.hp-title h2 {
    color: #eaf9ee !important;
    text-shadow: 0 0 16px rgba(110, 220, 150, .22), 0 0 2px rgba(180, 255, 205, .18) !important;
}
.hp-more,
.hp-more:hover {
    color: #86efac !important;
    text-shadow: 0 0 12px rgba(134, 239, 172, .38) !important;
}
.hero p,
.section-title p { color: #d6ecd9 !important; }

/* ③ 首页「在线钢琴试听」副盒子（.hp-stage 整块原来是白的 ✓） */
.hp-stage {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
}
.hp-stage-body,
.hp-bar { background: transparent !important; }
.hp-bar b { color: #eaf9ee !important; }
.hp-bar em,
.hp-tip { color: #9cc4a8 !important; }
.hp-bar-tag {
    background: #1e2b20 !important;
    color: #a8e6b8 !important;
    border-color: #33502f !important;
}
.hp-pick-label { color: #9cc4a8 !important; }
.hp-pick-select {
    background: #1e2b20 !important;
    color: #dff3e4 !important;
    border-color: #33502f !important;
}

/* ④ 首页卡片（曲目卡 / 工具卡） */
.music-card,
.pc-card {
    background: linear-gradient(180deg, #1f2e21 0%, #162013 100%) !important;
    border-color: #2a3f2e !important;
}
.card-body { color: #dff3e4 !important; }

/* ⑤ 首页「常见问题」答案要更白（用户说"看着不明显"✓） */
.faq-section h3 { color: #eaf9ee !important; }
.faq-item h4 { color: #a8e6b8 !important; }
.faq-item p,
.faq-section p { color: #e4f6e9 !important; }

/* ⑥ 音乐工具 / 百科 / 乐器：头部简介"太墨"⇒ 加绿白 */
.hub-hero,
.tool-hero,
.pkl-hero { color: #eaf9ee !important; }
.hub-hero p,
.tool-hero p,
.tool-intro,
.pkl-hero p,
.pkl-hero .tool-intro { color: #dcf0e0 !important; }

/* ⑦ 工具卡片：白底 → 深绿渐变 + 字体变亮 */
.tool-card {
    background: linear-gradient(180deg, #1f2e21 0%, #162013 100%) !important;
    border-color: #2a3f2e !important;
}
.tool-card h3 { color: #ecf9f0 !important; }
.tool-card p { color: #cfe6d5 !important; }
.tool-card-more,
.tool-card-badge { color: #a8e6b8 !important; }

/* ⑧ 具体工具页：几乎每个都有大面积白 ⇒ 统一压深 */
.tool-panel,
.tool-panel .tool-sec,
.tool-panel .tool-block,
.tool-panel .tool-box,
.tool-panel .tool-card,
.tool-panel .tool-side { background: #1a261c !important; }
.tool-panel .tool-intro,
.tool-panel .tool-desc,
.tool-panel .tool-note,
.tool-panel .tool-sub { color: #dcf0e0 !important; }
.tool-panel input,
.tool-panel select,
.tool-panel textarea {
    background: #1e2b20 !important;
    color: #dff3e4 !important;
    border-color: #33502f !important;
}
.tool-panel textarea::placeholder,
.tool-panel input::placeholder { color: #7fa389 !important; }

/* ⑨ 钢琴曲库：头部 / 统计 / 12 首曲目列表 */
.pkl-table,
.pkl-work {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
}
.pkl-work:hover { border-color: #4a8a58 !important; }
.pkl-work-b b { color: #ecf9f0 !important; }
.pkl-work-b em,
.pkl-search-reset,
.pkl-stat span { color: #9cc4a8 !important; }
.pkl-stat b { color: #8ce0a2 !important; }
.pkl-search input[type="search"] {
    background: #1e2b20 !important;
    color: #dff3e4 !important;
    border-color: #33502f !important;
}

/* ⑩ 歌词收录：页码数字太浅（白底时更看不清 ✓）⇒ 加深 + 描边 + 选中态点亮 */
.lyrics-pager,
.pg-nums { color: #cfe6d5 !important; }
.lyrics-pager a,
.pg-nums a,
.pg-nums span {
    color: #dff3e4 !important;
    background: #1e2b20 !important;
    border: 1px solid #33502f !important;
}
.lyrics-pager a:hover,
.pg-nums a:hover { background: #263a28 !important; color: #ecf9f0 !important; }
.pg-nums .is-on,
.pg-nums .on,
.pg-nums .current,
.lyrics-pager .is-on {
    background: #2f7d3f !important;
    color: #f4fff7 !important;
    border-color: #46a05a !important;
}
}

/* ============================================================
   深色模式补丁 · 第三批（2026-10 ✓ 按"浅底/深绿字"全量扫描结果写）
   ------------------------------------------------------------
   方法论 ✓（回应"你自己检查一遍"✓）：
     我这边**没有浏览器 ✗ 无法截图**✗ 但可以**扫描 CSS**✗
     把所有"浅色底"（#fff / #fX / white）与"深绿字"（#2e7d32 等）
     的规则逐条列出来 ✗ 本补丁就是**对着那份清单**写的 ✓
     ⇒ 覆盖：歌手页 / 解读页 / 歌词页 / 曲库 / 聚合页 / 404 / 文档法务页
   ============================================================ */

/* ---------- ① 聚合页 hub.css ---------- */
html[data-theme="dark"] .hub-card,
html[data-theme="dark"] .hub-links li,
html[data-theme="dark"] .hub-stats span {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .hub-cta a.ghost {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #a8e6b8 !important;
}
html[data-theme="dark"] .hub-cta a.ghost:hover {
    background: #263a28 !important;
    color: #cdf5d8 !important;
}
html[data-theme="dark"] .hub-stats b { color: #8ce0a2 !important; }
html[data-theme="dark"] .hub-note { color: #9cc4a8 !important; }
html[data-theme="dark"] .hub-links a { color: #a8e6b8 !important; }

/* ---------- ② 404 页 ---------- */
html[data-theme="dark"] .error-container,
html[data-theme="dark"] .recommend-box {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .error-btn {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .error-btn.secondary:hover { background: #263a28 !important; }
html[data-theme="dark"] .lang-dropdown {
    background: #16201a !important;
    border-color: #2a3f2e !important;
}
html[data-theme="dark"] .lang-dropdown li a { color: #cfe6d5 !important; }
html[data-theme="dark"] .lang-dropdown li a:hover,
html[data-theme="dark"] .lang-dropdown li a.active-lang {
    background: #22301f !important;
    color: #a8e6b8 !important;
}
html[data-theme="dark"] .lang-dropdown li a .lang-code {
    background: #1e2b20 !important;
    color: #9cc4a8 !important;
}
html[data-theme="dark"] .recommend-box h3,
html[data-theme="dark"] .recommend-box a { color: #a8e6b8 !important; }
html[data-theme="dark"] .recommend-box a:hover { color: #cdf5d8 !important; }

/* ---------- ③ 歌手页（含分页） ---------- */
html[data-theme="dark"] .artist-avatar {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
}
html[data-theme="dark"] .artist-info h1 { color: #eaf9ee !important; }
html[data-theme="dark"] .artist-info .meta { color: #9cc4a8 !important; }
html[data-theme="dark"] .pagination-wrap a,
html[data-theme="dark"] .pagination-wrap .page-current {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .pagination-wrap a:hover,
html[data-theme="dark"] .pagination-wrap .page-current {
    background: #2f7d3f !important;
    border-color: #46a05a !important;
    color: #f4fff7 !important;
}

/* ---------- ④ 解读页（长文排版 ✓ 最容易漏的一块） ---------- */
html[data-theme="dark"] .article-main h1,
html[data-theme="dark"] .article-content h2,
html[data-theme="dark"] .article-content h3,
html[data-theme="dark"] .article-content h4 { color: #eaf9ee !important; }
html[data-theme="dark"] .article-content,
html[data-theme="dark"] .article-content p,
html[data-theme="dark"] .article-content li { color: #dff3e4 !important; }
html[data-theme="dark"] .article-content a,
html[data-theme="dark"] .article-content a:hover { color: #a8e6b8 !important; }
html[data-theme="dark"] .article-content blockquote,
html[data-theme="dark"] .article-content code,
html[data-theme="dark"] .article-content th {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .article-main .meta .artists a { color: #a8e6b8 !important; }
html[data-theme="dark"] .related-readings h3 { color: #eaf9ee !important; }
html[data-theme="dark"] .related-readings a { color: #a8e6b8 !important; }

/* ---------- ⑤ 歌词页 song.css（详情页与播放页共用 ✓） ---------- */
html[data-theme="dark"] .lyric-main h1 { color: #eaf9ee !important; }
html[data-theme="dark"] .lyric-main .meta .artists a { color: #a8e6b8 !important; }
html[data-theme="dark"] .piano-embed { background: #1a261c !important; border-color: #2a3f2e !important; }
html[data-theme="dark"] .lyric-tools a,
html[data-theme="dark"] .lyric-tab {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .lyric-tab.active,
html[data-theme="dark"] .lyric-toggle-btn.active {
    background: #2f7d3f !important;
    border-color: #46a05a !important;
    color: #f4fff7 !important;
}
html[data-theme="dark"] .lyric-version p:hover { background: #1e2b20 !important; }
/* ★ 平台按钮的品牌色必须保留（B站粉 / YouTube 红 ✓）✗ 只压裸露的白底 ✓ */
html[data-theme="dark"] .tool-btn:not(.primary):not(.play-bilibili):not(.play-youtube) {
    background: #1e2b20 !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .tool-btn.active { background: #2f7d3f !important; color: #f4fff7 !important; }

/* ---------- ⑥ 钢琴曲库（扫描出 18 条浅底 ✗ 逐条覆盖 ✓） ---------- */
html[data-theme="dark"] .pkl-stat,
html[data-theme="dark"] .pkl-kind,
html[data-theme="dark"] .pkl-composer,
html[data-theme="dark"] .pkl-mini,
html[data-theme="dark"] .pkl-links li,
html[data-theme="dark"] .pkl-langs li,
html[data-theme="dark"] .pkl-work,
html[data-theme="dark"] .pkl-work-i,
html[data-theme="dark"] .pkl-kind-body i {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .pkl-table,
html[data-theme="dark"] .pkl-table tbody th,
html[data-theme="dark"] .pkl-table thead th {
    background: #16201a !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .pkl-table-list tr:hover td { background: #1e2b20 !important; }
html[data-theme="dark"] .pkl-stat b,
html[data-theme="dark"] .pkl-kind-icon { color: #8ce0a2 !important; }
html[data-theme="dark"] .pkl-stat span,
html[data-theme="dark"] .pkl-note,
html[data-theme="dark"] .pkl-alt,
html[data-theme="dark"] .pkl-kind-body em { color: #9cc4a8 !important; }
html[data-theme="dark"] .pkl-work-b b { color: #ecf9f0 !important; }
html[data-theme="dark"] .pkl-work-b em { color: #9cc4a8 !important; }
html[data-theme="dark"] .pkl-links a,
html[data-theme="dark"] .pkl-langs a { color: #a8e6b8 !important; }

/* ---------- ⑦ 文档与法务页（关于我们 / 隐私政策 / 免责声明 / 版权 ✓） ---------- */
html[data-theme="dark"] .page-body,
html[data-theme="dark"] .doc-body,
html[data-theme="dark"] .legal-box,
html[data-theme="dark"] .static-box,
html[data-theme="dark"] .policy-box {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .page-body h2,
html[data-theme="dark"] .doc-body h2,
html[data-theme="dark"] .legal-box h2,
html[data-theme="dark"] .static-box h2 { color: #eaf9ee !important; }
html[data-theme="dark"] .page-body p,
html[data-theme="dark"] .doc-body p,
html[data-theme="dark"] .legal-box p,
html[data-theme="dark"] .static-box p { color: #dff3e4 !important; }
html[data-theme="dark"] .page-body a,
html[data-theme="dark"] .doc-body a,
html[data-theme="dark"] .legal-box a,
html[data-theme="dark"] .static-box a { color: #a8e6b8 !important; }

/* ---------- ⑧ 首页剩余浅底（扫描出的三处 ✓） ---------- */
html[data-theme="dark"] .hp-card,
html[data-theme="dark"] .hp-pick-select {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #dff3e4 !important;
}
html[data-theme="dark"] .hp-card-play { background: #2f7d3f !important; color: #f4fff7 !important; }
html[data-theme="dark"] .hp-card-play:hover { background: #3f9b52 !important; }
html[data-theme="dark"] .artist-list-box { background: #1a261c !important; border-color: #2a3f2e !important; }
html[data-theme="dark"] .artist-list-box h3 { color: #eaf9ee !important; }
html[data-theme="dark"] .artist-list-box a { color: #a8e6b8 !important; }
html[data-theme="dark"] .artist-list-box a:hover { color: #cdf5d8 !important; }
html[data-theme="dark"] .hero h1 { color: #eaf9ee !important; text-shadow: 0 0 16px rgba(110, 220, 150, .22) !important; }
html[data-theme="dark"] .hero p { color: #d6ecd9 !important; }
html[data-theme="dark"] .hero .quick-links a { color: #a8e6b8 !important; }
html[data-theme="dark"] .hero .quick-links a:hover { color: #cdf5d8 !important; }


/* ===== 深色补丁 第三批（跟随系统那条路 ✓ 脚本生成 ✗ 勿手改）===== */
@media (prefers-color-scheme: dark) and (min-width: 999999px) {  /* ★ 夜间模式暂时停用（2026-10 ✓ 用户要求）✗ 恢复就删掉 and (min-width: 999999px) ✓ */
/* ============================================================
   深色模式补丁 · 第三批（2026-10 ✓ 按"浅底/深绿字"全量扫描结果写）
   ------------------------------------------------------------
   方法论 ✓（回应"你自己检查一遍"✓）：
     我这边**没有浏览器 ✗ 无法截图**✗ 但可以**扫描 CSS**✗
     把所有"浅色底"（#fff / #fX / white）与"深绿字"（#2e7d32 等）
     的规则逐条列出来 ✗ 本补丁就是**对着那份清单**写的 ✓
     ⇒ 覆盖：歌手页 / 解读页 / 歌词页 / 曲库 / 聚合页 / 404 / 文档法务页
   ============================================================ */

/* ---------- ① 聚合页 hub.css ---------- */
.hub-card,
.hub-links li,
.hub-stats span {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
.hub-cta a.ghost {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #a8e6b8 !important;
}
.hub-cta a.ghost:hover {
    background: #263a28 !important;
    color: #cdf5d8 !important;
}
.hub-stats b { color: #8ce0a2 !important; }
.hub-note { color: #9cc4a8 !important; }
.hub-links a { color: #a8e6b8 !important; }

/* ---------- ② 404 页 ---------- */
.error-container,
.recommend-box {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
.error-btn {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #dff3e4 !important;
}
.error-btn.secondary:hover { background: #263a28 !important; }
.lang-dropdown {
    background: #16201a !important;
    border-color: #2a3f2e !important;
}
.lang-dropdown li a { color: #cfe6d5 !important; }
.lang-dropdown li a:hover,
.lang-dropdown li a.active-lang {
    background: #22301f !important;
    color: #a8e6b8 !important;
}
.lang-dropdown li a .lang-code {
    background: #1e2b20 !important;
    color: #9cc4a8 !important;
}
.recommend-box h3,
.recommend-box a { color: #a8e6b8 !important; }
.recommend-box a:hover { color: #cdf5d8 !important; }

/* ---------- ③ 歌手页（含分页） ---------- */
.artist-avatar {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
}
.artist-info h1 { color: #eaf9ee !important; }
.artist-info .meta { color: #9cc4a8 !important; }
.pagination-wrap a,
.pagination-wrap .page-current {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #dff3e4 !important;
}
.pagination-wrap a:hover,
.pagination-wrap .page-current {
    background: #2f7d3f !important;
    border-color: #46a05a !important;
    color: #f4fff7 !important;
}

/* ---------- ④ 解读页（长文排版 ✓ 最容易漏的一块） ---------- */
.article-main h1,
.article-content h2,
.article-content h3,
.article-content h4 { color: #eaf9ee !important; }
.article-content,
.article-content p,
.article-content li { color: #dff3e4 !important; }
.article-content a,
.article-content a:hover { color: #a8e6b8 !important; }
.article-content blockquote,
.article-content code,
.article-content th {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
.article-main .meta .artists a { color: #a8e6b8 !important; }
.related-readings h3 { color: #eaf9ee !important; }
.related-readings a { color: #a8e6b8 !important; }

/* ---------- ⑤ 歌词页 song.css（详情页与播放页共用 ✓） ---------- */
.lyric-main h1 { color: #eaf9ee !important; }
.lyric-main .meta .artists a { color: #a8e6b8 !important; }
.piano-embed { background: #1a261c !important; border-color: #2a3f2e !important; }
.lyric-tools a,
.lyric-tab {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #dff3e4 !important;
}
.lyric-tab.active,
.lyric-toggle-btn.active {
    background: #2f7d3f !important;
    border-color: #46a05a !important;
    color: #f4fff7 !important;
}
.lyric-version p:hover { background: #1e2b20 !important; }
/* ★ 平台按钮的品牌色必须保留（B站粉 / YouTube 红 ✓）✗ 只压裸露的白底 ✓ */
.tool-btn:not(.primary):not(.play-bilibili):not(.play-youtube) {
    background: #1e2b20 !important;
    color: #dff3e4 !important;
}
.tool-btn.active { background: #2f7d3f !important; color: #f4fff7 !important; }

/* ---------- ⑥ 钢琴曲库（扫描出 18 条浅底 ✗ 逐条覆盖 ✓） ---------- */
.pkl-stat,
.pkl-kind,
.pkl-composer,
.pkl-mini,
.pkl-links li,
.pkl-langs li,
.pkl-work,
.pkl-work-i,
.pkl-kind-body i {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
.pkl-table,
.pkl-table tbody th,
.pkl-table thead th {
    background: #16201a !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
.pkl-table-list tr:hover td { background: #1e2b20 !important; }
.pkl-stat b,
.pkl-kind-icon { color: #8ce0a2 !important; }
.pkl-stat span,
.pkl-note,
.pkl-alt,
.pkl-kind-body em { color: #9cc4a8 !important; }
.pkl-work-b b { color: #ecf9f0 !important; }
.pkl-work-b em { color: #9cc4a8 !important; }
.pkl-links a,
.pkl-langs a { color: #a8e6b8 !important; }

/* ---------- ⑦ 文档与法务页（关于我们 / 隐私政策 / 免责声明 / 版权 ✓） ---------- */
.page-body,
.doc-body,
.legal-box,
.static-box,
.policy-box {
    background: #1a261c !important;
    border-color: #2a3f2e !important;
    color: #dff3e4 !important;
}
.page-body h2,
.doc-body h2,
.legal-box h2,
.static-box h2 { color: #eaf9ee !important; }
.page-body p,
.doc-body p,
.legal-box p,
.static-box p { color: #dff3e4 !important; }
.page-body a,
.doc-body a,
.legal-box a,
.static-box a { color: #a8e6b8 !important; }

/* ---------- ⑧ 首页剩余浅底（扫描出的三处 ✓） ---------- */
.hp-card,
.hp-pick-select {
    background: #1e2b20 !important;
    border-color: #33502f !important;
    color: #dff3e4 !important;
}
.hp-card-play { background: #2f7d3f !important; color: #f4fff7 !important; }
.hp-card-play:hover { background: #3f9b52 !important; }
.artist-list-box { background: #1a261c !important; border-color: #2a3f2e !important; }
.artist-list-box h3 { color: #eaf9ee !important; }
.artist-list-box a { color: #a8e6b8 !important; }
.artist-list-box a:hover { color: #cdf5d8 !important; }
.hero h1 { color: #eaf9ee !important; text-shadow: 0 0 16px rgba(110, 220, 150, .22) !important; }
.hero p { color: #d6ecd9 !important; }
.hero .quick-links a { color: #a8e6b8 !important; }
.hero .quick-links a:hover { color: #cdf5d8 !important; }
}

/* ============================================================
   日间模式「还原」规则（2026-10 ✓ 修一个真实 bug ✓）
   ------------------------------------------------------------
   ★ 症状 ✓：手机系统是深色时 ✗ 点夜间按钮切到"日间"**关不掉**✓
     原因 ✗：原来"日间"= 移除 data-theme ✗
       而 `@media (prefers-color-scheme: dark)` 依然生效 ⇒ 页面还是深色 ✓
   ★ 修法 ✓：JS 显式写 `data-theme="light"`✗
     这里补一组 `html[data-theme="light"]` 的还原规则 ✗ 把主要界面显式变回浅色 ✓
     ★ 权重 ✓：`html[data-theme="light"] .x` = (0,2,1)✗
       高于 `@media` 里的 `.x` = (0,1,1)⇒ **稳赢**✗ 不需要动那些 @media 块 ✓
   ★ 只还原"确定知道原值"的表面 ✗ 黑键本来就是黑的 ✗ 不碰 ✓
   ============================================================ */
html[data-theme="light"] body { background: #f5faf5 !important; color: #1e2e1e !important; }
html[data-theme="light"] .header_wrap { background: #fff !important; border-bottom-color: #e8f5e9 !important; box-shadow: 0 2px 12px rgba(0,0,0,.04) !important; }
html[data-theme="light"] .music-card,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .tool-panel,
html[data-theme="light"] .piano-panel,
html[data-theme="light"] .article-main,
html[data-theme="light"] .lyric-main,
html[data-theme="light"] .pkl-table,
html[data-theme="light"] .pkl-work,
html[data-theme="light"] .hub-card,
html[data-theme="light"] .hp-card,
html[data-theme="light"] .artist-list-box,
html[data-theme="light"] .fav-panel,
html[data-theme="light"] .recommend-box,
html[data-theme="light"] .lang-dropdown {
    background: #fff !important;
    border-color: #e3e9e4 !important;
    color: #1e2e1e !important;
}
html[data-theme="light"] .pk-white {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 78%, #eef2ef 100%) !important;
    border-left-color: #dde4df !important;
    box-shadow: 0 3px 0 #cdd6d0, 0 4px 5px rgba(0, 0, 0, .28) !important;
}
html[data-theme="light"] .pk-white::before {
    background: linear-gradient(180deg, #d4ecd5 0%, #a5d6a7 60%, #8bc98e 100%) !important;
    box-shadow: inset 0 2px 6px rgba(27, 94, 32, .22) !important;
}
html[data-theme="light"] .pk-white.pk-c { border-left-color: #b2c4b8 !important; }
html[data-theme="light"] .pk-label { color: #6b7a6e !important; }
html[data-theme="light"] .fav-fab {
    background: #fff !important;
    color: #2e7d32 !important;
    border-color: #cfe0d3 !important;
}
html[data-theme="light"] .fav-fab:hover { background: #f2f8f3 !important; color: #1b5e20 !important; }
html[data-theme="light"] a { color: #2e7d32 !important; }
html[data-theme="light"] a:hover { color: #1b5e20 !important; }

/* ============================================================
   ★★★★ 2026-10 关键修复：声明 color-scheme（白键为什么"改了还是黑"的答案 ✓）
   ------------------------------------------------------------
   症状 ✓：夜间模式下钢琴白键**怎么改都是黑的**✗ 换了几次颜色都没用 ✓
   真因 ✓：手机浏览器（Chrome / Edge 的"夜间模式 / 强制深色"✓）
     在页面**没有声明 color-scheme** 时 ✗ 会**自动把浅色元素反色成深色**✓✓
     ⇒ 我把白键设成**绿白**✗ 浏览器又把它**反成黑色**⇒ 看到的永远是黑的 ✓
     ⇒ 这解释了"改对了却看着没变"✓（不是 CSS 没生效 ✗ 是被浏览器翻过去了 ✓）
   修法 ✓（标准做法 ✗ 就这三行 ✓）：
     · `:root { color-scheme: light dark; }` ⇒ 明确告诉浏览器"两套我自己处理"✓
       ⇒ **浏览器从此不再强行反色**✓✓
     · 手动切到夜间 / 日间时 ✗ 同步把 color-scheme 也切过去 ✓
       这样连**表单控件 / 滚动条 / 默认底色**都会跟着对 ✓
   ★ 放在每个 CSS 文件里 ✗ 因为有些页面只加载其中某一个 ✓
   ============================================================ */
:root { color-scheme: light dark; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }