/* ===== 实时画面直播页（live.html）专用样式 =====
设计语言完全沿用 app.css：本文件在 app.css 之后加载，
只做「补充 + 极少量覆盖」，不另起一套配色。 */
/* 兜底变量：万一 app.css 没加载成功，页面也不会变成黑白 */
:root{
--bg:#f4f6fb; --card:#fff; --line:#e6e9f2; --text:#1c2333; --muted:#6b7590;
--pri:#1f57c9; --pri-soft:#eaf1ff; --ok:#16a34a; --warn:#e0850b; --danger:#dc2626;
--shadow:0 1px 2px rgba(20,30,60,.05),0 8px 24px rgba(20,30,60,.06);
--r:14px;
}
/* 底部标签栏里的链接：app.css 的 .nav-item 是按钮样式，这里补上 需要的复位 */
.side a.nav-item{text-decoration:none;color:var(--muted)}
.side a.nav-item:hover{color:var(--text)}
.side a.nav-item.active{color:var(--pri)}
/* ---------------- 状态灯 ---------------- */
.status-row{display:flex;flex-wrap:wrap;gap:8px}
.lamp{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
font-size:12.5px;background:#f1f3f9;color:var(--muted);max-width:100%;min-width:0}
.lamp i{width:8px;height:8px;border-radius:50%;background:#b9c0d4;flex:0 0 8px}
.lamp b{font-weight:600;color:var(--text)}
.lamp.on{background:#e8f7ee;color:#14803c}.lamp.on i{background:#16a34a;box-shadow:0 0 0 3px #16a34a22}
.lamp.warn{background:#fdf2e2;color:#b26a04}.lamp.warn i{background:#e0850b}
.lamp.err{background:#fdeaea;color:#c02626}.lamp.err i{background:#dc2626}
/* 「当前页面：<长 URL>」这一条。
坑：.url 原先只是个内联 span —— max-width 对 display:inline 的元素**完全无效**
（只对内联替换元素或块级/弹性元素生效），所以长 URL 会把整个行撑到 500px+，
document.scrollWidth 跟着变大，手机上就出现横向滚动。
正解：外层 span 是 .lamp 的 flex item（必须 min-width:0 才允许被压缩），
内层 .url 做成 block 级、可收缩的 flex item，省略号才有意义。 */
.lamp > span{display:flex;align-items:center;min-width:0;overflow:hidden}
.lamp > span > b.lbl{flex:0 0 auto;white-space:nowrap;font-weight:400;color:inherit}
.lamp .url{display:block;flex:1 1 auto;min-width:0;max-width:52vw;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.status-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* ---------------- 画面区 ----------------
比例锁死 1366:900：容器用 aspect-ratio，图片 object-fit:contain，
这样 img 的 getBoundingClientRect() 就是真实显示尺寸，坐标换算才准。 */
.screen-wrap{width:100%;max-width:1180px;margin:0 auto}
.screen{position:relative;width:100%;aspect-ratio:1366/900;background:#0b1020;
border-radius:12px;overflow:hidden;border:1px solid var(--line);
box-shadow:0 12px 30px rgba(12,24,56,.18)}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
/* touch-action:none —— 关掉浏览器自带的滚动手势，否则触摸拖动会被当成页面滚动，滑块永远拖不动 */
touch-action:none;-webkit-user-drag:none;user-select:none}
.screen.empty img{opacity:0}
.screen-empty{position:absolute;inset:0;display:grid;place-items:center;color:#8fa2c9;
font-size:13px;text-align:center;padding:16px;pointer-events:none}
.screen.empty .screen-empty{display:grid}
.screen:not(.empty) .screen-empty{display:none}
/* 接管开启时给画面描一圈高亮边，避免误操作 */
.screen.takeover{outline:2px solid var(--pri);outline-offset:2px;cursor:crosshair}
.screen.takeover{cursor:crosshair}
.screen-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
font-size:12px;color:var(--muted);padding:8px 2px 0}
/* ---------------- 接管工具条 ---------------- */
.tool-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:46px;height:26px;border-radius:999px;background:#cfd6e6;position:relative;
transition:.18s;flex:0 0 46px}
.switch .track:after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s}
.switch input:checked + .track{background:var(--pri)}
.switch input:checked + .track:after{transform:translateX(20px)}
.switch input:focus-visible + .track{box-shadow:0 0 0 3px rgba(31,87,201,.3)}
.switch b{font-size:13.5px}
.switch input:checked ~ b{color:var(--pri)}
.keys{display:flex;flex-wrap:wrap;gap:7px}
.key-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 11px;
font-size:12.5px;cursor:pointer;white-space:nowrap;transition:.15s;min-width:44px;text-align:center}
.key-btn:hover{background:#f4f7ff;border-color:#cfd9f2;color:var(--pri)}
.key-btn:active{transform:translateY(1px)}
.text-row{display:flex;gap:8px;align-items:stretch;margin-top:10px}
.text-row input{flex:1;min-width:0}
.text-row .btn{flex:0 0 auto}
/* ---------------- 任务控制 ---------------- */
.task-row{display:flex;gap:8px;flex-wrap:wrap}
.task-row input{flex:1 1 240px;min-width:0}
.task-ops{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.progress{margin-top:12px}
.progress .bar{height:8px;border-radius:999px;background:#eef1f8;overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2f6fed,#1f57c9);
transition:width .3s ease}
.progress .meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-top:6px}
.task-msg{margin-top:10px;font-size:12.5px;color:var(--muted);min-height:18px;word-break:break-word}
.task-msg.ok{color:#14803c}.task-msg.err{color:#c02626}
.hint{font-size:12px;color:var(--muted);line-height:1.6;margin-top:8px}
.hint code{background:#f1f3f9;border-radius:5px;padding:1px 5px;font-size:11.5px}
/* ---------------- PC 端 ---------------- */
@media (min-width: 901px){
/* 宽屏时画面居中并限宽，工具区跟画面同宽，视觉成一条 */
.screen-wrap{max-width:1180px}
}
/* ---------------- 手机端 ---------------- */
@media (max-width: 900px){
.status-row{gap:6px}
.lamp{font-size:11.5px;padding:5px 10px}
.screen{border-radius:10px}
.screen-meta{font-size:11.5px}
/* 快捷条在手机上铺满、可横向滑动，避免挤成两行还很窄 */
.keys{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.key-btn{flex:0 0 auto}
.task-row input{flex:1 1 100%}
.task-row .btn{flex:1}
.task-ops .btn{flex:1}
.text-row{flex-wrap:wrap}
.text-row input{flex:1 1 100%}
.text-row .btn{flex:1}
}
@media (max-width: 380px){
/* 320px 上把 URL 上限再收一档；剩下的靠上面 flex 收缩 + 省略号兜住 */
.lamp .url{max-width:44vw}
}