.bg-video{
      position: fixed; right:0; bottom:0;
      min-width:100%; min-height:100%;
      width:auto; height:auto;
      z-index:-1; object-fit:cover; display:block;
    }

    .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
    .tag{
      display:inline-flex; align-items:center;
      padding:4px 10px; border-radius:999px;
      font-size:12px; font-weight:800; line-height:1;
      border:1px solid rgba(0,0,0,.08);
      user-select:none; white-space:nowrap;
    }
    .tag-default { background: rgba(148,163,184,.25); color:#0b1220; }
    .tag-replay{ background: rgba(59,130,246,.18);  color:#1e3a8a; }
    .tag-west{ background: rgba(168,85,247,.18);  color:#5b21b6; }
    .tag-instrumental{ background: rgba(34,197,94,.18);   color:#166534; }
    .tag-christmas{ background: rgba(239,68,68,.18);   color:#991b1b; }
    .tag-spring{ background: rgba(245,158,11,.18);  color:#92400e; }
    .tag-nocn{ background: rgba(100,116,139,.22); color:#0f172a; }
    .tag-pop{ background: rgba(236,72,153,.18);  color:#9d174d; }

    .filter-form{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }

    .filter-left{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:nowrap;
      min-width:0;
      max-width:100%;
      overflow:visible;
    }

    .filter-right{
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:10px;
      min-width:280px;
    }

    .filter-search-input{
      width:200px;
      max-width:100%;
      height:38px;
      padding:0 12px;
      border:1px solid rgba(0,0,0,.12);
      border-radius:10px;
      outline:none;
      font-size:14px;
      background:rgba(255,255,255,.92);
    }

    .filter-search-input:focus{
      border-color:rgba(79,70,229,.45);
      box-shadow:0 0 0 3px rgba(79,70,229,.10);
    }
    .filter-search-btn{
      height:38px;
      padding:0 16px;
      border:none;
      border-radius:10px;
      font-size:14px;
      font-weight:700;
      cursor:pointer;
      color:#fff;
      background:linear-gradient(135deg,#92400e,#b45309);
    }

    .filter-search-btn:hover{
      opacity:.95;
    }

    .date-picker{
      position:relative;
      min-width:150px;
      width:190px;
      flex:1 1 190px;
    }

    .date-picker-trigger{
      width:100%;
      min-height:46px;
      height:46px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:7px 12px;
      border:1px solid rgba(15,23,42,.10);
      border-radius:14px;
      background:rgba(255,255,255,.92);
      box-shadow:0 8px 24px rgba(15,23,42,.06);
      cursor:pointer;
      transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
    }

    .date-picker-trigger:hover{
      border-color:rgba(100,116,139,.30);
      box-shadow:0 12px 28px rgba(15,23,42,.10);
      transform:translateY(-1px);
    }

    .date-picker-main{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .date-picker-icon,
    .date-picker-option-icon{
      width:30px;
      height:30px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 30px;
      border-radius:7px;
      background:#fff;
    }

    .date-picker-icon img,
    .date-picker-option-icon img{
      width:22px;
      height:22px;
      object-fit:contain;
      display:block;
    }

    .date-picker-text,
    .date-picker-option-text{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      min-width:0;
      line-height:1.15;
    }

    .date-picker-text strong,
    .date-picker-option-text strong{
      font-size:13px;
      font-weight:800;
      color:#111827;
      white-space:nowrap;
    }

    .date-picker-text small,
    .date-picker-option-text small{
      margin-top:3px;
      font-size:11px;
      color:#94a3b8;
      white-space:nowrap;
    }

    .date-picker-arrow{
      width:9px;
      height:9px;
      flex:0 0 auto;
      border-right:2px solid #64748b;
      border-bottom:2px solid #64748b;
      transform:rotate(45deg) translateY(-2px);
      transition:transform .18s ease;
      margin-right:2px;
    }

    .date-picker.is-open .date-picker-arrow{
      transform:rotate(225deg) translate(-1px,-1px);
    }

    .date-picker-menu{
      position:absolute;
      left:0;
      top:calc(100% + 8px);
      z-index:60;
      width:min(245px, calc(100vw - 24px));
      max-height:300px;
      overflow:auto;
      padding:7px;
      border:1px solid rgba(15,23,42,.08);
      border-radius:16px;
      background:rgba(255,255,255,.98);
      box-shadow:0 18px 48px rgba(15,23,42,.16);
      opacity:0;
      visibility:hidden;
      transform:translateY(-6px);
      transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
    }

    .date-picker.is-open{
      z-index:120;
    }

    .date-picker.is-open .date-picker-menu{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }

    .date-picker-option{
      width:100%;
      display:flex;
      align-items:center;
      gap:9px;
      padding:8px 9px;
      border:0;
      border-radius:11px;
      background:transparent;
      cursor:pointer;
      text-align:left;
    }

    .date-picker-option:hover,
    .date-picker-option.is-active{
      background:rgba(15,23,42,.055);
    }

    .date-picker-option-text{
      flex:1 1 auto;
      min-width:0;
    }

    .date-picker-count{
      margin-left:auto;
      flex:0 0 auto;
      min-width:44px;
      text-align:right;
      font-size:11px;
      font-weight:700;
      color:#64748b;
      white-space:nowrap;
    }

    .date-picker-tail{
      margin-left:auto;
      display:flex;
      align-items:center;
      flex:0 0 auto;
    }

    .date-picker-native{
      position:absolute !important;
      width:1px !important;
      height:1px !important;
      opacity:0 !important;
      pointer-events:none !important;
    }

    .date-picker.is-disabled{
      opacity:.54;
    }

    .date-picker.is-disabled .date-picker-trigger{
      cursor:not-allowed;
      transform:none;
      box-shadow:0 6px 18px rgba(15,23,42,.04);
    }

    .category-picker{
      position:relative;
      min-width:100px;
      width:100px;
      flex:1 1 190px;
    }

    .category-picker-trigger{
      width:100%;
      min-height:46px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:7px 12px;
      border:1px solid rgba(15,23,42,.10);
      border-radius:14px;
      background:rgba(255,255,255,.92);
      box-shadow:0 8px 24px rgba(15,23,42,.06);
      cursor:pointer;
      transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .category-picker-trigger:hover{
      border-color:rgba(15,23,42,.18);
      box-shadow:0 12px 28px rgba(15,23,42,.10);
      transform:translateY(-1px);
    }

    .category-picker-brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .category-picker-logo,
    .category-picker-option-logo{
      width:30px;
      height:30px;
      object-fit:contain;
      border-radius:7px;
      flex:0 0 auto;
      background:#fff;
    }

    .category-picker-text,
    .category-picker-option-text{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      min-width:0;
      line-height:1.15;
    }

    .category-picker-text strong,
    .category-picker-option-text strong{
      font-size:13px;
      color:#111827;
      letter-spacing:.2px;
    }

    .category-picker-text small,
    .category-picker-option-text small{
      margin-top:3px;
      font-size:11px;
      color:#6b7280;
      white-space:nowrap;
    }

    .category-picker-arrow{
      width:8px;
      height:8px;
      border-right:2px solid #64748b;
      border-bottom:2px solid #64748b;
      transform:rotate(45deg) translateY(-2px);
      transition:transform .18s ease;
      flex:0 0 auto;
    }

    .category-picker.is-open .category-picker-arrow{
      transform:rotate(225deg) translate(-1px,-1px);
    }

    .category-picker-menu{
      position:absolute;
      left:0;
      top:calc(100% + 8px);
      z-index:50;
      width:min(245px, 86vw);
      padding:8px;
      border:1px solid rgba(15,23,42,.08);
      border-radius:16px;
      background:rgba(255,255,255,.98);
      box-shadow:0 18px 48px rgba(15,23,42,.16);
      opacity:0;
      visibility:hidden;
      transform:translateY(-6px);
      transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
    }

    .category-picker.is-open{
      z-index:120;
    }

    .category-picker.is-open .category-picker-menu{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }

    .category-picker-option{
      width:100%;
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px;
      border:0;
      border-radius:12px;
      background:transparent;
      cursor:pointer;
      text-align:left;
    }

    .category-picker-option-text{
      flex:1 1 auto;
      min-width:0;
    }

    .category-picker-option:hover,
    .category-picker-option.is-active{
      background:rgba(15,23,42,.05);
    }

    .category-picker-count{
      margin-left:auto;
      flex:0 0 auto;
      min-width:54px;
      text-align:right;
      font-size:11px;
      color:#64748b;
      white-space:nowrap;
    }

    .category-picker-native{
      position:absolute !important;
      width:1px !important;
      height:1px !important;
      opacity:0 !important;
      pointer-events:none !important;
    }

    .songs-empty-state{
      margin:18px 0 8px;
      padding:34px 22px;
      border:1px solid rgba(15,23,42,.08);
      border-radius:20px;
      background:
        radial-gradient(circle at top, rgba(255,255,255,.96), rgba(248,250,252,.88)),
        rgba(255,255,255,.88);
      box-shadow:0 12px 34px rgba(15,23,42,.07);
      text-align:center;
    }

    .songs-empty-icon{
      width:54px;
      height:54px;
      margin:0 auto 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      font-size:24px;
      font-weight:800;
      background:rgba(15,23,42,.06);
      color:#475569;
    }

    .songs-empty-title{
      font-size:17px;
      font-weight:800;
      color:#0f172a;
    }

    .songs-empty-desc{
      max-width:520px;
      margin:8px auto 0;
      font-size:13px;
      line-height:1.7;
      color:#64748b;
    }

    @media (max-width: 768px){
      .filter-form{
        align-items:stretch;
        gap:8px;
      }

      .filter-left,
      .filter-right{
        width:100%;
      }

      .filter-left{
        gap:7px;
        flex-wrap:nowrap;
        overflow:visible;
        padding-bottom:2px;
      }

      .filter-right{
        margin-left:0;
      }

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

      .date-picker{
        min-width:0;
        width:auto;
        flex:1 1 0;
      }

      .date-picker-trigger{
        min-height:38px;
        height:38px;
        padding:5px 8px;
        border-radius:11px;
        gap:7px;
      }

      .date-picker-icon,
      .date-picker-option-icon{
        width:24px;
        height:24px;
        flex-basis:24px;
        border-radius:5px;
      }

      .date-picker-icon img,
      .date-picker-option-icon img{
        width:18px;
        height:18px;
      }

      .date-picker-text strong,
      .date-picker-option-text strong{
        font-size:12px;
      }

      .date-picker-text small,
      .date-picker-option-text small{
        margin-top:2px;
        font-size:9px;
      }

      .date-picker-menu{
        width:min(220px,calc(100vw - 24px));
        top:calc(100% + 5px);
        padding:5px;
        border-radius:13px;
      }

      /* 月份位于最右侧：手机端菜单向页面内部展开，避免超出屏幕 */
      .month-picker .date-picker-menu{
        left:auto;
        right:0;
      }

      .date-picker-option{
        padding:6px 7px;
      }

      .date-picker-count{
        min-width:38px;
        font-size:9px;
      }

      .category-picker{
        min-width:0;
        width:auto;
        flex:1 1 0;
      }

      .category-picker-trigger{
        min-height:38px;
        padding:5px 8px;
        gap:7px;
        border-radius:11px;
      }

      .category-picker-logo,
      .category-picker-option-logo{
        width:24px;
        height:24px;
        border-radius:5px;
      }

      .category-picker-brand{
        gap:7px;
      }

      .category-picker-text strong,
      .category-picker-option-text strong{
        font-size:12px;
      }

      .category-picker-text small,
      .category-picker-option-text small{
        margin-top:1px;
        font-size:10px;
      }

      .category-picker-menu{
        width:min(245px, calc(100vw - 32px));
        top:calc(100% + 5px);
        padding:5px;
        border-radius:12px;
      }

      .category-picker-option{
        min-height:42px;
        gap:7px;
        padding:6px 7px;
        border-radius:9px;
      }

      .category-picker-count{
        min-width:46px;
        margin-left:auto;
        text-align:right;
        font-size:10px;
      }

      .category-picker-arrow{
        width:7px;
        height:7px;
      }

    }

    @media (max-width: 420px){
      .category-picker,
      .date-picker{
        min-width:0;
        width:auto;
        flex:1 1 0;
      }

      .category-picker-trigger,
      .date-picker-trigger{
        padding-left:6px;
        padding-right:6px;
        gap:4px;
      }

      .category-picker-brand,
      .date-picker-main{
        gap:5px;
      }

      .category-picker-text small,
      .date-picker-text small{
        max-width:54px;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .category-picker-menu{
        width:min(220px, calc(100vw - 24px));
      }

      .month-picker .date-picker-menu{
        left:auto;
        right:0;
        width:min(220px, calc(100vw - 16px));
      }

      .category-picker-option{
        min-height:38px;
        padding:5px 6px;
      }

      .category-picker-logo,
      .category-picker-option-logo{
        width:22px;
        height:22px;
      }

      .category-picker-count{
        min-width:44px;
        margin-left:auto;
        text-align:right;
      }
    }
  

/* ===== Extracted from index.php inline <style> blocks ===== */
.song[data-playable="0"]{
  cursor:not-allowed !important;
  filter:grayscale(.82);
  opacity:.58;
  pointer-events:auto;
}
.song[data-playable="0"] .cover-image{
  filter:grayscale(1);
  opacity:.78;
}
.song[data-playable="0"] .song-info h2,
.song[data-playable="0"] .song-info p{
  color:#64748b !important;
}
.song[data-playable="0"] .tag{
  filter:grayscale(1);
  opacity:.72;
}
.song[data-playable="0"] .btn-like,
.song[data-playable="0"] .btn-detail{
  opacity:.42 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}
.song[data-playable="0"]::after{
  content:"暂时无法播放";
  position:absolute;
  right:14px;
  bottom:10px;
  font-size:10px;
  font-weight:800;
  color:#94a3b8;
  letter-spacing:.2px;
  pointer-events:none;
}
.song[data-playable="0"]{
  position:relative;
}
@media(max-width:600px){
  .song[data-playable="0"]::after{
    right:10px;
    bottom:7px;
    font-size:9px;
  }
}