/* ==========================================================================
   NZEP ARCHIVE · nztv.css —— NZTV 频道页（维基风格外壳 + 电视式播放器）
   只在 nztv.html 里加载；资料库其它页面不受影响。
   ========================================================================== */

/* ---------------------------------------------------------------- 页面骨架 */
.tv-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .tv-wrap { grid-template-columns: 1fr; } }

.tv-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.tv-head .tv-logo {
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: .16em; text-indent: .16em;
  border: 1px solid var(--border); padding: .1rem .5rem; background: var(--bar); color: #fff;
}
.tv-head .tv-tag { font-size: .7rem; color: var(--c-gray); letter-spacing: .18em; }
.tv-head .sp { flex: 1 1 auto; }

/* ------------------------------------------------------------ 播放器舞台 */
.tv-stage {
  position: relative; background: #0b0b0c; border: 1px solid var(--border);
  aspect-ratio: 16 / 9; overflow: hidden;
}
.tv-stage video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.tv-stage.idle video { visibility: hidden; }

/* 舞台中央的大按钮 / 状态提示 */
.tv-center {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  color: #f2f2ef; background: linear-gradient(180deg, rgba(12,12,13,.55), rgba(12,12,13,.85)); padding: 1rem;
}
.tv-center.hide { display: none; }
.tv-center .big {
  width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.tv-center .big:hover { transform: scale(1.06); background: rgba(255,255,255,.16); }
.tv-center .t1 { font-family: var(--serif); font-size: 1.1rem; letter-spacing: .1em; margin-bottom: .7rem; }
.tv-center .t2 { font-size: .78rem; color: #b8b8b2; margin-top: .7rem; line-height: 1.7; }
.tv-center .count { font-family: var(--mono); font-size: .9rem; color: #fff; margin-top: .5rem; }

/* 左上角状态徽标 */
.tv-flag {
  position: absolute; left: .6rem; top: .6rem; z-index: 3; display: flex; align-items: center; gap: .35rem;
  padding: .22rem .55rem; font-size: .7rem; letter-spacing: .12em; color: #fff; background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.25);
}
.tv-flag i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--bad); display: block; }
.tv-flag.live i { animation: tv-pulse 1.4s var(--ease) infinite; }
.tv-flag.soon { color: #d8d8d2; }
.tv-flag.soon i { background: var(--warn); }
.tv-flag.over i { background: #6b6b6b; }
/* 回看：已播完的历史节目，绿色表示"随时可看" */
.tv-flag.replay { color: #eef6ee; }
.tv-flag.replay i { background: var(--ok); }
@keyframes tv-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* 右上角：时效提示 */
.tv-watermark {
  position: absolute; right: .6rem; top: .6rem; z-index: 3; font-family: var(--mono); font-size: .68rem;
  color: rgba(255,255,255,.75); background: rgba(0,0,0,.5); padding: .18rem .45rem;
}

/* 自绘控制条 */
.tv-ctl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: .35rem .5rem .45rem;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72) 42%);
  opacity: 0; transition: opacity .18s var(--ease); pointer-events: none;
}
.tv-stage:hover .tv-ctl, .tv-stage.show-ctl .tv-ctl { opacity: 1; pointer-events: auto; }
.tv-ctl .row { display: flex; align-items: center; gap: .5rem; color: #ececea; }
.tv-ctl button {
  border: 0; background: none; color: #ececea; cursor: pointer; padding: .15rem; display: grid; place-items: center;
}
.tv-ctl button:hover { color: #fff; }
.tv-ctl .time { font-family: var(--mono); font-size: .72rem; color: #d8d8d2; }
.tv-ctl .sp { flex: 1 1 auto; }
.tv-ctl .live-btn {
  font: inherit; font-size: .7rem; letter-spacing: .1em; padding: .15rem .5rem;
  border: 1px solid rgba(255,255,255,.35); background: none; color: #fff;
}
.tv-ctl .live-btn.on { background: var(--bad); border-color: var(--bad); }
.tv-ctl input[type=range] { width: 5rem; accent-color: #fff; }

/* 进度条：已看 / 已播出 / 未播出 三段 */
.tv-bar { position: relative; height: 14px; cursor: pointer; display: flex; align-items: center; }
.tv-bar .track { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,.22); }
.tv-bar .aired { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.42); }
.tv-bar .played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--bad); }
.tv-bar .future {
  position: absolute; right: 0; top: 0; bottom: 0; width: 100%;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 3px, transparent 3px 7px);
}
.tv-bar .knob {
  position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.tv-bar:hover .track { height: 6px; }

/* ------------------------------------------------------------ 节目信息区 */
.tv-meta { border: 1px solid var(--border); border-top: 0; padding: .8rem .9rem; background: var(--bg-subtle); }
.tv-meta h2 { margin: 0 0 .35rem; font-family: var(--serif); font-size: 1.15rem; }
.tv-meta .desc { font-size: .82rem; color: var(--text); margin: 0 0 .5rem; white-space: pre-wrap; }
.tv-meta .line { font-size: .74rem; color: var(--c-gray); display: flex; gap: .9rem; flex-wrap: wrap; }
.tv-meta .line b { color: var(--link); font-weight: 400; }
.tv-note {
  margin-top: .6rem; font-size: .74rem; color: var(--warn); background: var(--warn-bg);
  border: 1px solid #e8d9a8; padding: .4rem .6rem;
}

/* ------------------------------------------------------------ 右侧节目单 */
.tv-side { border: 1px solid var(--border); background: var(--bg); }
.tv-side .head {
  padding: .45rem .7rem; background: var(--bg-alt); border-bottom: 1px solid var(--border-soft);
  font-size: .8rem; display: flex; align-items: center; gap: .5rem;
}
.tv-side .head .sp { flex: 1 1 auto; }
.tv-slot { display: flex; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--border-faint); align-items: baseline; }
.tv-slot:last-child { border-bottom: 0; }
.tv-slot .at { font-family: var(--mono); font-size: .74rem; color: var(--c-gray); flex: 0 0 3.2rem; }
.tv-slot .nm { flex: 1 1 auto; font-size: .82rem; }
.tv-slot.on { background: var(--hl-pink); }
.tv-slot.on .nm { font-weight: 700; }
.tv-slot .st { font-size: .68rem; color: var(--c-gray); }
.tv-empty { padding: 1rem .7rem; font-size: .78rem; color: var(--c-gray); text-align: center; }

