/* 我的小窝 - 全部样式（奶油米白+珊瑚橘，2026-09-21 由粉色系整体换版） */
:root {
  --pink: #ff7a5c;        /* 主色：珊瑚橘（变量名保留，全站引用零改动） */
  --deep: #d95d43;        /* 深珊瑚（标题/重要文字） */
  --light: #ffd9c9;       /* 浅蜜桃（边框分割线） */
  --bg: #faf6f1;          /* 奶油米白底 */
  --hint: #a89e96;        /* 暖灰提示文字 */
  --veil: rgba(255, 252, 248, 0.92); /* 浮层底 */
  --barveil: 0.85;        /* 顶栏/歌词栏白底透明度（设置里滑块控制） */
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  color: #4a3f39;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
}
html {
  /* 奶油底+两团极淡的暖光斑：没设自定义壁纸时的默认层次（有壁纸时被 bg-layer 盖住，不影响） */
  background:
    radial-gradient(600px circle at 85% -5%, rgba(255, 158, 122, 0.20), transparent 60%),
    radial-gradient(500px circle at -10% 45%, rgba(255, 203, 164, 0.16), transparent 60%),
    linear-gradient(180deg, #fbf8f3, #f7efe7);
}

.hidden { display: none !important; }

/* 壁纸层：独立于 body 的固定图层，高度由 JS 用像素锁死——键盘弹出视口变矮时它不变，壁纸不跳 */
#bg-layer {
  position: fixed; top: 0; left: 0; right: 0; z-index: -1;
  background-size: cover; background-position: center;
  pointer-events: none;
}

button { cursor: pointer; font-family: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; }
button:active { transform: scale(1.05); } /* 全局按下回弹（和「→ 共享」同款手感） */
#vd-mic:active { transform: translateY(-50%) scale(1.05); } /* 特例：它靠 translateY 定位，回弹要叠加而不是覆盖 */
input { font-family: inherit; outline: none; }

/* ---------- 进入页 #entry ---------- */
#entry {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(600px circle at 85% -5%, rgba(255, 158, 122, 0.20), transparent 60%),
    radial-gradient(500px circle at -10% 45%, rgba(255, 203, 164, 0.16), transparent 60%),
    linear-gradient(180deg, #fbf8f3, #f7efe7); /* 登录页=第一眼，同样的奶油雾感 */
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.entry-box { text-align: center; padding-bottom: 60px; }
.entry-title { font-size: 32px; color: var(--deep); margin-bottom: 10px; }
.entry-sub { font-size: 14px; color: var(--hint); margin-bottom: 26px; }
.entry-tabs { display: flex; justify-content: center; gap: 14px; margin-bottom: 22px; }
.entry-tab {
  border: none; background: #fff; color: var(--hint);
  padding: 7px 26px; border-radius: 999px; font-size: 15px;
}
.entry-tab.active {
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  box-shadow: 0 4px 12px rgba(255, 122, 92, 0.45);
}
#entry form { display: flex; flex-direction: column; align-items: center; gap: 12px; }
#entry input {
  width: 240px; padding: 10px 18px; text-align: center;
  border: 1px solid var(--light); border-radius: 999px;
  font-size: 14px; background: #fff; color: #4a3f39;
}
#entry input::placeholder { color: var(--hint); }
.form-error { min-height: 18px; font-size: 13px; color: var(--deep); }
.entry-main-btn {
  border: none; background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  padding: 10px 28px; border-radius: 999px; font-size: 15px;
  box-shadow: 0 4px 12px rgba(255, 122, 92, 0.45);
}
.entry-main-btn:active { transform: scale(0.97); }
/* 备案页脚：进入页底部小字 */
.beian-footer { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 12px; }
.beian-footer a { color: var(--hint); text-decoration: none; }

/* ---------- 绑定页 #pairing（全屏浮层 z15） ---------- */
#pairing {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto;
  padding: 10px 12px 40px;
  background: var(--bg);
  z-index: 15;
  display: flex; flex-direction: column; align-items: center;
}
#pairing-close {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--pink); color: #fff; font-size: 15px;
}
.pairing-box {
  margin: auto 0; width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 40px 0;
}
.pairing-title { font-size: 24px; color: var(--deep); }
.pairing-welcome { font-size: 14px; color: var(--hint); }
.pair-card {
  width: 100%; background: #fff; border-radius: 16px;
  padding: 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.pair-card-tip { font-size: 13px; color: var(--hint); }
#bind-username {
  width: 100%; box-sizing: border-box; padding: 10px 16px; text-align: center;
  border: 1px solid var(--light); border-radius: 999px; font-size: 15px;
}
.pairing-hint { font-size: 12px; color: var(--hint); }
#logout-link {
  display: block; width: 100%; margin-top: 10px;
  border: 1px solid var(--light); background: #fff; color: var(--hint);
  padding: 10px; border-radius: 999px; font-size: 14px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(217, 93, 67, 0.08);
}

/* 绑定确认卡（弹在绑定页之上） */
#bind-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.bind-who { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px; }
#bind-avatar, #bind-avatar-fb {
  width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0;
  object-fit: cover; background: #fff;
}
#bind-avatar-fb { /* 没头像的回退：粉底昵称首字 */
  background: #ffc9b0; color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
}
#bind-avatar-fb.hidden { display: none; }
#bind-nick { font-size: 16px; font-weight: bold; color: var(--deep); }
#bind-uname { font-size: 12px; color: var(--hint); margin-top: 2px; }
.bind-tip { text-align: center; font-size: 14px; color: var(--deep); margin: 14px 0 0; }
#bind-cancel { background: #f4efea; color: #8f7a6d; }
#bind-ok { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3); }

/* ---------- 主界面 ---------- */
#main { max-width: 600px; margin: 0 auto; }

#topbar {
  position: fixed; top: 0; left: 0; right: 0;
  max-width: 600px; margin: 0 auto;
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 253, 249, var(--barveil));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); /* 毛玻璃：内容滑过栏下若隐若现 */
  z-index: 5;
}
.tb-btn {
  border: none; background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  padding: 7px 14px; border-radius: 999px; font-size: 13px;
  box-shadow: 0 2px 6px rgba(255, 111, 77, 0.30);
}
#settings-toggle {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: #fff; color: var(--deep); font-size: 16px;
  box-shadow: 0 2px 6px rgba(217, 93, 67, 0.18);
}

#lyric-bar {
  position: fixed; top: 48px; left: 0; right: 0;
  max-width: 600px; margin: 0 auto;
  background: rgba(255, 253, 249, var(--barveil));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); /* 毛玻璃：内容滑过栏下若隐若现 */
  text-align: center; padding: 4px 12px 6px;
  z-index: 5;
}
.lyric-row { overflow: hidden; white-space: nowrap; height: 21px; }
.lyric-row span { display: inline-block; }
#lyric-cur { font-size: 15px; font-weight: bold; color: var(--deep); }
#lyric-next { font-size: 12px; color: var(--hint); }
/* 超宽歌词横向来回滚动，--shift/--dur 由 JS 计算 */
.marquee { animation: lrc-marquee var(--dur, 8s) linear infinite alternate; }
@keyframes lrc-marquee {
  0%, 12% { transform: translateX(0); }
  88%, 100% { transform: translateX(calc(-1 * var(--shift, 0px))); }
}

/* ---------- 消息流 ---------- */
#messages {
  position: fixed; top: 100px; bottom: 62px; left: 0; right: 0;
  max-width: 600px; margin: 0 auto;
  overflow-y: auto; padding: 10px 12px;
}
body.solo #messages { bottom: 0; }
#solo-hint { text-align: center; color: var(--hint); font-size: 14px; margin-top: 40px; line-height: 2; }

