/* ============================================================
   DJStudio 全站核心样式 v2.0  — 基于早期原版设计还原
   最后更新: 2026-04-08
   ============================================================ */

/* ========== 设计系统 CSS 变量 ========== */
:root {
  --primary:        #6c3bff;
  --primary-light:  #8b5fff;
  --primary-dark:   #4e20d4;
  --accent:         #ff4b6e;
  --accent2:        #00d4aa;
  --accent3:        #ffb020;
  --bg:             #09090f;
  --bg2:            #0e0e1a;
  --bg3:            #141426;
  --bg4:            #1a1a30;
  --border:         rgba(255,255,255,0.07);
  --border2:        rgba(108,59,255,0.3);
  --text:           #e8e8f5;
  --text2:          #9090b8;
  --text3:          #55558a;
  --card:           rgba(255,255,255,0.03);
  --card-hover:     rgba(108,59,255,0.10);
  --nav-h:          60px;
  --left-w:         220px;
  --right-w:        240px;
  --player-h:       70px;
  --radius:         10px;
}

/* ========== 基础重置 ========== */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  min-height:100vh;
}
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
button { font-family:inherit; }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--primary-dark); border-radius:3px; }

/* ========== 封面占位色 ========== */
.cover-c1 { background:linear-gradient(135deg,#6c3bff,#ff4b6e); }
.cover-c2 { background:linear-gradient(135deg,#0070f3,#00d4aa); }
.cover-c3 { background:linear-gradient(135deg,#ff7020,#ffb020); }
.cover-c4 { background:linear-gradient(135deg,#a020f0,#6c3bff); }
.cover-c5 { background:linear-gradient(135deg,#00d4aa,#0070f3); }
.cover-c6 { background:linear-gradient(135deg,#ff4b6e,#ff7020); }
.cover-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:rgba(255,255,255,.6);
}

/* ========== 顶部导航 ========== */
.topnav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h);
  background:rgba(9,9,15,0.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:0 16px; gap:16px;
}
.nav-hamburger {
  display:none;
  background:none; border:none; color:var(--text2);
  font-size:18px; cursor:pointer; padding:6px 8px;
  border-radius:6px; transition:all .15s; flex-shrink:0;
}
.nav-hamburger:hover { background:var(--bg3); color:var(--text); }
.nav-logo {
  display:flex; align-items:center; gap:9px;
  font-size:18px; font-weight:800; color:#fff;
  white-space:nowrap; flex-shrink:0;
}
.nav-logo .logo-icon {
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.nav-logo .logo-sub { color:var(--primary-light); font-weight:400; font-size:12px; margin-left:2px; }

.nav-search {
  flex:1; max-width:440px;
  display:flex; align-items:center;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; overflow:hidden; transition:border-color .2s;
}
.nav-search:focus-within { border-color:var(--primary); }
.nav-search input {
  flex:1; padding:0 14px; height:36px;
  background:transparent; border:none; outline:none;
  color:var(--text); font-size:13px;
}
.nav-search input::placeholder { color:var(--text3); }
.nav-search button {
  width:38px; height:36px;
  background:var(--primary); border:none; cursor:pointer;
  color:#fff; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.nav-search button:hover { background:var(--primary-dark); }

.nav-tabs {
  display:flex; align-items:center; gap:4px;
  list-style:none; flex-shrink:0;
}
.nav-tabs a {
  padding:6px 13px; border-radius:7px;
  font-size:13px; font-weight:500; color:var(--text2);
  transition:all .18s; white-space:nowrap;
}
.nav-tabs a:hover,
.nav-tabs a.active { color:#fff; background:var(--bg3); }
.nav-tabs a.active { color:var(--primary-light); }

/* 导航下拉菜单 */
.nav-dropdown { position:relative; }
.dropdown-menu {
  position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%);
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:10px; min-width:160px; overflow:hidden;
  opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
  transform:translateX(-50%) translateY(-4px);
  z-index:1000;
}
.nav-dropdown:hover .dropdown-menu {
  opacity:1; pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display:flex; align-items:center; gap:8px;
  padding:9px 16px; font-size:13px; color:var(--text2);
  transition:all .15s; border-radius:0;
}
.dropdown-menu a:hover { background:var(--card-hover); color:var(--text); }
.dropdown-menu a i { width:16px; text-align:center; font-size:12px; }

.nav-right {
  margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.btn-vip {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:7px;
  background:linear-gradient(135deg,#ffb020,#ff7020);
  color:#fff; font-size:12px; font-weight:700;
  cursor:pointer; border:none; text-decoration:none;
}
.btn-login {
  padding:6px 16px; border-radius:7px;
  background:var(--primary); color:#fff;
  font-size:13px; font-weight:600; cursor:pointer; border:none;
  transition:background .2s; text-decoration:none;
}
.btn-login:hover { background:var(--primary-dark); }
.avatar {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; flex-shrink:0;
  font-weight:700; color:#fff; text-decoration:none;
}

/* 创作者中心下拉（网易云风格） */
.creator-dropdown { position:relative; }
.creator-dropdown > a.btn-creator {
  display:flex; align-items:center; gap:5px;
  padding:6px 14px; border-radius:7px;
  background:transparent; color:var(--text);
  font-size:12px; font-weight:500; cursor:pointer;
  border:1px solid var(--border); text-decoration:none;
  transition:.15s;
}
.creator-dropdown > a.btn-creator:hover { border-color:var(--primary); color:var(--primary); }
.creator-dropdown > a.btn-creator i.fa-rocket { color:var(--primary); }
.creator-menu {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  min-width:190px; background:var(--bg); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.4);
  padding:6px; z-index:1001; overflow:hidden;
}
.creator-menu.show { display:block; animation:cmIn .18s ease; }
@keyframes cmIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.creator-menu a {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px; color:var(--text2);
  font-size:13px; text-decoration:none; transition:.12s;
}
.creator-menu a:hover { background:var(--bg2); color:var(--text); }
.creator-menu a i { width:18px; text-align:center; font-size:14px; color:var(--primary); }
.creator-menu-divider { height:1px; background:var(--border); margin:4px 8px; }
/* 未登录状态的创作者按钮 */
.btn-creator-guest {
  display:flex; align-items:center; gap:5px;
  padding:6px 14px; border-radius:7px;
  background:transparent; color:var(--text);
  font-size:12px; font-weight:500; cursor:pointer;
  border:1px solid var(--border); text-decoration:none;
  transition:.15s;
}
.btn-creator-guest:hover { border-color:var(--primary); color:var(--primary); }
.btn-creator-guest i.fa-rocket { color:var(--primary); }

/* 用户头像下拉菜单 */
.user-dropdown { position:relative; }
.user-dropdown > .avatar { text-decoration:none; }
.user-menu {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  min-width:200px; background:var(--bg); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.4);
  padding:6px; z-index:1001; overflow:hidden;
}
.user-menu.show { display:block; animation:cmIn .18s ease; }
.user-menu-hd { padding:12px 14px 8px; }
.user-menu-name { font-size:14px; font-weight:600; color:var(--text); }
.user-menu-id { font-size:11px; color:var(--text3); margin-top:2px; }
.user-menu a {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:8px; color:var(--text2);
  font-size:13px; text-decoration:none; transition:.12s;
}
.user-menu a:hover { background:var(--bg2); color:var(--text); }
.user-menu a i { width:18px; text-align:center; font-size:14px; color:var(--text3); }
.user-menu a:hover i { color:var(--primary); }
.user-menu-divider { height:1px; background:var(--border); margin:4px 8px; }

/* 管理员浮动面板 */
.admin-front-panel {
  position:fixed; right:16px; top:70px; z-index:850;
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:10px; padding:6px; display:flex; flex-direction:column; gap:4px;
}
.admin-panel-icons a {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:7px;
  color:var(--text2); font-size:14px; transition:all .15s;
}
.admin-panel-icons a:hover { background:var(--primary); color:#fff; }

/* ========== 三栏页面布局 ========== */
.page-wrap {
  display:flex;
  padding-top:var(--nav-h);
  padding-bottom:var(--player-h);
  min-height:100vh;
}

/* 左侧固定侧边栏 */
.sidebar-left {
  width:var(--left-w); flex-shrink:0;
  position:fixed; top:var(--nav-h); left:0; bottom:var(--player-h);
  overflow-y:auto; overflow-x:hidden;
  background:var(--bg2);
  border-right:1px solid var(--border);
  padding:16px 0; z-index:100;
}
.sidebar-section { margin-bottom:8px; }
.sidebar-title {
  font-size:10px; font-weight:700; letter-spacing:1.2px;
  color:var(--text3); text-transform:uppercase;
  padding:6px 16px 4px;
}
.sidebar-menu { list-style:none; }
.sidebar-menu li a {
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; font-size:13px; color:var(--text2);
  transition:all .16s; position:relative;
}
.sidebar-menu li a:hover { color:var(--text); background:var(--card-hover); }
.sidebar-menu li a.active {
  color:var(--primary-light); background:rgba(108,59,255,.12);
}
.sidebar-menu li a.active::before {
  content:''; position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:3px; height:60%; border-radius:0 2px 2px 0;
  background:var(--primary);
}
.sidebar-menu li a i { width:16px; text-align:center; font-size:13px; }
.sidebar-badge {
  margin-left:auto; background:var(--accent);
  color:#fff; font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:20px;
}
.sidebar-badge.green { background:var(--accent2); }

/* 播放历史 */
.play-history { padding:8px 0; }
.play-history-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 16px 8px;
}
.play-history-hd span { font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:1px; }
.play-history-hd a { font-size:11px; color:var(--text3); }
.play-history-hd a:hover { color:var(--accent); }
.history-item {
  display:flex; align-items:center; gap:10px;
  padding:6px 16px; cursor:pointer; transition:background .15s;
}
.history-item:hover { background:var(--card-hover); }
.history-cover {
  width:36px; height:36px; border-radius:6px;
  flex-shrink:0; overflow:hidden; position:relative;
}
.history-cover img { width:100%; height:100%; object-fit:cover; }
.history-cover .play-icon {
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  display:none; align-items:center; justify-content:center;
  font-size:12px; color:#fff;
}
.history-item:hover .history-cover .play-icon { display:flex; }
.history-info { flex:1; min-width:0; }
.history-title { font-size:12px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.history-artist { font-size:11px; color:var(--text3); margin-top:1px; }

/* 主内容区 */
.main-content {
  flex:1;
  margin-left:var(--left-w);
  margin-right:var(--right-w);
  padding:20px 20px;
  min-width:0;
}

/* 右侧固定侧边栏 */
.sidebar-right {
  width:var(--right-w); flex-shrink:0;
  position:fixed; top:var(--nav-h); right:0; bottom:var(--player-h);
  overflow-y:auto;
  background:var(--bg2);
  border-left:1px solid var(--border);
  padding:16px 12px; z-index:100;
}
.rs-section { margin-bottom:20px; }
.rs-title {
  font-size:11px; font-weight:800; color:var(--text3);
  text-transform:uppercase; letter-spacing:1.2px;
  margin-bottom:12px; padding-bottom:8px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:6px;
}
.rs-title i { color:var(--primary-light); }

/* ========== 通用组件 ========== */
/* 按钮 */
.btn-primary {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 22px; border-radius:8px;
  background:var(--primary); color:#fff;
  font-size:13px; font-weight:700; border:none; cursor:pointer;
  transition:all .2s; text-decoration:none;
}
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); }
.btn-outline {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 22px; border-radius:8px;
  background:transparent; color:var(--text);
  border:1px solid var(--border2); font-size:13px; font-weight:600; cursor:pointer;
  transition:all .2s; text-decoration:none;
}
.btn-outline:hover { background:var(--card-hover); }

/* 区块标题 */
.sec-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.sec-title {
  font-size:15px; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:8px;
}
.sec-title i { color:var(--primary-light); font-size:14px; }
.sec-more { font-size:12px; color:var(--text3); transition:color .15s; }
.sec-more:hover { color:var(--primary-light); }

/* 曲风标签横排 */
.genre-tabs {
  display:flex; align-items:center; gap:8px;
  overflow-x:auto; padding-bottom:4px; margin-bottom:20px;
  scrollbar-width:none;
}
.genre-tabs::-webkit-scrollbar { display:none; }
.genre-tab {
  flex-shrink:0; padding:6px 16px; border-radius:20px;
  font-size:12px; font-weight:600; cursor:pointer;
  border:1px solid var(--border);
  color:var(--text2); background:var(--bg3);
  transition:all .18s; white-space:nowrap;
}
.genre-tab:hover { border-color:var(--primary); color:var(--primary-light); }
.genre-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* Banner */
.banner-wrap {
  border-radius:var(--radius); overflow:hidden;
  margin-bottom:20px; position:relative;
  height:200px;
  background:linear-gradient(135deg,#1a0a40 0%,#0d0020 40%,#150030 60%,#0a1a30 100%);
  display:flex; align-items:center;
}
.banner-bg-circles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.banner-bg-circles span {
  position:absolute; border-radius:50%;
  filter:blur(60px); opacity:.35;
}
.banner-bg-circles span:nth-child(1) { width:300px;height:300px;background:var(--primary);top:-80px;left:-60px; }
.banner-bg-circles span:nth-child(2) { width:200px;height:200px;background:var(--accent);bottom:-60px;right:80px; }
.banner-bg-circles span:nth-child(3) { width:150px;height:150px;background:var(--accent2);top:20px;right:200px;opacity:.25; }
.banner-content { position:relative; z-index:2; padding:0 32px; }
.banner-tag {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(108,59,255,.3); border:1px solid rgba(108,59,255,.5);
  color:var(--primary-light); font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:20px; margin-bottom:10px;
}
.banner-title { font-size:28px; font-weight:800; color:#fff; margin-bottom:8px; line-height:1.2; }
.banner-title span { color:var(--primary-light); }
.banner-sub { font-size:13px; color:rgba(255,255,255,.6); margin-bottom:16px; }
.banner-btns { display:flex; gap:10px; }

/* ========== 音乐卡片（封面方块） ========== */
.music-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:14px; margin-bottom:28px;
}
.music-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  transition:all .2s;
}
.music-card:hover { border-color:var(--border2); background:var(--card-hover); transform:translateY(-2px); }
.music-card-cover { aspect-ratio:1/1; position:relative; overflow:hidden; background:var(--bg3); }
.music-card-cover img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.music-card:hover .music-card-cover img { transform:scale(1.05); }
.music-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%);
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:10px; opacity:0; transition:opacity .2s;
}
.music-card:hover .music-card-overlay { opacity:1; }
.play-btn-circle {
  width:36px; height:36px; border-radius:50%;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:transform .2s;
}
.play-btn-circle:hover { transform:scale(1.1); }
.music-card-likes { color:#fff; font-size:11px; display:flex; align-items:center; gap:4px; }
.music-card-vip {
  position:absolute; top:8px; right:8px;
  background:linear-gradient(135deg,#ffb020,#ff7020);
  color:#fff; font-size:9px; font-weight:800;
  padding:2px 7px; border-radius:4px; letter-spacing:.5px;
}
.music-card-new {
  position:absolute; top:8px; left:8px;
  background:var(--accent); color:#fff; font-size:9px; font-weight:800;
  padding:2px 7px; border-radius:4px;
}
.music-card-body { padding:10px 10px 12px; }
.music-card-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-card-meta { font-size:11px; color:var(--text3); display:flex; align-items:center; gap:8px; }
.music-card-meta span { display:flex; align-items:center; gap:3px; }

/* ========== 音乐列表（表格式） ========== */
.music-list { margin-bottom:28px; }
.music-list-item {
  display:grid;
  grid-template-columns:28px 44px 1fr auto auto auto;
  align-items:center; gap:12px;
  padding:8px 10px; border-radius:8px;
  cursor:pointer; transition:background .15s;
}
.music-list-item:hover { background:var(--card-hover); }
.music-list-item.playing { background:rgba(108,59,255,.1); }
.ml-idx { font-size:13px; color:var(--text3); text-align:center; }
.ml-idx.playing-icon { color:var(--primary-light); }
.ml-cover { width:44px; height:44px; border-radius:7px; overflow:hidden; background:var(--bg3); flex-shrink:0; }
.ml-cover img { width:100%; height:100%; object-fit:cover; }
.ml-info { min-width:0; }
.ml-title { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ml-artist { font-size:11px; color:var(--text3); margin-top:2px; }
.ml-genre { font-size:11px; color:var(--text3); white-space:nowrap; }
.ml-duration { font-size:12px; color:var(--text3); white-space:nowrap; }
.ml-actions { display:flex; gap:6px; align-items:center; }
.ml-action-btn {
  width:28px; height:28px; border-radius:6px;
  background:transparent; border:none; cursor:pointer;
  color:var(--text3); font-size:12px;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s; text-decoration:none;
}
.ml-action-btn:hover { background:var(--bg3); color:var(--primary-light); }
.ml-action-btn.liked { color:var(--accent); }

/* ========== 排行榜（右侧小榜） ========== */
.mini-rank { display:flex; flex-direction:column; gap:2px; }
.mini-rank-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 6px; border-radius:6px; cursor:pointer;
  transition:background .15s;
}
.mini-rank-item:hover { background:var(--card-hover); }
.mini-rank-num { width:16px; font-size:12px; font-weight:800; text-align:center; flex-shrink:0; }
.mini-rank-num.t1 { color:var(--accent3); }
.mini-rank-num.t2 { color:var(--text2); }
.mini-rank-num.t3 { color:#cd7f32; }
.mini-rank-num.tn { color:var(--text3); font-size:11px; }
.mini-rank-cover { width:32px; height:32px; border-radius:5px; overflow:hidden; flex-shrink:0; background:var(--bg3); }
.mini-rank-cover img { width:100%; height:100%; object-fit:cover; }
.mini-rank-info { flex:1; min-width:0; }
.mini-rank-title { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-rank-sub { font-size:10px; color:var(--text3); }

/* 热门标签 */
.hot-tags { display:flex; flex-wrap:wrap; gap:6px; }
.hot-tag {
  padding:4px 10px; border-radius:5px;
  background:var(--bg3); border:1px solid var(--border);
  font-size:11px; color:var(--text2); cursor:pointer;
  transition:all .15s;
}
.hot-tag:hover { border-color:var(--primary); color:var(--primary-light); background:rgba(108,59,255,.1); }

/* 活跃DJ列表 */
.uploader-list { display:flex; flex-direction:column; gap:10px; }
.uploader-item { display:flex; align-items:center; gap:10px; cursor:pointer; }
.uploader-item:hover .uploader-name { color:var(--primary-light); }
.uploader-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:14px; overflow:hidden;
}
.uploader-avatar img { width:100%; height:100%; object-fit:cover; }
.uploader-info { flex:1; min-width:0; }
.uploader-name { font-size:13px; font-weight:600; color:var(--text); transition:color .15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uploader-count { font-size:11px; color:var(--text3); }
.uploader-follow {
  padding:4px 10px; border-radius:5px; font-size:11px; font-weight:700;
  border:1px solid var(--border2); color:var(--primary-light); cursor:pointer;
  background:transparent; transition:all .15s; flex-shrink:0;
}
.uploader-follow:hover { background:rgba(108,59,255,.2); }

/* 公告 */
.announce-list { display:flex; flex-direction:column; gap:8px; }
.announce-item { display:flex; align-items:flex-start; gap:8px; cursor:pointer; }
.announce-item:hover .announce-title { color:var(--primary-light); }
.announce-dot { width:6px; height:6px; border-radius:50%; background:var(--primary); flex-shrink:0; margin-top:6px; }
.announce-title { font-size:12px; color:var(--text2); line-height:1.5; transition:color .15s; }
.announce-date { font-size:10px; color:var(--text3); margin-top:2px; }

/* ========== 波形动画图标 ========== */
.wave-icon { display:flex; align-items:flex-end; gap:2px; height:14px; }
.wave-icon span {
  width:3px; border-radius:2px; background:var(--primary-light);
  animation:waveAnim 1s ease-in-out infinite alternate;
}
.wave-icon span:nth-child(1){height:4px;animation-delay:0s;}
.wave-icon span:nth-child(2){height:10px;animation-delay:.15s;}
.wave-icon span:nth-child(3){height:7px;animation-delay:.3s;}
.wave-icon span:nth-child(4){height:13px;animation-delay:.1s;}
.wave-icon span:nth-child(5){height:5px;animation-delay:.25s;}
@keyframes waveAnim { from{transform:scaleY(.4);}to{transform:scaleY(1);} }

/* ========== 底部播放器 ========== */
.player-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:950;
  height:var(--player-h);
  background:rgba(14,14,26,0.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  display:flex; align-items:center; padding:0 20px; gap:20px;
}
.player-track { display:flex; align-items:center; gap:12px; flex:0 0 260px; min-width:0; }
.player-cover {
  width:44px; height:44px; border-radius:8px; flex-shrink:0;
  overflow:hidden; background:var(--bg3);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.player-cover img { width:100%; height:100%; object-fit:cover; }
.player-info { flex:1; min-width:0; }
.player-title { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-artist { font-size:11px; color:var(--text3); margin-top:2px; }
.player-like {
  width:28px; height:28px; border-radius:6px; background:transparent; border:none;
  cursor:pointer; color:var(--text3); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s;
}
.player-like:hover { color:var(--accent); }

.player-controls { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
.player-btns { display:flex; align-items:center; gap:16px; }
.ctrl-btn {
  background:transparent; border:none; cursor:pointer;
  color:var(--text2); font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s;
}
.ctrl-btn:hover { color:#fff; }
.ctrl-btn.play-pause {
  width:38px; height:38px; border-radius:50%;
  background:var(--primary); color:#fff; font-size:15px;
  transition:all .2s;
}
.ctrl-btn.play-pause:hover { background:var(--primary-dark); transform:scale(1.05); }
.progress-wrap { width:100%; max-width:480px; display:flex; align-items:center; gap:10px; }
.progress-time { font-size:11px; color:var(--text3); white-space:nowrap; flex-shrink:0; }
.progress-bar {
  flex:1; height:3px; border-radius:2px; background:var(--bg4);
  cursor:pointer; position:relative;
}
.progress-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--primary-light));
  width:0%;
}
.progress-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--primary-light); border:2px solid var(--bg);
  position:absolute; top:50%; transform:translate(-50%,-50%);
  left:0%; pointer-events:none;
}

.player-right { display:flex; align-items:center; gap:12px; flex:0 0 220px; justify-content:flex-end; }
.vol-wrap { display:flex; align-items:center; gap:8px; }
.vol-bar { width:80px; height:3px; border-radius:2px; background:var(--bg4); cursor:pointer; position:relative; }
.vol-fill { height:100%; border-radius:2px; background:var(--text2); width:75%; }
.player-extra-btn {
  background:transparent; border:none; cursor:pointer;
  color:var(--text3); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:6px;
  transition:all .15s;
}
.player-extra-btn:hover { color:#fff; background:var(--bg3); }

/* ========== 侧边栏遮罩（移动端） ========== */
.sidebar-mask {
  display:none;
  position:fixed; inset:0; z-index:99;
  background:rgba(0,0,0,.6);
}

/* ========== 面包屑 ========== */
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text3); margin-bottom:16px; }
.breadcrumb a { color:var(--text3); transition:color .15s; }
.breadcrumb a:hover { color:var(--primary-light); }
.breadcrumb .sep { color:var(--border); }

/* ========== 分页 ========== */
.pagination { display:flex; gap:6px; justify-content:center; align-items:center; padding:20px 0; flex-wrap:wrap; }
.page-btn {
  min-width:32px; height:32px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--bg2);
  color:var(--text2); font-size:13px; text-decoration:none;
  transition:all .15s; padding:0 8px; cursor:pointer;
}
.page-btn:hover { border-color:var(--primary); color:var(--primary-light); }
.page-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:700; }
.page-btn.disabled { opacity:.4; pointer-events:none; }
.page-go { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text3); }
.page-go input {
  width:50px; height:32px; border-radius:7px;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); text-align:center; font-size:12px; outline:none;
}
.page-go input:focus { border-color:var(--primary); }

/* ========== 分割线 ========== */
.divider { border:none; border-top:1px solid var(--border); margin:0 0 24px; }

/* ========== FOOTER ========== */
footer {
  background:var(--bg2);
  border-top:1px solid var(--border);
  padding:28px 24px 16px;
  margin-left:var(--left-w);
  margin-right:var(--right-w);
}
.footer-top { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-bottom:20px; }
.footer-col-title { font-size:12px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.footer-col a { display:block; font-size:12px; color:var(--text3); margin-bottom:6px; transition:color .15s; }
.footer-col a:hover { color:var(--text2); }
.footer-disclaimer {
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  border-radius:8px; padding:12px 16px;
  font-size:11px; color:var(--text3); line-height:1.8; margin-bottom:16px;
}
.footer-disclaimer strong { color:var(--text2); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px; padding-top:14px; border-top:1px solid var(--border);
}
.footer-brand { font-size:14px; font-weight:700; color:#fff; }
.footer-brand span { color:var(--primary-light); }
.footer-icp { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.footer-icp a,.footer-icp span { font-size:11px; color:var(--text3); transition:color .15s; }
.footer-icp a:hover { color:var(--text2); }
.footer-icp-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border:1px solid rgba(108,59,255,.3);
  border-radius:4px; font-size:10px; color:var(--primary-light);
}

/* ============================================================
   统一响应式断点系统
   ============================================================ */

/* 大桌面端 - 1400px+ */
/* @media (max-width: 1400px) { ... } */

/* 桌面端 - 1200px */
@media (max-width: 1200px) {
  :root { --right-w: 180px; }
}

/* 平板横屏 / 小桌面 - 992px */
@media (max-width: 992px) {
  .sidebar-right { display: none !important; }
  .main-content { margin-right: 0; }
  footer { margin-right: 0; }
}

/* 平板竖屏 / 大手机横屏 - 768px */
@media (max-width: 768px) {
  :root { --left-w: 260px; }
  
  /* 导航栏 */
  .nav-hamburger { display: flex !important; }
  .nav-tabs { display: none !important; }
  .nav-search { max-width: 160px; padding: 6px 10px; }
  .nav-search input { font-size: 12px; padding: 6px 8px; }
  
  /* 左侧栏默认隐藏 */
  .sidebar-left {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 200;
    top: 0;
    padding-top: calc(var(--nav-h) + 8px);
  }
  .sidebar-left.open {
    transform: translateX(0);
  }
  .sidebar-mask.show { display: block; }

  /* 主内容区 */
  .main-content { margin-left: 0; padding: 16px 12px; }
  footer { margin-left: 0; margin-right: 0; padding: 20px 12px; padding-bottom: 80px !important; }

  /* 音乐网格 */
  .music-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  
  /* 横幅 */
  .banner-title { font-size: 20px; }
  .banner-wrap { height: 160px; }
  
  /* 播放器优化 */
  .player-track { flex: 0 0 160px; }
  .player-right { display: none; }
  .progress-wrap { max-width: 200px; }
}

/* 大手机 - 576px */
@media (max-width: 576px) {
  /* 导航栏进一步优化 */
  .nav-search { max-width: 120px; }
  .nav-search button { display: none; }
  
  /* 主内容 */
  .main-content { padding: 12px 10px; padding-bottom: 80px !important; }
  
  /* 卡片网格 */
  .music-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  
  /* 播放器 */
  .player-track { flex: 0 0 140px; }
  .player-cover { width: 44px; height: 44px; }
}

/* 小手机 - 375px */
@media (max-width: 375px) {
  /* 导航栏 - 隐藏桌面搜索，显示移动端搜索按钮 */
  .nav-search { display: none !important; }
  .nav-search-toggle { display: flex !important; }
  
  /* 主内容 */
  .main-content { padding: 10px 8px; padding-bottom: 80px !important; }
  
  /* 播放器 */
  .player-track { flex: 0 0 120px; }
  .player-cover { width: 40px; height: 40px; }
  .player-title { font-size: 12px; max-width: 80px; }
  .player-artist { font-size: 10px; }
}

/* ========== 页面大标题区（舞曲库/排行榜等） ========== */
.page-header {
  background:linear-gradient(135deg,rgba(108,59,255,.15),rgba(255,75,110,.07));
  border:1px solid var(--border2); border-radius:14px;
  padding:20px 24px; margin-bottom:18px;
  display:flex; align-items:center; gap:20px;
}
.page-header-icon {
  width:52px; height:52px; border-radius:13px; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff;
}
.page-header-info { flex:1; min-width:0; }
.page-header-info h1 { font-size:20px; font-weight:800; color:#fff; margin-bottom:3px; }
.page-header-info p  { font-size:12px; color:var(--text2); }
.page-header-stats { display:flex; gap:20px; flex-shrink:0; }
.ph-stat { text-align:center; }
.ph-stat .num {
  font-size:18px; font-weight:800;
  background:linear-gradient(135deg,var(--primary-light),var(--accent2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.ph-stat .label { font-size:11px; color:var(--text3); margin-top:1px; }

/* ========== 顶部筛选栏（filter-bar） ========== */
.filter-bar {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:14px 18px; margin-bottom:16px;
}
.filter-row {
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; margin-bottom:10px;
}
.filter-row:last-child { margin-bottom:0; }
.filter-label { font-size:11px; font-weight:700; color:var(--text3); width:44px; flex-shrink:0; text-transform:uppercase; letter-spacing:.5px; }
.filter-tags { display:flex; flex-wrap:wrap; gap:5px; flex:1; }
.ftag {
  padding:4px 12px; border-radius:6px; font-size:12px;
  border:1px solid var(--border); color:var(--text2);
  cursor:pointer; transition:all .15s; background:transparent;
  text-decoration:none; display:inline-block;
}
.ftag:hover { border-color:var(--primary-light); color:var(--primary-light); }
.ftag.active { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; }
.sort-btns { margin-left:auto; display:flex; gap:5px; flex-shrink:0; }
.sort-btn {
  padding:4px 12px; border-radius:6px; font-size:12px;
  border:1px solid var(--border); color:var(--text2);
  cursor:pointer; transition:all .15s; background:transparent;
  display:flex; align-items:center; gap:5px;
  text-decoration:none; white-space:nowrap;
}
.sort-btn:hover { border-color:var(--primary-light); color:var(--primary-light); }
.sort-btn.active { background:rgba(108,59,255,.15); border-color:var(--primary); color:var(--primary-light); }

/* ========== 批量操作条 ========== */
.batch-bar { display:flex; align-items:center; gap:10px; padding:8px 0; margin-bottom:6px; }
.batch-total { font-size:12px; color:var(--text3); }
.batch-actions { margin-left:auto; display:flex; gap:7px; }
.batch-btn {
  padding:5px 13px; border-radius:7px; font-size:12px;
  border:1px solid var(--border); color:var(--text2); cursor:pointer;
  background:transparent; transition:all .15s;
  display:flex; align-items:center; gap:5px;
}
.batch-btn:hover { background:var(--bg4); border-color:var(--primary-light); color:var(--primary-light); }

/* ========== 曲目列表（track-table / track-row） ========== */
.table-header {
  display:flex; align-items:center; gap:0;
  padding:8px 12px; border-radius:8px; margin-bottom:2px;
  background:var(--bg2); border:1px solid var(--border);
}
.th { font-size:10px; font-weight:700; color:var(--text3); letter-spacing:.3px; padding:0 4px; box-sizing:border-box; }
.th-check  { width:36px; flex-shrink:0; }
.th-num    { width:38px; flex-shrink:0; text-align:center; }
.th-cover  { width:56px; flex-shrink:0; }
.th-info   { flex:1; min-width:140px; }
.th-genre  { width:80px; flex-shrink:0; text-align:center; }
.th-duration{width:54px; flex-shrink:0; text-align:center; }
.th-quality{ width:62px; flex-shrink:0; text-align:center; }
.th-date   { width:82px; flex-shrink:0; text-align:center; }
.th-coins  { width:48px; flex-shrink:0; text-align:center; }
.th-likes  { width:48px; flex-shrink:0; text-align:center; }
.th-favs   { width:48px; flex-shrink:0; text-align:center; }
.th-views  { width:52px; flex-shrink:0; text-align:center; }
.th-downs  { width:52px; flex-shrink:0; text-align:center; }
.th-uploader{width:80px; flex-shrink:0; text-align:center; }

.track-table { width:100%; }
.track-row {
  display:flex; align-items:center; gap:0;
  padding:8px 12px; border-radius:10px;
  margin-bottom:2px; background:var(--card);
  border:1px solid transparent; transition:all .18s; cursor:pointer;
  position:relative;
}
.track-row:hover { background:var(--card-hover); border-color:var(--border2); }
.track-row.playing {
  background:rgba(108,59,255,.12); border-color:var(--primary);
}
.track-row.playing::before {
  content:''; position:absolute; left:0; top:4px; bottom:4px;
  width:3px; border-radius:0 2px 2px 0; background:var(--primary);
}
.tc-check  { width:36px; flex-shrink:0; padding:0 4px; box-sizing:border-box; }
.tc-check input { accent-color:var(--primary); cursor:pointer; }
.tc-num    { width:38px; flex-shrink:0; font-size:12px; color:var(--text3); text-align:center; padding:0 4px; box-sizing:border-box; }
.tc-num.top3 { font-weight:800; }
.tc-num.r1 { color:var(--accent3); }
.tc-num.r2 { color:var(--text2); }
.tc-num.r3 { color:#cd7f32; }
.tc-cover  {
  width:56px; height:44px; border-radius:8px; background:var(--bg3);
  flex-shrink:0; overflow:hidden; position:relative;
}
.tc-cover img { width:100%; height:100%; object-fit:cover; }
.tc-cover .play-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s;
}
.track-row:hover .tc-cover .play-overlay { opacity:1; }
.play-overlay i { color:#fff; font-size:15px; }
.tc-info   { flex:1; min-width:140px; padding:0 4px; box-sizing:border-box; }
.tc-name   { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.tc-name a:hover { color:var(--primary-light); }
.tc-meta   { display:flex; align-items:center; gap:10px; }
.tc-meta .dj-link { font-size:12px; color:var(--text3); }
.tc-meta .dj-link:hover { color:var(--accent2); }
.tc-tags   { display:flex; gap:4px; flex-wrap:wrap; }
.tc-tag    { padding:1px 7px; border-radius:4px; font-size:10px; font-weight:600; }
.tc-tag.hq   { background:rgba(0,212,170,.13); color:var(--accent2); border:1px solid rgba(0,212,170,.2); }
.tc-tag.vip  { background:rgba(255,176,32,.13); color:var(--accent3); border:1px solid rgba(255,176,32,.2); }
.tc-tag.new  { background:rgba(255,75,110,.13);  color:var(--accent);  border:1px solid rgba(255,75,110,.2); }
.tc-tag.free { background:rgba(108,59,255,.13); color:var(--primary-light); border:1px solid rgba(108,59,255,.2); }
.tc-quality { width:62px; flex-shrink:0; text-align:center; padding:0 4px; box-sizing:border-box; }
.quality-badge {
  display:inline-block; padding:2px 8px; border-radius:5px;
  font-size:11px; font-weight:700;
  background:rgba(0,212,170,.1); color:var(--accent2);
  border:1px solid rgba(0,212,170,.18);
}
.tc-duration { width:54px; flex-shrink:0; text-align:center; font-size:12px; color:var(--text3); padding:0 4px; box-sizing:border-box; }
.tc-date     { width:82px; flex-shrink:0; text-align:center; font-size:11px; color:var(--text3); padding:0 4px; box-sizing:border-box; white-space:nowrap; }
.tc-coins    { width:48px; flex-shrink:0; text-align:center; padding:0 4px; box-sizing:border-box; }
.tc-genre    { width:80px; flex-shrink:0; text-align:center; font-size:11px; color:var(--text3); padding:0 4px; box-sizing:border-box; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-likes    { width:48px; flex-shrink:0; text-align:center; font-size:12px; color:var(--text3); padding:0 4px; box-sizing:border-box; }
.tc-favs     { width:48px; flex-shrink:0; text-align:center; font-size:12px; color:var(--text3); padding:0 4px; box-sizing:border-box; }
.tc-views    { width:52px; flex-shrink:0; text-align:center; font-size:12px; color:var(--text3); padding:0 4px; box-sizing:border-box; }
.tc-downs    { width:52px; flex-shrink:0; text-align:center; font-size:12px; color:var(--text3); padding:0 4px; box-sizing:border-box; }
.tc-uploader { width:80px; flex-shrink:0; text-align:center; font-size:11px; color:var(--primary-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px; box-sizing:border-box; }
.coin-badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 8px; border-radius:5px;
  font-size:11px; font-weight:700;
  background:rgba(255,176,32,.1); color:var(--accent3);
  border:1px solid rgba(255,176,32,.18);
}
.coin-badge.free {
  background:rgba(108,59,255,.1); color:var(--primary-light);
  border-color:rgba(108,59,255,.2);
}
.tc-actions  { width:90px; flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:5px; }
.action-btn {
  width:28px; height:28px; border-radius:7px;
  background:transparent; border:1px solid var(--border);
  color:var(--text3); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:12px; transition:all .15s;
  text-decoration:none;
}
.action-btn:hover { background:var(--bg4); border-color:var(--primary); color:var(--primary-light); }
.action-btn.dl   { background:var(--primary); border-color:var(--primary); color:#fff; }
.action-btn.dl:hover { background:var(--primary-dark); }
.action-btn.play-now { color:var(--accent2); border-color:rgba(0,212,170,.3); }
.action-btn.play-now:hover { background:rgba(0,212,170,.15); border-color:var(--accent2); }

/* 舞曲库移动端适配 */
@media (max-width: 992px) {
  .page-header-stats { display: none; }
  .tc-date, .th-date { display: none; }
}
@media (max-width: 768px) {
  .page-header { padding: 14px 16px; gap: 12px; }
  .page-header-icon { width: 40px; height: 40px; font-size: 17px; }
  .page-header-info h1 { font-size: 16px; }
  .filter-bar { padding: 10px 12px; }
  .filter-label { display: none; }
  .table-header { display: none; }
  .tc-check, .tc-num { display: none; }
  .tc-quality, .th-quality, .tc-duration, .th-duration { display: none; }
  .tc-actions { width: 70px; }
}
@media (max-width: 576px) {
  .batch-actions { display: none; }
  .tc-coins, .th-coins { display: none; }
}

/* ========== 论坛专用（forum hero / cat-grid / post-list） ========== */
.forum-hero {
  background:linear-gradient(135deg,rgba(108,59,255,.18),rgba(255,75,110,.10));
  border:1px solid var(--border2); border-radius:14px;
  padding:28px 32px; margin-bottom:24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.forum-hero-left h1 { font-size:22px; font-weight:800; margin-bottom:6px; }
.forum-hero-left h1 span { background:linear-gradient(90deg,var(--primary-light),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.forum-hero-left p { font-size:13px; color:var(--text2); line-height:1.6; }
.forum-hero-stats { display:flex; gap:24px; margin-top:16px; }
.forum-stat { text-align:center; }
.forum-stat .num { font-size:20px; font-weight:800; color:var(--primary-light); }
.forum-stat .label { font-size:11px; color:var(--text3); margin-top:2px; }
.btn-post {
  display:flex; align-items:center; gap:8px;
  padding:11px 22px; background:linear-gradient(135deg,var(--primary),var(--accent));
  border:none; border-radius:10px; color:#fff; font-size:14px; font-weight:700;
  cursor:pointer; white-space:nowrap; transition:opacity .2s; flex-shrink:0;
  text-decoration:none;
}
.btn-post:hover { opacity:.85; }

/* 板块分类 5列 */
.cat-grid {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:12px; margin-bottom:28px;
}
.cat-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:20px 16px 18px; cursor:pointer; transition:all .2s;
  text-align:center; position:relative; overflow:hidden;
  text-decoration:none; display:block;
}
.cat-card::before {
  content:''; position:absolute; inset:0;
  background:var(--cat-grad,linear-gradient(135deg,rgba(108,59,255,.15),rgba(108,59,255,.05)));
  opacity:0; transition:opacity .2s;
}
.cat-card:hover::before,.cat-card.active::before { opacity:1; }
.cat-card:hover { border-color:var(--cat-color,var(--primary)); transform:translateY(-2px); }
.cat-card.active { border-color:var(--cat-color,var(--primary)); }
.cat-card .cat-icon {
  width:44px; height:44px; border-radius:12px;
  background:var(--cat-grad,linear-gradient(135deg,var(--primary),var(--accent)));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin:0 auto 12px; color:#fff;
}
.cat-card .cat-name { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.cat-card .cat-desc { font-size:11px; color:var(--text3); line-height:1.5; }
.cat-card .cat-count { font-size:11px; color:var(--text3); margin-top:8px; }
.cat-card .cat-count span { color:var(--primary-light); font-weight:600; }

/* 论坛筛选栏 */
.forum-filter-bar { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.filter-tabs { display:flex; gap:4px; }
.filter-tab {
  padding:5px 16px; border-radius:20px; font-size:12px; font-weight:600;
  color:var(--text2); background:var(--bg3); border:1px solid var(--border);
  cursor:pointer; transition:all .18s;
}
.filter-tab:hover,.filter-tab.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.filter-tab.active { box-shadow:0 0 12px rgba(108,59,255,.4); }
.forum-filter-right { margin-left:auto; display:flex; gap:8px; }
.btn-newpost {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; background:var(--primary); border:none;
  border-radius:8px; color:#fff; font-size:12px; font-weight:600;
  cursor:pointer; transition:background .2s; text-decoration:none;
}
.btn-newpost:hover { background:var(--primary-dark); }

/* section-head (论坛用) */
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-head h2 { font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.section-head h2 i { color:var(--primary-light); }
.section-head a { font-size:12px; color:var(--text3); }
.section-head a:hover { color:var(--primary-light); }

/* 帖子列表行 */
.post-list {
  display:flex; flex-direction:column; gap:1px;
  background:var(--border); border-radius:12px;
  overflow:hidden; border:1px solid var(--border);
  margin-bottom:20px;
}
.post-item {
  background:var(--bg2); padding:13px 16px;
  display:flex; align-items:center; gap:12px;
  transition:background .15s; cursor:pointer;
}
.post-item:hover { background:var(--bg3); }
.post-item:first-child { border-radius:12px 12px 0 0; }
.post-item:last-child  { border-radius:0 0 12px 12px; }
.post-pin { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; width:38px; }
.pin-icon {
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.pin-icon.cat-q { background:rgba(255,75,110,.15); color:#ff4b6e; }
.pin-icon.cat-t { background:rgba(0,212,170,.15); color:#00d4aa; }
.pin-icon.cat-p { background:rgba(108,59,255,.15); color:#8b5fff; }
.pin-icon.cat-w { background:rgba(255,176,32,.15); color:#ffb020; }
.pin-icon.cat-s { background:rgba(99,175,255,.15); color:#63afff; }
.pin-sticky { font-size:10px; color:var(--accent); font-weight:700; }
.post-body { flex:1; min-width:0; }
.post-title-row { display:flex; align-items:center; gap:7px; margin-bottom:4px; flex-wrap:wrap; }
.post-tag {
  font-size:10px; padding:2px 7px; border-radius:4px; font-weight:700; flex-shrink:0;
}
.post-tag.solved { background:rgba(0,212,170,.15); color:var(--accent2); }
.post-tag.hot    { background:rgba(255,75,110,.15); color:var(--accent); }
.post-tag.new    { background:rgba(108,59,255,.15); color:var(--primary-light); }
.post-tag.pin    { background:rgba(255,176,32,.15); color:var(--accent3); }
.post-title {
  font-size:14px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  flex:1; min-width:0; text-decoration:none;
}
.post-title:hover { color:var(--primary-light); }
.post-meta { display:flex; align-items:center; gap:10px; font-size:11px; color:var(--text3); flex-wrap:wrap; }
.post-meta .author { color:var(--text2); }
.post-meta .author:hover { color:var(--primary-light); }
.post-stats { display:flex; flex-direction:column; align-items:center; gap:2px; flex-shrink:0; min-width:50px; }
.post-stat-num { font-size:15px; font-weight:700; color:var(--text2); }
.post-stat-label { font-size:10px; color:var(--text3); }
.post-last { flex-shrink:0; text-align:right; min-width:72px; }
.post-last-time { font-size:11px; color:var(--text3); }
.post-last-user { font-size:11px; color:var(--text2); margin-top:2px; }

/* 分页 */
.pagination { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:20px; }
.page-btn {
  width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text2); cursor:pointer; transition:all .18s;
  text-decoration:none;
}
.page-btn:hover,.page-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.page-btn.active { box-shadow:0 0 12px rgba(108,59,255,.4); }

/* 空状态 */
.empty-state { text-align:center; padding:48px 20px; color:var(--text3); }
.empty-state i { font-size:36px; margin-bottom:12px; color:var(--bg4); display:block; }
.empty-state p { font-size:14px; }

/* 论坛移动端 */
@media (max-width: 992px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .forum-hero { padding: 20px; }
  .forum-hero-stats { gap: 16px; }
}
@media (max-width: 768px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .forum-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .btn-post { width: 100%; justify-content: center; }
  .post-last { display: none; }
}
@media (max-width: 576px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .post-stats { display: none; }
}

/* ========== 搜索结果专用 ========== */
.search-hero {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; padding:22px 24px; margin-bottom:20px;
}
.search-kw { font-size:20px; font-weight:800; color:#fff; margin-bottom:5px; }
.search-kw span { color:var(--primary-light); }
.search-total { font-size:13px; color:var(--text3); margin-bottom:10px; }
.search-hot-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.search-result-form {
  display:flex; gap:10px; margin-bottom:18px; max-width:580px;
}
.search-result-form input {
  flex:1; background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; padding:10px 14px; color:var(--text);
  font-size:14px; outline:none; transition:border-color .2s;
}
.search-result-form input:focus { border-color:var(--primary); }
.search-result-form button {
  padding:10px 22px; border-radius:8px; background:var(--primary);
  color:#fff; font-size:13px; font-weight:700; border:none; cursor:pointer;
  transition:background .2s;
}
.search-result-form button:hover { background:var(--primary-dark); }
.result-tabs {
  display:flex; gap:0; border-bottom:1px solid var(--border);
  margin-bottom:20px;
}
.rtab {
  padding:10px 18px; font-size:13px; font-weight:600;
  color:var(--text3); cursor:pointer;
  border-bottom:2px solid transparent; transition:all .18s;
  display:flex; align-items:center; gap:6px; text-decoration:none;
}
.rtab:hover { color:var(--text); }
.rtab.active { color:var(--primary-light); border-bottom-color:var(--primary); }
.rtab .cnt {
  padding:1px 7px; border-radius:10px; font-size:10px;
  background:var(--primary); color:#fff;
}
.result-section { margin-bottom:28px; }
.rs-head { font-size:14px; font-weight:700; color:var(--text); margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.rs-head i { color:var(--primary-light); }
.track-mini {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px;
  background:var(--card); border:1px solid transparent;
  transition:all .18s; cursor:pointer; margin-bottom:4px;
}
.track-mini:hover { background:var(--card-hover); border-color:var(--border2); }
.tm-cover {
  width:42px; height:42px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.tm-info { flex:1; min-width:0; }
.tm-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-name em { color:var(--accent); font-style:normal; }
.tm-meta { font-size:11px; color:var(--text3); margin-top:2px; }
.tm-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tm-play-btn {
  width:30px; height:30px; border-radius:50%; background:var(--primary);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none;
}
.tm-play-btn i { color:#fff; font-size:11px; margin-left:1px; }
.search-meta { font-size:13px; color:var(--text2); margin-bottom:16px; }
.search-meta strong { color:var(--primary-light); }

/* ========== 曲风分类专用 ========== */
.genre-grid-cards {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px; margin-bottom:32px;
}
.genre-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; cursor:pointer;
  position:relative; aspect-ratio:4/3; transition:transform .2s;
  text-decoration:none; display:block;
}
.genre-card:hover { transform:translateY(-4px); border-color:var(--border2); }
.genre-card-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.genre-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.75) 100%);
}
.genre-card-content {
  position:relative; z-index:1; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; padding:14px;
}
.genre-card-icon { font-size:22px; margin-bottom:6px; }
.genre-card-name { font-size:15px; font-weight:800; color:#fff; }
.genre-card-count { font-size:11px; color:rgba(255,255,255,.7); margin-top:2px; }
.genre-card-badge { position:absolute; top:10px; right:10px; padding:2px 8px; border-radius:5px; font-size:10px; font-weight:700; }
.genre-card-badge.hot { background:var(--accent); color:#fff; }
.genre-card-badge.new { background:var(--accent2); color:#000; }
.genre-simple-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:12px; margin-bottom:28px;
}
.genre-simple-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:18px 14px; text-align:center; transition:all .2s;
  text-decoration:none; display:block;
  position:relative; overflow:hidden;
}
.genre-simple-card::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent)); opacity:0; transition:opacity .2s;
}
.genre-simple-card:hover { border-color:var(--border2); transform:translateY(-3px); }
.genre-simple-card:hover::before { opacity:1; }
.genre-simple-icon {
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; margin:0 auto 10px; font-size:22px;
}
.genre-simple-name { font-size:15px; font-weight:800; color:#fff; margin-bottom:4px; }
.genre-simple-en { font-size:11px; color:var(--text3); }
.genre-simple-count { font-size:11px; color:var(--text3); margin-top:6px; }
.genre-simple-count span { color:var(--primary-light); font-weight:600; }

@media (max-width:768px) {
  .genre-grid-cards { grid-template-columns:repeat(2,1fr); }
  .genre-simple-grid { grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   DJStudio 电台页面样式
   ============================================================ */

/* 频道网格 */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

/* 频道卡片 */
.channel-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s ease;
}
.channel-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(108,59,255,0.2);
}
.channel-cover {
  position: relative;
  height: 120px;
  overflow: hidden;
}
.official-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.channel-info {
  padding: 12px;
}
.channel-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 6px;
}
.channel-description {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.channel-stats {
  display: flex;
  gap: 12px;
}
.channel-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text3);
}
.channel-stat i {
  font-size: 10px;
}

/* 分类标签 */
.category-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.category-tag {
  padding: 6px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.2s;
}
.category-tag:hover,
.category-tag.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* 节目列表 */
.program-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}
.program-item {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}
.program-item:hover {
  border-color: var(--primary);
  background: var(--card-hover);
}
.program-cover {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 8px;
  overflow: hidden;
}
.program-content {
  flex: 1;
  min-width: 0;
}
.program-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.program-meta {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 6px;
}
.program-description {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.program-stats {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text3);
}
.program-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   电台节目详情页样式
   ============================================================ */
.program-detail {
  padding: 0;
}

/* 节目头部 */
.program-header {
  display: flex;
  gap: 24px;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.program-cover-large {
  width: 200px;
  height: 200px;
  min-width: 200px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.program-cover-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.program-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.program-title-large {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}

.channel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-light);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 4px 12px;
  background: rgba(108, 59, 255, 0.1);
  border-radius: 20px;
  width: fit-content;
  transition: all 0.2s;
}

.channel-link:hover {
  background: rgba(108, 59, 255, 0.2);
  color: #fff;
}

.program-description {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.7;
  margin: 0;
}

.program-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.btn-play-all {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-play-all:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 59, 255, 0.4);
}

.btn-play-all i {
  font-size: 16px;
}

.btn-subscribe-program {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-subscribe-program:hover {
  border-color: var(--primary);
  color: var(--primary-light);
  background: rgba(108, 59, 255, 0.1);
}

.btn-subscribe-program.subscribed {
  border-color: var(--accent2);
  color: var(--accent2);
  background: rgba(0, 212, 170, 0.1);
}

.program-meta-info {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: auto;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text3);
}

.meta-item i {
  color: var(--text3);
  font-size: 12px;
}

/* 单集列表区域 */
.episode-list-section {
  margin-bottom: 30px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.episode-count {
  font-size: 13px;
  color: var(--text3);
}

/* 单集表格列表 */
.episode-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.episode-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.episode-row:hover {
  border-color: var(--primary);
  background: rgba(108, 59, 255, 0.05);
  transform: translateX(4px);
}

.episode-no {
  width: 50px;
  min-width: 50px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-light);
}

.episode-details {
  flex: 1;
  min-width: 0;
}

.episode-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.episode-excerpt {
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.episode-duration {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text3);
  min-width: 70px;
}

.episode-plays {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text3);
  min-width: 80px;
}

.episode-actions {
  display: flex;
  align-items: center;
}

.episode-play-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  transition: all 0.2s;
  cursor: pointer;
}

.episode-play-btn:hover {
  background: var(--primary-dark);
  transform: scale(1.1);
}

/* 响应式适配 - 电台详情页 */
@media (max-width: 992px) {
  .program-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .program-cover-large {
    width: 180px;
    height: 180px;
  }
  
  .program-actions {
    justify-content: center;
  }
  
  .program-meta-info {
    justify-content: center;
  }
  
  .channel-link {
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .program-title-large {
    font-size: 22px;
  }
  
  .program-cover-large {
    width: 160px;
    height: 160px;
  }
  
  .episode-row {
    padding: 12px;
    gap: 12px;
  }
  
  .episode-duration,
  .episode-plays {
    display: none;
  }
  
  .episode-no {
    width: 40px;
    min-width: 40px;
    font-size: 12px;
  }
}

@media (max-width: 576px) {
  .program-header {
    padding: 16px 0 20px;
    gap: 16px;
  }
  
  .program-cover-large {
    width: 140px;
    height: 140px;
  }
  
  .program-title-large {
    font-size: 20px;
  }
  
  .program-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-play-all,
  .btn-subscribe-program {
    width: 100%;
    justify-content: center;
  }
  
  .episode-row {
    padding: 10px;
  }
  
  .episode-name {
    font-size: 13px;
  }
  
  .episode-excerpt {
    display: none;
  }
}

/* 单集卡片 */
.episode-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.episode-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.episode-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.episode-header {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}
.episode-cover {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 8px;
  overflow: hidden;
}
.episode-info {
  flex: 1;
  min-width: 0;
}
.episode-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.episode-channel {
  font-size: 11px;
  color: var(--text3);
}
.episode-footer {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--text3);
}
.episode-footer span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .channel-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .episode-list {
    grid-template-columns: 1fr;
  }
  .program-item {
    flex-direction: column;
  }
  .program-cover {
    width: 100%;
    height: 100px;
  }
}

@media (max-width: 576px) {
  .channel-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   百科详情页样式
   ============================================================ */

/* 详情页容器 */
.entry-detail {
  padding: 20px 0;
}

/* 头部区域 */
.entry-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.entry-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.3;
}
.entry-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text2);
}
.entry-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.entry-meta i {
  color: var(--primary);
}
.entry-actions {
  display: flex;
  gap: 12px;
}
.btn-like, .btn-share {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-like:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-like.liked {
  background: rgba(255,75,110,0.15);
  border-color: var(--accent);
  color: var(--accent);
}
.btn-share:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* 主要内容布局 */
.entry-content-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  margin-bottom: 30px;
}

/* 左侧正文 */
.entry-body {
  min-width: 0;
}
.entry-excerpt {
  font-size: 18px;
  color: var(--text2);
  line-height: 1.7;
  padding: 16px;
  background: var(--bg3);
  border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
  margin-bottom: 20px;
}
.entry-html-content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 20px;
}
.entry-html-content p {
  margin-bottom: 16px;
}
.entry-fun-fact {
  background: linear-gradient(135deg, rgba(108,59,255,0.15), rgba(255,75,110,0.1));
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 16px;
  margin: 20px 0;
}
.fun-fact-title {
  font-weight: 700;
  color: var(--primary-light);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section {
  margin: 24px 0;
}
.section h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section h2 i {
  color: var(--primary);
}
.section p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text2);
  margin-bottom: 10px;
}

/* 右侧侧边栏 */
.entry-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.info-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.info-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.info-row:last-child {
  border-bottom: none;
}
.info-label {
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
}
.info-value {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.year-badge {
  background: var(--primary);
  color: #fff;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

/* 音频预览 */
.audio-preview {
  background: var(--bg2);
  border-radius: 8px;
  padding: 12px;
}
.preview-player {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.play-btn-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.play-btn-sm:hover {
  background: var(--primary-dark);
  transform: scale(1.05);
}
.preview-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.preview-duration {
  font-size: 11px;
  color: var(--text3);
}
.progress-bar-sm {
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill-sm {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s;
}

/* 作者卡片 */
.author-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}
.author-info {
  flex: 1;
}
.author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.author-desc {
  font-size: 11px;
  color: var(--text3);
}

/* 推荐阅读 */
.recommended-section {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
.recommended-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.recommended-section .section-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.see-more {
  font-size: 13px;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}
.see-more:hover {
  color: var(--primary-light);
}
.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.rec-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.rec-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(108,59,255,0.15);
}
.rec-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.rec-excerpt {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rec-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text3);
}
.rec-read {
  color: var(--primary);
  font-weight: 600;
}

/* 响应式 */
@media (max-width: 992px) {
  .entry-content-layout {
    grid-template-columns: 1fr;
  }
  .entry-sidebar {
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .entry-sidebar .info-card {
    flex: 1;
    min-width: 200px;
  }
}
@media (max-width: 576px) {
  .entry-title {
    font-size: 22px;
  }
  .entry-sidebar {
    flex-direction: column;
  }
  .entry-sidebar .info-card {
    min-width: 100%;
  }
}

/* ============================================================
   个人中心 / 用户中心样式
   ============================================================ */

/* 通用卡片组件 */
.card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 18px;
}

.card-hd {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-hd a {
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-light);
  text-decoration: none;
}

.card-hd a:hover {
  color: #fff;
}

/* 用户中心容器 */
.user-center {
  padding: 0;
}

.user-center-header {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.user-avatar-large {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(108, 59, 255, 0.3);
}

.user-info-detail {
  flex: 1;
}

.user-nickname {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.user-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.user-stats-row {
  display: flex;
  gap: 24px;
  margin-top: 12px;
}

.user-stat-item {
  text-align: center;
}

.user-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--primary-light);
}

.user-stat-label {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

/* 用户中心标签页 */
.uc-tabs {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.uc-tab {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  text-decoration: none;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.uc-tab:hover {
  background: var(--bg4);
  color: var(--text);
}

.uc-tab.active {
  background: var(--primary);
  color: #fff;
}

.uc-tab i {
  font-size: 14px;
}

/* 用户中心网格布局 */
.uc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

/* 任务卡片 */
.task-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s;
}

.task-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.task-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(108, 59, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.task-info {
  flex: 1;
  min-width: 0;
}

.task-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.task-desc {
  font-size: 12px;
  color: var(--text3);
}

.task-reward {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent3);
}

.task-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.task-btn.doing {
  background: var(--primary);
  color: #fff;
}

.task-btn.doing:hover {
  background: var(--primary-dark);
}

.task-btn.done {
  background: var(--bg4);
  color: var(--text3);
  cursor: default;
}

/* 成就徽章 */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
}

.badge-item {
  text-align: center;
  padding: 16px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.2s;
}

.badge-item:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.badge-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.badge-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

/* 钱包/金币 */
.wallet-card {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  margin-bottom: 18px;
}

.wallet-balance {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 4px;
}

.wallet-label {
  font-size: 13px;
  opacity: 0.8;
}

.wallet-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.wallet-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
}

.wallet-btn.primary {
  background: #fff;
  color: var(--primary);
}

.wallet-btn.secondary {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* 排行榜条目 */
.rank-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  transition: all 0.2s;
}

.rank-list-item:hover {
  border-color: var(--primary);
  background: rgba(108, 59, 255, 0.05);
}

.rank-num {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--text2);
}

.rank-num.top1 { background: linear-gradient(135deg, #ffd700, #ffaa00); color: #000; }
.rank-num.top2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #000; }
.rank-num.top3 { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; }

/* 用户中心响应式 */
@media (max-width: 992px) {
  .user-center-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .user-stats-row {
    justify-content: center;
  }
  
  .uc-tabs {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .user-nickname {
    font-size: 20px;
  }
  
  .uc-grid {
    grid-template-columns: 1fr;
  }
  
  .uc-tabs {
    gap: 2px;
    padding: 6px;
  }
  
  .uc-tab {
    padding: 8px 12px;
    font-size: 12px;
    flex: 1;
    justify-content: center;
  }
  
  .badge-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .wallet-balance {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .user-avatar-large {
    width: 80px;
    height: 80px;
    font-size: 28px;
  }
  
  .user-stats-row {
    gap: 16px;
  }
  
  .task-card {
    flex-wrap: wrap;
  }
  
  .task-btn {
    width: 100%;
    margin-top: 8px;
    text-align: center;
  }
}

/* ============================================================
   移动端搜索和播放器修复
   ============================================================ */

/* 移动端搜索按钮 */
.nav-search-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text2);
  font-size: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s;
}

.nav-search-toggle:hover {
  background: var(--bg3);
  color: var(--primary);
}

/* 移动端搜索展开容器 */
.nav-search-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(14, 14, 26, 0.98);
  z-index: 9999;
  padding: 20px;
  flex-direction: column;
  gap: 16px;
}

.nav-search-mobile.active {
  display: flex;
}

.nav-search-mobile-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-search-mobile-close {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text2);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.nav-search-mobile-close:hover {
  background: var(--bg3);
  color: var(--accent);
}

.nav-search-mobile-form {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.nav-search-mobile-form input {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
}

.nav-search-mobile-form input::placeholder {
  color: var(--text3);
}

.nav-search-mobile-form button {
  width: 48px;
  height: 48px;
  background: var(--primary);
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-search-mobile-form button:hover {
  background: var(--primary-dark);
}

/* 移动端播放器优化 */
@media (max-width: 768px) {
  .player-bar {
    padding: 0 12px;
    gap: 12px;
    height: 60px;
  }

  .player-track {
    flex: 1;
    min-width: 0;
    flex: 0 0 auto;
    max-width: calc(100% - 120px);
  }

  .player-cover {
    width: 40px;
    height: 40px;
  }

  .player-info {
    min-width: 0;
  }

  .player-title {
    font-size: 12px;
    max-width: 120px;
  }

  .player-artist {
    font-size: 10px;
  }

  .player-like {
    width: 32px;
    height: 32px;
  }

  .player-controls {
    display: none;
  }

  .player-right {
    flex: 0 0 auto;
  }

  .vol-wrap {
    display: none;
  }

  .player-extra-btn {
    width: 32px;
    height: 32px;
  }

  /* 移动端底部留出播放器空间 */
  .main-content {
    padding-bottom: 70px !important;
  }

  footer {
    padding-bottom: 70px !important;
  }
}

@media (max-width: 576px) {
  .player-bar {
    padding: 0 10px;
    gap: 10px;
    height: 56px;
  }

  .player-track {
    flex: 1;
    max-width: calc(100% - 100px);
  }

  .player-cover {
    width: 36px;
    height: 36px;
    border-radius: 6px;
  }

  .player-title {
    font-size: 11px;
    max-width: 100px;
  }

  .player-artist {
    font-size: 9px;
  }

  .player-like {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .player-extra-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  /* 移动端搜索按钮显示 */
  .nav-search-toggle {
    display: flex;
  }

  /* 隐藏桌面端搜索框 */
  .nav-search {
    display: none !important;
  }
}

/* ============================================================
   登录/注册表单样式
   ============================================================ */
.login-wrap {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.login-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
}

.login-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  text-align: center;
}

.login-sub {
  font-size: 14px;
  color: var(--text3);
  text-align: center;
  margin-bottom: 28px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
  box-sizing: border-box;
}

.form-input::placeholder {
  color: var(--text3);
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}

.form-submit {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.form-submit:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.form-submit:active {
  transform: translateY(0);
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.login-footer {
  text-align: center;
  font-size: 13px;
  color: var(--text3);
  margin-top: 20px;
}

.login-footer a {
  color: var(--primary-light);
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}

/* 移动端登录表单优化 */
@media (max-width: 576px) {
  .login-wrap {
    padding: 20px 12px;
    align-items: flex-start;
    padding-top: 40px;
  }

  .login-box {
    padding: 28px 20px;
    border-radius: 12px;
  }

  .login-title {
    font-size: 24px;
  }

  .login-sub {
    font-size: 13px;
  }
}

/* ============================================================
   找回密码页面样式
   ============================================================ */
.forgot-wrap {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.forgot-box {
  width: 100%;
  max-width: 460px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px;
}

.forgot-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  text-align: center;
}

.forgot-sub {
  font-size: 13px;
  color: var(--text3);
  text-align: center;
  margin-bottom: 28px;
}

.alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.alert i {
  font-size: 16px;
}

.alert-error {
  background: rgba(255, 75, 110, 0.12);
  border: 1px solid rgba(255, 75, 110, 0.3);
  color: #ff4b6e;
}

.alert-success {
  background: rgba(0, 212, 170, 0.12);
  border: 1px solid rgba(0, 212, 170, 0.3);
  color: var(--accent2);
}

.user-info {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 20px;
  text-align: center;
}

.user-info i {
  margin-right: 6px;
  color: var(--primary);
}

.user-info strong {
  color: var(--text);
}

.forgot-footer {
  text-align: center;
  font-size: 13px;
  color: var(--text3);
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.forgot-footer a {
  color: var(--primary-light);
  text-decoration: none;
}

.forgot-footer a:hover {
  text-decoration: underline;
}

.forgot-footer .split {
  color: var(--border);
}

.forgot-tips {
  margin-top: 28px;
  padding: 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.tips-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tips-title i {
  color: #f0b90b;
}

.tips-list {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  color: var(--text3);
  line-height: 1.8;
}

/* 移动端找回密码优化 */
@media (max-width: 576px) {
  .forgot-wrap {
    padding: 20px 12px;
    align-items: flex-start;
    padding-top: 30px;
  }

  .forgot-box {
    padding: 24px 18px;
    border-radius: 12px;
  }

  .forgot-title {
    font-size: 22px;
  }

  .forgot-sub {
    font-size: 12px;
  }

  .forgot-tips {
    padding: 14px;
  }

  .tips-list {
    font-size: 11px;
  }
}

/* ============================================================
   创作者中心下拉菜单（导航栏）
   ============================================================ */
.creator-dropdown {
  position: relative;
}
.creator-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  z-index: 1000;
  animation: menuIn .18s ease;
}
.creator-menu.show {
  display: block;
}
@keyframes menuIn {
  from { opacity:0; transform:translateY(-6px); }
  to { opacity:1; transform:translateY(0); }
}
.creator-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  text-decoration: none;
  transition: .15s;
}
.creator-menu a:hover {
  background: var(--bg3);
  color: var(--text);
}
.creator-menu a i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--text3);
}
.creator-menu a:hover i {
  color: var(--primary-light);
}
.creator-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

/* 移动端下拉菜单自适应 */
@media (max-width: 576px) {
  .creator-menu {
    right: -8px;
    min-width: 180px;
  }
}



/* ========== 播放队列面板 ========== */
.queue-panel{
  position:fixed; bottom:calc(var(--player-h) + 12px); right:20px;
  width:320px; max-height:480px;
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  z-index:9999; overflow:hidden;
  display:none;
}
.qp-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  font-size:13px; font-weight:700; color:var(--text);
}
.qp-header span:first-child{ font-size:14px; }
.qp-header span:nth-child(2){ color:var(--text3); font-size:11px; font-weight:400; }
.qp-clear{
  background:none; border:none; color:var(--accent);
  font-size:11px; cursor:pointer; padding:3px 8px;
  border-radius:5px; transition:background .15s;
}
.qp-clear:hover{ background:rgba(255,75,110,.12); }
.qp-empty{
  padding:32px 16px; text-align:center; color:var(--text3);
  font-size:13px; line-height:1.6;
}
.qp-empty small{ font-size:11px; color:var(--text2); display:block; margin-top:4px; }
.qp-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.qp-item:last-child{ border-bottom:none; }
.qp-item:hover{ background:var(--card-hover); }
.qp-item.active{ background:rgba(108,59,255,.08); }
.qp-num{
  width:20px; flex-shrink:0; text-align:center;
  font-size:11px; color:var(--text3); font-weight:600;
}
.qp-item.active .qp-num{ color:var(--primary-light); }
.qp-info{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.qp-info b{
  font-size:12px; color:var(--text); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.qp-info small{ font-size:10px; color:var(--text3); }
.qp-remove{
  width:22px; height:22px; flex-shrink:0;
  background:none; border:none; border-radius:50%;
  color:var(--text3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; transition:all .15s; opacity:0;
}
.qp-item:hover .qp-remove{ opacity:1; }
.qp-remove:hover{ background:rgba(255,75,110,.15); color:var(--accent); }

/* ========== 登录/注册页面 ========== */
.auth-page {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
}
.auth-title {
  text-align: center;
  margin-bottom: 28px;
}
.auth-title h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.auth-title p {
  font-size: 14px;
  color: var(--text3);
}
.auth-error {
  background: rgba(255, 75, 110, 0.12);
  border: 1px solid rgba(255, 75, 110, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #ff4b6e;
}
.auth-form .form-group {
  margin-bottom: 18px;
}
.auth-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 6px;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108, 59, 255, 0.15);
}
.auth-form input::placeholder {
  color: var(--text3);
}
.btn-submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(108, 59, 255, 0.4);
}
.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.auth-links {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text3);
}
.auth-links a {
  color: var(--primary-light);
  text-decoration: none;
  font-weight: 500;
}
.auth-links a:hover {
  text-decoration: underline;
}

@media (max-width: 576px) {
  .auth-page {
    padding: 20px;
    align-items: flex-start;
    padding-top: 40px;
  }
  .auth-box {
    padding: 24px 18px;
    border-radius: 12px;
  }
  .auth-title h1 {
    font-size: 22px;
  }
}