* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f3f4f6; color: #1f2937; font-size: 14px;
}

.banner-link { display: block; line-height: 0; }
.banner { display: block; width: 100%; height: auto; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: #0f2747; border-bottom: 3px solid #1e6fd9;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .5px;
}
.brand-logo { width: 30px; height: 30px; object-fit: contain; flex: none; border-radius: 4px; }
.tools { display: flex; align-items: center; gap: 12px; }
.badge {
  background: #fef3c7; color: #92400e; padding: 2px 10px;
  border-radius: 999px; font-size: 12px;
}
.sel { font-size: 13px; color: #cbd5e1; }
.sel select {
  margin-left: 6px; padding: 4px 8px; border: 1px solid #33567f;
  border-radius: 6px; background: #16365c; color: #e2e8f0;
}

main { padding: 16px; }
.grid { display: grid; gap: 10px; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.cell {
  position: relative; background: #111827; border-radius: 8px;
  cursor: pointer; overflow: hidden; color: #e5e7eb; display: flex;
  flex-direction: column;
}
/* 视频画面区（保持 16:9），名称/状态/播放按钮等覆盖层相对它定位 */
.cell-screen {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: #111827;
}
/* 摄像头下方简介：暂显示通道名称，后期可换成真实简介文案 */
.cell-desc {
  flex: none; padding: 8px 10px; font-size: 13px; line-height: 1.5;
  color: #e5e7eb; background: #0f2747;
  border-top: 1px solid rgba(255,255,255,.08);
}
.cell:hover { outline: 2px solid #3b82f6; }
.cell.offline { opacity: 0.55; }
.cell-name {
  position: absolute; top: 6px; left: 8px; font-size: 13px;
  color: #0f2747; font-weight: 700;
  background: rgba(255,255,255,.9); padding: 2px 7px; border-radius: 4px;
}
.cell-status {
  position: absolute; bottom: 6px; right: 8px; font-size: 11px;
  background: #16a34a; color: #fff; padding: 1px 6px; border-radius: 4px; z-index: 3;
}
/* 无画面(离线) → 红底 */
.cell-status.offline { background: #dc2626; color: #fff; }
/* 中心播放按钮：默认隐藏，检测到有画面(在线)后由 JS 显示；点击在弹窗中播放，不在首页直接播放 */
.cell-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; font-size: 28px; line-height: 1;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; pointer-events: auto;
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  transition: background .15s, transform .1s;
}
.cell-play:hover { background: #1e6fd9; transform: translate(-50%, -50%) scale(1.06); }
.cell-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111827; z-index: 0; }
/* 无画面通道的封面图：默认显示，覆在视频之上、通道名之下；拉到真实画面后由 JS 隐藏 */
.cell-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: #111827; z-index: 1; display: block; pointer-events: none;
}
.cell-name, .cell-status { z-index: 2; }
.cell-err {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,.6); color: #fca5a5; font-size: 11px; padding: 4px 8px;
  border-radius: 4px; text-align: center; z-index: 3; max-width: 92%;
}

.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal.hidden, .hidden { display: none !important; }
.modal-box {
  width: min(1100px, 94vw); height: min(80vh, 720px);
  background: #fff; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
}
.player-head {
  display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid #eee;
}
.p-name { font-weight: 600; }
.tabs { display: flex; gap: 6px; margin-left: auto; }
.tab {
  border: 1px solid #d1d5db; background: #fff; padding: 5px 14px; border-radius: 6px; cursor: pointer;
}
.tab.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.close {
  border: none; background: #f3f4f6; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.playback {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; flex-wrap: wrap;
  background: #f9fafb; border-bottom: 1px solid #eee;
}
.playback input { padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 6px; }
.pb-go { background: #3b82f6; color: #fff; border: none; padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.sep { color: #6b7280; }

.stage { position: relative; flex: 1; background: #000; }
.stage video { width: 100%; height: 100%; object-fit: contain; background: #000; z-index: 0; }
/* 大窗无信号封面：默认隐藏，拉不到画面时由 JS 显示，置于视频之上但不挡控件 */
.modal-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  background: #000; z-index: 1; display: none; pointer-events: none;
}
.watermark {
  position: absolute; right: 10px; bottom: 8px; color: rgba(255,255,255,.75);
  font-size: 12px; text-shadow: 0 1px 2px #000; pointer-events: none; display: none;
}
.loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,.35);
}
#demoCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000;
}
.msg {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  background: rgba(0,0,0,.7); color: #fde68a; padding: 6px 12px; border-radius: 6px;
  font-size: 12px; max-width: 90%; text-align: center;
}

