/* ============================================================
 * tv.css — 安卓电视大屏适配层（在 screen.css 之后加载，覆盖其规则）
 * 目标设备：4K（3840×2160）/ 1080P 安卓电视，浏览器全屏常驻展示
 *
 * 适配要点：
 *   1. 固定 1920×1080 画布 + transform 等比缩放 → 任意分辨率/DPI 满屏且版式一致
 *   2. --tv-boost 整体放大字号，--tv-num-boost 二次放大关键数字
 *   3. --tv-safe 预留过扫描安全边（电视常裁掉画面外圈 2%~5%）
 *   4. 去掉鼠标交互依赖（隐藏光标、禁用 hover 特效）
 *   ⚠ 本文件与原项目完全隔离，不影响 wuzhu_live_dash 任何文件
 * ============================================================ */
:root{
  --tv-boost: 1.18;        /* 全局字号放大系数（远距离可读性） */
  --tv-num-boost: 1.08;    /* 关键数字二次放大 */
  --tv-safe: 1;            /* 过扫描安全边距：4K 电视默认点对点显示，留 1（即不留黑边）。
                                若你的电视裁掉了画面外圈，把它改成 0.98 */
  --tv-scale: 1;           /* 由 layout.js 的 fit() 实时写入（相对设计画布的缩放比） */
  --tv-base: 16px;         /* 设计画布基准字号：1920×1080 用 16px，3840×2160 原生模式用 32px */
  --tv-k: 1;               /* 相对 1080p 设计的总体放大倍数 = base/16 × scale */
}

/* 基准字号由 fit() 决定：4K 电视上基准翻倍，画布也翻倍，
   此时缩放比为 1 —— 元素落在整像素上，等价于「原生 4K 渲染」而非放大 1080p */
html{font-size:calc(var(--tv-base,16px) * var(--tv-boost))}
html,body{overflow:hidden;background:#000}
body{cursor:none;-webkit-tap-highlight-color:transparent;user-select:none}

/* 背景层铺满真实屏幕；网格疏密跟随缩放比，避免 4K 下网格显得过粗 */
#bg{inset:0}
/* 背景网格在 #wrap 之外，跟随总体放大倍数（含 4K 基准翻倍） */
#grid{background-size:calc(64px * var(--tv-k,1)) calc(64px * var(--tv-k,1))}

/* 固定画布 + 居中缩放（translate 必须在 scale 之前，保证以中心为原点） */
#wrap{
  position:fixed;left:50%;top:50%;
  width:1920px;height:1080px;margin:0;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:50% 50%;
  will-change:transform;
}

/* ===== 电视端可读性增强 ===== */
/* 标题 */
.ttl{letter-spacing:.7rem;filter:drop-shadow(0 0 1.6rem var(--title-glow))}
/* KPI 数值与指标数字：加粗 + 更强辉光，3 米外仍清晰 */
.kpi .vl,.st-vl,.rank .v,.scroll .am,.pg-hd b{
  font-size:calc(1.55rem * var(--tv-num-boost));
  font-weight:800;
  text-shadow:0 0 1rem var(--title-glow),0 0 2.2rem var(--title-glow);
}
.st-vl{font-size:calc(1.15rem * var(--tv-num-boost))}
.rank .v,.scroll .am{font-size:calc(.85rem * var(--tv-num-boost))}
.pg-hd b{font-size:calc(.95rem * var(--tv-num-boost))}
.kpi .lb,.st-lb{font-weight:600}
/* 面板标题与正文描边，提升暗背景下的对比度 */
.pt{text-shadow:0 0 .5rem rgba(0,0,0,.65)}
.rank .nm,.scroll .dt,.scroll .ci,.pg-hd,.hl,.hr{text-shadow:0 0 .45rem rgba(0,0,0,.6)}

/* ===== 去掉鼠标交互依赖 ===== */
.kpi:hover::after{opacity:0}
.st-cell:hover{border-color:var(--border);box-shadow:none}
.hr .nav a:hover{color:var(--text-dim);border-color:transparent}