.msg-row { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; }
.msg-row.self { flex-direction: row-reverse; }
.avatar { width: 38px; height: 38px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-fallback {
  width: 38px; height: 38px; border-radius: 6px;
  background: #ffc9b0; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.bubble {
  position: relative; max-width: 68%;
  background: #fff; border-radius: 6px;
  padding: 8px 10px; font-size: 16px; line-height: 1.45;
  word-break: break-word; white-space: pre-wrap;
}
.msg-row.self .bubble { background: #95ec69; } /* 我方气泡=微信绿（用户拍板还原微信样子） */
/* 气泡小三角尾巴 */
.bubble::before {
  content: ''; position: absolute; top: 12px;
  border: 6px solid transparent;
}
.msg-row.them .bubble::before { left: -11px; border-right-color: #fff; }
.msg-row.self .bubble::before { right: -11px; border-left-color: #95ec69; }
/* 图片/视频消息不要气泡壳（仿微信）：无底色、无小尾巴，直接一张圆角图 */
.bubble.media { padding: 0; background: transparent; }
.msg-row.self .bubble.media { background: transparent; }
.bubble.media::before { display: none; }

.time-divider, .recall-line {
  text-align: center; font-size: 11px; color: var(--hint); margin: 12px 0;
}

/* ↓ 有新消息 浮条 */
#new-msg-tip {
  position: fixed; right: 16px; bottom: 70px;
  background: var(--pink); color: #fff;
  padding: 7px 16px; border-radius: 999px; font-size: 13px;
  box-shadow: 0 4px 12px rgba(255, 122, 92, 0.5);
  z-index: 8; cursor: pointer;
}

/* 新消息横幅（z30 盖过所有面板） */
#msg-toast {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  max-width: 86%;
  background: rgba(50, 40, 45, 0.92); color: #fff;
  padding: 8px 18px; border-radius: 999px; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  z-index: 30; cursor: pointer;
}

/* ---------- 底部输入栏 ---------- */
#chat-form {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: 600px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 253, 249, var(--barveil));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); /* 毛玻璃：内容滑过栏下若隐若现 */
  z-index: 5;
}
#attach-btn { border: none; background: none; font-size: 24px; padding: 2px; }
#msg-input {
  flex: 1; padding: 9px 16px;
  border: 1px solid var(--light); border-radius: 999px; font-size: 15px;
  background: #fff;
}
/* 输入框内右侧的连麦小麦克风（微信同款位置），开麦变粉呼吸 */
.msg-wrap { position: relative; flex: 1; display: flex; }
.msg-wrap #msg-input { width: 100%; padding-right: 42px; }
#chat-mic {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  border: none; background: none; padding: 4px; color: #c4afa1;
  display: flex; align-items: center; justify-content: center;
}
#chat-mic:active { transform: translateY(-50%) scale(1.05); } /* 盖过全局 button:active 的 scale（会把 translateY 顶掉） */
#chat-mic.on { color: #ff6f4d; animation: chat-mic-breathe 1.6s ease-in-out infinite; }
@keyframes chat-mic-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
#send-btn {
  border: none; background: var(--pink); color: #fff;
  padding: 8px 20px; border-radius: 999px; font-size: 15px;
}

/* ---------- 音乐面板 #music-panel（顶栏下方下拉） ---------- */
#music-panel {
  position: fixed; top: 100px; left: 0; right: 0;
  max-width: 600px; margin: 0 auto;
  background: rgba(255, 253, 249, 0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 0 0 16px 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 8px 24px rgba(217, 93, 67, 0.18);
  z-index: 10;
}
#now-playing {
  font-size: 15px; font-weight: bold; color: var(--deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 6px;
}
#progress { width: 100%; accent-color: var(--pink); }
.player-ctrls { display: flex; justify-content: center; gap: 22px; margin: 8px 0 12px; }
.ctrl-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: var(--pink); color: #fff; font-size: 17px;
}
/* 📡 一起听 三态 */
#mc-sync-toggle, #vd-sync-toggle {
  width: 100%; border: none; border-radius: 999px;
  padding: 10px; font-size: 14px; margin-bottom: 10px;
}
#vd-sync-toggle { margin-top: 12px; } /* 和播放画面之间留点呼吸感 */
.sync-off { background: #efe9e1; color: #8f7a6d; }
.sync-wait { background: #ffe0d1; color: var(--deep); box-shadow: 0 2px 8px rgba(255, 122, 92, 0.25); }
.sync-on { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; box-shadow: 0 3px 10px rgba(255, 111, 77, 0.4); }

/* ⏲ 定时关闭：一起听按钮右侧的圆角小按钮 + 网格选项卡 */
.mc-toggle-row { display: flex; gap: 8px; margin-bottom: 10px; }
.mc-toggle-row #mc-sync-toggle { flex: 1; margin-bottom: 0; }
#mc-timer {
  flex-shrink: 0; min-width: 44px; height: 40px; border: none; border-radius: 999px;
  background: #efe9e1; color: #8f7a6d; font-size: 15px; padding: 0 13px;
  box-shadow: 0 2px 6px rgba(160, 120, 135, 0.15);
}
#mc-timer.on {
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  font-size: 13px; box-shadow: 0 3px 10px rgba(255, 111, 77, 0.4);
}
#mc-timer-menu {
  background: #fff; border-radius: 14px; padding: 12px; margin-bottom: 10px;
  box-shadow: 0 4px 16px rgba(255, 122, 92, 0.22);
}
.mtm-title { font-size: 13px; color: var(--deep); font-weight: bold; text-align: center; margin-bottom: 10px; }
.mtm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mtm-grid button, #mtm-song {
  border: 1px solid var(--light); border-radius: 999px; background: #fff;
  color: #8f7a6d; font-size: 13px; padding: 8px 0;
}
.mtm-grid button.cur, #mtm-song.cur {
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  border-color: transparent; box-shadow: 0 2px 8px rgba(255, 122, 92, 0.35);
}
#mtm-song { width: 100%; margin-top: 8px; }

.ne-search-row { display: flex; gap: 8px; margin-bottom: 10px; }
#ne-search-input {
  flex: 1; padding: 8px 16px;
  border: 1px solid var(--light); border-radius: 999px; font-size: 14px; background: #fff;
}
#ne-search-btn, #song-upload-btn {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  border: none; background: var(--pink); color: #fff; font-size: 16px;
}

