/* =============================================================================
   老师手机直播控制端 —— /live-switch/
   -----------------------------------------------------------------------------
   ★ Mobile First：基准是 375px，向上适配 390 / 430 与桌面。
     核心操作（看状态 + 三个按钮）必须在**首屏**完成，不用滚动、不用缩放。
   ★ 沿用 FyLive V2 的深色品牌观感与色调词汇（ok / warn / bad / idle），
     色调由后端 tone 决定，前端不自己判断状态含义。
   ★ 不做复杂动画：老师在开播前几秒用它，动画只会碍事。
     只保留按钮按下反馈与 toast 淡入，且尊重 prefers-reduced-motion。
   ============================================================================= */

:root {
  --tc-bg:      #0b0d10;
  --tc-card:    rgba(255, 255, 255, .045);
  --tc-line:    rgba(255, 255, 255, .10);
  --tc-ink:     #e8eaec;
  --tc-ink-2:   #9aa3ad;
  --tc-gold:    #c8a96a;
  --tc-ok:      #34c759;
  --tc-warn:    #f0b429;
  --tc-bad:     #ff453a;
  --tc-idle:    #8a8a90;
  --tc-news:    #5aa9e6;
}

.tc-wrap {
  min-height: 100svh;
  background: var(--tc-bg);
  color: var(--tc-ink);
  /* 刘海屏 / 底部手势条 */
  padding:
    calc(env(safe-area-inset-top, 0px) + 14px)
    calc(env(safe-area-inset-right, 0px) + 16px)
    calc(env(safe-area-inset-bottom, 0px) + 18px)
    calc(env(safe-area-inset-left, 0px) + 16px);
  box-sizing: border-box;
  /* ★ 375px 下绝不横向滚动 */
  overflow-x: hidden;
}
.tc-main, .tc-gate { max-width: 520px; margin: 0 auto; }

/* ---- 口令闸门（未验证时页面上只有这个） ------------------------------------ */
.tc-gate { padding-top: 12vh; text-align: center; }
.tc-gate-title { font-size: 20px; color: var(--tc-gold); margin: 0; letter-spacing: .06em; }
.tc-gate-sub { font-size: 15px; color: var(--tc-ink-2); margin: 6px 0 26px; }
.tc-label { display: block; text-align: left; font-size: 13px; color: var(--tc-ink-2); margin-bottom: 6px; }
.tc-input {
  width: 100%; box-sizing: border-box; padding: 13px 14px;
  /* ★ 16px 是 iOS 不触发聚焦缩放的下限，密码框必须给足 */
  font-size: 16px;
  background: var(--tc-card); border: 1px solid var(--tc-line); border-radius: 10px;
  color: var(--tc-ink);
}
.tc-gate-err { color: var(--tc-bad); font-size: 13.5px; margin: 10px 0 0; text-align: left; }
.tc-btn-gate { margin-top: 18px; }

/* ---- 顶部 ------------------------------------------------------------------ */
.tc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tc-brand { font-size: 12.5px; letter-spacing: .16em; color: var(--tc-gold); }
.tc-title { font-size: 24px; margin: 2px 0 0; font-weight: 700; letter-spacing: .01em; }
.tc-leave-form { margin: 0; }
.tc-leave {
  background: transparent; border: 1px solid var(--tc-line); color: var(--tc-ink-2);
  border-radius: 8px; padding: 8px 12px; font-size: 12.5px; min-height: 36px;
}

