/* ---------- 品牌：Huddle（深松绿 + 祖母绿霓虹；标题 Poppins，正文 Inter；字体随站点部署，不依赖外网） ---------- */
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #061a13;          /* 最深：页面底色 */
  --bg-2: #0b281e;        /* 面板 / 卡片 */
  --bg-3: #113528;        /* 抬起的元素 / 次要按钮 */
  --bg-4: #184332;        /* 悬停 */
  --line: #1d4535;
  --text: #e6f5ed;
  --muted: #8db3a2;
  --accent: #3ee59a;      /* Emerald Green（霓虹） */
  --accent-2: #2fcf86;
  --on-accent: #032316;   /* 亮绿底上的文字 */
  --accent-soft: rgba(62, 229, 154, .14);
  --glow: 0 0 22px rgba(62, 229, 154, .35);
  --pine: #0f3d2e;        /* Dark Pine Green */
  --danger: #e5484d;
  --ok: #3ee59a;
  --warn: #f5a524;
  --radius: 14px;
  --font-head: "Poppins", "Inter", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color-scheme: dark;
}
h1, h2, h3, .brand, .m-title, .cbtn .lbl, .btn { font-family: var(--font-head); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { background: radial-gradient(1100px 620px at 50% -12%, #134a36 0%, rgba(19, 74, 54, 0) 62%), var(--bg); background-attachment: fixed; }
body { font-size: 14px; line-height: 1.5; }
a { color: var(--accent); }
button { font: inherit; cursor: pointer; }
input {
  font: inherit; width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: #04140e; color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[readonly] { color: var(--muted); }
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
.hidden { display: none !important; }

.btn {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 8px; border: 1px solid transparent;
  background: var(--accent); color: var(--on-accent); font-weight: 600; transition: background .15s, box-shadow .15s;
}
.btn:hover { background: var(--accent-2); box-shadow: var(--glow); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.secondary { background: var(--bg-3); border-color: var(--line); color: var(--text); }
.btn.secondary:hover { background: var(--bg-4); box-shadow: none; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { background: #c93a3f; }
.btn.block { width: 100%; margin-top: 20px; }

/* ---------- 首页 ---------- */
.home { min-height: 100%; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 18px 28px; }
.logo { width: 34px; height: 34px; display: block; flex: none; }
.logo img { width: 100%; height: 100%; display: block; }
a.brand, .brand { color: var(--text); text-decoration: none; }
.brand { font-weight: 600; font-size: 19px; letter-spacing: .2px; }
.brand small { display: block; font-family: "Inter", sans-serif; font-weight: 500; font-size: 9.5px; letter-spacing: 1.6px; color: var(--accent); text-transform: uppercase; margin-top: -2px; }
.hero { text-align: center; padding: 36px 16px 8px; }
.hero h1 { font-size: 34px; font-weight: 600; margin: 0 0 10px; letter-spacing: -.2px; }
.hero h1 em { font-style: normal; color: var(--accent); text-shadow: var(--glow); }
.hero p { color: var(--muted); margin: 0; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 24px; justify-content: center; padding: 32px 16px 48px; }
.card { background: linear-gradient(180deg, rgba(19, 60, 45, .78), rgba(11, 40, 30, .9)); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: 0 18px 40px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .03); }
.card h2 { margin: 0 0 2px; font-size: 18px; }
.card .sub { color: var(--muted); font-size: 13px; }
.err { color: #ff8589; font-size: 13px; margin-top: 10px; min-height: 18px; }
.foot { margin-top: auto; text-align: center; color: var(--muted); font-size: 12px; padding: 20px; }
@media (max-width: 820px) { .cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 会议页 ---------- */
.center-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.prejoin { width: 100%; max-width: 760px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.preview { background: #000; border-radius: var(--radius); aspect-ratio: 16/10; position: relative; overflow: hidden; display: grid; place-items: center; }
.preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.preview .off { color: var(--muted); }
.preview-ctrls { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
@media (max-width: 720px) { .prejoin { grid-template-columns: 1fr; } }

/* 100dvh：安卓/iOS 浏览器地址栏显示时，控制栏不会被挡在屏幕外 */
.meeting { height: 100vh; height: 100dvh; width: 100%; overflow: hidden; display: grid; grid-template-rows: 54px minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.m-top { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg-2); min-width: 0; }
.m-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-code { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: var(--bg-3); border: 1px solid var(--line); white-space: nowrap; }
.pill.rec { color: #ffb3b5; border-color: #5a2a2d; background: #2a1517; }
.pill.rec::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.spacer { flex: 1; }

.m-body { display: grid; grid-template-columns: 1fr 320px; min-height: 0; }
.m-body.nopanel { grid-template-columns: 1fr; }
.m-body.nopanel .panel { display: none; }
.stage { padding: 12px; min-height: 0; overflow: auto; }
.grid { display: grid; gap: 10px; height: 100%; align-content: center; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.tile { position: relative; background: var(--bg-3); border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; border: 2px solid transparent; transition: border-color .15s; }
.tile.speaking { border-color: var(--accent); box-shadow: var(--glow); }
.tile video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.local video.cam { transform: scaleX(-1); }
.tile.screen video { object-fit: contain; }
.tile .avatar { position: absolute; inset: 0; display: grid; place-items: center; }
.tile .avatar span { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 700; color: #fff; }
.tile .name { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); padding: 3px 9px; border-radius: 6px; font-size: 13px; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); }
.tile .name .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mic-off { color: #ff8589; }

.panel { border-left: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; background: none; border: 0; color: var(--muted); padding: 12px 0; border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-body { flex: 1; overflow: auto; padding: 8px 0; }
.member { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.member .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; flex: none; font-size: 14px; }
.member .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 成员页：上半成员列表、下半聊天 */
#tabMembers.mem-split { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
#tabMembers.mem-split.hidden { display: none; }
.member-list { flex: 1 1 42%; min-height: 72px; overflow: auto; padding: 8px 0; }
.chat { flex: 1 1 58%; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.chat-h { padding: 8px 16px 4px; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.chat-list { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.chat-empty { margin: auto; padding: 12px; text-align: center; font-size: 13px; color: var(--muted); }
.chat-msg { max-width: 88%; align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; text-align: right; }
.cm-meta { display: flex; gap: 6px; align-items: baseline; font-size: 12px; margin-bottom: 2px; }
.chat-msg.mine .cm-meta { justify-content: flex-end; }
.cm-name { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-time { color: var(--muted); font-size: 11px; }
.cm-text { display: inline-block; text-align: left; padding: 7px 10px; border-radius: 10px; background: var(--bg-3); font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.mine .cm-text { background: rgba(62, 229, 154, .16); }
.cm-text a { color: var(--accent); }
.chat-form { display: flex; gap: 8px; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 16px; border-radius: 10px; }
.chat-send { flex: none; width: 40px; border: 0; border-radius: 10px; background: var(--accent); color: #04301e; display: grid; place-items: center; cursor: pointer; }
.chat-send:disabled { opacity: .5; }
.tabs button { position: relative; }
.chat { position: relative; }
.cm-at { display: inline-block; padding: 0 5px; margin: 0 1px; border-radius: 6px; background: rgba(110, 160, 255, .2); color: #9cc0ff; font-weight: 600; }
.chat-msg.mine .cm-at { background: rgba(4, 48, 30, .35); color: #d8ffee; }
.chat-msg.to-me .cm-text { background: rgba(255, 196, 70, .16); box-shadow: inset 3px 0 0 #f5a524; }
.chat-msg.to-me .cm-at { background: rgba(245, 165, 36, .3); color: #ffd98a; }
.at-menu { position: absolute; left: 12px; right: 12px; bottom: 58px; z-index: 6; max-height: 260px; overflow: auto; background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); padding: 4px; }
.at-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.at-opt.on, .at-opt:hover { background: var(--bg-4, rgba(255, 255, 255, .06)); }
.at-av, .at-all { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; flex: none; }
.at-all { background: #f5a524; color: #3a2400; }
.cbtn .dot.at { width: 16px; height: 16px; top: 1px; right: 4px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; line-height: 1; }
.tabs button .dot { position: absolute; top: 8px; right: 18%; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 4px; background: var(--bg-3); color: var(--muted); border: 1px solid var(--line); }
.badge.owner { color: #ffd78a; border-color: #5b4a1e; background: #2a2412; }
.badge.ai { color: var(--accent); border-color: #1f5a44; background: var(--accent-soft); }
.badge.me { color: var(--text); border-color: var(--line); background: var(--bg-3); }
.cap { padding: 8px 16px; }
.cap .who { font-size: 12px; color: var(--muted); }
.cap .who b { color: var(--text); font-weight: 600; margin-right: 6px; }
.cap .txt { margin-top: 2px; }
.cap.partial .txt { color: var(--muted); font-style: italic; }
.cap.sys .txt { color: var(--muted); font-size: 13px; }
.cap.sys.error .txt { color: #ff8589; }
.cap.sys.warn .txt { color: #f5c26b; }
.empty { color: var(--muted); text-align: center; padding: 40px 20px; font-size: 13px; }

.m-ctrl { display: flex; align-items: center; justify-content: center; justify-content: safe center; gap: 10px; border-top: 1px solid var(--line); background: var(--bg-2); padding: 0 12px env(safe-area-inset-bottom); min-height: 72px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.m-ctrl::-webkit-scrollbar { display: none; }
.cbtn { position: relative; flex: none; }
.cbtn .dot { position: absolute; top: 4px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.cbtn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 68px; padding: 6px 8px; border-radius: 10px; background: none; border: 0; color: var(--text); font-size: 11px; }
.cbtn:hover { background: var(--bg-3); }
.cbtn svg { width: 22px; height: 22px; }
.cbtn.off { color: #ff8589; }
.cbtn.on-accent { color: var(--accent); }
.cbtn.leave { background: var(--danger); color: #fff; min-width: 80px; }
.cbtn.leave:hover { background: #c93a3f; }
.divider { width: 1px; height: 34px; background: var(--line); margin: 0 4px; flex: none; }
@media (max-width: 760px) {
  .m-body { grid-template-columns: minmax(0, 1fr); }
  /* 手机：成员/会议记录面板盖在视频上方，占满宽度（不再超出屏幕） */
  .panel { position: absolute; inset: 0; width: auto; border-left: 0; z-index: 5; }
  .m-body { position: relative; }
  .cbtn { min-width: 46px; padding: 6px 4px; }
  .cbtn .lbl { display: none; }
  .m-ctrl { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .m-ctrl .divider { display: none; }
  .cbtn.leave { min-width: 56px; }
  .m-code { display: none; }
  .m-top { gap: 8px; padding: 0 10px; }
  .center-wrap { padding-top: 60px; }
}
html, body { overflow-x: hidden; }

/* 模态框 & 提示 */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 20; padding: 16px; }
.modal { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; width: 100%; max-width: 420px; }
.modal h3 { margin: 0 0 8px; }
.modal p { color: var(--muted); margin: 0 0 18px; }
.modal .row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.toast-box { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 30; pointer-events: none; }
.toast { background: #143428; border: 1px solid var(--line); padding: 9px 16px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.banner { position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%); z-index: 15; }

/* 会后页 */
.ended { width: 100%; max-width: 860px; }
.ended .card { margin-bottom: 18px; }
.md h1, .md h2, .md h3 { margin: 18px 0 8px; font-size: 16px; }
.md table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.md td, .md th { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.md ul { padding-left: 20px; }
.tr-line { padding: 3px 0; }
.tr-line .t { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 8px; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 布局：宫格 / 演讲者 ---------- */
.stage { position: relative; }
.speaker { display: flex; height: 100%; gap: 0; min-height: 0; }
.speaker.pos-right { flex-direction: row; }
.speaker.pos-bottom { flex-direction: column; }
.main-area { flex: 1; min-width: 0; min-height: 0; display: flex; }
.main-area .tile { flex: 1; aspect-ratio: auto; height: 100%; }
.main-area .tile video { object-fit: contain; background: #000; }
.main-area .tile.local:not(.screen) video { object-fit: cover; }
.divider { flex: none; background: transparent; position: relative; z-index: 2; }
.pos-right .divider { width: 10px; cursor: col-resize; }
.pos-bottom .divider { height: 10px; cursor: row-resize; }
.divider::after { content: ""; position: absolute; background: var(--line); border-radius: 2px; }
.pos-right .divider::after { left: 4px; top: 40%; width: 2px; height: 20%; }
.pos-bottom .divider::after { top: 4px; left: 40%; height: 2px; width: 20%; }
.divider:hover::after, .divider.drag::after { background: var(--accent); }
.strip { flex: none; display: flex; gap: 8px; overflow: auto; }
.pos-right .strip { flex-direction: column; width: var(--strip-w, 220px); }
.pos-bottom .strip { flex-direction: row; height: var(--strip-h, 140px); }
.pos-right .strip .tile { width: 100%; flex: none; }
.pos-bottom .strip .tile { height: 100%; flex: none; aspect-ratio: 16/9; width: auto; }
.speaker.strip-hidden .strip, .speaker.strip-hidden .divider { display: none; }
.strip .tile .name { font-size: 12px; padding: 2px 7px; }
.strip .tile .avatar span { width: 44px; height: 44px; font-size: 18px; }

.tile-act { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; z-index: 3; }
.tile:hover .tile-act, .tile.pinned .tile-act { opacity: 1; }
@media (hover: none) { .tile-act { opacity: .85; } }
.tile-act button { width: 28px; height: 28px; border-radius: 6px; border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; padding: 0; }
.tile-act button:hover { background: rgba(0,0,0,.85); }
.tile-act button.on { background: var(--accent); }
.tile-act svg { width: 16px; height: 16px; }
.tile:fullscreen { border: 0; border-radius: 0; }
.tile:fullscreen video { object-fit: contain; }

.lay-wrap { position: relative; }
.lay-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 260px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 0; z-index: 20; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.lay-menu .lay-h { font-size: 11px; color: var(--muted); padding: 8px 14px 4px; }
.lay-menu label { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 6px 14px; color: var(--text); font-size: 13px; cursor: pointer; flex-wrap: wrap; }
.lay-menu label:hover { background: var(--bg-3); }
.lay-menu input { width: auto; margin: 0; accent-color: var(--accent); }
.lay-menu small { flex-basis: 100%; padding-left: 21px; color: var(--muted); font-size: 11px; }
.lay-tip { font-size: 11px; color: var(--muted); padding: 8px 14px 2px; border-top: 1px solid var(--line); margin-top: 6px; }
@media (max-width: 760px) { .lbl-l { display: none; } }

/* 虚拟背景选择面板 */
.bg-menu { position: fixed; z-index: 40; width: 316px; max-width: calc(100vw - 16px); background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.bg-menu .bg-h { font-size: 13px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.bg-menu .bg-h small { font-weight: 400; color: var(--muted); font-size: 11px; }
.bg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bg-opt { background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: stretch; font: inherit; }
.bg-opt .th { display: grid; place-items: center; aspect-ratio: 16/9; border-radius: 7px; border: 2px solid var(--line); background-size: cover; background-position: center; color: var(--muted); overflow: hidden; }
.bg-opt .th.up { border-style: dashed; background: var(--bg-3); }
.bg-opt .lb { font-size: 11px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-opt:hover .th { border-color: var(--muted); }
.bg-opt.on .th { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bg-opt.on .lb { color: var(--text); }
.bg-menu .bg-tip { font-size: 11px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.preview-ctrls { flex-wrap: wrap; }
.bg-opt .th { position: relative; }
.bg-opt .th i.blur { position: absolute; inset: -6px; background-size: cover; background-position: center; }

/* 语言选择 */
.lang-sel { width: auto; padding: 5px 26px 5px 10px; font-size: 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.lang-float { position: fixed; top: 14px; right: 16px; z-index: 30; }
.m-top .lang-sel { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 760px) { .m-top [data-lang-switch] { display: none; } }
/* 拖动分隔条：触屏上不让浏览器把拖动当成页面滚动；手机上加大可拖动区域 */
.speaker .divider { touch-action: none; }
@media (pointer: coarse) {
  .pos-right .divider { width: 18px; }
  .pos-bottom .divider { height: 18px; }
  .pos-right .divider::after { left: 7px; width: 4px; }
  .pos-bottom .divider::after { top: 7px; height: 4px; }
}

/* 账户 / 会员 */
.acc-wrap { width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 16px 40px; display: grid; gap: 16px; }
.notice { padding: 12px 14px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); font-size: 13px; }
.notice.ok { border-color: #1f5f3d; background: #11281c; color: #8fe0b0; }
.notice.warn { border-color: #5b4a1e; background: #2a2412; color: #ffd78a; }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-email { font-size: 17px; font-weight: 600; word-break: break-all; }
.acc-status { margin-top: 12px; color: var(--text); }
.acc-room { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); display: grid; gap: 6px; }
.acc-no { font-size: 24px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.acc-room .btn { justify-self: start; margin-top: 6px; text-decoration: none; }
.acc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acc-detail { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .14); font-size: 14px; }
.acc-detail dt { color: var(--muted); }
.acc-detail dd { margin: 0; }
.acc-detail .ok { color: var(--accent); }
.acc-detail .warn { color: var(--warn); }
.acct-link small { color: var(--muted); font-size: 12px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.acct-link .al-short { display: none; }
@media (max-width: 520px) {   /* 手机：只显示“会员 + 到期日”，不挤出屏幕 */
  .acct-link .al-long { display: none; }
  .acct-link .al-short { display: inline; }
  .acct-link small { max-width: 90px; }
}
.perks { margin: 12px 0 16px; padding-left: 18px; color: var(--text); line-height: 1.8; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.custom-mail { margin-top: 14px; text-decoration: none; word-break: break-all; }
.plan { position: relative; display: grid; gap: 2px; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-3); color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.plan:hover { border-color: var(--accent); }
.plan b { font-size: 22px; }
.plan span { color: var(--muted); font-size: 12px; }
.plan em { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 11px; color: #8fe0b0; }
.acct-link { color: var(--text); text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-3); white-space: nowrap; }
.acct-link .badge { padding: 0 6px; }
.member-note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.member-note a { color: var(--accent); }
.cbtn.locked svg { opacity: .55; }
.cbtn .lock { position: absolute; top: 2px; right: 12px; font-size: 10px; }

/* 品牌细节 */
.m-logo { width: 26px; height: 26px; flex: none; }
.m-top { background: rgba(11, 40, 30, .92); }
.m-ctrl { background: rgba(11, 40, 30, .95); }
.panel { background: var(--bg-2); }
.tabs button.active { color: var(--accent); }
.plan { background: var(--bg-3); }
.plan:hover { box-shadow: var(--glow); }
.plan b { font-family: var(--font-head); color: var(--accent); }
.foot a { color: var(--muted); }
::selection { background: rgba(62, 229, 154, .3); }
.brand-float { position: fixed; top: 12px; left: 16px; z-index: 30; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-float img { width: 32px; height: 32px; }
@media (max-width: 760px) { .brand-float .brand small { display: none; } }
@media (max-width: 520px) {
  .topbar { padding: 14px 16px; gap: 8px; }
  .topbar .brand small { display: none; }
  .hero h1 { font-size: 27px; }
}
/* 很窄的手机：右上角有账户入口时，品牌名让位（只留图标），语言切换不被挤出屏幕 */
@media (max-width: 420px) { .topbar:has(.acct-link:not(.hidden)) .brand { display: none; } }

/* ================= 屏幕特效 ================= */
/* ============ 特效层（不挡点击） ============ */
#fx{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.fx-run{position:absolute;inset:0}
.fx-full{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fx-corner{position:absolute;bottom:-1.5vmin;width:min(62vw,62vh);height:min(62vw,62vh);overflow:visible}
.fx-corner.l{left:-1.5vmin}
.fx-corner.r{right:-1.5vmin;transform:scaleX(-1)}
.fx-side{position:absolute;bottom:0;height:96vh;width:min(36vh,42vw);overflow:visible}
.fx-side.l{left:0}
.fx-side.r{right:0;transform:scaleX(-1)}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%}
.fx-knight{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%) scaleX(-1);aspect-ratio:300/290;overflow:visible;filter:drop-shadow(0 0 2px rgba(255,236,170,.95)) drop-shadow(0 0 14px rgba(255,210,110,.6))}
.fx-glow{position:absolute;inset:0}
.fx-herald-cap{position:absolute;left:50%;transform:translate(-50%,-50%);max-width:min(88vw,900px);display:flex;flex-direction:column;align-items:center;gap:.35em;text-align:center;pointer-events:none}
.fx-hc-text{font-family:"Cinzel","Trajan Pro",Georgia,"Times New Roman","Songti SC","STSong","Noto Serif SC",serif;font-weight:700;font-size:clamp(22px,3.8vw,50px);line-height:1.2;letter-spacing:.06em;max-width:100%;text-wrap:balance;
  background:linear-gradient(100deg,#b8860b 0%,#ffe9a3 30%,#fff8dc 45%,#f3c94e 60%,#b8860b 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(60,30,0,.85)) drop-shadow(0 0 14px rgba(255,200,90,.55))}
.fx-hc-line{width:min(60vw,520px);height:2px;background:linear-gradient(90deg,transparent,#f3c94e 20%,#fff4c4 50%,#f3c94e 80%,transparent);box-shadow:0 0 8px rgba(255,210,110,.7)}
.fx-hero{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%) scaleX(-1);aspect-ratio:240/320;overflow:visible;filter:drop-shadow(0 0 2px rgba(255,214,150,.95)) drop-shadow(0 0 14px rgba(255,150,70,.55))}
/* 谢幕 */
.fx-dim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,rgba(20,8,4,.55),rgba(0,0,0,.86) 70%)}
.fx-curtain{position:absolute;top:0;bottom:0;width:51%;
  background:
    linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 80%,rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(0,0,0,.05) 2.2vw,rgba(255,170,170,.12) 3.4vw,rgba(0,0,0,.05) 4.6vw,rgba(0,0,0,.42) 6.8vw),
    linear-gradient(90deg,#7d0a16,#b3141f 50%,#7d0a16);
  box-shadow:0 0 40px rgba(0,0,0,.6)}
.fx-curtain.l{left:0}
.fx-curtain.r{right:0}
.fx-valance{position:absolute;top:0;left:0;width:100%;height:15vh;overflow:visible;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.fx-actors{position:absolute;left:50%;bottom:2vh;width:min(96vw,1040px,140vh);transform:translateX(-50%);overflow:visible}
.fx-bye{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16px;color:#ffe7a8;text-shadow:0 2px 0 #5a0710,0 0 24px rgba(255,200,90,.45)}
.fx-bye .t1{font-family:Poppins,Georgia,serif;font-size:clamp(36px,8vmin,84px);font-weight:800;letter-spacing:.04em}
.fx-bye .orn{width:clamp(160px,30vmin,300px);height:auto;margin:10px 0}
.fx-bye .t2{margin-top:6px;font-size:clamp(14px,2.6vmin,24px);letter-spacing:.18em;opacity:.9}
.fx-menu { position: fixed; z-index: 40; width: 260px; max-width: calc(100vw - 16px); background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.fx-menu .fx-h { font-size: 13px; font-weight: 600; margin: 0 4px 8px; display: flex; flex-direction: column; gap: 2px; }
.fx-menu .fx-h small { font-weight: 400; color: var(--muted); font-size: 11px; }
.fx-menu .fx-list { display: flex; flex-direction: column; gap: 2px; }
.fx-menu .fx-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.fx-menu .fx-opt:hover { background: var(--bg-3); }
.fx-menu .fx-ic { width: 22px; display: inline-flex; justify-content: center; font-size: 18px; color: #f3d27a; }
.fx-menu .fx-nm { flex: 1; }
.fx-menu .fx-du { color: var(--muted); font-size: 12px; }
.fx-menu .fx-snd { display: flex; align-items: center; gap: 8px; margin: 8px 4px 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); cursor: pointer; }
.fx-menu .fx-snd input { accent-color: var(--accent); width: auto; flex: none; margin: 0; padding: 0; }
.fx-menu .fx-snd span { flex: 1; text-align: left; line-height: 1.4; }

/* ================= 媒体播放（主持人） ================= */
.media-menu { width: 320px; }
.media-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
.media-list li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14px; }
.media-list li.on { background: rgba(62,229,154,.14); color: var(--accent); }
.media-list .mi-n { width: 18px; flex: none; text-align: center; color: var(--muted); font-size: 12px; }
.media-list li.on .mi-n { color: var(--accent); }
.media-list .mi-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-list .mi-t small { margin-left: 6px; font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.media-list .mi-d { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.media-list li.on .mi-d { color: var(--accent); }
.media-list .mi-x { flex: none; width: 22px; height: 22px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.media-list .mi-x:hover { background: var(--bg-3); color: var(--text); }
.media-list .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.media-list .eq b { width: 3px; background: var(--accent); animation: eq .9s ease-in-out infinite alternate; }
.media-list .eq b:nth-child(2) { animation-delay: -.3s; } .media-list .eq b:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { from { height: 3px; } to { height: 12px; } }
.media-add { width: 100%; margin-top: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.media-add:hover { color: var(--text); border-color: var(--accent); }
.media-ctl { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.media-ctl .btn { padding: 8px 18px; font-size: 14px; }
.media-loop { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.media-loop input { accent-color: var(--accent); width: auto; margin: 0; padding: 0; }
.media-vol { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.media-vol .mv-i { width: 20px; text-align: center; font-size: 15px; line-height: 1; }
.media-vol input[type=range] { flex: 1; min-width: 0; width: auto; margin: 0; padding: 0; accent-color: var(--accent); height: 24px; background: transparent; border: 0; }
.media-vol .mv-n { width: 40px; text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.media-tip { margin-top: 8px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.media-menu { max-height: calc(100vh - 16px); overflow: auto; }
.media-sec { margin: 10px 4px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.media-empty { margin: 0 4px 4px; padding: 10px; border-radius: 8px; background: var(--bg-3); font-size: 12px; color: var(--muted); }
.media-lib { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.media-lib li { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; font-size: 14px; }
.media-lib li:hover { background: var(--bg-3); }
.media-lib .mi-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-lib .mi-d { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.media-lib .mi-add { flex: none; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 7px; background: none; color: var(--accent); font-size: 15px; line-height: 1; cursor: pointer; }
.media-lib .mi-add:hover { border-color: var(--accent); background: rgba(62,229,154,.12); }
.media-menu { width: 340px; }
.media-list li { gap: 6px; padding: 5px 6px; background: var(--bg-2); transition: transform .12s ease; }
.media-list li.drag { transition: none; position: relative; z-index: 2; background: var(--bg-3); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.media-list .mi-h { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 26px; color: var(--muted); cursor: grab; touch-action: none; opacity: .7; }
.media-list .mi-h:hover { opacity: 1; color: var(--text); }
.media-list li.drag .mi-h { cursor: grabbing; }
.media-list .mi-n { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.media-list .mi-n .tri { display: none; color: var(--accent); font-size: 11px; }
.media-list li:hover .mi-n .num { display: none; }
.media-list li:hover .mi-n .tri { display: inline; }
.media-list .mi-n:hover { background: rgba(62,229,154,.14); }
@media (hover: none) { .media-list .mi-n .num { display: none; } .media-list .mi-n .tri { display: inline; } }
.media-list .mi-up, .media-list .mi-x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.media-list .mi-up:hover, .media-list .mi-x:hover { background: var(--bg-3); color: var(--text); }
.media-list .mi-sp { flex: none; width: 24px; }
.media-list li.on { background: rgba(62,229,154,.14); }
.media-ctl #mediaNext { padding: 8px 12px; }
.media-ctl #mediaNext:disabled { opacity: .45; cursor: default; }
.media-lib li.in .mi-t { color: var(--muted); }
.media-lib .mi-add:disabled { cursor: default; color: var(--muted); border-color: transparent; background: none; }
.bg-menu { max-height: calc(100vh - 16px); overflow: auto; }
.bg-q { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; margin-bottom: 6px; border-radius: 9px; background: var(--bg-3); }
.bg-q button { padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.bg-q button.on { background: var(--bg-2); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.bg-q button.locked { opacity: .75; }
.bg-stat { min-height: 15px; margin: 0 2px 8px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 手机 / 矮屏：背景、特效、播放面板改为底部弹出的整宽面板，内容多时在面板里滚动，保证每个选项都点得到 */
@media (max-width: 600px), (max-height: 520px) {
  .bg-menu, .fx-menu {
    left: 8px !important; right: 8px !important; top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important; max-width: none !important;
    max-height: calc(100vh - 96px); max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    z-index: 60;
  }
  .bg-menu .bg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bg-opt { min-height: 44px; }
}
/* 手机控制栏：按钮平分宽度，主持人按钮多时也能全部显示（包括“离开”） */
@media (max-width: 760px) {
  .m-ctrl { gap: 2px; justify-content: space-between; padding-left: 6px; padding-right: 6px; }
  .m-ctrl .cbtn { flex: 1 1 0; min-width: 0; max-width: 64px; padding: 6px 2px; }
  .m-ctrl .cbtn.leave { flex: 0 0 auto; min-width: 48px; max-width: none; }
  .m-ctrl .cbtn .lock { right: 2px; }
}
/* 面板右上角的关闭按钮（只在手机/矮屏上显示，桌面点面板外即可关闭） */
.bg-menu .bg-h, .fx-menu .fx-h { position: relative; padding-right: 36px; }
.m-close { display: none; position: absolute; right: -4px; top: -4px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.m-close:hover { background: var(--bg-3); color: var(--text); }
@media (max-width: 600px), (max-height: 520px) { .m-close { display: block; } }
.bg-menu .bg-warn { font-size: 11px; line-height: 1.5; margin-top: 10px; padding: 7px 9px; border-radius: 8px; color: #f5d68a; background: rgba(245,196,81,.1); border: 1px solid rgba(245,196,81,.28); }
.bg-menu .bg-warn + .bg-tip { margin-top: 6px; }

/* ---------- 管理后台 ---------- */
.adm-wrap { max-width: 1100px; margin: 0 auto; padding: 8px 20px 40px; }
.adm-h { font-size: 17px; margin: 26px 0 10px; }
.adm-h small { font-family: var(--font-body, inherit); font-weight: 400; font-size: 12px; color: var(--muted); margin-left: 8px; }
.adm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.adm-card { background: var(--bg-2, #0b281e); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.adm-card .k { font-size: 13px; color: var(--muted); }
.adm-card .v { font-size: 26px; font-weight: 700; margin: 6px 0 4px; }
.adm-card .s { font-size: 12px; color: var(--muted); }
.adm-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.adm-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-t th, .adm-t td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-t th { color: var(--muted); font-weight: 500; background: rgba(0, 0, 0, .15); }
.adm-t tr:last-child td { border-bottom: 0; }
.adm-t .ok, .adm .ok { color: var(--accent); }
.adm-t .warn, .adm .warn { color: var(--warn); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.adm-foot { margin-top: 22px; font-size: 12px; line-height: 1.6; }
#admGate { max-width: 460px; margin: 40px auto; }

/* 首次使用虚拟背景：下载模型的进度提示（页面底部居中，控制栏上方） */
.bg-dl { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 6px; min-width: 240px; max-width: calc(100vw - 32px); padding: 10px 14px;
  background: rgba(6, 26, 19, .94); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font-size: 13px; color: var(--text); pointer-events: none; }
.bg-dl-bar { display: block; height: 4px; border-radius: 2px; background: var(--bg-3); overflow: hidden; }
.bg-dl-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.bg-dl.indet .bg-dl-bar i { animation: bgdl 1.2s ease-in-out infinite; }
@keyframes bgdl { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

/* ---------- PWA：安装按钮与说明 ---------- */
.install-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #1f5a44; border-radius: 8px; background: var(--accent-soft, rgba(62,229,154,.12)); color: var(--accent); font-size: 13px; white-space: nowrap; cursor: pointer; }
.install-btn:hover { background: rgba(62, 229, 154, .2); }
@media (max-width: 520px) { .install-btn span { display: none; } .install-btn { padding: 6px 8px; } }
.pwa-guide { z-index: 80; }
.pwa-guide h3 { margin: 0 0 12px; }
.pwa-guide ol { margin: 0 0 12px; padding-left: 20px; line-height: 1.7; }
.pwa-guide li svg { vertical-align: -3px; color: var(--accent); }
@media (display-mode: standalone) { .install-btn { display: none !important; } }
/* 极窄屏（≤360px）且右上角已有会员入口时，安装按钮让位，避免语言选择被挤出屏幕 */
@media (max-width: 360px) { .topbar:has(.acct-link:not(.hidden)) .install-btn { display: none; } }