/* 私有阁 PC 客户端风格 — hero 演示窗口（浅色 teal 主题，取自 WPF 客户端实际配色） */
/* 原版演示窗口在替换前保持隐藏，避免首屏闪现 */
.hero-demo .chat-app { visibility: hidden; }
.hero-demo { display: flex; }
.hero-demo .pcwin {
  --pc-primary: #10a08c;
  --pc-primary-soft: rgba(16, 160, 140, 0.22);
  --pc-accent: #12b3a0;
  --pc-nav-bg: #f2faf7;
  --pc-list-bg: #eaf5f1;
  --pc-chat-bg: #f7faf9;
  --pc-border: #dfece7;
  --pc-border2: #d2e4dd;
  --pc-sep: #d9e9e3;
  --pc-text: #111827;
  --pc-text2: #6b7280;
  --pc-text3: #9ca3af;
  --pc-bubble: #edf1f0;
  --pc-bubble-text: #1f2937;
  --pc-search-bg: #f4faf8;
  --pc-search-border: #e3efe9;
  --pc-add-bg: #dff0ea;
  --pc-sys-bg: #f2f3f5;
  --pc-sys-text: #9aa3ad;
  --pc-file-bg: #f7f8fa;
  --pc-file-border: #e5e7eb;
  --pc-card-bg: #ffffff;
  --pc-on-primary: #d9f0ea;

  width: 100%;
  display: flex;
  flex-direction: column;
  height: min(560px, calc(100dvh - 168px));
  max-height: 100%;
  min-width: 0;
  background: var(--pc-nav-bg);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(16, 160, 140, 0.18);
  box-shadow: 0 30px 80px rgba(2, 12, 24, 0.55);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  text-align: left;
  color: var(--pc-text);
}

/* ── 标题栏 ─────────────────────────────── */
.pcwin-titlebar {
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  background: var(--pc-nav-bg);
  border-bottom: 1px solid var(--pc-border);
}
.pcwin-brand { font-size: 14px; font-weight: 600; color: #5b6b66; letter-spacing: 0.5px; }
.pcwin-titlebar-right { display: flex; align-items: center; gap: 4px; }
.pcwin-themes { display: flex; align-items: center; gap: 6px; margin-right: 6px; }
.pcwin-dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 0; padding: 0; cursor: pointer;
}
.pcwin-dot.active { box-shadow: 0 0 0 1.5px var(--pc-nav-bg), 0 0 0 3px var(--pc-primary); }
.pcwin-sep { width: 1px; height: 14px; background: var(--pc-border); margin: 0 4px; }
.pcwin-wbtn {
  width: 26px; height: 26px; border: 0; background: transparent; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: #5b6b66; padding: 0;
  cursor: pointer;
}
.pcwin-wbtn.close { color: #ef4444; }
.pcwin-wbtn svg { width: 12px; height: 12px; }

/* ── 主体三栏 ───────────────────────────── */
.pcwin-body { flex: 1; display: flex; min-height: 0; }

/* 左侧导航 72px */
.pcwin-nav {
  width: 72px; flex: none;
  background: var(--pc-nav-bg);
  border-right: 1px solid var(--pc-border);
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0 12px;
}
.pcwin-me {
  width: 40px; height: 40px; border-radius: 10px;
  background-size: cover; background-position: center;
  background-color: #e5e7eb;
  flex: none;
}
.pcwin-navbtns { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.pcwin-navbtn {
  position: relative;
  width: 40px; height: 40px; border: 0; padding: 0; border-radius: 12px;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pcwin-navbtn img { width: 30px; height: 30px; opacity: 0.85; display: block; }
.pcwin-navbtn.active { background: var(--pc-primary-soft); }
.pcwin-navbtn.active img { opacity: 1; }
.pcwin-badge {
  position: absolute; top: 2px; right: 1px;
  min-width: 15px; height: 14px; padding: 0 4px; border-radius: 7px;
  background: #ef4444; color: #fff; font-size: 9px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.pcwin-nav-spacer { flex: 1; }
.pcwin-settings { width: 40px; height: 40px; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; }
.pcwin-settings i { display: block; width: 16px; height: 2px; border-radius: 1px; background: #5b6b66; }

/* 会话列表 220px */
.pcwin-list {
  width: 220px; flex: none;
  background: var(--pc-list-bg);
  border-right: 1px solid var(--pc-border2);
  display: flex; flex-direction: column;
  min-height: 0;
}
.pcwin-list-tools { display: flex; gap: 8px; padding: 12px 12px 8px; flex: none; }
.pcwin-search {
  flex: 1; height: 36px; border-radius: 8px; background: var(--pc-search-bg);
  border: 1px solid var(--pc-search-border);
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  color: var(--pc-text3);
}
.pcwin-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: 13px; color: var(--pc-text); font-family: inherit;
}
.pcwin-search input::placeholder { color: var(--pc-text3); }
.pcwin-search svg { width: 13px; height: 13px; flex: none; }
.pcwin-add {
  width: 36px; height: 36px; flex: none; border: 0; border-radius: 8px;
  background: var(--pc-add-bg); color: var(--pc-text2); font-size: 16px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pcwin-convos { flex: 1; overflow: hidden; margin: 0 0 4px; }
.pcwin-item {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 8px 3px; padding: 11px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.pcwin-item + .pcwin-item::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: -2px; height: 1px; background: var(--pc-sep);
}
.pcwin-item.selected::before { display: none; }
.pcwin-avatar {
  position: relative; width: 44px; height: 44px; flex: none;
  border-radius: 10px; background-size: cover; background-position: center; background-color: #e9ebee;
}
.pcwin-online {
  position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--pc-accent); border: 1.5px solid var(--pc-list-bg);
}
.pcwin-item.selected .pcwin-online { border-color: var(--pc-primary); }
.pcwin-item-main { flex: 1; min-width: 0; }
.pcwin-item-row { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; }
.pcwin-item-name { font-size: 14px; font-weight: 600; color: var(--pc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcwin-item-time { font-size: 10px; color: var(--pc-text3); flex: none; }
.pcwin-item-msg {
  font-size: 11px; color: var(--pc-text2); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcwin-unread {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.pcwin-mute { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--pc-text3); }
.pcwin-item.selected { background: var(--pc-primary); }
.pcwin-item.selected .pcwin-item-name { color: #fff; }
.pcwin-item.selected .pcwin-item-time,
.pcwin-item.selected .pcwin-item-msg { color: var(--pc-on-primary); }

/* 聊天区 */
.pcwin-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--pc-chat-bg); border-bottom-right-radius: 12px; }
.pcwin-chat-top {
  height: 48px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--pc-border);
}
.pcwin-chat-title { font-size: 15px; font-weight: 600; color: var(--pc-text); }
.pcwin-chat-actions { display: flex; gap: 4px; }
.pcwin-chat-actions button {
  width: 32px; height: 32px; border: 0; padding: 0; background: transparent; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.pcwin-chat-actions img { width: 20px; height: 20px; opacity: 0.75; display: block; }

.pcwin-messages { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.pcwin-messages::-webkit-scrollbar { width: 4px; }
.pcwin-messages::-webkit-scrollbar-thumb { background: rgba(107, 114, 128, 0.25); border-radius: 2px; }
.pcwin-time { text-align: center; font-size: 11px; color: var(--pc-text3); margin: 2px 0; }
.pcwin-row { display: flex; gap: 8px; align-items: flex-start; }
.pcwin-row.mine { flex-direction: row-reverse; }
.pcwin-msg-avatar { width: 36px; height: 36px; flex: none; border-radius: 10px; background-size: cover; background-position: center; background-color: #e9ebee; }
.pcwin-bubble {
  max-width: 62%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px; line-height: 1.55;
  background: var(--pc-bubble); color: var(--pc-bubble-text);
  overflow-wrap: break-word;
}
.pcwin-row.mine .pcwin-bubble { background: var(--pc-primary); color: #fff; }
.pcwin-bubble.voice { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.pcwin-wave { display: flex; align-items: center; gap: 2.5px; }
.pcwin-wave i { display: block; width: 2px; border-radius: 1px; background: currentColor; }
.pcwin-row.mine .pcwin-wave { opacity: 0.95; }
.pcwin-sec { font-size: 12px; opacity: 0.85; }

.pcwin-redpacket {
  width: 244px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #f7a24a, #e88c3b);
  color: #fff; display: flex; align-items: center; gap: 10px; padding: 12px;
  border: 0; text-align: left; cursor: pointer; font-family: inherit;
}
.pcwin-redpacket.opened { background: linear-gradient(135deg, #f6e7c8, #efd9af); color: #8a6a2f; }
.pcwin-redpacket.opened .pcwin-rp-coin { color: #c9a55a; }
.pcwin-rp-coin {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: #fff; color: #e88c3b; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pcwin-rp-text { min-width: 0; }
.pcwin-rp-title { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pcwin-rp-sub { font-size: 10px; opacity: 0.85; margin-top: 2px; }

.pcwin-filecard {
  width: 236px; border-radius: 10px; padding: 10px 12px;
  background: var(--pc-file-bg); border: 1px solid var(--pc-file-border);
  display: flex; align-items: center; gap: 10px;
}
.pcwin-row.mine .pcwin-filecard { background: rgba(255, 255, 255, 0.16); border-color: transparent; color: #fff; }
.pcwin-file-ico { width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--pc-primary-soft); color: var(--pc-primary); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pcwin-row.mine .pcwin-file-ico { background: rgba(255, 255, 255, 0.25); color: #fff; }
.pcwin-file-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcwin-file-size { font-size: 10px; opacity: 0.75; margin-top: 2px; }

.pcwin-shot {
  width: 216px; height: 132px; border-radius: 8px;
  background: linear-gradient(135deg, #9ec5f2, #7fa8d9);
  position: relative; overflow: hidden;
}
.pcwin-shot::after {
  content: "截图"; position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 10px; text-align: center; padding: 2px 0;
}

.pcwin-system {
  align-self: center;
  background: var(--pc-sys-bg); border-radius: 8px;
  padding: 4px 10px; font-size: 12px; color: var(--pc-sys-text);
}

/* 输入区 */
.pcwin-composer {
  flex: none; margin: 0 8px 8px;
  background: var(--pc-card-bg); border: 1px solid var(--pc-border); border-radius: 8px;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.06);
  padding: 8px 16px 8px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.pcwin-input {
  width: 100%; min-height: 44px; max-height: 72px; border: 0; outline: none; resize: none;
  font-size: 13px; color: var(--pc-text); font-family: inherit; line-height: 1.5;
  background: transparent; padding: 2px 0;
}
.pcwin-input::placeholder { color: var(--pc-text3); }
.pcwin-tools { display: flex; align-items: center; justify-content: space-between; }
.pcwin-tools-left { display: flex; align-items: center; gap: 2px; }
.pcwin-tool {
  width: 26px; height: 26px; border: 0; padding: 0; background: transparent; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pc-text2); font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.pcwin-tool img { width: 18px; height: 18px; opacity: 0.8; display: block; }
.pcwin-send {
  width: 92px; height: 32px; border: 0; border-radius: 8px;
  background: var(--pc-primary); color: #fff; font-size: 13px; font-weight: 600;
  letter-spacing: 4px;
  font-family: inherit;
  cursor: pointer;
}
.pcwin-send:hover { opacity: 0.92; }

/* 表情面板 */
.pcwin-emoji {
  position: absolute; right: 12px; bottom: 76px; z-index: 5;
  background: var(--pc-card-bg); border: 1px solid var(--pc-border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.16);
  padding: 8px; display: flex; gap: 2px; flex-wrap: wrap; width: 216px;
}
.pcwin-emoji button {
  width: 32px; height: 32px; border: 0; background: transparent; border-radius: 6px;
  font-size: 18px; cursor: pointer; line-height: 1;
}
.pcwin-emoji button:hover { background: var(--pc-primary-soft); }

/* ── 其它导航面板（会议 / 朋友圈 / 通讯录）── */
.pcwin-page { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pcwin-page::-webkit-scrollbar { width: 4px; }
.pcwin-page::-webkit-scrollbar-thumb { background: rgba(107, 114, 128, 0.25); border-radius: 2px; }
.pcwin-meet-hero {
  border-radius: 16px; padding: 18px;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));
  color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pcwin-meet-hero b { font-size: 17px; display: block; }
.pcwin-meet-hero small { font-size: 11px; opacity: 0.85; display: block; margin-top: 4px; }
.pcwin-meet-actions { display: flex; flex-direction: column; gap: 8px; flex: none; }
.pcwin-meet-create {
  border: 0; border-radius: 10px; background: #fff; color: var(--pc-primary);
  font-size: 13px; font-weight: 600; padding: 9px 16px; cursor: pointer; font-family: inherit;
}
.pcwin-meet-join {
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.13);
  color: #fff; font-size: 11px; padding: 7px 12px; cursor: pointer; font-family: inherit; text-align: center;
}
.pcwin-meet-join input {
  width: 88px; border: 0; background: transparent; outline: none; color: #fff;
  font-size: 11px; font-family: Consolas, "Courier New", monospace;
}
.pcwin-meet-join input::placeholder { color: rgba(255, 255, 255, 0.75); }
.pcwin-meet-card {
  background: var(--pc-card-bg); border: 1px solid var(--pc-border); border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.pcwin-meet-name { font-size: 13px; font-weight: 600; color: var(--pc-text); }
.pcwin-meet-meta { font-size: 11px; color: var(--pc-text2); margin-top: 3px; }
.pcwin-meet-tag { font-size: 10px; padding: 3px 8px; border-radius: 7px; background: var(--pc-primary-soft); color: var(--pc-primary); font-weight: 600; flex: none; }

.pcwin-moment {
  background: var(--pc-card-bg); border: 1px solid var(--pc-border); border-radius: 12px; padding: 12px;
}
.pcwin-moment-head { display: flex; align-items: center; gap: 8px; }
.pcwin-moment-ava { width: 32px; height: 32px; border-radius: 8px; background-size: cover; background-position: center; background-color: #e9ebee; flex: none; }
.pcwin-moment-name { font-size: 12px; font-weight: 600; color: var(--pc-text); }
.pcwin-moment-time { font-size: 10px; color: var(--pc-text3); margin-top: 1px; }
.pcwin-moment-text { font-size: 12px; color: var(--pc-text2); line-height: 1.6; margin: 8px 0; }
.pcwin-moment-pic { height: 96px; border-radius: 8px; }
.pcwin-moment-foot { display: flex; gap: 14px; margin-top: 8px; }
.pcwin-like {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-size: 11px; color: #999; display: flex; align-items: center; gap: 4px; font-family: inherit;
}
.pcwin-like.liked { color: #ff4d4f; }

.pcwin-contact { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--pc-border); }
.pcwin-contact-ava { width: 36px; height: 36px; border-radius: 10px; background-size: cover; background-position: center; background-color: #e9ebee; flex: none; }
.pcwin-contact-name { font-size: 13px; font-weight: 600; color: var(--pc-text); }
.pcwin-contact-sign { font-size: 11px; color: var(--pc-text3); margin-top: 2px; }
.pcwin-letter { font-size: 11px; font-weight: 700; color: var(--pc-text3); margin: 6px 0 2px; }

/* Toast */
.pcwin-toast {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
  background: rgba(17, 24, 39, 0.82); color: #fff; font-size: 12px;
  border-radius: 8px; padding: 7px 14px; z-index: 20;
  opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none;
  white-space: nowrap;
}
.pcwin-toast.show { opacity: 1; transform: translateX(-50%) translateY(4px); }

/* 深色主题变量 */
.pcwin.theme-dark {
  --pc-nav-bg: #16161a;
  --pc-list-bg: #1e1e23;
  --pc-chat-bg: #1a1a1a;
  --pc-border: #2e2e36;
  --pc-border2: #2e2e36;
  --pc-sep: #2a2a31;
  --pc-text: #f4f4f5;
  --pc-text2: #a5a8b5;
  --pc-text3: #7c8090;
  --pc-bubble: #26262d;
  --pc-bubble-text: #e5e7eb;
  --pc-search-bg: #232329;
  --pc-search-border: #2e2e36;
  --pc-add-bg: #26262d;
  --pc-sys-bg: #26262d;
  --pc-sys-text: #8b8f9c;
  --pc-file-bg: #232329;
  --pc-file-border: #2e2e36;
  --pc-card-bg: #202024;
  --pc-on-primary: rgba(255, 255, 255, 0.72);
}
.pcwin.theme-dark .pcwin-brand,
.pcwin.theme-dark .pcwin-settings i { color: #a5a8b5; }
.pcwin.theme-dark .pcwin-settings i { background: #a5a8b5; }

/* ---- 新增页面变量 ---- */
.pcwin {
  --pc-page-bg: #eaf5f1;
  --pc-line: #e8edf1;
  --pc-soft: #f6f8fa;
  --pc-bubble2: #f2f2f7;
  --pc-hover: #f3f4f6;
  --pc-card-border: #ebeef2;
  --pc-sep2: #eef2f5;
  --pc-primary-deep: #0c9583;
  --pc-primary-glow: rgba(16, 160, 140, 0.45);
}
.pcwin.theme-dark {
  --pc-page-bg: #1e1e23;
  --pc-line: #2e2e36;
  --pc-soft: #232329;
  --pc-bubble2: #26262d;
  --pc-hover: #26262d;
  --pc-card-border: #2e2e36;
  --pc-sep2: #2a2a31;
  --pc-primary-glow: rgba(0, 0, 0, 0.45);
}
.pcwin.theme-dark .pc-meet-code b,
.pcwin.theme-dark .pc-meet-create,
.pcwin.theme-dark .pc-meet-code button,
.pcwin.theme-dark .pc-moments-side .dhd .pub,
.pcwin.theme-dark .pc-cgroup-hd .cnt { color: var(--pc-primary); }
.pcwin.theme-dark .pc-moment-card .pics i { filter: brightness(0.8); }

/* ---- 二级页面（会议大厅 / 朋友圈 / 通讯录），铺满导航右侧 ---- */
.pcwin-list.hidden { display: none; }
.pcwin-chat.page {
  display: block; overflow-y: auto;
  background: var(--pc-page-bg);
  border-bottom-right-radius: 12px;
}
.pcwin-chat.page::-webkit-scrollbar { width: 4px; }
.pcwin-chat.page::-webkit-scrollbar-thumb { background: rgba(107,114,128,.25); border-radius: 2px; }

/* ---- 会议大厅 ---- */
.pc-meet-hero {
  margin: 14px 14px 4px; border-radius: 20px; position: relative;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));
  box-shadow: 0 14px 26px -8px var(--pc-primary-glow);
  padding: 16px 16px 13px;
}
.pc-meet-hero .ring1, .pc-meet-hero .ring2 { position: absolute; border: 1.4px solid rgba(255,255,255,.15); border-radius: 50%; }
.pc-meet-hero .ring1 { width: 96px; height: 96px; right: 70px; top: 50%; margin-top: -48px; }
.pc-meet-hero .ring2 { width: 56px; height: 56px; right: 44px; top: 50%; margin-top: -22px; border-color: rgba(255,255,255,.2); }
.pc-meet-hero .dot3 { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); right: 130px; top: 26px; }
.pc-meet-hero .hd { display: flex; justify-content: space-between; align-items: flex-start; }
.pc-meet-hero h3 { margin: 0; font-size: 21px; font-weight: 700; color: #fff; }
.pc-meet-hero p { margin: 6px 0 0; font-size: 12.5px; color: rgba(255,255,255,.9); }
.pc-meet-refresh {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.pc-meet-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pc-meet-create {
  border: 0; border-radius: 11px; padding: 9px 20px; background: #fff; cursor: pointer;
  color: var(--pc-primary-deep); font-size: 14px; font-weight: 600; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px;
}
.pc-meet-join {
  display: inline-flex; align-items: center; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.13); padding: 5px 6px;
}
.pc-meet-join svg { width: 14px; height: 14px; margin-left: 6px; color: rgba(255,255,255,.85); }
.pc-meet-join input {
  width: 128px; border: 0; background: transparent; outline: none; color: #fff;
  font-size: 12.5px; padding: 6px 8px; font-family: inherit;
}
.pc-meet-join input::placeholder { color: rgba(255,255,255,.75); }
.pc-meet-join .sep { width: 1px; height: 20px; background: rgba(255,255,255,.2); margin: 0 4px; }
.pc-meet-join button {
  border: 0; border-radius: 9px; padding: 7px 14px; background: rgba(255,255,255,.18);
  color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.pc-meet-sec { display: flex; align-items: center; gap: 7px; margin: 14px 2px 8px; }
.pc-meet-sec .gdot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.pc-meet-sec b { font-size: 13px; font-weight: 700; color: var(--pc-text2); }
.pc-meet-sec .cnt { font-size: 11px; font-weight: 600; border-radius: 9px; padding: 2px 8px; background: rgba(34,197,94,.08); color: #16a34a; }
.pc-meet-sec.ended b { color: #8a94a0; }
.pc-meet-sec.ended .cnt { background: #f1f4f7; color: #8a94a0; }
.pc-meet-cards { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 14px 18px; }
.pc-meet-cards.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 14px 16px; }
.pc-meet-cards.grid3 .pc-meet-card { width: auto; }
.pc-meet-cards.grid3 .pc-meet-banner { height: 44px; padding: 0 10px; }
.pc-meet-cards.grid3 .pc-meet-banner .ico { width: 26px; height: 26px; border-radius: 8px; }
.pc-meet-cards.grid3 .pc-meet-banner .ico svg { width: 12px; height: 12px; }
.pc-meet-cards.grid3 .pc-meet-banner .pill { padding: 2px 7px; font-size: 10px; gap: 4px; }
.pc-meet-cards.grid3 .pc-meet-banner .pill i { width: 4px; height: 4px; }
.pc-meet-cards.grid3 .pc-meet-body { padding: 9px 11px 0; }
.pc-meet-cards.grid3 .pc-meet-body h4 { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-meet-cards.grid3 .pc-meet-host { font-size: 10.5px; gap: 5px; margin-top: 6px; }
.pc-meet-cards.grid3 .pc-meet-host .hava { width: 16px; height: 16px; }
.pc-meet-cards.grid3 .pc-meet-code { height: 25px; margin: 8px 0 9px; padding: 0 8px; gap: 5px; }
.pc-meet-cards.grid3 .pc-meet-code small { font-size: 9.5px; }
.pc-meet-cards.grid3 .pc-meet-code b { font-size: 11.5px; }
.pc-meet-cards.grid3 .pc-meet-foot { padding: 6px 11px 8px; }
.pc-meet-cards.grid3 .pc-meet-foot .ppl { font-size: 10.5px; gap: 4px; }
.pc-meet-cards.grid3 .pc-meet-foot .ppl svg { width: 11px; height: 11px; }
.pc-meet-cards.grid3 .pc-meet-foot .cta { padding: 5px 9px; font-size: 11px; gap: 3px; }
.pc-meet-cards.grid3 .pc-meet-foot .cta svg { width: 10px; height: 10px; }
.pc-meet-card {
  width: 318px; border-radius: 16px; overflow: hidden; background: var(--pc-card-bg);
  border: 1px solid var(--pc-line); box-shadow: 0 10px 22px -6px var(--pc-primary-glow);
}
.pc-meet-banner {
  height: 54px; position: relative;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
}
.pc-meet-card.ended .pc-meet-banner { background: linear-gradient(135deg, #d6dce3, #b9c2cc); }
.pc-meet-card.ended { opacity: .85; }
.pc-meet-banner .ico {
  width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px;
}
.pc-meet-banner .pill {
  border-radius: 99px; padding: 3px 10px; background: rgba(255,255,255,.18);
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #fff;
}
.pc-meet-banner .pill i { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.pc-meet-card.ended .pc-meet-banner .pill { background: rgba(255,255,255,.85); color: #6b7280; }
.pc-meet-card.ended .pc-meet-banner .pill i { background: #9ca3af; }
.pc-meet-body { padding: 12px 15px 0; }
.pc-meet-body h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--pc-text); }
.pc-meet-host { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 12px; color: #4b5563; }
.pc-meet-host .hava { width: 20px; height: 20px; border-radius: 50%; background-size: cover; background-position: center; background-color: #e5e7eb; }
.pc-meet-host .sep { color: #c4cbd4; }
.pc-meet-host .tm { font-size: 11px; color: var(--pc-text3); }
.pc-meet-code {
  height: 30px; margin: 12px 0 13px; border-radius: 9px; background: var(--pc-soft);
  display: flex; align-items: center; padding: 0 11px; gap: 8px;
}
.pc-meet-code small { font-size: 10.5px; color: var(--pc-text3); }
.pc-meet-code b { font-size: 13.5px; font-weight: 600; font-family: Consolas, 'Courier New', monospace; color: var(--pc-primary-deep); flex: 1; }
.pc-meet-code button { border: 0; background: transparent; color: var(--pc-primary-deep); font-size: 10.5px; cursor: pointer; padding: 2px 4px; border-radius: 5px; font-family: inherit; }
.pc-meet-foot {
  border-top: 1px solid var(--pc-sep2); padding: 8px 15px 11px;
  display: flex; align-items: center; justify-content: space-between;
}
.pc-meet-foot .ppl { font-size: 12px; font-weight: 600; color: var(--pc-text2); display: inline-flex; align-items: center; gap: 5px; }
.pc-meet-foot .cta {
  border: 0; border-radius: 9px; padding: 7px 14px; cursor: pointer;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-primary-deep));
  color: #fff; font-size: 12.5px; font-weight: 600; font-family: inherit;
}

/* ---- 朋友圈 ---- */
.pcwin-chat.page.moments { display: flex; flex-direction: column; overflow: hidden; }
.pc-moments { flex: 1; min-height: 0; display: flex; position: relative; }
.pc-moments-feed {
  flex: 1; min-width: 0; padding: 0 10px 20px; position: relative;
  overflow-y: auto;
}
.pc-moments-feed::-webkit-scrollbar { width: 4px; }
.pc-moments-feed::-webkit-scrollbar-thumb { background: rgba(107,114,128,.25); border-radius: 2px; }
.pc-moments-cover {
  height: 150px; border-radius: 12px; position: relative; margin: 10px 0 0;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));
}
.pc-moments-cover .b1, .pc-moments-cover .b2 { position: absolute; border-radius: 50%; }
.pc-moments-cover .b1 { width: 110px; height: 110px; background: rgba(255,255,255,.08); right: -18px; top: -18px; }
.pc-moments-cover .b2 { width: 90px; height: 90px; background: rgba(255,255,255,.06); left: -18px; bottom: -18px; }
.pc-moments-cover .who {
  position: absolute; right: 12px; bottom: -24px; display: flex; align-items: center; gap: 10px; z-index: 2;
}
.pc-moments-cover .who b { font-size: 13px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pc-moments-cover .who .ava {
  width: 54px; height: 54px; border-radius: 16px; background: #fff; padding: 3px; box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(17,24,39,.18);
}
.pc-moments-cover .who .ava img { display: block; width: 100%; height: 100%; border-radius: 13px; object-fit: cover; }
.pc-moments-cover .who .ava i {
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));
  color: #fff; font-style: normal; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 13px;
}
.pc-moments-list { margin-top: 42px; display: flex; flex-direction: column; gap: 9px; }
.pc-moment-card { background: var(--pc-card-bg); border-radius: 14px; padding: 13px 14px; box-shadow: 0 4px 12px rgba(15,23,42,.04); cursor: pointer; }
.pc-moment-card .hd { display: flex; align-items: center; gap: 10px; }
.pc-moment-card .ava {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));
  background-size: cover; background-position: center;
  color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.pc-moment-card .name { font-size: 13px; font-weight: 600; color: #576b95; }
.pc-moment-card .txt { font-size: 13px; color: var(--pc-text); line-height: 1.5; margin-top: 7px; }
.pc-moment-card .pics { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pc-moment-card .pics i { width: 30%; padding-bottom: 30%; border-radius: 6px; background: #f0f0f0; background-size: cover; background-position: center; }
.pc-moment-card .pics i.p1 { background: linear-gradient(135deg, #a7c7e7, #8fb0d8); }
.pc-moment-card .pics i.p2 { background: linear-gradient(135deg, #ffe0b2, #ffcc80); }
.pc-moment-card .pics i.p3 { background: linear-gradient(135deg, #c8e6c9, #a5d6a7); }
.pc-moment-card .ft { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.pc-moment-card .tm { font-size: 11px; color: #8e8e93; }
.pc-moment-card .ops { display: flex; gap: 8px; }
.pc-moment-card .ops button { border: 0; background: transparent; border-radius: 8px; padding: 4px 8px; cursor: pointer; font-size: 11px; color: #8e8e93; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; }
.pc-moment-card .ops button:hover { background: var(--pc-hover); }
.pc-moment-card .ops button.liked { color: #ff4d4f; }
.pc-moment-card .ops .pcwin-like svg { width: 13px; height: 13px; fill: #999999; stroke: none; }
.pc-moment-card .ops .pcwin-like.liked svg { fill: #ff4d4f; }
.pc-moment-card .ops .pcwin-like span { color: #8e8e93; }
.pc-moment-bubble { margin-top: 8px; background: var(--pc-bubble2); border-radius: 4px; padding: 7px 9px; }
.pc-moment-bubble .lrow { font-size: 11.5px; color: var(--pc-text); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pc-moment-bubble .lrow .h { color: #ff3b30; }
.pc-moment-bubble .lrow b { color: #576b95; font-weight: 600; }
.pc-moment-bubble .div { height: 1px; background: #d9d9d9; margin: 5px 0; }
.pc-moment-bubble .crow { font-size: 11.5px; color: var(--pc-text); line-height: 1.5; }
.pc-moment-bubble .crow b { color: #576b95; font-weight: 600; }
.pc-moments-fab {
  position: absolute; right: 183px; bottom: 30px; z-index: 6;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-primary-deep));
  box-shadow: 0 8px 18px -4px var(--pc-primary-glow); color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.pc-moments-side {
  width: 196px; flex: none; margin: 10px 10px 12px 26px; align-self: stretch;
  background: var(--pc-card-bg); border: 1px solid var(--pc-card-border); border-radius: 14px;
  box-shadow: 0 10px 20px rgba(15,23,42,.08); min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.pc-moments-side .empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px 12px; }
.pc-moments-side .empty svg { width: 34px; height: 34px; color: #d3d9e0; }
.pc-moments-side .empty span { font-size: 11px; color: var(--pc-text3); text-align: center; }
.pc-moments-side .dhd {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--pc-sep2); padding: 9px 12px;
}
.pc-moments-side .dhd b { font-size: 12.5px; font-weight: 600; color: var(--pc-text); }
.pc-moments-side .dhd .back { border: 0; background: transparent; color: var(--pc-text2); font-size: 12px; cursor: pointer; padding: 2px 4px; font-family: inherit; }
.pc-moments-side .dhd .pub { border: 0; border-radius: 12px; background: var(--pc-add-bg); color: var(--pc-primary-deep); font-size: 11px; padding: 3px 10px; cursor: pointer; font-family: inherit; }
.pc-moments-side .dbody { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.pc-moments-side .dbody::-webkit-scrollbar { width: 4px; }
.pc-moments-side .dbody::-webkit-scrollbar-thumb { background: rgba(107,114,128,.25); border-radius: 2px; }
.pc-moments-side .dauthor { display: flex; align-items: center; gap: 8px; }
.pc-moments-side .dauthor .ava { width: 34px; height: 34px; border-radius: 10px; background-size: cover; background-position: center; background-color: #e5e7eb; }
.pc-moments-side .dauthor b { font-size: 12px; font-weight: 600; color: #576b95; display: block; }
.pc-moments-side .dauthor small { font-size: 10px; color: var(--pc-text3); }
.pc-moments-side .dtxt { font-size: 12px; color: var(--pc-text); line-height: 1.6; margin-top: 9px; }
.pc-moments-side .dpics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pc-moments-side .dpics i { width: 31%; padding-bottom: 31%; border-radius: 6px; background-size: cover; background-position: center; }
.pc-moments-side .dpics i.big { width: 100%; padding-bottom: 62%; }
.pc-moments-cover.cover-photo {
  background-size: cover; background-position: center;
}

/* 「多端同步」区块底色与「功能特性」区块一致（深浅主题都跟随变量） */
#devices.devices-section { background: linear-gradient(180deg, var(--bg), var(--bg-soft), var(--bg)); }

/* devices 左栏：H5 真机预览手机壳 */
.h5-phone { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.h5-phone-frame {
  position: absolute; top: 216px; left: 168px; z-index: 2;
  width: 292px; height: 596px; border-radius: 40px;
  background: #0b1220; border: 9px solid #141b28;
  box-shadow: 0 34px 80px rgba(2, 12, 24, 0.7), 0 0 0 1px rgba(125, 169, 231, 0.14);
  display: flex; flex-direction: column; overflow: hidden;
}
.h5-statusbar {
  flex: none; height: 26px; background: #0b1220; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; font-size: 11px; font-weight: 600;
}
.h5-sig { letter-spacing: 2px; }
.h5-sig::after { content: "▮▮▮ ⌁"; font-size: 9px; letter-spacing: 1px; }
.h5-screen { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #eaf5f1; }
.h5-frame {
  width: 390px; height: 812px; border: 0; display: block;
  transform: scale(0.7026); transform-origin: 0 0; background: #eaf5f1;
}
.h5-homebar {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.8); z-index: 5;
  pointer-events: none;
}
/* PC 演示窗静态副本（黑色主题），叠在 H5 手机上方 */
.h5-phone { display: block; position: relative; width: 500px; max-width: 100%; height: 872px; }
.h5-pcwrap {
  position: absolute; top: 0; left: 0;
  width: 468px; max-width: 100%; height: 366px; overflow: hidden; border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 26px 60px rgba(2, 12, 24, 0.55);
}
.h5-pcwrap .pcwin { width: 718px; height: 560px; transform: scale(0.6518); transform-origin: 0 0; }
.h5-pcwrap .pcwin textarea, .h5-pcwrap .pcwin input { pointer-events: none; }
.h5-homebar {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.8); z-index: 5;
  pointer-events: none;
}
.h5-chips { position: absolute; top: 836px; left: 170px; display: flex; gap: 8px; }
.h5-chip {
  border: 1px solid rgba(125, 169, 231, 0.28); background: rgba(13, 20, 32, 0.55);
  color: #c6d4ea; font-size: 12px; padding: 5px 16px; border-radius: 999px; cursor: pointer;
  font-family: inherit;
}
.h5-chip.active { background: var(--primary, #4c9bff); color: #fff; border-color: transparent; }
.pc-moments-side .dcomment {
  flex: none; border-top: 1px solid var(--pc-sep2); padding: 8px 10px;
  display: flex; align-items: center; gap: 6px;
}
.pc-moments-side .dcomment input {
  flex: 1; min-width: 0; height: 26px; border: 0; outline: none;
  background: var(--pc-soft); border-radius: 7px; padding: 0 9px;
  font-size: 11.5px; color: var(--pc-text); font-family: inherit;
}
.pc-moments-side .dcomment input::placeholder { color: var(--pc-text3); }
.pc-moments-side .dcomment button {
  flex: none; border: 0; border-radius: 7px; padding: 5px 10px; cursor: pointer;
  background: var(--pc-primary); color: #fff; font-size: 11.5px; font-weight: 600; font-family: inherit;
}

/* ---- 通讯录 ---- */
.pc-contacts { display: flex; min-height: 100%; }
.pc-contacts-left {
  width: 220px; flex: none; background: var(--pc-nav-bg);
  border-right: 1px solid var(--pc-border); overflow-y: auto;
}
.pc-contacts-left::-webkit-scrollbar { width: 4px; }
.pc-contacts-left::-webkit-scrollbar-thumb { background: rgba(107,114,128,.25); border-radius: 2px; }
.pc-cgroup-hd {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--pc-search-bg); border-bottom: 1px solid var(--pc-sep);
  font-size: 13.5px; font-weight: 600; color: var(--pc-text2);
}
.pc-cgroup-hd .cnt { margin-left: auto; font-size: 10px; font-weight: 600; border-radius: 9px; padding: 1px 5px; background: var(--pc-add-bg); color: var(--pc-primary-deep); }
.pc-cgroup-hd .red { margin-left: auto; font-size: 10px; font-weight: 600; border-radius: 9px; min-width: 18px; text-align: center; padding: 1px 5px; background: #ef4444; color: #fff; }
.pc-cgroup-hd .arrow { font-size: 9px; opacity: .7; }
.pc-crow { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--pc-sep); cursor: pointer; }
.pc-crow:hover { background: var(--pc-hover); }
.pc-crow .gava {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));
  color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.pc-crow .rava, .pc-crow .fava { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; background-color: #e5e7eb; flex: none; }
.pc-crow .info { flex: 1; min-width: 0; }
.pc-crow .info b { display: block; font-size: 13.5px; font-weight: 600; color: var(--pc-text); }
.pc-crow .info small { display: block; font-size: 11px; color: var(--pc-text2); margin-top: 2px; }
.pc-crow .info .st { font-size: 10.5px; color: var(--pc-text3); margin-top: 2px; }
.pc-crow.req { flex-wrap: wrap; }
.pc-crow.req .info { flex: 1; min-width: 0; }
.pc-crow.req .btns { width: 100%; display: flex; justify-content: flex-end; gap: 6px; margin: 2px 0 0; }
.pc-crow .btns { display: flex; gap: 6px; flex: none; }
.pc-crow .btns button { width: 52px; height: 27px; border-radius: 7px; border: 0; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.pc-crow .btns .ok { background: #16a34a; color: #fff; }
.pc-crow .btns .no { background: var(--pc-chat-bg); border: 1px solid var(--pc-file-border); color: var(--pc-text); }
.pc-cfriends { background: var(--pc-card-bg); }
.pc-cfriends .pc-crow { border-bottom: 1px solid var(--pc-hover); padding: 8px 12px; }
.pc-cfriends .pc-crow.sel { background: var(--pc-add-bg); }
.pc-profile { flex: 1; min-width: 0; }
.pc-profile-cover {
  height: 150px; margin: 12px 14px 0; border-radius: 14px; position: relative;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));
}
.pc-profile-cover .shade { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.25)); }
.pc-profile-cover .who { position: absolute; right: 18px; bottom: 14px; display: flex; align-items: center; gap: 12px; }
.pc-profile-cover .who b { font-size: 19px; font-weight: 600; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.4); }
.pc-profile-cover .who .ava { width: 62px; height: 62px; border-radius: 19px; background: #fff; padding: 3px; box-sizing: border-box; }
.pc-profile-cover .who .ava i { display: block; width: 100%; height: 100%; border-radius: 16px; background-size: cover; background-position: center; background-color: #e5e7eb; }
.pc-profile-card {
  background: var(--pc-card-bg); border-radius: 15px; margin: 6px 14px 0; padding: 16px 18px 18px;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}
.pc-profile-btns { display: flex; gap: 10px; align-items: center; }
.pc-profile-btns .send {
  flex: 1; height: 40px; border: 0; border-radius: 11px; cursor: pointer;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-primary-deep));
  color: #fff; font-size: 13.5px; font-weight: 600; font-family: inherit;
}
.pc-profile-btns .cbtn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: var(--pc-add-bg); color: var(--pc-primary-deep); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.pc-profile-rows { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.pc-profile-row {
  background: var(--pc-soft); border-radius: 10px; padding: 9px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.pc-profile-row small { font-size: 12px; color: #8e8e93; }
.pc-profile-row span { font-size: 13px; color: var(--pc-text); }
.pc-pmom-label { font-size: 13px; font-weight: 600; color: var(--pc-text2); margin: 16px 16px 8px; }
.pc-pmom { background: var(--pc-card-bg); border-radius: 12px; margin: 0 14px 12px; padding: 12px 14px; box-shadow: 0 4px 12px rgba(15,23,42,.04); }
.pc-pmom .hd { display: flex; align-items: center; gap: 9px; }
.pc-pmom .hd .ava { width: 34px; height: 34px; border-radius: 10px; background-size: cover; background-position: center; background-color: #e5e7eb; }
.pc-pmom .hd b { font-size: 12.5px; font-weight: 600; color: #576b95; display: block; }
.pc-pmom .hd small { font-size: 10px; color: var(--pc-text3); }
.pc-pmom .txt { font-size: 12.5px; color: var(--pc-text); line-height: 1.55; margin-top: 7px; }
.pc-pmom .like { font-size: 11px; color: #8e8e93; margin-top: 7px; display: inline-flex; align-items: center; gap: 4px; }
.pc-pmom .like .h { color: #ff3b30; }

/* ---- devices 实例图轮播 ---- */
.dev-carousel {
  position: relative; overflow: hidden;
}
.dev-track { display: flex; transition: transform 0.55s ease; }
.dev-track img {
  flex: none; width: 100%; height: 322px; object-fit: cover;
  cursor: zoom-in; user-select: none; -webkit-user-drag: none;
}
.dev-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(10, 16, 28, 0.45); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
.dev-nav:hover { background: rgba(10, 16, 28, 0.7); }
.dev-nav.prev { left: 12px; }
.dev-nav.next { right: 12px; }
.dev-nav svg { width: 18px; height: 18px; }
.dev-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 3;
}
.dev-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.55);
  cursor: pointer; transition: background 0.2s, width 0.2s;
}
.dev-dots i.on { background: #fff; width: 18px; border-radius: 4px; }

/* 放大预览层 */
.dev-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(3, 7, 18, 0.88); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.dev-lightbox[hidden] { display: none; }
.dev-lightbox img {
  max-width: 88vw; max-height: 86vh; object-fit: contain;
  border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.dev-lb-close {
  position: absolute; top: 22px; right: 26px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.dev-lb-close:hover { background: rgba(255, 255, 255, 0.26); }
.dev-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.dev-lb-nav:hover { background: rgba(255, 255, 255, 0.24); }
.dev-lb-nav.prev { left: 26px; }
.dev-lb-nav.next { right: 26px; }
.dev-lb-nav svg { width: 20px; height: 20px; }
.dev-lb-count {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85); font-size: 13px; letter-spacing: 1px;
}

/* ---- 会议中（MeetingRoomView）：覆盖整个窗口体 ---- */
.pcwin-nav.hidden, .pcwin-list.hidden { display: none; }
.pc-room { display: flex; flex-direction: column; min-height: 100%; }
.pc-room-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pc-room-info b { display: block; font-size: 15px; font-weight: 600; color: #1f2937; }
.pc-room-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.pc-room-live {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 3px 9px;
  background: rgba(34, 197, 94, 0.08);
}
.pc-room-live i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.pc-room-live em { font-style: normal; font-size: 11px; font-weight: 600; color: #16a34a; }
.pc-room-live .dur { font-family: Consolas, "Courier New", monospace; color: #15803d; }
.pc-room-code {
  border-radius: 8px; padding: 3px 9px; background: var(--pc-add-bg);
  font-family: Consolas, "Courier New", monospace; font-size: 11px; font-weight: 600; color: var(--pc-primary-deep);
}
.pc-room-host { font-size: 11px; color: var(--pc-text2); }
.pc-room-ctrl { display: flex; align-items: center; gap: 6px; }
.pc-room-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--pc-hover); color: #374151;
  display: flex; align-items: center; justify-content: center;
}
.pc-room-btn.off { background: #fdecec; color: #e5484d; }
.pc-room-leave {
  border: 0; border-radius: 12px; padding: 8px 14px; cursor: pointer;
  background: #e5484d; color: #fff; font-size: 12.5px; font-weight: 600; font-family: inherit;
}
.pc-room-leave:hover { background: #c93a42; }
.pc-room-body { flex: 1; min-height: 0; display: flex; gap: 10px; }
.pc-room-vids {
  width: 108px; flex: none; display: flex; flex-direction: column; gap: 8px;
  background: var(--pc-card-bg); border: 1px solid var(--pc-border); border-radius: 14px; padding: 6px;
  overflow-y: auto;
}
.pc-room-vids::-webkit-scrollbar { width: 4px; }
.pc-room-vids::-webkit-scrollbar-thumb { background: rgba(107,114,128,.25); border-radius: 2px; }
.pc-tile {
  position: relative; height: 76px; flex: none; border-radius: 10px; overflow: hidden;
  background: #121e20; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pc-tile .cava {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent));
  color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.pc-tile .cava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.pc-tile .offtip { font-size: 9px; color: #b6c2d4; margin-top: 4px; }
.pc-tile .nm {
  position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.43);
  color: #fff; font-size: 9.5px; padding: 3px 6px; display: flex; align-items: center; justify-content: space-between;
}
.pc-tile .nm .mic-off { color: #ff453a; font-size: 9px; }
.pc-stage {
  flex: 1; min-width: 0; border-radius: 16px; background: var(--pc-card-bg);
  border: 1px solid var(--pc-border); position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pc-stage .ring1, .pc-stage .ring2 { position: absolute; border: 1.4px solid var(--pc-primary); border-radius: 50%; opacity: .12; }
.pc-stage .ring1 { width: 130px; height: 130px; right: 30px; top: 50%; margin-top: -65px; }
.pc-stage .ring2 { width: 74px; height: 74px; right: 96px; top: 50%; margin-top: -37px; opacity: .14; }
.pc-stage .dot3 { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--pc-primary); opacity: .12; right: 170px; top: 40px; }
.pc-stage .bigtile {
  width: 68%; padding-bottom: 56%; border-radius: 12px; position: relative;
  background: #121e20; overflow: hidden;
}
.pc-stage .bigtile .cava { width: 56px; height: 56px; margin: 0 auto; position: absolute; left: 0; right: 0; top: 26%; }
.pc-stage .bigtile .nm { font-size: 11px; padding: 5px 9px; }
.pc-stage .cap { margin-top: 14px; font-size: 12px; color: var(--pc-text2); }
.pc-room-side {
  width: 148px; flex: none; display: flex; flex-direction: column; gap: 10px;
}
.pc-room-side.hidden { display: none; }
.pc-room-card {
  flex: 1; min-height: 0; background: var(--pc-card-bg); border: 1px solid var(--pc-border);
  border-radius: 14px; display: flex; flex-direction: column; overflow: hidden;
}
.pc-room-card b { font-size: 12px; font-weight: 600; color: var(--pc-text); padding: 9px 12px 6px; }
.pc-room-card .list { flex: 1; overflow-y: auto; padding: 0 6px 6px; }
.pc-room-card .prow { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 8px; }
.pc-room-card .prow:hover { background: var(--pc-hover); }
.pc-room-card .prow .pava { width: 24px; height: 24px; border-radius: 50%; background-size: cover; background-position: center; background-color: #e5e7eb; flex: none; }
.pc-room-card .prow .pava.i { background: linear-gradient(135deg, var(--pc-primary), var(--pc-accent)); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.pc-room-card .prow .pn { flex: 1; min-width: 0; font-size: 11.5px; color: var(--pc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-room-card .prow .pm { font-size: 9px; color: var(--pc-text3); flex: none; }
.pc-room-card .prow .pm.mut { color: #ff453a; }
.pc-room-card .cbox { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.pc-room-card .cbox .cmsg { font-size: 10.5px; color: var(--pc-text); line-height: 1.5; background: var(--pc-soft); border-radius: 8px; padding: 5px 8px; }
.pc-room-card .cbox .cmsg b { color: #576b95; font-weight: 600; display: block; font-size: 10px; }
.pc-room-side .cin { flex: none; border-top: 1px solid var(--pc-sep2); padding: 8px; display: flex; gap: 5px; }
.pc-room-side .cin input { flex: 1; min-width: 0; height: 26px; border: 0; outline: none; background: var(--pc-soft); border-radius: 7px; padding: 0 8px; font-size: 11px; color: var(--pc-text); font-family: inherit; }
.pc-room-side .cin input::placeholder { color: var(--pc-text3); }
.pc-room-side .cin button { flex: none; border: 0; border-radius: 7px; background: var(--pc-primary); color: #fff; font-size: 11px; padding: 5px 9px; cursor: pointer; font-family: inherit; }

/* ── 多端同步区：30 张真机截图全宽轮播（devices_gallery.js） ── */
/* 旧版双列布局在水合替换前保持隐藏，避免闪现旧内容 */
#devices .devices-layout { visibility: hidden; }
#devices .devices-layout.dg-done { visibility: visible; }

.dg-head { padding-top: 8px; }
.dg-head p { max-width: 620px; }
.dg-platforms {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 18px;
}
.dg-platforms span {
  font-size: 13px; font-weight: 600; color: var(--muted, #94a3b8);
  padding: 6px 14px; border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px; letter-spacing: 0.02em;
}

.dg-wrap { position: relative; margin-top: 26px; }
.dg-strip {
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 2px 14px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.dg-strip::-webkit-scrollbar { display: none; }
.dg-slide {
  flex: none;
  width: calc((100% - 54px) / 4);   /* 4 张/页：3 个 18px 间距 */
  scroll-snap-align: start;
  margin: 0;
  border-radius: 14px; overflow: hidden;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.22);
  cursor: zoom-in;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.dg-slide:hover { transform: translateY(-4px); border-color: var(--primary, #4c9bff); }
.dg-slide img {
  display: block; width: 100%; aspect-ratio: 1 / 2; object-fit: cover;
  object-position: top; user-select: none; -webkit-user-drag: none;
  background: transparent;
}
.dg-slide figcaption {
  padding: 7px 10px; font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted, #94a3b8); text-align: center;
}

.dg-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(10, 16, 28, 0.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
.dg-nav:hover { background: rgba(10, 16, 28, 0.75); }
.dg-nav.prev { left: -6px; }
.dg-nav.next { right: -6px; }
.dg-nav svg { width: 18px; height: 18px; }

.dg-dots {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
  padding: 10px 0 6px;
}
.dg-dots i {
  width: 7px; height: 7px; border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  cursor: pointer; transition: all 0.2s;
}
.dg-dots i.on { width: 20px; background: var(--primary, #4c9bff); }

@media (max-width: 1179px) {
  .dg-slide { width: calc((100% - 36px) / 3); }  /* 3 张/页 */
}
@media (max-width: 859px) {
  .dg-slide { width: calc((100% - 18px) / 2); }  /* 2 张/页 */
}
@media (max-width: 559px) {
  .dg-slide { width: 86%; }                       /* 单张主图 + 露边 */
  .dg-nav { display: none; }
}