/* ---- 状态卡 ---------------------------------------------------------------- */
.tc-cards {
  display: grid; gap: 10px; margin: 18px 0 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tc-card {
  background: var(--tc-card); border: 1px solid var(--tc-line);
  border-radius: 12px; padding: 12px 14px; min-width: 0;
}
.tc-k { font-size: 12px; color: var(--tc-ink-2); letter-spacing: .04em; }
/* ★ 状态值要大 —— 老师是扫一眼，不是读一段 */
.tc-v {
  font-size: 20px; font-weight: 700; margin-top: 4px; line-height: 1.25;
  overflow-wrap: anywhere;
}
.tc-v[data-tone="ok"]   { color: var(--tc-ok); }
.tc-v[data-tone="warn"] { color: var(--tc-warn); }
.tc-v[data-tone="bad"]  { color: var(--tc-bad); }
.tc-v[data-tone="idle"] { color: var(--tc-idle); }
.tc-v[data-tone="news"] { color: var(--tc-news); }

/* ---- 三个大按钮 ------------------------------------------------------------ */
.tc-actions { display: grid; gap: 12px; }
.tc-btn {
  width: 100%; box-sizing: border-box;
  /* ★ 触摸目标：56px 远高于 44px 的最低建议，老师可能在赶时间 */
  min-height: 56px; padding: 15px 18px;
  font-size: 17px; font-weight: 700; letter-spacing: .02em;
  border-radius: 12px; border: 1px solid transparent; color: #0b0d10;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, opacity .12s ease;
}
.tc-btn:active:not([disabled]) { transform: scale(.985); }
.tc-btn[disabled] { opacity: .38; cursor: not-allowed; }
.tc-btn:focus-visible { outline: 2px solid var(--tc-gold); outline-offset: 3px; }

.tc-btn-live { background: var(--tc-ok); }
.tc-btn-news { background: var(--tc-news); }
.tc-btn-auto { background: transparent; border-color: var(--tc-line); color: var(--tc-ink); }
.tc-btn-gate { background: var(--tc-gold); width: 100%; }

/* 处理中：按钮变灰并显示进行中文案，同时 disabled 防重复提交 */
.tc-btn[data-busy="1"] { opacity: .55; }

.tc-hint { font-size: 13.5px; color: var(--tc-ink-2); margin: 4px 2px 0; min-height: 1.2em; }
.tc-hint[data-tone="bad"]  { color: var(--tc-bad); }
.tc-hint[data-tone="warn"] { color: var(--tc-warn); }

/* 去哪拿推流信息 —— 只是指引，页面上没有任何凭据 */
.tc-creds { font-size: 12.5px; color: var(--tc-ink-2); opacity: .8; margin: 10px 2px 0; }

/* ---- 底部 ------------------------------------------------------------------ */
.tc-foot {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--tc-line);
  font-size: 12px; color: var(--tc-ink-2);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.tc-foot b { font-variant-numeric: tabular-nums; color: var(--tc-ink-2); font-weight: 600; }
.tc-dot { opacity: .4; }
.tc-legacy { opacity: .6; }
#tcConn[data-tone="ok"]   { color: var(--tc-ok); }
#tcConn[data-tone="warn"] { color: var(--tc-warn); }
#tcConn[data-tone="bad"]  { color: var(--tc-bad); }

/* ---- Toast ----------------------------------------------------------------- */
.tc-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  max-width: min(88vw, 460px); box-sizing: border-box;
  padding: 12px 18px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  background: #1b1f24; color: var(--tc-ink); border: 1px solid var(--tc-line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45); z-index: 50;
  animation: tcIn .16s ease-out;
}
.tc-toast[data-tone="ok"]  { border-color: rgba(52, 199, 89, .55);  color: var(--tc-ok); }
.tc-toast[data-tone="bad"] { border-color: rgba(255, 69, 58, .55);  color: var(--tc-bad); }
.tc-toast[data-tone="warn"]{ border-color: rgba(240, 180, 41, .55); color: var(--tc-warn); }
@keyframes tcIn { from { opacity: 0; transform: translate(-50%, 8px); }
                  to   { opacity: 1; transform: translate(-50%, 0); } }

/* ---- 更宽的屏：状态卡排成一行，按钮不要拉得过宽 ---------------------------- */
@media (min-width: 560px) {
  .tc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .tc-wrap { padding-top: 36px; }
  .tc-title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-btn, .tc-toast { transition: none !important; animation: none !important; }
}

/* ---- 修改访问密码 ----------------------------------------------------------
   默认折叠。老师最常做的是上播/下播，改密码是偶尔为之，
   不能跟三个大按钮抢注意力，但也不能藏到找不到。 */