/* ===== 电视状态指示（左上角 LIVE） ===== */
.tv-st{
  display:inline-flex;align-items:center;gap:.45rem;
  color:var(--primary);font-size:.72rem;letter-spacing:.14rem;font-weight:600;
  padding:.1rem .7rem;border:1px solid var(--border);border-radius:1rem;
  background:var(--hot);
}
.tv-st::before{
  content:"";width:.42rem;height:.42rem;border-radius:50%;
  background:var(--down);box-shadow:0 0 .5rem var(--down);
  animation:tvblink 2s ease-in-out infinite;
}
@keyframes tvblink{0%,100%{opacity:1}50%{opacity:.25}}
.tv-st.err{color:var(--warn);border-color:var(--warn)}
.tv-st.err::before{background:var(--warn);box-shadow:0 0 .5rem var(--warn);animation:none}

/* 连接提示：电视上放大并避开安全边 */
#conn{left:2.2rem;bottom:1.4rem;font-size:.8rem;color:var(--text-dim)}

/* ============================================================
 * 以下为改版新增三个模块的样式
 * ============================================================ */

/* ===== 1. 实时租赁订单：姓名 + 手机号 + 车型（三列） ===== */
.scroll .row{grid-template-columns:6rem 9.5rem 1fr;gap:.6rem;font-size:.82rem}
.scroll .row .nm{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02rem}
.scroll .row .ph{color:var(--primary-soft);font-size:.8rem;white-space:nowrap;letter-spacing:.02rem;
  font-family:"DIN Alternate",Consolas,monospace;font-variant-numeric:tabular-nums;opacity:.92}
.scroll .row .ml{color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 2. 覆盖城市：紧凑数字行 + 全量城市标签 ===== */
.cv-head{display:flex;align-items:baseline;gap:.3rem;margin:.05rem 0 .4rem}
.cv-num{font-size:1.5rem;font-weight:800;line-height:1.15;color:var(--primary-soft);
  font-family:"DIN Alternate","Bahnschrift",Impact,sans-serif;
  text-shadow:0 0 1rem var(--title-glow),0 0 2.2rem var(--title-glow)}
.cv-unit{font-size:.66rem;color:var(--text-dim);font-weight:600}
.cv-cap{margin-left:auto;font-size:.66rem;color:var(--text-dim);letter-spacing:.24rem;
  text-shadow:0 0 .45rem rgba(0,0,0,.6)}
/* 全量城市用等宽网格铺满：10 列 × 12 行，正好容纳 115 个城市并留出余量。
   行高/列宽/间距统一，铺满模块但不拥挤；超长城市名末尾省略。 */
.cv-list{
  flex:1;min-height:0;overflow:hidden;
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));
  gap:.3rem;align-content:start;
}
.cv-item{
  font-size:.62rem;color:var(--text-dim);
  padding:.14rem .18rem;border-radius:.34rem;
  border:1px solid var(--border);background:var(--hot);
  text-align:center;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .35s ease,border-color .35s ease,background .35s ease;
}
.cv-item.on{color:#04121f;font-weight:700;border-color:transparent;
  background:linear-gradient(180deg,var(--warn),#ff8a00);box-shadow:0 0 .9rem rgba(255,176,32,.5)}

/* ===== 3. 本月线上平台成交数量：五条平台进度条 + 共用百分比横轴 ===== */
.hp-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:.42rem}
.hp-row{display:grid;grid-template-columns:5rem 1fr;gap:.6rem;align-items:center}
.hp-name{font-size:.8rem;color:var(--text-dim);letter-spacing:.06rem;white-space:nowrap;
  text-shadow:0 0 .45rem rgba(0,0,0,.6)}
.hp-track{position:relative;height:1.05rem;border-radius:.55rem;background:var(--hot);
  overflow:hidden;border:1px solid var(--border)}
.hp-track i{display:block;height:100%;border-radius:.55rem;width:0;
  background:linear-gradient(90deg,var(--bar-from),var(--bar-to));
  box-shadow:0 0 1rem var(--title-glow);
  transition:width 1.6s cubic-bezier(.2,.8,.2,1)}
/* 横轴与进度条区域左对齐（跳过左侧平台名那一列） */
.hp-axis{margin-left:5.6rem;margin-top:.12rem;display:flex;justify-content:space-between;
  font-size:.7rem;color:var(--text-faint);font-family:"DIN Alternate",Impact,sans-serif;
  letter-spacing:.02rem}
.hp-axis .ax-l{text-align:left}.hp-axis .ax-c{text-align:center}.hp-axis .ax-r{text-align:right}