:root{
  --bg:#eef2f8;
  --ink:#10203a;
  --ink-2:#5a6b85;
  --line:rgba(16,32,58,.10);
  --glass:rgba(255,255,255,.62);
  --glass-2:rgba(255,255,255,.82);
  --brand:#2f6bff;
  --brand-2:#00c2a8;
  --danger:#ff4d5e;
  --red:#e8352e;
  --shadow:0 18px 50px -20px rgba(16,40,80,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);background:var(--bg);overflow:hidden;
}
/* 背景光斑（液态玻璃底色） */
.bg-orbs{position:fixed;inset:0;overflow:hidden;z-index:0;filter:blur(42px);opacity:.9}
.bg-orbs i{position:absolute;border-radius:50%;display:block}
.bg-orbs i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-10vw;background:radial-gradient(circle at 30% 30%,#9fc4ff,#5f8dff00)}
.bg-orbs i:nth-child(2){width:40vw;height:40vw;right:-10vw;top:8vh;background:radial-gradient(circle at 40% 40%,#a8f3e4,#35d3b800)}
.bg-orbs i:nth-child(3){width:52vw;height:52vw;left:20vw;bottom:-24vw;background:radial-gradient(circle at 50% 50%,#ffe0b8,#ff9b3d00)}

.glass{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9);
  border-radius:20px;
}
.card{padding:18px}
.hidden{display:none !important}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* 页面切换 */
.page{position:fixed;inset:0;z-index:1;display:none;flex-direction:column}
.page.active{display:flex}

/* ---------- 登录 ---------- */
.login-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:24px}
.brand{text-align:center}
.brand .logo{font-size:44px;line-height:1}
.brand h1{margin:10px 0 4px;font-size:26px;letter-spacing:2px}
.brand p{margin:0;color:var(--ink-2);font-size:13px}
.login-wrap .card{width:min(380px,100%)}
.apk-link{margin:-6px 0 0;font-size:13px}
.apk-link a{color:var(--ink-2);text-decoration:none;border-bottom:1px dashed rgba(90,110,140,.45);padding-bottom:1px}
.apk-link a:active{color:var(--ink)}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:12px;color:var(--ink-2);margin:0 0 6px 4px}
.field input{
  width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.72);font-size:15px;color:var(--ink);outline:none;transition:.18s;
}
.field input:focus{border-color:rgba(47,107,255,.55);box-shadow:0 0 0 4px rgba(47,107,255,.10);background:#fff}
.btn{
  border:0;border-radius:14px;padding:12px 18px;font-size:14px;font-weight:600;cursor:pointer;
  transition:transform .12s ease,filter .18s ease,background .18s;
  background:rgba(255,255,255,.9);color:var(--ink);border:1px solid var(--line);
}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--brand),#5a8bff);color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px rgba(47,107,255,.9)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:rgba(255,255,255,.55)}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:11px}
.btn.block{width:100%;margin-top:4px;padding:14px}
.btn[disabled]{opacity:.55;pointer-events:none}
.icon-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.6);
  font-size:17px;cursor:pointer;color:var(--ink);display:grid;place-items:center;transition:.16s
}
.icon-btn:hover{background:#fff}
.err{color:var(--danger);font-size:13px;min-height:18px;margin:8px 0 0}
.foot{position:fixed;bottom:16px;font-size:12px;color:#8695ac}
.hint{color:var(--ink-2);font-size:12.5px;line-height:1.7;margin:6px 0}

/* ---------- 顶栏 ---------- */
/* 宽屏（PC 打开）时把内容收在 760px 里居中，否则卡片会被拉成一整条、
 * 键值对的标签和值隔着一整个屏幕，很难看。手机端 760 > 视口，等于没生效。 */
.topbar{
  position:relative;z-index:2;margin:12px auto 0;padding:10px 12px;border-radius:18px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;
  width:calc(100% - 24px);max-width:760px
}
.tb-left,.tb-right{display:flex;align-items:center;gap:8px;min-width:0}
.tb-left strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--brand-2);box-shadow:0 0 0 4px rgba(0,194,168,.16)}
.pill{font-size:11.5px;padding:3px 9px;border-radius:999px;background:rgba(255,77,94,.12);color:#d8333f;font-weight:600}
.pill.on{background:rgba(0,194,168,.16);color:#00897a}

/* ---------- 设备列表 ---------- */
.list-wrap{flex:1;overflow:auto;padding:14px 12px 28px;width:100%;max-width:784px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.dev-card{
  position:relative;padding:16px;border-radius:20px;cursor:pointer;overflow:hidden;
  background:var(--glass-2);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s
}
.dev-card:hover{transform:translateY(-2px);box-shadow:0 24px 50px -22px rgba(16,40,80,.5)}
.dev-card .thumb{
  height:104px;border-radius:14px;margin-bottom:12px;display:grid;place-items:center;font-size:32px;
  background:linear-gradient(135deg,#dbe7ff,#e8fbf6);color:#5f7ba6
}
.dev-card h3{margin:0 0 4px;font-size:16px}
.dev-card .meta{font-size:12px;color:var(--ink-2);font-family:ui-monospace,Menlo,monospace}
.dev-card .badge{position:absolute;right:14px;top:14px;font-size:11.5px;padding:4px 9px;border-radius:999px;font-weight:700}
.badge.off{background:rgba(16,32,58,.08);color:#7286a1}
.badge.on{background:rgba(0,194,168,.18);color:#00897a}
.badge.wait{background:rgba(255,169,0,.18);color:#a06a00}
.empty{text-align:center;color:var(--ink-2);padding:60px 20px}
.empty-ico{font-size:52px;margin-bottom:8px}

/* ---------- 详情 ---------- */
.detail-wrap{flex:1;overflow:auto;padding:14px 12px 28px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:784px;margin:0 auto}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.live-box{position:relative;padding:0;overflow:hidden;background:#0b1220}
.live-box video{width:100%;display:block;max-height:56vh;object-fit:contain;background:#0b1220}
.live-box canvas{width:100%;display:block;max-height:56vh;object-fit:contain;background:#0b1220}
.live-stats{
  position:absolute;left:12px;bottom:12px;font-size:11.5px;color:#cfe3ff;opacity:.85;
  background:rgba(8,16,30,.55);padding:4px 9px;border-radius:8px;pointer-events:none
}
.live-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:12px;pointer-events:none}
.live-tag{
  align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:12.5px;color:#fff;
  background:rgba(8,16,30,.5);padding:6px 10px;border-radius:999px;backdrop-filter:blur(6px)
}
.live-actions{align-self:center;display:flex;gap:16px;pointer-events:auto}
.round-btn{
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.28);cursor:pointer;
  background:rgba(12,22,40,.55);color:#fff;font-size:20px;backdrop-filter:blur(10px);transition:.16s
}
.round-btn:hover{background:rgba(12,22,40,.8)}
.round-btn.danger{background:rgba(232,53,46,.9);border-color:transparent}
.round-btn.off{background:rgba(120,130,145,.75)}
/* 麦克风开着：绿色呼吸环，一眼能看出正在说话 */
.round-btn.on{
  background:rgba(34,180,110,.95);border-color:transparent;
  animation:micPulse 1.6s ease-in-out infinite
}
@keyframes micPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,180,110,.55)}
  50%{box-shadow:0 0 0 7px rgba(34,180,110,0)}
}
.qr-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.qr-img{width:132px;height:132px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.qr-meta p{margin:4px 0;font-size:13px;color:var(--ink-2)}
.qr-meta b{color:var(--ink);font-family:ui-monospace,Menlo,monospace}

/* ---------- 录像列表 ---------- */
.vlist{display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow:auto}
.vrow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;
  border-radius:14px;background:rgba(255,255,255,.66);border:1px solid var(--line)
}
.vrow .vt{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.vrow .vt .vdur{
  font-size:10.5px;font-weight:500;color:var(--ink-2);
  background:rgba(16,32,58,.07);padding:1px 6px;border-radius:99px
}
.vrow .vs{font-size:11.5px;color:var(--ink-2)}
.vrow .vact{display:flex;gap:8px;align-items:center}

/* 正在录制：呼吸点 + 红字 */
.rec-live{
  display:flex;align-items:center;gap:6px;color:#d6334a;font-weight:600;
  font-size:12px;margin:0 0 2px
}
.rec-live::before{
  content:'';width:7px;height:7px;border-radius:50%;background:#e2384f;
  animation:recPulse 1.4s ease-in-out infinite
}
@keyframes recPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ---------- 弹窗 ---------- */
.modal{
  position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:rgba(12,24,44,.34);backdrop-filter:blur(6px);padding:18px
}
.modal.show{display:flex}
.modal-card{width:min(440px,100%);max-height:88vh;overflow:auto}
.modal-card.center{text-align:center}
.qr-big{width:230px;height:230px;background:#fff;border-radius:18px;padding:8px;border:1px solid var(--line)}
.status-line{margin:12px 0 0;font-size:13.5px;font-weight:600;color:var(--brand)}

/* ---------- 播放器 ---------- */
.player{position:relative;background:#06090f;border-radius:14px;overflow:hidden;margin-bottom:10px}
.player canvas{width:100%;display:block;max-height:58vh;object-fit:contain}
.play-tip{
  position:absolute;inset:0;display:grid;place-items:center;color:#cfe0ff;font-size:13px;
  background:rgba(6,9,15,.55);pointer-events:none
}
.play-bar{display:flex;align-items:center;gap:10px}
.progress{flex:1;height:6px;border-radius:99px;background:rgba(16,32,58,.10);overflow:hidden}
.progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .2s}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:36px;transform:translate(-50%,20px);z-index:60;
  background:rgba(16,32,58,.92);color:#fff;padding:11px 18px;border-radius:14px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.24s;max-width:86vw;text-align:center
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:560px){
  .topbar{margin:8px auto 0;width:calc(100% - 16px)}
  .detail-wrap,.list-wrap{padding:10px 8px 22px}
  .btn.sm{padding:7px 10px}
  .brand h1{font-size:23px}
}

/* ---------- 运行状态 kv 列表 ---------- */
.kvlist{display:flex;flex-direction:column;gap:2px}
.kv{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 2px;border-bottom:1px dashed var(--line)
}
.kv:last-of-type{border-bottom:none}
.kv span{font-size:12.5px;color:var(--ink-2)}
.kv b{font-size:12.5px;font-weight:600}