/* ========== Liquid Glass 主题：全局变量（r5 强化版） ========== */
:root{
  --bg: #0b1020;
  --bg2: #0b1226;
  --panel: rgba(20, 30, 48, .36);
  --panel-strong: rgba(20, 30, 48, .58);

  --border: rgba(160, 190, 255, .18);
  --border-strong: rgba(160, 190, 255, .30);
  --rim: rgba(255,255,255,.10); /* 玻璃外缘淡亮线 */

  --text: #eaf2ff;
  --muted: rgba(225, 238, 255, .72);
  --muted2: rgba(225, 238, 255, .55);
  --primary: #66b2ff;
  --primary2: #7dd3ff;
  --danger: #ff6b7d;

  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 18px;
  --radius-xl: 22px;

  --shadow: 0 10px 32px rgba(0,0,0,.45);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.35);
  --shadow-strong: 0 18px 56px rgba(0,0,0,.55);

  --transition: .18s cubic-bezier(.25,.3,.2,.9);
  --ease-spring: cubic-bezier(.15, 1.05, .25, 1);

  --card-min-width: 160px;
  --card-max-width: 1fr;

  /* 强化液态玻璃参数：更高模糊/饱和/亮度 */
  --glass-blur: 18px;
  --glass-sat: 180%;
  --glass-bright: 118%;

  /* 亮斑、扫光颜色 */
  --shine: rgba(160,205,255,.14);
  --shine-strong: rgba(160,205,255,.22);
  --shine-angle: 12deg;

  /* Modal 动效 */
  --modal-backdrop: rgba(0,0,0,.56);
  --modal-in: 280ms var(--ease-spring);
  --modal-out: 170ms ease;
}

/* 基础背景：多层径向光晕 + 纵向渐变 */
body{
  margin:0;
  font-family: system-ui, "Segoe UI", "PingFang SC", "Microsoft Yahei", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(102,178,255,.22), transparent 60%),
    radial-gradient(840px 520px at 88% 10%, rgba(125,211,255,.16), transparent 62%),
    radial-gradient(680px 520px at 45% 90%, rgba(160,118,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  -webkit-font-smoothing: antialiased;
}

*{ box-sizing:border-box; }
a{ color: var(--primary2); text-decoration:none; }
a:hover{ color: #aee3ff; }
.hidden{ display:none !important; }

/* ---------- 通用液态玻璃叠层（伪元素） ---------- */
/* 给主要玻璃容器提供噪声纹理 + 内部高光扫过（独立于内容层，pointer-events: none） */
@keyframes glassShineSweep {
  0% { transform: translateX(-140%) rotate(var(--shine-angle)); opacity:0; }
  30% { opacity:.12; }
  100% { transform: translateX(240%) rotate(var(--shine-angle)); opacity:0; }
}
/* 噪声 SVG 覆盖（与 CTA 示例一致做法） */
.glass-noise::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  border-radius: inherit;
}
.glass-shine::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  pointer-events:none;
  background: linear-gradient(90deg, transparent, var(--shine), transparent);
  transform: translateX(-120%) rotate(var(--shine-angle));
  border-radius: inherit;
}
/* 交互时增强扫光 */
.glass-shine:hover::before{ animation: glassShineSweep 1200ms ease 120ms 1 both; }

/* ---------- Header ---------- */
.header{
  position: sticky;
  top:0;
  z-index:30;

  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:14px;

  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(160,190,255,.10);

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) , rgba(10, 18, 34, .55);
  backdrop-filter: blur(18px) saturate(170%) brightness(110%);
  -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(110%);

  box-shadow: var(--shadow);
  isolation:isolate;
  position:sticky;
}
.header::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: 22px;
  pointer-events:none;
  background:
    radial-gradient(220px 120px at 12% 0%, rgba(125,211,255,.18), transparent 60%),
    radial-gradient(240px 160px at 92% 20%, rgba(160,118,255,.12), transparent 64%);
  opacity:.8;
  z-index:0;
}
.header::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px var(--rim);
  z-index:0;
}
.brand{ display:flex; flex-direction:column; gap:6px; }
.brand-line{ display:flex; align-items:center; gap:10px; }
.brand-logo{
  width:30px; height:30px;
  border-radius: 10px;
  object-fit:cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.35);
}
.brand-title{
  font-weight:800;
  letter-spacing: .2px;
  white-space:nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.version-badge{
  align-self:flex-start;
  font-size:12px;
  padding:3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) , rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: rgba(235,245,255,.86);
}

