:root { --bg:#f5f6f8; --card:#fff; --ink:#222; --muted:#777; --accent:#2f6fed; --danger:#d64545; --ok:#1f9d55; }
* { box-sizing:border-box; }
.hidden { display:none !important; }
body { margin:0; font-family:"Microsoft YaHei",system-ui,sans-serif; background:var(--bg); color:var(--ink); }
header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:#1c2333; color:#fff; }
header h1 { font-size:18px; margin:0; }
#statusbar { display:flex; gap:8px; align-items:center; font-size:13px; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.on { background:var(--ok); } .dot.off { background:#888; }
.sep { opacity:.4; }
#estop-bar { background:var(--danger); color:#fff; text-align:center; padding:10px; font-weight:bold; }
#tabs { display:flex; gap:4px; padding:8px 20px 0; background:#1c2333; }
#tabs button { border:0; padding:8px 16px; border-radius:8px 8px 0 0; cursor:pointer; background:#2a3450; color:#aab; }
#tabs button.active { background:var(--bg); color:var(--ink); font-weight:bold; }
main { padding:16px 20px 40px; max-width:900px; margin:0 auto; }
.tab { display:none; } .tab.active { display:block; }
.card { background:var(--card); border-radius:12px; padding:16px 20px; margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.col { display:flex; flex-direction:column; gap:6px; }
.btn { border:1px solid #ccd; background:#fff; padding:8px 16px; border-radius:8px; cursor:pointer; font-size:14px; }
.btn:hover { background:#eef; }
.btn.danger { background:var(--danger); color:#fff; border-color:var(--danger); font-size:16px; padding:12px 24px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.tiny { padding:3px 8px; font-size:12px; border-radius:6px; }
/* 波形选择: 每个波形一个按钮 */
.wave-sec { margin:10px 0; }
.wave-sec-title { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:6px; }
.wave-grid { display:flex; flex-wrap:wrap; gap:6px; }
.wave-btn { border:1px solid #ccd; background:#fff; color:var(--ink); padding:6px 12px; border-radius:999px; font-size:13px; line-height:1.2; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.wave-btn:hover { border-color:var(--accent); color:var(--accent); }
.wave-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.wave-btn.random-btn { border-style:dashed; }
.wave-custom summary { cursor:pointer; font-size:13px; color:var(--muted); padding:6px 0; user-select:none; }
.wave-custom[open] summary { margin-bottom:6px; }
.muted { color:var(--muted); font-size:12px; }
.big { font-size:20px; font-weight:bold; margin-left:8px; }
.taunt { font-size:15px; color:var(--accent); font-style:italic; }
.switch { display:flex; gap:8px; align-items:center; margin:6px 0; }
.meter { height:12px; background:#e6e8ee; border-radius:6px; margin:8px 0; overflow:hidden; }
.fill { height:100%; width:0%; background:linear-gradient(90deg,#2f6fed,#9b3def); transition:width .3s; }
.logbox { height:120px; overflow-y:auto; background:#10141f; color:#9fe08f; font-family:Consolas,monospace; font-size:12px; padding:8px; border-radius:8px; }
kbd { background:#eee; border:1px solid #ccc; border-radius:4px; padding:1px 6px; }
label { display:block; margin:6px 0; }
input[type=number] { width:80px; }
.video-wrap { display:flex; gap:10px; margin-top:10px; }
#cam { border-radius:8px; background:#000; }
#cam-diff { border-radius:8px; background:#000; }
.react-light { width:80px; height:80px; border-radius:12px; background:#333; margin-top:10px; }
.react-light.wait { background:#c0392b; } .react-light.go { background:#2ecc71; }
.simon-pad { gap:14px; margin-top:10px; }
.pad { width:64px; height:64px; border:0; border-radius:12px; opacity:.45; cursor:pointer; }
.pad.lit { opacity:1; box-shadow:0 0 16px #fff; }
#qr-img, .qr-img { border:8px solid #fff; border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,.15); width:100%; max-width:260px; height:auto; cursor:zoom-in; background:#fff; }
/* 加载/未出码时给出占位尺寸, 避免图片区域塌陷成空白 */
.qr-img.loading:not([src]), .qr-img.loading[src=""] {
  min-height:244px; box-sizing:border-box; cursor:default;
  background:repeating-linear-gradient(45deg,#f6f8fd,#f6f8fd 12px,#eef2fa 12px,#eef2fa 24px);
}
code { word-break:break-all; }

/* ===== 多人互动 ===== */
.user-list { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.user-chip { display:inline-block; border:2px solid var(--accent); color:var(--accent); border-radius:999px; padding:4px 14px; font-size:14px; font-weight:bold; }
.user-chip.me { background:var(--accent); color:#fff !important; }
.poke small { opacity:.6; font-size:11px; display:block; }
.chatbox { height:220px; overflow-y:auto; background:#f2f4f9; border:1px solid #e2e6ef; border-radius:8px; padding:10px; margin-bottom:8px; font-size:14px; }
.chat-line { margin:4px 0; word-break:break-all; }
.chat-line b { margin-right:4px; }
.chat-line.sys { color:#888; font-size:12px; }
.chat-line.poke-line { color:#b5541f; font-weight:bold; }

/* 二维码排查区 */
.qr-advance { margin:8px 0; }
.qr-advance summary { cursor:pointer; color:var(--accent); font-size:13px; }
.qr-advance[open] { background:#f7f9ff; border-radius:8px; padding:8px 10px; }
.tiny { font-size:11px; opacity:.8; }
.qr-hint { background:#fff7e6; border:1px solid #f3d19e; color:#8a5a00; padding:8px 10px; border-radius:8px; font-size:13px; }
code { font-size:12px; }

/* 房间 */
.room-code { font-size:22px; font-weight:bold; letter-spacing:2px; color:var(--accent); }
.btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.primary:hover { background:#255fd0; }
.btn.danger-soft { background:#fff1f0; border-color:#f0b9b4; color:#b5322a; }
.video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; margin:10px 0; }
.video-cell { position:relative; background:#0d1220; border-radius:8px; overflow:hidden; aspect-ratio:4/3; }
.video-cell video { width:100%; height:100%; object-fit:cover; display:block; }
.video-cell .video-label { position:absolute; left:6px; bottom:6px; font-size:11px; color:#fff; background:rgba(0,0,0,.55); padding:2px 6px; border-radius:4px; }
.video-cell.video-dead { opacity:.4; }
input[type=text], input[type=number] { padding:7px 10px; border:1px solid #ccd; border-radius:8px; font-size:14px; }
.wave-canvas { display:block; width:100%; max-width:560px; margin-top:10px; background:#10141f; border-radius:8px; }
.inline { display:flex; gap:6px; align-items:center; }
.file-btn { cursor:pointer; }
textarea { width:100%; margin-top:8px; font-family:Consolas,monospace; font-size:12px; border-radius:8px; border:1px solid #ccd; padding:8px; }

/* ===== 版权水印 ===== */
#credit-bar {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center;
  padding:7px 14px; font-size:13px; font-weight:bold; letter-spacing:.3px;
  background:linear-gradient(90deg,#1b2a4a,#24406e 45%,#3a2a5e);
  color:#fff; border-bottom:1px solid rgba(255,255,255,.15);
  position:sticky; top:0; z-index:55;
}
#credit-bar .credit-id b { color:#8fd0ff; font-weight:900; }
#credit-bar .credit-ban { color:#ffd7a1; }
#credit-bar .credit-sep { opacity:.45; }
#credit-bar .credit-link { color:#cfe4ff; text-decoration:underline; }
#credit-bar .credit-link:hover { color:#fff; }

/* 全屏斜向水印层: 只做视觉标记, 不拦截交互 */
#wm-layer {
  position:fixed; inset:-30%; z-index:1; pointer-events:none; user-select:none;
  display:flex; flex-direction:column; justify-content:space-around; overflow:hidden;
  transform:rotate(-22deg); opacity:.75;
}
#wm-layer .wm-row { white-space:nowrap; font-size:13px; letter-spacing:3px; color:rgba(47,111,237,.13); font-weight:700; }
#wm-layer .wm-row:nth-child(even) { color:rgba(120,60,180,.10); }

/* 右下角固定水印徽标 */
#wm-badge {
  position:fixed; right:12px; bottom:12px; z-index:60; pointer-events:none; user-select:none;
  background:rgba(20,28,45,.82); color:#fff; border:1px solid rgba(143,208,255,.35);
  border-radius:10px; padding:7px 11px; line-height:1.35; text-align:right;
  box-shadow:0 4px 16px rgba(0,0,0,.28); backdrop-filter:blur(3px);
}
#wm-badge .wm-badge-l1 { font-size:11px; letter-spacing:1.6px; color:#8fd0ff; font-weight:800; }
#wm-badge .wm-badge-l2 { font-size:13px; font-weight:900; }
#wm-badge .wm-badge-l3 { font-size:10px; color:#ffd7a1; letter-spacing:.5px; }

/* ===== 知识产权说明 ===== */
#ip-notice { background:#10141f; color:#c9d3e4; padding:26px 20px 34px; font-size:13px; line-height:1.75; scroll-margin-top:60px; }
#ip-notice .ip-inner { max-width:900px; margin:0 auto; }
#ip-notice h3 { color:#8fd0ff; margin:0 0 10px; font-size:16px; }
#ip-notice b { color:#fff; }
#ip-notice ol { padding-left:20px; margin:10px 0; }
#ip-notice li { margin:7px 0; }
#ip-notice code { background:rgba(255,255,255,.1); padding:1px 5px; border-radius:4px; }
#ip-notice .ip-foot { border-top:1px solid rgba(255,255,255,.12); padding-top:12px; margin-top:16px; font-size:12px; color:#93a3bd; text-align:center; }

/* ===== 房间视频保护 ===== */
.cam-guard { margin:10px 0; padding:12px 14px; border-radius:10px; background:#fff8f0; border:1px solid #f0cfad; }
.cam-guard-title { font-weight:bold; color:#a35a12; font-size:14px; margin-bottom:6px; }
.cam-guard-list { margin:6px 0 8px; padding-left:20px; color:#6b4a24; font-size:12px; line-height:1.7; }
.cam-guard-list b { color:#a35a12; }
.cam-guard-note { margin:0; font-size:12px; color:#8a5a2a; background:rgba(255,255,255,.6); padding:8px 10px; border-radius:8px; }
.video-cell { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.video-cell video { pointer-events:none; }
.video-cell .tile-wm {
  position:absolute; z-index:3; pointer-events:none; user-select:none;
  font-size:10px; line-height:1.3; color:rgba(255,255,255,.5); text-shadow:0 1px 2px rgba(0,0,0,.7);
  white-space:nowrap; transition:left 1.2s ease, top 1.2s ease;
}
.video-cell .tile-badge {
  position:absolute; left:6px; top:6px; z-index:3; font-size:10px; color:#ffd7a1;
  background:rgba(0,0,0,.5); padding:1px 6px; border-radius:4px;
}
.video-cell.shielded video { opacity:0 !important; }
.video-cell .tile-shield {
  position:absolute; inset:0; z-index:4; display:none; align-items:center; justify-content:center;
  text-align:center; padding:10px; font-size:12px; font-weight:bold; color:#ffd7a1;
  background:repeating-linear-gradient(45deg,#151b2b,#151b2b 10px,#1d2536 10px,#1d2536 20px);
}
.video-cell.shielded .tile-shield { display:flex; }
#guard-toast {
  position:fixed; left:50%; top:16px; transform:translate(-50%,-140%); z-index:200;
  max-width:88vw; padding:11px 18px; border-radius:10px; font-size:13px; font-weight:bold;
  background:#8a2b1f; color:#fff; box-shadow:0 8px 26px rgba(0,0,0,.3); transition:transform .28s ease;
  pointer-events:none; text-align:center; line-height:1.5;
}
#guard-toast.show { transform:translate(-50%,0); }

/* ===== 房间大厅 / 备注标签 / 审批 ===== */
.panel { margin:10px 0 12px; padding:12px 14px; background:#f7f9fd; border:1px solid #e3e9f4; border-radius:10px; }
.panel input[type=text] { width:100%; max-width:320px; padding:7px 10px; border:1px solid #ccd; border-radius:8px; font-size:14px; }
.panel label { font-size:13px; }
.field { margin:10px 0; }
.field-label { font-size:13px; font-weight:bold; margin-bottom:6px; }
.field .muted { font-weight:normal; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.chip {
  border:1px solid #ccd; background:#fff; color:var(--ink); border-radius:999px;
  padding:5px 13px; font-size:13px; cursor:pointer; transition:background .15s,border-color .15s,color .15s;
}
.chip:hover { border-color:var(--accent); color:var(--accent); }
.chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.tag-picked { font-size:12px; }

.hall-head { display:flex; align-items:center; gap:10px; margin:16px 0 8px; }
.hall-head h3 { font-size:15px; margin:0; }
.hall-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.hall-empty { grid-column:1/-1; margin:6px 0; }
.hall-card { background:#fff; border:1px solid #e3e9f4; border-radius:12px; padding:12px 14px; box-shadow:0 1px 3px rgba(0,0,0,.05); display:flex; flex-direction:column; gap:7px; }
.hall-card-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.hall-name { font-size:15px; font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hall-code { font-size:13px; font-weight:bold; color:var(--accent); letter-spacing:1px; flex:0 0 auto; }
.hall-meta { display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--muted); }
.hall-owner { font-weight:bold; color:#556; }
.hall-tags { display:flex; flex-wrap:wrap; gap:5px; }
.tag { font-size:11px; padding:2px 9px; border-radius:999px; background:#eef2fb; color:#4560a8; border:1px solid #dbe3f6; }
.hall-foot { display:flex; align-items:center; gap:8px; margin-top:2px; }
.hall-count-badge { font-size:12px; color:#556; }
.hall-count-badge.full { color:var(--danger); font-weight:bold; }
.hall-lock { font-size:11px; color:#a35a12; }
.hall-join { margin-left:auto; }
.hall-pass-row { display:flex; gap:6px; }
.hall-pass-row input { flex:1; min-width:0; padding:6px 9px; border:1px solid #ccd; border-radius:8px; font-size:13px; }

.pending-box { margin:12px 0; padding:12px 14px; border-radius:10px; background:#fff8ef; border:1px solid #f0d6b4; }
.pending-title { font-weight:bold; font-size:14px; color:#a35a12; margin-bottom:4px; }
.pending-box p { margin:4px 0 8px; }

.room-meta { font-size:12px; color:var(--muted); }
.reqs { margin:10px 0; padding:10px 12px; border-radius:10px; border:1px solid #ffe0a8; background:#fffaee; }
.reqs-title { font-size:13px; font-weight:bold; color:#a35a12; margin-bottom:6px; }
.badge { display:inline-block; min-width:18px; text-align:center; padding:0 5px; border-radius:9px; background:var(--danger); color:#fff; font-size:11px; line-height:17px; }
.reqs-list { display:flex; flex-direction:column; gap:6px; }
.req-row { display:flex; align-items:center; gap:8px; font-size:13px; }
.req-name { font-weight:bold; }
.req-row .muted { margin-right:auto; }
.chat-time { color:#aab; font-size:11px; margin-right:6px; }

@media print {
  #tabs, #credit-bar, #wm-badge, .cam-guard, .chatbox, .video-wrap { display:none !important; }
  #video-grid { display:none !important; }   /* 打印/另存 PDF 时视频内容不输出 */
  body { background:#fff; }
}

/* ===== 配对页(双二维码) ===== */
.pair-status {
  display:flex; align-items:center; gap:9px; margin-bottom:12px;
  background:#fff; border-radius:10px; padding:11px 14px; font-size:14px; font-weight:bold;
  box-shadow:0 1px 4px rgba(0,0,0,.08); border-left:4px solid var(--accent);
}
.ps-dot { width:11px; height:11px; border-radius:50%; background:#bbb; flex:0 0 auto; }
.ps-dot.on { background:var(--ok); box-shadow:0 0 0 4px rgba(31,157,85,.15); }
.ps-dot.wait { background:#e8a33d; box-shadow:0 0 0 4px rgba(232,163,61,.15); }
.qr-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.qr-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; margin:0 0 14px; }
.qr-card-single { max-width:520px; margin:0 auto 14px; padding:20px; }
.qr-card-single .qr-img { max-width:300px; }
.qr-card-head { font-weight:bold; font-size:15px; }
.qr-card-desc { font-size:12.5px; color:#555; margin:2px 0 0; line-height:1.6; }
.qr-card .tiny { font-family:Consolas,monospace; font-size:11px; word-break:break-all; margin:0; }
.row.center { justify-content:center; }
.steps, .adv-list { padding-left:20px; line-height:1.9; font-size:13.5px; }
.adv-list code { background:#eef2fa; padding:1px 5px; border-radius:4px; }

/* 二维码放大层 */
.qr-zoom { position:fixed; inset:0; z-index:300; background:rgba(8,12,22,.82); display:flex; align-items:center; justify-content:center; padding:20px; }
.qr-zoom-inner { background:#fff; border-radius:14px; padding:18px; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:92vw; }
.qr-zoom-inner img { width:min(76vw,420px); height:auto; image-rendering:pixelated; }
.qr-zoom-cap { font-size:13px; color:#555; text-align:center; }

/* 轻提示 */
#hud-toast {
  position:fixed; left:50%; bottom:88px; transform:translate(-50%,140%); z-index:260;
  max-width:90vw; padding:11px 18px; border-radius:10px; font-size:13.5px; font-weight:bold;
  background:#152036; color:#fff; box-shadow:0 8px 26px rgba(0,0,0,.32);
  transition:transform .26s ease; pointer-events:none; text-align:center; line-height:1.5;
}
#hud-toast.show { transform:translate(-50%,0); }

/* 手机端固定快捷控制条(桌面隐藏) */
#quick-bar { display:none; }

/* ===== 移动端适配 ===== */
@media (max-width: 760px) {
  header { padding:9px 12px; flex-wrap:wrap; gap:4px; }
  header h1 { font-size:16px; }
  #statusbar { font-size:12px; gap:6px; flex-wrap:wrap; }
  #statusbar .sep:nth-of-type(2) { display:none; }
  #lbl-ai { display:none; }
  #credit-bar { font-size:11.5px; gap:5px; padding:6px 10px; }
  #tabs { overflow-x:auto; padding:6px 10px 0; gap:3px; -webkit-overflow-scrolling:touch; }
  #tabs button { padding:9px 13px; font-size:13px; white-space:nowrap; flex:0 0 auto; }
  main { padding:12px 12px 96px; }
  .card { padding:14px; border-radius:10px; }
  h2 { font-size:17px; margin:6px 0 10px; }
  .btn { padding:11px 16px; font-size:14px; min-height:44px; }
  .qr-grid { grid-template-columns:1fr; }
  .qr-img { max-width:72vw; }
  .video-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  /* 房间大厅: 手机上单列, 卡片更松快 */
  .hall-list { grid-template-columns:1fr; }
  .hall-card { padding:12px; }
  .panel { padding:10px 12px; }
  .panel input[type=text] { max-width:none; }
  .chip { padding:7px 14px; }
  #wm-badge { transform:scale(.82); transform-origin:bottom right; }
  #estop-bar { font-size:13px; padding:12px 10px; }

  /* 快捷控制条占用底部, 长期可用 */
  #quick-bar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:150;
    background:rgba(18,26,42,.96); padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    gap:6px; box-shadow:0 -4px 14px rgba(0,0,0,.24); backdrop-filter:blur(6px);
  }
  .qb-btn {
    flex:1; min-height:52px; border:1px solid rgba(255,255,255,.16); border-radius:10px;
    background:#243350; color:#fff; font-size:16px; font-weight:bold; letter-spacing:.5px;
  }
  .qb-btn:active { background:#31456c; }
  .qb-btn.estop { flex:1.5; background:#c0392b; border-color:#e05a4a; font-size:17px; }
  .qb-btn.estop:active { background:#a5311f; }
  #hud-toast { bottom:78px; }
  input[type=text], input[type=number], textarea { font-size:16px; }  /* 防 iOS 缩放 */
  .chatbox, .logbox { height:180px; }
}