/* ============================================================
   冬恋 · AI 音乐馆
   深蓝夜色 / 冷调玻璃 / 暖金高亮 / 雪飘在一切之上
   ============================================================ */

:root{
  --bg-0:#04090f; --bg-1:#0a1622; --bg-2:#122536;
  --glass: rgba(11,23,36,.66);
  --glass-2: rgba(16,31,47,.82);
  --line: rgba(150,190,230,.10);
  --line-2: rgba(150,190,230,.20);
  --tx:#d6e3f1; --tx-2:#a2b7cc; --tx-3:#7389a0;
  --snow:#eef5fd; --cold:#a6cbe9; --warm:#e6be8f;
  --r:14px;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --serif:"Songti SC","Source Han Serif SC","SimSun",Georgia,serif;
  --mono:"SF Mono","JetBrains Mono","Consolas",ui-monospace,monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--sans);
  color:var(--tx);
  background-color:var(--bg-0);
  background-image:
    radial-gradient(1250px 760px at 76% -12%, rgba(84,140,190,.30), transparent 62%),
    radial-gradient(1000px 680px at 8% 112%, rgba(46,94,134,.24), transparent 60%),
    radial-gradient(700px 460px at 50% 48%, rgba(58,104,146,.12), transparent 70%),
    linear-gradient(180deg,#050d16 0%, #081726 42%, #040b13 100%);
  background-attachment:fixed;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- 背景层 ---------- */
#snow{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:60; pointer-events:none;
}
.vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:
    radial-gradient(140% 110% at 50% 45%, transparent 52%, rgba(2,6,11,.55) 100%),
    linear-gradient(180deg, rgba(3,8,14,.42) 0%, transparent 22%, transparent 82%, rgba(3,8,14,.5) 100%);
}
.moon{
  position:fixed; z-index:0; pointer-events:none;
  top:-9vh; right:6vw; width:44vw; height:44vw; max-width:560px; max-height:560px;
  background:radial-gradient(circle at 50% 50%, rgba(198,224,246,.16) 0%, rgba(148,192,228,.07) 34%, transparent 68%);
  filter:blur(6px);
}

/* ---------- 骨架 ---------- */
.app{
  position:relative; z-index:70;
  display:flex; flex-direction:column;
  height:100dvh;
  padding:10px 14px 12px;
  gap:10px;
}

/* 顶部条 */
.bar{
  display:flex; align-items:center; gap:18px;
  height:40px; padding:0 6px 0 10px;
  flex:0 0 auto;
}
.brand{ display:flex; align-items:center; gap:7px; font-size:14px; letter-spacing:.4px; }
.brand .glyph{
  font-size:15px; color:var(--cold);
  filter:drop-shadow(0 0 8px rgba(166,203,233,.6));
  animation:spin 26s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.brand b{ font-weight:600; color:var(--snow); letter-spacing:2px; }
.brand i{ color:var(--tx-3); font-style:normal; }
.brand .bsub{ color:var(--tx-2); letter-spacing:1.4px; font-size:12.5px; }

.bar-mid{
  flex:1; display:flex; align-items:center; gap:8px;
  font-size:11.5px; color:var(--tx-3); letter-spacing:.6px;
}
.live-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--warm); box-shadow:0 0 8px var(--warm);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

.bar-right{ display:flex; gap:8px; align-items:center; margin-left:auto; flex:0 0 auto; }
.ibtn{
  display:flex; align-items:center; gap:5px;
  background:transparent; border:1px solid var(--line);
  color:var(--tx-2); font-size:11.5px; letter-spacing:.6px;
  padding:5px 11px; border-radius:999px; cursor:pointer;
  transition:.22s; font-family:var(--sans);
  text-decoration:none; white-space:nowrap;
}
.ibtn:hover{ color:var(--snow); border-color:var(--line-2); background:rgba(166,203,233,.06); }
.ibtn svg{ display:block; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.6; }
/* 返回入口：冷蓝描边，hover 时透一点暖光，和右侧「关于」区分开 */
.ibtn.nav:hover{
  color:var(--snow); border-color:rgba(166,203,233,.34);
  background:rgba(166,203,233,.1);
  box-shadow:0 0 18px -8px rgba(166,203,233,.7);
}
.ibtn.nav svg{ transition:transform .22s; }
.ibtn.nav:hover svg{ transform:translateY(-1px); }

/* 主区 */
main{
  flex:1; min-height:0;
  display:grid;
  grid-template-columns:clamp(300px, 21vw, 400px) minmax(0,1fr);
  gap:12px;
}

/* ---------- 左侧列表面板 ---------- */
.panel{
  background:linear-gradient(180deg, rgba(13,26,40,.74), rgba(7,16,26,.62));
  backdrop-filter:blur(22px) saturate(1.25);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.045);
}
.list-panel{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }

.tabs{
  display:flex; gap:2px; padding:9px 9px 0;
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.tab{
  flex:1; background:transparent; border:0; cursor:pointer;
  font-family:var(--sans);
  color:var(--tx-3); font-size:12px; letter-spacing:.4px;
  padding:8px 2px 10px; position:relative;
  transition:.2s; border-radius:8px 8px 0 0;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.tab em{
  font-style:normal; font-family:var(--mono); font-size:9.5px;
  color:var(--tx-3); opacity:.7;
}
.tab:hover{ color:var(--tx-2); }
.tab.on{ color:var(--snow); }
.tab.on em{ color:var(--warm); opacity:1; }
.tab.on::after{
  content:""; position:absolute; left:22%; right:22%; bottom:-1px; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--warm),transparent);
  box-shadow:0 0 10px rgba(230,190,143,.55);
}

.search{
  position:relative; display:flex; align-items:center; gap:7px;
  margin:9px 10px 6px; padding:0 10px;
  height:31px; flex:0 0 auto;
  background:rgba(5,13,22,.6);
  border:1px solid var(--line); border-radius:9px;
  transition:.22s;
}
.search:focus-within{ border-color:rgba(166,203,233,.3); background:rgba(5,13,22,.8); }
.search svg{ stroke:var(--tx-3); fill:none; stroke-width:1.8; flex:0 0 auto; }
.search input{
  flex:1; min-width:0; background:transparent; border:0; outline:0;
  color:var(--tx); font-family:var(--sans); font-size:12.5px; letter-spacing:.3px;
}
.search input::placeholder{ color:var(--tx-3); }
.search input::-webkit-search-cancel-button{ display:none; }
.qcount{
  font-family:var(--mono); font-size:10px; color:var(--warm);
  opacity:0; transition:.2s; flex:0 0 auto;
}
.qcount.on{ opacity:.9; }

.thead{
  display:grid; grid-template-columns:38px 1fr 48px;
  padding:2px 10px 6px; flex:0 0 auto;
  font-size:10px; letter-spacing:1.2px; color:var(--tx-3);
  border-bottom:1px solid var(--line);
}
.thead .c-n{ text-align:center; }
.thead .c-d{ text-align:right; padding-right:6px; }

.scroller{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(150,190,230,.16) transparent;
}
.scroller::-webkit-scrollbar{ width:7px; }
.scroller::-webkit-scrollbar-thumb{
  background:rgba(150,190,230,.14); border-radius:4px;
}
.scroller::-webkit-scrollbar-thumb:hover{ background:rgba(150,190,230,.3); }
.vph{ position:relative; }
.vrows{ position:absolute; top:0; left:0; right:0; }

.row{
  display:grid; grid-template-columns:38px 1fr 48px;
  align-items:center; height:46px;
  padding:0 10px; cursor:pointer;
  position:relative;
  transition:background .16s;
}
.row:nth-child(even){ background:rgba(255,255,255,.013); }
.row:hover{ background:rgba(166,203,233,.06); }
.row .n{
  font-family:var(--mono); font-size:10.5px; color:var(--tx-3);
  text-align:center; letter-spacing:-.2px;
}
.row .tt{
  min-width:0; display:flex; flex-direction:column; gap:2px;
  padding-right:8px;
}
.row .t1{
  font-size:12.8px; color:var(--tx); letter-spacing:.2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  line-height:1.3;
}
.row .t2{
  font-size:10.5px; color:var(--tx-3); letter-spacing:.2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.row .row-play{
  color:var(--tx-3); font-family:var(--mono); font-size:9.5px;
}
.row .d{
  font-family:var(--mono); font-size:10px; color:var(--tx-3);
  text-align:right; padding-right:6px; letter-spacing:-.2px;
}
.row.on .d{ color:rgba(230,190,143,.75); }
.row.on{
  background:linear-gradient(90deg, rgba(230,190,143,.16) 0%, rgba(230,190,143,.04) 55%, transparent 100%);
}
.row.on::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:2px;
  background:var(--warm); border-radius:2px;
  box-shadow:0 0 10px rgba(230,190,143,.75);
}
.row.on .t1{ color:#fdf6ec; }
.row.on .n{ color:var(--warm); }

/* 当前行跳动音柱 */
.bars{ display:flex; align-items:flex-end; gap:1.5px; height:11px; justify-content:center; }
.bars i{
  width:2px; background:var(--warm); border-radius:1px;
  animation:jump .9s ease-in-out infinite;
}
.bars i:nth-child(1){ height:4px; animation-delay:0s; }
.bars i:nth-child(2){ height:9px; animation-delay:.18s; }
.bars i:nth-child(3){ height:6px; animation-delay:.36s; }
@keyframes jump{
  0%,100%{ transform:scaleY(.42); opacity:.6; }
  50%{ transform:scaleY(1); opacity:1; }
}
.bars.paused i{ animation-play-state:paused; }

.plfoot{
  flex:0 0 auto; padding:7px 12px 8px;
  border-top:1px solid var(--line);
  font-size:10px; color:var(--tx-3); letter-spacing:.5px;
}

/* ---------- 中央舞台 ---------- */
.stage{
  display:grid; grid-template-rows:minmax(0,1fr) auto;
  gap:14px; min-height:0; min-width:0;
}

.player-box{
  position:relative; min-height:0; min-width:0;
  display:flex; align-items:center; justify-content:center;
}
.player{
  position:relative;
  width:min(100%, calc((100dvh - 238px) * 1.7778));
  max-width:100%;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(150,190,230,.14);
  box-shadow:
    0 32px 70px -30px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.03) inset;
  isolation:isolate;
}
.player iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; background:#000;
  opacity:0; transition:opacity .5s ease;
}
.player iframe.on{ opacity:1; }