.tc-pwd { margin-top: 26px; }
.tc-pwd-box {
  border: 1px solid var(--tc-line); border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.tc-pwd-sum {
  cursor: pointer; list-style: none; padding: 12px 14px;
  font-size: 13.5px; color: var(--tc-ink-2); min-height: 44px;
  display: flex; align-items: center; gap: 8px;
}
.tc-pwd-sum::-webkit-details-marker { display: none; }
.tc-pwd-sum::before { content: "＋"; color: var(--tc-gold); font-size: 15px; line-height: 1; }
.tc-pwd-box[open] .tc-pwd-sum::before { content: "－"; }
.tc-pwd-box[open] .tc-pwd-sum { border-bottom: 1px solid var(--tc-line); }
.tc-pwd-form { padding: 14px; }
.tc-pwd-form .tc-label { margin-top: 12px; }
.tc-pwd-form .tc-label:first-of-type { margin-top: 0; }
.tc-pwd-hint { font-size: 12.5px; color: var(--tc-ink-2); opacity: .85; margin: 12px 0 0; text-align: left; }
.tc-pwd-ok  { color: var(--tc-ok);  font-size: 13.5px; margin: 12px 14px 0; text-align: left; }
.tc-pwd-err { color: var(--tc-bad); font-size: 13.5px; margin: 12px 14px 0; text-align: left; }

/* ---- 老师休息（第三个主按钮）与休息画面预览 --------------------------------
   ★ 按钮与另外三个**同宽同高**，只有配色不同 —— 顺序是产品定死的：
     上播 / 下播 / 休息 / 自动。 */
.tc-btn-rest {
  background: linear-gradient(180deg, rgba(200, 169, 106, .18), rgba(200, 169, 106, .10));
  border: 1px solid rgba(200, 169, 106, .45);
  color: var(--tc-gold);
}
/* 当前正处于休息态：给一个明确的 active 外观，老师一眼知道现在在播休息 */
.tc-btn-rest[data-active="1"] {
  background: var(--tc-gold);
  color: #1a1408;
  border-color: var(--tc-gold);
  font-weight: 700;
}
.tc-btn-rest:disabled { opacity: .45; }

.tc-rest { margin-top: 22px; text-align: left; }
.tc-rest-k { font-size: 13px; color: var(--tc-ink-2); margin-bottom: 8px; }
.tc-rest-img {
  display: block; width: 100%; height: auto; max-width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--tc-line); border-radius: 10px; background: #000;
}
.tc-rest-ok { font-size: 12.5px; color: var(--tc-ink-2); margin: 8px 2px 0; }
/* 未配置：说清楚找谁，不要只写一句"无" */
.tc-rest-empty {
  border: 1px dashed var(--tc-line); border-radius: 10px;
  padding: 22px 14px; text-align: center;
  font-size: 13.5px; color: var(--tc-ink-2);
  background: rgba(255, 255, 255, .02);
}

/* ---- OBS 推流信息（2026-09-12）---------------------------------------------
   ★★ 产品决定：老师登录后可以直接看到推流地址与推流码。
     推流码**默认打码**，点「显示」才向服务器要（每次都写审计）。
   ★ 地址与推流码都用等宽字体：老师要肉眼核对自己 OBS 里填的对不对，
     比例字体下 l / 1 / I、O / 0 分不清。
   ★ 整块允许横向滚动而不是换行：推流码换行后没法一眼选中复制。 */
.tc-obs { margin-top: 26px; text-align: left; }
.tc-obs-h {
  font-size: 13px; color: var(--tc-ink-2); margin: 0 0 10px;
  letter-spacing: .04em; font-weight: 600;
}
.tc-obs-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--tc-card); border: 1px solid var(--tc-line); border-radius: 10px;
}
.tc-obs-k { font-size: 12.5px; color: var(--tc-ink-2); flex: 0 0 100%; }
.tc-obs-v {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px; color: var(--tc-ink);
  overflow-x: auto; white-space: nowrap;
  /* ★ 让老师能直接长按选中复制（部分安卓浏览器剪贴板 API 不可用） */
  -webkit-user-select: all; user-select: all;
}
.tc-obs-key[data-masked="1"] { color: var(--tc-ink-2); letter-spacing: .12em; }

/* 小按钮：44px 触摸高度是硬要求，老师多半单手在手机上操作 */
.tc-mini {
  flex: 0 0 auto; min-height: 44px; padding: 0 14px;
  font-size: 13px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: var(--tc-ink);
  border: 1px solid var(--tc-line);
}
.tc-mini:disabled { opacity: .4; cursor: default; }
.tc-obs-note { font-size: 12.5px; margin: 6px 2px 0; color: var(--tc-ink-2); min-height: 1em; }
.tc-obs-note[data-tone="ok"]   { color: var(--tc-ok); }
.tc-obs-note[data-tone="warn"] { color: var(--tc-warn); }
.tc-obs-note[data-tone="bad"]  { color: var(--tc-bad); }

/* ★★ 自动重连警告。共享凭据模式的固有限制，必须显眼 ——
   藏起来的结果就是老师照旧开着自动重连，下一位永远连不上。 */
.tc-obs-warn {
  font-size: 12.5px; line-height: 1.6; margin: 12px 0 0;
  padding: 11px 13px; border-radius: 10px;
  color: var(--tc-warn);
  background: rgba(240, 180, 41, .07);
  border: 1px solid rgba(240, 180, 41, .30);
}
.tc-obs-warn b { display: block; margin-bottom: 4px; }

/* ---- 老师推流入口占用状态 + 强制踢下线 ------------------------------------
   ★ 只显示「有没有人」，绝不显示「是谁」—— 所有老师共用一把凭据，
     系统根本不知道连上来的是哪位。 */
