/* ============================================
   IPTV 网页播放器 - 现代风格样式
   - 暗色默认 / 亮色可切（.light-theme 覆盖）
   - 日语字体: Noto Sans JP
   - 播放控制浮层 / 时移进度条 / 频道切换浮层 / 缓冲指示
   ============================================ */

:root {
  --bg: #0e1014;
  --bg-2: #14171d;
  --panel: #171b22;
  --panel-2: #1e232c;
  --border: #2a3038;
  --text: #e8eaed;
  --muted: #9aa3b0;
  --accent: #4f8cff;
  --accent-2: #2f6fe0;
  --accent-soft: rgba(79, 140, 255, 0.14);
  --danger: #ff5d5d;
  --ok: #3ecf8e;
  --orange: #ff9d3a;
  --live: #ff4242;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.28);
  --shadow-md: 0 8px 24px rgba(0,0,0,.36);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.5);
  --radius: 12px;
  --radius-sm: 8px;
  --jp-font: "Noto Sans JP", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
}

body.light-theme {
  --bg: #eef1f6;
  --bg-2: #e4e8ef;
  --panel: #ffffff;
  --panel-2: #f1f4f9;
  --border: #dde2ea;
  --text: #1a1d24;
  --muted: #667085;
  --accent: #2f6fe0;
  --accent-2: #1f56c3;
  --accent-soft: rgba(47, 111, 224, 0.12);
  --shadow-sm: 0 2px 8px rgba(16,24,40,.08);
  --shadow-md: 0 8px 24px rgba(16,24,40,.12);
  --shadow-lg: 0 18px 50px rgba(16,24,40,.18);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: var(--jp-font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

/* ============================================
   登录界面
   ============================================ */
.login-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 25%, #1a1f2b, #0a0c10);
}
body.light-theme .login-overlay { background: radial-gradient(circle at 50% 25%, #dde6f5, #eef1f6); }
.login-box {
  width: 360px; padding: 38px 34px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-lg);
}
.brand-title {
  font-size: 22px; font-weight: 700; text-align: center;
  margin: 0 0 26px; color: var(--text); letter-spacing: .5px;
}
.input-group { margin-bottom: 14px; }
.input-group label {
  display: block; font-size: 12px; color: var(--muted);
  margin-bottom: 6px; letter-spacing: .4px;
}
.input-group input {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font-size: 14px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.login-error {
  min-height: 18px; color: var(--danger); font-size: 13px;
  margin: 4px 0 12px; text-align: center;
}
.login-btn {
  width: 100%; padding: 13px; border: none; border-radius: 10px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #fff; font-size: 15px; font-weight: 600;
  transition: transform .08s, filter .2s;
}
.login-btn:hover { filter: brightness(1.06); }
.login-btn:active { transform: translateY(1px); }
.login-btn:disabled { opacity: .6; cursor: default; }

/* ============================================
   主框架
   ============================================ */
.app-container {
  display: flex; flex-direction: column; height: 100vh; width: 100vw;
  overflow: hidden;
}

/* ========== 顶部栏 ========== */
.top-bar {
  height: 52px; flex-shrink: 0; display: flex;
  align-items: center; justify-content: space-between;
  padding: 0 14px; background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  gap: 10px;
}
.top-bar-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.top-brand { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: .3px; }
.top-user {
  font-size: 13px; color: var(--muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-user::before { content: "👤 "; }
.top-bar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tool-btn {
  padding: 7px 12px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--text); font-size: 13px;
  transition: background .15s, border-color .15s; white-space: nowrap;
}
.tool-btn:hover { background: var(--panel-2); border-color: var(--border); }
.tool-btn.active, .tool-btn:active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tool-btn-danger { color: var(--danger); }
.tool-btn-danger:hover { background: rgba(255,93,93,.12); border-color: var(--danger); }

/* 键盘快捷键提示 */
.kbd-shortcut-wrapper { position: relative; }
.kbd-icon-btn { font-size: 14px; padding: 7px 11px; }
.kbd-tooltip {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; min-width: 280px;
  box-shadow: var(--shadow-md); display: none; z-index: 40;
}
.kbd-shortcut-wrapper:hover .kbd-tooltip { display: block; }
.kbd-header {
  font-size: 12px; font-weight: 700; color: var(--muted);
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.kbd-grid { display: flex; flex-direction: column; gap: 6px; }
.kbd-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.kbd-key {
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: 6px;
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 11px; min-width: 54px; text-align: center; color: var(--text);
}
.kbd-desc { color: var(--text); }
.multiview-notice { color: var(--muted); font-size: 11px; margin-top: 4px; }

/* ========== 主体 ========== */
.app-body { display: flex; flex: 1; min-height: 0; width: 100%; }

/* 侧栏 */
.sidebar {
  width: 290px; min-width: 290px;
  background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.sidebar-header { padding: 18px 18px 12px; border-bottom: 1px solid var(--border); }
.sidebar-header h1 { margin: 0; font-size: 18px; font-weight: 700; }
.search-box { padding: 12px; border-bottom: 1px solid var(--border); }
.search-box input {
  width: 100%; padding: 9px 13px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--panel-2);
  color: var(--text); font-size: 13px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.channel-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 0 20px; }

/* 分组 */
.channel-group { padding: 0 8px; }
.group-title {
  padding: 14px 10px 7px; font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .8px;
  cursor: pointer; user-select: none;
}
.channel-group.collapsed .group-items-container { display: none; }
.group-items-container { display: flex; flex-direction: column; gap: 2px; }

/* 频道项 */
.channel-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  transition: background .15s; min-width: 0;
}
.channel-item:hover { background: var(--panel-2); }
.channel-item.active { background: var(--accent); }
.channel-item.active .ch-name, .channel-item.active .ch-epg-now { color: #fff; }
.channel-item.active .heart-icon { color: rgba(255,255,255,.8); }
.channel-item .ch-logo {
  width: 34px; height: 34px; object-fit: contain;
  border-radius: 8px; background: #000; flex-shrink: 0;
}
.channel-item .ch-meta { flex: 1; min-width: 0; overflow: hidden; }
.channel-item .ch-name {
  font-size: 13.5px; line-height: 1.25; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.channel-item .ch-epg-now {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; width: 100%;
}
.channel-item .ch-epg-now.scrolling {
  display: inline-block; padding-left: 100%; animation: epg-marquee 12s linear infinite;
}
.channel-item .ch-epg-now:not(.scrolling) { text-overflow: ellipsis; }
@keyframes epg-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.channel-item .heart-icon {
  font-size: 16px; color: var(--muted); cursor: pointer;
  opacity: .55; transition: all .15s; padding: 0 4px; flex-shrink: 0;
}
.channel-item .heart-icon:hover { opacity: 1; }
.channel-item .heart-icon.is-fav { color: #ff6b8b; opacity: 1; }

.empty-section-hint { padding: 10px 15px; font-size: 12px; color: var(--muted); font-style: italic; }

/* 主内容区 */
.main-content { flex: 1; min-width: 0; display: flex; background: var(--bg); }
.player-section { flex: 1; display: flex; min-width: 0; min-height: 0; }
.player-section.epg-right { flex-direction: row; }
.player-section.theater .epg-panel { display: none; }
.player-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ========== 视频容器 ========== */
.video-container {
  flex: 1; position: relative; background: #000;
  display: flex; min-height: 0; overflow: hidden;
}
.video-container video { width: 100%; height: 100%; background: #000; display: block; object-fit: contain; }
.no-signal {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 14px; pointer-events: none;
}
.video-container.playing .no-signal { display: none; }

/* 缓冲转圈 */
.spinner {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px;
  margin: -23px 0 0 -23px; border: 4px solid rgba(255,255,255,.22);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .8s linear infinite; display: none; z-index: 6;
}
.spinner.show { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 直播/回看状态徽章 */
.stream-status-badge {
  position: absolute; top: 52px; left: 14px;
  padding: 4px 11px; border-radius: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; z-index: 5;
}
.stream-status-badge.live-mode { background: var(--live); color: #fff; animation: blink 1.6s infinite; }
.stream-status-badge.timeshift-mode { background: var(--orange); color: #fff; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }

/* 返回直播按钮 */
.back-to-live {
  position: absolute; top: 52px; right: 14px;
  padding: 6px 12px; border-radius: 7px; border: none;
  background: var(--live); color: #fff; font-size: 12px; font-weight: 600;
  cursor: pointer; z-index: 5; display: none;
}

/* 频道切换浮层 (Zapper) */
.zapper-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(16, 19, 26, .82); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 26px; min-width: 180px; z-index: 9;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
body.light-theme .zapper-overlay { background: rgba(255,255,255,.92); }
.zapper-overlay.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.zapper-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: #000; }
.zapper-name { font-size: 15px; font-weight: 600; max-width: 260px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zapper-num { font-size: 12px; color: var(--accent); font-weight: 700; letter-spacing: 1px; }

/* 混合内容提示条 */
.mixed-notice {
  position: absolute; top: 0; left: 0; right: 0;
  background: rgba(58, 42, 18, .94); color: #ffce8a;
  padding: 10px 36px 10px 14px; font-size: 13px; line-height: 1.5; z-index: 12;
  border-bottom: 1px solid #5a431f; backdrop-filter: blur(4px);
}
.mixed-notice.hidden { display: none; }
.mixed-close {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: transparent; border: none; color: #ffce8a;
  font-size: 16px; padding: 4px 8px; cursor: pointer; opacity: .7;
}
.mixed-close:hover { opacity: 1; }

/* ========== 悬浮播放控制条 ========== */
.player-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 22px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s, transform .2s; pointer-events: none;
}
.video-container.show-controls .player-controls,
.video-container.paused .player-controls { opacity: 1; transform: none; pointer-events: auto; }
.pc-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px;
  border: none; background: rgba(255,255,255,.12); color: #fff;
  font-size: 15px; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.pc-btn:hover { background: rgba(255,255,255,.24); }
.vol-cluster { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vol-slider { width: 80px; accent-color: var(--accent); cursor: pointer; }
.seek-wrap { flex: 1; min-width: 60px; padding: 10px 0; cursor: pointer; }
.seek-track {
  position: relative; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.25);
}
.seek-buffer { position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: rgba(255,255,255,.4); border-radius: 3px; }
.seek-fill { position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: var(--accent); border-radius: 3px; }
.seek-thumb {
  position: absolute; top: 50%; left: 100%; width: 13px; height: 13px;
  background: #fff; border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0,0,0,.5); opacity: 0; transition: opacity .15s;
}
.seek-wrap:hover .seek-thumb { opacity: 1; }
.live-chip {
  flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 4px 9px; border-radius: 20px; white-space: nowrap;
}
.live-chip.live { background: var(--live); color: #fff; }
.live-chip.ts { background: var(--orange); color: #fff; }

/* 设置菜单 */
.settings-wrap { position: relative; flex-shrink: 0; }
.settings-menu {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  background: rgba(20, 23, 30, .97); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 6px; min-width: 180px; box-shadow: var(--shadow-md);
  display: none; flex-direction: column; z-index: 30;
}
body.light-theme .settings-menu { background: rgba(255,255,255,.98); border-color: var(--border); }
.settings-menu.open { display: flex; }
.sm-item {
  text-align: left; padding: 9px 12px; border: none; background: transparent;
  color: #fff; font-size: 13px; border-radius: 8px; display: flex;
  align-items: center; justify-content: space-between; gap: 10px;
}
body.light-theme .sm-item { color: var(--text); }
.sm-item:hover { background: rgba(255,255,255,.12); }
body.light-theme .sm-item:hover { background: var(--panel-2); }
.sm-speed { flex-direction: column; align-items: stretch; gap: 8px; }
.sm-speed > span:first-child { font-size: 12px; color: var(--muted); }
.speed-opts { display: flex; gap: 4px; flex-wrap: wrap; }
.speed-opts button {
  flex: 1; padding: 5px 0; border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: #fff; font-size: 12px; border-radius: 7px; cursor: pointer;
}
body.light-theme .speed-opts button { color: var(--text); border-color: var(--border); }
.speed-opts button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 监控面板 */
.stats-overlay {
  position: absolute; top: 14px; right: 14px; width: 280px;
  background: rgba(16, 19, 26, .96); border: 1px solid var(--border);
  border-radius: 12px; padding: 0; color: var(--text); z-index: 8;
  backdrop-filter: blur(6px); box-shadow: var(--shadow-md);
}
body.light-theme .stats-overlay { background: rgba(255,255,255,.98); }
.stats-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
}
.stats-close { cursor: pointer; color: var(--muted); font-size: 16px; }
.stats-close:hover { color: var(--text); }
.stats-body { padding: 8px 0; }
.stats-row { display: flex; justify-content: space-between; padding: 5px 14px; font-size: 12px; }
.stats-label { color: var(--muted); }
.stats-val { font-weight: 500; }

/* ========== EPG ========== */
.epg-panel { background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.player-section.epg-right .epg-panel {
  width: 340px; min-width: 340px; height: auto;
  border-top: none; border-left: 1px solid var(--border);
}
.epg-panel-header {
  padding: 12px 16px; font-size: 13px; font-weight: 700;
  color: var(--accent); border-bottom: 1px solid var(--border); letter-spacing: .5px;
}
.epg-date-picker {
  display: flex; gap: 6px; padding: 10px 12px;
  overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--border); scrollbar-width: thin;
}
.date-tab {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2);
  cursor: pointer; font-size: 12px; color: var(--muted);
}
.date-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.epg-timeline { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 20px; }
.epg-empty { padding: 30px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.epg-row {
  padding: 9px 11px; border-radius: 9px; margin-bottom: 5px;
  background: var(--panel-2); display: flex; align-items: center; gap: 10px;
  font-size: 13px; border-left: 3px solid var(--border);
}
.epg-row.epg-past { cursor: pointer; border-left-color: var(--accent-2); }
.epg-row.epg-past:hover { background: var(--accent-soft); }
.epg-row.epg-live { border-left-color: var(--ok); }
.epg-row.epg-replay { border-left-color: var(--orange); }
.epg-row.epg-future { opacity: .8; border-left-color: var(--border); }
.epg-time { font-size: 11px; color: var(--muted); flex-shrink: 0; min-width: 90px; }
.epg-blink-tag {
  background: var(--live); color: #fff; padding: 1px 6px;
  border-radius: 4px; font-size: 10px; margin-right: 6px; font-weight: 700;
  animation: blink 1.6s infinite;
}
.epg-replay-tag {
  background: var(--orange); color: #fff; padding: 1px 6px;
  border-radius: 4px; font-size: 10px; margin-right: 6px; font-weight: 700;
}
.epg-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ========== 多屏模式 ========== */
.multiview-box {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 6px; background: #000; padding: 6px; z-index: 8;
}
.multiview-slot {
  position: relative; background: #000; border-radius: 8px;
  overflow: hidden; cursor: pointer; border: 2px solid transparent;
}
.multiview-slot.active-focus { border-color: var(--accent); }
.multiview-slot .slot-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 28px;
}
.multiview-slot.has-stream .slot-placeholder { display: none; }
.multiview-slot .placeholder-plus { font-size: 36px; opacity: .5; }
.multiview-slot .multiview-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.multiview-slot .slot-close {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; display: none; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px;
}
.multiview-slot.has-stream .slot-close { display: flex; }
.multiview-slot .slot-controls {
  position: absolute; bottom: 6px; left: 6px; right: 6px;
  display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,.55);
  padding: 4px 8px; border-radius: 6px; opacity: 0; transition: opacity .15s;
}
.multiview-slot.active-focus .slot-controls { opacity: 1; }
.multiview-slot .slot-mute-btn { cursor: pointer; font-size: 14px; }
.multiview-slot .slot-volume-slider { flex: 1; height: 3px; cursor: pointer; accent-color: var(--accent); }

/* ========== Toast ========== */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: rgba(20, 23, 30, .96); color: #fff; padding: 11px 20px;
  border-radius: 12px; font-size: 13px; z-index: 200; box-shadow: var(--shadow-md);
  max-width: 80%; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  border: 1px solid var(--border);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); display: block; }

/* ========== 骨架屏 ========== */
.skeleton-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px;
}
.skeleton-logo, .skeleton-line {
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--border) 50%, var(--panel-2) 75%);
  background-size: 200% 100%; animation: skeleton 1.3s infinite; border-radius: 8px;
}
.skeleton-logo { width: 34px; height: 34px; flex-shrink: 0; }
.skeleton-line { height: 12px; flex: 1; }
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ========== 响应式 ========== */
@media (max-width: 900px) {
  .app-body { flex-direction: column; }
  .sidebar { width: 100%; height: 200px; }
  .player-section.epg-right { flex-direction: column; }
  .player-section.epg-right .epg-panel {
    width: 100%; height: 260px; border-left: none; border-top: 1px solid var(--border);
  }
  .top-bar { height: auto; padding: 8px 10px; }
  .multiview-box { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; }
}