/* right rail */
.right-rail{
  display:flex;
  flex:1;
  gap:12px;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
}

/* auth */
.auth{ display:flex; flex-direction:column; gap:6px; }
.login-form{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  padding: 10px;
  border-radius: var(--radius-m);

  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) , rgba(20,30,48,.36);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));

  position:relative;
}
.login-form.glass-noise::after{} /* 继承噪声 */
.login-form.glass-shine::before{} /* 继承扫光 */
.login-form input{
  padding:8px 10px;
  background: rgba(10, 18, 34, .45);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size:13px;
  outline: none;
}
.login-form input:focus{
  border-color: rgba(125,211,255,.6);
  box-shadow: 0 0 0 3px rgba(125,211,255,.13);
}
.btn, .login-form button, .login-form .btn{
  padding:8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) , rgba(255,255,255,.06);
  color: rgba(235,245,255,.92);
  cursor:pointer;
  transition: var(--transition);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  position:relative;
}
.btn::after, .login-form button::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--rim);
}
.btn:hover, .login-form button:hover, .login-form .btn:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.btn:active, .login-form button:active, .login-form .btn:active{ transform: translateY(0); }

.login-info{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:13px;
  padding: 2px 0;
  color: rgba(235,245,255,.85);
}

.btn-danger{
  background: rgba(255, 107, 125, .12);
  border-color: rgba(255, 107, 125, .30);
  color: rgba(255, 220, 226, .95);
}
.btn-danger:hover{ background: rgba(255, 107, 125, .18); }

/* ===== Desktop：折叠资源链接 + 教程 ===== */
.header-collapsible-desktop{ display:none; }
@media (min-width: 821px){
  .header-collapsible-desktop{ display:block; }
}

.header-collapse-btn{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding: 10px 12px;
  border-radius: 14px;

  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) , rgba(20,30,48,.30);
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  color: rgba(235,245,255,.92);
  font-weight: 800;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  gap:8px;

  position:relative;
}
.header-collapse-btn::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--rim);
}
.header-collapse-btn::-webkit-details-marker{ display:none; }
.header-collapse-btn::before{
  content:"▸";
  color: rgba(160, 205, 255, .95);
  transition: transform .15s ease;
  font-size: 12px;
}
.header-collapsible[open] > .header-collapse-btn::before{ transform: rotate(90deg); }

.header-panel{
  margin-top: 10px;
  padding: 10px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) , rgba(20,30,48,.32);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));

  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-start;

  position:relative;
}
.header-panel.glass-noise::after{}
.header-panel.glass-shine::before{}

.header-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:100%;
}
.header-links a{
  padding:7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(10,18,34,.35);
  color: rgba(235,245,255,.86);
  font-size: 12px;
  line-height: 1.2;
  transition: var(--transition);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  position:relative;
}
.header-links a::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--rim);
}
.header-links a:hover{
  background: rgba(255,255,255,.08);
  border-color: var(--border-strong);
}

/* Mobile resources (now under brand) */
details.header-links-mobile-under-brand{
  width: 100%;
  margin-top: 8px;
}
details.header-links-mobile-under-brand > summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  padding: 10px 12px;
  border-radius: 14px;

  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) , rgba(20,30,48,.30);
  border:  1px solid var(--border);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  color: rgba(235,245,255,.92);
  font-size: 13px;
  font-weight: 800;

  position:relative;
}
details.header-links-mobile-under-brand > summary::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--rim);
}
details.header-links-mobile-under-brand > summary::-webkit-details-marker{ display:none; }
details.header-links-mobile-under-brand[open] > summary{ background: rgba(255,255,255,.10); }
details.header-links-mobile-under-brand nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  padding: 10px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: rgba(10,18,34,.30);
  backdrop-filter: blur(12px) saturate(165%) brightness(112%);
  -webkit-backdrop-filter: blur(12px) saturate(165%) brightness(112%);

  position:relative;
}
details.header-links-mobile-under-brand nav.glass-noise::after{}
details.header-links-mobile-under-brand nav a{
  display:block;
  width:100%;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10,18,34,.36);
  color: rgba(235,245,255,.90);
  font-size: 12px;
  position:relative;
}
details.header-links-mobile-under-brand nav a::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--rim);
}
details.header-links-mobile-under-brand nav a:hover{
  background: rgba(255,255,255,.08);
  border-color: var(--border-strong);
}

