:root {
  --app-height: 100dvh;
  --modal-z: 100000;
  --bg: #070a0f;
  --panel: #101722;
  --panel2: #141d2a;
  --line: rgba(255,255,255,.08);
  --text: #edf4ff;
  --muted: #90a0b6;
  --blue: #36a3ff;
  --blue2: #67d7ff;
  --green: #35d07f;
  --offline: #6e7b8c;
  --danger: #ff6370;
  --radius: 16px;
}
* { box-sizing: border-box; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
body { min-height: var(--app-height); overscroll-behavior: none; touch-action: manipulation; }
button { font: inherit; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.screen { min-height: var(--app-height); padding: max(16px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)); }
.center-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.brand-mark { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 22px; background: linear-gradient(135deg, rgba(54,163,255,.98), rgba(103,215,255,.8)); color: #00101d; font-weight: 900; letter-spacing: 1px; box-shadow: 0 22px 70px rgba(54, 163, 255, .22); }
.loading-text { color: var(--muted); font-size: 15px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.title-block { min-width: 0; }
.title { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.3px; }
.subtitle { margin-top: 5px; color: var(--muted); font-size: 13px; }
.pill { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--muted); font-size: 13px; white-space: nowrap; }
.rooms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.room-card { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); border-radius: var(--radius); overflow: hidden; padding: 0; color: inherit; text-align: left; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.16); -webkit-tap-highlight-color: transparent; }
.room-card:active { opacity: .86; }
.cover { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(circle at 30% 20%, rgba(54,163,255,.35), transparent 28%), linear-gradient(135deg, #111b29, #09101a); display: grid; place-items: center; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-fallback { font-size: 14px; color: rgba(255,255,255,.6); font-weight: 700; letter-spacing: 1px; }
.room-meta { padding: 10px 10px 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-name { font-weight: 700; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.status.online { color: var(--green); }
.status.offline { color: var(--offline); }
.member-box { width: min(420px, 100%); padding: 22px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)); box-shadow: 0 30px 100px rgba(0,0,0,.24); }
.member-title { font-size: 23px; margin: 0 0 8px; }
.member-desc { margin: 0 0 20px; color: var(--muted); line-height: 1.55; }
.btn { width: 100%; height: 48px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--blue), var(--blue2)); color: #00101d; font-weight: 800; cursor: pointer; }
.btn.secondary { margin-top: 10px; color: var(--text); background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.error-box { color: #ffd5d9; background: rgba(255, 99, 112, .08); border: 1px solid rgba(255, 99, 112, .25); padding: 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.player-screen { min-height: var(--app-height); height: var(--app-height); display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); overflow: hidden; }
.player-header { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; flex: 0 0 auto; }
.icon-btn { min-width: 42px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); cursor: pointer; }
.now-title { min-width: 0; flex: 1; }
.now-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-title span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.video-shell { position: relative; width: 100%; background: #000; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); flex: 0 0 auto; }
.player-host { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.player-host video { width: 100%; height: 100%; display: block; background: #000; }
.xg-player-box, .xgplayer { width: 100% !important; height: 100% !important; background: #000 !important; }
.xgplayer video { object-fit: contain; }
.play-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.32); }
.play-overlay.show { display: flex; }
.play-overlay button { width: auto; padding: 0 22px; }
.android-full-btn { display: none; position: absolute; right: 10px; bottom: 10px; width: auto; height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.55); color: #fff; }
body.is-android .android-full-btn { display: inline-flex; align-items: center; justify-content: center; }
.more-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px 9px; color: var(--muted); font-size: 13px; flex: 0 0 auto; }
.more-list { flex: 1 1 auto; overflow-y: auto; padding-bottom: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; -webkit-overflow-scrolling: touch; }
.mini-room { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); text-align: left; cursor: pointer; }
.mini-room.active { border-color: rgba(54,163,255,.7); background: rgba(54,163,255,.14); }
.mini-room small { color: var(--green); white-space: nowrap; }
body.android-page-fullscreen .player-screen { padding: 0; }
body.android-page-fullscreen .player-header,
body.android-page-fullscreen .more-title,
body.android-page-fullscreen .more-list { display: none; }
body.android-page-fullscreen .video-shell { position: fixed; left: 0; top: 0; z-index: 9999; border-radius: 0; border: 0; width: 100vw; height: var(--app-height); }
body.android-page-fullscreen .player-host, body.android-page-fullscreen .xgplayer { width: 100vw !important; height: var(--app-height) !important; aspect-ratio: auto; }
body.android-page-fullscreen .player-host video { width: 100vw; height: var(--app-height); object-fit: contain; }
body.android-page-fullscreen .android-full-btn { z-index: 10000; }

/* xgplayer live UI: hide timeline/progress for live streams where possible. */
.xgplayer .xgplayer-progress,
.xgplayer .xgplayer-progress-btn,
.xgplayer .xgplayer-time,
.xgplayer .xgplayer-time-current,
.xgplayer .xgplayer-time-duration { display: none !important; }
body.is-android .xgplayer .xgplayer-fullscreen { display: flex !important; }

/* Hide live timeline where WebView allows it. iOS native controls may ignore these rules. */
video::-webkit-media-controls-timeline { display: none !important; }
video::-webkit-media-controls-current-time-display { display: none !important; }
video::-webkit-media-controls-time-remaining-display { display: none !important; }
video::-webkit-media-controls-seek-back-button { display: none !important; }
video::-webkit-media-controls-seek-forward-button { display: none !important; }
@media (min-width: 760px) {
  .screen { max-width: 920px; margin: 0 auto; }
  .rooms-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .player-screen { max-width: 920px; margin: 0 auto; }
  .more-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .player-screen { padding: 6px; }
  .player-header { padding-bottom: 6px; }
  .video-shell video { max-height: 58vh; }
}

/* xgplayer only mode */
.player-host,
.xg-player-box,
.xgplayer {
  width: 100% !important;
  height: 100% !important;
  background: #000;
}
.xgplayer video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.xgplayer .xgplayer-progress,
.xgplayer .xgplayer-time,
.xgplayer .xgplayer-time-preview,
.xgplayer .xgplayer-progress-preview {
  display: none !important;
}


/* Lightweight room switcher, only opened from group message startapp context. */
.switch-screen { max-width: 760px; margin: 0 auto; }
.switch-balance { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.04); color: var(--muted); font-size: 13px; }
.switch-notice { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: rgba(54,163,255,.12); border: 1px solid rgba(54,163,255,.22); color: var(--text); font-size: 14px; }
.switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.switch-card { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)); border-radius: 16px; overflow: hidden; color: inherit; text-align: left; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.switch-card:active { opacity: .86; }
.switch-cover { aspect-ratio: 16 / 10; background: #101722; }
.switch-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.switch-card-title { padding: 10px 10px 3px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-card-status { padding: 0 10px 11px; color: var(--green); font-size: 12px; }
.empty-box { grid-column: 1 / -1; padding: 22px; border: 1px solid var(--line); border-radius: 16px; color: var(--muted); text-align: center; background: rgba(255,255,255,.035); }
@media (min-width: 760px) { .switch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* switcher-watch v10 */
.switch-screen { max-width: 860px; margin: 0 auto; }
.switch-header { text-align: center; margin-bottom: 14px; }
.switch-title { margin: 0 0 8px; font-size: 24px; line-height: 1.2; }
.switch-subtitle { color: var(--muted); font-size: 13px; line-height: 1.7; }
.switch-userbar {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 14px; background: rgba(255,255,255,.04); color: var(--text); font-size: 13px;
}
.switch-nick { font-weight: 800; }
.switch-level { color: var(--muted); font-weight: 700; }
.recharge-btn {
  border: 0; border-radius: 999px; padding: 5px 10px; font-size: 12px;
  background: rgba(54,163,255,.16); color: var(--text);
}

/* --- 直播分组标签页 --- */
.switch-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.switch-tab {
  flex: 1;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.switch-tab.active {
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #00101d;
}
.switch-tab:not(.active):active { background: rgba(255,255,255,.06); }

/* --- 会员前端分组标签页(独立类名,视觉跟 .switch-tabs 一致) --- */
.home-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.home-tab {
  flex: 1;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.home-tab.active {
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #00101d;
}
.home-tab:not(.active):active { background: rgba(255,255,255,.06); }

/* --- 家庭台:整卡会员墙，和酒店台分享解锁遮罩保持一致 --- */
.switch-card.member-locked .switch-card-row {
  padding: 11px 12px 12px;
}
.switch-card.member-locked .switch-cover img {
  filter: blur(1.2px) brightness(.68);
  transform: scale(1.01);
}
.member-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(17,24,39,.20), rgba(17,24,39,.72));
  pointer-events: none;
}
.member-lock-title {
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.member-lock-text {
  font-size: 12px;
  line-height: 1.35;
  opacity: .96;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

.switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.switch-card {
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border-radius: 16px; overflow: hidden; color: inherit; text-align: left; padding: 0;
}
.switch-cover { aspect-ratio: 16 / 10; background: #101722; }
.switch-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.switch-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 9px 10px; }
.switch-room-name { min-width: 0; flex: 1; font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-actions { display: flex; gap: 6px; flex-shrink: 0; }
.switch-mini-btn {
  border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px;
  background: rgba(255,255,255,.06); color: var(--text); font-size: 12px; font-weight: 700;
}
.switch-mini-btn.primary { background: rgba(54,163,255,.16); border-color: rgba(54,163,255,.25); }
@media (min-width: 760px) { .switch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* switcher-watch v10.1 fixes */
.switch-subtitle-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 3px 0;
}
.switch-mini-btn.switch-action-switch {
  background: linear-gradient(135deg, #2f8cff, #36c5ff);
  border-color: rgba(47, 140, 255, .55);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(47, 140, 255, .22);
}
.switch-inline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  cursor: default;
  transform: none !important;
  padding: 4px 8px;
  line-height: 1;
}


/* preview metered v6 membership CTA */
.member-join-panel {
  margin: 14px auto 0;
  width: min(520px, 100%);
  padding: 14px 14px 16px;
  border: 1px solid rgba(255, 207, 92, .35);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 207, 92, .12), rgba(255, 255, 255, .045));
  text-align: center;
  box-shadow: 0 16px 38px rgba(255, 183, 42, .08);
}
.member-join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd76a, #ff9f2f);
  color: #201100;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(255, 171, 46, .28);
}
.member-join-copy {
  margin-top: 10px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: .01em;
}

/* invite-entry-unlock-v1 */
.switch-card.locked { position: relative; }
.switch-card.locked .switch-cover img { filter: blur(1.2px) brightness(.74); transform: scale(1.01); }
.switch-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(17,24,39,.16), rgba(17,24,39,.64));
  pointer-events: none;
}
.switch-lock-title { font-size: 15px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.switch-lock-text { font-size: 12px; line-height: 1.35; opacity: .96; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.switch-action-unlock {
  background: linear-gradient(135deg, #ffb020, #ff6b00) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(255,107,0,.22);
}


/* mobile-foundation-v2: unified modal/tap/viewport layer */
.room-card,
.switch-card,
.mini-room,
.home-tab,
.switch-tab,
.switch-mini-btn,
.icon-btn,
.btn,
.recharge-btn,
.member-join-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.room-card,
.switch-card {
  position: relative;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
}

body.modal-open { overflow: hidden; }

.modal-mask {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 100%;
  z-index: var(--modal-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,.52);
  text-align: center;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.modal-box {
  width: min(420px, 92vw);
  max-height: calc(var(--app-height) - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border-radius: 16px;
  padding: 22px 18px 18px;
  background: #fff;
  color: #111827;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  font-size: 15px;
  line-height: 1.65;
}

.modal-title {
  margin: 0 0 14px;
  color: #111827;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
}

.modal-body {
  min-height: 42px;
  color: #374151;
  white-space: pre-line;
  line-height: 1.75;
  text-align: center;
}

.modal-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.modal-btn {
  min-width: 84px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.modal-btn.primary { border: 0; background: #1677ff; color: #fff; }
.modal-btn.secondary { border: 1px solid #d7dbe2; background: #fff; color: #374151; }

@supports (height: 100dvh) {
  :root { --app-height: 100dvh; }
}

@media (max-width: 380px) {
  .rooms-grid,
  .switch-grid,
  .more-list { gap: 9px; }
  .room-name,
  .switch-room-name { font-size: 13px; }
  .switch-mini-btn { padding: 5px 6px; }
}

/* mobile-share-v3: top share button beside recharge */
.switch-userbar .share-btn {
  background: rgba(54,163,255,.16);
  color: var(--text);
  border: 1px solid rgba(54,163,255,.26);
}


/* point-ui-v4: highlight recharge/share actions */
.switch-userbar .recharge-btn {
  border: 1px solid rgba(255, 176, 32, .42);
  background: linear-gradient(135deg, #ffb020, #ff7a00);
  color: #201100;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(255, 122, 0, .22);
}
.switch-userbar .share-btn {
  border: 1px solid rgba(54, 163, 255, .48);
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: #00101d;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(54, 163, 255, .24);
}
.switch-userbar .recharge-btn:active,
.switch-userbar .share-btn:active {
  opacity: .84;
}