#song-list { max-height: 228px; overflow-y: auto; }
.song-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px; font-size: 14px;
  cursor: pointer;
}
.song-row .song-name {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.song-row.playing { background: #ffe9dd; color: var(--pink); font-weight: bold; }
.song-del {
  border: none; background: none; color: var(--hint); font-size: 14px; padding: 2px 6px;
}
.song-empty { text-align: center; color: var(--hint); font-size: 13px; padding: 14px 0; }

/* 歌单页签：共同歌单 / 我的音乐（仅绑定后显示） */
#song-tabs { display: flex; gap: 8px; margin: 4px 0 8px; }
.song-tab {
  flex: 1; border: 1px solid var(--light); background: #fff; color: var(--deep);
  border-radius: 999px; padding: 7px 0; font-size: 13px;
}
.song-tab.cur { background: var(--pink); border-color: var(--pink); color: #fff; font-weight: bold; }

/* 我的音乐行：加入共享歌单按钮（粉底渐变胶囊 + 点击回弹） */
.song-share {
  border: none;
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d);
  color: #fff; font-weight: bold;
  border-radius: 999px; font-size: 11px; padding: 4px 10px; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(255, 111, 77, 0.35);
  transition: transform 0.15s ease;
}
.song-share:active { transform: scale(1.14); }
/* 一起听进行中：我的音乐置灰不可点 */
.song-row.disabled { opacity: 0.45; }
.song-row.disabled .song-share { display: none; }

/* ---------- 搜歌页 #ne-page（全屏浮层 z20） ---------- */
#ne-page {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto;
  padding: 10px 12px 40px;
  background: var(--bg);
  z-index: 20;
}
.ne-page-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 0 10px; background: var(--bg);
}
#ne-page-search-input {
  flex: 1; padding: 8px 16px;
  border: 1px solid var(--light); border-radius: 999px; font-size: 14px; background: #fff;
}
#ne-page-search-btn, #ne-page-close {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: none; background: var(--pink); color: #fff; font-size: 14px;
}
.ne-card {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 10px;
  padding: 8px 10px; margin: 8px 0;
}
.ne-cover { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.ne-cover-ph {
  width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
  background: var(--light); display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.ne-title {
  flex: 1; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ne-cloud-tag { /* 网盘歌小标记（曲库没版权、从站长网盘出的歌） */
  font-size: 10px; color: var(--deep); background: #ffe9dd;
  border-radius: 999px; padding: 1px 6px; margin-right: 5px;
  vertical-align: 1px;
}
.ne-dl-btn {
  border: none; background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  padding: 6px 14px; border-radius: 999px; font-size: 13px; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3);
}
.ne-dl-btn:disabled { opacity: 0.6; }
#ne-progress { text-align: center; font-size: 13px; color: var(--hint); padding: 14px 0; }
.ne-empty { text-align: center; font-size: 13px; color: var(--hint); padding: 30px 0; }

/* ---------- 视频/游戏面板 + 设置面板 + 裁剪弹窗 ---------- */
#game-panel {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto;
  padding: 10px 12px 40px;
  background: var(--bg);
  z-index: 20;
}
/* 视频面板：两视图结构——播放器钉在详情视图顶部不滚，下面内容区单独滚 */
#video-panel {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: var(--bg); z-index: 20;
  display: flex; flex-direction: column;
  padding: 10px 12px 0;
}
#vd-search-view { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 40px; -webkit-overflow-scrolling: touch; }
#vd-detail-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#vd-detail-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 40px; -webkit-overflow-scrolling: touch; }
/* 详情视图顶栏：‹返回 剧名 ✕（‹ 比 ✕ 大一点，它是主操作） */
#vd-back, #vd-close-detail {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: none; background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; font-size: 15px;
  box-shadow: 0 2px 6px rgba(255, 111, 77, 0.35);
}
#vd-back { width: 34px; height: 34px; font-size: 15px; } /* 和 ✕ 一样大（用户拍板：别搞特殊） */
#vd-detail-view #vd-show-name { flex: 1; min-width: 0; }
/* 操作行：下载 / 换源 两等分 */
.vd-action-row { display: flex; gap: 8px; margin: 10px 0 8px; }
.vd-action-row > button {
  flex: 1; border: none; border-radius: 999px; padding: 9px 0;
  background: #fff; color: var(--deep); font-size: 13px;
  box-shadow: 0 2px 8px rgba(217, 93, 67, 0.12);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 搜索视图底部"正在播放"浮条：点它回详情视图接着看 */
#vd-playing-bar {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 5;
  border: none; border-radius: 999px; padding: 10px 18px;
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; font-size: 13px;
  box-shadow: 0 4px 14px rgba(255, 111, 77, 0.4);
  max-width: 86vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#vd-playing-bar:active { transform: translateX(-50%) scale(1.05); } /* 它靠 translateX 定位，回弹要叠加 */
#game-panel { padding-left: 8px; padding-right: 8px; } /* 游戏页收窄留白，棋盘近满宽 */
#settings-panel {
  position: fixed; top: 48px; left: 0; right: 0;
  max-width: 600px; margin: 0 auto;
  background: rgba(255, 253, 249, 0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 0 0 16px 16px;
  padding: 14px;
  z-index: 10;
  max-height: calc(100vh - 56px); /* 兜底：老内核认这行 */
  max-height: calc(100dvh - 56px); /* 动态视口高：手机浏览器地址栏占位时也不会把面板底边顶出屏幕（内容超屏整个面板可滚） */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.settings-title { font-size: 15px; font-weight: bold; color: var(--deep); margin-bottom: 12px; }
.settings-opt {
  display: block; text-align: center;
  border: none; border-radius: 12px; background: #fff;
  box-shadow: 0 2px 8px rgba(217, 93, 67, 0.10);
  padding: 12px; margin-bottom: 10px;
  color: var(--deep); font-size: 14px; cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.settings-opt:active { transform: scale(0.97); background: #fdf3ec; }
.settings-slider-row { font-size: 13px; color: var(--deep); margin-bottom: 10px; }
.settings-slider-row input { width: 100%; accent-color: var(--pink); }
.settings-hint { font-size: 11px; color: var(--hint); }
#cookie-row { display: flex; gap: 8px; margin-bottom: 10px; }
#cookie-input {
  flex: 1; padding: 8px 14px;
  border: 1px solid var(--light); border-radius: 999px; font-size: 13px;
}
#cookie-save {
  border: none; background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  padding: 8px 16px; border-radius: 999px; font-size: 13px;
  box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3); flex-shrink: 0;
}
#logout-btn {
  width: 100%; border: 1px solid var(--light); background: #fff;
  color: var(--hint); padding: 10px; border-radius: 999px; font-size: 14px;
  box-shadow: 0 2px 6px rgba(217, 93, 67, 0.08);
}
#unbind-btn { /* 退出登录上方，已绑定才显示 */
  width: 100%; border: 1px solid #ffd9c9; background: #fdf3ec;
  color: var(--deep); padding: 10px; border-radius: 999px; font-size: 14px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(217, 93, 67, 0.10);
}
#crop-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.crop-card {
  background: #fff; border-radius: 12px; padding: 14px;
  max-width: 360px; width: 92%;
}
/* cropperjs 需要容器有明确高度，否则布局错乱（裁切框超出图片） */
.crop-wrap { width: 100%; height: min(80vw, 55vh); }
#crop-img { width: 100%; height: 100%; display: block; }
.crop-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.crop-btns button {
  border: none; border-radius: 999px; padding: 8px 20px; font-size: 14px;
}
#crop-cancel { background: #f4efea; color: #8f7a6d; }
#crop-ok { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3); }

/* ---------- 视频面板 #video-panel ---------- */
/* 打开视频面板时藏掉聊天区里的视频（国产安卓浏览器会把 video 劫持成悬浮层） */
body.vd-open #messages video { display: none; }

.vd-page-bar {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 0 10px; background: var(--bg);
}
#vd-search-input {
  flex: 1; padding: 8px 16px;
  border: 1px solid var(--light); border-radius: 999px; font-size: 14px; background: #fff;
}
#vd-search-btn, #vd-close {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: none; background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; font-size: 14px;
  box-shadow: 0 2px 6px rgba(255, 111, 77, 0.35);
}

/* 🕐 最近在看 chips（横向滚动） */
.vd-sec-title { font-size: 14px; color: var(--deep); font-weight: bold; margin: 4px 0 8px; }
#vd-history-list {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px;
}
.vd-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--light); border-radius: 999px;
  padding: 6px 12px; font-size: 13px; color: var(--deep); cursor: pointer;
  box-shadow: 0 2px 5px rgba(217, 93, 67, 0.08);
}
.vd-chip-del {
  border: none; background: none; color: var(--hint); font-size: 12px; padding: 0 0 0 2px;
}