.tc-ingest { margin-top: 22px; text-align: left; }
.tc-ingest-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 11px 13px;
  background: var(--tc-card); border: 1px solid var(--tc-line); border-radius: 10px;
}
.tc-ingest-held { font-size: 12.5px; color: var(--tc-ink-2); margin: 8px 2px 0; min-height: 1em; }
.tc-ingest-rule { font-size: 12.5px; line-height: 1.6; color: var(--tc-ink-2); margin: 8px 2px 14px; }
.tc-ingest-note { font-size: 12.5px; margin: 8px 2px 0; color: var(--tc-ink-2); min-height: 1em; }
.tc-ingest-note[data-tone="ok"]   { color: var(--tc-ok); }
.tc-ingest-note[data-tone="warn"] { color: var(--tc-warn); }
.tc-ingest-note[data-tone="bad"]  { color: var(--tc-bad); }

/* ★★★ 危险按钮：外观必须与四个常规按钮明确区分开 ——
   它会打断另一位老师正在进行的直播，不能长得像「下播」那样顺手。 */
.tc-btn-danger {
  background: rgba(255, 69, 58, .10);
  border: 1px solid rgba(255, 69, 58, .55);
  color: var(--tc-bad);
  font-weight: 700;
}
.tc-btn-danger:disabled { opacity: .35; }
.tc-btn-danger[data-busy="1"] { opacity: .6; }

/* ===========================================================================
   模式：手动 / 自动（2026-09-16）
   ---------------------------------------------------------------------------
   ★★★ 必须显式给背景与文字颜色。.tc-btn 基类是给「上播/下播」那种实心彩色
     按钮定的，它写死了 color:#0b0d10（近黑）并且**不设** background ——
     只挂 .tc-btn 而不给背景，就是暗色卡片上的近黑文字，几乎看不见。
     旧的「恢复自动」按钮靠 .tc-btn-auto 补了这三行，换成两个模式按钮时
     这条一起漏掉了，这里补上。
   ★ 模式是辅助动作：比主按钮矮一档、并排放，视觉上明确低一级。
   ★ 当前所在的模式用 data-active 标出来（金色描边），老师**一眼**看得出
     自己在哪个模式 —— 这正是从单个「恢复自动」改成两个按钮的全部理由。
   =========================================================================== */
.tc-actions-mode {
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 10px;
}
.tc-mode-label {
  margin: 0; font-size: 13.5px; color: var(--tc-ink-2);
  letter-spacing: .04em; white-space: nowrap;
}
.tc-btn-mode {
  min-height: 44px; padding: 10px 14px;
  font-size: 15px; font-weight: 600;
  background: rgba(255, 255, 255, .06);
  border-color: var(--tc-line);
  color: var(--tc-ink);
}
.tc-btn-mode[data-active="1"] {
  border-color: var(--tc-gold);
  color: var(--tc-gold);
  background: rgba(200, 169, 106, .10);
}
/* 当前就在这个模式 → 按钮 disabled。此时不要用「不可用」的灰，
   它不是坏了，是"你已经在这儿了"，所以保持金色描边、只压一点透明度。 */
.tc-btn-mode[disabled][data-active="1"] { opacity: .9; }
.tc-actions-mode .tc-hint { grid-column: 1 / -1; }

/* ===========================================================================
   音乐网站入口（2026-09-16）
   ---------------------------------------------------------------------------
   ★★★ 刻意**不做成按钮**。它不是开关、没有状态、点了也不改变任何直播参数 ——
     它只是「打开一个网址」。做成大按钮会让老师以为那是个功能开关，
     跟上面「手动/自动」混淆；真出事的时候多一秒犹豫都是代价。
   ⇒ 所以是一排轻量胶囊入口：比 .tc-mini 还轻，挨着标题横排，会自动换行。
   ★ 仍然保持 44px 的触摸高度 —— 视觉可以轻，手指目标不能缩水。
   ★ 只有一条时就只占一条的宽度，不铺满、不留空位。
   =========================================================================== */
.tc-actions-music { gap: 6px; }
.tc-music-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 2px;
}
.tc-music-link {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  border-radius: 999px;
  border: 1px solid var(--tc-line);
  background: rgba(255, 255, 255, .04);
  color: var(--tc-ink-2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
/* ★ 右上角的小箭头：不写字也能说明「会跳到站外、开新标签」。 */
.tc-music-link::after {
  content: "↗";
  margin-left: 6px; font-size: 12px; opacity: .65;
}
.tc-music-link:hover,
.tc-music-link:focus-visible {
  color: var(--tc-ink);
  border-color: rgba(200, 169, 106, .55);
  background: rgba(200, 169, 106, .08);
}
.tc-music-link:focus-visible { outline: 2px solid var(--tc-gold); outline-offset: 2px; }
.tc-music-link:active { transform: scale(.97); }