/* =========================================================
   user-center.css（最终整理版）
   - 无重复、结构清晰、按模块分区
   - 保留粉色毛玻璃视觉 + 响应式
   - 收藏者头像墙：2/3/4/5 列自适应
   ========================================================= */


/* =========================
   0) 基础布局
   ========================= */
.uc-wrap{
  padding: 14px 10px 18px;
}


/* =========================
   1) 顶部用户卡（Hero）
   ========================= */
.uc-hero{
  position: relative;
  border-radius: 22px;
  padding: 18px 18px 12px;
  background: rgba(255, 231, 238, .55);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 46px rgba(17,24,39,.10);
  overflow: hidden;
}

.uc-hero-left{
  display:flex;
  gap: 16px;
  align-items: center;
}

.uc-avatar{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 12px 28px rgba(17,24,39,.10);
}
.uc-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.uc-avatar .uc-avatar-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 1000;
  color: rgba(15,23,42,.85);
}

.uc-hero-meta{
  flex:1;
  min-width: 200px;
}

.uc-name-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.uc-name{
  font-size: 30px;
  font-weight: 1000;
  color: rgba(15,23,42,.92);
  letter-spacing: .3px;
}

.uc-bio-row{
  margin-top: 6px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: rgba(15,23,42,.70);
  font-weight: 800;
}
.uc-bio-label{ flex:0 0 auto; opacity:.9; }
.uc-bio{ font-weight: 800; }

.uc-hero-right{
  position:absolute;
  right: 14px;
  top: 14px;
}
.uc-ghost-btn{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.40);
  background: rgba(255,255,255,.55);
  cursor: pointer;
  font-size: 18px;
  font-weight: 1000;
}


/* =========================
   2) Tabs
   ========================= */
.uc-tabs{
  margin-top: 14px;
  display:flex;
  gap: 18px;
  align-items:center;
}
.uc-tab{
  border:none;
  background: transparent;
  cursor: pointer;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 1000;
  color: rgba(15,23,42,.60);
  position: relative;
}
.uc-tab.active{
  color: rgba(15,23,42,.92);
}
.uc-tab.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height: 4px;
  border-radius: 999px;
  background: #ff3b5c;
}
.uc-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
  margin-left: 6px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(148,163,184,.30);
  color: rgba(15,23,42,.80);
}


/* =========================
   3) Panels / Section Title
   ========================= */
.uc-panel{
  margin-top: 14px;
  display: none;
}
.uc-panel.active{
  display:block;
}
.uc-section-title{
  font-size: 22px;
  font-weight: 1000;
  margin: 10px 4px 12px;
  color: rgba(15,23,42,.92);
}


/* =========================
   4) 歌单卡网格（个人中心）
   ========================= */
.uc-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.uc-pl-card{
  display:block;
  text-decoration:none;
  color: inherit;

  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.85);
  box-shadow: 0 18px 40px rgba(17,24,39,.08);
}

.uc-pl-cover{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(148,163,184,.28);
  box-shadow: 0 16px 38px rgba(17,24,39,.10);
  transition: .15s ease;
}
.uc-pl-cover img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.uc-pl-cover-placeholder{
  width:100%;
  height:100%;
  background: linear-gradient(135deg, rgba(79,70,229,.16), rgba(6,182,212,.12));
}

/* 喜欢歌单爱心 */
.uc-pl-like-ico{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 56px;
  height: 56px;
  opacity: .95;
  background: url('/UQ/UQ-img/heart.svg') no-repeat center;
  background-size: 56px 56px;
  pointer-events:none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.20));
}

.uc-pl-meta{
  padding: 14px 14px 16px;
}

.uc-pl-name{
  font-size: 15px;
  font-weight: 1000;
  color: rgba(15,23,42,.92);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.uc-pl-sub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.55);
}

/* Hover */
.uc-pl-card:hover .uc-pl-cover{
  transform: translateY(-1px);
  box-shadow: 0 20px 50px rgba(17,24,39,.14);
}


/* =========================
   5) 笔记（评论）列表
   ========================= */
.uc-notes-list{
  display:flex;
  flex-direction: column;
  gap: 14px;
}
.uc-note-card{
  display:block;
  text-decoration:none;
  color: inherit;
  border-radius: 18px;
  background: rgba(255, 231, 238, .55);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 16px 40px rgba(17,24,39,.10);
  padding: 14px 14px 12px;
  transition:.15s ease;
}
.uc-note-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(17,24,39,.14);
}

.uc-note-hd{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.uc-note-user{
  display:flex;
  align-items:center;
  gap: 10px;
}
.uc-note-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(148,163,184,.30);
  display:grid;
  place-items:center;
  font-weight: 1000;
}
.uc-note-avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.uc-note-user-name{
  font-size: 14px;
  font-weight: 1000;
  color: rgba(15,23,42,.85);
}
.uc-note-date{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
  margin-top: 2px;
}
.uc-note-more{
  font-weight: 1000;
  opacity: .55;
}

.uc-note-text{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15,23,42,.80);
}