/* 搜索结果卡片 */
.vd-card {
  display: flex; gap: 10px;
  background: #fff; border: 1px solid var(--light); border-radius: 10px;
  padding: 10px; margin: 8px 0; cursor: pointer;
}
.vd-cover { width: 52px; height: 70px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.vd-cover-ph {
  width: 52px; height: 70px; border-radius: 6px; flex-shrink: 0;
  background: var(--light); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.vd-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vd-card-name { font-size: 15px; font-weight: bold; color: #4a3f39; }
.vd-card-meta { font-size: 12px; color: var(--hint); }
.vd-card-src {
  align-self: flex-start;
  font-size: 11px; color: var(--deep); background: #ffe9dd;
  border-radius: 999px; padding: 2px 8px;
}
.vd-empty { text-align: center; font-size: 13px; color: var(--hint); padding: 20px 0; }

/* 选集区 */
#vd-show-name {
  font-size: 15px; font-weight: bold; color: var(--deep);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#vd-src-btn {
  flex-shrink: 0; border: 1px solid var(--light); background: #fff; color: var(--deep);
  border-radius: 999px; padding: 6px 12px; font-size: 12px;
  box-shadow: 0 2px 5px rgba(217, 93, 67, 0.08);
}
/* 粉色续播条（主操作：渐变） */
#vd-resume {
  width: 100%; border: none; background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  border-radius: 999px; padding: 9px; font-size: 13px; margin: 10px 0;
  box-shadow: 0 3px 10px rgba(255, 111, 77, 0.35);
}
#vd-lines { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
#vd-lines:empty { display: none; margin: 0; }
.vd-line-btn {
  border: 1px solid var(--light); background: #fff; color: #4a3f39;
  border-radius: 999px; padding: 5px 14px; font-size: 13px;
  box-shadow: 0 2px 5px rgba(217, 93, 67, 0.08);
}
.vd-line-btn.cur { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgba(255, 111, 77, 0.35); }
#vd-ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.vd-ep-btn {
  border: 1px solid var(--light); background: #fff; color: #4a3f39;
  border-radius: 8px; padding: 7px 0; font-size: 13px; text-align: center;
}
.vd-ep-btn.cur { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); border-color: transparent; color: #fff; font-weight: bold; }

/* 播放器 */
#vd-player-box { margin-top: 12px; }
#vd-title { font-size: 14px; color: var(--deep); font-weight: bold; margin-bottom: 8px; }
#vd-video-wrap {
  position: relative; background: #000; border-radius: 10px; overflow: hidden;
  aspect-ratio: 16 / 9;
}
#vd-player { width: 100%; height: 100%; display: block; -webkit-touch-callout: none; /* 长按快进：防 iOS 弹系统菜单 */ touch-action: none; /* 防浏览器把滑动当滚动抢走→pointercancel 误断快进；播放器本身不需要滚动 */ }
/* 长按快进提示：淡白胶囊浮顶部，不挡画面 */
#vd-ff-tip {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.72); color: var(--deep);
  font-size: 13px; padding: 5px 14px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); z-index: 3; pointer-events: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* 🎤 浮在视频左边缘正中间 */
#vd-mic {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(40, 32, 36, 0.55); color: #fff; font-size: 17px;
  z-index: 2;
}
#vd-mic.on { /* 开麦中：粉底 + 呼吸光圈 */
  background: var(--pink);
  animation: vd-mic-glow 1.6s ease-in-out infinite;
}
@keyframes vd-mic-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 92, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(255, 122, 92, 0); }
}
/* 右下控制组（倍速/下一集/⛶）：同一基线同一高度同一圆角，在原生控制条上方 */
#vd-rate, #vd-next-ep, #vd-fullscreen {
  position: absolute; bottom: 44px; height: 26px; box-sizing: border-box;
  border: none; background: rgba(40, 32, 36, 0.55); color: #fff;
  border-radius: 999px; font-size: 13px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
}
#vd-rate { right: 94px; padding: 0 10px; }
#vd-next-ep { right: 52px; width: 34px; padding: 0; }
#vd-fullscreen { right: 10px; width: 34px; padding: 0; }
/* 倍速菜单：深色竖排，当前倍速粉色高亮 */
#vd-rate-menu {
  position: absolute; right: 94px; bottom: 76px;
  background: rgba(30, 24, 27, 0.92); border-radius: 8px;
  padding: 4px 0; z-index: 3; min-width: 64px; text-align: center;
}
#vd-rate-menu div { color: #ddd; font-size: 13px; padding: 7px 14px; cursor: pointer; }
#vd-rate-menu div.cur { color: var(--pink); font-weight: bold; }
/* 全屏整个容器 */
#vd-video-wrap.fs, #vd-video-wrap:fullscreen {
  border-radius: 0; aspect-ratio: auto;
  display: flex; align-items: center; justify-content: center;
}
/* 全屏左上角返回箭头（学主流播放器：‹=退出全屏） */
#vd-fs-back {
  display: none; position: absolute; left: 12px; top: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: rgba(40, 32, 36, 0.55); color: #fff; font-size: 24px; line-height: 1;
  z-index: 4;
}
#vd-video-wrap.fs #vd-fs-back { display: block; }
/* 全屏时 🎤/倍速/⏭/⛶/‹ 跟原生进度条同节奏：点一下显示，3 秒无操作淡出 */
#vd-video-wrap.fs #vd-mic, #vd-video-wrap.fs #vd-rate, #vd-video-wrap.fs #vd-next-ep,
#vd-video-wrap.fs #vd-fullscreen, #vd-video-wrap.fs #vd-fs-back { transition: opacity .25s; }
#vd-video-wrap.fs.ctrls-off #vd-mic, #vd-video-wrap.fs.ctrls-off #vd-rate, #vd-video-wrap.fs.ctrls-off #vd-next-ep,
#vd-video-wrap.fs.ctrls-off #vd-fullscreen, #vd-video-wrap.fs.ctrls-off #vd-fs-back {
  opacity: 0; pointer-events: none;
}

/* 看剧聊天（仿腾讯视频一起看）：视频左下 💬 + 新消息浮泡 + 底部聊天抽屉 */
#vd-chat-bubbles {
  position: absolute; left: 10px; bottom: 88px; z-index: 3;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  max-width: 72%; pointer-events: none; /* 不吃触摸：双击暂停/滑动调进度/长按快进照常 */
}
.vd-chat-bubble {
  background: rgba(30, 24, 27, 0.72); color: #fff; font-size: 13px;
  padding: 6px 12px; border-radius: 999px; max-width: 100%; word-break: break-all;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: vd-chat-in .25s ease-out, vd-chat-out .5s ease-in 3.5s forwards;
}
@keyframes vd-chat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vd-chat-out { to { opacity: 0; } }
#vd-chat-btn {
  position: absolute; left: 10px; bottom: 44px; z-index: 2; /* 和右下控制组同一基线 */
  min-width: 36px; height: 26px; border-radius: 999px; border: none; padding: 0 10px;
  background: rgba(40, 32, 36, 0.55); color: #fff; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
}
#vd-chat-badge {
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  font-size: 11px; border-radius: 999px; padding: 1px 6px; font-weight: bold;
}
/* 全屏时 💬 跟其他控制同节奏淡出 */
#vd-video-wrap.fs #vd-chat-btn { transition: opacity .25s; }
#vd-video-wrap.fs.ctrls-off #vd-chat-btn { opacity: 0; pointer-events: none; }
#vd-chat-btn.unread { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); }
/* 聊天抽屉：深色半透明（影院感，白字好读），顶部把手+✕，消息列表+输入行。
   浮卡形态：限宽居中（横屏全屏不再铺满整条宽度），高度跟着内容走、封顶 45% 再滚动 */