/* tutorial */
.tutorial-stack{ display:flex; flex-direction:column; gap:4px; min-width: 160px; }
.tutorial-link{
  font-size: 13px;
  font-weight: 800;
  color: rgba(150, 215, 255, .95);
  text-decoration: underline;
}
.tutorial-link:hover{ color: rgba(210, 245, 255, .95); }

/* mobile/desktop visibility rules */
@media (max-width:820px){
  .brand{ width:100%; }
  .header-collapsible-desktop{ display:none !important; }
  details.header-links-mobile-under-brand{ display:block; }
}
@media (min-width:821px){
  details.header-links-mobile-under-brand{ display:none !important; }
}

/* ---------- Notice ---------- */
.notice-wrap{
  border-top: 1px solid rgba(160,190,255,.10);
  border-bottom: 1px solid rgba(160,190,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) , rgba(10,18,34,.35);
  backdrop-filter: blur(14px) saturate(150%) brightness(108%);
  -webkit-backdrop-filter: blur(14px) saturate(150%) brightness(108%);
  position:relative;
}
.notice-wrap.glass-noise::after{}
.notice{ width:100%; margin:0; padding: 0 12px; }
.notice summary{
  display:flex; align-items:center; gap:10px;
  list-style:none; padding: 10px 0; cursor:pointer;
}
.notice summary::-webkit-details-marker{ display:none; }
.notice summary::before{
  content:"▸";
  color: rgba(160, 205, 255, .95);
  transition: transform .15s ease;
  font-size: 12px;
}
.notice[open] summary::before{ transform: rotate(90deg); }
.notice-title{ font-weight: 900; color: rgba(255, 215, 120, .95); }
.notice-panel{ padding:0 0 12px 18px; }
.notice-content{ line-height: 1.6; font-size: 13px; color: rgba(235,245,255,.86); }
.btn-sm{
  font-size:12px;
  padding:7px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) , rgba(255,255,255,.06);
  color: rgba(235,245,255,.92);
  cursor:pointer;
  transition: var(--transition);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  position:relative;
}
.btn-sm::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--rim);
}
.btn-sm:hover{ background: rgba(255,255,255,.10); }

/* ---------- Nav ---------- */
.nav{
  display:flex;
  gap:10px;
  padding: 10px 14px;
  flex-wrap:wrap;
  align-items:center;
  border-bottom:  1px solid rgba(160,190,255,.10);

  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) , rgba(10,18,34,.46);
  backdrop-filter: blur(18px) saturate(170%) brightness(110%);
  -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(110%);
  position:relative;
}
.nav.glass-noise::after{}
.nav-btn{
  padding:8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) , rgba(255,255,255,.06);
  color: rgba(235,245,255,.88);
  font-size: 13px;
  font-weight: 800;
  cursor:pointer;
  transition: var(--transition);
  position:relative;
}
.nav-btn::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--rim);
}
.nav-btn:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }
.nav-btn:active{ transform: translateY(0); }
.nav-btn.active{
  background: radial-gradient(120% 200% at 30% 10%, rgba(125,211,255,.28), rgba(255,255,255,.06));
  border-color: rgba(160, 205, 255, .35);
  color: rgba(250,252,255,.98);
}

/* status */
.status{ font-size: 12px; color: rgba(235,245,255,.70); min-height:16px; }

/* page */
.page{ padding: 14px 14px 44px; }

/* toolbar */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
  align-items:center;
}
.toolbar .left{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.toolbar input[type="text"], .toolbar select, .toolbar input[type="number"]{
  padding: 9px 10px;
  background: rgba(10,18,34,.45);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: rgba(235,245,255,.92);
  font-size: 13px;
  outline: none;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
.toolbar input[type="text"]:focus, .toolbar select:focus, .toolbar input[type="number"]:focus{
  border-color: rgba(125,211,255,.55);
  box-shadow: 0 0 0 3px rgba(125, 211, 255, .12);
}
.toolbar label{ font-size: 12px; color: rgba(235,245,255,.74); }

/* ========== Song Grid / Cards (Liquid Glass 强化) ========== */
.song-grid{
  --gap: clamp(10px, 1.6vw, 18px);
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), var(--card-max-width)));
  padding: 8px 2px;
  list-style:none;
  margin:0;
}