.player-idle{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  background:
    radial-gradient(70% 70% at 50% 42%, rgba(38,74,106,.5), transparent 72%),
    linear-gradient(160deg,#07121d,#0a1826 55%,#060f18);
  transition:opacity .5s ease;
}
.player-idle.hide{ opacity:0; pointer-events:none; }
.idle-disc{
  width:104px; height:104px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(166,203,233,.2);
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(166,203,233,.05) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 40% 32%, rgba(120,170,215,.16), transparent 62%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.7), 0 0 46px rgba(96,150,200,.14);
  animation:spin 22s linear infinite;
}
.idle-disc span{
  font-size:22px; color:rgba(200,226,248,.55);
  filter:drop-shadow(0 0 12px rgba(166,203,233,.5));
}
.player-idle p{
  margin:0; font-size:12px; letter-spacing:2.4px; color:var(--tx-3);
  font-family:var(--serif);
}
.player-glow{
  position:absolute; inset:-14% -6% auto -6%; height:58%;
  z-index:-1; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%, rgba(96,150,200,.20), transparent 72%);
  filter:blur(26px);
}

/* 曲目信息 */
.now{ padding:0 6px; min-width:0; }
.ntitle{
  margin:0 0 7px;
  font-family:var(--serif);
  font-size:clamp(17px, 2.1vw, 25px);
  font-weight:600;
  letter-spacing:1.4px;
  line-height:1.34;
  color:#f2f8ff;
  text-shadow:0 2px 26px rgba(0,0,0,.75);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nsub{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:11.5px; color:var(--tx-2); letter-spacing:.5px;
  margin-bottom:9px;
}
.dotsep{ color:var(--tx-3); opacity:.55; }
.nplay{ font-family:var(--mono); color:var(--warm); }
.ndate{ font-family:var(--mono); color:var(--tx-3); font-size:11px; }
.nlinks{ display:flex; gap:8px; flex-wrap:wrap; }
.nlinks a, .nlinks .ghost{
  font-size:11px; letter-spacing:.5px; text-decoration:none;
  color:var(--tx-2); border:1px solid var(--line);
  padding:5px 12px; border-radius:999px;
  transition:.2s; background:rgba(255,255,255,.015);
  cursor:pointer; font-family:var(--sans);
}
.nlinks a:hover, .nlinks .ghost:hover{
  color:var(--snow); border-color:rgba(166,203,233,.32);
  background:rgba(166,203,233,.09);
}

/* ---------- 底部控制条 ---------- */
.ctrl{
  flex:0 0 auto;
  display:flex; align-items:center; gap:16px;
  height:46px; padding:0 10px;
  background:linear-gradient(180deg, rgba(10,21,34,.62), rgba(6,14,23,.5));
  border:1px solid var(--line);
  border-radius:12px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.tr{ display:flex; align-items:center; gap:3px; flex:0 0 auto; }
.cbtn{
  background:transparent; border:0; cursor:pointer;
  width:33px; height:33px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--tx-2);
  transition:.2s;
}
.cbtn:hover{ color:var(--snow); background:rgba(166,203,233,.1); }
.cbtn svg{ display:block; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.6; }
/* SVG 元素不吃 HTML 的 hidden 属性，不显式声明就会继续占位、把图标挤歪 */
.cbtn svg[hidden]{ display:none !important; }
.cbtn.primary{
  width:40px; height:40px; color:#08131f;
  background:linear-gradient(160deg,#f0dcc2,#dcb488);
  box-shadow:0 6px 20px -6px rgba(230,190,143,.55), inset 0 1px 0 rgba(255,255,255,.45);
  position:relative;
}
.cbtn.primary:hover{ background:linear-gradient(160deg,#faebd6,#e8c69c); transform:scale(1.04); }
.cbtn.primary svg{ stroke:none; }
.cbtn.primary .ring{
  position:absolute; inset:-3px; border-radius:50%;
  border:1px solid rgba(230,190,143,.32);
  opacity:0; transition:.3s;
}
.cbtn.primary:hover .ring{ opacity:1; }

.mid{ flex:1; min-width:0; display:flex; align-items:center; }
.nowline{
  font-size:11.5px; color:var(--tx-3); letter-spacing:.6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
}
.nowline b{ color:var(--tx-2); font-weight:400; }
.right{ flex:0 0 auto; }
.stat{ font-family:var(--mono); font-size:10.5px; color:var(--tx-3); letter-spacing:.4px; }

/* ---------- 关于 ---------- */
.modal{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:24px;
}
.modal[hidden]{ display:none; }
.modal-mask{
  position:absolute; inset:0;
  background:rgba(2,7,12,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:fade .3s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.modal-card{
  position:relative;
  width:min(600px,100%); max-height:82dvh; overflow-y:auto;
  padding:30px 32px 22px;
  background:linear-gradient(170deg, rgba(17,33,50,.98), rgba(9,19,30,.99));
  border:1px solid rgba(150,190,230,.18);
  border-radius:18px;
  box-shadow:0 40px 90px -30px #000;
  animation:rise .35s cubic-bezier(.2,.9,.3,1);
  scrollbar-width:thin;
}
@keyframes rise{ from{opacity:0; transform:translateY(18px) scale(.985)} to{opacity:1; transform:none} }
.modal-x{
  position:absolute; right:16px; top:14px;
  background:transparent; border:0; color:var(--tx-3);
  font-size:14px; cursor:pointer; padding:6px; line-height:1;
  transition:.2s;
}
.modal-x:hover{ color:var(--snow); }
.modal-card h2{
  margin:0 0 12px; font-family:var(--serif);
  font-size:19px; font-weight:600; letter-spacing:1.6px; color:#f2f8ff;
}
.modal-card .lead{
  margin:0 0 20px; font-size:13px; line-height:1.85;
  color:var(--cold); letter-spacing:.4px;
}
.mblock{ margin-bottom:19px; }
.mh{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.mh b{ font-size:12.5px; letter-spacing:1.4px; color:var(--snow); font-weight:600; }
.mblock p{
  margin:0 0 8px; font-size:12.5px; line-height:1.88;
  color:var(--tx-2); letter-spacing:.3px;
}
.mblock p.note{
  color:var(--tx-3); font-size:11.5px;
  padding-left:11px; border-left:1.5px solid rgba(230,190,143,.3);
}
.mblock.dim p{ color:var(--tx-3); }
.modal-foot{
  display:flex; justify-content:space-between;
  padding-top:16px; margin-top:6px;
  border-top:1px solid var(--line);
  font-size:10.5px; letter-spacing:1px; color:var(--tx-3);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px){
  main{ grid-template-columns:300px minmax(0,1fr); }
  .player{ width:min(100%, calc((100dvh - 250px) * 1.7778)); }
}
@media (max-width: 820px){
  .app{ padding:8px 10px 10px; gap:8px; }
  main{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) minmax(150px,36dvh); }
  .list-panel{ order:2; }
  .stage{ order:1; }
  .player{ width:100%; max-height:100%; }
  .bar-mid{ display:none; }
  .ntitle{ font-size:16px; white-space:normal; }
  .now{ padding:0 2px; }
  .ctrl{ height:50px; gap:6px; padding:0 8px; overflow:hidden; flex-wrap:nowrap; }
  .mid{ display:none; }
  .tr{ gap:0; flex:0 0 auto; }
  .cbtn{ width:30px; height:30px; }
  .cbtn.primary{ width:36px; height:36px; }
  .right{ margin-left:auto; flex:0 0 auto; }
  .plfoot{ display:none; }
  .thead{ grid-template-columns:34px 1fr 42px; }
  .row{ grid-template-columns:34px 1fr 42px; }
  .tabs{ padding:7px 7px 0; }
  .tab{ font-size:11.5px; }
}
@media (max-width: 520px){
  .brand{ gap:6px; }
  .brand i, .brand .bsub{ display:none; }
  .bar{ height:34px; padding:0 2px; gap:8px; }
  /* 窄屏放不下三个带文字的按钮，统一收成圆形图标，靠 aria-label / title 说明 */
  .bar-right{ gap:6px; }
  .bar-right .ibtn span{ display:none; }
  .bar-right .ibtn{ padding:6px 9px; }
  .nlinks a, .nlinks .ghost{ padding:4px 10px; font-size:10.5px; }
  .nsub{ font-size:11px; gap:6px; }
}