/* ===== 响应式：手机端（竖屏） ===== */
@media (max-width: 768px) {
  .topbar {
    flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px;
  }
  .brand { font-size: 15px; min-width: 0; }
  .brand-logo { width: 26px; height: 26px; }
  /* 长品牌名在小屏允许省略，避免顶栏换行过长 */
  .brand span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70vw;
  }
  .tools { gap: 8px; }
  .sel { font-size: 12px; }
  .sel select { padding: 3px 6px; }

  main { padding: 10px; }
  /* 手机端强制 2 列（2x2 分屏），覆盖桌面分屏下拉 */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px; }
  .cell-name { font-size: 12px; top: 4px; left: 5px; }
  .cell-status { font-size: 10px; bottom: 4px; right: 5px; }
  .cell-play { font-size: 30px; width: 60px; height: 60px; }
  .cell-desc { font-size: 12px; padding: 6px 8px; }

  /* 播放器在手机上全屏 */
  .modal-box {
    width: 100vw; height: 100vh; max-width: none; max-height: none;
    border-radius: 0;
  }
  .player-head { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .tabs { margin-left: 0; }
  .playback { padding: 8px 12px; gap: 6px; }
  .playback input { flex: 1 1 auto; min-width: 0; }
  .msg { font-size: 11px; }
}

@media (max-width: 420px) {
  /* 极窄屏改为单列，画面更大更易看 */
  .grid { grid-template-columns: 1fr !important; }
  .brand span { max-width: 60vw; }
}

/* ===== 仅对接 3 路摄像机：用 CSS 隐藏通道 4~20 ===== */
/* 网格严格按通道 1..20 顺序渲染，故第 4 个起的格子（nth-child(n+4)）即通道 4~20，直接隐藏 */
.grid .cell:nth-child(n+4) { display: none !important; }

/* ===== 回放 24 小时时间轴（位于播放器底部） ===== */
.timeline {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 16px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  z-index: 6; user-select: none; touch-action: none;
}
.tl-ticks { position: relative; height: 16px; margin-bottom: 4px; }
.tl-tick { position: absolute; top: 0; width: 1px; height: 6px; background: rgba(255,255,255,.4); transform: translateX(-50%); }
.tl-tick .tl-lab {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: rgba(255,255,255,.75); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tl-track {
  position: relative; height: 8px; background: rgba(255,255,255,.18);
  border-radius: 4px; cursor: pointer;
}
.tl-range { position: absolute; top: 0; height: 100%; background: rgba(77,155,255,.28); border-radius: 4px; }
.tl-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: #1e6fd9; border-radius: 4px; }
.tl-handle {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid #1e6fd9; transform: translate(-50%,-50%);
  box-shadow: 0 1px 4px rgba(0,0,0,.55); pointer-events: none;
}
.tl-readout { margin-top: 6px; font-size: 12px; color: #cbd5e1; text-align: center; font-variant-numeric: tabular-nums; }
.tl-readout span { color: #fff; font-weight: 600; }

@media (max-width: 768px) {
  .timeline { padding: 8px 12px 10px; }
  .tl-tick .tl-lab { font-size: 9px; }
  .tl-readout { font-size: 11px; }
}