.song-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius: 18px;
  overflow:hidden;
  min-width:0;
  min-height: clamp(210px, 28vh, 270px);

  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) , rgba(20,30,48,.34);
  border: 1px solid var(--border);
  box-shadow: 0 14px 30px rgba(0,0,0,.32);
  backdrop-filter: blur(16px) saturate(165%) brightness(112%);
  -webkit-backdrop-filter: blur(16px) saturate(165%) brightness(112%);

  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  isolation:isolate;
}
.song-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(220px 140px at 20% 0%, rgba(125,211,255,.20), transparent 60%),
    radial-gradient(220px 140px at 90% 30%, rgba(160,118,255,.16), transparent 62%),
    radial-gradient(320px 220px at 50% 120%, rgba(255,255,255,.10), transparent 65%);
  pointer-events:none;
  opacity:.9;
  border-radius: 20px;
  z-index:0;
}
.song-card::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: 20px;
  mix-blend-mode:overlay;
  opacity:.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.song-card:focus-visible{ outline:2px solid rgba(125,211,255,.8); outline-offset:2px; }
.song-card:hover{
  transform: translateY(-4px) scale(1.012);
  border-color: var(--border-strong);
  box-shadow: 0 18px 46px rgba(0,0,0,.40);
}
.song-card:active{ transform: translateY(-1px) scale(1.0); }

.song-thumb{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background: rgba(10,18,34,.35) center/cover no-repeat;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
@supports not (aspect-ratio: 1/1){
  .song-thumb{ height:0; padding-top:100%; }
}
.song-thumb::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.30));
  pointer-events:none;
}