/* ------------------------------------------------------------ 月份切换 */
.tv-months { display: flex; gap: .35rem; flex-wrap: wrap; margin: .1rem 0 .7rem; }
.tv-months button {
  font: inherit; font-size: .74rem; padding: .2rem .55rem; cursor: pointer;
  border: 1px solid var(--border-soft); background: #fff; color: var(--text);
}
.tv-months button.on { background: var(--bar); color: #fff; border-color: var(--bar); }

/* ------------------------------------------------------------ 历史节目网格 */
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .8rem; }
.tv-card { border: 1px solid var(--border-soft); background: #fff; cursor: pointer; transition: border-color .16s var(--ease), transform .16s var(--ease); }
.tv-card:hover { border-color: var(--link); transform: translateY(-2px); }
.tv-card .cv { position: relative; aspect-ratio: 16 / 9; background: #17171a; overflow: hidden; }
.tv-card .cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-card .cv .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #6f6f6f; font-family: var(--mono); font-size: .7rem; }
.tv-card .cv .badge {
  position: absolute; left: .35rem; top: .35rem; font-size: .64rem; letter-spacing: .06em;
  padding: .1rem .35rem; background: rgba(0,0,0,.66); color: #fff;
}
.tv-card .cv .badge.live { background: var(--bad); }
.tv-card .cv .badge.soon { background: var(--warn); }
.tv-card .cv .badge.replay { background: rgba(40,90,50,.82); }
/* 节目记录还在、视频文件却在服务器上没了：整张卡置灰 + 明确标注，
   不再给一个点进去必然 404 的入口（2026-10-04 加） */
.tv-card .cv .badge.gone { background: rgba(90,90,96,.92); }
.tv-card.gone { opacity: .62; cursor: not-allowed; }
.tv-card.gone:hover { border-color: var(--border-soft); transform: none; }
.tv-card.gone .bd b { color: var(--c-gray); }
/* 卡片右上角的复制链接：平时淡一点，指着卡片才明显 */
.tv-copybtn {
  position: absolute; right: .35rem; top: .35rem; z-index: 2; cursor: pointer;
  font: inherit; font-size: .64rem; padding: .12rem .38rem; color: #fff;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.3); opacity: .78;
}
.tv-card:hover .tv-copybtn { opacity: 1; background: rgba(0,0,0,.78); }
.tv-card .bd { padding: .5rem .6rem; }
.tv-card .bd b { display: block; font-size: .85rem; font-weight: 400; margin-bottom: .25rem; }
.tv-card .bd .m { font-size: .7rem; color: var(--c-gray); font-family: var(--mono); }
.tv-day { margin: .9rem 0 .4rem; font-size: .78rem; color: var(--c-gray); border-bottom: 1px solid var(--border-faint); padding-bottom: .25rem; }

/* ------------------------------------------------------------ 后台（编排） */
.tv-admin { margin-top: 1.1rem; }
.tv-admin .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 640px) { .tv-admin .grid2 { grid-template-columns: 1fr; } }
.tv-up { border: 1.5px dashed var(--border-soft); padding: .8rem; text-align: center; cursor: pointer; background: var(--bg-subtle); }
.tv-up:hover { border-color: var(--link); }
.tv-up .nm { font-size: .78rem; color: var(--c-gray); }
.tv-upbar { height: 6px; background: var(--border-faint); margin-top: .6rem; display: none; }
.tv-upbar.on { display: block; }
.tv-upbar i { display: block; height: 100%; width: 0; background: var(--link); transition: width .2s var(--ease); }
/* 上传中的实时状态：字节 / 百分比 / 速度 / 约剩多久 */
.tv-upstat { font-family: var(--mono); font-size: .72rem; color: var(--c-gray); margin-top: .3rem; min-height: 1rem; }
/* 上次没传完的分片提示（可以接着传 / 可以放弃） */
.tv-resume { display: none; }
.tv-resume.on {
  display: block; margin-top: .5rem; font-size: .74rem; padding: .4rem .6rem;
  background: var(--warn-bg); border: 1px solid #e8d9a8; color: var(--text);
}
.tv-resume b { font-weight: 700; }
.tv-resume .tv-mini { margin-left: .4rem; }
.tv-local { margin-top: .5rem; font-size: .72rem; color: var(--c-gray); }
.tv-local b { color: var(--link); font-weight: 400; }
/* 顶栏右侧的小按钮（复制频道链接） */
.tv-ghost {
  font: inherit; font-size: .72rem; padding: .2rem .55rem; cursor: pointer;
  border: 1px solid var(--border-soft); background: #fff; color: var(--text);
}
.tv-ghost:hover { border-color: var(--link); color: var(--link); }
.tv-row { display: flex; gap: .6rem; align-items: center; padding: .5rem .1rem; border-bottom: 1px solid var(--border-faint); flex-wrap: wrap; }
.tv-row .at { font-family: var(--mono); font-size: .74rem; color: var(--c-gray); flex: 0 0 8.6rem; }
.tv-row .nm { flex: 1 1 10rem; font-size: .82rem; }
.tv-row .ops { display: flex; gap: .3rem; flex-wrap: wrap; }
.tv-mini { font: inherit; font-size: .7rem; padding: .12rem .4rem; border: 1px solid var(--border-soft); background: #fff; cursor: pointer; }
.tv-mini:hover { border-color: var(--link); color: var(--link); }
.tv-mini.danger:hover { border-color: var(--bad); color: var(--bad); }
.tv-mini:disabled { opacity: .45; cursor: not-allowed; }
.tv-mini:disabled:hover { border-color: var(--border-soft); color: inherit; }
.tv-tagline { font-size: .7rem; padding: .05rem .3rem; border: 1px solid var(--border-soft); }
.tv-tagline.on { border-color: var(--ok); color: var(--ok); }
.tv-tagline.off { border-color: var(--bad); color: var(--bad); }

/* 触屏（手机与平板）：控制条按钮原来只有 23×23，手指按不准。
   注意别把按钮撑得太大——一排放不下会换行，控制条就会盖住大半个视频。 */
@media (hover: none) {
  .tv-ctl button { min-width: 2.2rem; min-height: 2.2rem; }
  .tv-ctl button svg { width: 20px; height: 20px; }
  .tv-ctl .live-btn { min-height: 2rem; padding: .25rem .5rem; }
  .tv-ghost { min-height: 2.3rem; padding: .35rem .7rem; }
  .tv-mini { min-height: 2.1rem; padding: .3rem .55rem; }
  .tv-copybtn { min-height: 1.9rem; padding: .25rem .5rem; }
  .tv-months button { min-height: 2.2rem; padding: .3rem .65rem; }
  .tv-slot, .tv-row { min-height: 2.6rem; }
}

/* 手机上：控制条只占一行（音量滑杆收起来，需要的用手机侧键），
   并且默认不常显——点一下视频才出现，3 秒后自动收起，别挡着画面 */
@media (max-width: 700px) {
  .tv-ctl { opacity: 0; pointer-events: none; transition: opacity .18s var(--ease); }
  .tv-stage.show-ctl .tv-ctl { opacity: 1; pointer-events: auto; }
  .tv-stage:hover .tv-ctl { opacity: 1; pointer-events: auto; }
  .tv-ctl .row { flex-wrap: nowrap; gap: .3rem; overflow: hidden; }
  .tv-ctl input[type=range] { display: none; }
  .tv-ctl .time { font-size: .72rem; white-space: nowrap; }
  .tv-ctl .live-btn { font-size: .68rem; letter-spacing: .04em; padding: .2rem .4rem; }
  .tv-grid { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  .tv-row .at { flex: 0 0 100%; }
  .tv-ghost { min-height: 2.4rem; padding: .35rem .7rem; }
  .tv-copybtn { min-height: 1.9rem; padding: .25rem .5rem; }
  .tv-mini { min-height: 2.1rem; padding: .3rem .55rem; }
  .tv-months button { min-height: 2.2rem; padding: .3rem .65rem; }
}