* { box-sizing: border-box; }
    body {
      margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
      background: #f4f6f9; color: #222;
      height: 100vh; overflow: hidden; display: flex; flex-direction: column;
    }
    body.has-wallpaper { background: transparent; }
    #app-bg { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; transition: filter .45s ease, transform .45s ease; }
/* 模糊渐进占位：先用缩略图模糊铺底，全图到达后去模糊 */
#app-bg.wp-loading { filter: blur(18px); transform: scale(1.06); }
    header { background: #1f2937; color: #fff; padding: 12px 16px; flex-shrink: 0; }
    header h1 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
    .brand-logo { height: 30px; width: auto; border-radius: 6px; flex-shrink: 0; }
    .searchbar { display: flex; gap: 8px; margin-top: 10px; }
    .searchbar input {
      flex: 1; padding: 9px 12px; border: 1px solid #374151; border-radius: 6px;
      background: #111827; color: #fff; font-size: 14px; min-width: 0;
    }
    .searchbar input::placeholder { color: #9ca3af; }
    .searchbar .icon-btn { background: #374151; color: #fff; padding: 8px 12px; }
    .searchbar .icon-btn:hover { background: #4b5563; }
    .top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .top-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
    #settings-btn { background: #374151; color: #fff; font-size: 18px; padding: 6px 10px; line-height: 1; }
    #settings-btn:hover { background: #4b5563; }
    #auth-area { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
    #auth-area button { padding: 6px 12px; font-size: 13px; }
    .avatar-wrap { position: relative; }
    .avatar { width: 38px; height: 38px; border-radius: 50%; background: #374151; color: #fff; border: none; cursor: pointer; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0; }
    .avatar:hover { background: #4b5563; }
    .dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); min-width: 180px; padding: 6px; z-index: 40; }
    .dropdown.hidden { display: none; }
    .dropdown .menu-head { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; font-size: 13px; color: #374151; margin-bottom: 4px; }
    .dropdown .menu-item { display: block; width: 100%; text-align: left; background: transparent; color: #374151; padding: 9px 10px; border-radius: 6px; font-size: 14px; font-weight: 400; }
    .dropdown .menu-item:hover { background: #eff6ff; color: #2563eb; }

    .tabbar {
      display: flex; gap: 8px; padding: 8px 10px; background: #fff; border-bottom: 1px solid #e5e7eb;
      position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }
    /* 现代立体按钮风格：圆角胶囊 + 上下渐变高光 + 外投影/内高光，营造凸起质感 */
    .tab {
      flex: 1; padding: 10px 12px; cursor: pointer; font-size: 15px; font-weight: 600; color: #4b5563; white-space: nowrap;
      border: 1px solid #d7dee8; border-radius: 11px;
      background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
      box-shadow: 0 2px 4px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.9);
      transition: transform .12s ease, box-shadow .15s ease, background .15s, color .15s;
    }
    /* 手机端：缩小字号 + 收紧内边距，5 个 tab 也不换行 */
    .device-phone .tab { font-size: 13px; padding: 8px 5px; }
    .device-phone .tabbar { gap: 5px; padding: 7px 8px; }
    .tab:hover { transform: translateY(-1px); color: #2563eb;
      box-shadow: 0 4px 9px rgba(15,23,42,.15), inset 0 1px 0 rgba(255,255,255,.9); }
    .tab:active { transform: translateY(1px);
      box-shadow: 0 1px 2px rgba(15,23,42,.12), inset 0 1px 2px rgba(15,23,42,.14); }
    /* 选中态：蓝色渐变 + 内高光，保持立体凸起并强化对比 */
    .tab.active {
      color: #fff; border-color: #1d4ed8; font-weight: 700;
      background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
      box-shadow: 0 3px 8px rgba(29,78,216,.35), inset 0 1px 0 rgba(255,255,255,.35);
    }


    .wrap { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; gap: 0; overflow: hidden; }
    .panel { padding: 16px; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    .panel.hidden { display: none !important; }
    .hidden { display: none !important; }
    /* 锁住每个 tab 的头部（标题 / 类别栏 / 输入区），仅下方列表垂直滚动 */
    .panel-head, .cat-bar { flex-shrink: 0; }
    .ch-list, .src-list, .fav-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
    #panel-player { display: block; overflow-y: auto; }
    .hint { font-size: 12px; color: #6b7280; }
    .panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
    .panel-head strong { font-size: 15px; color: #374151; }

    button {
      padding: 9px 14px; border: none; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; font-size: 14px;
    }
    button:hover { background: #1d4ed8; }
    button.ghost { background: #e5e7eb; color: #374151; }
    .src-default.on { background: #16a34a; color: #fff; border-color: #16a34a; }
    .src-copy { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin-left: 6px; border: none; border-radius: 6px; background: transparent; color: #6b7280; cursor: pointer; vertical-align: middle; }
    .src-copy:hover { background: #e5e7eb; color: #2563eb; }
    .src-copy .ico { width: 16px; height: 16px; }
    button.ghost:hover { background: #d1d5db; }
    button.danger { background: #dc2626; }
    button.danger:hover { background: #b91c1c; }
    button:disabled { opacity: .5; cursor: not-allowed; }

    input[type=text], input[type=url] {
      flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px;
    }
    .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .add-row { margin-bottom: 14px; }

    /* 我的收藏 */
    .fav-list { display: flex; flex-direction: column; gap: 8px; }
    .fav-item {
      display: flex; align-items: center; gap: 10px; border: 1px solid #e5e7eb; border-radius: 8px;
      padding: 10px 12px; background: #fff; cursor: pointer;
    }
    .fav-item:hover { border-color: #2563eb; }
    .fav-item .name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fav-item .logo { width: 32px; height: 32px; object-fit: contain; border-radius: 4px; flex-shrink: 0; background: #f3f4f6; }

    /* 直播源 */
    .src-list { display: flex; flex-direction: column; gap: 10px; }
    .src-item { display: flex; align-items: center; gap: 12px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; background: #fff; }
    .src-main { flex: 0 0 auto; min-width: 0; max-width: 32%; }
    .src-item .nm { font-weight: 600; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; overflow: hidden; }
    .src-item .nm:hover { color: #2563eb; }
    .src-item .nm .nm-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* 名称右方：紧挨名称、指向名称并左右晃动的手指，提示单击 */
    .tap-finger { flex-shrink: 0; font-size: 15px; line-height: 1; transform-origin: 20% 50%; animation: finger-shake 1s ease-in-out infinite; }
    @keyframes finger-shake { 0%,100% { transform: translateX(0) rotate(0deg); } 20% { transform: translateX(-4px) rotate(-15deg); } 60% { transform: translateX(4px) rotate(15deg); } 80% { transform: translateX(-2px) rotate(-8deg); } }
    .device-phone .src-item, .device-tv .src-item, .device-pc .src-item { cursor: pointer; }
    .spin { display: inline-flex; align-items: center; gap: 6px; }
    .spin::before { content: ''; width: 12px; height: 12px; border: 2px solid #cbd5e1; border-top-color: #2563eb; border-radius: 50%; animation: spin-kf .7s linear infinite; }
    @keyframes spin-kf { to { transform: rotate(360deg); } }
    .src-item .url { font-size: 12px; color: #6b7280; word-break: break-all; margin-top: 2px; }
    .src-status { font-size: 12px; color: #6b7280; margin-top: 4px; min-height: 16px; }
    .src-state.running { color: #2563eb; }
    .src-state.done { color: #16a34a; }
    .src-state.cancelled { color: #92400e; }
    .src-state.error { color: #dc2626; }
    /* 中间进度条 */
    .src-progress-wrap { flex: 1 1 auto; min-width: 60px; display: flex; align-items: center; padding: 0 6px; }
    .src-progress-wrap.hidden { display: none; }
    .progress-bar { flex: 1; height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
    .progress-fill { height: 100%; width: 0; background: linear-gradient(90deg,#34d399,#10b981); border-radius: 999px; transition: width .35s ease; }
    .src-progress-wrap.done .progress-fill { background: linear-gradient(90deg,#86efac,#16a34a); }
    .src-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; margin-left: auto; }
    .src-actions button { padding: 6px 12px; font-size: 13px; }
    .src-actions .sq-add { font-size: 20px; font-weight: 700; color: #2563eb; }
    .src-actions .sq-copy .ico { width: 18px; height: 18px; }
    /* 手机 / TV：换行布局，进度条占整行，按钮靠右 */
    .device-phone .src-item, .device-tv .src-item { flex-wrap: wrap; }
    .device-phone .src-main, .device-tv .src-main { order: 1; max-width: none; flex: 1 1 auto; }
    .device-phone .src-actions, .device-tv .src-actions { order: 2; margin-left: auto; }
    /* 手机竖屏：源列表操作按钮较多（管理员下最多 5 个），允许自动换行并对齐右端，避免最后一个按钮被挤出截断 */
    .device-phone .src-actions { flex-wrap: wrap; justify-content: flex-end; }
    .device-phone .src-actions button { padding: 5px 9px; font-size: 12px; }
    .device-phone .src-progress-wrap, .device-tv .src-progress-wrap { order: 5; flex-basis: 100%; padding: 6px 0 0; }

    /* 频道 */
    .cat-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; }
    .cat-chip { white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: #e5e7eb; color: #374151; cursor: pointer; font-size: 13px; flex-shrink: 0; }
    .cat-chip:hover { background: #d1d5db; }
    .cat-chip.active { background: #2563eb; color: #fff; }
    .ch-list { display: flex; flex-direction: column; gap: 8px; }
    /* 频道列表分页：加载更多 */
    .ch-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 18px; }
    .ch-pager-info { font-size: 13px; color: #6b7280; }
    .ch-pager-more { padding: 8px 18px; border: 1px solid #2563eb; background: #fff; color: #2563eb; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
    .ch-pager-more:hover { background: #eff6ff; }
    /* 无限滚动哨兵：0 高度占位，进入视口即触发加载下一页 */
    .ch-pager-sentinel { display: block; width: 100%; height: 1px; }
    .ch {
      border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; cursor: pointer; background: #fff;
      display: flex; flex-direction: row; align-items: center; gap: 10px;
    }
    .ch:hover { border-color: #2563eb; }
    .ch.playing { border-color: #2563eb; background: #eff6ff; border-left: 4px solid #2563eb; }
    .ch .logo { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; flex-shrink: 0; background: #f3f4f6; }
    .ch .name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
    .ch .src-tag { font-size: 11px; color: #6b7280; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ch .meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; flex-shrink: 0; }
    .badge { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .chk-date { font-size: 11px; color: #9ca3af; flex-shrink: 0; min-width: 64px; text-align: right; }
    .badge.alive { background: #dcfce7; color: #166534; }
    .badge.dead { background: #fee2e2; color: #991b1b; }
    .badge.unknown { background: #fef3c7; color: #92400e; }
    .badge.failed { background: #fce7f3; color: #9d174d; }
    .ico { width: 14px; height: 14px; display: block; }
    .icon-btn { border: none; background: transparent; cursor: pointer; padding: 5px 7px; border-radius: 6px; color: #374151; display: inline-flex; align-items: center; }
    .icon-btn:hover { background: #e5e7eb; }
    .fav-btn.on { color: #f59e0b; }
    .fav-btn.on:hover { background: #e5e7eb; }

    /* 播放器 */
    /* now-playing 移入视频内部右上角：毛玻璃胶囊浮层，不挡底部控制条 */
    #now-playing {
      position: absolute; top: 10px; right: 10px; z-index: 7;
      display: flex; align-items: center; gap: 7px; max-width: calc(100% - 20px);
      margin: 0; padding: 5px 11px 5px 8px; transition: gap .35s ease;
      background: rgba(15,23,42,.5); border: 1px solid rgba(255,255,255,.16);
      border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 2px 10px rgba(0,0,0,.35); pointer-events: none;
    }
    #now-playing.hidden { display: none; }
    /* now-playing 的 logo 盒子：无 logo 时显示电视图标占位 */
    .np-logo { position: relative; width: 24px; height: 24px; border-radius: 4px; background: rgba(255,255,255,.12); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
    .np-logo img { width: 100%; height: 100%; object-fit: contain; }
    .np-logo .tv-icon { width: 100%; height: 100%; color: #cbd5e1; padding: 4px; box-sizing: border-box; }
    .tv-icon { color: #9ca3af; }
    /* 名称过长简化为省略号（限宽，避免覆盖右侧画面） */
    .np-name { flex: 0 1 auto; min-width: 0; max-width: min(56vw, 240px); font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s ease, transform .3s ease, max-width .35s ease; }
    #player-stage { position: relative; width: 100%; max-width: calc(82vh * 16 / 9); margin: 0 auto; background: #000; }
    /* ===== 现代大屏电视外框 ===== */
    /* 外框：金属拉丝质感渐变 + 内高光/内阴影 + 落地环境投影，营造凸起的机身 */
    #tv-frame {
      position: relative; width: 100%; max-width: calc(78vh * 16 / 9 + 26px); margin: 6px auto 0;
      padding: 13px; border-radius: 20px; border: 1px solid #05060a;
      background: linear-gradient(180deg, #34383f 0%, #202329 45%, #14161a 100%);
      box-shadow:
        inset 0 1px 1px rgba(255,255,255,.10),
        inset 0 -3px 8px rgba(0,0,0,.55),
        0 1px 0 rgba(255,255,255,.04),
        0 20px 45px rgba(0,0,0,.45),
        0 4px 10px rgba(0,0,0,.35);
    }
    /* 屏幕凹槽：内阴影把画面"嵌"进机身 */
    #tv-frame::before {
      content: ""; position: absolute; inset: 13px; border-radius: 9px; z-index: 4; pointer-events: none;
      box-shadow: inset 0 0 0 2px #000, inset 0 0 16px rgba(0,0,0,.85);
    }
    /* 屏幕左上方玻璃反光 */
    #tv-frame::after {
      content: ""; position: absolute; top: 17px; left: 17px; width: 38%; height: 20%;
      border-radius: 10px 10px 70% 12px; z-index: 4; pointer-events: none;
      background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 62%);
    }
    /* 电源指示灯（右下角边框上，呼吸闪烁） */
    .tv-led {
      position: absolute; right: 20px; bottom: 5px; width: 7px; height: 7px; border-radius: 50%;
      background: #22c55e; box-shadow: 0 0 6px 1px rgba(34,197,94,.8); z-index: 5;
      animation: tv-led 3s ease-in-out infinite;
    }
    @keyframes tv-led { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
    /* 电视底座：颈部 + 底板 */
    .tv-stand {
      width: 64px; height: 22px; margin: -1px auto 0; position: relative; z-index: 0;
      background: linear-gradient(180deg, #1b1e23, #0c0d10); border-radius: 0 0 7px 7px;
    }
    .tv-stand::after {
      content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 22px;
      width: 150px; height: 11px; background: linear-gradient(180deg, #16181c, #0a0b0e);
      border-radius: 7px; box-shadow: 0 7px 16px rgba(0,0,0,.4);
    }
    /* 全屏时收起电视机身与底座，画面铺满屏幕、去掉圆角 */
    #tv-frame:has(#player-stage:fullscreen),
    #tv-frame:has(#player-stage.pseudo-fullscreen) { display: contents; }
    #tv-frame:has(#player-stage:fullscreen) .tv-stand,
    #tv-frame:has(#player-stage.pseudo-fullscreen) .tv-stand { display: none; }
    #player-stage:fullscreen #hls-video,
    #player-stage.pseudo-fullscreen #hls-video { border-radius: 0; }
    /* 手机竖屏：收紧边框、隐藏底座以节省纵向空间 */
    .device-phone:not(.landscape-fs) #tv-frame { padding: 9px; border-radius: 14px; max-width: calc(70vh * 16 / 9 + 18px); }
    .device-phone:not(.landscape-fs) #tv-frame::before { inset: 9px; border-radius: 7px; }
    .device-phone:not(.landscape-fs) .tv-stand { display: none; }
    .device-phone:not(.landscape-fs) .tv-led { right: 15px; bottom: 3px; }
  #wallpaper-layer { position: absolute; inset: 0; display: none; z-index: 0; border-radius: 8px; overflow: hidden; }
  #player-stage.audio-mode #wallpaper-layer { display: block; }
  /* 双图层交叉淡入淡出 + Ken Burns 缓慢推拉，让音频壁纸"动"起来 */
  .wp-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; will-change: transform, opacity; }
  .wp-slide.active { opacity: 1; animation: kenburns 9s ease-out forwards; }
  /* 视频壁纸不做 Ken Burns 推拉（对 <video> 逐帧缩放会卡顿），只保留交叉淡入 */
  .wp-slide.video-slide.active { animation: none; }
  .wp-slide.video-slide { will-change: opacity; }
  /* 壁纸之上加一层暗角蒙版，保证歌词 / 占位文案在任意图片背景上都清晰可读 */
  #wallpaper-layer::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.12), rgba(0,0,0,.52) 85%);
  }
  @keyframes kenburns {
    0%   { transform: scale(1)    translate(0, 0); }
    100% { transform: scale(1.18) translate(-2%, -2%); }
  }
  /* 视频壁纸：铺满图层，Ken Burns 推拉对 video 同样生效（它是 .wp-slide 子元素） */
  .wp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
    /* 音频频谱可视化画布：覆盖在壁纸之上、控件之下，仅音频模式可见 */
    #audio-visualizer { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 2; width: 100%; pointer-events: none; display: none; opacity: .92; }
    /* 同步歌词层：在壁纸/视频之上居中显示，自动滚动高亮当前行 */
    #lyrics-layer { position: absolute; left: 0; right: 0; top: 0; bottom: 22%; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
      mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); }
    #lyrics-layer.hidden { display: none; }
    #lyrics-box { width: 86%; max-width: 760px; text-align: center; transition: transform .35s ease; will-change: transform; }
    .lyric-line { padding: 6px 0; font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.45); text-shadow: 0 1px 4px rgba(0,0,0,.65); transition: color .25s, font-size .25s, transform .25s; }
    .lyric-line.cur { color: #fff; font-size: 21px; font-weight: 600; transform: scale(1.04); }
    #player-stage.audio-mode #audio-visualizer { display: block; }
    /* 音频模式下视频完全不可见（脱离文档流、1px、透明），只保留声音，避免遮挡壁纸 */
    #player-stage.audio-mode #hls-video { background: transparent; position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    /* 音频模式下视频被压成 1px，舞台高度改由自身撑起：与视频保持一致（16:9，最高 82vh）；min-height 仅作旧浏览器兜底 */
    #player-stage.audio-mode { min-height: 48vh; aspect-ratio: 16 / 9; max-height: 82vh; }
    #hls-video { position: relative; z-index: 1; width: 100%; aspect-ratio: 16 / 9; max-width: calc(82vh * 16 / 9); max-height: 82vh; margin: 0 auto; display: block; background: #000; border-radius: 8px; }
    #player-default { width: 100%; aspect-ratio: 16 / 9; max-width: calc(82vh * 16 / 9); max-height: 82vh; margin: 0 auto; background: #16a34a; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 14px; padding: 16px; }
/* 抑制部分移动浏览器在暂停视频上渲染的原生中央播放按钮（如 OPPO Pad 系统浏览器） */
#hls-video::-webkit-media-controls { display: none !important; }
#hls-video::-webkit-media-controls-overlay-play-button { display: none !important; }
#hls-video::-webkit-media-controls-play-button { display: none !important; }
/* 播放加载中 spinner */
#play-loading { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(0,0,0,.6); border-radius: 8px; }
#play-loading.hidden { display: none; }
/* 加载遮罩上方：台标（放大）在名称之上 */
.loading-head { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 86vw; color: #fff; }
.loading-head .np-logo { width: 130px; height: 130px; background: transparent; }
.loading-head .np-logo img, .loading-head .np-logo .tv-icon { padding: 14px; }
.loading-head .pl-name { font-size: 15px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
/* spinner 中央嵌入倒计时（数字不随 spinner 旋转） */
.spinner-wrap { position: relative; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.spinner-wrap .spinner { width: 48px; height: 48px; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.spinner-wrap .countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 播放失败时的绿幕遮罩 */
#play-fail-overlay { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #16a34a; border-radius: 8px; color: #fff; text-align: center; padding: 16px; gap: 8px; overflow: hidden; max-height: 100%; max-width: 100%; }
#play-fail-overlay.hidden { display: none; }
#play-fail-overlay .fail-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
#play-fail-overlay .fail-actions button { font-size: 14px; padding: 10px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,.75); background: rgba(255,255,255,.14); color: #fff; cursor: pointer; white-space: nowrap; }
#play-fail-overlay .fail-actions button:active { transform: scale(.96); }
/* 手机端：绿幕只放两个按钮，进一步收紧尺寸，确保不超出视频框 */
.device-phone #play-fail-overlay { padding: 12px; gap: 6px; }
.device-phone #play-fail-overlay .fail-actions { gap: 8px; }
.device-phone #play-fail-overlay .fail-actions button { font-size: 13px; padding: 10px 12px; }
/* 不支持原生全屏 API 时的 CSS 伪全屏兜底（兼容 X 等浏览器） */
#player-stage.pseudo-fullscreen { position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; background: #000; }
#player-stage.pseudo-fullscreen #wallpaper-layer { border-radius: 0; }
#player-stage.pseudo-fullscreen #play-fail-overlay { border-radius: 0; }
/* 伪全屏下：视频模式铺满；音频模式仍保持隐藏，避免遮挡壁纸 */
#player-stage.pseudo-fullscreen:not(.audio-mode) #hls-video { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
    /* 本地 / 链接播放区：默认折叠为一条可点击的标题栏，点击图标按钮展开（观看模式更干净） */
    .section-local { margin-top: 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; }
    .local-toggle { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 12px; background: transparent; color: #374151; font-weight: 600; font-size: 14px; cursor: pointer; border: none; }
    .local-toggle:hover { background: #f3f4f6; }
    .local-toggle .ico { color: #2563eb; flex-shrink: 0; }
    .local-toggle .local-toggle-label { flex: 1; text-align: left; }
    .local-toggle .caret { width: 18px; height: 18px; color: #6b7280; transition: transform .2s ease; flex-shrink: 0; }
    .section-local.collapsed .local-toggle .caret { transform: rotate(-90deg); }
    .local-body { max-height: 440px; overflow: hidden; opacity: 1; transition: max-height .3s ease, opacity .25s ease; }
    .section-local.collapsed .local-body { max-height: 0; opacity: 0; }
    .local-body .local-row { padding: 0 12px 12px; }
    .local-row { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
    .local-row input[type=text] { flex: 1; min-width: 160px; }
    /* 紧凑按钮：本地文件/目录与 HLS 同处一行，去掉拉伸、收窄内边距与字号 */
    .play-action.compact { padding: 8px 12px; font-size: 13px; border-width: 1px; }
    .file-input { flex: 1; min-width: 0; font-size: 13px; }
    /* 放大、加边框的播放按钮 */
    .play-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600; border: 2px solid #1d4ed8; background: #2563eb; color: #fff; border-radius: 8px; white-space: nowrap; }
    .play-action:hover { filter: brightness(1.06); }
    .play-action .ico { width: 18px; height: 18px; }
    /* 手动输入地址 + 播放按钮：整块用一个面板框起来，播放按钮仅显示图标 */
    .url-play-panel { display: flex; align-items: center; gap: 8px; padding: 8px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; flex: 1; min-width: 0; }
    .url-play-panel #hls-url { flex: 1; min-width: 0; border: 1px solid #e5e7eb; border-radius: 6px; padding: 9px 10px; font-size: 14px; }
    .play-action.icon-only { padding: 9px 13px; }
    /* 代理开关：置于「正在播放」台标名称之后，行内浅色按钮（不再覆盖在画面上） */
    /* 代理按钮：文字「代理」+ 左右滑动小开关（右=开，左=关） */
    .proxy-btn { flex-shrink: 0; margin-left: 2px; border: 1px solid #d1d5db; background: #fff; color: #374151; border-radius: 8px; padding: 4px 10px; display: inline-flex; align-items: center; }
    .proxy-text { font-size: inherit; white-space: nowrap; margin-right: 6px; }
    .proxy-switch { position: relative; display: inline-block; width: 34px; height: 18px; border-radius: 999px; background: #cbd5e1; transition: background .2s; flex-shrink: 0; }
    .proxy-btn.on .proxy-switch { background: #2563eb; }
    /* 代理按钮锁定态：HTTP 源强制走代理，按钮显示"开"但不可切换 */
    .proxy-btn.locked { opacity: 1; cursor: not-allowed; }
    .proxy-btn.locked .proxy-switch { background: #16a34a; }
    /* 当前播放传输方式只读徽标：代理（绿）/ 直连（灰），让播放中一眼看出是否走代理 */
    .proxy-state { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid #e5e7eb; color: #6b7280; white-space: nowrap; }
    .proxy-state.on { color: #16a34a; border-color: #86efac; background: #f0fdf4; }
    /* 代理开关与状态：按需求暂时隐藏（功能仍保留在 JS：toggleProxy / initProxyBtn /
       updateProxyBadge / updateProxyUI / setProxyVisible 全部照常生效，仅不显示）。
       使用 !important 以覆盖 JS 中 setProxyVisible(true) 设置的行内 display。 */
    #proxy-toggle, #proxy-state { display: none !important; }
    .proxy-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .2s; }
    .proxy-btn.on .proxy-knob { left: 18px; }
  .ext-toggle-btn { min-width: 120px; }
  .ext-toggle-btn.on { background: #2563eb; color: #fff; }
  .ext-sel { max-width: 200px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151; }
    /* 代理按钮文字标签：默认隐藏（PC/TV 显示图标）；移动端改为显示文字、隐藏图标 */

    /* 播放器自定义控制条（③） */
    .player-controls { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: rgba(31,41,55,.88); border-radius: 8px; transition: opacity .35s ease, transform .35s ease; }
    .player-controls.hidden { display: none; }
    .player-controls.controls-hidden { opacity: 0; pointer-events: none; }
    /* 无操作态 idle-ui：PC / 手机 / TV 统一隐藏台标名称 + 控制条 */
    #player-stage.idle-ui .player-controls { opacity: 0; transform: translateY(10px); pointer-events: none; }
    /* 无操作态：名称带缩展动画地塌缩（不占空间），仅留台标 */
    #player-stage.idle-ui #now-playing { gap: 0; }
    #player-stage.idle-ui .np-name { max-width: 0; opacity: 0; transform: translateY(-4px); pointer-events: none; }
    /* 无操作态：本地/链接播放块随控制条一起收起（彻底不占空间），任意交互唤醒后恢复显示 */
    #local-block.idle-hidden { display: none; }
    #player-stage:fullscreen { background: #000; }
    #player-stage:fullscreen #hls-video { max-width: none; max-height: none; width: 100%; height: 100%; }
    .player-controls .pc-btn { background: #374151; color: #fff; padding: 7px 9px; font-size: 13px; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
    .player-controls .pc-btn:hover { background: #4b5563; }
    .player-controls .pc-fav { color: #fff; }
    .player-controls .pc-fav.on { color: #f43f5e; }
    .player-controls .ico { width: 18px; height: 18px; }
    .player-controls .pc-time { color: #e5e7eb; font-size: 12px; min-width: 42px; text-align: center; }
    .player-controls .pc-pos { color: #e5e7eb; font-size: 12px; min-width: 36px; text-align: center; }
    .player-controls .pc-shuffle.on { background: #2563eb; color: #fff; }
    .player-controls .pc-seek { flex: 1; min-width: 120px; }
    /* 进度组（点播时显示）：包含当前时间 / 进度条 / 总时长 / 列表位置 */
    .pc-progress { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 120px; }
    .pc-progress.hidden { display: none; }
    /* 直播徽标：替代无用的进度条，节省控制栏空间 */
    .pc-live { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 13px; flex-shrink: 0; }
    .pc-live[hidden] { display: none; }
    .pc-live .live-text { font-weight: 600; letter-spacing: .5px; }
    .live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; animation: livePulse 1.3s ease-out infinite; }
    @keyframes livePulse {
      0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.7); opacity: 1; }
      70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); opacity: .5; }
      100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); opacity: 1; }
    }
    .player-controls .pc-vol { width: 80px; }
    .player-controls .pc-viz { width: 70px; display: none; }
    /* 频谱幅度控件仅在音频模式显示（视频模式不需要） */
    #player-stage.audio-mode .player-controls .pc-viz { display: inline-block; }
    .player-controls .pc-speed { padding: 5px; border-radius: 6px; border: 1px solid #374151; background: #374151; color: #fff; }
    /* 录制按钮 */
    #pc-rec { transition: background .2s, color .2s; }
    #pc-rec.recording { background: #dc2626; color: #fff; animation: rec-pulse 1.2s ease-in-out infinite; }
    #pc-rec.recording:hover { background: #b91c1c; }
    @keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
    .badge.blocked { background: #ffedd5; color: #9a3412; }

    /* 弹窗 */
    .modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
    .modal.hidden { display: none; }
    .modal-box { background: #fff; border-radius: 10px; padding: 20px; width: 320px; max-width: 90vw; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-height: 88vh; overflow-y: auto; }
    .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .modal-head h3 { margin: 0; font-size: 16px; }
    .modal-head button { border: none; background: transparent; font-size: 18px; cursor: pointer; color: #6b7280; line-height: 1; padding: 4px 8px; border-radius: 6px; }
    .modal-head button:hover { background: #f3f4f6; }
    /* 登录/注册弹窗：统一所有控件高度，避免元素参差 */
    #auth-modal .modal-box { width: 340px; }
    .auth-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
    .auth-fields input {
      flex: none; width: 100%; height: 40px; padding: 0 10px; box-sizing: border-box;
      border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; outline: none;
    }
    .auth-fields input:focus { border-color: #2563eb; }
    .auth-fields button { height: 40px; box-sizing: border-box; }
    .auth-fields .row { gap: 10px; margin: 0; }
    .auth-fields .row button { flex: 1; }
    .user-item { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
    .user-item:last-child { border-bottom: none; }
    .user-item .info { flex: 1; min-width: 0; }
    .user-item .info .nm { font-weight: 600; font-size: 14px; }
    .user-item .info .url { font-size: 12px; color: #6b7280; }
    .badge-role { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: #fef3c7; color: #92400e; margin-left: 6px; }

    /* 设置面板 */
    .set-section { margin-bottom: 18px; }
    .set-label { font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 8px; }
    .set-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .set-label-row .set-label { margin-bottom: 0; }
    .wp-refresh { padding: 4px; line-height: 0; }
    .wp-refresh[disabled] { opacity: .5; cursor: default; }
    .wp-refresh.spinning .ico { animation: wp-spin .8s linear infinite; }
    @keyframes wp-spin { to { transform: rotate(360deg); } }
    .lang-btn.active-lang { background: #2563eb; color: #fff; }
    .wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .wp-thumb { aspect-ratio: 16 / 9; border-radius: 6px; background-size: cover; background-position: center; background-color: #e5e7eb; cursor: pointer; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 12px; }
    .wp-thumb.active { border-color: #2563eb; }
    .wp-thumb.wp-none { background-color: #f3f4f6; }
    .wp-thumb .wp-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }

    .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #111827; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; opacity: 0; transition: opacity .3s; z-index: 60; pointer-events: none; }
    .toast.show { opacity: 1; }
    /* KV 上限全局提示条：检测暂停 / 写入受限时置顶展示 */
    .kv-notice { position: fixed; top: 0; left: 0; right: 0; z-index: 70; background: #fef3c7; color: #92400e; border-bottom: 1px solid #fde68a; padding: 8px 40px 8px 14px; font-size: 13px; line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
    .kv-notice.hidden { display: none; }
    .kv-notice .kv-close { position: absolute; top: 4px; right: 10px; cursor: pointer; border: none; background: transparent; font-size: 18px; line-height: 1; color: #92400e; padding: 2px 6px; }
    .kv-notice .kv-close:hover { color: #b45309; }

    /* 广场悬浮"+"按钮（手机端） */
    .fab { position: fixed; right: 16px; bottom: 84px; width: 54px; height: 54px; border-radius: 50%; background: #2563eb; color: #fff; font-size: 30px; line-height: 1; border: none; box-shadow: 0 4px 14px rgba(0,0,0,.35); z-index: 30; display: none; align-items: center; justify-content: center; }
    .fab:hover { background: #1d4ed8; }

    .device-tv :focus { outline: 3px solid #ff9800; outline-offset: 2px; }

    /* ---------- PC ---------- */
    /* PC：tab 改为左侧垂直侧栏，顶部整条空间留给视频 */
    .device-pc .wrap { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; gap: 0; overflow: hidden; }
    .device-pc .tabbar {
      flex-direction: column; flex-shrink: 0; width: 168px;
      align-self: stretch; position: static; height: 100%;
      border-bottom: none; border-right: 1px solid #e5e7eb;
      padding: 10px 8px;
    }
    .device-pc .tab {
      display: flex; align-items: center; width: 100%; justify-content: center; text-align: center;
      padding: 7px 14px; border-bottom: none; border-left: 3px solid transparent;
    }
    .device-pc .tab.active { border-bottom-color: transparent; border-left-color: #1d4ed8; color: #fff; background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%); font-weight: 700; }
    .device-pc .panel { flex: 1; min-width: 0; }
    /* ===== 播放器页「观看模式」：顶栏(header) + 标签栏(tabbar) 自动隐藏，任何活动(鼠标移动/触摸/按键)即唤出 ===== */
    body.player-tab header { transition: transform .25s ease, opacity .25s ease; will-change: transform; }
    body.player-tab .tabbar { transition: transform .25s ease, opacity .25s ease, margin-left .25s ease; will-change: transform; }
    /* idle：顶栏上滑收起 */
    body.player-tab.idle header { transform: translateY(-110%); opacity: 0; pointer-events: none; }
    /* idle：桌面/TV 侧栏标签横向收起，并回收其宽度 */
    body.device-pc.player-tab.idle .tabbar,
    body.device-tv.player-tab.idle .tabbar { transform: translateX(-115%); margin-left: -168px; opacity: 0; pointer-events: none; }
    /* idle：手机端标签栏在底部，下滑收起 */
    body.device-phone.player-tab.idle .tabbar { transform: translateY(120%); opacity: 0; pointer-events: none; }
    /* 顶栏收起时把内容区上提，补回 header 高度，让视频占用更多纵向空间（桌面/TV 顶部布局） */
    body:not(.device-phone).player-tab .wrap { transition: margin-top .25s ease; }
    body:not(.device-phone).player-tab.idle .wrap { margin-top: calc(-1 * var(--top-h, 64px)); }
    /* 手机端隐藏底栏后回收底部留白 */
    body.device-phone.player-tab.idle #panel-player { padding-bottom: 14px; }
    /* 顶部渐变热区：播放器 tab 空闲时显示，提示「鼠标上移唤出顶栏」 */
    body.player-tab .top-reveal-zone {
      position: fixed; top: 0; left: 0; right: 0; height: 10px; z-index: 55;
      background: linear-gradient(to bottom, rgba(37,99,235,.5), transparent);
      opacity: 0; transition: opacity .2s; pointer-events: none;
    }
    body.player-tab.idle .top-reveal-zone { opacity: 1; pointer-events: auto; cursor: pointer; }


    /* PC：锁定页眉(含搜索栏)与左侧 tab；列表面板标题/类别固定，仅下方列表滚动 */
    body.device-pc { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
    body.device-pc header { flex-shrink: 0; position: sticky; top: 0; z-index: 30; }
    /* 列表型面板：纵向 flex，标题/类别固定，滚动限定在下方列表区 */
    body.device-pc .panel { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    body.device-pc .panel-head { background: #fff; margin: 0 -16px; padding: 14px 16px; box-sizing: border-box; }
    body.device-pc .cat-bar { background: #fff; margin: 0 -16px 8px; padding: 8px 16px; }
    body.device-pc .ch-list,
    body.device-pc .src-list,
    body.device-pc .fav-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
    /* 播放器面板：整体可滚动（视频 + 自定义播放），标题随内容 */
    body.device-pc #panel-player { display: block; overflow-y: auto; }
    /* 自定义播放区与视频窗口等宽并居中 */
    body.device-pc #panel-player .custom-block { max-width: calc(82vh * 16 / 9); margin-left: auto; margin-right: auto; }

    /* ---------- 手机 ---------- */
    .device-phone .tabbar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-top: 1px solid #e5e7eb; border-bottom: none; box-shadow: 0 -1px 4px rgba(0,0,0,.08); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 8px; }
    .device-phone .panel { padding-bottom: 76px; }
    .device-phone .tab { padding: 11px 8px; font-size: 15px; }
    /* 手机竖屏：控制条移到视频画面下方（正常文档流，不再覆盖视频），省出画面空间；
       默认隐藏（controls-hidden），触摸才显示、播放中自动隐藏；隐藏时 display:none 不占下方空间 */
    .device-phone:not(.landscape-fs) .player-controls {
      position: static; left: auto; right: auto; bottom: auto;
      margin: 6px 0 0; z-index: 6; gap: 6px; padding: 7px 9px; border-radius: 8px;
    }
    /* 竖屏隐藏时彻底收起（不占下方空间），触摸/交互时由 JS 显示 */
    .device-phone:not(.landscape-fs) .player-controls.controls-hidden { display: none; }
    /* 进度条与主导航（上一条/播放/下一条）排同一行，次要按钮自动换到下一行，
       降低堆叠行数、压缩高度（pc-time 已隐藏，进度条更紧凑） */
    .device-phone .player-controls .pc-btn { padding: 8px 10px; }
    .device-phone #pc-prev { order: 1; }
    .device-phone #pc-play { order: 2; }
    .device-phone #pc-next { order: 3; }
    .device-phone .pc-progress { order: 4; flex: 1 1 150px; min-width: 120px; padding: 2px 0; }
    .device-phone #pc-shuffle { order: 5; }
    .device-phone #pc-fav { order: 6; }
    .device-phone #pc-live { order: 7; }
    .device-phone #pc-mute { order: 8; }
    .device-phone #pc-vol { order: 9; }
    .device-phone #pc-viz { order: 10; }
    .device-phone #pc-speed { order: 11; }
    .device-phone #pc-rec { order: 12; }
    .device-phone #pc-fs { order: 13; }
    .device-phone .player-controls .pc-seek { flex: 1; min-width: 0; height: 18px; }
    .device-phone .player-controls .pc-time { display: none; }
    .device-phone .player-controls .pc-vol { width: 60px; }
    .device-phone .player-controls .pc-speed { padding: 6px; font-size: 12px; }
    /* 手机竖屏：频道条不再显示检测时间（省出横向空间给频道名） */
    .device-phone:not(.landscape-fs) .chk-date { display: none; }
    /* 手机竖屏：频道名完整显示——允许自动折行并适当缩小字号（不再省略号截断） */
    .device-phone:not(.landscape-fs) .ch .name {
      white-space: normal; overflow: visible; text-overflow: clip;
      font-size: 13px; line-height: 1.25; word-break: break-word;
    }
    /* 手机竖屏：URL 输入框独占一整行，两个“打开文件/目录”按钮自动换到下一行，避免挤掉 URL 输入 */
    .device-phone:not(.landscape-fs) .url-play-panel { flex-wrap: wrap; }
    .device-phone:not(.landscape-fs) .url-play-panel #hls-url { flex: 1 1 100%; }
    /* 竖屏：播放器面板同样约束高度、内部滚动 */
    .device-phone:not(.landscape-fs) #panel-player { flex: 1 1 auto; min-height: 0; }
    /* 手机横屏全屏模式：控件浮在视频底部，自动隐藏（原生全屏与伪全屏通用） */
    .device-phone.landscape-fs { overflow: hidden; }
    .device-phone.landscape-fs #player-stage.pseudo-fullscreen .player-controls,
    .device-phone.landscape-fs #player-stage:fullscreen .player-controls {
      position: absolute; left: 8px; right: 8px; bottom: 8px;
      margin: 0; padding: 8px 10px;
      border-radius: 8px;
    }
    .device-phone.landscape-fs #player-stage.pseudo-fullscreen .player-controls.controls-hidden,
    .device-phone.landscape-fs #player-stage:fullscreen .player-controls.controls-hidden {
      opacity: 0; pointer-events: none;
    }
    /* 横屏全屏下视频铺满，取消原有 max-width/max-height 限制（原生全屏与伪全屏通用） */
    .device-phone.landscape-fs #player-stage.pseudo-fullscreen #hls-video,
    .device-phone.landscape-fs #player-stage:fullscreen #hls-video {
      width: 100%; height: 100%; max-width: none; max-height: none;
    }
    .device-phone.landscape-fs #player-stage { max-width: none; max-height: none; }
    /* 手机端：加载浮层台标/名称过大易超出矮画面，整体缩小 */
    .device-phone #play-loading { gap: 12px; }
    .device-phone .loading-head { gap: 8px; max-width: 90vw; }
    .device-phone .loading-head .np-logo { width: 84px; height: 84px; }
    .device-phone .loading-head .np-logo img,
    .device-phone .loading-head .np-logo .tv-icon { padding: 8px; }
    .device-phone .loading-head .pl-name { font-size: 13px; }

    /* PC / 手机：键盘导航时的焦点高亮（TV 已有橙色粗焦点环，这里只补非 TV） */
    body:not(.device-tv) .ch:focus,
    body:not(.device-tv) .fav-item:focus,
    body:not(.device-tv) .src-item .nm:focus,
    body:not(.device-tv) .tab:focus,
    body:not(.device-tv) .cat-chip:focus,
    body:not(.device-tv) .wp-thumb:focus,
    body:not(.device-tv) .player-controls .pc-btn:focus {
      outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 6px;
    }

    /* ---------- TV ---------- */
    .device-tv { font-size: 20px; }
    .device-tv header h1 { font-size: 26px; }
    .device-tv .brand-logo { height: 40px; }
    .device-tv .searchbar input { font-size: 18px; padding: 12px; }
    .device-tv .tab { font-size: 20px; padding: 18px 10px; }
    .device-tv .ch { padding: 16px 18px; min-height: 64px; }
    .device-tv .ch .name { font-size: 20px; }
    .device-tv .ch .logo { width: 48px; height: 48px; }
    .device-tv .ico { width: 20px; height: 20px; }
    .device-tv .cat-chip { padding: 10px 18px; font-size: 18px; }
    .device-tv .src-item .nm { font-size: 18px; }
    .device-tv button { font-size: 18px; padding: 12px 18px; }
    .device-tv .play-action .ico { width: 24px; height: 24px; }
    .device-tv .url-play-panel #hls-url { font-size: 18px; padding: 12px; }
    .device-tv .play-action.icon-only { padding: 12px 16px; }
    .device-tv #hls-video, .device-tv #player-default { max-width: none; max-height: none; width: 100%; }
    .device-tv .fav-item { padding: 16px 18px; min-height: 64px; }
    .device-tv .fav-item .name { font-size: 20px; }
    .device-tv .fav-item .logo { width: 48px; height: 48px; }
    /* 电视焦点导航（①）：加粗焦点高亮，禁用 hover 依赖 */
    .device-tv :focus { outline: 4px solid #ff9800; outline-offset: 3px; }
    .device-tv .ch:focus, .device-tv .fav-item:focus, .device-tv .cat-chip:focus,
    .device-tv .wp-thumb:focus, .device-tv .src-item .nm:focus, .device-tv .player-controls .pc-btn:focus { background: #eff6ff; }
    .device-tv .player-controls .pc-btn { font-size: 18px; padding: 10px 16px; }
    .device-tv .player-controls .pc-time { font-size: 16px; }

    /* ---------- 横屏侧栏布局（TV / 手机横屏）：类似 PC，tab 在左侧垂直排列，不进入伪全屏 ---------- */
    /* 用 body.side-nav 提高特异性，确保覆盖 .device-phone .tabbar 的底部固定定位 */
    body.side-nav { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
    body.side-nav header { flex-shrink: 0; position: sticky; top: 0; z-index: 30; }
    /* 手机横屏 + 播放器 tab：隐藏顶部页眉（含搜索框），把全部竖向空间让给视频；其它 tab 仍显示页眉 */
    body.device-phone.side-nav.player-tab header { display: none; }
    /* 页眉隐藏后，视频可用高度增加，收紧预留预算让视频更大一档 */
    body.device-phone.side-nav.player-tab #player-stage,
    body.device-phone.side-nav.player-tab #panel-player .custom-block { max-width: calc((100vh - 150px) * 16 / 9); }
    body.side-nav .wrap { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; gap: 0; overflow: hidden; }
    body.side-nav .tabbar {
      flex-direction: column; flex-shrink: 0; width: 168px;
      align-self: stretch; position: static; height: 100%;
      border-bottom: none; border-right: 1px solid #e5e7eb;
      padding: 10px 8px; box-shadow: none;
    }
    body.side-nav .tab {
      display: flex; align-items: center; width: 100%; justify-content: flex-start; text-align: left;
      padding: 7px 14px; border-bottom: none; border-left: 3px solid transparent; font-size: 15px;
    }
    body.side-nav .tab.active { border-bottom-color: transparent; border-left-color: #1d4ed8; color: #fff; background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%); font-weight: 700; }
    /* 列表面板：纵向 flex，标题/类别固定，滚动限定在下方列表区 */
    body.side-nav .panel { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 16px; }
    body.side-nav .panel-head { background: #fff; margin: 0 -16px; padding: 14px 16px; box-sizing: border-box; }
    body.side-nav .cat-bar { background: #fff; margin: 0 -16px 8px; padding: 8px 16px; }
    body.side-nav .ch-list,
    body.side-nav .src-list,
    body.side-nav .fav-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
    /* 播放器面板可滚动（视频 + 自定义控件），自定义区等宽居中 */
    body.side-nav #panel-player { display: block; overflow-y: auto; }
    body.side-nav #panel-player { flex: 1 1 auto; min-height: 0; }
    /* 横屏：视频与控制条/URL 面板需同处一屏——按视口高预留控件空间来约束视频宽，并让控件/URL 更紧凑 */
    body.side-nav #player-stage { max-width: calc((100vh - 200px) * 16 / 9); margin-left: auto; margin-right: auto; }
    body.side-nav #panel-player .custom-block { max-width: calc((100vh - 200px) * 16 / 9); margin-left: auto; margin-right: auto; }
    /* 手机横屏下取消底部 tabbar 预留的 76px（tab 已移到左侧） */
    body.side-nav .player-controls { position: static; left: auto; right: auto; bottom: auto; gap: 6px; padding: 6px 8px; }
    body.side-nav .player-controls .pc-btn { padding: 6px 8px; font-size: 12px; }
    body.side-nav .player-controls .pc-vol { width: 56px; }
    body.side-nav .player-controls .pc-speed { padding: 5px; font-size: 12px; }
    body.side-nav .url-play-panel { padding: 6px; gap: 6px; }
    body.side-nav .url-play-panel #hls-url { padding: 7px 9px; font-size: 13px; }
    body.side-nav .play-action.icon-only { padding: 7px 10px; }
    body.side-nav .play-action.compact { padding: 7px 10px; font-size: 12px; }
    body.side-nav #now-playing { font-size: 13px; }
    .device-tv .player-controls .pc-speed { font-size: 16px; padding: 8px; }

    /* ===== 播放器 UI 无操作态过渡补充 ===== */
    #player-stage .player-controls, #now-playing .np-name { transition: opacity .35s ease, transform .35s ease, max-width .35s ease; }
    .url-play-panel.hidden { display: none; }

    /* ===== 底部播放按钮：立体化 + 配色（需求 B.4） ===== */
    .play-action {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px 18px; font-size: 14px; font-weight: 700; letter-spacing: .3px;
      border: none; border-radius: 10px; white-space: nowrap; color: #fff; cursor: pointer;
      background: linear-gradient(180deg,#3b82f6,#1d4ed8);
      box-shadow: 0 4px 0 #1e40af, 0 6px 12px rgba(30,64,175,.35);
      transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
    }
    .play-action:active { transform: translateY(3px); box-shadow: 0 1px 0 #1e40af, 0 2px 6px rgba(30,64,175,.3); }
    .play-action .ico { width: 18px; height: 18px; }
    .play-action.icon-only { padding: 9px 13px; }
    .play-action.compact { padding: 8px 12px; font-size: 13px; }
    /* 三个按钮各自配色：流媒体(蓝) / 本地文件(绿) / 本地目录(琥珀) */
    #stream-btn { background: linear-gradient(180deg,#3b82f6,#1d4ed8); box-shadow: 0 4px 0 #1e40af, 0 6px 12px rgba(30,64,175,.35); }
    #stream-btn:active { box-shadow: 0 1px 0 #1e40af, 0 2px 6px rgba(30,64,175,.3); }
    #local-file-btn { background: linear-gradient(180deg,#34d399,#059669); box-shadow: 0 4px 0 #047857, 0 6px 12px rgba(5,150,105,.35); }
    #local-file-btn:active { box-shadow: 0 1px 0 #047857, 0 2px 6px rgba(5,150,105,.3); }
    #local-dir-btn { background: linear-gradient(180deg,#fbbf24,#f59e0b); color: #3a2a06; box-shadow: 0 4px 0 #b45309, 0 6px 12px rgba(245,158,11,.35); }
    #local-dir-btn:active { box-shadow: 0 1px 0 #b45309, 0 2px 6px rgba(245,158,11,.3); }

    /* ===== 列表项立体化：源 / 频道 / 收藏统一为凸起卡片（需求 C） ===== */
    .src-item, .ch, .fav-item {
      background: linear-gradient(180deg,#ffffff 0%,#eef2f7 100%);
      border: 1px solid #dbe3ec;
      border-bottom: 2px solid #c3cdd9;
      box-shadow: 0 2px 5px rgba(15,23,42,.08), 0 3px 10px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.9);
      transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, border-bottom-color .15s ease;
    }
    .src-item:hover, .ch:hover, .fav-item:hover {
      border-color: #2563eb; border-bottom-color: #1d4ed8;
      box-shadow: 0 8px 20px rgba(37,99,235,.22);
      transform: translateY(-2px);
    }
    .src-item:active, .ch:active, .fav-item:active {
      transform: translateY(1px);
      border-bottom-color: #dbe3ec;
      box-shadow: 0 1px 3px rgba(15,23,42,.14);
    }
    /* 正在播放的频道：保留立体凸起 + 蓝色高亮与左侧强调条 */
    .ch.playing { background: linear-gradient(180deg,#eff6ff 0%,#dbeafe 100%); border-color: #2563eb; border-bottom-color: #1d4ed8; border-left: 4px solid #2563eb; }
    .ch.playing:hover { border-bottom-color: #1d4ed8; }

    /* ===== 其它按钮立体化：分类胶囊 / 图标按钮 / 加载更多 / 源操作按钮 ===== */
    button { white-space: nowrap; }
    .cat-chip {
      background: linear-gradient(180deg,#ffffff,#eef2f7); color: #374151;
      border: 1px solid #d7dee8; border-bottom: 2px solid #c3cdd9;
      box-shadow: 0 2px 4px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.9);
      transition: transform .12s ease, box-shadow .15s ease, background .15s, color .15s;
    }
    .cat-chip:hover { background: linear-gradient(180deg,#f1f5ff,#dbeafe); color: #1d4ed8; border-bottom-color: #93c5fd; }
    .cat-chip:active { transform: translateY(1px); border-bottom-color: #d7dee8; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
    .cat-chip.active { color: #fff; border-color: #1d4ed8; border-bottom-color: #1e40af; background: linear-gradient(180deg,#3b82f6,#1d4ed8); box-shadow: 0 3px 8px rgba(29,78,216,.35), inset 0 1px 0 rgba(255,255,255,.35); }
    /* 图标按钮（收藏/打开/搜索/设置/代理）：凸起圆盘质感 */
    .icon-btn {
      background: linear-gradient(180deg,#ffffff,#eef2f7); color: #374151;
      border: 1px solid #d7dee8; border-bottom: 2px solid #c3cdd9;
      box-shadow: 0 2px 4px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9);
      transition: transform .12s ease, box-shadow .15s ease, background .15s, color .15s;
    }
    .icon-btn:hover { background: linear-gradient(180deg,#f1f5ff,#dbeafe); color: #1d4ed8; border-bottom-color: #93c5fd; }
    .icon-btn:active { transform: translateY(1px); border-bottom-color: #d7dee8; box-shadow: 0 1px 2px rgba(15,23,42,.14); }
    .fav-btn.on { color: #f59e0b; }
    /* 加载更多 / 源操作按钮：立体胶囊 */
    .ch-pager-more, .src-actions button {
      background: linear-gradient(180deg,#ffffff,#eef2f7); color: #1d4ed8;
      border: 1px solid #d7dee8; border-bottom: 2px solid #c3cdd9; border-radius: 8px; font-weight: 600; cursor: pointer;
      box-shadow: 0 2px 5px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.9);
      transition: transform .12s ease, box-shadow .15s ease, background .15s, color .15s;
    }
    .ch-pager-more:hover, .src-actions button:hover { background: linear-gradient(180deg,#f1f5ff,#dbeafe); border-bottom-color: #93c5fd; }
    .ch-pager-more:active, .src-actions button:active { transform: translateY(1px); border-bottom-color: #d7dee8; box-shadow: 0 1px 2px rgba(15,23,42,.14); }
    .src-actions .sq-add { color: #2563eb; }
    /* 播放控制条按钮也保持不换行 */
    .player-controls .pc-btn, .player-controls button { white-space: nowrap; }