.card-play-btn{
  position:absolute;
  right:10px; top:10px;
  width:38px; height:38px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(10,18,34,.35);
  color: rgba(255,255,255,.92);
  font-size: 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transform: translateY(8px);
  transition: var(--transition);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.song-card:hover .card-play-btn,
.card-play-btn:focus-visible{
  opacity:1;
  transform: translateY(0);
}
.card-play-btn:hover{
  background: rgba(255,255,255,.10);
  border-color: var(--border-strong);
}

.card-body{
  display:flex;
  flex-direction:column;
  padding:10px 12px 12px;
  gap:5px;
  min-height:0;
}
.card-title{
  font-size:14px;
  font-weight: 900;
  line-height: 1.25;
  color: rgba(245,250,255,.98);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-artist{
  font-size:12px;
  color: rgba(225,238,255,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card-time{
  font-size:11px;
  color: rgba(225,238,255,.55);
  margin-top:auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:480px){
  :root{ --card-min-width: 130px; }
  .card-body{ padding: 9px 10px 11px; }
  .card-title{ font-size:13px; }
  .card-artist{ font-size:11px; }
  .card-time{ font-size:10px; }
}

/* pager */
.pager{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  margin: 12px 0 6px;
}
.pager input{
  padding: 7px 10px;
  font-size:12px;
  width: 84px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(10,18,34,.45);
  color: rgba(235,245,255,.9);
}
.pager .info{ color: rgba(235,245,255,.70); }

/* ========== Modal (Liquid Glass + 卡片飞入 + 噪声/扫光) ========== */
@keyframes modalDialogPop {
  0% { transform: translateY(18px) scale(.92); opacity:0; }
  55% { transform: translateY(-3px) scale(1.01); opacity:1; }
  100% { transform: translateY(0) scale(1); opacity:1; }
}
@keyframes modalShine {
  0% { transform: translateX(-120%) rotate(12deg); opacity:0; }
  35% { opacity:.14; }
  100% { transform: translateX(220%) rotate(12deg); opacity:0; }
}

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal.hidden{ display:none; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity:0;
  transition: opacity var(--modal-in);
}

.modal-dialog{
  position:relative;
  width: min(900px, 94vw);
  max-height: 90vh;
  border-radius: 22px;
  overflow:hidden;

  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) , rgba(20,30,48,.42);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-strong);

  backdrop-filter: blur(18px) saturate(175%) brightness(115%);
  -webkit-backdrop-filter: blur(18px) saturate(175%) brightness(115%);

  display:flex;
  flex-direction:column;

  transform: translateY(12px) scale(.97);
  opacity:0;

  transition: transform var(--modal-in), opacity var(--modal-in);
  will-change: transform, opacity;
}
.modal-dialog::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:.20;
  mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.modal.show .modal-backdrop{ opacity:1; }
.modal.show .modal-dialog{
  opacity:1;
  animation: modalDialogPop var(--modal-in) both;
}
.modal.show .modal-dialog::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(90deg, transparent, var(--shine-strong), transparent);
  transform: translateX(-120%) rotate(12deg);
  pointer-events:none;
  animation: modalShine 900ms ease 120ms 1 both;
}

.modal.leaving .modal-backdrop{
  opacity:0;
  transition: opacity var(--modal-out);
}
.modal.leaving .modal-dialog{
  opacity:0;
  transform: translateY(8px) scale(.985);
  transition: transform var(--modal-out), opacity var(--modal-out);
}

.modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding: 12px 14px 6px;
  gap:12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cover{
  width: 90px;
  height: 90px;
  border-radius: 16px;
  background: rgba(10,18,34,.35) center/cover no-repeat;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  flex-shrink:0;
}
.song-head{ display:flex; gap:12px; }
.song-title{ font-size:16px; font-weight: 900; line-height:1.2; }
.song-artist{ font-size:13px; color: rgba(225,238,255,.75); }
.song-likes{ font-size:12px; color: rgba(255,215,120,.95); margin-top:4px; }
.song-likers{
  font-size:11px;
  color: rgba(225,238,255,.60);
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.song-likers .tag{
  display:inline-block;
  padding:3px 10px;
  border-radius: 999px;
  border:  1px solid var(--border);
  background: rgba(10,18,34,.35);
  color: rgba(235,245,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-close{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border:  1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) , rgba(255,255,255,.06);
  color: rgba(235,245,255,.95);
  cursor:pointer;
  font-size: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position:relative;
}
.btn-close::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--rim);
}
.btn-close:hover{ background: rgba(255,255,255,.10); }

.modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding: 10px 14px;
  align-items:center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 12px;
}
.modal-actions input[type="number"],
.modal-actions input[type="text"]{
  padding: 8px 10px;
  border-radius: 14px;
  border:  1px solid var(--border);
  background: rgba(10,18,34,.45);
  color: rgba(235,245,255,.92);
  outline: none;
}
.modal-actions input[type="number"]:focus,
.modal-actions input[type="text"]:focus{
  border-color: rgba(125,211,255,.55);
  box-shadow: 0 0 0 3px rgba(125, 211, 255, .12);
}

.table-wrap{ padding: 10px 14px 16px; overflow:auto; }
.table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.table th, .table td{
  border:  1px solid rgba(160,190,255,.12);
  padding: 8px 9px;
  text-align:left;
  vertical-align:top;
  background: rgba(10,18,34,.30);
}
.table th{
  background: rgba(255,255,255,.05);
  font-weight: 900;
  position: sticky;
  top:0;
  z-index:1;
}
.table tr:nth-child(even) td{ background: rgba(10,18,34,.22); }

pre.json{
  margin: 6px 0 0;
  padding: 10px 10px;
  background: rgba(10,18,34,.55);
  border:  1px solid rgba(160,190,255,.14);
  border-radius: 16px;
  overflow:auto;
  max-width: 72vw;
  color: rgba(235,245,255,.92);
}

/* 手机端 modal：底部抽屉 */
@media (max-width: 640px){
  .modal{ align-items:flex-end; }
  .modal-dialog{
    width:100vw;
    max-height:92vh;
    border-radius: 18px 18px 0 0;
  }
  .cover{ width:72px; height:72px; border-radius: 14px; }
  pre.json{ max-width: 92vw; }
}

/* manage layout（保持原功能） */
.manage-layout{ display:grid; grid-template-columns:minmax(260px, 420px) 1fr; gap:14px; }
@media (max-width: 980px){ .manage-layout{ grid-template-columns:100%; } }