.uc-note-song{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(148,163,184,.18);
}
.uc-note-song-cover{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(255,255,255,.65);
  flex: 0 0 auto;
}
.uc-note-song-cover img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.uc-note-song-name{
  font-size: 14px;
  font-weight: 1000;
  color: rgba(15,23,42,.88);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 70vw;
}
.uc-note-song-artist{
  margin-top: 2px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.55);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 70vw;
}


/* =========================
   6) 空态（个人中心）
   ========================= */
.uc-empty{
  padding: 20px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(148,163,184,.20);
  color: rgba(15,23,42,.65);
  font-weight: 900;
}


/* =========================
   7) 链接统一：取消下划线
   ========================= */
.uc-wrap a,
.uc-wrap a:visited,
.uc-wrap a:hover,
.uc-wrap a:active{
  text-decoration: none;
  color: inherit;
}


/* =========================================================
   以下是「歌单详情页」相关（你把它也放在同一个 CSS 里）
   - Tab/收藏按钮/创建者行/收藏者墙/空态等
   ========================================================= */


/* =========================
   8) 歌单页：Tab 面板切换
   ========================= */
.fav-panel{ display:block; }
.fav-tab.active{ font-weight:600; }

/* 手机端标题更小 */
@media (max-width: 520px){
  .fav-meta .fav-title{
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: .2px;
  }
  .fav-meta{ padding-right: 10px; }
}

/* =========================
   9) 歌单页：收藏按钮 SVG（文件路径）
   ========================= */
.fav-favbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.fav-favbtn-ico{
  width:18px;
  height:18px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  background-image:url('/UQ/UQ-img/star-outline.svg');
}
.fav-favbtn.is-fav .fav-favbtn-ico{
  background-image:url('/UQ/UQ-img/star-filled.svg');
}

/* =========================
   10) 歌单页：创建者行（不换行/不下划线）
   ========================= */
.fav-sub{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.fav-creator-link,
.fav-creator-link:link,
.fav-creator-link:visited,
.fav-creator-link:hover,
.fav-creator-link:active{
  text-decoration:none !important;
  color:inherit;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  flex-shrink:0;
}

/* 创建时间可截断 */
.fav-sub > span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
}


/* =========================
   11) 歌单页：收藏者头像墙（最终唯一版本）
   ========================= */
.fav-favoriters-panel{
  padding: 18px 0 6px;
}

.fav-favoriters-grid{
  display: grid;
  gap: 16px;
  padding: 18px 0;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 默认 2 列 */
}

/* >= 560px：3列 */
@media (min-width: 560px){
  .fav-favoriters-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* >= 820px：4列 */
@media (min-width: 820px){
  .fav-favoriters-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* >= 1100px：5列 */
@media (min-width: 1100px){
  .fav-favoriters-grid{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.fav-favoriter,
.fav-favoriter:link,
.fav-favoriter:visited,
.fav-favoriter:hover,
.fav-favoriter:active{
  text-decoration: none !important;
  color: inherit;
}

.fav-favoriter{
  display:block;
  text-align:center;
  transition:.15s ease;
}
.fav-favoriter:hover{
  opacity:.92;
  transform:translateY(-1px);
}

.fav-favoriter-avatar,
.fav-favoriter-avatar.placeholder{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  background: rgba(255,255,255,.35);
}

.fav-favoriter-name{
  margin-top: 8px;
  font-size: 13px;
  opacity: .9;
  line-height: 1.2;
  word-break: break-all;
}


/* =========================
   12) 歌单页：空态文本（如你有插图空态，可继续扩展）
   ========================= */
.fav-empty-text{
  font-size:15px;
  opacity:.8;
  letter-spacing:.5px;
}

@keyframes floaty{
  0%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
  100%{transform:translateY(0);}
}


/* =========================
   13) 响应式：个人中心网格/字体
   ========================= */
@media (max-width: 1100px){
  .uc-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uc-name{ font-size: 26px; }
}

@media (max-width: 780px){
  .uc-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .uc-pl-card{ border-radius: 18px; }
  .uc-pl-cover{
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(17,24,39,.08);
  }
  .uc-pl-meta{ padding: 10px 10px 12px; }
  .uc-pl-name{ font-size: 14px; }
  .uc-pl-sub{ font-size: 11px; }

  .uc-avatar{ width: 60px; height: 60px; }
  .uc-name{ font-size: 20px; }
  .uc-hero{ padding: 14px 12px 8px; }
}

@media (max-width: 420px){
  .uc-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .uc-pl-card{
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
  }

  .uc-pl-cover{
    border-radius: 12px;
    aspect-ratio: 1 / 1;
    box-shadow: none;
  }

  .uc-pl-meta{
    padding: 8px 8px 10px;
  }

  .uc-pl-name{ font-size: 13px; }
  .uc-pl-sub{ font-size: 11px; }
}

@media (max-width: 560px){
  .fav-favoriters-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 12px 0 !important;
  }

  .fav-favoriter-avatar,
  .fav-favoriter-avatar.placeholder{
    width: 76px !important;
    height: 76px !important;
  }

  .fav-favoriter-name{
    font-size: 12px !important;
    margin-top: 6px !important;
  }
}