#vd-chat-drawer {
  position: absolute; left: 0; right: 0; bottom: 10px; margin: 0 auto;
  width: min(560px, 94%); height: auto; max-height: 45%; z-index: 5;
  background: rgba(26, 21, 24, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; display: flex; flex-direction: column;
  animation: vd-chat-drawer-in .22s ease-out;
}
@keyframes vd-chat-drawer-in { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#vd-chat-head { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 0 4px; flex: none; }
.vd-chat-grip { width: 36px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); }
#vd-chat-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); font-size: 13px;
}
#vd-chat-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.vd-chat-msg { font-size: 13px; color: #fff; max-width: 85%; padding: 7px 11px; border-radius: 14px; word-break: break-all; line-height: 1.5; }
.vd-chat-msg.them { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.07); align-self: flex-start; }
.vd-chat-msg.self { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); align-self: flex-end; }
.vd-chat-msg.recalled { background: none; color: rgba(255, 255, 255, 0.5); align-self: center; font-size: 12px; }
#vd-chat-form { display: flex; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.07); }
#vd-chat-input {
  flex: 1; border: none; outline: none; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 14px; padding: 9px 14px;
}
#vd-chat-input::placeholder { color: rgba(255, 255, 255, 0.45); }
#vd-chat-send {
  border: none; border-radius: 999px; padding: 0 18px;
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; font-size: 14px; font-weight: bold;
}

/* 📡 一起看按钮在播放器下方（三态样式和一起听共用） */

/* 换源浮层打开期间：藏起视频画面（visibility 不动布局、声音照播），防手机浏览器视频独立渲染层压浮层 */
#video-panel.src-open #vd-player-box { visibility: hidden; }

/* 换源浮层：底部半屏白卡 */
#vd-src-panel {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-width: 600px; margin: 0 auto; max-height: 55%;
  background: #fff; border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(217, 93, 67, 0.25);
  z-index: 25; display: flex; flex-direction: column;
}
.vd-src-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px; border-bottom: 1px solid var(--light);
  font-size: 14px; color: var(--deep); font-weight: bold;
}
#vd-src-close {
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: var(--light); color: var(--deep); font-size: 13px;
}
#vd-src-list { overflow-y: auto; padding: 8px 14px 20px; }
.vd-src-item {
  padding: 10px 8px; font-size: 14px; color: #4a3f39;
  border-bottom: 1px solid #f3e8de; cursor: pointer;
}
.vd-src-item.cur { color: var(--pink); font-weight: bold; }
.vd-src-item.faded { color: var(--hint); }

/* ---------- 游戏面板 #game-panel（全屏浮层样式在上面和 video-panel 共用） ---------- */
.gm-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 10px;
  max-width: 600px; margin: 0 auto;
}
#gm-title { font-size: 17px; font-weight: bold; color: var(--deep); }
#gm-close {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: none; background: var(--pink); color: #fff; font-size: 14px;
}

/* 大厅：三张白色大卡片 + 底部扫雷规则小字 */
#gm-lobby { max-width: 600px; margin: 0 auto; }
.gm-card {
  background: #fff; border-radius: 16px; padding: 18px;
  text-align: center; margin-bottom: 14px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(217, 93, 67, 0.10);
}
.gm-card-name { font-size: 17px; font-weight: bold; color: var(--deep); }
.gm-card-sub { font-size: 12px; color: var(--hint); margin-top: 6px; }
.gm-lobby-hint { font-size: 12px; color: var(--hint); line-height: 1.7; padding: 4px 2px; }

/* 对局区（三个游戏共用容器宽度） */
#gm-gomoku, #gm-chess, #gm-mine { max-width: 600px; margin: 0 auto; }

/* 象棋/五子棋：状态行 */
#gc-status, #gg-status {
  text-align: center; font-size: 14px; color: var(--deep);
  padding: 4px 0 10px; min-height: 20px;
}
#gc-status .gc-alert { color: #e74c3c; font-weight: bold; }

/* 轮到你：状态条整条变红 + 呼吸灯（三游戏共用） */
#gc-status.my-turn, #gg-status.my-turn, #mn-status.my-turn {
  background: linear-gradient(90deg, #ff7070, #ff4757, #ff7070);
  color: #fff; font-weight: bold; border-radius: 10px;
  animation: gmTurnPulse 1.2s ease-in-out infinite;
}
@keyframes gmTurnPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* 象棋/五子棋：悔棋/求和确认条（状态行下方、棋盘上方） */
#gc-ask, #gg-ask {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border: 1px solid var(--light); border-radius: 12px;
  padding: 8px 12px; margin-bottom: 10px;
  font-size: 13px; color: var(--deep);
}
#gc-ask button, #gg-ask button { border: none; border-radius: 999px; padding: 6px 18px; font-size: 13px; }
#gc-ask-yes, #gg-ask-yes { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3); }
#gc-ask-no, #gg-ask-no { background: #f4efea; color: #8f7a6d; }

/* 象棋/五子棋：canvas 棋盘（尺寸由 JS 按屏宽算，带 dpr 缩放） */
#gc-board, #gg-board {
  display: block; margin: 0 auto;
  border-radius: 8px; box-shadow: 0 2px 12px rgba(122, 82, 48, 0.28);
  touch-action: manipulation;
}

/* 象棋/五子棋：固定网格按钮行（2 行 × 3 列等宽，对局操作在上/通话离场在下，位置永远固定） */
.gc-btns {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 14px;
}
.gc-btns button {
  width: 100%; text-align: center;
  border: 1px solid var(--light); background: #fff; color: var(--deep);
  border-radius: 999px; padding: 8px 0; font-size: 13px;
  box-shadow: 0 2px 6px rgba(217, 93, 67, 0.10);
}
.gc-btns button:active { background: #fdf1e9; }
/* 扫雷只有 4 个按钮：一行 4 列等宽 */
#gm-mine .gc-btns { grid-template-columns: repeat(4, 1fr); }
#gc-back, #gg-back, #mn-back { /* 主操作：粉底渐变 */
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  border-color: transparent; box-shadow: 0 2px 8px rgba(255, 111, 77, 0.35);
}
#gc-resign, #gg-resign, #mn-resign { /* 危险操作：浅红一眼可辨 */
  background: #fff5f5; border-color: #ffd0d0; color: #d33;
}

/* ---------- 双人扫雷 ---------- */
#mn-status {
  text-align: center; font-size: 14px; color: var(--deep);
  padding: 4px 0 10px; min-height: 20px;
}
#mn-ask {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border: 1px solid var(--light); border-radius: 12px;
  padding: 8px 12px; margin-bottom: 10px;
  font-size: 13px; color: var(--deep);
}
#mn-ask button { border: none; border-radius: 999px; padding: 6px 18px; font-size: 13px; }
#mn-ask-yes { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3); }
#mn-ask-no { background: #f4efea; color: #8f7a6d; }

/* 难度选择 + 缩放行 */
#mn-diff-row {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  margin-bottom: 10px;
}
.mn-diff {
  border: 1px solid var(--light); background: #fff; color: var(--deep);
  border-radius: 999px; padding: 6px 12px; font-size: 12px;
  box-shadow: 0 2px 5px rgba(217, 93, 67, 0.08);
}
.mn-diff.cur { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); border-color: transparent; color: #fff; font-weight: bold; box-shadow: 0 2px 8px rgba(255, 111, 77, 0.35); }
#mn-zoom {
  border: 1px solid var(--light); background: #fff; color: var(--deep);
  border-radius: 999px; padding: 6px 12px; font-size: 12px;
  box-shadow: 0 2px 5px rgba(217, 93, 67, 0.08);
}

