/* 丽江音乐台 PC 端深浅色主题 v1.2
   修复：① 主题切换按钮深色下被 float 布局挤走不可见；② 浅色模式各页面自定义元素
   文字/背景未覆盖（AI创作面板、播放器、广场、用户中心、列表卡片等），导致部分文字
   颜色与界面相同显示不出来。 */
body.light { background: #f5f5f7; color: #1a1a1a; }
body.light .top, body.light .topbar { background: linear-gradient(135deg,#7c5cff,#8f6fff); }
body.light .logo, body.light .logo b { color: #fff; }
body.light .nav a { color: #efe9ff; }
body.light .nav a:hover { color: #fff; background: rgba(255,255,255,.18); }
body.light .nav a.on { color: #fff; }
body.light .top-right .link { color: #f2efff; }
body.light .top-right .link:hover { color: #fff; }
body.light .top-right .link.on { color: #fff; }
body.light .top-right .link.admin { border-color: rgba(255,255,255,.6); color: #fff; }
body.light .card, body.light .panel, body.light .box, body.light .song,
body.light .comment, body.light .post, body.light .list-item, body.light .cell { background: #fff; color: #333; border-color: #ececec; }
body.light .card .name, body.light .card .t, body.light .song .t { color: #333; }
body.light .card .meta, body.light .meta, body.light .desc, body.light .info .s,
body.light .singer, body.light .time, body.light .who, body.light .muted { color: #777; }
body.light .banner { background: #e8e8e8; }
body.light .ai-banner { background: linear-gradient(135deg,#efe6ff,#ffffff 70%); border-color: rgba(124,92,255,.3); }
body.light .ai-banner .t { color: #333; }
body.light .ai-banner .s { color: #666; }
body.light .section .more { color: #888; }
body.light .wrap, body.light .main { background: transparent; }
body.light input, body.light textarea, body.light select { background: #fff; color: #333; border-color: #ddd; }
/* 主题切换按钮：深色/浅色下都固定右上角（原仅 light 生效，深色下不可见）
   PC 页面不引用 common.css，按钮仅带 class，故补全基础样式（圆钮/大小/底色） */
.top .theme-btn, .topbar .theme-btn { float: right; margin: 14px 0 0 20px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; font-size: 17px; line-height: 1; user-select: none; -webkit-tap-highlight-color: transparent; }
body.light .theme-btn { background: rgba(124,92,255,.2); color: #fff; }

/* ================= 浅色模式全面修复与美化 ================= */

/* ① AI 创作页左侧面板浅色化 */
body.light .left { background: linear-gradient(180deg,#faf8ff,#f3f0ff 60%,#ece8ff); border-color: #e4dfff; }
body.light .left .sub { color: #888; }
body.light .field label { color: #555; }
body.light .field input, body.light .field select, body.light .field textarea { background: #fff; color: #333; border-color: #ddd; }
body.light .seg { background: #fff; border-color: #ddd; }
body.light .seg-tab { color: #666; }
body.light .seg-tab:hover { color: #333; }
body.light .seg-tab.on { background: linear-gradient(135deg,#7c5cff,#a58cff); color: #fff; }
body.light .type-tab { border-color: #d5c9ff; color: #666; }
body.light .type-tab:hover { border-color: #7c5cff; color: #7c5cff; }
body.light .type-tab.on { background: rgba(124,92,255,.12); border-color: #7c5cff; color: #7c5cff; }
body.light .ai-write-btn { background: linear-gradient(135deg,rgba(124,92,255,.12),rgba(124,92,255,.06)); color: #7c5cff; }
body.light .mv-opt { background: rgba(124,92,255,.08); border-color: #e4dfff; }
body.light .mv-label { color: #555; }
body.light .mv-check { color: #7c5cff; }
body.light .ai-tip { color: #888; border-top-color: #ececec; }
body.light .char-count { color: #999; }

/* ② 列表卡片浅色化（首页音乐/MV/推文/AI/生成广场） */
body.light .art, body.light .mv, body.light .ai, body.light .item { background: #fff; color: #333; border-color: #ececec; }
body.light .art .sum { color: #666; }
body.light .art .mt, body.light .mv .m, body.light .ai .m, body.light .item .mt { color: #888; }
body.light .item .uname { color: #666; }
body.light .item .plays { color: #999; }
body.light .item .tag { background: rgba(124,92,255,.1); color: #7c5cff; }
body.light .item .user-row { border-top-color: #f0f0f0; }
body.light .item .cover .mv-badge { background: #7c5cff; }

/* ③ 筛选与分页 */
body.light .filter a { background: #fff; color: #666; border: 1px solid #e3e3e3; }
body.light .filter a.active { background: #7c5cff; color: #fff; border-color: #7c5cff; }
body.light .pager a, body.light .pager span { background: #fff; color: #666; border: 1px solid #e3e3e3; }
body.light .pager .current { background: #7c5cff; color: #fff; border-color: #7c5cff; }

/* ④ 用户中心（my.php）浅色化 */
body.light .stats .st { background: #f6f5ff; }
body.light .stats .n { color: #7c5cff; }
body.light .stats .l { color: #888; }
body.light .menu { background: #fff; }
body.light .menu a { color: #444; }
body.light .menu a:hover { background: #f6f5ff; }
body.light .menu a.on { background: rgba(124,92,255,.12); color: #7c5cff; }
body.light .list-item { border-bottom-color: #f0f0f0; }
body.light .li-meta { color: #888; }
body.light .m-card { background: #fff; border: 1px solid #ececec; }
body.light .m-card .meta { color: #888; }
body.light .u-sub { color: #888; }
body.light .u-login { color: #7c5cff; }
body.light .login-guide .g-s { color: #888; }
body.light .ai-card { background: #fff; border: 1px solid #ececec; }
body.light .ai-meta { color: #888; }
body.light .btn { background: #f0edfa; color: #333; border: 1px solid #e4e0f5; }
body.light .btn:hover { background: #e6e0ff; }
body.light .btn-primary, body.light .btn-primary:hover { background: linear-gradient(135deg,#7c5cff,#a58cff); color: #fff; }
body.light .empty-tip { color: #888; }
body.light .foot { color: #999; }

/* ⑤ AI 播放器页（ai_player.php）浅色化 */
body.light .singer { color: #7c5cff; }
body.light .tag { background: rgba(124,92,255,.1); color: #7c5cff; }
body.light .btn { background: #f0edfa; color: #444; }
body.light .btn.main { background: linear-gradient(135deg,#7c5cff,#a58cff); color: #fff; box-shadow: 0 4px 24px rgba(124,92,255,.35); }
body.light .bar { background: #ece8ff; }
body.light .times { color: #888; }
body.light .lyrics { background: #faf9ff; border: 1px solid #eee9ff; }
body.light .action { color: #888; }
body.light .action.on { color: #ff4d6d; }
body.light .back { color: #888; }
body.light .comment-box { background: #fff; border: 1px solid #ececec; }
body.light .comment-box h3 { color: #333; }
body.light .comment-input-row input { background: #fff; color: #333; border-color: #ddd; }
body.light .comment-item { border-bottom-color: #f0f0f0; }
body.light .comment-item .c-content { color: #444; }
body.light .comment-empty { color: #888; }
body.light .cover { box-shadow: 0 0 80px rgba(124,92,255,.25); }

/* ⑥ 全屏播放遮罩保持深色（播放时覆盖全屏，不应变浅） */
body.light .play-mask { background: #000; }
body.light .play-mask .audio-box { color: #fff; }
body.light .play-mask .play, body.light .play-mask .play-ico { background: rgba(255,255,255,.15); color: #fff; }

/* ========== PC 顶栏 v1.4 完全参考 lijiangmusic.com（布局+白底+胶囊导航+按钮） ========== */
@media (min-width: 901px) {
  .top { display: flex; align-items: center; }
  .top .logo { float: none; flex: 0 0 auto; }
  .top .nav { float: none; flex: 1; display: flex; justify-content: center; margin-left: 0; gap: 6px; }
  .top .nav a { line-height: normal; margin: 0; padding: 8px 16px; border-radius: 20px; font-size: 14px; color: rgba(255,255,255,.78); background: transparent; }
  .top .nav a:hover { color: #fff; background: rgba(139,109,255,.18); border-radius: 20px; }
  .top .nav a.on { color: #fff; background: linear-gradient(135deg,#8b6dff,#7c5cff); box-shadow: 0 2px 8px rgba(124,92,255,.35); border-radius: 20px; }
  .top .top-right { float: none; display: flex; align-items: center; gap: 10px; }
  .top .top-right .link { line-height: 30px; margin: 0; padding: 0 16px; border-radius: 16px; font-size: 13px; color: #cfc6ee; border: 1px solid rgba(139,109,255,.55); background: transparent; }
  .top .top-right .link:hover { color: #fff; border-color: rgba(139,109,255,.85); background: rgba(139,109,255,.12); }
  .top .top-right .link.reg { color: #fff; border: 0; background: linear-gradient(135deg,#8b6dff,#7c5cff); }
  .top .top-right .link.reg:hover { filter: brightness(1.1); }
}
/* 浅色模式：白底顶栏 + 深色文字（参考站同款） */
body.light .top { background: #fff; border-bottom: 1px solid #eee; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
body.light .top .logo b { color: #7c5cff; }
body.light .top .nav a { color: #555; }
body.light .top .nav a:hover { color: #7c5cff; background: rgba(124,92,255,.08); }
body.light .top .nav a.on { color: #fff; background: linear-gradient(135deg,#8b6dff,#7c5cff); }
body.light .top .top-right .link { color: #7c5cff; border: 1px solid rgba(124,92,255,.5); }
body.light .top .top-right .link:hover { color: #7c5cff; border-color: #7c5cff; background: rgba(124,92,255,.06); }
body.light .top .top-right .link.reg { color: #fff; border: 0; background: linear-gradient(135deg,#8b6dff,#7c5cff); }
body.light .top .top-right .link.reg:hover { filter: brightness(1.1); background: linear-gradient(135deg,#8b6dff,#7c5cff); }
/* 搜索框胶囊（输入框圆角左半 + 紫色"搜索"按钮右半） */
.top-right .top-search { display: inline-block; vertical-align: middle; margin-right: 18px; position: relative; }
.top-search input { width: 220px; height: 34px; border-radius: 17px 0 0 17px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.14); color: #fff; font-size: 13px; padding: 0 8px 0 16px; outline: none; transition: background .2s, border-color .2s, box-shadow .2s; }
.top-search input::placeholder { color: rgba(255,255,255,.65); }
.top-search input:focus { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); box-shadow: 0 0 0 3px rgba(139,109,255,.18); }
.top-search .ts-btn { position: absolute; right: 0; top: 0; height: 34px; padding: 0 16px; border: 0; border-radius: 0 17px 17px 0; background: linear-gradient(135deg,#8b6dff,#7c5cff); color: #fff; font-size: 13px; cursor: pointer; line-height: 34px; letter-spacing: 1px; transition: filter .2s; }
.top-search .ts-btn:hover { filter: brightness(1.12); }
body.light .top-search input { background: #fff; border-color: #ddd; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
body.light .top-search input:focus { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124,92,255,.14); }
body.light .top-search input::placeholder { color: #aaa; }
body.light .top-search .ts-btn { background: linear-gradient(135deg,#8b6dff,#7c5cff); color: #fff; }
@media (max-width: 900px) { .top-search { display: none; } }

/* ========== v1.4.1 播放页（player.php）控制按钮浅色高对比 ========== */
body.light .controls button {
  background: #2c2c2c;
  border: 0;
  color: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
}
body.light .controls button:hover { background: #1a1a1a; }
body.light .controls button.main {
  background: linear-gradient(135deg,#7c5cff,#a58cff);
  border: 0;
  color: #fff;
  box-shadow: 0 4px 18px rgba(124,92,255,.4);
}
body.light .controls button.main:hover { background: linear-gradient(135deg,#7c5cff,#a58cff); filter: brightness(1.08); }

/* 登录页补全（login.php 专属组件浅色化） */
body.light .box .mode span.active { color: #7c5cff; border-color: #7c5cff; }
body.light .box .field label { color: #666; }
body.light .box .sub { color: #888; }
body.light .box .field input { background: #f7f6fc; border-color: #e6e2f5; }
body.light .box .field input:focus { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124,92,255,.12); }
body.light .box .wx-btn { background: #fff; border-color: #e6e2f5; color: #444; }
body.light .box .wx-btn:hover { background: #f6f5ff; }
body.light .box .divider { background: #e8e6f2 !important; }

/* ===== 顶部导航（深浅色自适应：深色深紫底白字 / 浅色白底紫字） ===== */
.top-header { background: linear-gradient(135deg, #18103a 0%, #251b5e 100%); box-shadow: 0 2px 10px rgba(0,0,0,.35); position: sticky; top: 0; z-index: 100; }
body.light .top-header { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.top-header .logo { font-size: 22px; font-weight: 700; color: #fff; white-space: nowrap; }
body.light .top-header .logo { color: #7c5cff; }
.top-header .logo a { color: #fff; text-decoration: none; display: flex; align-items: center; }
body.light .top-header .logo a { color: #7c5cff; }
.top-header .logo-icon { color: #a58cff; margin-right: 4px; }
body.light .top-header .logo-icon { color: #e8556d; }
.top-header .main-nav { display: flex; gap: 8px; flex: 1; }
.top-header .main-nav a { padding: 8px 16px; border-radius: 20px; color: #cfc6ee; font-size: 15px; transition: all 0.2s; text-decoration: none; display: inline-block; }
body.light .top-header .main-nav a { color: #555; }
.top-header .main-nav a:hover, .top-header .main-nav a.active { background: #7c5cff; color: #fff; }
.top-header .main-nav .nav-ai { background: linear-gradient(135deg, #7c5cff, #a58cff); color: #fff; }
.top-header .main-nav .nav-ai:hover { opacity: 0.9; }
.top-header .header-search { position: relative; }
.top-header .header-search form { display: flex; }
.top-header .header-search input { width: 220px; padding: 8px 14px; border: 1px solid rgba(139,109,255,.35); border-radius: 20px 0 0 20px; font-size: 13px; outline: none; background: rgba(255,255,255,.08); color: #eee; }
body.light .top-header .header-search input { background: #fff; border-color: #ddd; color: #333; }
.top-header .header-search button { padding: 8px 16px; background: #7c5cff; color: #fff; border: none; border-radius: 0 20px 20px 0; font-size: 13px; cursor: pointer; }
.top-header .header-user { display: flex; align-items: center; gap: 10px; }
.top-header .header-user .login-btn, .top-header .header-user .register-btn { padding: 6px 16px; border-radius: 16px; font-size: 13px; text-decoration: none; }
.top-header .header-user .login-btn { color: #cfc6ee; border: 1px solid rgba(165,140,255,.5); }
.top-header .header-user .login-btn:hover { background: rgba(124,92,255,.25); }
body.light .top-header .header-user .login-btn { color: #7c5cff; border-color: #7c5cff; }
body.light .top-header .header-user .login-btn:hover { background: rgba(124,92,255,.10); }
.top-header .header-user .register-btn { background: #7c5cff; color: #fff; }
.top-header .header-user .register-btn:hover { background: #6f4cf5; }
.top-header .header-user .login-btn:has(img) { border: none; padding: 0; color: #fff; display: flex; align-items: center; gap: 6px; }
body.light .top-header .header-user .login-btn:has(img) { color: #333; }
 { border: none; padding: 0; color: #333; display: flex; align-items: center; gap: 6px; }