:root {
  --bg: #0e1014;
  --bg-2: #161920;
  --bg-3: #1e222b;
  --line: #2a2f3a;
  --text: #e8eaee;
  --muted: #9aa1ad;
  --accent: #3d7bfd;
  --accent-2: #2f66dc;
  --danger: #e5484d;
  --ok: #30a46c;
  --warn: #f5a524;
  --radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
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: var(--bg); color: var(--text); outline: none;
}
input:focus { border-color: var(--accent); }
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: #fff; font-weight: 600;
}
.btn:hover { background: var(--accent-2); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.secondary { background: var(--bg-3); border-color: var(--line); color: var(--text); }
.btn.secondary:hover { background: #262b36; }
.btn.danger { background: var(--danger); }
.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: 30px; height: 30px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; }
.brand { font-weight: 700; font-size: 17px; letter-spacing: .2px; }
.hero { text-align: center; padding: 36px 16px 8px; }
.hero h1 { font-size: 30px; margin: 0 0 8px; }
.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: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.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(--ok); }
.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; }
.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: #9ec1ff; border-color: #24406f; background: #131f36; }
.badge.me { color: #b7f0cf; border-color: #1f4d36; background: #12271c; }
.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: #7fb0ff; }
.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: #242a35; 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; }
.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: #7fb0ff; }
.cbtn.locked svg { opacity: .55; }
.cbtn .lock { position: absolute; top: 2px; right: 12px; font-size: 10px; }