/* 棋盘：可双向滚动（地狱难度/放大后超屏） */
#mn-board-wrap {
  overflow: auto; max-height: 58vh; max-width: 100%;
  border-radius: 8px; -webkit-overflow-scrolling: touch;
}
#mn-board { display: grid; width: max-content; margin: 0 auto; touch-action: none; }

/* 格子：凸起的奶白块；尺寸/字号由 JS 按缩放设置 */
.mn-cell {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; user-select: none; -webkit-user-select: none;
  cursor: pointer; touch-action: none; /* none=浏览器不管手势，单击/长按/双指缩放/平移全由 JS 实现 */
  background: linear-gradient(135deg, #f7f3ee, #ddd5c8);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.85), inset -1.5px -1.5px 0 rgba(120, 100, 70, 0.35);
}
.mn-cell.open {
  cursor: default;
  background: #efe9dd;
  box-shadow: inset 0 0 0 1px #d4cbba;
}
.mn-cell.blast { background: #e74c3c; box-shadow: inset 0 0 0 1px #c0392b; }
.mn-cell.opp { background: #ffe6bd; box-shadow: inset 0 0 0 2px #f2b95c; } /* 对方刚开的格：暖色持续高亮，直到我开格 */

/* ---------- 聊天图片/视频缩略图（仿微信，约 133×190 占屏宽 1/3） ---------- */
.msg-img {
  max-width: 135px; max-height: 180px;
  border-radius: 6px; display: block; cursor: pointer;
}
.msg-video-wrap { position: relative; max-width: 150px; cursor: pointer; }
.msg-video {
  max-width: 150px; max-height: 180px;
  border-radius: 6px; display: block; background: #000;
}
.msg-video-play { /* 视频缩略图中间的播放钮 */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; pointer-events: none;
}

/* ---------- 图片查看器（全屏黑底，手势由 JS 实现） ---------- */
#img-viewer {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300;
  background: #000; overflow: hidden; touch-action: none;
}
#iv-img {
  position: absolute; user-select: none; -webkit-user-drag: none;
  pointer-events: none; /* 手势全落在 #img-viewer 上 */
}

/* ---------- 视频查看器 ---------- */
#vid-viewer {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 300;
  background: #000; display: flex; align-items: center; justify-content: center;
}
#vv-player { max-width: 100%; max-height: 100%; width: 100%; }
#vv-close {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 16px;
  z-index: 2;
}

/* ---------- 设置面板：成员管理（仅站长） ---------- */
.settings-subtitle { font-size: 14px; font-weight: bold; color: var(--deep); margin: 14px 0 8px; }
/* 和歌单一样：最多 6 行高（约 213px），超出手指上滑 */
#admin-user-list { max-height: 213px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.admin-user-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 2px; font-size: 13px; color: var(--deep);
  border-bottom: 1px dashed #f2e3d8;
  cursor: pointer; /* 点行弹详情 */
}
.admin-user-row:active { background: #fcf2ea; }
.admin-user-row:last-child { border-bottom: none; }
.admin-user-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-row button {
  flex-shrink: 0; border: none; border-radius: 999px;
  background: #ffe3e3; color: #d33; font-size: 12px; padding: 5px 14px;
}

/* 站长改注册口令行：和 Cookie 行同款 */
#admin-pass-row { display: flex; gap: 8px; margin-bottom: 10px; }
#admin-pass-input {
  flex: 1; padding: 8px 14px;
  border: 1px solid var(--light); border-radius: 999px; font-size: 13px;
}
#admin-pass-save {
  border: none; background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  border-radius: 999px; padding: 8px 16px; font-size: 13px; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3);
}

/* ---------- 成员详情弹窗（站长） ---------- */
#au-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.au-card {
  background: #fff; border-radius: 16px; padding: 20px;
  width: 100%; max-width: 320px;
  box-shadow: 0 8px 30px rgba(217, 93, 67, 0.25);
}
#au-detail { font-size: 14px; color: var(--deep); line-height: 2; word-break: break-all; }
#au-detail b { color: var(--hint); font-weight: normal; }
.au-btns { display: flex; gap: 10px; margin-top: 16px; }
.au-btns button { flex: 1; border: none; border-radius: 999px; padding: 9px 0; font-size: 14px; }
#au-remove { background: #fff5f5; color: #d33; border: 1px solid #ffd0d0; }
#au-close { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3); }

/* ---------- 意见反馈 ---------- */
#fb-entry { /* 设置面板里的反馈入口 */
  width: 100%; border: 1px solid var(--light); background: #fff;
  color: var(--deep); padding: 10px; border-radius: 999px; font-size: 14px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(217, 93, 67, 0.08);
}
#fb-dot { /* ⚙ 按钮上的未读红点 */
  position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff6b54; border: 2px solid #fff;
}
#settings-toggle { position: relative; }

/* 反馈提交弹窗 */
#fb-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.fb-card {
  background: #fff; border-radius: 16px; padding: 18px;
  width: 100%; max-width: 340px;
  box-shadow: 0 8px 30px rgba(217, 93, 67, 0.25);
}
.fb-title { font-size: 15px; font-weight: bold; color: var(--deep); margin-bottom: 10px; }
#fb-text {
  width: 100%; box-sizing: border-box; resize: none;
  border: 1px solid var(--light); border-radius: 12px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.fb-btns { display: flex; gap: 10px; margin-top: 12px; }
.fb-btns button { flex: 1; border: none; border-radius: 999px; padding: 9px 0; font-size: 14px; }
#fb-cancel { background: #f4efea; color: #8f7a6d; }
#fb-submit { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3); }

/* 站长反馈箱列表：最多 6 条高，超出滑动 */
#admin-fb-list { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fb-item {
  background: #fff; border: 1px solid var(--light); border-radius: 10px;
  padding: 8px 10px; margin-bottom: 8px;
}
.fb-item.unread { border-color: var(--pink); background: #fdf3ec; }
.fb-item-head { font-size: 12px; color: var(--hint); margin-bottom: 4px; }
.fb-item.unread .fb-item-head { color: var(--pink); font-weight: bold; }
.fb-item-text { font-size: 14px; color: var(--deep); line-height: 1.6; word-break: break-word; white-space: pre-wrap; }
.fb-empty { font-size: 13px; color: var(--hint); padding: 8px 2px; }

/* 反馈箱入口按钮（设置面板内，成员管理下方） */
#fb-box-entry {
  width: 100%; border: 1px solid var(--light); background: #fff;
  color: var(--deep); padding: 10px; border-radius: 999px; font-size: 14px;
  margin-top: 4px;
  box-shadow: 0 2px 6px rgba(217, 93, 67, 0.08);
}
#fb-box-unread { color: var(--pink); font-size: 12px; }

/* 反馈箱弹窗 */
#fb-box-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.fb-box-card { max-width: 360px; }
.fb-box-card .fb-btns { margin-top: 14px; }
#fb-box-close { background: var(--pink); color: #fff; }
/* 弹窗内列表：约 6 条高，超出滑动 */
#fb-box-modal #admin-fb-list { max-height: 50vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 游戏里的连麦 ---------- */
.rtc-mic.on { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(255, 111, 77, 0.35); }
#gm-voice-tag { /* 对方连麦中：游戏面板顶部小标签 */
  width: fit-content; margin: 0 auto 8px;
  background: var(--pink); color: #fff;
  font-size: 12px; border-radius: 999px; padding: 4px 12px;
  animation: vd-mic-glow 1.6s ease-in-out infinite;
}