.manage-song-ul{
  list-style:none;
  margin:0;
  padding:0;
  border-radius: var(--radius-xl);
  border:  1px solid var(--border);
  background: rgba(20,30,48,.22);
  backdrop-filter: blur(14px) saturate(150%) brightness(108%);
  -webkit-backdrop-filter: blur(14px) saturate(150%) brightness(108%);
  max-height:60vh;
  overflow:auto;
  position:relative;
}
.manage-song-ul.glass-noise::after{}
.manage-song-ul li{
  padding:10px 10px;
  border-bottom:  1px solid rgba(255,255,255,.06);
  cursor:pointer;
  font-size:12px;
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.manage-song-ul li:hover{ background: rgba(255,255,255,.03); }
.manage-song-ul li.active{
  outline:2px solid rgba(125,211,255,.75);
  outline-offset:-2px;
  background: rgba(125,211,255,.08);
}
.manage-song-ul li.bulk-selected{ background: rgba(125,211,255,.06); }

.manage-form{
  border-radius: var(--radius-xl);
  border:  1px solid var(--border);
  background: rgba(20,30,48,.22);
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(14px) saturate(150%) brightness(108%);
  -webkit-backdrop-filter: blur(14px) saturate(150%) brightness(108%);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;

  position:relative;
}
.manage-form.glass-noise::after{}
.manage-fields{ display:flex; flex-direction:column; gap:8px; }
.manage-fields label{ font-size:12px; display:flex; flex-direction:column; gap:6px; color: rgba(225,238,255,.72); }
.manage-fields input[type="text"],
.manage-fields input[type="file"]{
  padding: 8px 10px;
  border-radius: 14px;
  border:   1px solid var(--border);
  background: rgba(10,18,34,.45);
  color: rgba(235,245,255,.92);
  outline:none;
}

/* mini player */
.mini-player{
  position:fixed;
  right:12px; top:12px;
  z-index:50;
  width:min(360px, 92vw);
  padding:10px;
  border-radius: 18px;

  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) , rgba(20,30,48,.42);
  border:  1px solid var(--border);
  box-shadow: 0 16px 44px rgba(0,0,0,.42);
  backdrop-filter: blur(18px) saturate(170%) brightness(112%);
  -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(112%);

  display:flex;
  flex-direction:column;
  gap:8px;

  position:relative;
}
.mini-player.glass-noise::after{}
.mp-row{ display:flex; align-items:center; gap:10px; }
.mp-cover{
  width:48px; height:48px;
  border-radius: 14px;
  background: rgba(10,18,34,.35) center/cover no-repeat;
  border:  1px solid rgba(255,255,255,.10);
  flex:0 0 auto;
}
.mp-meta{ min-width:0; flex:1; }
.mp-title{
  font-weight:900;
  color: rgba(245,250,255,.98);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
}
.mp-artist{
  font-size:11px;
  color: rgba(225,238,255,.70);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-controls button{
  font-size:14px;
  padding:7px 9px;
  border-radius: 12px;
  border:  1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) , rgba(255,255,255,.06);
  color: rgba(235,245,255,.92);
  cursor:pointer;
  transition: var(--transition);
  position:relative;
}
.mp-controls button::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--rim);
}
.mp-controls button:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }
.mp-controls button:active{ transform: translateY(0); }
.mp-controls button:disabled{ opacity:.6; cursor:not-allowed; }

.mp-progress{ display:flex; align-items:center; gap:8px; }
.mp-progress input[type="range"]{ flex:1; }
.mp-time{ font-size:11px; color: rgba(225,245,255,.70); min-width:110px; text-align:right; }
.mp-close{
  position:absolute;
  right:10px; top:10px;
  border:none;
  background:none;
  color: rgba(225,245,255,.75);
  font-size:18px;
  cursor:pointer;
}
.mp-close:hover{ color: rgba(245,250,255,.95); }

/* footer */
.footer{ height:60px; }

/* Profile page */
.avatar-large{
  width:96px; height:96px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  background: rgba(10,18,34,.35) center/cover no-repeat;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  *{ animation:none !important; transition:none !important; }
}

/* ultra narrow */
@media (max-width:340px){
  :root { --card-min-width: 120px; }
  .header { padding:10px 10px 10px; }
  .page { padding:10px 10px 36px; }
  .toolbar input[type="text"], .toolbar select { min-width:100px; }
  .song-grid { gap:10px; }
  .login-form { gap:6px; }
  .card-title { font-size:12.5px; }
  .card-artist { font-size:10.5px; }
  .card-time { font-size:10px; }
}