/* ---------- 消息发送状态（仿微信） + 断线横幅 ---------- */
.send-status { /* 自己消息旁边的状态图标：🕓发送中 / ❗失败（可点重发） */
  align-self: center; border: none; background: none; padding: 0;
  width: 22px; height: 22px; font-size: 13px; line-height: 22px; text-align: center;
  color: var(--hint); flex-shrink: 0; cursor: default;
}
.send-status.failed {
  background: #e74c3c; color: #fff; border-radius: 50%;
  cursor: pointer; font-size: 12px;
}

#conn-banner {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 500;
  background: rgba(64, 48, 56, 0.82); color: #fff;
  font-size: 12px; padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); white-space: nowrap;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* 轻提示：小气泡浮顶居中，JS 控制 2.5 秒自动消失 */
#hint-toast {
  position: fixed; top: 52px; left: 50%; transform: translateX(-50%); z-index: 600;
  background: rgba(60, 40, 50, 0.88); color: #fff;
  font-size: 13px; padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  max-width: 82vw; text-align: center;
}
#hint-toast.tappable { /* 可点提示（如"点我立即更新"）：手指光标+下划线暗示能点 */
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* 退出防误触提示：屏幕正中白色半透明胶囊，2 秒自动消失 */
#exit-hint {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 700;
  background: rgba(255, 255, 255, 0.88); color: var(--deep);
  font-size: 14px; padding: 12px 26px; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(217, 93, 67, 0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  white-space: nowrap; animation: hint-pop .2s ease;
}
@keyframes hint-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* 一起听/看邀请卡：顶部滑入的白卡，💞 + 标题 + 内容 + 加入/忽略 */
#invite-card {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 650;
  width: min(92vw, 400px);
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.96); border-radius: 16px;
  padding: 12px 12px 12px 14px;
  box-shadow: 0 8px 30px rgba(217, 93, 67, 0.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: invite-in .3s ease;
}
@keyframes invite-in { from { opacity: 0; transform: translateX(-50%) translateY(-16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.invite-emoji {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  box-shadow: 0 2px 8px rgba(255, 111, 77, 0.4);
}
.invite-text { flex: 1; min-width: 0; }
.invite-title { font-size: 13px; font-weight: bold; color: var(--deep); }
.invite-sub {
  font-size: 12px; color: #b09383; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#invite-join {
  flex: none; border: none; border-radius: 999px; padding: 8px 18px;
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  font-size: 13px; font-weight: bold; box-shadow: 0 2px 8px rgba(255, 111, 77, 0.35);
}
#invite-close {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: #f6ebe2; color: #b09383; font-size: 12px;
}

/* 全屋统一弹窗（uiAlert/uiConfirm）：深色模糊遮罩 + 白卡 + 粉系按钮，危险操作确定键红色 */
#ui-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 800;
  background: rgba(60, 40, 50, 0.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.ui-modal-card {
  width: min(82vw, 330px);
  background: #fff; border-radius: 20px; padding: 22px 20px 16px;
  box-shadow: 0 12px 40px rgba(217, 93, 67, 0.35);
  animation: ui-pop .18s ease;
}
@keyframes ui-pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
.ui-modal-title { font-size: 15px; font-weight: bold; color: var(--deep); margin-bottom: 8px; text-align: center; }
.ui-modal-body {
  font-size: 14px; color: #7a6558; line-height: 1.7;
  white-space: pre-line; text-align: center; word-break: break-word;
}
.ui-modal-btns { display: flex; gap: 10px; margin-top: 18px; }
.ui-modal-btns button {
  flex: 1; border: none; border-radius: 999px; padding: 10px 0; font-size: 14px; font-weight: bold;
}
#ui-modal-ok {
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  box-shadow: 0 2px 8px rgba(255, 111, 77, 0.35);
}
#ui-modal-ok.danger {
  background: linear-gradient(135deg, #ff8a80, #e74c3c);
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}
#ui-modal-cancel { background: #fff; border: 1px solid #ffd3c2 !important; color: var(--deep); }

/* 下载中心：全屏页 + 剧集行（封面/剧名/集数/状态/大小/删除） */
#dl-page {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30;
  background: var(--bg); display: flex; flex-direction: column;
  padding: 10px 12px 0;
}
.dl-page-title { flex: 1; font-size: 16px; font-weight: bold; color: var(--deep); }
#dl-entry { width: 100%; } /* 和意见反馈/解除绑定一样整行撑满 */
#dl-total { font-size: 12px; color: var(--hint); }
#dl-close {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: none; background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; font-size: 14px;
  box-shadow: 0 2px 6px rgba(255, 111, 77, 0.35);
}
#dl-list { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 20px; -webkit-overflow-scrolling: touch; }
.dl-row {
  display: flex; gap: 10px; align-items: center;
  background: #fff; border-radius: 12px; padding: 10px; margin: 8px 0;
  box-shadow: 0 2px 8px rgba(217, 93, 67, 0.10);
}
.dl-cover { width: 48px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--light); flex-shrink: 0; }
.dl-cover-ph { width: 48px; height: 64px; border-radius: 6px; background: var(--light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dl-info { flex: 1; min-width: 0; }
.dl-name { font-size: 14px; font-weight: bold; color: var(--deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-sub { font-size: 12px; color: var(--hint); margin-top: 3px; }
.dl-status { font-size: 12px; margin-top: 3px; }
.dl-status.done { color: #3aa655; }
.dl-status.ing { color: var(--pink); font-weight: bold; }
.dl-status.bad { color: #e74c3c; }
.dl-del {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: none;
  background: #f6ebe2; color: #b09383; font-size: 12px;
}
.dl-page-hint { text-align: center; font-size: 11px; color: var(--hint); padding: 8px 0 14px; }


/* ---------- 多账号：切换账号 ---------- */
#acct-entry { width: 100%; margin-bottom: 8px; } /* 和解绑/退出登录一样整行撑满 */

/* 登录页「最近登录」卡片区 */
#acct-recent { margin-bottom: 18px; }
.acct-recent-title { font-size: 13px; color: var(--hint); margin-bottom: 10px; }
#acct-recent-list { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.acct-chip {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: #fff; border: none; border-radius: 14px; padding: 10px 16px;
  box-shadow: 0 2px 8px rgba(217, 93, 67, 0.10); cursor: pointer;
  transition: transform 0.15s ease;
}
.acct-chip:active { transform: scale(0.95); }
.acct-chip-nick {
  font-size: 13px; color: var(--deep);
  max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 圆形头像（弹窗列表行和登录页卡片共用） */
.acct-ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.acct-chip .acct-ava { width: 46px; height: 46px; }
.acct-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-ava-fb {
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}

/* 切换账号弹窗：奶油米白卡 + 白色账号行 */
#acct-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 210;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.acct-card { background: var(--bg); }
#acct-list { max-height: 45vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.acct-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--light); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(217, 93, 67, 0.08);
  transition: background 0.15s ease;
}
.acct-row:active { background: #fdf3ec; }
.acct-row.cur { border-color: var(--pink); }
.acct-text { flex: 1; min-width: 0; text-align: left; }
.acct-nick {
  font-size: 15px; font-weight: bold; color: var(--deep);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-uname { font-size: 12px; color: var(--hint); }
.acct-cur { font-size: 12px; color: var(--pink); flex-shrink: 0; }
.acct-del {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: #f6ebe2; color: #b09383; font-size: 12px;
}
#acct-add {
  width: 100%; border: 1px dashed var(--light); background: #fff;
  color: var(--deep); padding: 10px; border-radius: 12px; font-size: 14px;
}


/* ---------- 📼 片库（看剧面板搜索视图的第二个页签） ---------- */
#vd-tabs { display: flex; justify-content: center; gap: 10px; padding: 10px 12px 2px; }
/* 页签切换淡入小动画（display:none→block 会重放动画） */
@keyframes lib-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#lib-view, #vd-search-content { animation: lib-fade 0.18s ease; }
/* 「我们的片库」标题行：无框 emoji+珊瑚橘标题（对齐设置面板「🎀 主题设置」） */
.lib-bar-title { flex: 1; font-size: 15px; font-weight: bold; color: var(--deep); padding-left: 4px; }
/* 片库视图右上角 ✕：圆形白底+轻投影+珊瑚橘（和看剧详情页圆钮同款语言） */
#lib-close {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: none; background: #fff; color: var(--pink); font-size: 15px; font-weight: bold;
  box-shadow: 0 2px 8px rgba(217, 93, 67, 0.18);
}

/* 顶部两个动作按钮：统一白底橘边次按钮款（两个橘色主按钮太晃眼，用户拍板 2026-09-23），等宽并排 */
.lib-actions { display: flex; gap: 10px; padding: 8px 12px 12px; }
.lib-actions button {
  flex: 1; border-radius: 999px; padding: 11px 0; font-size: 14px; font-weight: bold;
  border: 1px solid var(--light); background: #fff; color: var(--deep);
  box-shadow: 0 2px 6px rgba(217, 93, 67, 0.10);
}
.lib-actions button:active { background: #ffe9de; } /* 白底次按钮按下变浅蜜桃（全屋统一反馈） */

/* 剧集分组卡片：白卡+投影圆角 */
.lib-card {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff; border-radius: 14px; padding: 12px; margin: 0 12px 14px;
  box-shadow: 0 2px 8px rgba(217, 93, 67, 0.10);
}
.lib-cover-wrap { position: relative; flex-shrink: 0; }
.lib-cover { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; display: block; }
.lib-cover-fb { /* 占位封面：浅蜜桃渐变底 + 居中珊瑚橘大 📼（干净克制） */
  width: 64px; height: 64px; border-radius: 12px;
  background: linear-gradient(135deg, #ffe9de, #ffd9c9); color: var(--pink);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.lib-cover-play { /* 封面左下半透明深色圆底白 ▶ 角标：强化"能播"信号 */
  position: absolute; left: 3px; bottom: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(60, 40, 50, 0.5); color: #fff; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.lib-card-body { flex: 1; min-width: 0; }
.lib-name { font-size: 15px; font-weight: bold; color: var(--deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* 集数 chips：加大加圆胶囊（浅蜜桃底+珊瑚橘描边橘字+左侧小 ▶，一眼知道能点）；✕ 是右上角迷你圆形角标 */
.lib-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  background: #ffe9de; border: 1px solid var(--pink); border-radius: 999px;
  padding: 7px 12px; font-size: 13px; font-weight: bold; color: var(--pink);
  box-shadow: 0 2px 6px rgba(217, 93, 67, 0.10);
  cursor: pointer;
}
.lib-chip:active { background: #ffd9c9; }
.lib-chip.disabled { /* 转码中：灰底+⏳ 不可点（和可播态对比鲜明） */
  background: #f4efea; border-color: transparent; color: var(--hint); box-shadow: none; cursor: default; font-weight: normal;
}
.lib-chip i { font-style: normal; }
.lib-chip-tri { font-size: 9px; font-weight: normal; }
.lib-chip-del {
  position: absolute; top: -5px; right: -5px;
  width: 16px; height: 16px; border-radius: 50%; border: none; padding: 0;
  background: #eee6df; color: #b09383; font-size: 9px; line-height: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.lib-chip-del:active { background: var(--pink); color: #fff; }
.lib-card-foot { font-size: 11px; color: var(--hint); margin-top: 8px; }
.lib-empty { text-align: center; font-size: 14px; color: var(--hint); line-height: 2; padding: 48px 20px; }

/* 粘贴链接/换链接 + 传视频弹窗：ui-modal 同款遮罩白卡 */
#lib-link-modal, #lib-upload-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 210;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#lib-link-modal input, #lib-link-modal textarea, #lib-upload-modal input {
  width: 100%; box-sizing: border-box; resize: none;
  border: 1px solid var(--light); border-radius: 12px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  margin-bottom: 10px; background: #fff; color: #4a3f39;
}
/* 链接输入 + 识别按钮并排 */
.lib-url-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.lib-url-row textarea { flex: 1; margin-bottom: 0; }
#lib-link-parse {
  flex-shrink: 0; border: none; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: bold;
  background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3);
}
/* B站识别结果：封面缩略图 + 剧名 + 时长 */
#lib-link-preview {
  display: flex; gap: 10px; align-items: center;
  background: #fdf3ec; border-radius: 12px; padding: 8px 10px; margin-bottom: 10px;
}
#lib-link-preview-img { width: 72px; height: 45px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
#lib-link-preview-text { font-size: 13px; color: var(--deep); line-height: 1.5; word-break: break-all; }
#lib-upload-pick {
  width: 100%; border: 1px dashed var(--light); background: #fff;
  color: var(--deep); padding: 12px; border-radius: 12px; font-size: 14px;
  margin-bottom: 8px;
}
.lib-upload-filename { font-size: 12px; color: var(--hint); margin-bottom: 10px; word-break: break-all; }
#lib-upload-progress { height: 8px; background: #f4efea; border-radius: 999px; overflow: hidden; margin: 4px 0 10px; }
#lib-upload-bar { height: 100%; width: 0; background: linear-gradient(135deg, #ff9e7a, #ff6f4d); transition: width 0.2s ease; }
#lib-link-cancel, #lib-upload-cancel { background: #f4efea; color: #8f7a6d; }
#lib-link-ok, #lib-upload-ok { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3); }

/* 片库链接集播放失败：标题旁的「换链接」 */
#vd-relink {
  border: none; background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff;
  padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: bold;
  box-shadow: 0 2px 8px rgba(255, 111, 77, 0.35); margin-top: 8px;
}


/* ---------- B站 Cookie（设置面板，仅站长） ---------- */
#bili-cookie-row { /* 同款白胶囊入口行（照 fb-entry） */
  width: 100%; border: 1px solid var(--light); background: #fff;
  color: var(--deep); padding: 10px; border-radius: 999px; font-size: 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(217, 93, 67, 0.08);
}
#bili-cookie-state { font-size: 11px; color: var(--hint); }
#bili-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 210;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.bili-modal-tip { font-size: 12px; color: var(--hint); line-height: 1.8; margin: 0 0 10px; text-align: left; }
#bili-modal input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--light); border-radius: 12px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  background: #fff; color: #4a3f39;
}
#bili-cookie-cancel { background: #f4efea; color: #8f7a6d; }
#bili-cookie-save { background: linear-gradient(135deg, #ff9e7a, #ff6f4d); color: #fff; box-shadow: 0 2px 6px rgba(255, 111, 77, 0.3); }

/* ============================================================
   顶栏/歌词栏/输入栏透明度=0 时连毛玻璃一起关（纯透明，壁纸干干净净透出来；>0 时毛玻璃照旧）
   ============================================================ */
body.no-veil #topbar, body.no-veil #lyric-bar, body.no-veil #chat-form {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* 有自定义壁纸且栏透明时：歌词换白字+阴影（深色壁纸上深色字看不见） */
body.has-bg.no-veil #lyric-cur { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65); }
body.has-bg.no-veil #lyric-next { color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }