* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #f5ecd7;
  font-family: -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

#screen {
  /* ── 主题色变量（可在「外观设置 → 主题色」中调整；默认=原暖琥珀配色） ── */
  --sp-page-top: #fffde7;
  --sp-page-bottom: #f1f8e9;
  --sp-page-bg: linear-gradient(180deg, var(--sp-page-top) 0%, var(--sp-page-bottom) 100%);
  --sp-header-bg: rgba(255,253,231,0.96);
  --sp-surface: rgba(255,255,255,0.6);
  --sp-input-bg: rgba(255,248,225,0.5);
  --sp-border: rgba(93,64,55,0.1);
  --sp-text: #4E342E;
  --sp-text-rgb: 78,52,46;   /* 主文字 RGB，供 rgba(var(--sp-text-rgb),α) 派生半透明文字 */
  --sp-text-soft: #8D6E63;
  --sp-accent: #FFA000;
  --sp-accent-2: #F57C00;
  --sp-accent-rgb: 255,160,0;
  --sp-accent-soft: rgba(var(--sp-accent-rgb),0.14);

  width: 100%;
  max-width: 430px;
  height: 100%;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(255,202,40,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(129,199,132,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 45%, rgba(255,241,118,0.08) 0%, transparent 60%),
    linear-gradient(168deg, #fffde7 0%, #fff8e1 25%, #f1f8e9 60%, #e8f5e9 100%);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

#screen::before {
  content: '🌻';
  position: absolute;
  font-size: 200px;
  top: -30px;
  right: -50px;
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
  transform: rotate(-20deg);
}

#screen::after {
  content: '🌻';
  position: absolute;
  font-size: 140px;
  bottom: 60px;
  left: -40px;
  opacity: 0.04;
  z-index: 0;
  pointer-events: none;
  transform: rotate(25deg);
}

#screen.ap-has-wallpaper { background: none !important; }
#screen.ap-has-wallpaper::before,
#screen.ap-has-wallpaper::after { display: none; }

/* ── 状态栏 ── */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 22px 4px;
  height: 38px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text);
  z-index: 10;
}
.status-icons { display: flex; align-items: center; gap: 8px; }
.status-icons svg { width: 15px; height: 15px; fill: #5D4037; }
.battery-group { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.battery-shell {
  width: 22px; height: 10px;
  border: 1.5px solid #5D4037; border-radius: 2px;
  padding: 1.5px; position: relative;
}
.battery-shell::after {
  content: ''; position: absolute;
  right: -3.5px; top: 50%; transform: translateY(-50%);
  width: 1.5px; height: 4px; background: #5D4037; border-radius: 0 1px 1px 0;
}
.battery-fill {
  height: 100%; background: #66BB6A; border-radius: 0.5px;
  transition: width 0.5s ease;
}

/* ── 主区域（滑动翻页） ── */
.main-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  touch-action: none;
}

.pages-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

#screen.edit-mode .pages-track {
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#screen.edit-mode .pages-track.edge-peek {
  transition: none;
}

.pages-track.no-anim { transition: none !important; }

.page {
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

/* ── 页面指示点 ── */
.page-dots {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 6px 0 4px;
}
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(93,64,55,0.18);
  transition: background 0.25s, transform 0.25s;
}
.dot.active {
  background: var(--sp-accent);
  transform: scale(1.25);
}

/* ── 网格元素（公用） ── */
.grid-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.grid-item.animating {
  transition: left 0.28s cubic-bezier(.4,0,.2,1),
              top 0.28s cubic-bezier(.4,0,.2,1),
              width 0.28s cubic-bezier(.4,0,.2,1),
              height 0.28s cubic-bezier(.4,0,.2,1);
}
.grid-item.dragging {
  transition: none !important;
  z-index: 1000;
  animation: none !important;
}
.grid-item.dragging .app-icon-wrap {
  transform: scale(1.18);
  filter: drop-shadow(0 14px 28px rgba(93,64,55,0.3));
}
.grid-item.snapping { animation: none !important; }
.grid-item.no-anim  { transition: none !important; }

/* ── 应用图标（1×1） ── */
.app-item { gap: 6px; }
.app-icon-wrap {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 14px; overflow: visible;
  transition: transform 0.15s ease-out, filter 0.2s;
  box-shadow: 0 3px 10px rgba(93,64,55,0.15);
}
.acc-badge-dot {
  position: absolute; top: -3px; right: -3px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #e53935; border: 2px solid var(--bg-wallpaper, #faf3eb);
  pointer-events: none; z-index: 2;
}
#screen:not(.edit-mode) .app-item:active .app-icon-wrap {
  transform: scale(0.82);
  transition: transform 0.06s ease-in;
}
.app-icon-wrap img {
  width: 100%; height: 100%;
  border-radius: 14px;
  display: block; pointer-events: none;
}
.app-name {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.82);
  text-shadow: 0 1px 3px rgba(255,255,255,0.6);
  text-align: center;
  max-width: 72px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 底部栏 ── */
.dock-wrapper {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 0 14px;
  min-height: 88px;
}
.dock {
  position: relative;
  height: 88px;
  background: rgba(255,255,255,0.88);
  border-radius: 22px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.15);
  touch-action: none;
  transition: width 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s;
  box-shadow: 0 4px 20px rgba(93,64,55,0.06);
}
.dock .app-item { gap: 4px; }

/* ── 主屏指示条 ── */
.home-indicator {
  flex-shrink: 0;
  display: flex; justify-content: center;
  padding: 8px 0 12px;
}
.home-bar {
  width: 120px; height: 4px;
  background: rgba(93,64,55,0.22);
  border-radius: 2px;
}

/* ── 拖放高亮 ── */
.drop-highlight {
  display: none;
  position: absolute;
  background: rgba(var(--sp-accent-rgb),0.1);
  border: 2px dashed rgba(var(--sp-accent-rgb),0.35);
  border-radius: 14px;
  pointer-events: none;
  z-index: 999;
  transition: left 0.15s ease, top 0.15s ease, width 0.15s ease, height 0.15s ease;
}

/* ── 编辑模式 ── */
#screen.edit-mode .grid-item:not(.dragging):not(.snapping) {
  animation: wobble 0.13s ease-in-out infinite alternate;
}
#screen.edit-mode .grid-item:nth-child(even):not(.dragging):not(.snapping) {
  animation-duration: 0.15s; animation-delay: 0.05s;
}
#screen.edit-mode .grid-item:nth-child(3n+1):not(.dragging):not(.snapping) {
  animation-duration: 0.17s; animation-delay: 0.08s;
}
@keyframes wobble {
  0%   { transform: rotate(-1.2deg); }
  100% { transform: rotate(1.2deg); }
}

/* ── 编辑工具栏 ── */
.edit-toolbar {
  display: none !important;
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  gap: 6px;
  align-items: center;
}
#screen.edit-mode .edit-toolbar { display: flex !important; }

.edit-tb-btn {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(var(--sp-accent-rgb),0.22);
  color: var(--sp-text);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.edit-tb-btn:active { background: rgba(var(--sp-accent-rgb),0.22); }
.edit-tb-done { background: rgba(var(--sp-accent-rgb),0.65); border-color: rgba(var(--sp-accent-rgb),0.3); color: #fff; }
.edit-tb-done:active { background: rgba(var(--sp-accent-rgb),0.8); }

/* ── 弹窗遮罩 ── */
.modal-overlay {
  display: none !important;
  position: absolute;
  inset: 0;
  z-index: 2000;
  background: rgba(93,64,55,0.45);
  align-items: center;
  justify-content: center;
}
.modal-overlay.visible { display: flex !important; }

.modal-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(var(--sp-accent-rgb),0.18);
  border-radius: 18px;
  padding: 22px 24px 18px;
  width: 85%;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(93,64,55,0.1);
}
.modal-title {
  color: var(--sp-text);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
  text-align: center;
}
.modal-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(93,64,55,0.12);
  background: var(--sp-input-bg); /* 默认 rgba(255,248,225,0.5)，随主题色变化 */
  color: var(--sp-text);
  font-size: 14px;
  outline: none;
  margin-bottom: 16px;
}
.modal-input::placeholder { color: rgba(var(--sp-text-rgb),0.3); }
.modal-input:focus { border-color: rgba(var(--sp-accent-rgb),0.5); }

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.modal-btn {
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.modal-cancel {
  background: rgba(93,64,55,0.08);
  color: rgba(var(--sp-text-rgb),0.7);
}
.modal-cancel:active { background: rgba(93,64,55,0.15); }
.modal-confirm {
  background: rgba(var(--sp-accent-rgb),0.7);
  color: #fff;
}
.modal-confirm:active { background: rgba(var(--sp-accent-rgb),0.85); }

/* ── 预设列表 ── */
.preset-list {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 14px;
}
.preset-list:empty::after {
  content: '暂无预设';
  display: block;
  text-align: center;
  color: rgba(var(--sp-text-rgb),0.3);
  padding: 20px 0;
  font-size: 13px;
}
.preset-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: rgba(255,248,225,0.45);
  transition: background 0.12s;
  cursor: pointer;
}
.preset-item:active { background: rgba(var(--sp-accent-rgb),0.15); }
.preset-item-name {
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preset-item-del {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(239,68,68,0.1);
  color: #ef4444;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 8px;
  transition: background 0.15s;
}
.preset-item-del:active { background: rgba(239,68,68,0.22); }

/* ================================================================
 *  设置面板
 * ================================================================ */

/* ── 覆盖层：从底部滑入 ── */
.settings-overlay {
  position: absolute;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  background: var(--sp-page-bg); /* 默认 linear-gradient(180deg,#fffde7,#f1f8e9)，随主题色变化 */
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(.32,.72,0,1), visibility 0s 0.42s;
  pointer-events: none;
  visibility: hidden;
}
.settings-overlay.visible {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform 0.42s cubic-bezier(.32,.72,0,1), visibility 0s;
}

/* ── 顶栏 ── */
.settings-header {
  display: flex;
  align-items: center;
  padding: 12px 16px 10px;
  flex-shrink: 0;
  background: var(--sp-header-bg); /* 默认 rgba(255,253,231,0.96)，随主题色变化 */
  border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.1);
  z-index: 10;
}
.settings-back-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--sp-accent-2);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 0;
  min-width: 50px;
}
.settings-back-btn:active { opacity: 0.6; }
.settings-back-btn svg { flex-shrink: 0; }
.settings-title {
  flex: 1;
  text-align: center;
  color: var(--sp-text);
  font-size: 16px;
  font-weight: 700;
}

/* ── 滚动主体 ── */
.settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.settings-body::-webkit-scrollbar { display: none; }

/* ── 分节 ── */
.stg-section { margin-bottom: 26px; }

.stg-sec-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-left: 4px;
}
.stg-sec-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(93,64,55,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: rgba(var(--sp-text-rgb),0.5);
}
.stg-sec-icon svg { fill: rgba(78,52,46,0.5); }
.stg-sec-title {
  color: rgba(var(--sp-text-rgb),0.5);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ── 分组卡片 ── */
.stg-group {
  background: rgba(255,255,255,0.55);
  border-radius: 14px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.08);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(93,64,55,0.04);
}

/* ── 单项行 ── */
.stg-item { padding: 14px 16px; }
.stg-item-border { border-bottom: 1px solid rgba(93,64,55,0.06); }

.stg-label {
  display: block;
  color: rgba(var(--sp-text-rgb),0.48);
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 7px;
  letter-spacing: 0.3px;
}

.stg-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid rgba(93,64,55,0.1);
  background: var(--sp-input-bg); /* 默认 rgba(255,248,225,0.45)，随主题色变化 */
  color: var(--sp-text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.stg-input::placeholder { color: rgba(var(--sp-text-rgb),0.22); }
textarea.stg-input {
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}
.stg-input:focus {
  border-color: rgba(var(--sp-accent-rgb),0.45);
  background: rgba(255,255,255,0.65);
}

/* ── 密钥行 ── */
.stg-key-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.stg-key-wrap .stg-input { flex: 1; }
.stg-key-toggle {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(93,64,55,0.1);
  background: rgba(255,248,225,0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.stg-key-toggle:active { background: rgba(var(--sp-accent-rgb),0.15); }

/* ── 字段提示 ── */
.stg-hint {
  display: block;
  color: rgba(var(--sp-text-rgb),0.28);
  font-size: 11px;
  margin-top: 5px;
  padding-left: 2px;
}

/* ── 模型行（输入 + 拉取按钮） ── */
.stg-model-wrap { position: relative; }
.stg-model-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.stg-model-row .stg-input { flex: 1; }
.stg-model-fetch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.22);
  background: rgba(var(--sp-accent-rgb),0.1);
  color: var(--sp-accent-2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.15s, opacity 0.15s;
}
.stg-model-fetch:active { background: rgba(var(--sp-accent-rgb),0.25); }
.stg-model-fetch:disabled { opacity: 0.5; cursor: default; }

@keyframes stg-spin { to { transform: rotate(360deg); } }
.stg-spin { animation: stg-spin 0.8s linear infinite; }

/* ── 模型下拉列表 ── */
.stg-model-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, margin 0.3s ease;
  border-radius: 8px;
  margin-top: 0;
}
.stg-model-dropdown.show {
  max-height: 180px;
  overflow-y: auto;
  margin-top: 8px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(var(--sp-accent-rgb),0.1);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.stg-model-dropdown::-webkit-scrollbar { display: none; }

.stg-model-opt {
  padding: 10px 12px;
  color: rgba(var(--sp-text-rgb),0.82);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}
.stg-model-opt:not(:last-child) {
  border-bottom: 1px solid rgba(93,64,55,0.05);
}
.stg-model-opt:active { background: rgba(var(--sp-accent-rgb),0.12); }

/* ── API 预设 ── */
.stg-preset-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.stg-preset-row .stg-preset-select {
  flex: 1;
  min-width: 0;
}
.stg-preset-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(93,64,55,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(var(--sp-text-rgb),0.55);
  transition: background 0.15s, color 0.15s;
}
.stg-preset-btn:active {
  background: rgba(var(--sp-accent-rgb),0.15);
  color: var(--sp-text);
}
.stg-preset-del svg { fill: rgba(211,47,47,0.55); }
.stg-preset-del:active svg { fill: #d32f2f; }

/* ── 参数折叠 ── */
.stg-params-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0;
  cursor: pointer;
  color: rgba(var(--sp-text-rgb),0.5);
  font-size: 12px;
  user-select: none;
  border-top: 1px solid rgba(93,64,55,0.06);
  transition: color 0.15s;
}
.stg-params-toggle:active { color: var(--sp-text); }
.stg-params-toggle svg {
  transition: transform 0.25s;
}
.stg-params-toggle.open svg {
  transform: rotate(180deg);
}
.stg-params-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.stg-params-collapse.open {
  max-height: 800px;
}

/* ── 操作按钮组 ── */
.stg-actions { display: flex; flex-direction: column; }

.stg-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border: none;
  background: transparent;
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
  text-align: left;
}
.stg-action-btn:not(:last-child) {
  border-bottom: 1px solid rgba(93,64,55,0.05);
}
.stg-action-btn:active { background: rgba(var(--sp-accent-rgb),0.08); }

.stg-act-icon {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stg-act-icon svg { fill: rgba(78,52,46,0.45); }

.stg-danger { color: #e53935; }

/* ── 通知开关 ── */
.stg-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.stg-switch input { opacity: 0; width: 0; height: 0; }
.stg-switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(93,64,55,0.15);
  border-radius: 24px;
  transition: background 0.3s;
}
.stg-switch-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.stg-switch input:checked + .stg-switch-slider {
  background: var(--sp-accent-2); /* 默认 var(--sp-accent-2)，随主题色变化 */
}
.stg-switch input:checked + .stg-switch-slider::before {
  transform: translateX(20px);
}

/* ── Toast ── */
.stg-toast {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(var(--sp-accent-rgb),0.18);
  color: var(--sp-text);
  padding: 10px 26px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(93,64,55,0.08);
}
.stg-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 确认弹窗 ── */
.stg-confirm-mask {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(93,64,55,0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s;
  will-change: opacity;
}
.stg-confirm-mask.visible { opacity: 1; }

.stg-confirm-box {
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(var(--sp-accent-rgb),0.14);
  border-radius: 16px;
  padding: 24px 24px 18px;
  width: 80%;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(93,64,55,0.1);
}
.stg-confirm-msg {
  color: var(--sp-text);
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.55;
}
.stg-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.stg-confirm-btn {
  padding: 8px 22px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.stg-confirm-no {
  background: rgba(93,64,55,0.08);
  color: rgba(var(--sp-text-rgb),0.7);
}
.stg-confirm-no:active { background: rgba(93,64,55,0.15); }
.stg-confirm-yes {
  background: rgba(var(--sp-accent-rgb),0.7);
  color: #fff;
}
.stg-confirm-yes:active { background: rgba(var(--sp-accent-rgb),0.85); }

/* ── 退出加载旋转 ── */
.sp-loading-spin {
  animation: sp-spin 0.9s linear infinite;
}
@keyframes sp-spin {
  to { transform: rotate(360deg); }
}

/* ================================================================
 *  联系人面板
 * ================================================================ */

.contacts-overlay {
  position: absolute;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  background: var(--sp-page-bg); /* 默认 linear-gradient(180deg,#fffde7,#f1f8e9)，随主题色变化 */
  transform: translateY(100%);
  transition: transform 0.42s cubic-bezier(.32,.72,0,1), visibility 0s 0.42s;
  pointer-events: none;
  visibility: hidden;
}
.contacts-overlay.visible {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform 0.42s cubic-bezier(.32,.72,0,1), visibility 0s;
}

.ct-page {
  display: none;
  flex-direction: column;
  height: 100%;
  position: relative;
}
.ct-page.active {
  display: flex;
}

/* ── 顶栏 ── */
.ct-header {
  display: flex;
  align-items: center;
  padding: 12px 16px 10px;
  flex-shrink: 0;
  background: var(--sp-header-bg); /* 默认 rgba(255,253,231,0.85)，随主题色变化 */
  border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.1);
  z-index: 10;
  position: relative;
}
.ct-header-title {
  flex: 1;
  text-align: center;
  color: var(--sp-text);
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}
.qq-chat-header-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.qq-chat-header-center .ct-header-title {
  flex: none;
  width: 100%;
  padding: 0 4px;
}
.qq-chat-header-presence {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  max-width: 100%;
  padding: 0 8px;
}
.qq-inline-presence {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  max-width: 100%;
}
.qq-presence-inline-main {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.5);
  font-weight: 500;
  line-height: 1.2;
}
.qq-presence-inline-sub {
  font-size: 10px;
  color: rgba(var(--sp-text-rgb),0.38);
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qq-bubble-name-block {
  margin-bottom: 4px;
  max-width: 100%;
}
.qq-bubble-name-block .qq-bubble-name {
  margin-bottom: 2px;
}
.qq-bubble-name-block .qq-inline-presence {
  padding-left: 2px;
  margin-bottom: 1px;
}
.ct-header-btn {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 0;
  min-width: 50px;
}
.ct-back-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--sp-accent-2);
  font-size: 14px;
  font-weight: 500;
}
.ct-back-btn:active { opacity: 0.6; }
.ct-add-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--sp-accent-2);
}
.ct-add-btn:active { opacity: 0.6; }
.ct-text-btn {
  color: var(--sp-accent-2);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
}
.ct-text-btn:active { opacity: 0.6; }
.ct-save-btn { font-weight: 600; }

/* ── 滚动主体 ── */
.ct-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ct-body::-webkit-scrollbar { display: none; }

/* ── 操作下拉菜单 ── */
.ct-action-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 12px;
  background: rgba(255,255,255,0.98);
  border-radius: 12px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.15);
  box-shadow: 0 8px 32px rgba(93,64,55,0.12);
  z-index: 20;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.9) translateY(-8px);
  transform-origin: top right;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.ct-action-menu.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.ct-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.ct-action-item:not(:last-child) {
  border-bottom: 1px solid rgba(93,64,55,0.06);
}
.ct-action-item:active { background: rgba(var(--sp-accent-rgb),0.1); }

/* ── 空状态 ── */
.ct-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}
.ct-empty-icon { font-size: 56px; margin-bottom: 16px; opacity: 0.5; }
.ct-empty-text { color: var(--sp-text); font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.ct-empty-hint { color: rgba(var(--sp-text-rgb),0.4); font-size: 13px; }

/* ── 联系人列表 ── */
.ct-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.55);
  border-radius: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.12s;
  border: 1px solid rgba(var(--sp-accent-rgb),0.08);
}
.ct-list-item:active { background: rgba(var(--sp-accent-rgb),0.12); }
.ct-list-info { flex: 1; min-width: 0; }
.ct-list-name {
  color: var(--sp-text);
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-list-chevron { flex-shrink: 0; fill: rgba(78,52,46,0.25); }

/* ── 头像 ── */
.ct-avatar {
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.ct-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ct-avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}

/* ── 详情视图 ── */
.ct-detail-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 24px;
}
.ct-detail-name {
  color: var(--sp-text);
  font-size: 22px;
  font-weight: 700;
  margin-top: 12px;
}
.ct-detail-presence {
  font-size: 13px;
  color: rgba(var(--sp-text-rgb),0.48);
  margin-top: 8px;
  text-align: center;
  max-width: 260px;
  line-height: 1.4;
}
.ct-detail-text {
  color: rgba(var(--sp-text-rgb),0.75);
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
}
.ct-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ct-info-label {
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 500;
}
.ct-info-value {
  color: rgba(var(--sp-text-rgb),0.55);
  font-size: 14px;
}
.ct-portrait-preview {
  border-radius: 10px;
  overflow: hidden;
  max-width: 100%;
}
.ct-portrait-preview img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

/* ── 表单：头像区 ── */
.ct-form-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 8px;
}
.ct-form-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(93,64,55,0.12);
  transition: transform 0.15s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.6);
}
.ct-form-avatar:active { transform: scale(0.95); }
.ct-form-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ct-form-avatar .ct-avatar-fallback { font-size: 32px; }
.ct-form-avatar-hint {
  color: rgba(var(--sp-text-rgb),0.35);
  font-size: 12px;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* ── 多行输入 ── */
.ct-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.6;
}

/* ── 下拉框 ── */
.ct-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='rgba(93,64,55,0.4)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

/* ── 滑动条 ── */
.ct-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ct-slider-value {
  color: var(--sp-accent-2);
  font-size: 13px;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}
.ct-range {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(93,64,55,0.1);
  outline: none;
  margin: 0;
}
.ct-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--sp-accent-rgb),0.35);
  border: 2px solid #fff;
  transition: transform 0.12s;
}
.ct-range::-webkit-slider-thumb:active { transform: scale(1.15); }
.ct-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--sp-accent-rgb),0.35);
  border: 2px solid #fff;
}
.ct-range::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(93,64,55,0.1);
  border: none;
}

/* ================================================================
 *  QQ 面板
 * ================================================================ */

/* ── 覆盖层 ── */
.qq-overlay {
  position: absolute;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  background: var(--sp-page-bg); /* 默认 linear-gradient(180deg,#fffde7,#f1f8e9)，随主题色变化 */
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(.32,.72,0,1), visibility 0s 0.35s;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
  contain: layout style;
}
.qq-overlay.visible {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform 0.35s cubic-bezier(.32,.72,0,1), visibility 0s;
}

.qq-page {
  display: none;
  flex-direction: column;
  height: 100%;
  position: relative;
  contain: layout style;
}
.qq-page.active {
  display: flex;
}

/* ── QQ 方形头像（覆盖 ct-avatar 圆形默认） ── */
.qq-avatar-sq { border-radius: 10px !important; }

.qq-group-icon {
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2)) !important;
}

/* ── 搜索栏 ── */
.qq-search {
  padding: 6px 16px 10px;
  flex-shrink: 0;
  background: var(--sp-header-bg); /* 默认 rgba(255,253,231,0.96)，随主题色变化 */
}
.qq-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sp-input-bg); /* 默认 rgba(255,248,225,0.65)，随主题色变化 */
  border: 1px solid rgba(93,64,55,0.08);
  border-radius: 10px;
  padding: 8px 14px;
  color: rgba(var(--sp-text-rgb),0.35);
  font-size: 13px;
}
.qq-search-bar svg { fill: rgba(78,52,46,0.3); flex-shrink: 0; }

/* ── 底部标签栏 ── */
.qq-tabbar {
  display: flex;
  flex-shrink: 0;
  background: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(var(--sp-accent-rgb),0.1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.qq-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 0 9px;
  gap: 2px;
  cursor: pointer;
  color: rgba(var(--sp-text-rgb),0.4);
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.qq-tab svg { fill: currentColor; }
.qq-tab span { font-size: 10px; font-weight: 600; }
.qq-tab.active { color: var(--sp-accent-2); }

/* ── 消息列表 ── */
#qqMsgList { padding: 0 !important; }
.qq-chat-list { padding: 0; contain: layout style; }
.qq-chat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.55);
  border-radius: 0;
  margin-bottom: 0;
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  border-bottom: 1px solid rgba(93,64,55,0.06);
  contain: layout style;
}
.qq-chat-item:active { background: rgba(var(--sp-accent-rgb),0.08); }
.qq-chat-pinned { background: rgba(var(--sp-accent-rgb),0.06); }
.qq-chat-pinned:active { background: rgba(var(--sp-accent-rgb),0.12); }

/* ── 消息列表滑动容器 ── */
.qq-chat-item-wrap {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}
.qq-swipe-track {
  display: flex;
  width: calc(100% + 70px);
}
.qq-swipe-track > .qq-chat-item {
  flex-shrink: 0;
  width: calc(100% - 70px);
}
.qq-swipe-actions {
  flex-shrink: 0;
  width: 70px;
  display: flex;
}
.qq-swipe-pin {
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sp-accent-2);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.qq-swipe-pin:active { background: #EF6C00; }
.qq-pin-tag {
  font-size: 10px;
  color: var(--sp-accent-2);
  font-weight: 600;
  margin-left: 4px;
  flex-shrink: 0;
}
.qq-scheduled-star {
  font-size: 10px;
  margin-left: 3px;
  flex-shrink: 0;
}
.qq-chat-info { flex: 1; min-width: 0; }
.qq-chat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.qq-chat-name {
  color: var(--sp-text);
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.qq-chat-time {
  color: rgba(var(--sp-text-rgb),0.35);
  font-size: 11px;
  flex-shrink: 0;
  margin-left: 8px;
}
.qq-chat-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qq-chat-preview {
  flex: 1;
  min-width: 0;
  color: rgba(var(--sp-text-rgb),0.45);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qq-unread-badge {
  flex-shrink: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: #e84118;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}

/* ── 聊天视图 ── */
.qq-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  /* 透明：透出 .qq-overlay 的 var(--sp-page-bg)，随主题色变化 */
  background: transparent;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  contain: layout style;
  will-change: scroll-position;
  overflow-anchor: none;
}
.qq-chat-body::-webkit-scrollbar { display: none; }
.qq-chat-hint {
  text-align: center;
  color: rgba(var(--sp-text-rgb),0.3);
  font-size: 13px;
  padding: 60px 20px;
}

/* ── 输入栏 ── */
.qq-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--sp-header-bg); /* 跟随主题色 */
  border-top: 1px solid rgba(93,64,55,0.06);
  flex-shrink: 0;
  contain: layout style;
}
.qq-input-icon-btn {
  background: rgba(93,64,55,0.06);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  width: 34px;
  height: 34px;
  color: rgba(var(--sp-text-rgb),0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.qq-input-icon-btn:active { background: rgba(93,64,55,0.14); }
.qq-input-icon-btn svg { fill: rgba(78,52,46,0.45); }
.qq-msg-input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(93,64,55,0.06);
  background: rgba(255,255,255,0.8);
  color: var(--sp-text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}
.qq-msg-input::placeholder { color: rgba(var(--sp-text-rgb),0.25); }
.qq-msg-input:focus { border-color: rgba(var(--sp-accent-rgb),0.4); }
/* ── 群聊成员选择 ── */
.qq-member-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.qq-member-cb {
  width: 20px;
  height: 20px;
  accent-color: var(--sp-accent-2);
  flex-shrink: 0;
}
.qq-member-name {
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 500;
}

/* ── QQ空间 Banner ── */
.qq-space-banner {
  position: relative;
  overflow: hidden;
}
.qq-space-banner-bg {
  height: 120px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(var(--sp-accent-rgb),0.35) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 60%, rgba(129,199,132,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #fffde7 0%, #fff8e1 40%, #e8f5e9 100%);
  position: relative;
}
.qq-space-banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 50%, rgba(255,253,231,0.6));
}
.qq-space-banner-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  margin-top: -28px;
  position: relative;
  z-index: 2;
  padding-bottom: 16px;
}
.qq-space-banner-info .ct-avatar {
  border: 3px solid rgba(255,255,255,0.8);
  box-shadow: 0 2px 12px rgba(93,64,55,0.12);
}
.qq-space-banner-name {
  color: var(--sp-text);
  font-size: 16px;
  font-weight: 700;
  margin-top: 28px;
}

/* ── 空间动态 ── */
.qq-space-post {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(var(--sp-accent-rgb),0.08);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 16px 10px;
  box-shadow: 0 2px 12px rgba(93,64,55,0.04);
}
.qq-space-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.qq-space-post-meta { flex: 1; }
.qq-space-post-name {
  color: var(--sp-accent-2);
  font-size: 14px;
  font-weight: 600;
  display: block;
}
.qq-space-post-time {
  color: rgba(var(--sp-text-rgb),0.35);
  font-size: 11px;
}
.qq-space-post-content {
  color: rgba(var(--sp-text-rgb),0.82);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  word-break: break-word;
}
.qq-space-post-actions {
  display: flex;
  gap: 4px;
  border-top: 1px solid rgba(93,64,55,0.06);
  padding-top: 8px;
}
.qq-space-act-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 0;
  border: none;
  background: none;
  color: rgba(var(--sp-text-rgb),0.4);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
}
.qq-space-act-btn svg { fill: currentColor; }
.qq-space-act-btn:active { background: rgba(var(--sp-accent-rgb),0.1); }
.qq-space-act-btn.liked { color: #e53935; }
.qq-space-act-btn.liked svg { fill: #e53935; }

/* ── 空间点赞列表 ── */
.qq-space-likes-section {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: rgba(var(--sp-accent-rgb),0.06);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.qq-space-likes-section svg { flex-shrink: 0; margin-top: 1px; }
.qq-space-likes-names {
  color: var(--sp-accent-2);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}

/* ── 空间评论区 ── */
.qq-space-comments-section {
  background: rgba(93,64,55,0.03);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.qq-space-comment {
  font-size: 13px;
  line-height: 1.6;
  padding: 2px 0;
  cursor: pointer;
}
.qq-space-comment:active { background: rgba(var(--sp-accent-rgb),0.08); border-radius: 4px; }
.qq-space-comment-author {
  color: var(--sp-accent-2);
  font-weight: 600;
}
.qq-space-comment-reply-arrow {
  color: rgba(var(--sp-text-rgb),0.35);
  font-size: 12px;
  margin: 0 3px;
}
.qq-space-comment-colon { color: rgba(var(--sp-text-rgb),0.35); }
.qq-space-comment-text { color: rgba(var(--sp-text-rgb),0.82); }

/* ── 空间评论输入 ── */
.qq-space-comment-input-wrap {
  border-top: 1px solid rgba(93,64,55,0.06);
  padding-top: 8px;
  margin-top: 4px;
}
.qq-space-comment-reply-hint {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.5);
  padding: 0 0 6px;
}
.qq-space-comment-reply-hint b { color: var(--sp-accent-2); }
.qq-space-cancel-reply {
  cursor: pointer;
  margin-left: 4px;
  color: rgba(var(--sp-text-rgb),0.3);
}
.qq-space-cancel-reply:hover { color: #e53935; }
.qq-space-comment-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.qq-space-comment-input {
  flex: 1;
  border: 1px solid rgba(93,64,55,0.1);
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 13px;
  font-family: inherit;
  background: rgba(255,255,255,0.6);
  outline: none;
  color: var(--sp-text);
  transition: border-color 0.2s;
}
.qq-space-comment-input:focus { border-color: rgba(var(--sp-accent-rgb),0.4); }
.qq-space-comment-input::placeholder { color: rgba(var(--sp-text-rgb),0.25); }
.qq-space-comment-send {
  border: none;
  background: linear-gradient(135deg, #FFD54F, #FFB300);
  color: var(--sp-text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 14px;
  border-radius: 18px;
  cursor: pointer;
  white-space: nowrap;
}
.qq-space-comment-send:active { opacity: 0.8; }

/* ── 空间分享弹窗 ── */
.qq-space-share-mask {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.qq-space-share-box {
  background: #fffde7;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 24px rgba(93,64,55,0.12);
}
.qq-space-share-header {
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-text);
  border-bottom: 1px solid rgba(93,64,55,0.06);
  text-align: center;
}
.qq-space-share-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.qq-space-share-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.12s;
}
.qq-space-share-item:active { background: rgba(var(--sp-accent-rgb),0.08); }
.qq-space-share-item-name {
  font-size: 14px;
  color: var(--sp-text);
  font-weight: 500;
}
.qq-space-share-cancel {
  border: none;
  background: none;
  color: rgba(var(--sp-text-rgb),0.4);
  font-size: 14px;
  font-family: inherit;
  padding: 14px;
  cursor: pointer;
  border-top: 1px solid rgba(93,64,55,0.06);
  width: 100%;
  text-align: center;
}
.qq-space-share-cancel:active { background: rgba(var(--sp-accent-rgb),0.05); }

/* ── 空间长按右键菜单 ── */
.qq-space-ctx-menu-mask {
  position: absolute; inset: 0; z-index: 900;
  opacity: 0; transition: opacity .15s;
}
.qq-space-ctx-menu-mask.visible { opacity: 1; }
.qq-space-ctx-menu {
  position: absolute; min-width: 110px;
  background: #fffdf7; border-radius: 10px;
  box-shadow: 0 4px 20px rgba(93,64,55,0.18);
  overflow: hidden; z-index: 901;
}
.qq-space-ctx-item {
  padding: 11px 18px; font-size: 14px;
  color: var(--sp-text); cursor: pointer;
  transition: background .12s;
}
.qq-space-ctx-item:active { background: rgba(var(--sp-accent-rgb),0.10); }
.qq-space-ctx-item + .qq-space-ctx-item { border-top: 1px solid rgba(93,64,55,0.06); }
.qq-space-ctx-danger { color: #e53935; }

/* ── "我"页面 ── */
.qq-me-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 16px;
  margin: 8px 16px;
  background: rgba(255,255,255,0.55);
  border-radius: 14px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.08);
  box-shadow: 0 2px 12px rgba(93,64,55,0.04);
  cursor: pointer;
  transition: background 0.12s;
}
.qq-me-card:active { background: rgba(var(--sp-accent-rgb),0.12); }
.qq-me-info { flex: 1; min-width: 0; }
.qq-me-name {
  color: var(--sp-text);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.qq-me-sig {
  color: rgba(var(--sp-text-rgb),0.4);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 菜单项 ── */
.qq-me-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.12s;
  color: var(--sp-text);
  font-size: 15px;
  font-weight: 500;
}
.qq-me-menu-item:active { background: rgba(var(--sp-accent-rgb),0.08); }
.qq-me-menu-item svg { flex-shrink: 0; fill: rgba(78,52,46,0.25); margin-left: auto; }
.qq-me-menu-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(93,64,55,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  color: rgba(var(--sp-text-rgb),0.5);
}
.qq-me-menu-icon svg { fill: rgba(78,52,46,0.5); }

/* ── 记忆筛选按钮 ── */
.qq-mem-filter-btn {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(78,52,46,0.12);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  font-family: inherit;
  color: rgba(var(--sp-text-rgb),0.6);
  cursor: pointer;
  transition: all 0.15s;
}
.qq-mem-filter-btn.active {
  background: var(--sp-accent-2);
  color: #fff;
  border-color: var(--sp-accent-2);
}
/* ── 记忆标签与类型标记 ── */
.qq-mem-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  margin-right: 6px;
  vertical-align: middle;
}
.qq-mem-type-badge.character { background: rgba(33,150,243,0.12); color: #1976D2; }
.qq-mem-type-badge.event { background: rgba(76,175,80,0.12); color: #388E3C; }
.qq-mem-type-badge.player { background: rgba(156,39,176,0.12); color: #7B1FA2; }
.qq-mem-type-badge.legacy { background: rgba(78,52,46,0.08); color: rgba(var(--sp-text-rgb),0.5); }
.qq-mem-tag {
  display: inline-block;
  font-size: 11px;
  background: rgba(var(--sp-accent-rgb),0.12);
  color: var(--sp-accent-2);
  padding: 1px 8px;
  border-radius: 10px;
  margin: 2px 3px 2px 0;
}
.qq-mem-emotion {
  display: inline-block;
  font-size: 11px;
  background: rgba(233,30,99,0.08);
  color: #C2185B;
  padding: 1px 8px;
  border-radius: 10px;
  margin: 2px 3px 2px 0;
}
.qq-mem-importance {
  display: inline-block;
  font-size: 11px;
  color: var(--sp-accent-2);
  margin-left: 4px;
}
.qq-mem-source {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.35);
  margin-left: 6px;
}
.qq-mem-tags-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6px;
  gap: 2px;
}

/* ── 通用卡片项（收藏/回忆） ── */
.qq-card-item {
  background: rgba(255,255,255,0.55);
  border-radius: 14px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.08);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(93,64,55,0.04);
}
.qq-card-date {
  color: var(--sp-accent-2);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}
.qq-card-content {
  color: rgba(var(--sp-text-rgb),0.82);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
  margin-bottom: 8px;
}
.qq-card-image {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.qq-card-image img {
  width: 100%;
  display: block;
  border-radius: 10px;
}
.qq-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qq-card-time {
  color: rgba(var(--sp-text-rgb),0.3);
  font-size: 11px;
}
.qq-card-edit {
  background: none;
  border: none;
  color: var(--sp-accent-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 8px;
}
.qq-card-del {
  background: none;
  border: none;
  color: #e53935;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 8px;
}
.qq-card-del:active { opacity: 0.6; }

/* ── 语音按钮激活态 ── */
.qq-voice-btn.active,
.qq-more-btn.active {
  background: rgba(var(--sp-accent-rgb),0.12) !important;
  color: var(--sp-accent-2) !important;
}
.qq-voice-btn.active svg,
.qq-more-btn.active svg {
  fill: var(--sp-accent-2) !important;
}
/* ── AI回复按钮 ── */
.qq-ai-reply-btn.generating {
  background: rgba(var(--sp-accent-rgb),0.18) !important;
  animation: qq-ai-pulse 1s ease-in-out infinite;
}
.qq-ai-reply-btn.generating svg {
  fill: var(--sp-accent-2) !important;
}
@keyframes qq-ai-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* ── AI回复加载气泡 ── */
.qq-bubble-loading {
  display: inline-flex;
  gap: 4px;
  padding: 12px 16px;
}
.qq-bubble-loading span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(78,52,46,0.3);
  animation: qq-dot-bounce 1.2s ease-in-out infinite;
}
.qq-bubble-loading span:nth-child(2) { animation-delay: 0.15s; }
.qq-bubble-loading span:nth-child(3) { animation-delay: 0.3s; }
@keyframes qq-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* ── 消息入场动画 ── */
.qq-msg-enter {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.qq-msg-enter.qq-msg-enter-active {
  opacity: 1;
  transform: translateY(0);
}

/* ── 时间分隔线 ── */
.qq-time-separator {
  text-align: center;
  padding: 8px 0 4px;
  margin-bottom: 8px;
  user-select: none;
}
.qq-time-separator span {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.4);
  background: rgba(78,52,46,0.06);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* ── 聊天气泡 ── */
.qq-bubble-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 4px;
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: auto 60px;
}
.qq-bubble-right {
  flex-direction: row-reverse;
}
.qq-bubble-wrap {
  max-width: 65%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.qq-bubble-right .qq-bubble-wrap { align-items: flex-end; }
.qq-bubble-left .qq-bubble-wrap { align-items: flex-start; }
.qq-bubble-name {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.38);
  margin-bottom: 3px;
  padding-left: 2px;
}
.qq-bubble {
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  position: relative;
}
.qq-bubble-mine {
  background: #95ec69;
  color: #1a1a1a;
  border-top-right-radius: 2px;
}
.qq-bubble-other {
  background: #fff;
  color: #1a1a1a;
  border-top-left-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.qq-bubble-auto-reply {
  opacity: 0.72;
  font-style: italic;
  border-left: 2px solid #b0b0b0;
}
.qq-bubble-row .ct-avatar {
  flex-shrink: 0;
  margin-top: 0;
}
.qq-bubble-row .ct-avatar,
.qq-bubble-row .ct-avatar img,
.qq-bubble-row .ct-avatar .ct-avatar-fallback {
  border-radius: 4px;
}

.qq-bubble-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 36px;
  flex-shrink: 0;
}
.qq-bubble-content-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}
.qq-bubble-content-row-mine {
  flex-direction: row-reverse;
}
.qq-bubble-content-row > .qq-bubble {
  min-width: 0;
  max-width: 100%;
}
.qq-msg-time {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.38);
  flex-shrink: 0;
  line-height: 1;
  padding-bottom: 3px;
  white-space: nowrap;
}
.qq-presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qq-presence-online .qq-presence-dot {
  background: #4caf50;
  box-shadow: 0 0 0 1px rgba(76,175,80,0.2);
}
.qq-presence-busy .qq-presence-dot {
  background: #ff9800;
}
.qq-presence-away .qq-presence-dot {
  background: #ffc107;
}
.qq-presence-dnd .qq-presence-dot {
  background: #e53935;
}
.qq-presence-invisible .qq-presence-dot {
  background: #9e9e9e;
}
.qq-presence-offline .qq-presence-dot {
  background: #bdbdbd;
  opacity: 0.85;
}
.qq-presence-idle .qq-presence-dot {
  background: #5c6bc0;
}

/* ── 头像状态指示点（覆盖在头像右下角） ── */
.qq-avatar-pw {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: top;
}
.qq-avatar-pw > .ct-avatar {
  display: block;
}
.qq-avatar-pd {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-sizing: content-box;
  z-index: 2;
  pointer-events: none;
}
.qq-avatar-pd-offline {
  opacity: 0.8;
}
.qq-bubble-row .qq-avatar-pd {
  border-color: #f5f0eb;
}

.qq-msg-sheet-mask {
  align-items: center;
  justify-content: center;
}
.qq-msg-sheet {
  background: rgba(255,255,255,0.96);
  border-radius: 16px;
  padding: 8px;
  width: 72%;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(93,64,55,0.14);
  border: 1px solid rgba(var(--sp-accent-rgb),0.12);
}
.qq-msg-sheet-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--sp-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.qq-msg-sheet-btn:active {
  background: rgba(var(--sp-accent-rgb),0.12);
}
.qq-msg-sheet-btn svg { flex-shrink: 0; }
.qq-msg-sheet-del {
  color: #c62828;
}
.qq-msg-sheet-divider {
  height: 1px;
  background: rgba(78,52,46,0.06);
  margin: 2px 12px;
}

/* ── 多选模式 ── */
.qq-multiselect-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.96);
  border-top: 1px solid rgba(78,52,46,0.08);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 8px max(10px, env(safe-area-inset-bottom));
  z-index: 20;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.qq-ms-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 11px;
  color: var(--sp-text);
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.qq-ms-btn:active { background: rgba(var(--sp-accent-rgb),0.12); }
.qq-ms-btn.qq-ms-del { color: #c62828; }
.qq-ms-btn.qq-ms-cancel { color: rgba(var(--sp-text-rgb),0.55); }
.qq-ms-btn[disabled] { opacity: 0.35; pointer-events: none; }
.qq-bubble-row.qq-ms-selected {
  background: rgba(var(--sp-accent-rgb),0.08);
  border-radius: 10px;
}
.qq-ms-check {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(78,52,46,0.2);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.qq-ms-selected .qq-ms-check {
  border-color: var(--sp-accent);
  background: var(--sp-accent);
}
.qq-ms-selected .qq-ms-check svg { opacity: 1; }
.qq-ms-check svg { opacity: 0; transition: opacity 0.15s; }
.qq-bubble-row.qq-ms-mode {
  padding-left: 28px;
  position: relative;
}

/* ── 转发卡片气泡 ── */
.qq-forward-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(78,52,46,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  min-width: 160px;
  max-width: 220px;
  -webkit-tap-highlight-color: transparent;
}
.qq-bubble-mine .qq-forward-card {
  background: rgba(255,255,255,0.65);
}
.qq-forward-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qq-forward-card-title svg { flex-shrink: 0; color: rgba(var(--sp-text-rgb),0.4); }
.qq-forward-card-preview {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.55);
  line-height: 1.5;
  max-height: 54px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.qq-forward-card-footer {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(78,52,46,0.06);
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.3);
}

/* ── 转发内容查看模态框 ── */
.qq-forward-viewer {
  background: rgba(255,255,255,0.96);
  border-radius: 16px;
  width: 88%;
  max-width: 360px;
  max-height: 70vh;
  box-shadow: 0 8px 32px rgba(93,64,55,0.12);
  border: 1px solid rgba(var(--sp-accent-rgb),0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qq-forward-viewer-head {
  padding: 16px 16px 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-text);
  text-align: center;
  border-bottom: 1px solid rgba(78,52,46,0.06);
  flex-shrink: 0;
}
.qq-forward-viewer-body {
  overflow-y: auto;
  padding: 12px 14px;
  flex: 1;
}
.qq-forward-viewer-msg {
  margin-bottom: 10px;
  line-height: 1.55;
}
.qq-forward-viewer-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-accent);
  margin-bottom: 2px;
}
.qq-forward-viewer-text {
  font-size: 13px;
  color: var(--sp-text);
  word-break: break-word;
}
.qq-forward-viewer-time {
  font-size: 10px;
  color: rgba(var(--sp-text-rgb),0.3);
  margin-top: 2px;
}
.qq-forward-viewer-close {
  padding: 12px;
  text-align: center;
  border-top: 1px solid rgba(78,52,46,0.06);
  flex-shrink: 0;
}
.qq-forward-viewer-close button {
  background: rgba(93,64,55,0.08);
  border: none;
  border-radius: 10px;
  padding: 8px 28px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--sp-text-rgb),0.7);
  cursor: pointer;
  font-family: inherit;
}
.qq-forward-viewer-close button:active { background: rgba(93,64,55,0.15); }

/* ── 收藏卡片（聊天记录型） ── */
.qq-fav-chat-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qq-fav-chat-card:active { background: rgba(var(--sp-accent-rgb),0.06); }
.qq-fav-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.qq-fav-chat-header svg { flex-shrink: 0; color: rgba(var(--sp-text-rgb),0.35); }
.qq-fav-chat-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--sp-text-rgb),0.5);
}

/* ── 选择转发目标 ── */
.qq-forward-target-list {
  max-height: 300px;
  overflow-y: auto;
}
.qq-forward-target-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.qq-forward-target-item:active { background: rgba(var(--sp-accent-rgb),0.12); }
.qq-forward-target-name {
  font-size: 14px;
  color: var(--sp-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qq-forward-target-tag {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.35);
  flex-shrink: 0;
}

/* ── 引用参考块（气泡内） ── */
.qq-quote-ref {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  cursor: default;
}
.qq-bubble-mine .qq-quote-ref {
  background: rgba(0,0,0,0.06);
}
.qq-quote-ref-line {
  width: 3px;
  min-height: 100%;
  border-radius: 2px;
  background: var(--sp-accent);
  flex-shrink: 0;
}
.qq-quote-ref-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.qq-quote-ref-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qq-quote-ref-text {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.55);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.qq-bubble-mine .qq-quote-ref-text {
  color: rgba(0,0,0,0.45);
}

/* ── 引用预览栏（输入框上方） ── */
.qq-quote-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(245,238,220,0.95);
  border-top: 1px solid rgba(93,64,55,0.06);
  flex-shrink: 0;
}
.qq-quote-preview-body {
  flex: 1;
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.qq-quote-preview-line {
  width: 3px;
  min-height: 100%;
  border-radius: 2px;
  background: var(--sp-accent);
  flex-shrink: 0;
  align-self: stretch;
}
.qq-quote-preview-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.qq-quote-preview-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qq-quote-preview-text {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.qq-quote-preview-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: rgba(var(--sp-text-rgb),0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.qq-quote-preview-close:active { background: rgba(78,52,46,0.08); }

.qq-msg-edit-box {
  max-width: min(420px, 94vw) !important;
  width: 94% !important;
}
.qq-msg-edit-hint {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.45);
  margin-bottom: 10px;
  line-height: 1.45;
  text-align: left;
}
textarea.qq-msg-edit-json {
  width: 100%;
  min-height: 28vh;
  max-height: 60vh;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
  box-sizing: border-box;
}

/* ── 按住说话按钮 ── */
.qq-voice-hold-btn {
  flex: 1;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid rgba(93,64,55,0.06);
  background: rgba(255,255,255,0.8);
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.qq-voice-hold-btn:active {
  background: rgba(93,64,55,0.1);
}
.qq-voice-hold-btn.qq-recording {
  background: rgba(244,67,54,0.12);
  border-color: rgba(244,67,54,0.3);
  color: #d32f2f;
  animation: qq-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes qq-rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.qq-voice-playing .qq-voice-bars span {
  animation-duration: 0.5s !important;
}

/* ── 更多功能面板 ── */
.qq-more-panel {
  flex-shrink: 0;
  background: var(--sp-header-bg); /* 跟随主题色 */
  border-top: 1px solid rgba(93,64,55,0.04);
  padding: 12px 0 8px;
}
.qq-more-swiper {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.qq-more-swiper::-webkit-scrollbar { display: none; }
.qq-more-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 12px 8px;
  padding: 0 14px;
  box-sizing: border-box;
}
.qq-more-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 8px 0 2px;
}
.qq-more-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(78,52,46,0.15);
  transition: background 0.2s, transform 0.2s;
}
.qq-more-dot.active {
  background: rgba(78,52,46,0.5);
  transform: scale(1.3);
}
.qq-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 12px 8px;
  padding: 0 14px;
}
.qq-more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qq-more-item:active .qq-more-icon {
  background: rgba(93,64,55,0.14);
}
.qq-more-item span {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.5);
  font-weight: 500;
}
.qq-more-icon {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  background: rgba(93,64,55,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--sp-text-rgb),0.5);
  transition: background 0.12s;
}
.qq-more-icon svg {
  fill: rgba(78,52,46,0.45);
}
.qq-offline-toggle.active .qq-more-icon {
  background: rgba(76,175,80,0.18);
}
.qq-offline-toggle.active .qq-more-icon svg {
  fill: #388E3C;
}
.qq-offline-toggle.active span {
  color: #388E3C;
  font-weight: 600;
}

/* ── 线下设置小按钮 ── */
.qq-more-item[data-action="offline"] .qq-offline-label-row {
  display: flex;
  align-items: center;
  gap: 3px;
}
.qq-offline-settings-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(78,52,46,0.08);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
  vertical-align: middle;
  margin-left: 2px;
  flex-shrink: 0;
}
.qq-offline-settings-btn:hover,
.qq-offline-settings-btn:active {
  opacity: 1;
  background: rgba(78,52,46,0.18);
}
.qq-offline-settings-btn svg {
  fill: rgba(78,52,46,0.6);
  width: 10px;
  height: 10px;
}

/* ── 线下设置弹窗 ── */
.qq-offline-stg-row {
  padding: 8px 0;
}
.qq-offline-stg-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--sp-text);
  cursor: pointer;
}
.qq-offline-stg-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #388E3C;
}
.qq-offline-stg-hint {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.55);
  margin-top: 6px;
  line-height: 1.5;
}

/* ── 旁白消息气泡 ── */
.qq-narration-row {
  display: flex;
  justify-content: center;
  padding: 8px 20px;
}
.qq-narration-bubble {
  max-width: 85%;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(93,64,55,0.06), rgba(93,64,55,0.03));
  border: 1px solid rgba(93,64,55,0.12);
  border-radius: 12px;
  position: relative;
}
.qq-narration-bubble::before {
  content: '旁白';
  position: absolute;
  top: -8px;
  left: 12px;
  font-size: 9px;
  color: rgba(var(--sp-text-rgb),0.45);
  background: #FFF8F0;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 1px;
}
.qq-narration-content {
  font-size: 13px;
  color: rgba(var(--sp-text-rgb),0.7);
  line-height: 1.6;
  font-style: italic;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── 语音消息气泡 ── */
.qq-bubble-voice-wrap {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.qq-bubble-left .qq-bubble-voice-wrap { align-items: flex-start; }
.qq-bubble-right .qq-bubble-voice-wrap { align-items: flex-end; }
.qq-voice-bubble {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 80px;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.qq-bubble-other .qq-voice-bubble {
  background: #fff;
  border-top-left-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.qq-bubble-mine .qq-voice-bubble {
  background: #95ec69;
  border-top-right-radius: 2px;
  flex-direction: row-reverse;
}
.qq-voice-icon {
  flex-shrink: 0;
  color: rgba(var(--sp-text-rgb),0.55);
}
.qq-bubble-mine .qq-voice-icon {
  color: rgba(26,26,26,0.6);
}
.qq-voice-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}
.qq-voice-bars span {
  display: block;
  width: 2.5px;
  border-radius: 2px;
  background: rgba(78,52,46,0.35);
}
.qq-voice-playing .qq-voice-bars span {
  animation: qq-voice-bar 1.2s ease-in-out infinite;
}
.qq-bubble-mine .qq-voice-bars span {
  background: rgba(26,26,26,0.4);
}
.qq-voice-bars span:nth-child(1) { height: 6px; animation-delay: 0s; }
.qq-voice-bars span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.qq-voice-bars span:nth-child(3) { height: 8px; animation-delay: 0.3s; }
.qq-voice-bars span:nth-child(4) { height: 14px; animation-delay: 0.45s; }
@keyframes qq-voice-bar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.5); }
}
.qq-voice-dur {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.45);
  white-space: nowrap;
  flex-shrink: 0;
}
.qq-bubble-mine .qq-voice-dur {
  color: rgba(26,26,26,0.5);
}
.qq-voice-stt-btn {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.35);
  margin-top: 4px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.qq-voice-stt-btn:active { color: rgba(var(--sp-text-rgb),0.55); }
.qq-voice-stt-btn.expanded { color: rgba(var(--sp-text-rgb),0.5); }
.qq-voice-text-area {
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.85);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.qq-bubble-mine .qq-voice-text-area {
  background: rgba(149,236,105,0.35);
}
.qq-voice-text-content {
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-text);
  word-break: break-word;
}
.qq-bubble-mine .qq-voice-text-content {
  color: #1a1a1a;
}

/* ── 图片消息 ── */
.qq-bubble-image {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.qq-image-msg {
  border-radius: 10px;
  overflow: hidden;
  max-width: 200px;
}
.qq-image-thumb {
  display: block;
  max-width: 200px;
  max-height: 280px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
}
.qq-image-loading {
  width: 160px;
  height: 120px;
  background: rgba(255,248,225,0.6);
  border: 1px solid rgba(93,64,55,0.08);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.qq-image-loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(var(--sp-accent-rgb),0.15);
  border-top-color: rgba(var(--sp-accent-rgb),0.6);
  border-radius: 50%;
  animation: qqImageSpin 0.8s linear infinite;
}
@keyframes qqImageSpin {
  to { transform: rotate(360deg); }
}
.qq-image-loading-text {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.4);
}
.qq-image-error {
  width: 160px;
  height: 100px;
  background: rgba(255,248,225,0.4);
  border: 1px solid rgba(93,64,55,0.06);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.qq-image-error-text {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.35);
}

/* ── 图片选项弹窗 ── */
.qq-img-sheet-mask {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.qq-img-sheet {
  width: 100%; max-width: 420px;
  background: #fff; border-radius: 14px 14px 0 0;
  padding: 8px 0 env(safe-area-inset-bottom, 0);
  animation: qqSheetUp 0.22s ease-out;
}
@keyframes qqSheetUp { from { transform: translateY(100%); } }
.qq-img-sheet-item {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 24px; font-size: 15px; color: var(--sp-text);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qq-img-sheet-item:active { background: rgba(93,64,55,0.06); }
.qq-img-sheet-item svg { flex-shrink: 0; opacity: 0.55; }
.qq-img-sheet-cancel {
  text-align: center; padding: 14px; font-size: 15px;
  color: rgba(var(--sp-text-rgb),0.5); cursor: pointer;
  border-top: 1px solid rgba(93,64,55,0.06); margin-top: 4px;
}

/* ── 文字图卡片 ── */
.qq-text-image-card {
  min-width: 120px; max-width: 200px;
  min-height: 80px; padding: 16px 20px;
  background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
  border-radius: 10px; display: flex;
  align-items: center; justify-content: center;
  text-align: center; word-break: break-word;
  font-size: 15px; line-height: 1.5; color: #2e7d32;
  font-weight: 500;
}
.qq-bubble-mine .qq-text-image-card {
  background: linear-gradient(135deg, #95ec69 0%, #c8e6c9 100%);
}

/* ── 照片已识别占位 ── */
.qq-image-recognized {
  width: 160px; height: 100px;
  background: rgba(255,248,225,0.5);
  border: 1px solid rgba(93,64,55,0.08);
  border-radius: 10px; display: flex;
  flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
}
.qq-image-recognized-text {
  font-size: 11px; color: rgba(var(--sp-text-rgb),0.4);
}

/* ── AI 生图对话框 ── */
.qq-img-gen-mask {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
}
.qq-img-gen-box {
  width: 92%; max-width: 380px;
  background: #fff; border-radius: 14px;
  padding: 20px; max-height: 90vh; overflow-y: auto;
}
.qq-img-gen-title {
  font-size: 16px; font-weight: 700; color: var(--sp-text);
  text-align: center; margin-bottom: 14px;
}
.qq-img-gen-label {
  font-size: 13px; color: rgba(var(--sp-text-rgb),0.65);
  font-weight: 600; margin-bottom: 6px;
}
.qq-img-gen-textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(93,64,55,0.12);
  background: rgba(255,248,225,0.4);
  font-size: 13px; font-family: inherit; color: var(--sp-text);
  resize: vertical; min-height: 50px; outline: none;
  margin-bottom: 10px;
}
.qq-img-gen-textarea:focus {
  border-color: rgba(var(--sp-accent-rgb),0.4);
  background: rgba(255,255,255,0.6);
}
.qq-img-gen-prompt-row {
  display: flex; gap: 8px; align-items: flex-start;
  margin-bottom: 10px;
}
.qq-img-gen-prompt-row .qq-img-gen-textarea { flex: 1; margin-bottom: 0; }
.qq-img-gen-ai-btn {
  flex-shrink: 0; padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.25);
  background: rgba(var(--sp-accent-rgb),0.12); color: var(--sp-accent-2);
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
}
.qq-img-gen-ai-btn:active { background: rgba(var(--sp-accent-rgb),0.25); }
.qq-img-gen-ai-btn:disabled { opacity: 0.5; }
.qq-img-gen-preview {
  width: 100%; min-height: 120px;
  border-radius: 10px; overflow: hidden;
  background: rgba(245,240,232,0.5);
  border: 1px solid rgba(93,64,55,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; position: relative;
}
.qq-img-gen-preview img {
  max-width: 100%; max-height: 320px;
  object-fit: contain; border-radius: 8px;
}
.qq-img-gen-preview-placeholder {
  font-size: 12px; color: rgba(var(--sp-text-rgb),0.3);
  text-align: center; padding: 30px 20px;
}
.qq-img-gen-actions {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap;
}
.qq-img-gen-btn {
  flex: 1; min-width: 80px; padding: 10px 0;
  border-radius: 10px; border: none; font-size: 14px;
  font-weight: 600; font-family: inherit; cursor: pointer;
}
.qq-img-gen-btn-primary {
  background: rgba(var(--sp-accent-rgb),0.85); color: #fff;
}
.qq-img-gen-btn-primary:active { background: rgba(var(--sp-accent-rgb),1); }
.qq-img-gen-btn-primary:disabled { opacity: 0.5; }
.qq-img-gen-btn-secondary {
  background: rgba(93,64,55,0.08); color: var(--sp-text);
}
.qq-img-gen-btn-secondary:active { background: rgba(93,64,55,0.15); }
.qq-img-gen-btn-cancel {
  background: none; color: rgba(var(--sp-text-rgb),0.5);
}

/* ── TTS 语音合成加载态 ── */
.qq-voice-loading {
  opacity: 0.65;
  pointer-events: none;
  position: relative;
}
.qq-voice-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(78,52,46,0.2);
  border-top-color: rgba(var(--sp-text-rgb),0.6);
  border-radius: 50%;
  animation: qq-tts-spin 0.7s linear infinite;
}
@keyframes qq-tts-spin {
  to { transform: rotate(360deg); }
}
.qq-bubble-other .qq-voice-bubble[data-tts="1"] {
  cursor: pointer;
}

/* ── 记忆互通下拉多选 ── */
.qq-shared-drop {
  position: relative;
  margin-top: 6px;
}
.qq-shared-drop-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid rgba(93,64,55,0.15);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, box-shadow .2s;
}
.qq-shared-drop-trigger:active,
.qq-shared-drop.open .qq-shared-drop-trigger {
  border-color: var(--sp-accent-2);
  box-shadow: 0 0 0 2px rgba(245,124,0,0.12);
}
.qq-shared-drop-label {
  font-size: 13px;
  color: var(--sp-text-soft);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qq-shared-drop-label.has-value {
  color: var(--sp-text);
}
.qq-shared-drop-arrow {
  flex-shrink: 0;
  color: var(--sp-text-soft);
  transition: transform .2s;
}
.qq-shared-drop.open .qq-shared-drop-arrow {
  transform: rotate(180deg);
}
.qq-shared-drop-panel {
  display: none;
  margin-top: 4px;
  border: 1px solid rgba(93,64,55,0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(93,64,55,0.10);
  overflow: hidden;
  animation: qqDropFadeIn .15s ease;
}
.qq-shared-drop.open .qq-shared-drop-panel {
  display: block;
}
@keyframes qqDropFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qq-shared-drop-list {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}
.qq-shared-chat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.qq-shared-chat-item:active {
  background: rgba(245,124,0,0.06);
}
.qq-shared-cb {
  width: 16px;
  height: 16px;
  accent-color: var(--sp-accent-2);
  flex-shrink: 0;
}
.qq-shared-divider {
  height: 1px;
  background: #f0e8e0;
  margin: 4px 12px;
}
.qq-shared-chat-name {
  font-size: 13px;
  color: var(--sp-text);
}
/* ── 后台行动频率拖动条 ── */
.qq-freq-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.qq-freq-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--sp-accent-2) var(--pct, 100%), rgba(93,64,55,0.12) var(--pct, 100%));
  outline: none;
}
.qq-freq-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sp-accent-2);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  cursor: pointer;
}
.qq-freq-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sp-accent-2);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  cursor: pointer;
}
.qq-freq-value {
  min-width: 40px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-accent-2);
  font-variant-numeric: tabular-nums;
}

/* ── 群信息成员列表 ── */
.qq-gi-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
}
.qq-gi-member-name {
  flex: 1;
  font-size: 14px;
  color: var(--sp-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qq-gi-member-del {
  background: none;
  border: none;
  color: #e53935;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.qq-gi-member-del:active { background: rgba(229,57,53,0.08); }
.qq-gi-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  cursor: pointer;
  color: rgba(var(--sp-text-rgb),0.5);
  font-size: 13px;
  border-top: 1px solid rgba(93,64,55,0.06);
}
.qq-gi-add-btn:active { background: rgba(93,64,55,0.04); }

/* ── 红包消息 ── */
.qq-bubble-rp,
.qq-bubble-special {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.qq-redpacket-card {
  width: 200px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.qq-redpacket-card:active { transform: scale(0.97); }
.qq-redpacket-top {
  background: linear-gradient(135deg, #e84118, #c0392b);
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.qq-redpacket-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}
.qq-redpacket-title {
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qq-redpacket-bottom {
  background: linear-gradient(135deg, #d63031, #b71c1c);
  padding: 6px 14px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.qq-rp-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.qq-rp-my-amount {
  color: rgba(255,255,255,0.85);
  font-size: 12px;
}
.qq-rp-progress {
  color: rgba(255,255,255,0.7);
  font-size: 11px;
}
.qq-rp-opened .qq-redpacket-top {
  background: linear-gradient(135deg, #c0392b88, #96281888);
}
.qq-rp-opened .qq-redpacket-bottom {
  background: linear-gradient(135deg, #b7211c88, #8b170f88);
}
.qq-rp-opened .qq-redpacket-icon { opacity: 0.6; }
.qq-rp-claims {
  background: #fff;
  padding: 6px 12px;
  border-radius: 0 0 10px 10px;
}
.qq-rp-claim-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}
.qq-rp-claim-name { color: var(--sp-text); }
.qq-rp-claim-val { color: #c0392b; font-weight: 600; }

/* ── 领取红包弹窗 ── */
.qq-rp-open-mask {
  position: absolute;
  inset: 0;
  background: rgba(93,64,55,0.48);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.qq-rp-open-mask.visible { opacity: 1; }
.qq-rp-open-dialog {
  width: 280px;
  background: linear-gradient(135deg, #e84118, #c0392b);
  border-radius: 16px;
  padding: 32px 24px 20px;
  text-align: center;
  position: relative;
  transform: scale(0.85);
  transition: transform 0.3s;
  box-shadow: 0 12px 40px rgba(93,64,55,0.2);
}
.qq-rp-open-mask.visible .qq-rp-open-dialog { transform: scale(1); }
.qq-rp-open-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(var(--sp-text-rgb),0.4);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.qq-rp-open-close:active { color: rgba(var(--sp-text-rgb),0.7); }
.qq-rp-open-dialog .qq-rp-open-close { color: rgba(255,255,255,0.6); }
.qq-rp-open-avatar {
  margin-bottom: 12px;
}
.qq-rp-open-avatar .ct-avatar {
  margin: 0 auto;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,0.3);
}
.qq-rp-open-avatar .ct-avatar img { border-radius: 50%; }
.qq-rp-open-avatar .ct-avatar-fallback { border-radius: 50% !important; }
.qq-rp-open-sender {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.qq-rp-open-title {
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  margin-bottom: 24px;
}
.qq-rp-open-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5c518, #e2a800);
  border: none;
  color: #c0392b;
  font-size: 32px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform 0.15s;
  font-family: serif;
}
.qq-rp-open-btn:active { transform: scale(0.9); }
.qq-rp-open-footer {
  color: rgba(255,255,255,0.4);
  font-size: 11px;
  margin-top: 20px;
}
.qq-rp-opening {
  animation: rpFlipOpen 0.6s ease forwards;
}
@keyframes rpFlipOpen {
  0% { transform: scale(1); }
  40% { transform: scale(1.05) rotateY(90deg); opacity: 0.6; }
  60% { transform: scale(1.05) rotateY(90deg); opacity: 0; }
  100% { transform: scale(1) rotateY(0); opacity: 1; }
}
.qq-rp-result-show {
  animation: rpResultIn 0.35s ease;
}
@keyframes rpResultIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.qq-rp-result {
  padding: 16px 0 8px;
}
.qq-rp-result-sender {
  color: #fff;
  font-size: 14px;
  margin-bottom: 4px;
}
.qq-rp-result-title {
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  margin-bottom: 20px;
}
.qq-rp-result-amount {
  color: #f5c518;
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}
.qq-rp-result-hint {
  color: rgba(255,255,255,0.45);
  font-size: 12px;
}

/* ── 发红包/群收款 底部弹窗 ── */
.qq-rp-send-mask {
  position: absolute;
  inset: 0;
  background: rgba(93,64,55,0.42);
  z-index: 9998;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}
.qq-rp-send-mask.visible { opacity: 1; }
.qq-rp-send-dialog {
  width: 100%;
  max-width: 420px;
  background: rgba(255,253,231,0.97);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  border-top: 1px solid rgba(var(--sp-accent-rgb),0.18);
  box-shadow: 0 -4px 24px rgba(93,64,55,0.08);
}
.qq-rp-send-mask.visible .qq-rp-send-dialog {
  transform: translateY(0);
}
.qq-rp-send-header {
  background: rgba(255,253,231,0.96);
  color: var(--sp-text);
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(93,64,55,0.06);
}
.qq-rp-send-back {
  background: none;
  border: none;
  color: rgba(var(--sp-text-rgb),0.45);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.qq-rp-send-back:active { color: rgba(var(--sp-text-rgb),0.7); }
.qq-rp-send-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qq-rp-send-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qq-rp-send-field label {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.48);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.qq-rp-amount-input {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #e65100 !important;
  text-align: center;
  padding: 10px !important;
}
.qq-rp-type-tabs {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(93,64,55,0.1);
}
.qq-rp-type-tab {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: rgba(255,248,225,0.45);
  color: var(--sp-text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.qq-rp-type-tab + .qq-rp-type-tab {
  border-left: 1px solid rgba(93,64,55,0.1);
}
.qq-rp-type-tab.active {
  background: rgba(var(--sp-accent-rgb),0.75);
  color: #fff;
  font-weight: 600;
}
.qq-rp-send-footer {
  padding: 12px 16px 20px;
}
.qq-rp-send-submit {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: rgba(var(--sp-accent-rgb),0.75);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.qq-rp-send-submit:active { transform: scale(0.97); background: rgba(var(--sp-accent-rgb),0.88); }

/* ── 红包/投票/收款 详情弹窗（居中） ── */
.qq-rp-detail-mask {
  position: absolute;
  inset: 0;
  background: rgba(93,64,55,0.42);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}
.qq-rp-detail-mask.visible { opacity: 1; }
.qq-rp-detail-dialog {
  width: 280px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(var(--sp-accent-rgb),0.14);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.25s;
  box-shadow: 0 8px 32px rgba(93,64,55,0.1);
}
.qq-rp-detail-mask.visible .qq-rp-detail-dialog { transform: scale(1); }
.qq-rp-detail-header {
  background: rgba(255,248,225,0.5);
  padding: 28px 20px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(93,64,55,0.06);
}
.qq-rp-detail-sender {
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.qq-rp-detail-title {
  color: rgba(var(--sp-text-rgb),0.6);
  font-size: 12px;
  margin-bottom: 6px;
}
.qq-rp-detail-type {
  color: rgba(var(--sp-text-rgb),0.4);
  font-size: 11px;
}
.qq-rp-detail-total {
  color: #e65100;
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
}
.qq-rp-detail-claims {
  padding: 8px 16px 16px;
  max-height: 200px;
  overflow-y: auto;
}
.qq-rp-detail-claim-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(93,64,55,0.06);
}
.qq-rp-detail-claim-row:last-child { border-bottom: none; }
.qq-rp-detail-claim-name {
  font-size: 14px;
  color: var(--sp-text);
}
.qq-rp-detail-claim-amount {
  font-size: 14px;
  color: #e65100;
  font-weight: 600;
}
.qq-rp-detail-empty {
  padding: 24px 16px;
  text-align: center;
  color: rgba(var(--sp-text-rgb),0.4);
  font-size: 13px;
}

/* ── 新消息通知横幅 ── */
.qq-notify-banner {
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  z-index: 9999;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.4,.0,.2,1), opacity 0.35s ease;
  pointer-events: none;
}
.qq-notify-banner.qq-notify-show {
  transform: translateY(8px);
  opacity: 1;
  pointer-events: auto;
}
.qq-notify-banner.qq-notify-hide {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.qq-notify-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.97);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.qq-notify-inner:active {
  background: rgba(245,240,235,0.97);
}
.qq-notify-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.qq-notify-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qq-notify-text {
  font-size: 12.5px;
  color: rgba(var(--sp-text-rgb),0.55);
  line-height: 1.3;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════ 群投票 ═══════════════════ */
.qq-poll-card {
  width: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: transform 0.12s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 6px rgba(93,64,55,0.06);
  border: 1px solid rgba(var(--sp-accent-rgb),0.12);
}
.qq-poll-card:active { transform: scale(0.97); }
.qq-poll-header {
  background: linear-gradient(135deg, rgba(var(--sp-accent-rgb),0.82), rgba(255,143,0,0.9));
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qq-poll-icon { color: #fff; flex-shrink: 0; }
.qq-poll-title {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qq-poll-meta {
  padding: 6px 14px;
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.45);
  border-bottom: 1px solid rgba(93,64,55,0.06);
}
.qq-poll-options { padding: 6px 10px; }
.qq-poll-option {
  position: relative;
  border-radius: 6px;
  margin: 4px 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(var(--sp-accent-rgb),0.2);
  transition: border-color 0.2s;
}
.qq-poll-option:active { opacity: 0.85; }
.qq-poll-option-voted { border-color: rgba(var(--sp-accent-rgb),0.65); }
.qq-poll-opt-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: rgba(var(--sp-accent-rgb),0.12);
  transition: width 0.4s ease;
  border-radius: 6px;
}
.qq-poll-option-voted .qq-poll-opt-bar {
  background: rgba(var(--sp-accent-rgb),0.22);
}
.qq-poll-opt-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  gap: 6px;
}
.qq-poll-opt-text {
  font-size: 13px;
  color: var(--sp-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qq-poll-opt-pct {
  font-size: 12px;
  color: #e65100;
  font-weight: 600;
  flex-shrink: 0;
}
.qq-poll-opt-count {
  position: relative;
  padding: 0 10px 4px;
  font-size: 10px;
  color: rgba(var(--sp-text-rgb),0.35);
}
.qq-poll-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid rgba(93,64,55,0.06);
}
.qq-poll-action, .qq-poll-voted-hint {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.4);
}
.qq-poll-detail-btn {
  font-size: 11px;
  color: rgba(var(--sp-accent-rgb),0.85);
  cursor: pointer;
  font-weight: 600;
}
.qq-poll-detail-btn:active { opacity: 0.6; }

/* ── 发起投票弹窗 ── */
.qq-poll-create-mask {
  position: absolute;
  inset: 0;
  background: rgba(93,64,55,0.42);
  z-index: 9998;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.3s;
}
.qq-poll-create-mask.visible { opacity: 1; }
.qq-poll-create-dialog {
  width: 100%;
  max-height: 85%;
  background: rgba(255,253,231,0.97);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s;
  border-top: 1px solid rgba(var(--sp-accent-rgb),0.18);
  box-shadow: 0 -4px 24px rgba(93,64,55,0.08);
}
.qq-poll-create-mask.visible .qq-poll-create-dialog {
  transform: translateY(0);
}
.qq-poll-create-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 10px;
  border-bottom: 1px solid rgba(93,64,55,0.06);
  font-weight: 700;
  font-size: 16px;
  color: var(--sp-text);
  background: rgba(255,253,231,0.96);
}
.qq-poll-create-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.qq-poll-opt-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.qq-poll-opt-input-row .stg-input { flex: 1; }
.qq-poll-opt-del {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: rgba(var(--sp-text-rgb),0.4);
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}
.qq-poll-opt-del:active { background: rgba(93,64,55,0.08); color: rgba(var(--sp-text-rgb),0.7); }
.qq-poll-add-opt {
  display: block;
  width: 100%;
  padding: 8px;
  border: 1px dashed rgba(var(--sp-accent-rgb),0.4);
  border-radius: 8px;
  background: none;
  color: rgba(var(--sp-accent-rgb),0.85);
  font-size: 13px;
  cursor: pointer;
  margin-top: 4px;
}
.qq-poll-add-opt:active { background: rgba(var(--sp-accent-rgb),0.08); }
.qq-poll-submit {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: rgba(var(--sp-accent-rgb),0.75);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.qq-poll-submit:active { transform: scale(0.97); background: rgba(var(--sp-accent-rgb),0.88); }

/* ── 投票详情弹窗 ── */
.qq-poll-detail-header {
  text-align: center;
  padding: 20px 20px 12px;
  background: rgba(255,248,225,0.5);
  border-bottom: 1px solid rgba(93,64,55,0.06);
  margin-bottom: 0;
}
.qq-poll-detail-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-text);
  margin-bottom: 4px;
}
.qq-poll-detail-meta {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.5);
}
.qq-poll-detail-list { padding: 8px 16px; }
.qq-poll-detail-opt {
  padding: 8px 0;
  border-bottom: 1px solid rgba(93,64,55,0.04);
}
.qq-poll-detail-opt:last-child { border-bottom: none; }
.qq-poll-detail-opt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.qq-poll-detail-opt-name {
  font-size: 13px;
  color: var(--sp-text);
  font-weight: 500;
}
.qq-poll-detail-opt-stat {
  font-size: 12px;
  color: #e65100;
  font-weight: 600;
}
.qq-poll-detail-voters {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.45);
  margin-top: 3px;
  line-height: 1.4;
}

/* ═══════════════════ 群收款 ═══════════════════ */
.qq-grouppay-card {
  width: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: transform 0.12s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 6px rgba(93,64,55,0.06);
  border: 1px solid rgba(var(--sp-accent-rgb),0.12);
}
.qq-grouppay-card:active { transform: scale(0.97); }
.qq-grouppay-top {
  background: linear-gradient(135deg, rgba(255,143,0,0.85), rgba(230,81,0,0.88));
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.qq-grouppay-icon { color: #fff; flex-shrink: 0; }
.qq-grouppay-info { flex: 1; min-width: 0; }
.qq-grouppay-title {
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qq-grouppay-amount {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
}
.qq-grouppay-progress {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qq-grouppay-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(93,64,55,0.06);
  overflow: hidden;
}
.qq-grouppay-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--sp-accent-rgb),0.7), rgba(var(--sp-accent-rgb),0.85));
  transition: width 0.4s ease;
}
.qq-grouppay-progress-text {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.45);
  flex-shrink: 0;
}
.qq-grouppay-action {
  padding: 0 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.qq-grouppay-my-amount {
  font-size: 12px;
  color: #e65100;
  font-weight: 500;
}
.qq-grouppay-pay-btn {
  padding: 5px 16px;
  border: none;
  border-radius: 14px;
  background: rgba(var(--sp-accent-rgb),0.8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.qq-grouppay-pay-btn:active { background: rgba(var(--sp-accent-rgb),0.92); }
.qq-grouppay-paid-hint {
  font-size: 12px;
  color: #558b2f;
  font-weight: 500;
}
.qq-grouppay-bottom {
  background: linear-gradient(135deg, rgba(230,81,0,0.85), rgba(191,54,12,0.88));
  padding: 6px 14px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.qq-gp-completed .qq-grouppay-top {
  background: linear-gradient(135deg, rgba(255,143,0,0.4), rgba(230,81,0,0.4));
}
.qq-gp-completed .qq-grouppay-bottom {
  background: linear-gradient(135deg, rgba(230,81,0,0.4), rgba(191,54,12,0.4));
}

/* ── 群收款创建弹窗 ── */
.qq-gp-create-header {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 10px;
  border-bottom: 1px solid rgba(93,64,55,0.06);
  font-weight: 700;
  font-size: 16px;
  color: var(--sp-text);
  background: rgba(255,253,231,0.96);
}
.qq-gp-member-list {
  max-height: 200px;
  overflow-y: auto;
}
.qq-gp-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(93,64,55,0.04);
  cursor: pointer;
}
.qq-gp-member-row:last-child { border-bottom: none; }
.qq-gp-member-cb {
  flex-shrink: 0;
  accent-color: rgba(var(--sp-accent-rgb),0.85);
}
.qq-gp-member-row span { flex: 1; font-size: 13px; color: var(--sp-text); }
.qq-gp-member-amount { flex-shrink: 0; }
.qq-gp-submit {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: rgba(var(--sp-accent-rgb),0.75);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.qq-gp-submit:active { transform: scale(0.97); background: rgba(var(--sp-accent-rgb),0.88); }

/* ── 群收款详情弹窗 ── */
.qq-gp-detail-header {
  text-align: center;
  padding: 20px 20px 12px;
  background: rgba(255,248,225,0.5);
  border-bottom: 1px solid rgba(93,64,55,0.06);
  margin-bottom: 0;
}
.qq-gp-detail-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-text);
  margin-bottom: 3px;
}
.qq-gp-detail-meta {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.5);
}
.qq-gp-detail-total {
  font-size: 13px;
  color: #e65100;
  font-weight: 600;
  margin-top: 4px;
}
.qq-gp-detail-list { padding: 8px 16px; }
.qq-gp-detail-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(93,64,55,0.04);
}
.qq-gp-detail-row:last-child { border-bottom: none; }
.qq-gp-detail-name {
  flex: 1;
  font-size: 13px;
  color: var(--sp-text);
}
.qq-gp-detail-amount {
  font-size: 13px;
  color: var(--sp-text);
  font-weight: 500;
  margin-right: 10px;
}
.qq-gp-detail-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.qq-gp-status-paid {
  color: #558b2f;
  background: rgba(139,195,74,0.15);
}
.qq-gp-status-unpaid {
  color: rgba(var(--sp-text-rgb),0.5);
  background: rgba(93,64,55,0.06);
}

/* ================================================================
*  小组件系统样式
* ================================================================ */

/* ── 编辑工具栏优化 ── */
.edit-tb-widget {
  background: rgba(var(--sp-accent-rgb),0.55) !important;
  border-color: rgba(var(--sp-accent-rgb),0.3) !important;
  color: #fff !important;
}
.edit-tb-widget:active { background: rgba(var(--sp-accent-rgb),0.8) !important; }

/* ── 小组件选择器面板 ── */
.widget-selector-overlay {
  position: absolute;
  inset: 0;
  z-index: 1500;
  /* 页面背景跟随主题色（原暖琥珀渐变 + 角落微光） */
  background:
    radial-gradient(ellipse at 25% 15%, rgba(var(--sp-accent-rgb),0.10) 0%, transparent 55%),
    var(--sp-page-bg);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), visibility 0s 0.35s;
  visibility: hidden;
}
.widget-selector-overlay.visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), visibility 0s;
}

.wgt-sel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(93,64,55,0.08);
}
.wgt-sel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-text);
}
.wgt-sel-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.wgt-sel-sidebar {
  width: 72px;
  flex-shrink: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-right: 1px solid rgba(93,64,55,0.08);
  padding: 8px 0;
  background: rgba(255,255,255,0.3);
}
.wgt-sel-main {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

/* ── 分类侧边栏项 ── */
.wgt-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0;
  position: relative;
}
.wgt-cat-item.active {
  background: rgba(var(--sp-accent-rgb),0.12);
}
.wgt-cat-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 3px;
  background: var(--sp-accent-2);
  border-radius: 0 3px 3px 0;
}
.wgt-cat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wgt-cat-name {
  font-size: 10px;
  color: var(--sp-text);
  text-align: center;
  line-height: 1.2;
}

/* ── 已添加小组件区域 ── */
.wgt-exist-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(93,64,55,0.1);
}
.wgt-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-text);
  margin-bottom: 10px;
}
.wgt-exist-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wgt-exist-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  border: 1px solid rgba(93,64,55,0.06);
}
.wgt-exist-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wgt-exist-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wgt-exist-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text);
}
.wgt-exist-size {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.5);
}
.wgt-exist-del {
  background: rgba(229,57,53,0.1);
  color: #E53935;
  border: none;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* ── 添加区域 ── */
.wgt-add-section { margin-top: 4px; }
.wgt-size-group { margin-bottom: 16px; }
.wgt-size-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--sp-text-rgb),0.55);
  margin-bottom: 8px;
  padding: 3px 8px;
  background: rgba(93,64,55,0.06);
  border-radius: 6px;
  display: inline-block;
}
.wgt-style-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wgt-preview-card {
  flex: 1;
  min-width: 120px;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.6);
  border-radius: 14px;
  border: 1px solid rgba(93,64,55,0.06);
}
.wgt-preview-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  background: linear-gradient(135deg, rgba(245,240,235,1), rgba(235,228,218,1));
}
.wgt-preview-2x2 { aspect-ratio: 1; }
.wgt-preview-4x2 { aspect-ratio: 2/1; }
.wgt-preview-4x4 { aspect-ratio: 1; }
.wgt-preview-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
}
.wgt-preview-label {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.6);
  font-weight: 500;
}
.wgt-add-btn {
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s;
}
.wgt-add-btn:active { transform: scale(0.95); }

/* ================================================================
*  小组件通用容器样式
* ================================================================ */
.widget-item {
  border-radius: 16px;
  overflow: hidden;
  z-index: 1;
}

.wgt-del-btn {
  display: none;
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(229,57,53,0.92);
  border: 2px solid rgba(255,255,255,0.95);
  cursor: pointer;
  z-index: 20;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
  transition: transform 0.15s;
}
.wgt-del-btn:active { transform: scale(0.85); }
#screen.edit-mode .wgt-del-btn {
  display: flex;
}

/* ================================================================
*  时钟小组件
* ================================================================ */

/* 4×2 样式1: 默认时钟（保持原始样式） */
.wgt-clock-42-s1 {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wgt-clock-42-s1 .wgt-clock-time {
  font-size: 52px;
  font-weight: 200;
  color: var(--sp-text);
  letter-spacing: 2px;
  line-height: 1.1;
  text-shadow: 0 2px 16px rgba(var(--sp-accent-rgb),0.12);
}
.wgt-clock-42-s1 .wgt-clock-date {
  font-size: 14px;
  color: rgba(var(--sp-text-rgb),0.5);
  margin-top: 4px;
}

/* 4×2 样式2: 双色分区（保持原始配色） */
.wgt-clock-42-s2 {
  width: 100%; height: 100%;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
}
.wgt-clock-s2-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF8F00, #FFB300);
}
.wgt-clock-s2-left .wgt-clock-time {
  font-size: 42px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.wgt-clock-s2-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
}
.wgt-clock-s2-weekday {
  font-size: 16px;
  font-weight: 700;
  color: #FF8F00;
  margin-bottom: 2px;
}
.wgt-clock-s2-right .wgt-clock-date {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.5);
}

/* 4×4 样式1: 模拟钟 */
.wgt-clock-44-s1 {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}
.wgt-analog-clock {
  width: 70%;
  max-width: 180px;
}

/* 4×4 样式2: 大字数字 */
.wgt-clock-44-s2 {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  gap: 2px;
}
.wgt-clock-44-s2-time {
  font-size: 64px;
  font-weight: 200;
  color: var(--sp-text);
  letter-spacing: 3px;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(var(--sp-accent-rgb),0.15);
}
.wgt-clock-44-s2-sec {
  font-size: 22px;
  font-weight: 300;
  color: rgba(var(--sp-text-rgb),0.45);
}
.wgt-clock-44-s2-date {
  font-size: 14px;
  color: rgba(var(--sp-text-rgb),0.55);
  margin-top: 4px;
}
.wgt-clock-44-s2-motto {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.35);
  margin-top: 8px;
  font-style: italic;
}

/* ================================================================
*  天气小组件
* ================================================================ */
.wgt-weather-svg { width: 100%; height: 100%; }

/* 2×2 样式1 */
.wgt-weather-22-s1 {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(3,155,229,0.15), rgba(129,212,250,0.25));
  border: 1px solid rgba(3,155,229,0.12);
  border-radius: 16px;
  gap: 2px;
}
.wgt-weather-icon-sm { width: 36px; height: 36px; }
.wgt-weather-temp {
  font-size: 32px;
  font-weight: 300;
  color: #01579B;
  line-height: 1;
}
.wgt-weather-city {
  font-size: 11px;
  color: rgba(1,87,155,0.6);
}

/* 2×2 样式2 */
.wgt-weather-22-s2 {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  background: linear-gradient(135deg, #039BE5, #4FC3F7);
  border-radius: 16px;
  gap: 2px;
}
.wgt-weather-22-s2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wgt-weather-22-s2-temp {
  font-size: 34px;
  font-weight: 300;
  color: #fff;
  line-height: 1;
}
.wgt-weather-22-s2-icon { width: 32px; height: 32px; }
.wgt-weather-22-s2-icon .wgt-weather-svg circle { fill: #fff; }
.wgt-weather-22-s2-icon .wgt-weather-svg line { stroke: #fff; }
.wgt-weather-22-s2-icon .wgt-weather-svg path { fill: #fff; }
.wgt-weather-22-s2-cond {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}
.wgt-weather-22-s2-city {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}

/* 4×2 样式1 */
.wgt-weather-42-s1 {
  width: 100%; height: 100%;
  display: flex;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(227,242,253,0.85));
  border: 1px solid rgba(3,155,229,0.1);
  border-radius: 16px;
}
.wgt-weather-42-s1-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.wgt-weather-42-s1-icon { width: 36px; height: 36px; }
.wgt-weather-42-s1-temp {
  font-size: 30px;
  font-weight: 300;
  color: #01579B;
  line-height: 1;
}
.wgt-weather-42-s1-cond {
  font-size: 11px;
  color: rgba(1,87,155,0.5);
}
.wgt-weather-42-s1-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-left: 1px solid rgba(3,155,229,0.08);
}
.wgt-weather-fc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.wgt-weather-fc-day { font-size: 10px; color: rgba(var(--sp-text-rgb),0.5); }
.wgt-weather-fc-icon { width: 22px; height: 22px; }
.wgt-weather-fc-temp { font-size: 12px; font-weight: 600; color: #01579B; }

/* 4×2 样式2 */
.wgt-weather-42-s2 {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  background: linear-gradient(135deg, #0277BD, #4FC3F7);
  border-radius: 16px;
}
.wgt-weather-42-s2-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wgt-weather-42-s2-temp {
  font-size: 36px;
  font-weight: 300;
  color: #fff;
  line-height: 1;
}
.wgt-weather-42-s2-info {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  margin-top: 2px;
}
.wgt-weather-42-s2-right { width: 40px; height: 40px; }
.wgt-weather-42-s2-right .wgt-weather-svg circle { fill: #fff; }
.wgt-weather-42-s2-right .wgt-weather-svg line { stroke: #fff; }
.wgt-weather-42-s2-right .wgt-weather-svg path { fill: rgba(255,255,255,0.9); }
.wgt-weather-42-s2-bot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}

/* ================================================================
*  图片相框小组件
* ================================================================ */
.wgt-photo-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.wgt-photo-empty, .wgt-photo-empty-wide {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,248,225,0.6), rgba(255,243,224,0.8));
}

/* ── 2×2 样式1: 圆形相框+装饰环 ── */
.wgt-photo-22-s1 {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 16px;
}

/* 相框图片设置弹窗预览 */
.wgt-photo-preview {
  width: 100%;
  aspect-ratio: 1;
  max-height: 170px;
  border-radius: 12px;
  border: 1px solid rgba(93,64,55,0.12);
  background: rgba(255,248,225,0.5) center / cover no-repeat;
  margin-bottom: 14px;
}
.wgt-photo-circle-frame {
  position: relative;
  width: 60%; aspect-ratio: 1;
}
.wgt-photo-circle-ring {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2.5px dashed rgba(123,31,162,0.25);
}
.wgt-photo-circle-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid rgba(123,31,162,0.35);
  background: transparent;
}
.wgt-photo-circle-img { border-radius: 50%; }
.wgt-photo-circle-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.wgt-photo-circle-label {
  font-size: 9px; color: rgba(123,31,162,0.4);
}

/* ── 2×2 样式2: 拍立得+微倾斜 ── */
.wgt-photo-22-s2 {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 16px;
}
.wgt-photo-polaroid-card {
  width: 82%; height: 88%;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 3px 14px rgba(93,64,55,0.15), 0 1px 3px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  transform: rotate(-2.5deg);
  overflow: hidden;
}
.wgt-photo-polaroid-img {
  flex: 1;
  margin: 6px 6px 0;
  border-radius: 1px;
  overflow: hidden;
  background: linear-gradient(135deg, #EDE7F6, #E8EAF6);
}
.wgt-photo-polaroid-strip {
  height: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wgt-photo-polaroid-strip span {
  font-size: 8px; color: rgba(var(--sp-text-rgb),0.25);
  font-style: italic; letter-spacing: 2px; text-transform: uppercase;
}

/* ── 4×2 样式1: 电影胶片+三格 ── */
.wgt-photo-42-s1 {
  width: 100%; height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1a1a;
}
.wgt-photo-filmstrip {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
}
.wgt-photo-film-holes {
  height: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 6px;
}
.wgt-photo-film-holes::before {
  content: '';
  display: block;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0, transparent 5px,
    rgba(255,255,255,0.1) 5px, rgba(255,255,255,0.1) 9px,
    transparent 9px, transparent 14px
  );
}
.wgt-photo-film-frames {
  flex: 1;
  display: flex;
  gap: 3px;
  padding: 0 6px;
  min-height: 0;
}
.wgt-photo-film-frame {
  flex: 1;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #333;
}
.wgt-photo-film-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #333;
}

/* ── 4×2 样式2: 杂志封面 ── */
.wgt-photo-42-s2 {
  width: 100%; height: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.wgt-photo-magazine {
  width: 100%; height: 100%;
  position: relative;
}
.wgt-photo-magazine-img {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #CE93D8, #7E57C2);
}
.wgt-photo-magazine-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px 12px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}
.wgt-photo-magazine-title {
  font-size: 16px; font-weight: 800;
  color: #fff; letter-spacing: 3px;
  text-transform: uppercase;
}
.wgt-photo-magazine-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  margin-top: 1px;
}

/* ── 4×4 样式1: 画廊拼贴 ── */
.wgt-photo-44-s1 {
  width: 100%; height: 100%;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px;
}
.wgt-photo-gallery {
  flex: 2;
  display: flex;
  gap: 3px;
  min-height: 0;
}
.wgt-photo-gallery-big {
  flex: 2;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #B39DDB, #7E57C2);
}
.wgt-photo-gallery-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wgt-photo-gallery-sm {
  flex: 1;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #CE93D8, #AB47BC);
}
.wgt-photo-gallery-row {
  flex: 1;
  display: flex;
  gap: 3px;
  min-height: 0;
}
.wgt-photo-gallery-third {
  flex: 1;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #E1BEE7, #BA68C8);
}
.wgt-photo-gallery-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* ── 4×4 样式2: 桌面相框组合 ── */
.wgt-photo-44-s2 {
  width: 100%; height: 100%;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wgt-photo-desk {
  width: 88%; height: 88%;
  position: relative;
}
.wgt-photo-desk-frame {
  position: absolute;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 3px 16px rgba(93,64,55,0.18), 0 1px 3px rgba(0,0,0,0.08);
  padding: 5px;
}
.wgt-desk-f1 {
  width: 55%; height: 60%;
  top: 5%; left: 3%;
  transform: rotate(-4deg);
  z-index: 1;
}
.wgt-desk-f2 {
  width: 48%; height: 48%;
  top: 8%; right: 2%;
  transform: rotate(3deg);
  z-index: 2;
}
.wgt-desk-f3 {
  width: 50%; height: 42%;
  bottom: 2%; left: 20%;
  transform: rotate(-1.5deg);
  z-index: 3;
}
.wgt-photo-desk-mat {
  width: 100%; height: 100%;
  border: 1.5px solid rgba(139,109,79,0.2);
  overflow: hidden;
  background: linear-gradient(135deg, #EDE7F6, #E8EAF6);
}
.wgt-photo-desk-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* ================================================================
*  便签小组件
* ================================================================ */

/* 2×2 样式1: 黄色便签 */
.wgt-note-22-s1 {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #FFF9C4, #FFF176);
  border-radius: 16px;
  padding: 12px 10px 10px;
  position: relative;
  box-shadow: 2px 3px 12px rgba(249,168,37,0.15);
}
.wgt-note-pin {
  width: 10px; height: 10px;
  background: radial-gradient(circle, #E53935, #B71C1C);
  border-radius: 50%;
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.wgt-note-text {
  font-size: 12px;
  color: var(--sp-text);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  word-break: break-all;
  white-space: pre-wrap;
}
.wgt-note-22-s1 .wgt-note-text {
  margin-top: 6px;
  -webkit-line-clamp: 4;
}

/* 2×2 样式2: 白色卡片 */
.wgt-note-22-s2 {
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.94);
  border-radius: 16px;
  border: 1px solid rgba(93,64,55,0.08);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}
.wgt-note-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(93,64,55,0.06);
  flex-shrink: 0;
}
.wgt-note-header span {
  font-size: 11px;
  font-weight: 600;
  color: rgba(var(--sp-text-rgb),0.5);
}
.wgt-note-lines {
  flex: 1;
  padding-top: 6px;
  background: repeating-linear-gradient(transparent, transparent 19px, rgba(93,64,55,0.06) 19px, rgba(93,64,55,0.06) 20px);
  overflow: hidden;
}
.wgt-note-22-s2 .wgt-note-text { -webkit-line-clamp: 3; }

/* 4×4 样式1: 大记事本 */
.wgt-note-44-s1 {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.94);
  border-radius: 16px;
  border: 1px solid rgba(93,64,55,0.08);
  overflow: hidden;
}
.wgt-note-44-head {
  padding: 10px 14px;
  background: rgba(var(--sp-accent-rgb),0.08);
  border-bottom: 1px solid rgba(93,64,55,0.06);
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-text);
  flex-shrink: 0;
}
.wgt-note-44-body {
  flex: 1;
  padding: 10px 14px;
  overflow: hidden;
  background: repeating-linear-gradient(transparent, transparent 23px, rgba(93,64,55,0.05) 23px, rgba(93,64,55,0.05) 24px);
}
.wgt-note-44-s1 .wgt-note-text { -webkit-line-clamp: 10; }

/* 4×4 样式2: 软木板 */
.wgt-note-44-s2 {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  padding: 16px;
}
.wgt-note-44-s2-card {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #FFF9C4, #FFF176);
  border-radius: 4px;
  padding: 16px 12px 12px;
  position: relative;
  box-shadow: 2px 3px 14px rgba(93,64,55,0.15);
  transform: rotate(-1deg);
}
.wgt-note-44-s2 .wgt-note-text { -webkit-line-clamp: 10; }

/* ================================================================
*  音乐播放器小组件 — 全面重制 v2
* ================================================================ */

/* ── 基础卡片 ── */
.wgt-m {
  width: 100%; height: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── 通用文字 ── */
.wgt-m-title {
  font-size: 13px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wgt-m-sub {
  font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 1px;
}

/* ── skip 按钮 ── */
.wgt-m-skip {
  width: 18px; height: 18px;
  flex-shrink: 0; cursor: pointer;
  transition: transform 0.1s;
}
.wgt-m-skip:active { transform: scale(0.82); }

/* ── 实心圆形播放按钮 ── */
.wgt-m-playbtn {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
  transition: transform 0.12s;
}
.wgt-m-playbtn:active { transform: scale(0.88); }
.wgt-m-play-icon { width: 16px; height: 16px; }

/* ── 封面基础 ── */
.wgt-m-art {
  background: linear-gradient(135deg, #E91E63, #9C27B0);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}

/* ── 进度条 ── */
.wgt-m-prog {
  width: 100%; height: 3px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px; position: relative;
}
.wgt-m-prog-fill {
  height: 100%; border-radius: 2px;
  position: relative; transition: width 0.3s;
}
.wgt-m-prog-knob {
  position: absolute; right: -4px; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* ── 时间标注 ── */
.wgt-m-time {
  display: flex; justify-content: space-between;
  font-size: 9px; margin-top: 3px;
}
.wgt-m-time-row {
  display: flex; justify-content: space-between;
  font-size: 10px; margin-bottom: 4px;
}

/* ── skip 圆形按钮变体 ── */
.wgt-m-skipbtn {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.wgt-m-skipbtn .wgt-m-skip { width: 16px; height: 16px; }
.wgt-m-skipbtn.warm { background: rgba(120,80,40,0.08); }
.wgt-m-skipbtn.warm .wgt-m-skip { color: var(--sp-text); }


/* ════════════════════════════════════════════════════════════════
 *  ♫  黑胶唱片组件 — 共享样式
 * ════════════════════════════════════════════════════════════════ */
.wgt-m-vinyl {
  border-radius: 50%;
  background: #111;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.wgt-m-vinyl::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
    transparent 0px, transparent 2.5px,
    rgba(255,255,255,0.06) 3px, transparent 3.5px
  );
  pointer-events: none;
}
.wgt-m-vinyl::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 45%);
  pointer-events: none;
}
.wgt-m-vinyl-label {
  width: 30%; height: 30%; border-radius: 50%;
  background: linear-gradient(135deg, #E91E63, #FF6F00);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  box-shadow: 0 0 10px rgba(233,30,99,0.25);
}
.wgt-m-vinyl.spinning { animation: m-spin 3s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }


/* ════════════════════════════════════════════════════════════════
 *  ♫  霓虹均衡器 — 共享样式
 * ════════════════════════════════════════════════════════════════ */
.wgt-m-eq {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 5px; height: 36px; flex-shrink: 0;
}
.wgt-m-eq span {
  width: 5px; border-radius: 2.5px;
  background: linear-gradient(to top, #00BCD4, #7C4DFF);
  box-shadow: 0 0 8px rgba(0,188,212,0.4), 0 0 16px rgba(124,77,255,0.2);
  animation: m-eq-dance 0.5s ease-in-out infinite alternate;
}
.wgt-m-eq.paused span {
  animation: none;
  height: 15% !important;
  opacity: 0.3;
  box-shadow: none;
}
@keyframes m-eq-dance {
  0%   { height: 15%; }
  100% { height: 100%; }
}


/* ================================================================
 *  2×2 样式1 ── 暗夜紫光
 * ================================================================ */
.wgt-m-22s1 {
  background: linear-gradient(170deg, rgba(20,18,38,0.94) 0%, rgba(30,26,50,0.9) 100%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 24px rgba(10,8,20,0.5);
  padding: 18px 14px;
  justify-content: space-between;
}

/* 顶行：歌名 + 三点菜单 */
.wgt-m-22s1-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}
.wgt-m-22s1-menu {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  color: rgba(255,255,255,0.35); cursor: pointer;
}
.wgt-m-22s1 .wgt-m-title {
  color: #fff; font-size: 15px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.wgt-m-22s1 .wgt-m-sub {
  color: rgba(255,255,255,0.4); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 三按钮控制栏 */
.wgt-m-22s1-ctrl {
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.wgt-m-22s1-skipwrap {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wgt-m-22s1-skipwrap .wgt-m-skip {
  width: 20px; height: 20px; color: rgba(255,255,255,0.75);
}
.wgt-m-pb-violet {
  width: 60px; height: 60px;
  background: linear-gradient(145deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
  border: 3px solid rgba(139,92,246,0.3);
  color: #fff;
  box-shadow:
    0 0 0 6px rgba(124,58,237,0.15),
    0 0 30px rgba(124,58,237,0.45),
    0 0 60px rgba(124,58,237,0.2),
    inset 0 1px 1px rgba(255,255,255,0.2);
}
.wgt-m-pb-violet .wgt-m-play-icon { width: 24px; height: 24px; }

/* 底行：进度条 + 时间 */
.wgt-m-22s1-bottom {
  display: flex; align-items: center; gap: 6px;
}
.wgt-m-22s1-t {
  color: rgba(255,255,255,0.35); font-size: 9px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.wgt-m-22s1 .prog-violet {
  flex: 1; height: 3px; background: rgba(255,255,255,0.12); border-radius: 1.5px;
}
.prog-violet .wgt-m-prog-fill { background: rgba(255,255,255,0.8); border-radius: 1.5px; }
.prog-violet .wgt-m-prog-knob {
  background: #fff; width: 8px; height: 8px; right: -4px;
  box-shadow: 0 0 4px rgba(255,255,255,0.3);
}


/* ================================================================
 *  2×2 样式2 ── 霓虹节拍
 * ================================================================ */
.wgt-m-22s2 {
  background: rgba(10,10,25,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(124,77,255,0.15);
  box-shadow: 0 4px 22px rgba(0,0,0,0.4),
              inset 0 1px 0 rgba(255,255,255,0.03),
              0 0 40px rgba(124,77,255,0.05);
  padding: 10px 8px 8px;
  align-items: center; justify-content: center; gap: 5px;
}
.wgt-m-22s2-info { text-align: center; max-width: 100%; min-width: 0; }
.wgt-m-22s2 .wgt-m-title { color: #fff; font-size: 12px; letter-spacing: 0.3px; }
.wgt-m-22s2 .wgt-m-sub { color: rgba(255,255,255,0.35); font-size: 10px; }

/* 可视化区域 */
.wgt-m-22s2-viz {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 4px 0;
}

/* 霓虹光晕背景 */
.wgt-m-22s2-glow {
  position: absolute;
  width: 72px; height: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,188,212,0.15) 0%, rgba(124,77,255,0.08) 50%, transparent 72%);
  pointer-events: none;
}

/* 浮动霓虹光点（覆盖整张卡片，z-index 在最上层） */
.wgt-m-22s2-dots {
  position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden;
}
.nd {
  position: absolute; border-radius: 50%;
  animation: m-nd-float 3s ease-in-out infinite;
  opacity: 0; font-style: normal;
}
.nd1 { width: 4px; height: 4px; left: 12%; top: 55%; background: #00E5FF; box-shadow: 0 0 7px #00E5FF; animation-delay: 0s; }
.nd2 { width: 3px; height: 3px; right: 10%; top: 20%; background: #7C4DFF; box-shadow: 0 0 6px #7C4DFF; animation-delay: 0.5s; }
.nd3 { width: 4px; height: 4px; left: 50%; bottom: 18%; background: #00BCD4; box-shadow: 0 0 6px #00BCD4; animation-delay: 1s; }
.nd4 { width: 3px; height: 3px; right: 25%; top: 60%; background: #E040FB; box-shadow: 0 0 6px #E040FB; animation-delay: 1.5s; }
.nd5 { width: 3px; height: 3px; left: 25%; top: 15%; background: #00E5FF; box-shadow: 0 0 5px #00E5FF; animation-delay: 2s; }
.nd6 { width: 4px; height: 4px; right: 15%; bottom: 30%; background: #7C4DFF; box-shadow: 0 0 7px #7C4DFF; animation-delay: 2.5s; }
@keyframes m-nd-float {
  0%   { transform: translateY(0) scale(0.4); opacity: 0; }
  12%  { opacity: 0.9; }
  55%  { opacity: 0.5; }
  100% { transform: translateY(-22px) scale(0.8); opacity: 0; }
}

/* 控制按钮 */
.wgt-m-22s2-ctrl {
  display: flex; align-items: center; gap: 10px;
}
.wgt-m-22s2-ctrl .wgt-m-skip { color: rgba(255,255,255,0.28); }
.wgt-m-pb-neon {
  background: transparent; color: #00E5FF;
  border: 2px solid #00E5FF;
  box-shadow: 0 0 14px rgba(0,229,255,0.3), inset 0 0 10px rgba(0,229,255,0.1);
}
.wgt-m-pb-neon .wgt-m-play-icon { width: 14px; height: 14px; }


/* ================================================================
 *  4×2 样式1 ── 暮光城市
 * ================================================================ */
.wgt-m-42s1 {
  background: linear-gradient(155deg, rgba(22,16,38,0.94) 0%, rgba(38,28,52,0.9) 100%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(10,6,20,0.5);
  padding: 16px;
  flex-direction: row; align-items: stretch; gap: 14px;
  overflow: visible;
}

/* SVG 封面画：拉伸填满高度，正方形 */
.wgt-m-42s1-art {
  aspect-ratio: 1;
  flex-shrink: 0; display: block;
  border-radius: 12px;
  filter: drop-shadow(0 4px 14px rgba(100,40,140,0.45));
}

/* 右侧主体：同样拉伸填满高度，三行均匀分布 */
.wgt-m-42s1-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  justify-content: space-between;
}

/* 顶行：歌名歌手 + 波形图标 */
.wgt-m-42s1-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.wgt-m-42s1-meta { flex: 1; min-width: 0; }
.wgt-m-42s1 .wgt-m-title {
  color: #fff; font-size: 15px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wgt-m-42s1 .wgt-m-sub {
  color: rgba(255,255,255,0.45); font-size: 11px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 波形装饰图标 */
.wgt-m-42s1-wave {
  width: 24px; height: 14px; flex-shrink: 0; margin-top: 2px;
  color: rgba(255,255,255,0.3);
}
.wgt-m-42s1-wave.paused rect { animation-play-state: paused !important; }

/* 中间行：时间 + 进度条（同行排列） */
.wgt-m-42s1-mid {
  display: flex; align-items: center; gap: 8px;
}
.wgt-m-42s1-t {
  color: rgba(255,255,255,0.4); font-size: 10px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.wgt-m-42s1 .prog-dusk {
  flex: 1; height: 3px; background: rgba(255,255,255,0.15); border-radius: 1.5px;
}
.prog-dusk .wgt-m-prog-fill { background: rgba(255,255,255,0.85); border-radius: 1.5px; }
.prog-dusk .wgt-m-prog-knob {
  background: #fff; width: 10px; height: 10px; right: -5px;
  box-shadow: 0 0 6px rgba(255,255,255,0.3);
}

/* 底行：5 按钮控制栏 */
.wgt-m-42s1-ctrl {
  display: flex; align-items: center; justify-content: space-between;
}
.wgt-m-42s1-ctrl .wgt-m-shuffle,
.wgt-m-42s1-ctrl .wgt-m-heart {
  width: 16px; height: 16px; color: rgba(255,255,255,0.3);
}
.wgt-m-42s1-ctrl .wgt-m-skip {
  width: 22px; height: 22px; color: rgba(255,255,255,0.7);
}
.wgt-m-pb-dusk {
  width: 36px; height: 36px;
  background: #fff; color: rgba(22,16,38,0.9);
  box-shadow: 0 2px 12px rgba(255,255,255,0.2);
}
.wgt-m-pb-dusk .wgt-m-play-icon { width: 16px; height: 16px; }


/* ================================================================
 *  4×2 样式2 ── 耳机紫夜
 * ================================================================ */
.wgt-m-42s2 {
  background: linear-gradient(135deg, rgba(35,12,55,0.9), rgba(65,22,80,0.88));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(50,10,70,0.35);
  padding: 12px 14px;
  flex-direction: row; align-items: center; gap: 12px;
}
.wgt-m-hp-deco {
  position: absolute; left: 50%; top: -4px;
  transform: translateX(-50%);
  width: 75%; height: auto;
  pointer-events: none;
}
.wgt-m-art-42s2 {
  width: 50px; height: 50px; border-radius: 12px;
  box-shadow: 0 4px 20px rgba(233,30,99,0.45);
  z-index: 1;
}
.wgt-m-42s2-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  z-index: 1;
}
.wgt-m-42s2 .wgt-m-title { color: #fff; font-size: 13px; }
.wgt-m-42s2 .wgt-m-sub { color: rgba(200,170,220,0.5); }
.wgt-m-42s2-ctrl {
  display: flex; align-items: center; gap: 14px;
}
.wgt-m-42s2-ctrl .wgt-m-skip { color: rgba(255,255,255,0.38); }
.wgt-m-pb-purple {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #E91E63, #9C27B0);
  color: #fff;
  box-shadow: 0 4px 18px rgba(233,30,99,0.5);
}
.wgt-m-pb-purple .wgt-m-play-icon { width: 18px; height: 18px; }


/* ════════════════════════════════════════════════════════════════
 *  ♫  4×4 样式1 ── 复古唱片机
 * ════════════════════════════════════════════════════════════════ */
.wgt-m-44s1 {
  background: rgba(255,250,238,0.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(180,140,80,0.12);
  box-shadow: 0 6px 26px rgba(100,70,30,0.14), 0 1px 3px rgba(0,0,0,0.04);
  padding: 14px;
  align-items: center; justify-content: center; gap: 8px;
}
.wgt-m-turntable {
  position: relative;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  flex: 1; min-height: 0;
}
.wgt-m-vinyl-lg {
  height: 88%; aspect-ratio: 1;
}
.wgt-m-arm {
  position: absolute; right: 6%; top: -6px;
  width: 35px; height: auto;
  transform-origin: 80% 12%;
  transform: rotate(-22deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.wgt-m-arm.on { transform: rotate(5deg); }
.wgt-m-44s1-info {
  text-align: center; max-width: 85%; min-width: 0;
}
.wgt-m-44s1 .wgt-m-title { color: var(--sp-text); font-size: 15px; }
.wgt-m-44s1 .wgt-m-sub { color: rgba(var(--sp-text-rgb),0.45); font-size: 12px; }
.wgt-m-44s1-prog { width: 88%; }
.wgt-m-44s1 .wgt-m-time-row { color: rgba(var(--sp-text-rgb),0.35); }
.prog-warm { height: 4px; background: rgba(93,64,55,0.08); border-radius: 2px; }
.prog-warm .wgt-m-prog-fill { background: linear-gradient(90deg, #FF8F00, #F4511E); }
.prog-warm .wgt-m-prog-knob {
  background: #fff; width: 10px; height: 10px; right: -5px;
  border: 2px solid #FF8F00;
  box-shadow: 0 1px 4px rgba(255,143,0,0.35);
}
.wgt-m-44s1-ctrl {
  display: flex; align-items: center; gap: 18px;
}
.wgt-m-pb-warm {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, #FF8F00, #F4511E);
  color: #fff;
  box-shadow: 0 5px 20px rgba(255,143,0,0.45);
}
.wgt-m-pb-warm .wgt-m-play-icon { width: 22px; height: 22px; }


/* ════════════════════════════════════════════════════════════════
 *  ♫  4×4 样式2 ── 舞台灯光
 * ════════════════════════════════════════════════════════════════ */
.wgt-m-44s2 {
  background: linear-gradient(170deg, #0d0d1a 0%, #1a0a2e 100%);
  box-shadow: 0 6px 26px rgba(0,0,0,0.35);
  padding: 16px;
  align-items: center; gap: 10px;
}
.wgt-m-stage {
  position: relative;
  width: 100%;
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.wgt-m-spotlight {
  position: absolute;
  width: 140%; height: 140%;
  top: -20%; left: -20%;
  background:
    radial-gradient(ellipse at 40% 35%, rgba(233,30,99,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 50%, rgba(156,39,176,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 70%, rgba(var(--sp-accent-rgb),0.08) 0%, transparent 40%);
  pointer-events: none;
  animation: m-spotlight-pulse 4s ease-in-out infinite alternate;
}
@keyframes m-spotlight-pulse {
  0%   { opacity: 0.7; }
  100% { opacity: 1; }
}
.wgt-m-art-44s2 {
  width: 58%; aspect-ratio: 1;
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(233,30,99,0.35),
    0 4px 16px rgba(156,39,176,0.25),
    0 0 60px rgba(233,30,99,0.1);
  z-index: 1;
}
.wgt-m-notes {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.wgt-m-fn {
  position: absolute; width: 18px; height: 18px;
  animation: m-note-float 3.5s ease-in-out infinite;
  opacity: 0;
}
.fn1 { left: 10%; bottom: 12%; color: rgba(233,30,99,0.5); animation-delay: 0s; }
.fn2 { right: 12%; bottom: 22%; color: rgba(156,39,176,0.4); animation-delay: 1.2s; }
.fn3 { left: 42%; bottom: 5%; color: rgba(var(--sp-accent-rgb),0.4); animation-delay: 2.4s; }
.fn1 svg, .fn2 svg, .fn3 svg { width: 100%; height: 100%; }
@keyframes m-note-float {
  0%   { transform: translateY(0) rotate(0deg) scale(0.6); opacity: 0; }
  12%  { opacity: 1; }
  65%  { opacity: 0.7; }
  100% { transform: translateY(-75px) rotate(25deg) scale(1.1); opacity: 0; }
}
.wgt-m-44s2-info {
  text-align: center; max-width: 85%; min-width: 0;
}
.wgt-m-44s2 .wgt-m-title { color: #fff; font-size: 15px; }
.wgt-m-44s2 .wgt-m-sub { color: rgba(255,255,255,0.4); font-size: 12px; }
.prog-glow { background: rgba(255,255,255,0.08); }
.prog-glow .wgt-m-prog-fill {
  background: linear-gradient(90deg, #E91E63, #9C27B0);
  box-shadow: 0 0 8px rgba(233,30,99,0.4);
}
.prog-glow .wgt-m-prog-knob {
  background: #fff;
  box-shadow: 0 0 6px rgba(233,30,99,0.5);
}
.wgt-m-44s2-ctrl {
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.wgt-m-44s2-ctrl .wgt-m-skip { color: rgba(255,255,255,0.4); width: 20px; height: 20px; }
.wgt-m-pb-glow {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #E91E63, #7C4DFF);
  color: #fff;
  box-shadow: 0 4px 22px rgba(233,30,99,0.45), 0 0 35px rgba(124,77,255,0.2);
}
.wgt-m-pb-glow .wgt-m-play-icon { width: 20px; height: 20px; }

/* ── 占位符 ── */
.wgt-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.5);
  border-radius: 16px;
  color: rgba(var(--sp-text-rgb),0.3);
  font-size: 13px;
}

/* ── 头像可点击 ── */
.qq-avatar-clickable {
  cursor: pointer;
}

/* ── 角色个人信息模态框 ── */
.qq-profile-modal-mask {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(93, 64, 55, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.qq-profile-modal-mask.visible {
  opacity: 1;
  pointer-events: auto;
}
.qq-profile-modal-card {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(var(--sp-accent-rgb), 0.12);
  border-radius: 20px;
  padding: 28px 24px 22px;
  width: 78%;
  max-width: 280px;
  box-shadow: 0 12px 40px rgba(93, 64, 55, 0.12);
  text-align: center;
  transform: scale(0.92);
  transition: transform 0.25s;
}
.qq-profile-modal-mask.visible .qq-profile-modal-card {
  transform: scale(1);
}
.qq-profile-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.qq-profile-modal-avatar .ct-avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(93, 64, 55, 0.1);
}
.qq-profile-modal-avatar .ct-avatar img {
  border-radius: 50% !important;
}
.qq-profile-modal-avatar .ct-avatar .ct-avatar-fallback {
  border-radius: 50% !important;
}
.qq-profile-modal-presence {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(78, 52, 46, 0.55);
}
.qq-profile-modal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qq-profile-modal-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--sp-text);
  margin-bottom: 4px;
}
.qq-profile-modal-status {
  font-size: 12px;
  color: rgba(78, 52, 46, 0.45);
  margin-bottom: 4px;
}
.qq-profile-modal-divider {
  height: 1px;
  background: rgba(78, 52, 46, 0.08);
  margin: 14px 0;
}
.qq-profile-modal-thoughts-section {
  text-align: left;
}
.qq-profile-modal-thoughts-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(92, 107, 192, 0.7);
  margin-bottom: 6px;
}
.qq-profile-modal-thoughts {
  font-size: 13px;
  color: rgba(78, 52, 46, 0.7);
  font-style: italic;
  line-height: 1.55;
  padding: 8px 10px;
  background: rgba(92, 107, 192, 0.05);
  border-radius: 10px;
  border-left: 3px solid rgba(92, 107, 192, 0.25);
  min-height: 20px;
}
.qq-profile-modal-thoughts-empty {
  color: rgba(78, 52, 46, 0.3);
  font-style: normal;
}
.qq-thoughts-source {
  font-size: 10px;
  color: rgba(92, 107, 192, 0.55);
  margin-bottom: 6px;
  min-height: 14px;
}
.qq-thoughts-source:empty { display: none; }
.qq-thoughts-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  touch-action: pan-y pinch-zoom;
}
.qq-thoughts-track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.3s ease;
  will-change: transform;
}
.qq-thoughts-slide {
  flex: none;
  box-sizing: border-box;
  overflow: hidden;
}
.qq-thoughts-slide-inner {
  font-size: 13px;
  color: rgba(78, 52, 46, 0.7);
  font-style: italic;
  line-height: 1.55;
  padding: 8px 10px;
  background: rgba(92, 107, 192, 0.05);
  border-radius: 10px;
  border-left: 3px solid rgba(92, 107, 192, 0.25);
  min-height: 20px;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.qq-thoughts-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}
.qq-thoughts-dots:empty { display: none; }
.qq-thoughts-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(92, 107, 192, 0.2);
  transition: background 0.25s;
  cursor: pointer;
}
.qq-thoughts-dot.active {
  background: rgba(92, 107, 192, 0.6);
}

/* ================================================================
   世界书
   ================================================================ */
.qq-wb-cat-section {
  margin-bottom: 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 12px;
  overflow: hidden;
}
.qq-wb-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.qq-wb-cat-header:active { background: rgba(78,52,46,0.04); }
.qq-wb-cat-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qq-wb-cat-arrow {
  transition: transform .2s;
  color: rgba(var(--sp-text-rgb),0.4);
  flex-shrink: 0;
}
.qq-wb-cat-arrow.expanded { transform: rotate(90deg); }
.qq-wb-cat-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-text);
}
.qq-wb-cat-count {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.4);
  background: rgba(78,52,46,0.06);
  padding: 1px 6px;
  border-radius: 8px;
}
.qq-wb-global-badge {
  font-size: 10px;
  color: #fff;
  background: linear-gradient(135deg,#5c6bc0,#7c4dff);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.qq-wb-cat-items {
  border-top: 1px solid rgba(78,52,46,0.06);
}
.qq-wb-item {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(78,52,46,0.05);
}
.qq-wb-item:last-child { border-bottom: none; }
.qq-wb-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.qq-wb-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text);
}
.qq-wb-global-tag {
  font-size: 10px;
  color: #5c6bc0;
  background: rgba(92,107,192,0.1);
  padding: 1px 5px;
  border-radius: 6px;
  font-weight: 600;
}
.qq-wb-item-preview {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.5);
  line-height: 1.4;
  margin-bottom: 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.qq-wb-item-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.qq-wb-item-btn {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(78,52,46,0.12);
  background: rgba(255,255,255,0.8);
  color: var(--sp-text);
  cursor: pointer;
}
.qq-wb-item-btn:active { background: rgba(78,52,46,0.06); }
.qq-wb-del-btn { color: #e53935; border-color: rgba(229,57,53,0.2); }
.qq-wb-del-btn:active { background: rgba(229,57,53,0.06); }

/* 世界书编辑页分类行 */
.qq-wb-cat-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.qq-wb-cat-row .stg-input { min-width: 0; }

/* 聊天设置中的世界书选择器 */
.wb-sel-summary {
  padding: 6px 0 8px;
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.5);
}
.qq-wb-sel-cat {
  margin-bottom: 1px;
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(78,52,46,0.06);
}
.wb-sel-cat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  background: rgba(78,52,46,0.02);
}
.wb-sel-cat-row:active { background: rgba(78,52,46,0.06); }
.wb-sel-cat-arrow {
  color: rgba(var(--sp-text-rgb),0.35);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.wb-sel-cat-arrow.expanded { transform: rotate(90deg); }
.qq-wb-sel-cat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text);
  flex: 1;
}
.qq-wb-sel-cat-count {
  font-size: 10px;
  color: rgba(var(--sp-text-rgb),0.4);
  background: rgba(78,52,46,0.06);
  padding: 1px 5px;
  border-radius: 6px;
}
.wb-sel-cat-items {
  display: none;
}
.wb-sel-cat-items.expanded {
  display: block;
}
.qq-wb-sel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 30px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-top: 1px solid rgba(78,52,46,0.04);
}
.qq-wb-sel-item:active { background: rgba(78,52,46,0.03); }
.qq-wb-sel-disabled {
  opacity: 0.6;
  cursor: default;
}
.qq-wb-sel-name {
  font-size: 12px;
  color: var(--sp-text);
  flex: 1;
}
.qq-wb-sel-cat-cb,
.qq-wb-sel-cb {
  accent-color: var(--sp-text);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* "我"页面世界书入口 */
.qq-me-wb-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.qq-me-wb-entry:active { background: rgba(78,52,46,0.04); }
.qq-me-wb-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.qq-me-wb-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg,#8d6e63,#5d4037);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qq-me-wb-text {
  font-size: 14px;
  color: var(--sp-text);
  font-weight: 500;
}

/* ================================================================
*  日历模块样式
* ================================================================ */

/* ── 月历导航 ── */
.cal-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
}
.cal-nav-btn {
  background: none;
  border: none;
  color: var(--sp-text);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.cal-nav-btn:active { background: rgba(78,52,46,0.08); }
.cal-month-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--sp-text);
  letter-spacing: .5px;
}

/* ── 星期头 ── */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 8px;
  margin-bottom: 4px;
}
.cal-weekday {
  text-align: center;
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.5);
  font-weight: 500;
  padding: 4px 0;
}

/* ── 日期格子 ── */
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 8px;
  gap: 2px;
}
.cal-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  cursor: pointer;
  border-radius: 10px;
  transition: background .15s;
  min-height: 40px;
}
.cal-day:active { background: rgba(78,52,46,0.06); }
.cal-day-empty { cursor: default; }
.cal-day-empty:active { background: transparent; }

.cal-day-num {
  font-size: 14px;
  color: var(--sp-text);
  font-weight: 500;
  line-height: 1;
}

.cal-day-today {
  background: linear-gradient(135deg, #c49e5c, #a67c3d);
  box-shadow: 0 2px 8px rgba(196,158,92,0.35);
}
.cal-day-today .cal-day-num {
  color: #fff;
  font-weight: 700;
}
.cal-day-today:active { background: linear-gradient(135deg, #b8924e, #956e35); }

.cal-day-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c49e5c;
  margin-top: 3px;
}
.cal-day-today .cal-day-dot { background: rgba(255,255,255,0.85); }
.cal-day-has-event .cal-day-num { color: var(--sp-text); }
.cal-day-today.cal-day-has-event .cal-day-num { color: #fff; }

/* ── 今日安排区域 ── */
.cal-today-section {
  padding: 16px;
  border-top: 1px solid rgba(78,52,46,0.08);
  margin-top: 8px;
}
.cal-today-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text);
  margin-bottom: 12px;
}
.cal-today-title svg { color: #c49e5c; fill: #c49e5c; }
.cal-today-list { display: flex; flex-direction: column; gap: 10px; }

.cal-today-card {
  background: rgba(255,255,255,0.65);
  border-radius: 12px;
  border: 1px solid rgba(78,52,46,0.06);
  overflow: hidden;
}
.cal-today-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 6px;
}
.cal-today-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text);
}
.cal-today-card-items { padding: 0 12px 10px; }
.cal-today-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(78,52,46,0.04);
  min-height: 36px;
}
.cal-today-item:last-child { border-bottom: none; }
.cal-today-item-flag {
  color: #c49e5c;
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
}
.cal-today-item-time {
  font-size: 12px;
  color: var(--sp-text-soft);
  font-weight: 500;
  min-width: 42px;
  flex-shrink: 0;
}
.cal-today-item-text {
  font-size: 13px;
  color: var(--sp-text);
  flex: 1;
}
.cal-today-item.cal-important {
  background: rgba(196,158,92,0.06);
  border-radius: 6px;
  padding: 9px 6px;
  margin: 0 -6px;
}
.cal-today-item.cal-important .cal-today-item-time { color: #c49e5c; font-weight: 600; }
.cal-today-item.cal-important .cal-today-item-text { color: var(--sp-text); font-weight: 500; }
.cal-today-more {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.4);
  padding: 4px 0 0;
}

.cal-empty-hint {
  text-align: center;
  color: rgba(var(--sp-text-rgb),0.35);
  font-size: 13px;
  padding: 20px 0;
}

/* ── 日程详情页（飞书风格时间轴） ── */
.cal-dl { display: flex; height: 100%; overflow: hidden; }

/* -- 左侧头像栏 -- */
.cal-dl-side {
  width: 54px; flex-shrink: 0;
  border-right: 1px solid rgba(78,52,46,0.08);
  overflow-y: auto; overflow-x: hidden;
  padding: 10px 0; display: flex;
  flex-direction: column; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.35);
}
.cal-dl-av {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; cursor: pointer; padding: 4px 2px;
  border-radius: 10px; transition: background .15s;
  position: relative; opacity: .5;
}
.cal-dl-av.sel { opacity: 1; }
.cal-dl-av-img {
  width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden; border: 2px solid transparent;
  transition: border-color .2s;
}
.cal-dl-av.sel .cal-dl-av-img { border-color: var(--cc, #c49e5c); }
.cal-dl-av-nm {
  font-size: 10px; color: rgba(var(--sp-text-rgb),0.5);
  max-width: 48px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: center; line-height: 1.2;
}
.cal-dl-av.sel .cal-dl-av-nm { color: var(--sp-text); font-weight: 600; }

/* -- 时间轴区域 -- */
.cal-tl-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.cal-tl-heads {
  display: flex; flex-shrink: 0;
  border-bottom: 1px solid rgba(78,52,46,0.06);
  background: rgba(255,255,255,0.5);
}
.cal-tl-heads-pad { width: 44px; flex-shrink: 0; }
.cal-tl-head {
  flex: 1; text-align: center; font-size: 12px;
  font-weight: 600; padding: 6px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cal-tl-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.cal-tl-body { position: relative; display: flex; min-width: 100%; }

/* time labels */
.cal-tl-times {
  width: 44px; flex-shrink: 0; position: relative;
  border-right: 1px solid rgba(78,52,46,0.08);
}
.cal-tl-hlbl {
  position: absolute; right: 6px;
  font-size: 10px; color: rgba(var(--sp-text-rgb),0.35);
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%); line-height: 1;
}

/* grid area */
.cal-tl-grid { flex: 1; position: relative; }

.cal-tl-hline {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid rgba(78,52,46,0.06);
  pointer-events: none;
}
.cal-tl-hline-half { border-top-style: dashed; border-top-color: rgba(var(--sp-text-rgb),0.03); }

.cal-tl-colsep {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px solid rgba(78,52,46,0.06);
  pointer-events: none;
}

/* event block */
.cal-tl-ev {
  position: absolute; border-radius: 6px;
  padding: 3px 6px; cursor: pointer;
  overflow: hidden; z-index: 2;
  transition: box-shadow .15s, transform .1s;
  display: flex; flex-direction: column; gap: 1px;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.cal-tl-ev:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: translateY(-1px); }
.cal-tl-ev.cal-tl-ev-sel { outline: 2px solid #c49e5c; outline-offset: -1px; box-shadow: 0 0 0 3px rgba(196,158,92,0.2); }
.cal-tl-ev-ck {
  position: absolute; top: 4px; right: 4px; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid rgba(78,52,46,0.25);
  background: rgba(255,255,255,0.8); box-sizing: border-box; z-index: 1;
}
.cal-tl-ev-ck.on {
  border-color: #c49e5c; background: #c49e5c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.cal-tl-ev-t { font-size: 10px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.cal-tl-ev-c { font-size: 11px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cal-tl-ev-b {
  position: absolute; top: 3px; right: 4px;
  font-size: 8px; background: rgba(196,158,92,0.9);
  color: #fff; padding: 1px 4px; border-radius: 4px;
  line-height: 1.2;
}

/* AI generate button inside empty column */
.cal-tl-gen {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 8px 0;
  background: rgba(196,158,92,0.08); border: 1px dashed rgba(196,158,92,0.35);
  border-radius: 8px; color: #a67c3d; font-size: 12px;
  cursor: pointer; transition: background .15s;
}
.cal-tl-gen:active { background: rgba(196,158,92,0.16); }
.cal-tl-gen-busy {
  pointer-events: none; opacity: .7;
  border-style: solid; border-color: rgba(196,158,92,0.2);
  background: rgba(196,158,92,0.06);
}
.cal-tl-gen-busy .cal-loading-spinner {
  border-color: rgba(196,158,92,0.25);
  border-top-color: #a67c3d;
}

/* now-line */
.cal-tl-now {
  position: absolute; left: 0; right: 0; z-index: 4;
  pointer-events: none; display: flex; align-items: center;
}
.cal-tl-now-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #e53935; flex-shrink: 0; margin-left: -4px;
}
.cal-tl-now-ln { flex: 1; height: 2px; background: #e53935; }

/* ── 事件弹窗 ── */
.cal-popup-mask {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.35); display: flex;
  align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s;
}
.cal-popup-mask.visible { opacity: 1; }
.cal-popup {
  width: 100%; max-width: 360px;
  background: rgba(255,248,240,0.97);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(0.32,0.72,0,1);
  overflow: hidden;
}
.cal-popup-mask.visible .cal-popup { transform: translateY(0); }

.cal-popup-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(78,52,46,0.06);
}
.cal-popup-name { font-size: 15px; font-weight: 600; color: var(--sp-text); flex: 1; }
.cal-popup-close {
  background: none; border: none; font-size: 22px;
  color: rgba(var(--sp-text-rgb),0.35); cursor: pointer; padding: 0 2px; line-height: 1;
}
.cal-popup-close:active { color: var(--sp-text); }

.cal-popup-bd { padding: 14px 16px; }
.cal-popup-time {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--sp-text-soft); margin-bottom: 8px;
}
.cal-popup-time svg { fill: #8D6E63; flex-shrink: 0; }
.cal-popup-content { font-size: 14px; color: var(--sp-text); line-height: 1.6; }
.cal-popup-imp {
  display: inline-block; margin-top: 8px;
  background: linear-gradient(135deg, #c49e5c, #a67c3d);
  color: #fff; font-size: 11px; padding: 2px 8px;
  border-radius: 10px;
}

.cal-popup-ft {
  padding: 10px 16px 18px;
  display: flex; gap: 10px; justify-content: flex-end;
}
.cal-popup-del {
  background: none; border: 1px solid rgba(229,57,53,0.25);
  color: #e53935; border-radius: 8px; padding: 6px 16px;
  font-size: 13px; cursor: pointer; transition: background .15s;
}
.cal-popup-del:active { background: rgba(229,57,53,0.08); }
.cal-popup-save {
  background: linear-gradient(135deg, #c49e5c, #a67c3d);
  color: #fff; border: none; border-radius: 8px;
  padding: 6px 24px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity .15s;
}
.cal-popup-save:active { opacity: .8; }
.cal-popup-edit {
  background: none; border: 1px solid rgba(196,158,92,0.4);
  color: #a67c3d; border-radius: 8px; padding: 6px 16px;
  font-size: 13px; cursor: pointer; transition: background .15s;
}
.cal-popup-edit:active { background: rgba(196,158,92,0.08); }

/* ── 多选操作栏 ── */
.cal-ms-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255,248,240,0.95);
  border-top: 1px solid rgba(78,52,46,0.1);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  animation: calMsSlideUp .2s ease-out;
}
@keyframes calMsSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.cal-ms-cancel {
  background: none; border: 1px solid rgba(78,52,46,0.15);
  color: var(--sp-text); border-radius: 8px; padding: 7px 16px;
  font-size: 13px; cursor: pointer;
}
.cal-ms-cancel:active { background: rgba(78,52,46,0.04); }
.cal-ms-count { font-size: 13px; color: var(--sp-text-soft); font-weight: 500; }
.cal-ms-del {
  background: #e53935; color: #fff; border: none;
  border-radius: 8px; padding: 7px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
.cal-ms-del:active { opacity: .8; }

/* ── 添加日程表单 ── */
.cal-add-label {
  display: block; font-size: 12px; color: var(--sp-text-soft);
  margin: 10px 0 4px; font-weight: 500;
}
.cal-add-label:first-child { margin-top: 0; }
.cal-add-sel, .cal-add-input {
  display: block; width: 100%;
  background: rgba(78,52,46,0.04);
  border: 1px solid rgba(78,52,46,0.1);
  border-radius: 8px; padding: 7px 10px;
  font-size: 13px; color: var(--sp-text); outline: none;
  box-sizing: border-box;
}
.cal-add-sel:focus, .cal-add-input:focus { border-color: rgba(196,158,92,0.5); }
.cal-add-row { display: flex; gap: 10px; }
.cal-add-col { flex: 1; }

/* ── 日历设置页 ── */
.cal-set-char-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}
.cal-set-char-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.cal-set-char-item:active { background: rgba(78,52,46,0.04); }
.cal-set-char-cb {
  width: 18px;
  height: 18px;
  accent-color: #c49e5c;
  flex-shrink: 0;
}
.cal-set-char-name {
  font-size: 14px;
  color: var(--sp-text);
}
.cal-set-clear-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(211,47,47,0.35);
  border-radius: 10px;
  background: rgba(211,47,47,0.08);
  color: #d32f2f;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.cal-set-clear-btn:active { background: rgba(211,47,47,0.16); }
.cal-popup-cancel { background: rgba(78,52,46,0.06) !important; color: #8D6E63 !important; }

/* ── 加载动画 ── */
.cal-loading-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: calSpin .6s linear infinite;
  vertical-align: middle;
}
@keyframes calSpin {
  to { transform: rotate(360deg); }
}

/* ================================================================
*  小剧场 (Studio / Theater)
* ================================================================ */

/* ── 首页 Hero ── */
.studio-hero {
  text-align: center;
  padding: 30px 0 24px;
}
.studio-hero-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
}
.studio-hero-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--sp-text);
  margin-bottom: 6px;
}
.studio-hero-subtitle {
  font-size: 14px;
  color: rgba(var(--sp-text-rgb),0.5);
}

/* ── 首页菜单列表 ── */
.studio-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.studio-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(255,255,255,0.65);
  border-radius: 14px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.12);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.studio-menu-item:active {
  background: rgba(255,255,255,0.85);
  transform: scale(0.98);
}
.studio-menu-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(var(--sp-accent-rgb),0.12), rgba(129,199,132,0.12));
  border-radius: 12px;
}
.studio-menu-text {
  flex: 1;
  min-width: 0;
}
.studio-menu-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-text);
  margin-bottom: 3px;
}
.studio-menu-desc {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.5);
}
.studio-menu-item > svg {
  flex-shrink: 0;
  fill: rgba(78,52,46,0.3);
}

/* ── 列表项 ── */
.studio-list-item {
  padding: 14px 16px;
  background: rgba(255,255,255,0.6);
  border-radius: 12px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.1);
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.studio-list-item:active {
  background: rgba(255,255,255,0.85);
}
.studio-item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-text);
  margin-bottom: 6px;
}
.studio-item-desc {
  font-size: 13px;
  color: rgba(var(--sp-text-rgb),0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-item-meta {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.4);
  margin-top: 5px;
}

/* ── 角色分配项 ── */
.studio-role-item {
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(var(--sp-accent-rgb),0.1);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.studio-role-header {
  font-size: 15px;
  color: var(--sp-text);
  margin-bottom: 8px;
}
.studio-role-desc {
  font-size: 13px;
  color: rgba(var(--sp-text-rgb),0.6);
  line-height: 1.5;
  margin-bottom: 10px;
  max-height: 80px;
  overflow-y: auto;
}
.studio-role-label {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.5);
  margin-bottom: 6px;
  display: block;
}
.studio-role-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--sp-text);
  cursor: pointer;
}
.studio-role-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--sp-accent-2);
}

/* ── 标题栏 (绝对居中标题) ── */
.studio-header-abs {
  position: relative;
}
.studio-abs-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.studio-header-icons {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-left: auto;
}
.studio-icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--sp-text);
  cursor: pointer;
  transition: background 0.2s;
}
.studio-icon-btn:active {
  background: rgba(78,52,46,0.08);
}

/* ── 编辑器卡片 ── */
.studio-editor-card {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(var(--sp-accent-rgb),0.12);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}
.studio-editor-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.studio-editor-field-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-text);
}
.studio-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(103,58,183,0.12), rgba(156,39,176,0.12));
  color: #7B1FA2;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.studio-ai-pill:active {
  background: linear-gradient(135deg, rgba(103,58,183,0.22), rgba(156,39,176,0.22));
  transform: scale(0.95);
}
.studio-ai-pill:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.studio-ai-pill svg {
  fill: #7B1FA2;
}

.studio-add-char-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border: 2px dashed rgba(78,52,46,0.15);
  border-radius: 14px;
  background: rgba(255,255,255,0.35);
  color: rgba(var(--sp-text-rgb),0.6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.studio-add-char-btn:active {
  background: rgba(255,255,255,0.6);
  border-color: rgba(245,124,0,0.3);
  color: var(--sp-accent-2);
}
.studio-add-char-btn svg {
  fill: currentColor;
}

.studio-editor-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.studio-editor-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.studio-editor-action-btn:active { opacity: 0.7; }
.studio-action-export {
  background: rgba(78,52,46,0.06);
  color: var(--sp-text);
}
.studio-action-export svg { fill: #4E342E; }
.studio-action-delete {
  background: rgba(229,57,53,0.08);
  color: #e53935;
}
.studio-action-delete svg { fill: #e53935; }

/* ── 人物卡片 AI 优化按钮 (编辑器内部) ── */
.studio-ai-opt-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(103,58,183,0.12), rgba(156,39,176,0.12));
  color: #7B1FA2;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.studio-ai-opt-btn:active {
  background: linear-gradient(135deg, rgba(103,58,183,0.22), rgba(156,39,176,0.22));
  transform: scale(0.95);
}
.studio-ai-opt-btn:disabled { opacity: 0.5; pointer-events: none; }

/* ── 弹窗 (暖色风格) ── */
.studio-modal-card {
  background: var(--sp-page-bg); /* 默认 linear-gradient(180deg,#fffde7,#f1f8e9)，随主题色变化 */
  border-radius: 16px;
  width: calc(100% - 32px);
  max-width: 400px;
  max-height: 80%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.studio-modal-header {
  padding: 16px 20px 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--sp-text);
  border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.12);
  flex-shrink: 0;
  text-align: center;
}
.studio-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.studio-modal-body p {
  color: var(--sp-text);
  line-height: 1.6;
}
.studio-modal-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(var(--sp-accent-rgb),0.12);
  flex-shrink: 0;
}
.studio-modal-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  background: rgba(78,52,46,0.06);
  color: var(--sp-text);
}
.studio-modal-btn:active { opacity: 0.7; }
.studio-modal-confirm {
  background: linear-gradient(135deg, var(--sp-accent-2), #FF9800);
  color: #fff;
}
.studio-modal-cancel {
  background: rgba(78,52,46,0.06);
  color: rgba(var(--sp-text-rgb),0.6);
}

/* ── 确认弹窗扩展 (暗色风格) ── */
.stg-confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-text);
  margin-bottom: 8px;
}
.stg-btn-danger {
  background: linear-gradient(135deg, #e53935, #ef5350) !important;
  color: #fff !important;
}
.stg-choice-box {
  padding: 16px;
}
.stg-choice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.stg-choice-btn {
  padding: 12px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.15);
  border-radius: 10px;
  background: rgba(255,255,255,0.6);
  font-family: inherit;
  font-size: 14px;
  color: var(--sp-text);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}
.stg-choice-btn:active {
  background: rgba(var(--sp-accent-rgb),0.15);
}
.stg-prompt-input {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.2);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  background: rgba(255,255,255,0.7);
  color: var(--sp-text);
  resize: vertical;
}

/* ── 设置页 - 卡片容器 ── */
.studio-stg-card {
  background: rgba(255,255,255,0.55);
  border-radius: 14px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.08);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(93,64,55,0.04);
  margin-bottom: 20px;
}
.studio-stg-card-title {
  padding: 14px 16px 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(var(--sp-text-rgb),0.5);
}

/* ── 设置页 - 颜色选择器 ── */
.studio-color-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px;
}
.studio-color-item-border {
  border-bottom: 1px solid rgba(93,64,55,0.06);
}
.studio-color-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text);
}
.studio-color-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}
.studio-color-preview {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid rgba(78,52,46,0.08);
  flex-shrink: 0;
  cursor: pointer;
}
.studio-color-input {
  width: 0;
  height: 0;
  padding: 0;
  border: none;
  opacity: 0;
  position: absolute;
}
.studio-color-reset-text {
  padding: 8px 16px;
  border: 1px solid rgba(78,52,46,0.12);
  border-radius: 8px;
  background: rgba(78,52,46,0.04);
  color: rgba(var(--sp-text-rgb),0.65);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.studio-color-reset-text:active {
  background: rgba(78,52,46,0.1);
}

/* ── 设置页 - 世界书下拉 ── */
.studio-wb-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(78,52,46,0.1);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(var(--sp-text-rgb),0.55);
}
.studio-wb-dropdown svg {
  fill: rgba(78,52,46,0.35);
  transition: transform 0.2s;
}
.studio-wb-dropdown.open svg {
  transform: rotate(180deg);
}
.studio-wb-panel {
  display: none;
  margin-top: 10px;
}
.studio-wb-panel.open {
  display: block;
}

/* ── 演绎界面 ── */
.studio-play-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.studio-play-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  scroll-behavior: smooth;
}
.studio-play-select-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--sp-header-bg); /* 跟随主题色 */
  border-top: 1px solid rgba(var(--sp-accent-rgb),0.12);
  font-size: 13px;
  color: var(--sp-text);
}
.studio-action-chips {
  display: flex;
  gap: 8px;
  padding: 6px 14px 4px;
  overflow-x: auto;
  flex-shrink: 0;
}
.studio-action-chip {
  padding: 6px 14px;
  border: none;
  border-radius: 16px;
  background: rgba(78,52,46,0.08);
  color: var(--sp-text);
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}
.studio-action-chip:active {
  background: rgba(78,52,46,0.16);
}
.studio-chip-narration {
  background: linear-gradient(135deg, rgba(245,124,0,0.12), rgba(var(--sp-accent-rgb),0.12));
  color: #E65100;
  font-weight: 600;
}
.studio-play-input-area {
  display: flex;
  gap: 8px;
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(var(--sp-accent-rgb),0.1);
  background: var(--sp-header-bg); /* 跟随主题色 */
  align-items: flex-end;
}
.studio-play-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.2);
  border-radius: 18px;
  font-family: inherit;
  font-size: 14px;
  background: rgba(255,255,255,0.7);
  color: var(--sp-text);
  resize: none;
  max-height: 100px;
  line-height: 1.4;
}
.studio-play-input::placeholder {
  color: rgba(var(--sp-text-rgb),0.35);
}
.studio-play-send {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-accent-2), #FF9800);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.studio-play-send:active { opacity: 0.7; }

/* ── 消息气泡 ── */
.studio-msg-wrapper {
  margin-bottom: 10px;
}
.studio-msg-wrapper.studio-msg-selected {
  background: rgba(245,124,0,0.08);
  border-radius: 10px;
}
.studio-msg-bubble {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.studio-bubble-system {
  background: rgba(var(--sp-accent-rgb),0.08);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: rgba(var(--sp-text-rgb),0.7);
  line-height: 1.6;
  text-align: center;
}
.studio-bubble-user {
  flex-direction: row-reverse;
}
.studio-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(var(--sp-accent-rgb),0.15);
}
.studio-msg-content {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sp-text);
  word-break: break-word;
}
.studio-bubble-ai .studio-msg-content {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(var(--sp-accent-rgb),0.1);
  border-top-left-radius: 4px;
}
.studio-bubble-user .studio-msg-content {
  background: linear-gradient(135deg, rgba(245,124,0,0.15), rgba(var(--sp-accent-rgb),0.12));
  border: 1px solid rgba(245,124,0,0.12);
  border-top-right-radius: 4px;
}
.studio-char-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--sp-text-rgb),0.5);
  margin-bottom: 4px;
}
.studio-load-more {
  text-align: center;
  padding: 10px;
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.4);
  cursor: pointer;
  background: rgba(78,52,46,0.04);
  border-radius: 8px;
  margin-bottom: 10px;
}
.studio-load-more:active {
  background: rgba(78,52,46,0.08);
}

/* ── 收藏详情 ── */
.studio-fav-overlay {
  background: var(--sp-page-bg); /* 默认 linear-gradient(180deg,#fffde7,#f1f8e9)，随主题色变化 */
  border-radius: 16px;
  width: calc(100% - 32px);
  max-width: 400px;
  max-height: 85%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.studio-fav-overlay-title {
  padding: 16px 20px 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--sp-text);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.12);
}
.studio-fav-overlay-star { font-size: 18px; }
.studio-fav-overlay-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  -webkit-overflow-scrolling: touch;
}
.studio-fav-overlay-bottom {
  padding: 10px 16px 16px;
  border-top: 1px solid rgba(var(--sp-accent-rgb),0.12);
  flex-shrink: 0;
}
.studio-fav-overlay-close {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sp-accent-2), #FF9800);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.studio-fav-overlay-close:active { opacity: 0.7; }

.studio-fav-system {
  padding: 12px 4px;
  font-size: 13px;
  color: rgba(var(--sp-text-rgb),0.6);
  line-height: 1.8;
  text-align: center;
  margin-bottom: 8px;
}
.studio-fav-msg {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(var(--sp-accent-rgb),0.1);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.studio-fav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(var(--sp-accent-rgb),0.15);
}
.studio-fav-body {
  flex: 1;
  min-width: 0;
}
.studio-fav-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--sp-text-rgb),0.5);
  margin-bottom: 4px;
}
.studio-fav-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--sp-text);
  word-break: break-word;
}

/* ================================================================
*  面对面 (FTF) — 阅读器/小说风格
* ================================================================ */

/* ================================================================
*  面对面（ftf）配色 — 已统一为全站暖琥珀主题（随主题色变化）
*  【原始 taupe 配色记录，方便以后调整】
*    页面底色 #f5f0e8 ；顶栏渐变 #ece6da→#e8e1d4
*    主文字 #5a4e42 / #4a3f34 ；次文字 #7a6f5d / #8d7b68 / #6b6050
*    边框/底纹 rgba(141,123,104,*) ；输入/分区底 rgba(245,240,232,*) / rgba(236,230,218,*)
*    卡片图标渐变 #8d7b68→#a89280（默认）、#7a6f5d→#968a78（if）、#6b8a7a→#7a9e8a（rec）
*    勾选/操作主色 #8d7b68 ；语义色：进行中绿 #6b8a7a/#5a7a6a、IF红 #8a7070/#b07070
* ================================================================ */
.ftf-overlay { background: var(--sp-page-bottom); }

.ftf-header {
  background: var(--sp-header-bg) !important;
  border-bottom: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
}
.ftf-header .ct-header-title { color: var(--sp-text); }
.ftf-header .ct-header-btn { color: var(--sp-text-soft); }
.ftf-header .ct-save-btn { color: var(--sp-accent-2); font-weight: 600; }

/* ── 首页 ── */
.ftf-home-body { background: var(--sp-page-bg); padding: 0 !important; }

.ftf-home-banner {
  padding: 32px 20px 20px;
  text-align: center;
  background: linear-gradient(180deg, var(--sp-header-bg) 0%, transparent 100%);
}
.ftf-home-banner-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--sp-text);
  letter-spacing: 2px;
  font-family: "Georgia", "Noto Serif SC", serif;
}
.ftf-home-banner-sub {
  font-size: 13px;
  color: var(--sp-text-soft);
  margin-top: 4px;
  letter-spacing: 1px;
}

.ftf-home-menu { padding: 8px 16px 20px; display: flex; flex-direction: column; gap: 10px; }

.ftf-home-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.ftf-home-card:active {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(93,64,55,0.1);
}

.ftf-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.ftf-card-icon-if { background: linear-gradient(135deg, #7a6f5d, #968a78); }
.ftf-card-icon-rec { background: linear-gradient(135deg, #6b8a7a, #7a9e8a); }

.ftf-card-text { flex: 1; min-width: 0; }
.ftf-card-label { font-size: 15px; font-weight: 600; color: var(--sp-text); }
.ftf-card-desc { font-size: 12px; color: var(--sp-text-soft); margin-top: 2px; }

/* ── 设置页 ── */
#ftfSetupBody { background: var(--sp-page-bg); }
#ftfSetupBody .stg-section { margin-bottom: 14px; }
#ftfSetupBody .stg-group {
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--sp-border);
}
#ftfSetupBody .stg-input,
#ftfSetupBody .ct-select,
#ftfSetupBody .ct-textarea {
  background: var(--sp-input-bg);
  border-color: var(--sp-border);
  color: var(--sp-text);
}
#ftfSetupBody .stg-input:focus,
#ftfSetupBody .ct-select:focus,
#ftfSetupBody .ct-textarea:focus {
  border-color: rgba(var(--sp-accent-rgb),0.45);
  background: rgba(255,255,255,0.6);
}

/* 通用下拉框 */
.ftf-dropdown { margin-top: 8px; }
.ftf-dropdown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 8px;
  background: var(--sp-input-bg); cursor: pointer; user-select: none;
  border: 1px solid var(--sp-border);
  transition: background .15s;
}
.ftf-dropdown-header:active { background: rgba(255,248,225,0.85); }
.ftf-dropdown-text { font-size: 14px; color: var(--sp-text); }
.ftf-dropdown-arrow { color: var(--sp-text-soft); transition: transform .2s; flex-shrink: 0; }
.ftf-dropdown.open .ftf-dropdown-arrow { transform: rotate(180deg); }
.ftf-dropdown-body {
  display: none;
  margin-top: 6px; padding: 6px 0;
  max-height: 280px; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ftf-dropdown.open .ftf-dropdown-body { display: block; }

/* 角色行 */
.ftf-char-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; user-select: none; transition: background .15s;
}
.ftf-char-row:active { background: rgba(255,248,225,0.6); }
.ftf-char-row input[type="checkbox"] {
  accent-color: var(--sp-accent-2); width: 16px; height: 16px; flex-shrink: 0;
}
.ftf-char-row .ftf-cname { font-size: 14px; color: var(--sp-text); font-weight: 500; }

/* 世界书分类下拉 */
#ftfWbList { margin-top: 8px; }
.ftf-wb-summary {
  font-size: 12px; color: var(--sp-text-soft); padding: 4px 2px 8px;
}
.ftf-wb-cat {
  border: 1px solid var(--sp-border);
  border-radius: 8px; margin-bottom: 6px; overflow: hidden;
}
.ftf-wb-cat-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; user-select: none;
  background: rgba(255,248,225,0.4); transition: background .15s;
}
.ftf-wb-cat-header:active { background: rgba(255,248,225,0.7); }
.ftf-wb-cat-arrow { color: var(--sp-text-soft); transition: transform .2s; flex-shrink: 0; }
.ftf-wb-cat.open .ftf-wb-cat-arrow { transform: rotate(90deg); }
.ftf-wb-cat-name { font-size: 13px; font-weight: 600; color: var(--sp-text); flex: 1; }
.ftf-wb-cat-count { font-size: 11px; color: var(--sp-text-soft); }
.ftf-wb-cat-items { display: none; padding: 2px 8px 6px; }
.ftf-wb-cat.open .ftf-wb-cat-items { display: block; }
.ftf-wb-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px;
  cursor: pointer; user-select: none; transition: background .15s;
}
.ftf-wb-row:active { background: rgba(255,248,225,0.6); }
.ftf-wb-row input[type="checkbox"] {
  accent-color: var(--sp-accent-2); width: 15px; height: 15px; flex-shrink: 0;
}
.ftf-wb-row .ftf-wname { font-size: 13px; color: var(--sp-text); }
.ftf-wb-global { opacity: 0.55; pointer-events: none; }
.ftf-wb-tag {
  font-size: 10px; background: var(--sp-accent-soft); color: var(--sp-text-soft);
  padding: 1px 6px; border-radius: 6px; margin-left: auto;
}

/* 文风选项条目 */
.ftf-style-item {
  padding: 8px 12px; border-radius: 6px;
  font-size: 13px; color: var(--sp-text);
  cursor: pointer; user-select: none;
  transition: background .15s; margin-bottom: 2px;
}
.ftf-style-item:hover, .ftf-style-item:active {
  background: var(--sp-accent-soft);
}

/* ── 记录列表 ── */
#ftfRecordsList { background: var(--sp-page-bg); }

.ftf-rec-card {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
}
.ftf-rec-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.ftf-rec-title {
  font-size: 15px; font-weight: 600; color: var(--sp-text);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ftf-rec-badges { display: flex; gap: 6px; flex-shrink: 0; }
.ftf-badge-active {
  font-size: 11px; background: rgba(107,138,122,0.15); color: #5a7a6a;
  padding: 2px 8px; border-radius: 8px; font-weight: 500;
}
.ftf-badge-done {
  font-size: 11px; background: rgba(93,64,55,0.08); color: rgba(var(--sp-text-rgb),0.45);
  padding: 2px 8px; border-radius: 8px;
}
.ftf-badge-if {
  font-size: 11px; background: rgba(138,112,112,0.12); color: #8a7070;
  padding: 2px 8px; border-radius: 8px; font-weight: 500;
}
.ftf-rec-meta {
  display: flex; gap: 12px; font-size: 12px; color: rgba(var(--sp-text-rgb),0.45); margin-bottom: 10px;
}
.ftf-rec-actions { display: flex; gap: 8px; }
.ftf-rec-btn {
  padding: 6px 14px; border: none; border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: all .15s;
  background: var(--sp-accent-soft); color: var(--sp-text);
}
.ftf-rec-btn:active { opacity: 0.7; }
.ftf-rec-btn-open { background: rgba(var(--sp-accent-rgb),0.22); font-weight: 500; }
.ftf-rec-btn-del { color: #b07070; background: rgba(176,112,112,0.08); }

/* ── 剧情页 ── */
.ftf-play-wrap {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--sp-page-bg);
}
.ftf-play-scroll {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  -webkit-overflow-scrolling: touch;
}

.ftf-load-more {
  text-align: center; padding: 10px; font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.35); cursor: pointer;
}
.ftf-load-more:active { color: rgba(var(--sp-text-rgb),0.6); }

/* ── 聊天形式消息 ── */
.ftf-msg { margin-bottom: 12px; }

.ftf-msg-opening {
  padding: 12px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.5); border-left: 3px solid var(--sp-accent);
  font-size: 14px; color: var(--sp-text); line-height: 1.75;
  font-family: "Georgia", "Noto Serif SC", serif;
}

.ftf-msg-context {
  background: rgba(255,255,255,0.3); border-radius: 8px;
  padding: 10px 14px; font-size: 12px; color: rgba(var(--sp-text-rgb),0.5);
}
.ftf-msg-context summary {
  cursor: pointer; font-weight: 500; color: rgba(var(--sp-text-rgb),0.4); font-size: 12px;
}
.ftf-ctx-body {
  margin-top: 8px; max-height: 200px; overflow-y: auto;
  font-size: 12px; color: rgba(var(--sp-text-rgb),0.4); line-height: 1.6;
}

.ftf-msg-narration {
  padding: 10px 14px; border-radius: 8px;
  background: rgba(93,64,55,0.05);
  border-left: 3px solid rgba(93,64,55,0.18);
  font-size: 13px; color: var(--sp-text-soft); line-height: 1.7;
  font-style: italic;
}
.ftf-nar-label {
  font-size: 11px; color: var(--sp-text-soft); font-weight: 600;
  margin-bottom: 4px; font-style: normal;
}

/* 聊天形式 —— 角色气泡 */
.ftf-chat-bubble {
  display: flex; gap: 10px; align-items: flex-start;
}
.ftf-chat-bubble-user { flex-direction: row-reverse; }
.ftf-chat-avatar { flex-shrink: 0; }
.ftf-chat-body { max-width: 78%; }
.ftf-chat-name {
  font-size: 12px; font-weight: 600; margin-bottom: 3px; color: var(--sp-text-soft);
}
.ftf-chat-bubble-user .ftf-chat-name { text-align: right; }
.ftf-chat-content {
  padding: 10px 14px; border-radius: 12px;
  font-size: 14px; line-height: 1.7; word-break: break-word;
  color: var(--sp-text);
}
.ftf-chat-bubble-char .ftf-chat-content {
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--sp-border);
  border-top-left-radius: 3px;
}
.ftf-chat-bubble-user .ftf-chat-content {
  background: linear-gradient(135deg, rgba(var(--sp-accent-rgb),0.16), rgba(var(--sp-accent-rgb),0.08));
  border: 1px solid rgba(var(--sp-accent-rgb),0.18);
  border-top-right-radius: 3px;
}

/* 故事形式 —— 段落 */
.ftf-story-para {
  font-size: 15px; line-height: 1.9; color: var(--sp-text);
  font-family: "Georgia", "Noto Serif SC", serif;
  margin-bottom: 8px;
  padding: 12px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.45);
}
.ftf-story-user {
  background: rgba(93,64,55,0.05);
  border-radius: 6px; padding: 8px 14px;
  font-size: 15px; line-height: 1.9; color: var(--sp-text);
  font-family: "Georgia", "Noto Serif SC", serif;
}
.ftf-story-user-label {
  font-size: 11px; color: var(--sp-text-soft); font-weight: 600;
  margin-bottom: 2px; text-indent: 0;
}

/* ── 输入区 ── */
.ftf-input-area {
  padding: 8px 14px 12px;
  border-top: 1px solid var(--sp-border);
  background: var(--sp-header-bg); /* 跟随主题色 */
}
.ftf-input-tabs {
  display: flex; gap: 0; margin-bottom: 8px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--sp-border);
}
.ftf-tab {
  flex: 1; padding: 6px 0; border: none;
  background: rgba(255,255,255,0.3);
  font-size: 13px; color: rgba(var(--sp-text-rgb),0.4);
  cursor: pointer; transition: all .2s;
}
.ftf-tab.active {
  background: var(--sp-accent-soft);
  color: var(--sp-text); font-weight: 600;
}
.ftf-input-row { display: flex; gap: 8px; align-items: flex-end; }
.ftf-input {
  flex: 1; padding: 8px 12px;
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  background: rgba(255,255,255,0.6);
  font-size: 14px; color: var(--sp-text);
  resize: none; outline: none; font-family: inherit;
  line-height: 1.5; max-height: 120px;
}
.ftf-input:focus {
  border-color: rgba(var(--sp-accent-rgb),0.45);
  background: rgba(255,255,255,0.8);
}
.ftf-input::placeholder { color: rgba(var(--sp-text-rgb),0.3); }
.ftf-action-btn {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: opacity .15s;
}
.ftf-action-btn:active { opacity: 0.7; }
.ftf-refresh-btn {
  background: linear-gradient(135deg, #7a8a6e, #8a9e80);
}

/* 多选模式 */
.ftf-msg.ftf-selectable { cursor: pointer; }
.ftf-msg.ftf-selected { background: rgba(176,112,112,0.08); border-radius: 8px; }
.ftf-multiselect-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: var(--sp-header-bg); /* 跟随主题色 */
  border-top: 1px solid var(--sp-border);
}
.ftf-multiselect-bar span { font-size: 13px; color: var(--sp-text); }
.ftf-ms-btn {
  padding: 6px 14px; border: none; border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: all .15s;
}
.ftf-ms-btn:active { opacity: 0.7; }
.ftf-ms-del { background: rgba(176,112,112,0.15); color: #8a4040; }
.ftf-ms-cancel { background: var(--sp-accent-soft); color: var(--sp-text); margin-left: 8px; }

/* 聊天气泡中的动作描写 */
.ftf-chat-action {
  color: var(--sp-text-soft); font-size: 13px;
}

/* ── 加载指示器 ── */
.ftf-thinking {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 14px; font-size: 13px; color: rgba(var(--sp-text-rgb),0.4);
}
.ftf-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sp-accent);
  animation: ftfPulse 1.2s ease-in-out infinite;
}
.ftf-dot:nth-child(2) { animation-delay: 0.2s; }
.ftf-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes ftfPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* ================================================================
*  多账号系统
* ================================================================ */

/* ── 账号切换面板 ── */
.acc-overlay {
  position: absolute;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  visibility: hidden;
  pointer-events: none;
}
.acc-overlay.visible {
  visibility: visible;
  pointer-events: auto;
}
.acc-panel {
  width: 85%;
  max-width: 320px;
  max-height: 80%;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(78,52,46,0.08);
}
.acc-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-text);
}
.acc-header-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acc-header-close:hover { background: rgba(0,0,0,0.05); }
.acc-list-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

/* ── 账号列表项 ── */
.acc-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.acc-list-item:active { background: rgba(78,52,46,0.06); }
.acc-list-item.acc-current { background: rgba(78,52,46,0.04); }
.acc-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.acc-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #7ba4b8, #937bb0);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50%;
}
.acc-info {
  flex: 1;
  min-width: 0;
}
.acc-profile-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-account-name {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}
.acc-check {
  color: #4caf50;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── 添加账号按钮 ── */
.acc-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  margin: 4px 16px 8px;
  border-radius: 10px;
  background: rgba(78,52,46,0.04);
  color: var(--sp-text);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.acc-add-btn:active { background: rgba(78,52,46,0.1); }
.acc-loading {
  padding: 40px 20px;
  text-align: center;
  color: #999;
  font-size: 13px;
}

/* ── 添加账号表单 ── */
.acc-form {
  padding: 20px 16px;
}
.acc-form-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-text);
  text-align: center;
  margin-bottom: 16px;
}
.acc-form-group {
  margin-bottom: 12px;
}
.acc-form-label {
  font-size: 12px;
  color: #8D7B68;
  margin-bottom: 6px;
  display: block;
}
.acc-form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(78,52,46,0.15);
  border-radius: 8px;
  font-size: 14px;
  color: var(--sp-text);
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}
.acc-form-input:focus { border-color: #7ba4b8; }
.acc-form-hint {
  font-size: 11px;
  color: #999;
  margin-bottom: 16px;
}
.acc-form-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.acc-form-btn {
  padding: 8px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.acc-form-btn:active { opacity: 0.7; }
.acc-form-cancel {
  background: rgba(78,52,46,0.08);
  color: var(--sp-text);
}
.acc-form-confirm {
  background: linear-gradient(135deg, #7ba4b8, #5D8AA8);
  color: #fff;
  font-weight: 600;
}

/* ── 选择联系人页面 ── */
.ct-select-group {
  padding: 0 16px;
  margin-bottom: 12px;
}
.ct-select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
}
.ct-select-item:active { background: rgba(78,52,46,0.04); }
.ct-select-cb {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: #7ba4b8;
}
.ct-select-name {
  font-size: 14px;
  color: var(--sp-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════
   语音通话
   ══════════════════════════════════════════════════════ */
.qq-call-type-options {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 8px 0;
}
.qq-call-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 12px;
  transition: background .15s;
}
.qq-call-type-btn:active { background: rgba(78,52,46,0.06); }
.qq-call-type-btn span { font-size: 13px; color: var(--sp-text); }

.qq-voicecall-page {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.qq-voicecall-page.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.qq-vc-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
}
.qq-vc-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 60px 24px 40px;
}
.qq-vc-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-bottom: 24px;
}
.qq-vc-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.2);
}
.qq-vc-avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}
.qq-vc-name {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.qq-vc-status {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  animation: vc-pulse 1.5s ease-in-out infinite;
}
@keyframes vc-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.qq-vc-timer {
  font-size: 16px;
  color: rgba(255,255,255,0.9);
  font-variant-numeric: tabular-nums;
}
.qq-vc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.qq-vc-messages::-webkit-scrollbar { display: none; }
.qq-vc-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  animation: vc-msg-in .25s ease;
}
@keyframes vc-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.qq-vc-msg-system {
  align-self: center;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 10px;
}
.qq-vc-msg-me {
  align-self: flex-end;
  background: #4fc3f7;
  color: #0d1b2a;
}
.qq-vc-msg-other {
  align-self: flex-start;
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.qq-vc-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 24px 0 16px;
}
.qq-vc-ctrl-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.qq-vc-ctrl-btn:active { transform: scale(0.92); }
.qq-vc-hangup {
  background: #e53935;
  box-shadow: 0 4px 16px rgba(229,57,53,0.4);
}
.qq-vc-mic {
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
}
.qq-vc-mic.active {
  background: #4caf50;
  border-color: #4caf50;
  box-shadow: 0 0 20px rgba(76,175,80,0.5);
  animation: vc-mic-pulse 1s ease-in-out infinite;
}
@keyframes vc-mic-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(76,175,80,0.5); }
  50% { box-shadow: 0 0 30px rgba(76,175,80,0.7); }
}

/* 通话气泡（聊天记录中） */
.qq-vc-inline {
  display: inline;
  font-size: 13px;
  cursor: default;
}
.qq-vc-inline[data-voicecall-log] {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

/* 通话记录弹窗 */
.qq-vclog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.qq-vclog-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
}
.qq-vclog-me {
  background: rgba(79,195,247,0.12);
  align-self: flex-end;
  max-width: 85%;
}
.qq-vclog-other {
  background: rgba(78,52,46,0.06);
  align-self: flex-start;
  max-width: 85%;
}
.qq-vclog-name {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.5);
  font-weight: 600;
}
.qq-vclog-text {
  color: var(--sp-text);
  line-height: 1.4;
  word-break: break-word;
}

/* ── 群语音通话 ── */
.qq-gc-invite-list {
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.qq-gc-invite-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  border-bottom: 1px solid rgba(78,52,46,0.06);
}
.qq-gc-invite-item:last-child { border-bottom: none; }
.qq-gc-invite-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.qq-gc-invite-avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D7CCC8;
  color: var(--sp-text);
  font-size: 14px;
  font-weight: 600;
}
.qq-gc-invite-name {
  flex: 1;
  font-size: 14px;
  color: var(--sp-text);
}
.qq-gc-invite-cb {
  width: 18px;
  height: 18px;
  accent-color: #4FC3F7;
}

/* 群通话顶部 */
.qq-gvc-top {
  text-align: center;
  padding: 20px 0 10px;
}
.qq-gvc-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

/* 成员状态栏 */
.qq-gvc-members {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  max-height: 120px;
  overflow-y: auto;
}
.qq-gvc-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 56px;
}
.qq-gvc-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.3);
  transition: border-color 0.3s;
}
.qq-gvc-member-avatar-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.qq-gvc-member-name {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 56px;
}
.qq-gvc-member-status {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}
.qq-gvc-member.accepted .qq-gvc-member-avatar {
  border-color: #66BB6A;
}
.qq-gvc-member.accepted .qq-gvc-member-status {
  color: #66BB6A;
}
.qq-gvc-member.rejected .qq-gvc-member-avatar {
  border-color: #ef5350;
  opacity: 0.5;
}
.qq-gvc-member.rejected .qq-gvc-member-status {
  color: #ef5350;
}

/* 群通话消息中的角色名 */
.qq-vc-msg-name {
  display: block;
  font-size: 11px;
  color: #4FC3F7;
  margin-bottom: 2px;
  font-weight: 600;
}

/* ================================================================
 *  外观设置 — 预览 & 应用图标列表
 * ================================================================ */

.ap-preview {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  border: 1px solid rgba(93,64,55,0.1);
  background: var(--sp-input-bg); /* 默认 rgba(255,248,225,0.45)，随主题色变化 */
  background-size: cover;
  background-position: center;
  margin: 8px auto 4px;
  overflow: hidden;
}

.ap-font-preview {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(93,64,55,0.1);
  background: rgba(255,248,225,0.45);
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--sp-text);
  min-height: 60px;
}

.ap-upload-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ap-upload-row .stg-input { flex: 1; }

.ap-upload-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.22);
  background: rgba(var(--sp-accent-rgb),0.1);
  color: var(--sp-accent-2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.15s;
}
.ap-upload-btn:active { background: rgba(var(--sp-accent-rgb),0.2); }

.ap-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(93,64,55,0.1);
  background: rgba(93,64,55,0.05);
  color: rgba(var(--sp-text-rgb),0.55);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s;
}
.ap-reset-btn:active { background: rgba(93,64,55,0.12); }

/* ── 主题色 ── */
.ap-theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.ap-theme-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 0 1px rgba(93,64,55,0.15), 0 1px 3px rgba(0,0,0,0.12);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.12s;
}
.ap-theme-swatch:active { transform: scale(0.9); }
.ap-theme-swatch .ap-theme-check { opacity: 0; filter: drop-shadow(0 0 1px rgba(0,0,0,0.5)); }
.ap-theme-swatch.selected { box-shadow: 0 0 0 2px var(--sp-accent-2, var(--sp-accent-2)), 0 1px 3px rgba(0,0,0,0.12); }
.ap-theme-swatch.selected .ap-theme-check { opacity: 1; }

.ap-theme-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.ap-theme-custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(93,64,55,0.1);
  background: rgba(93,64,55,0.05);
  color: rgba(var(--sp-text-rgb),0.7);
  font-size: 12px;
  cursor: pointer;
}
.ap-theme-custom-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(93,64,55,0.15);
}
.ap-theme-custom input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}
.ap-theme-pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(93,64,55,0.1);
  background: rgba(93,64,55,0.05);
  color: rgba(var(--sp-text-rgb),0.7);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.ap-theme-pick:active { background: rgba(93,64,55,0.12); }
.ap-theme-reset { margin-top: 0; }

/* ── 自定义取色器（自建 HSL 面板） ── */
.ap-cp-mask {
  position: absolute;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  padding: 24px;
}
.ap-cp-card {
  width: 100%;
  max-width: 300px;
  background: rgba(255,255,255,0.98);
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.ap-cp-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-text);
  text-align: center;
  margin-bottom: 14px;
}
.ap-cp-preview {
  height: 46px;
  border-radius: 10px;
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px rgba(93,64,55,0.12);
}
.ap-cp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ap-cp-lab {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.65);
  width: 30px;
  flex-shrink: 0;
}
.ap-cp-range {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  border-radius: 6px;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(93,64,55,0.12);
}
.ap-cp-range.ap-cp-h {
  background: linear-gradient(90deg, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.ap-cp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(93,64,55,0.4);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
}
.ap-cp-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(93,64,55,0.4);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
}
.ap-cp-hex {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
  margin: 4px 0 14px;
  color: rgba(var(--sp-text-rgb),0.7);
  font-size: 14px;
}
.ap-cp-hex input {
  width: 96px;
  padding: 6px 8px;
  border: 1px solid rgba(93,64,55,0.15);
  border-radius: 8px;
  background: rgba(255,248,225,0.5);
  color: var(--sp-text);
  font-size: 14px;
  font-family: inherit;
  text-transform: uppercase;
  outline: none;
  letter-spacing: 1px;
}
.ap-cp-actions {
  display: flex;
  gap: 10px;
}
.ap-cp-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  background: rgba(93,64,55,0.08);
  color: rgba(var(--sp-text-rgb),0.7);
}
.ap-cp-btn:active { opacity: 0.8; }
.ap-cp-ok {
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  color: #fff;
  font-weight: 600;
}

/* ── 应用图标列表 ── */
.ap-app-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(93,64,55,0.06);
  cursor: pointer;
  transition: background 0.15s;
}
.ap-app-row:last-child { border-bottom: none; }
.ap-app-row:active { background: rgba(var(--sp-accent-rgb),0.06); }

.ap-app-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex-shrink: 0;
  object-fit: cover;
}

.ap-app-name {
  flex: 1;
  font-size: 14px;
  color: var(--sp-text);
  font-weight: 500;
}

.ap-app-arrow {
  flex-shrink: 0;
  opacity: 0.3;
  transition: transform 0.2s;
}
.ap-app-row.expanded .ap-app-arrow { transform: rotate(90deg); }

.ap-app-edit {
  display: none;
  padding: 10px 16px 14px;
  border-bottom: 1px solid rgba(93,64,55,0.06);
  background: rgba(255,248,225,0.3);
}
.ap-app-row.expanded + .ap-app-edit { display: block; }

.ap-app-edit-icon-preview {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(93,64,55,0.1);
}

/* ── 预设列表 ── */
.ap-preset-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(93,64,55,0.06);
  overflow: hidden;
}
.ap-preset-item:last-child { border-bottom: none; }

.ap-preset-info { flex: 1; min-width: 0; overflow: hidden; }
.ap-preset-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-preset-time {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.35);
  margin-top: 2px;
}

.ap-preset-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.ap-preset-btn {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(93,64,55,0.12);
  background: rgba(255,255,255,0.5);
  color: var(--sp-text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.ap-preset-btn:active { background: rgba(var(--sp-accent-rgb),0.12); }
.ap-preset-btn.danger { color: #e53935; border-color: rgba(229,57,53,0.15); }
.ap-preset-btn.danger:active { background: rgba(229,57,53,0.08); }

/* ── 图形密码 Canvas ── */
.ap-pattern-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
}
.ap-pattern-setup canvas {
  border-radius: 12px;
  background: rgba(255,248,225,0.5);
  border: 1px solid rgba(93,64,55,0.1);
  touch-action: none;
}
.ap-pattern-hint {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.4);
  margin-top: 8px;
}

/* ================================================================
 *  锁屏覆盖层
 * ================================================================ */

.ap-lockscreen {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ap-lockscreen.visible { display: flex; }

.ap-ls-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.7);
}

.ap-ls-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 430px;
  height: 100%;
  padding-top: env(safe-area-inset-top, 44px);
}

.ap-ls-time {
  font-size: 72px;
  font-weight: 200;
  color: #fff;
  letter-spacing: 2px;
  margin-top: 60px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.ap-ls-date {
  font-size: 16px;
  color: rgba(255,255,255,0.8);
  margin-top: 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}

.ap-ls-unlock {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  text-align: center;
}

.ap-ls-hint {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  animation: apLsHintPulse 2s ease-in-out infinite;
}

.ap-ls-msg {
  min-height: 20px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  color: #ff6b6b;
  text-align: center;
}
@keyframes apLsHintPulse {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

/* ── 数字密码键盘 ── */
.ap-ls-numpad {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ap-ls-dots {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}
.ap-ls-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  background: transparent;
  transition: background 0.15s;
}
.ap-ls-dot.filled { background: #fff; border-color: #fff; }

.ap-ls-numgrid {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  gap: 12px;
  justify-content: center;
}

.ap-ls-numkey {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ap-ls-numkey:active { background: rgba(255,255,255,0.25); }
.ap-ls-numkey.empty { border-color: transparent; background: none; cursor: default; }
.ap-ls-numkey.text-key { font-size: 14px; font-weight: 400; border-color: transparent; background: none; }
.ap-ls-numkey.text-key:active { background: rgba(255,255,255,0.1); }

/* ── 图形密码解锁 ── */
.ap-ls-pattern {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
}
.ap-ls-pattern canvas {
  touch-action: none;
}

/* ================================================================
 *  聊天外观：背景 & 气泡预设
 * ================================================================ */
.qq-chat-body.qq-chat-bg-custom {
  background-repeat: no-repeat;
}
.qq-chat-body.qq-chat-bg-custom .qq-bubble-other {
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.qq-chat-body.qq-chat-bg-custom .qq-bubble-mine {
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* ── 气泡预设列表 ── */
.qq-bubble-preset-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(78,52,46,0.03);
  margin-bottom: 6px;
}
.qq-bubble-preset-item:last-child { margin-bottom: 0; }
.qq-bubble-preset-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.qq-bubble-preset-name {
  font-size: 13px;
  color: var(--sp-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qq-bubble-preset-time {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.4);
}
.qq-bubble-preset-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 8px;
}
.qq-bubble-preset-btn {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(78,52,46,0.15);
  background: #fff;
  color: var(--sp-text);
  cursor: pointer;
  transition: background 0.15s;
}
.qq-bubble-preset-btn:active { background: rgba(78,52,46,0.06); }
.qq-bubble-preset-btn.danger {
  color: #d32f2f;
  border-color: rgba(211,47,47,0.2);
}
.qq-bubble-preset-btn.danger:active { background: rgba(211,47,47,0.06); }

/* ── 气泡预览 ── */
.qq-bubble-preview-box {
  background: var(--sp-input-bg); /* 默认 rgba(255,248,225,0.4)，随主题色变化 */
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(78,52,46,0.08);
}
.qq-bubble-preview-row {
  display: flex;
  margin-bottom: 8px;
}
.qq-bubble-preview-row:last-child { margin-bottom: 0; }
.qq-bubble-preview-left { justify-content: flex-start; }
.qq-bubble-preview-right { justify-content: flex-end; }
.qq-bubble-preview-mine,
.qq-bubble-preview-other {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.qq-bubble-preview-other {
  background: #fff;
  color: #1a1a1a;
  border-top-left-radius: 2px;
}
.qq-bubble-preview-mine {
  background: #95ec69;
  color: #1a1a1a;
  border-top-right-radius: 2px;
}

/* ================================================================
 *  游戏大厅
 * ================================================================ */
.gh-overlay { z-index: 3000; }

.gh-header {
  /* 原紫色配色：linear-gradient(180deg,#e0daf0,#d8d2e8)；文字 var(--sp-text) —— 现跟随主题色 */
  background: var(--sp-header-bg) !important;
  border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.12) !important;
  color: var(--sp-text) !important;
}
.gh-header .ct-header-title { color: var(--sp-text); }
.gh-header .ct-header-btn { color: var(--sp-text-soft); }

.gh-home-body {
  background: var(--sp-page-bottom);
  padding: 0 !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gh-home-banner {
  padding: 28px 20px 22px;
  text-align: center;
  background: linear-gradient(135deg, var(--sp-accent) 0%, var(--sp-accent-2) 50%, var(--sp-accent-2) 100%);
  border-radius: 0 0 24px 24px;
  margin-bottom: 4px;
}
.gh-banner-icon {
  width: 56px; height: 56px;
  margin: 0 auto 10px;
  background: rgba(255,255,255,0.18);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.gh-banner-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
}
.gh-banner-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-top: 4px;
  letter-spacing: 1px;
}

.gh-game-list {
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gh-game-card {
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(var(--sp-accent-rgb),0.1);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.gh-game-card:active {
  transform: scale(0.98);
  box-shadow: 0 2px 12px rgba(var(--sp-accent-rgb),0.15);
}

.gh-game-cover {
  width: 90px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gh-cover-werewolf {
  background: linear-gradient(135deg, #5c4a8a, #7b68b0);
}
.gh-cover-king {
  background: linear-gradient(135deg, #c49e5c, #d4b06a);
}

.gh-game-info {
  flex: 1;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.gh-game-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-text);
}
.gh-game-desc {
  font-size: 12px;
  color: var(--sp-text-soft);
  margin-top: 4px;
  line-height: 1.4;
}
.gh-game-tags {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.gh-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(var(--sp-accent-rgb),0.1);
  color: var(--sp-text-soft);
  font-weight: 500;
}

.gh-coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px 32px;
  color: var(--sp-text-soft);
  font-size: 13px;
}
.gh-coming-icon { opacity: 0.5; display: flex; }
.gh-coming-icon svg { fill: var(--sp-text-soft); }
.gh-coming-text { letter-spacing: 0.5px; }

/* ══════════════════════════════════════════
   狼人杀 · 玩法选择页
══════════════════════════════════════════ */
.gh-ww-menu-body {
  background: var(--sp-page-bottom);
  padding: 16px !important;
  overflow-y: auto;
}
.gh-ww-menu-section {
  margin-bottom: 20px;
}
.gh-ww-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-text);
  margin-bottom: 10px;
  padding-left: 4px;
}
.gh-ww-mode-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gh-ww-mode-card {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.88);
  border-radius: 12px;
  padding: 14px 12px;
  box-shadow: 0 2px 8px rgba(var(--sp-accent-rgb),0.08);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.gh-ww-mode-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(var(--sp-accent-rgb),0.12);
}
.gh-ww-mode-disabled {
  opacity: 0.55;
  cursor: default;
}
.gh-ww-mode-disabled:active {
  transform: none;
  box-shadow: 0 2px 8px rgba(var(--sp-accent-rgb),0.08);
}
.gh-ww-mode-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.gh-ww-mode-disabled .gh-ww-mode-icon {
  background: linear-gradient(135deg, #a8a0b8, #c0b8d0);
}
.gh-ww-mode-info {
  flex: 1;
  margin-left: 12px;
}
.gh-ww-mode-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text);
}
.gh-ww-mode-desc {
  font-size: 12px;
  color: var(--sp-text-soft);
  margin-top: 3px;
}
.gh-ww-mode-arrow {
  color: var(--sp-text-soft);
  flex-shrink: 0;
}
.gh-ww-coming-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(var(--sp-accent-rgb),0.15);
  color: var(--sp-text-soft);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   狼人杀 · 玩家配置页
══════════════════════════════════════════ */
.gh-ww-setup-body {
  background: var(--sp-page-bottom);
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gh-ww-setup-hint {
  font-size: 13px;
  color: var(--sp-text-soft);
  text-align: center;
  padding: 12px 16px 8px;
}
.gh-ww-contact-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
}
.gh-ww-contact-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.15s;
}
.gh-ww-contact-item.selected {
  background: rgba(var(--sp-accent-rgb),0.15);
  box-shadow: inset 0 0 0 1.5px rgba(var(--sp-accent-rgb),0.4);
}
.gh-ww-contact-item .ct-avatar {
  flex-shrink: 0;
}
.gh-ww-contact-name {
  flex: 1;
  margin-left: 10px;
  font-size: 14px;
  color: var(--sp-text);
  font-weight: 500;
}
.gh-ww-contact-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #c0b0d8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.gh-ww-contact-item.selected .gh-ww-contact-check {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
}
.gh-ww-contact-check svg {
  display: none;
}
.gh-ww-contact-item.selected .gh-ww-contact-check svg {
  display: block;
}
.gh-ww-setup-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(var(--sp-accent-rgb),0.1);
  background: rgba(255,255,255,0.6);
}
.gh-ww-btn-start {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.gh-ww-btn-start:disabled {
  opacity: 0.4;
  cursor: default;
}
.gh-ww-btn-start:not(:disabled):active {
  opacity: 0.85;
}

/* ══════════════════════════════════════════
   狼人杀 · 游戏页
══════════════════════════════════════════ */
.gh-ww-play-header {
  transition: background 0.4s;
  flex-shrink: 0;
}
.gh-ww-play-header.night {
  background: linear-gradient(180deg, #2a2040 0%, #3d3060 100%) !important;
  color: #e0d8f0 !important;
}
.gh-ww-play-header.night .ct-header-title,
.gh-ww-play-header.night .ct-header-btn {
  color: #e0d8f0 !important;
}
.gh-ww-play-header.day {
  background: linear-gradient(180deg, #f5e6c8 0%, #ede0d0 100%) !important;
  color: #5a4830 !important;
}
.gh-ww-play-header.day .ct-header-title,
.gh-ww-play-header.day .ct-header-btn {
  color: #5a4830 !important;
}
.gh-ww-alive-count {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.2);
  white-space: nowrap;
}

.gh-ww-player-bar {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  overflow-x: auto;
  background: rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.08);
  transition: background 0.4s;
  flex-shrink: 0;
}
.gh-ww-player-bar.night {
  background: rgba(30,20,50,0.5);
}
.gh-ww-player-bar.day {
  background: rgba(255,240,200,0.3);
}
.gh-ww-player-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  padding: 4px 2px;
  border-radius: 8px;
  position: relative;
}
.gh-ww-player-seat.dead {
  opacity: 0.4;
}
.gh-ww-player-seat.is-user {
  background: rgba(var(--sp-accent-rgb),0.12);
}
.gh-ww-seat-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.gh-ww-seat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gh-ww-seat-num {
  font-size: 9px;
  color: var(--sp-text-soft);
  margin-top: 2px;
}
.gh-ww-seat-role {
  font-size: 8px;
  padding: 0 3px;
  border-radius: 3px;
  margin-top: 1px;
  display: none;
}
.gh-ww-player-seat.dead .gh-ww-seat-role {
  display: block;
}
.gh-ww-role-wolf { background: rgba(200,60,60,0.15); color: #c03030; }
.gh-ww-role-god { background: rgba(60,100,200,0.15); color: #3060c0; }
.gh-ww-role-villager { background: rgba(60,160,80,0.15); color: #308040; }
.gh-ww-role-dead { background: rgba(128,128,128,0.15); color: #808080; }

.gh-ww-dead-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(200,50,50,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gh-ww-dead-x svg {
  width: 8px;
  height: 8px;
  fill: #fff;
}

/* 消息区域 */
.gh-ww-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.4s;
}
.gh-ww-messages.night {
  background: linear-gradient(180deg, #1e1830 0%, #2a2240 100%);
}
.gh-ww-messages.day {
  background: linear-gradient(180deg, #faf5e8 0%, #f5f0e0 100%);
}

.gh-ww-msg {
  display: flex;
  gap: 8px;
  max-width: 92%;
  animation: ghWwFadeIn 0.25s ease;
}
@keyframes ghWwFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.gh-ww-msg-system {
  align-self: center;
  max-width: 85%;
  text-align: center;
  font-size: 12px;
  color: var(--sp-text-soft);
  background: rgba(var(--sp-accent-rgb),0.1);
  padding: 6px 14px;
  border-radius: 12px;
}
.gh-ww-messages.night .gh-ww-msg-system {
  color: #c0b0e0;
  background: rgba(180,160,220,0.12);
}
.gh-ww-messages.day .gh-ww-msg-system {
  color: #8a7050;
  background: rgba(180,150,100,0.12);
}
.gh-ww-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.gh-ww-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gh-ww-msg-bubble {
  background: rgba(255,255,255,0.85);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.gh-ww-messages.night .gh-ww-msg-bubble {
  background: rgba(60,50,90,0.7);
  color: #e8e0f5;
}
.gh-ww-msg-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-accent);
  margin-bottom: 3px;
}
.gh-ww-messages.night .gh-ww-msg-name {
  color: #c0a8f0;
}
.gh-ww-msg-wolf {
  border-left: 3px solid rgba(200,60,60,0.6);
}
.gh-ww-msg-loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(var(--sp-accent-rgb),0.3);
  border-top-color: var(--sp-accent);
  border-radius: 50%;
  animation: ghWwSpin 0.7s linear infinite;
  vertical-align: middle;
  margin-left: 4px;
}
@keyframes ghWwSpin {
  to { transform: rotate(360deg); }
}

/* 操作区域 */
.gh-ww-action-area {
  padding: 10px 12px;
  border-top: 1px solid rgba(var(--sp-accent-rgb),0.1);
  background: rgba(255,255,255,0.6);
  min-height: 50px;
  flex-shrink: 0;
}
.gh-ww-action-input {
  display: flex;
  gap: 8px;
  align-items: center;
}
.gh-ww-input {
  flex: 1;
  border: 1px solid rgba(var(--sp-accent-rgb),0.2);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  outline: none;
  background: #fff;
  color: var(--sp-text);
}
.gh-ww-input:focus {
  border-color: var(--sp-accent);
}
.gh-ww-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.gh-ww-send-btn:active {
  opacity: 0.8;
}
.gh-ww-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.gh-ww-action-btn {
  padding: 8px 16px;
  border-radius: 18px;
  border: 1.5px solid rgba(var(--sp-accent-rgb),0.3);
  background: rgba(255,255,255,0.9);
  font-size: 13px;
  color: var(--sp-text);
  cursor: pointer;
  transition: all 0.15s;
}
.gh-ww-action-btn:active {
  background: rgba(var(--sp-accent-rgb),0.15);
  border-color: var(--sp-accent);
}
.gh-ww-action-btn.primary {
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  color: #fff;
  border-color: transparent;
}
.gh-ww-action-btn.danger {
  border-color: rgba(200,60,60,0.3);
  color: #c03030;
}
.gh-ww-action-btn.danger:active {
  background: rgba(200,60,60,0.1);
}

/* 结算画面 */
.gh-ww-gameover {
  position: absolute;
  inset: 0;
  background: rgba(30,20,50,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
  animation: ghWwFadeIn 0.4s ease;
}
.gh-ww-gameover-title {
  font-size: 24px;
  font-weight: 700;
  color: #f0e8ff;
  margin-bottom: 8px;
}
.gh-ww-gameover-sub {
  font-size: 14px;
  color: #c0b0e0;
  margin-bottom: 20px;
}
.gh-ww-gameover-players {
  width: 100%;
  max-height: 45vh;
  overflow-y: auto;
  margin-bottom: 20px;
}
.gh-ww-go-player {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.gh-ww-go-player.winner {
  background: rgba(100,200,120,0.12);
}
.gh-ww-go-player.loser {
  background: rgba(200,60,60,0.08);
  opacity: 0.7;
}
.gh-ww-go-seat {
  width: 22px;
  font-size: 12px;
  color: #a090c0; /* 结算页为深色氛围，保留浅紫文字 */
  flex-shrink: 0;
}
.gh-ww-go-name {
  flex: 1;
  font-size: 13px;
  color: #e8e0f5;
  margin-left: 8px;
}
.gh-ww-go-role {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
}
.gh-ww-go-status {
  font-size: 11px;
  color: #a090c0; /* 结算页为深色氛围，保留浅紫文字 */
  margin-left: 8px;
}
.gh-ww-gameover-btns {
  display: flex;
  gap: 12px;
}
.gh-ww-gameover-btns button {
  padding: 10px 24px;
  border-radius: 20px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.gh-ww-btn-restart {
  background: linear-gradient(135deg, var(--sp-accent), var(--sp-accent-2));
  color: #fff;
}
.gh-ww-btn-exit {
  background: rgba(255,255,255,0.15);
  color: #e0d8f0;
}
.gh-ww-btn-replay {
  background: linear-gradient(135deg, #5a7ca8, #7b9cc4);
  color: #fff;
}

/* 规则帮助按钮 */
.gh-ww-mode-help {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(var(--sp-accent-rgb),0.2);
  color: var(--sp-accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 8px;
}
.gh-ww-mode-help:active {
  background: rgba(var(--sp-accent-rgb),0.4);
}

/* 设置面板 */
.gh-ww-settings-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  animation: ghWwFadeIn 0.2s ease;
}
.gh-ww-settings-panel {
  background: #2a2040;
  border-radius: 14px;
  width: 85%;
  max-width: 320px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.gh-ww-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 15px;
  font-weight: 600;
  color: #f0e8ff;
}
.gh-ww-settings-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.1);
  color: #e0d8f0;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gh-ww-settings-body {
  padding: 16px;
}
.gh-ww-settings-item {
  margin-bottom: 12px;
}
.gh-ww-settings-label {
  font-size: 13px;
  font-weight: 500;
  color: #c8b8e8;
  margin-bottom: 10px;
}
.gh-ww-settings-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gh-ww-settings-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  font-size: 13px;
  color: #e0d8f0;
}
.gh-ww-settings-radio input { display: none; }
.gh-ww-radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #7060a0;
  position: relative;
  flex-shrink: 0;
}
.gh-ww-settings-radio input:checked ~ .gh-ww-radio-dot {
  border-color: #9080d0;
}
.gh-ww-settings-radio input:checked ~ .gh-ww-radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #9080d0;
}
.gh-ww-settings-hint {
  font-size: 11px;
  color: #8070a0;
  margin-top: 8px;
  padding-left: 2px;
}

/* 规则弹窗 */
.gh-ww-rules-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  animation: ghWwFadeIn 0.2s ease;
}
.gh-ww-rules-panel {
  /* 规则弹窗从（浅色）玩法选择页打开，改为跟随主题的浅色卡片（原深色 #2a2040） */
  background: var(--sp-page-bottom);
  border-radius: 14px;
  width: 90%;
  max-width: 340px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.gh-ww-rules-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sp-border);
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text);
  flex-shrink: 0;
}
.gh-ww-rules-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(var(--sp-accent-rgb),0.15);
  color: var(--sp-text-soft);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gh-ww-rules-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
}
.gh-ww-rules-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-accent-2);
  margin-bottom: 4px;
}
.gh-ww-rules-line {
  font-size: 12px;
  color: var(--sp-text-soft);
  line-height: 1.6;
  padding-left: 2px;
}
.gh-ww-rules-gap {
  height: 10px;
}

/* 角色选择面板 */
.gh-ww-role-choice-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  animation: ghWwFadeIn 0.2s ease;
}
.gh-ww-role-choice-panel {
  background: #2a2040;
  border-radius: 14px;
  width: 85%;
  max-width: 320px;
  padding: 20px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.gh-ww-role-choice-header {
  font-size: 16px;
  font-weight: 600;
  color: #f0e8ff;
  text-align: center;
  margin-bottom: 16px;
}
.gh-ww-role-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.gh-ww-role-choice-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.gh-ww-role-choice-btn.gh-ww-role-wolf {
  background: rgba(200,60,60,0.15);
  color: #e06060;
  border-color: rgba(200,60,60,0.3);
}
.gh-ww-role-choice-btn.gh-ww-role-god {
  background: rgba(60,100,200,0.15);
  color: #7090e0;
  border-color: rgba(60,100,200,0.3);
}
.gh-ww-role-choice-btn.gh-ww-role-villager {
  background: rgba(60,160,80,0.15);
  color: #50a060;
  border-color: rgba(60,160,80,0.3);
}
.gh-ww-role-choice-btn:active {
  transform: scale(0.95);
}
.gh-ww-role-choice-hint {
  font-size: 11px;
  color: #8070a0;
  text-align: center;
}

/* 复盘面板 */
.gh-ww-replay {
  position: absolute;
  inset: 0;
  background: rgba(20,15,40,0.97);
  display: flex;
  flex-direction: column;
  z-index: 12;
  animation: ghWwFadeIn 0.3s ease;
}
.gh-ww-replay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.gh-ww-replay-title {
  font-size: 17px;
  font-weight: 600;
  color: #f0e8ff;
}
.gh-ww-replay-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #e0d8f0;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gh-ww-replay-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 24px;
}
.gh-ww-replay-section {
  margin-bottom: 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.06);
}
.gh-ww-replay-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #c8b8f0;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(200,184,240,0.15);
}
.gh-ww-replay-identity {
  display: flex;
  align-items: center;
  padding: 4px 0;
  gap: 8px;
}
.gh-ww-replay-seat {
  font-size: 11px;
  color: #a090c0; /* 复盘页为深色氛围，保留浅紫文字 */
  width: 24px;
  flex-shrink: 0;
}
.gh-ww-replay-name {
  flex: 1;
  font-size: 12px;
  color: #e0d8f0;
}
.gh-ww-replay-role {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
}
.gh-ww-replay-phase {
  font-size: 12px;
  font-weight: 500;
  color: #a8c0e0;
  margin: 10px 0 6px;
  padding-left: 2px;
}
.gh-ww-replay-actions {
  padding-left: 8px;
}
.gh-ww-replay-action {
  font-size: 12px;
  padding: 3px 0;
  color: #d0c8e8;
  line-height: 1.5;
}
.gh-ww-replay-action.wolf { color: #e87070; }
.gh-ww-replay-action.guard { color: #70c8a8; }
.gh-ww-replay-action.seer { color: #80b0f0; }
.gh-ww-replay-action.witch { color: #c890e0; }
.gh-ww-replay-action.medium { color: #90c8e0; }
.gh-ww-replay-action.mech { color: #d09060; }
.gh-ww-replay-action.dancer { color: #e0a060; }
.gh-ww-replay-action.masker { color: #c07080; }
.gh-ww-replay-action.death { color: #e06060; }
.gh-ww-replay-action.info { color: #80c090; }
.gh-ww-replay-action.vote { color: #b0a8d0; }
.gh-ww-replay-action.exile { color: #e0a050; }
.gh-ww-replay-action.hunter { color: #e08040; }
.gh-ww-replay-action.lastwords { color: #a0a0b0; font-style: italic; }
.gh-ww-replay-reason {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 10px;
  color: #a0a0b0;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  font-style: italic;
}
.gh-ww-replay-speeches {
  padding-left: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.gh-ww-replay-speech {
  font-size: 11px;
  padding: 3px 0;
  line-height: 1.5;
}
.gh-ww-replay-speaker {
  color: #b0a8d0;
  font-weight: 500;
}
.gh-ww-replay-speech-text {
  color: #c8c0e0;
}

/* ================================================================
*  ta的手机 (cphone)
* ================================================================ */
.cp-app-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 50px; }
/* 子应用页头部：标题相对整个头部居中，不受左右两侧按钮宽度差影响 */
#cpPageApp .ct-header-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex: none;
  max-width: 48%;
  pointer-events: none;
}
#cpPageApp .cp-app-actions { flex: 1; }
.cp-act-btn {
  background: rgba(var(--sp-accent-rgb),0.14);
  border: 1px solid rgba(var(--sp-accent-rgb),0.25);
  color: var(--sp-accent-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cp-act-btn:active { background: rgba(var(--sp-accent-rgb),0.28); }
.cp-act-btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ── 选择联系人列表 ── */
.cp-pick-hint { color: rgba(var(--sp-text-rgb),0.55); font-size: 12.5px; padding: 2px 4px 12px; }

/* ── 主屏 ── */
.cp-home { position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.cp-home-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #ffe0b2 0%, #ffccbc 45%, #d7ccc8 100%);
  background-size: cover; background-position: center;
  z-index: 0;
}
.cp-home-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.06); }
.cp-home-clock {
  position: relative; z-index: 2;
  text-align: center;
  padding: 86px 16px 24px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.cp-home-time {
  font-size: 66px; font-weight: 300; line-height: 1.02;
  letter-spacing: 2px;
}
.cp-home-date {
  font-size: 16px; font-weight: 500; margin-top: 8px;
  opacity: 0.95;
}
.cp-grid {
  position: relative; z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 6px;
  align-content: flex-start;
  padding: 80px 18px 24px;
  overflow-y: auto;
  scrollbar-width: none;
}
.cp-grid::-webkit-scrollbar { display: none; }
.cp-app {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer;
}
.cp-app:active { transform: scale(0.92); }
.cp-app-icon {
  width: 56px; height: 56px; border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  background: #fff;
}
.cp-app-label {
  color: #fff; font-size: 11.5px; font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 通用空态 / 加载 ── */
.cp-empty { text-align: center; padding: 48px 20px; color: rgba(var(--sp-text-rgb),0.55); }
.cp-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.7; }
.cp-empty-text { font-size: 14px; margin-bottom: 6px; }
.cp-empty-hint { font-size: 12px; opacity: 0.75; }
.cp-gen-btn {
  margin: 16px auto 0; display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #ffb300, #f57c00);
  color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 22px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(245,124,0,0.3);
}
.cp-gen-btn:active { opacity: 0.85; }
.cp-loading {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px 20px; color: rgba(var(--sp-text-rgb),0.6); font-size: 13px;
}
.cp-spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(245,124,0,0.2);
  border-top-color: #f57c00;
  animation: cp-spin 0.8s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }

/* ── 图片占位（文字图） ── */
.cp-img-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px;
  background: linear-gradient(135deg, #ffe0b2, #ffccbc);
  color: var(--sp-text-soft); text-align: center;
  min-height: 110px;
}
.cp-img-ph svg { opacity: 0.6; }
.cp-img-ph-text { font-size: 11.5px; line-height: 1.4; }
.cp-img-ph-spin { width: 22px; height: 22px; border-width: 2px; }
.cp-img-ph-retry { cursor: pointer; transition: filter .15s, transform .1s; }
.cp-img-ph-retry:hover { filter: brightness(1.03); }
.cp-img-ph-retry:active { transform: scale(0.98); filter: brightness(0.95); }
.cp-img-ph-retry-hint { font-size: 10px; color: #bf6a4e; margin-top: 1px; opacity: 0.9; }

/* ── 分页 Tab ── */
.cp-tabs {
  display: flex; gap: 6px;
  background: rgba(255,255,255,0.5);
  border-radius: 12px; padding: 4px; margin-bottom: 14px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.1);
}
.cp-tab {
  flex: 1; border: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: rgba(var(--sp-text-rgb),0.55);
  background: transparent; border-radius: 9px; padding: 8px 0;
  transition: background 0.15s, color 0.15s;
}
.cp-tab.active { background: #fff; color: var(--sp-accent-2); box-shadow: 0 2px 8px rgba(93,64,55,0.08); }

/* QQ 子应用：全幅渲染（贴合真实 QQ 页面） */
.ct-body.cp-flush { padding: 0; }
.cp-qq-tabwrap { padding: 12px 14px 6px; }
.cp-qq-feed { padding: 12px 0 8px; }
.cp-qq-post-img { margin-top: 10px; border-radius: 10px; overflow: hidden; }
.cp-qq-post-img img { width: 100%; display: block; }

/* ── 会话详情 ── */
.cp-chat-back {
  display: inline-flex; align-items: center;
  color: var(--sp-accent-2); font-size: 13.5px; font-weight: 600;
  cursor: pointer; padding: 2px 4px 12px;
}
.cp-chat-title {
  text-align: center; color: var(--sp-text); font-size: 15px; font-weight: 700;
  padding-bottom: 14px; border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.12); margin-bottom: 14px;
}
.cp-chat-stream { display: flex; flex-direction: column; gap: 10px; }
.cp-chat-msg { display: flex; }
.cp-chat-msg.left { justify-content: flex-start; }
.cp-chat-msg.right { justify-content: flex-end; }
.cp-bubble {
  max-width: 74%;
  padding: 9px 12px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.5; word-break: break-word; white-space: pre-wrap;
}
.cp-chat-msg.left .cp-bubble { background: rgba(255,255,255,0.85); color: var(--sp-text); border-bottom-left-radius: 4px; }
.cp-chat-msg.right .cp-bubble { background: linear-gradient(135deg, #ffd180, #ffb74d); color: #5d4037; border-bottom-right-radius: 4px; }
.cp-chat-img { max-width: 160px; border-radius: 8px; display: block; cursor: pointer; }
.cp-chat-note { text-align: center; color: rgba(var(--sp-text-rgb),0.45); font-size: 11.5px; margin-top: 16px; }

/* ── QQ 子应用 ── */
.cp-sec-title {
  font-size: 12px; font-weight: 700; color: rgba(var(--sp-text-rgb),0.5);
  letter-spacing: 1px; margin: 6px 2px 10px; text-transform: uppercase;
}
.cp-qq-chat {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: rgba(255,255,255,0.6);
  border-radius: 12px; margin-bottom: 8px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.08);
  cursor: pointer;
}
.cp-qq-chat:active { background: rgba(var(--sp-accent-rgb),0.12); }
.cp-qq-chat.real { border-color: rgba(245,124,0,0.35); background: rgba(255,243,224,0.85); }
.cp-qq-chat.real:active { background: rgba(255,224,178,0.95); }
.cp-qq-av {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; font-weight: 600;
}
.cp-qq-chat-main { flex: 1; min-width: 0; }
.cp-qq-chat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cp-qq-chat-name { color: var(--sp-text); font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-qq-chat-time { color: rgba(var(--sp-text-rgb),0.4); font-size: 11px; flex-shrink: 0; }
.cp-qq-chat-preview { color: rgba(var(--sp-text-rgb),0.6); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.cp-qq-chat-rel { font-size: 10px; color: #f57c00; background: rgba(var(--sp-accent-rgb),0.12); padding: 1px 6px; border-radius: 6px; margin-left: 6px; }
.cp-qq-badge {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px;
  background: #e53935; color: #fff; border-radius: 9px;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}

/* 朋友圈动态 */
.cp-moment {
  background: rgba(255,255,255,0.6);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.08);
}
.cp-moment-text { color: var(--sp-text); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.cp-moment-img { margin-top: 10px; border-radius: 10px; overflow: hidden; }
.cp-moment-img img { width: 100%; display: block; }
.cp-moment-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.cp-moment-time { color: rgba(var(--sp-text-rgb),0.4); font-size: 11px; }
.cp-moment-likes { color: #f57c00; font-size: 12px; display: flex; align-items: center; gap: 4px; }
.cp-moment-comments { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(var(--sp-accent-rgb),0.18); }
.cp-moment-cmt { font-size: 12.5px; color: rgba(var(--sp-text-rgb),0.75); line-height: 1.5; }
.cp-moment-cmt b { color: #5d6bc0; font-weight: 600; }

/* ── 相册 ── */
.cp-album { column-count: 2; column-gap: 10px; }
.cp-photo {
  break-inside: avoid; margin-bottom: 10px;
  border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(var(--sp-accent-rgb),0.08);
  cursor: pointer;
}
.cp-photo img { width: 100%; display: block; }
.cp-photo-cap { padding: 8px 10px; font-size: 12px; color: rgba(var(--sp-text-rgb),0.75); line-height: 1.45; }
.cp-photo-loc { color: #f57c00; font-size: 11px; margin-top: 3px; }

/* ── 备忘录 ── */
.cp-note {
  background: linear-gradient(160deg, #fff8e1, #fff3e0);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.18);
  box-shadow: 0 2px 8px rgba(93,64,55,0.06);
  position: relative;
}
.cp-note.pinned { border-color: rgba(245,124,0,0.4); }
.cp-note-pin { position: absolute; top: 10px; right: 12px; color: #f57c00; font-size: 12px; }
.cp-note-title { color: var(--sp-text); font-size: 14px; font-weight: 700; margin-bottom: 5px; padding-right: 24px; }
.cp-note-body { color: rgba(var(--sp-text-rgb),0.8); font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.cp-note-time { color: rgba(var(--sp-text-rgb),0.4); font-size: 11px; margin-top: 8px; }

/* ── 浏览器 ── */
.cp-hist {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: rgba(255,255,255,0.6);
  border-radius: 12px; margin-bottom: 8px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.08);
}
.cp-hist-ico {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 600;
  background: #90a4ae;
}
.cp-hist-ico.search { background: rgba(245,124,0,0.15); color: #f57c00; }
.cp-hist-main { flex: 1; min-width: 0; }
.cp-hist-title { color: var(--sp-text); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-hist-sub { color: rgba(var(--sp-text-rgb),0.5); font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-hist-time { color: rgba(var(--sp-text-rgb),0.4); font-size: 11px; flex-shrink: 0; }

/* ── 支付宝 ── */
.cp-pay-balance {
  background: linear-gradient(135deg, #4f9be8, #1976d2);
  color: #fff; border-radius: 16px; padding: 20px 22px; margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(25,118,210,0.28);
}
.cp-pay-bal-label { font-size: 12.5px; opacity: 0.85; }
.cp-pay-bal-num { font-size: 30px; font-weight: 700; margin-top: 6px; }
.cp-bill {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.1);
}
.cp-bill-cat {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(94,138,184,0.15); color: #1976d2; font-size: 16px;
}
.cp-bill-main { flex: 1; min-width: 0; }
.cp-bill-merchant { color: var(--sp-text); font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-bill-detail { color: rgba(var(--sp-text-rgb),0.5); font-size: 11.5px; margin-top: 2px; }
.cp-bill-amt { font-size: 16px; font-weight: 600; flex-shrink: 0; }
.cp-bill-amt.out { color: var(--sp-text); }
.cp-bill-amt.in { color: #43a047; }

/* ── 支付宝（玩家钱包 alipay.js） ── */
.apay-balance-card {
  background: linear-gradient(135deg, #4f9be8, #1976d2);
  color: #fff; border-radius: 18px; padding: 22px 22px 20px; margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(25,118,210,0.28);
}
.apay-bal-label { font-size: 12.5px; opacity: 0.88; }
.apay-bal-num { font-size: 34px; font-weight: 700; margin-top: 6px; letter-spacing: 0.5px; }
.apay-bal-setup {
  margin-top: 14px; background: rgba(255,255,255,0.22); color: #fff;
  border: 1px solid rgba(255,255,255,0.5); border-radius: 20px;
  padding: 7px 18px; font-size: 13px; font-family: inherit; cursor: pointer;
}
.apay-bal-setup:active { opacity: 0.7; }
.apay-quick { display: flex; gap: 10px; margin-bottom: 18px; }
.apay-quick-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.7); border: 1px solid rgba(var(--sp-accent-rgb),0.12);
  border-radius: 14px; padding: 12px 0; font-size: 13px; color: var(--sp-text);
  font-family: inherit; cursor: pointer;
}
.apay-quick-btn:active { opacity: 0.7; }
.apay-quick-ico { font-size: 20px; line-height: 1; }
.apay-section-title { color: rgba(var(--sp-text-rgb),0.55); font-size: 12.5px; font-weight: 600; margin: 4px 2px 6px; }
.apay-bill {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.1);
}
.apay-bill-ico {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(94,138,184,0.15); color: #1976d2; font-size: 16px; font-weight: 600;
}
.apay-bill-main { flex: 1; min-width: 0; }
.apay-bill-title {
  color: var(--sp-text); font-size: 14px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.apay-bill-sub { color: rgba(var(--sp-text-rgb),0.5); font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apay-bill-amt { font-size: 16px; font-weight: 600; flex-shrink: 0; }
.apay-bill-amt.out { color: var(--sp-text); }
.apay-bill-amt.in { color: #43a047; }
.apay-bill-tag {
  font-size: 10px; font-weight: 500; color: #1976d2;
  background: rgba(94,138,184,0.16); border-radius: 6px; padding: 1px 6px; flex-shrink: 0;
}
.apay-bill-tag-src { color: var(--sp-text-soft); background: rgba(141,110,99,0.14); }
.apay-dir-tabs {
  display: flex; gap: 8px; margin-bottom: 16px;
  background: rgba(255,255,255,0.5); border-radius: 12px; padding: 4px;
}
.apay-dir-tab {
  flex: 1; padding: 9px 0; border: none; border-radius: 9px; background: transparent;
  color: rgba(var(--sp-text-rgb),0.6); font-size: 14px; font-family: inherit; font-weight: 500; cursor: pointer;
}
.apay-dir-tab.active.out { background: #ef5350; color: #fff; }
.apay-dir-tab.active.in { background: #43a047; color: #fff; }
.apay-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.apay-filter-sel { flex: 1 1 calc(50% - 4px); min-width: 0; font-size: 12.5px; padding: 7px 8px; }
.apay-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.apay-cat-chip {
  border: 1px solid rgba(94,138,184,0.4); background: rgba(255,255,255,0.6);
  color: var(--sp-text); border-radius: 16px; padding: 6px 13px; font-size: 13px;
  font-family: inherit; cursor: pointer;
}
.apay-cat-chip:active { opacity: 0.7; }
.apay-cat-chip.active { background: #1976d2; color: #fff; border-color: #1976d2; }
.apay-filter-summary { color: rgba(var(--sp-text-rgb),0.55); font-size: 12px; margin: 0 2px 8px; }
.apay-btn {
  background: #1976d2; color: #fff; border: none; border-radius: 9px;
  padding: 8px 14px; font-size: 13px; font-family: inherit; cursor: pointer; flex-shrink: 0;
}
.apay-btn:active { opacity: 0.75; }
.apay-btn-block { width: 100%; padding: 10px 0; margin-top: 4px; }
.apay-btn-on { background: #43a047; }
.apay-btn-del { background: rgba(211,47,47,0.12); color: #c62828; }
.apay-fc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.apay-fc-name { color: var(--sp-text); font-size: 14px; display: flex; align-items: center; gap: 6px; }

/* ── 日记 ── */
.cp-diary {
  background: rgba(255,255,255,0.65);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.1);
  box-shadow: 0 2px 10px rgba(93,64,55,0.05);
  position: relative;
}
.cp-diary-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cp-diary-date { color: var(--sp-text); font-size: 16px; font-weight: 700; }
.cp-diary-meta { color: #f57c00; font-size: 12px; background: rgba(var(--sp-accent-rgb),0.1); padding: 2px 8px; border-radius: 8px; }
.cp-diary-text { color: rgba(var(--sp-text-rgb),0.85); font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; }
.cp-diary-img { margin-top: 12px; border-radius: 10px; overflow: hidden; }
.cp-diary-img img { width: 100%; display: block; }
.cp-diary-del {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; cursor: pointer;
  color: rgba(var(--sp-text-rgb),0.35); font-size: 18px; line-height: 1;
}

/* ── 大图查看 ── */
.cp-viewer {
  position: absolute; inset: 0; z-index: 4000;
  background: rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.cp-viewer.visible { opacity: 1; pointer-events: auto; }
.cp-viewer img { max-width: 94%; max-height: 86%; border-radius: 8px; }

/* ── 外观页 ── */
.cp-look-app {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: rgba(255,255,255,0.55);
  border-radius: 12px; margin-bottom: 8px;
  border: 1px solid rgba(var(--sp-accent-rgb),0.08);
}
.cp-look-app img { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; flex-shrink: 0; }
.cp-look-app-name { flex: 1; color: var(--sp-text); font-size: 14px; font-weight: 500; }
.cp-look-edit { display: none; padding: 4px 2px 10px; }
.cp-look-edit.open { display: block; }

/* ── QQ 操作工具条 ── */
.cp-qq-toolbar {
  position: sticky; top: 0; z-index: 3;
  display: flex; gap: 8px; padding: 10px 14px;
  background: rgba(255,248,225,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.14);
}
.cp-act-clear { color: #b0654f; background: rgba(176,101,79,0.1); border-color: rgba(176,101,79,0.25); }
.cp-act-clear:active { background: rgba(176,101,79,0.22); }

/* ── 备忘录双排网格 ── */
.cp-memo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cp-memo-card {
  position: relative; cursor: pointer;
  background: linear-gradient(160deg, #fff8e1, #fff3e0);
  border: 1px solid rgba(var(--sp-accent-rgb),0.2);
  border-radius: 12px; padding: 11px 12px;
  box-shadow: 0 2px 8px rgba(93,64,55,0.06);
  min-height: 92px; overflow: hidden;
}
.cp-memo-card:active { transform: scale(0.98); }
.cp-memo-card.pinned { border-color: rgba(245,124,0,0.45); }
.cp-memo-pin { position: absolute; top: 8px; right: 10px; font-size: 11px; }
.cp-memo-card-title { color: var(--sp-text); font-size: 13.5px; font-weight: 700; margin-bottom: 5px; padding-right: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-memo-card-body {
  color: rgba(var(--sp-text-rgb),0.78); font-size: 12px; line-height: 1.5; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.cp-memo-card-time { color: rgba(var(--sp-text-rgb),0.4); font-size: 10.5px; margin-top: 8px; }
.cp-memo-full-title { color: var(--sp-text); font-size: 17px; font-weight: 700; }
.cp-memo-full-time { color: rgba(var(--sp-text-rgb),0.45); font-size: 12px; margin-top: 4px; }
.cp-memo-full-body { color: rgba(var(--sp-text-rgb),0.85); font-size: 14px; line-height: 1.7; white-space: pre-wrap; margin-top: 12px; }

/* ── 浏览器网页式详情 ── */
.cp-webpage { background: #fff; border-radius: 12px; overflow: hidden; }
.cp-webpage-bar {
  display: flex; align-items: center; gap: 6px;
  background: #f1f1f1; padding: 8px 12px;
  font-size: 12px; color: #555;
}
.cp-webpage-lock { font-size: 10px; opacity: 0.6; }
.cp-webpage-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-webpage-doc { padding: 16px 16px 20px; }
.cp-webpage-title { color: #1a0dab; font-size: 18px; font-weight: 700; line-height: 1.35; }
.cp-webpage-sub { color: #006621; font-size: 12px; margin-top: 4px; }
.cp-webpage-content { color: #3c4043; font-size: 14px; line-height: 1.75; margin-top: 14px; white-space: pre-wrap; }

/* ── 底部弹层 ── */
.cp-sheet-mask {
  position: absolute; inset: 0; z-index: 3500;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: flex-end;
  opacity: 0; transition: opacity 0.25s;
}
.cp-sheet-mask.visible { opacity: 1; }
.cp-sheet {
  width: 100%; max-height: 78%;
  background: #fff8f0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
  transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cp-sheet-mask.visible .cp-sheet { transform: translateY(0); }
.cp-sheet-title {
  text-align: center; color: var(--sp-text); font-size: 14.5px; font-weight: 700;
  padding: 14px 16px 12px; border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.14); flex-shrink: 0;
}
.cp-sheet-body { padding: 14px 16px 22px; overflow-y: auto; }
.cp-sheet-empty { text-align: center; color: rgba(var(--sp-text-rgb),0.5); font-size: 13px; padding: 30px 10px; }
.cp-sheet-list { display: flex; flex-direction: column; gap: 4px; }
.cp-sheet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; border-radius: 12px; cursor: pointer;
}
.cp-sheet-item:active { background: rgba(var(--sp-accent-rgb),0.14); }
.cp-sheet-item-name { color: var(--sp-text); font-size: 14.5px; font-weight: 500; }
.cp-sheet-check { cursor: pointer; }
.cp-sheet-cb { width: 18px; height: 18px; accent-color: #c78f6a; flex-shrink: 0; }
.cp-sheet-confirm { margin-top: 16px; width: 100%; }

/* ── 页面内居中模态框（备忘录 / 浏览器详情） ── */
.cp-modal-mask {
  position: absolute; inset: 0; z-index: 3600;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 26px 16px;
  opacity: 0; transition: opacity 0.22s;
}
.cp-modal-mask.visible { opacity: 1; }
.cp-modal {
  width: 100%; max-width: 360px; max-height: 100%;
  background: #fff8f0; border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(14px) scale(0.97); transition: transform 0.24s cubic-bezier(0.22,1,0.36,1);
}
.cp-modal-mask.visible .cp-modal { transform: translateY(0) scale(1); }
.cp-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 10px 12px 16px; border-bottom: 1px solid rgba(var(--sp-accent-rgb),0.16); flex-shrink: 0;
}
.cp-modal-title { color: var(--sp-text); font-size: 14.5px; font-weight: 700; }
.cp-modal-close {
  border: none; background: transparent; color: rgba(var(--sp-text-rgb),0.55);
  font-size: 22px; line-height: 1; width: 34px; height: 34px; cursor: pointer; border-radius: 50%;
}
.cp-modal-close:active { background: rgba(var(--sp-accent-rgb),0.16); }
.cp-modal-body { padding: 16px; overflow-y: auto; }

/* ── 联系人（好友管理） ── */
.cp-friend-form-tip { text-align: center; color: rgba(var(--sp-text-rgb),0.45); font-size: 12px; margin-top: 12px; }
.cp-friend-list { display: flex; flex-direction: column; gap: 8px; }
.cp-friend-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; background: rgba(255,255,255,0.6);
  border-radius: 12px; border: 1px solid rgba(var(--sp-accent-rgb),0.08);
  cursor: pointer;
}
.cp-friend-item:active { background: rgba(var(--sp-accent-rgb),0.12); }
.cp-friend-info { flex: 1; min-width: 0; }
.cp-friend-name { color: var(--sp-text); font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.cp-friend-sync { font-size: 10px; color: #4e8c79; background: rgba(106,173,158,0.18); padding: 1px 6px; border-radius: 6px; font-weight: 600; }
.cp-friend-sub { color: rgba(var(--sp-text-rgb),0.55); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-friend-rel { font-size: 10px; color: #f57c00; background: rgba(var(--sp-accent-rgb),0.12); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.cp-qq-sync { color: #4e8c79 !important; background: rgba(106,173,158,0.18) !important; }

/* 好友编辑表单（底部弹层内） */
.cp-friend-form { display: flex; flex-direction: column; }
.cp-friend-form-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cp-friend-form-name { color: var(--sp-text); font-size: 16px; font-weight: 700; }
.cp-friend-form-tag { color: #4e8c79; font-size: 11.5px; margin-top: 3px; }
.cp-friend-form-persona {
  background: rgba(255,255,255,0.6); border: 1px solid rgba(var(--sp-accent-rgb),0.12);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 4px;
  color: rgba(var(--sp-text-rgb),0.78); font-size: 12.5px; line-height: 1.55;
}
.cp-friend-textarea { resize: vertical; line-height: 1.5; }
.cp-friend-form-actions { display: flex; gap: 10px; margin-top: 18px; }
.cp-friend-save-btn {
  flex: 1; border: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: #fff; padding: 11px 0; border-radius: 999px;
  background: linear-gradient(135deg, #ffb300, #f57c00);
  box-shadow: 0 4px 14px rgba(245,124,0,0.28);
}
.cp-friend-save-btn:active { opacity: 0.88; }
.cp-friend-del-btn {
  border: 1px solid rgba(176,101,79,0.3); cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: #b0654f; padding: 11px 22px; border-radius: 999px;
  background: rgba(176,101,79,0.08);
}
.cp-friend-del-btn:active { background: rgba(176,101,79,0.2); }

/* ════════ QQ 表情包 ════════ */
/* 聊天气泡内的表情 */
.qq-bubble-sticker {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
.qq-sticker-msg { line-height: 0; }
.qq-sticker-img {
  max-width: 110px;
  max-height: 110px;
  border-radius: 8px;
  cursor: pointer;
  object-fit: contain;
}
.qq-sticker-fallback {
  font-size: 13px;
  color: rgba(var(--sp-text-rgb),0.6);
}

/* 底部表情面板 */
.qq-sticker-panel {
  flex-shrink: 0;
  background: var(--sp-header-bg); /* 跟随主题色 */
  border-top: 1px solid rgba(93,64,55,0.06);
  display: flex;
  flex-direction: column;
}
.qq-sticker-grid {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  grid-auto-rows: 82px;
  gap: 8px;
  padding: 12px 12px;
  /* 刚好两行：2 行 + 1 个间隙 + 上下内边距 */
  height: calc(82px * 2 + 8px + 24px);
}
/* 底部分组栏 */
.qq-sticker-tabs-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 9px;
  border-top: 1px solid rgba(93,64,55,0.06);
}
.qq-sticker-add-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(var(--sp-accent-rgb),0.12);
  color: var(--sp-accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.qq-sticker-add-btn:active { background: rgba(var(--sp-accent-rgb),0.22); }
.qq-sticker-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.qq-sticker-tabs::-webkit-scrollbar { display: none; }
.qq-sticker-tab {
  flex: 0 0 auto;
  border: none;
  background: rgba(93,64,55,0.06);
  color: rgba(var(--sp-text-rgb),0.6);
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.qq-sticker-tab.active {
  background: rgba(var(--sp-accent-rgb),0.14);
  color: var(--sp-accent-2);
  font-weight: 600;
}
.qq-sticker-cell {
  background: rgba(93,64,55,0.04);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.qq-sticker-cell:active { background: rgba(var(--sp-accent-rgb),0.12); }
.qq-sticker-cell img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: contain;
}
.qq-sticker-cell-name {
  flex: 0 0 auto;
  max-width: 100%;
  font-size: 10px;
  line-height: 1.2;
  color: rgba(var(--sp-text-rgb),0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 名称重复高亮 */
.qq-sticker-cell.qq-sticker-dup {
  background: rgba(229,57,53,0.10);
  box-shadow: inset 0 0 0 1.5px rgba(229,57,53,0.55);
}
.qq-sticker-cell.qq-sticker-dup .qq-sticker-cell-name {
  color: #e53935;
  font-weight: 600;
}
/* 多选 */
.qq-sticker-cell { position: relative; }
.qq-sticker-cell.qq-sticker-selected {
  box-shadow: inset 0 0 0 2px var(--sp-accent-2);
  background: rgba(var(--sp-accent-rgb),0.14);
}
.qq-sticker-check {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(120,90,70,0.45);
  background: rgba(255,255,255,0.85);
  z-index: 2;
}
.qq-sticker-cell.qq-sticker-selected .qq-sticker-check {
  border-color: var(--sp-accent-2);
  background: var(--sp-accent-2);
}
.qq-sticker-cell.qq-sticker-selected .qq-sticker-check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* 多选工具栏 */
.qq-sticker-seltoolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(93,64,55,0.08);
  background: rgba(255,248,235,0.9);
}
.qq-sticker-selcount {
  flex: 1;
  font-size: 13px;
  color: rgba(var(--sp-text-rgb),0.7);
}
.qq-sticker-selbtn {
  flex: 0 0 auto;
  border: none;
  background: rgba(93,64,55,0.08);
  color: rgba(var(--sp-text-rgb),0.8);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.qq-sticker-selbtn:active { background: rgba(93,64,55,0.16); }
.qq-sticker-selbtn-danger {
  background: rgba(229,57,53,0.12);
  color: #e53935;
}
.qq-sticker-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12.5px;
  color: rgba(var(--sp-text-rgb),0.4);
  padding: 26px 12px;
}

/* 管理弹窗 */
.qq-sticker-mgr-mask {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.qq-sticker-mgr-mask.visible { opacity: 1; }
.qq-sticker-mgr {
  width: 100%;
  max-width: 420px;
  max-height: 78vh;
  background: #FBF6EA;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.24s cubic-bezier(0.22,0.61,0.36,1);
}
.qq-sticker-mgr-mask.visible .qq-sticker-mgr { transform: translateY(0); }
.qq-sticker-mgr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}
.qq-sticker-mgr-title { font-size: 15px; font-weight: 700; color: var(--sp-text); }
.qq-sticker-mgr-close {
  border: none;
  background: transparent;
  color: var(--sp-accent-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.qq-sticker-mgr-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 8px;
}
.qq-sticker-pill {
  border: none;
  background: rgba(93,64,55,0.06);
  color: rgba(var(--sp-text-rgb),0.65);
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.qq-sticker-pill em {
  font-style: normal;
  opacity: 0.55;
  font-size: 10px;
}
.qq-sticker-pill.active {
  background: rgba(var(--sp-accent-rgb),0.14);
  color: var(--sp-accent-2);
  font-weight: 600;
}
.qq-sticker-pill-add { color: var(--sp-accent-2); background: rgba(var(--sp-accent-rgb),0.08); }
.qq-sticker-mgr-grouptools,
.qq-sticker-mgr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 16px 8px;
}
.qq-sticker-mgr-actions {
  border-top: 1px solid rgba(93,64,55,0.06);
  padding-top: 10px;
  margin-top: 2px;
}
.qq-sticker-mini-btn {
  border: 1px solid rgba(93,64,55,0.12);
  background: #fff;
  color: rgba(var(--sp-text-rgb),0.75);
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.qq-sticker-mini-btn:active { background: rgba(var(--sp-accent-rgb),0.08); }
.qq-sticker-mini-danger { color: #d9544f; border-color: rgba(217,84,79,0.3); }
.qq-sticker-mgr-list {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px;
  padding: 10px 16px 20px;
}
.qq-sticker-mgr-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.qq-sticker-mgr-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: rgba(93,64,55,0.04);
  border-radius: 8px;
}
.qq-sticker-mgr-name {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.6);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qq-sticker-mgr-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(217,84,79,0.92);
  color: #fff;
  font-size: 15px;
  line-height: 18px;
  cursor: pointer;
}

/* 底部动作表（+ 添加 / 长按分组管理） */
.qq-sticker-sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.qq-sticker-sheet-mask.visible { opacity: 1; }
.qq-sticker-sheet {
  width: 100%;
  max-width: 420px;
  padding: 8px;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.24s cubic-bezier(0.22,0.61,0.36,1);
}
.qq-sticker-sheet-mask.visible .qq-sticker-sheet { transform: translateY(0); }
.qq-sticker-sheet-item,
.qq-sticker-sheet-cancel {
  width: 100%;
  border: none;
  background: #FBF6EA;
  color: var(--sp-text);
  font-size: 15px;
  padding: 14px;
  cursor: pointer;
}
.qq-sticker-sheet-item { border-bottom: 1px solid rgba(93,64,55,0.07); }
.qq-sticker-sheet-item:first-child { border-radius: 12px 12px 0 0; }
.qq-sticker-sheet-item:last-of-type { border-radius: 0 0 12px 12px; border-bottom: none; }
.qq-sticker-sheet-item:active { background: rgba(var(--sp-accent-rgb),0.08); }
.qq-sticker-sheet-danger { color: #d9544f; }
.qq-sticker-sheet-cancel {
  margin-top: 8px;
  border-radius: 12px;
  font-weight: 600;
  color: rgba(var(--sp-text-rgb),0.7);
}

/* 表情输入小弹窗 */
.qq-sticker-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s;
}
.qq-sticker-dialog-mask.visible { opacity: 1; }
.qq-sticker-dialog {
  width: 86%;
  max-width: 330px;
  background: #FBF6EA;
  border-radius: 14px;
  padding: 18px 16px 14px;
  transform: scale(0.94);
  transition: transform 0.18s;
}
.qq-sticker-dialog-mask.visible .qq-sticker-dialog { transform: scale(1); }
.qq-sticker-dialog-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-text);
  text-align: center;
  margin-bottom: 12px;
}
.qq-sticker-dialog-label {
  font-size: 12px;
  color: rgba(var(--sp-text-rgb),0.55);
  margin: 8px 2px 4px;
}
.qq-sticker-dialog-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(93,64,55,0.15);
  background: #fff;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13.5px;
  color: var(--sp-text);
  resize: vertical;
  font-family: inherit;
}
.qq-sticker-dialog-input:focus { outline: none; border-color: var(--sp-accent-2); }
.qq-sticker-dialog-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.qq-sticker-dialog-btn {
  flex: 1;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.qq-sticker-dialog-cancel { background: rgba(93,64,55,0.08); color: rgba(var(--sp-text-rgb),0.6); }
.qq-sticker-dialog-ok { background: var(--sp-accent-2); color: #fff; }

/* ================================================================
 *  深色模式  (#screen.sp-dark)
 *  - 根变量提供"中性深色基线"；当设置了主题色时，appearance.js 会内联
 *    覆盖强调色/背景变量（强调色提亮、背景带主题色相的深色）。
 *  - 大量子应用已用 var(--sp-*)，改根变量即自动深色；其余硬编码白底/
 *    深棕文字在此逐项兜底。
 *  - 壁纸与锁屏：不做深色处理，保持用户所设原图。
 * ================================================================ */

/* ── 根变量（无主题色时的深色基线） ── */
#screen.sp-dark {
  --sp-page-top: #15171c;
  --sp-page-bottom: #0e0f13;
  --sp-page-bg: linear-gradient(180deg, var(--sp-page-top) 0%, var(--sp-page-bottom) 100%);
  --sp-header-bg: rgba(26,28,34,0.96);
  --sp-surface: rgba(255,255,255,0.055);
  --sp-input-bg: #23262e;
  --sp-border: rgba(255,255,255,0.10);
  --sp-text: #ECE3D8;
  --sp-text-rgb: 236,227,216;
  --sp-text-soft: #a99f95;
  --sp-accent: #FFB74D;
  --sp-accent-2: #FFCC80;
  --sp-accent-rgb: 255,183,77;
  --sp-accent-soft: rgba(255,183,77,0.18);
  color: var(--sp-text);
}

/* ── 无壁纸主屏背景 + 隐藏向日葵装饰 ── */
#screen.sp-dark:not(.ap-has-wallpaper) {
  background:
    radial-gradient(ellipse at 25% 15%, rgba(var(--sp-accent-rgb),0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(255,255,255,0.04) 0%, transparent 50%),
    linear-gradient(168deg, #16181d 0%, #121419 55%, #0d0e12 100%) !important;
}
#screen.sp-dark::after { display: none !important; }
#screen.sp-dark:not(.ap-has-wallpaper)::before { display: none !important; }

/* ── 系统 UI：状态栏 / 应用名 / Dock / 指示点 ── */
#screen.sp-dark .status-bar { color: var(--sp-text); }
#screen.sp-dark .status-icons svg { fill: var(--sp-text); }
#screen.sp-dark .battery-shell { border-color: var(--sp-text); }
#screen.sp-dark .battery-shell::after { background: var(--sp-text); }
/* 主页 app 名称不跟随深色模式，保留原有文字色与阴影 */
/* 主页底部 Dock 不跟随深色模式，保持原浅色外观 */
#screen.sp-dark .dot { background: rgba(255,255,255,0.22); }
#screen.sp-dark .home-bar { background: rgba(255,255,255,0.28); }
#screen.sp-dark .edit-tb-btn {
  background: rgba(40,44,52,0.92);
  border-color: rgba(255,255,255,0.14);
  color: var(--sp-text);
}

/* ── 通用：弹窗遮罩稍微加深 ── */
#screen.sp-dark .modal-overlay,
#screen.sp-dark .stg-confirm-mask,
#screen.sp-dark .qq-profile-modal-mask,
#screen.sp-dark .qq-rp-open-mask,
#screen.sp-dark .qq-rp-send-mask,
#screen.sp-dark .qq-rp-detail-mask,
#screen.sp-dark .qq-poll-create-mask { background: rgba(0,0,0,0.55); }

/* ── 半透明卡片/列表/菜单：统一改为深色表层 ── */
#screen.sp-dark .preset-item,
#screen.sp-dark .stg-group,
#screen.sp-dark .stg-model-dropdown.show,
#screen.sp-dark .ct-list-item,
#screen.sp-dark .ct-action-menu,
#screen.sp-dark .ct-form-avatar,
#screen.sp-dark .qq-chat-item,
#screen.sp-dark .qq-space-post,
#screen.sp-dark .qq-me-card,
#screen.sp-dark .qq-card-item,
#screen.sp-dark .qq-poll-card,
#screen.sp-dark .qq-grouppay-card,
#screen.sp-dark .qq-wb-cat-section,
#screen.sp-dark .qq-wb-sel-cat,
#screen.sp-dark .qq-mem-filter-btn,
#screen.sp-dark .wgt-exist-card,
#screen.sp-dark .wgt-preview-card,
#screen.sp-dark .wgt-placeholder,
#screen.sp-dark .studio-menu-item,
#screen.sp-dark .studio-list-item,
#screen.sp-dark .studio-role-item,
#screen.sp-dark .studio-editor-card,
#screen.sp-dark .studio-stg-card,
#screen.sp-dark .studio-wb-dropdown,
#screen.sp-dark .studio-fav-msg,
#screen.sp-dark .studio-choice-btn,
#screen.sp-dark .ftf-home-card,
#screen.sp-dark .ftf-rec-card,
#screen.sp-dark .gh-game-card,
#screen.sp-dark .gh-ww-mode-card,
#screen.sp-dark .gh-ww-contact-item,
#screen.sp-dark .gh-ww-action-btn,
#screen.sp-dark .cp-qq-chat,
#screen.sp-dark .cp-moment,
#screen.sp-dark .cp-photo,
#screen.sp-dark .cp-hist,
#screen.sp-dark .cp-diary,
#screen.sp-dark .cp-look-app,
#screen.sp-dark .cp-friend-item,
#screen.sp-dark .cp-friend-form-persona,
#screen.sp-dark .apay-quick-btn,
#screen.sp-dark .apay-cat-chip {
  background: var(--sp-surface);
  border-color: var(--sp-border);
}
#screen.sp-dark .qq-chat-item {
  border-bottom-color: rgba(255,255,255,0.06);
  border-radius: 0;
}

/* ── 实心白底面板/对话框/底部弹层 ── */
#screen.sp-dark .modal-card,
#screen.sp-dark .stg-confirm-box,
#screen.sp-dark .stg-toast,
#screen.sp-dark .acc-panel,
#screen.sp-dark .qq-msg-sheet,
#screen.sp-dark .qq-multiselect-bar,
#screen.sp-dark .qq-forward-card,
#screen.sp-dark .qq-forward-viewer,
#screen.sp-dark .qq-profile-modal-card,
#screen.sp-dark .qq-space-share-box,
#screen.sp-dark .qq-space-ctx-menu,
#screen.sp-dark .qq-img-sheet,
#screen.sp-dark .qq-img-gen-box,
#screen.sp-dark .qq-rp-claims,
#screen.sp-dark .qq-rp-detail-dialog,
#screen.sp-dark .qq-rp-send-dialog,
#screen.sp-dark .qq-rp-send-header,
#screen.sp-dark .qq-poll-create-dialog,
#screen.sp-dark .qq-poll-create-header,
#screen.sp-dark .qq-gp-create-header,
#screen.sp-dark .qq-notify-inner,
#screen.sp-dark .qq-shared-drop-trigger,
#screen.sp-dark .qq-shared-drop-panel,
#screen.sp-dark .qq-sticker-dialog-input,
#screen.sp-dark .ap-cp-card,
#screen.sp-dark .cal-popup,
#screen.sp-dark .cal-ms-bar,
#screen.sp-dark .cp-sheet,
#screen.sp-dark .cp-modal,
#screen.sp-dark .cp-webpage {
  background: #24272f;
  border-color: var(--sp-border);
}
#screen.sp-dark .qq-rp-send-header,
#screen.sp-dark .qq-poll-create-header,
#screen.sp-dark .qq-gp-create-header { color: var(--sp-text); }
/* 消息通知弹窗：文字改浅色 */
#screen.sp-dark .qq-notify-name { color: var(--sp-text); }
#screen.sp-dark .qq-notify-text { color: var(--sp-text-soft); }
#screen.sp-dark .qq-notify-inner:active { background: #2c2f37; }
#screen.sp-dark .qq-rp-detail-header,
#screen.sp-dark .qq-poll-detail-header,
#screen.sp-dark .qq-gp-detail-header { background: rgba(255,255,255,0.04); }
#screen.sp-dark .cp-webpage-bar { background: #2c2f37; color: var(--sp-text-soft); }

/* ── 输入框统一深色 ── */
#screen.sp-dark .stg-input,
#screen.sp-dark .modal-input,
#screen.sp-dark .stg-key-toggle,
#screen.sp-dark .stg-preset-btn,
#screen.sp-dark .qq-msg-input,
#screen.sp-dark .qq-space-comment-input,
#screen.sp-dark .qq-img-gen-textarea,
#screen.sp-dark .stg-prompt-input,
#screen.sp-dark .stg-choice-btn,
#screen.sp-dark .studio-play-input,
#screen.sp-dark .acc-form-input,
#screen.sp-dark .gh-ww-input,
#screen.sp-dark .qq-shared-drop-trigger,
#screen.sp-dark .qq-wb-item-btn,
#screen.sp-dark .cal-add-input,
#screen.sp-dark .cal-add-sel,
#screen.sp-dark .ap-preset-btn,
#screen.sp-dark .ap-cp-hex input,
#screen.sp-dark .qq-bubble-preset-btn {
  background: var(--sp-input-bg);
  border-color: var(--sp-border);
  color: var(--sp-text);
}
#screen.sp-dark .stg-input:focus,
#screen.sp-dark .qq-msg-input:focus,
#screen.sp-dark .qq-img-gen-textarea:focus,
#screen.sp-dark .qq-space-comment-input:focus {
  background: rgba(255,255,255,0.08);
  border-color: rgba(var(--sp-accent-rgb),0.5);
}

/* ── 主文字（强调）→ 浅色 ── */
#screen.sp-dark .settings-title,
#screen.sp-dark .modal-title,
#screen.sp-dark .stg-action-btn,
#screen.sp-dark .stg-confirm-msg,
#screen.sp-dark .stg-confirm-title,
#screen.sp-dark .stg-model-opt,
#screen.sp-dark .preset-item-name,
#screen.sp-dark .ct-header-title,
#screen.sp-dark .ct-action-item,
#screen.sp-dark .ct-empty-text,
#screen.sp-dark .ct-list-name,
#screen.sp-dark .ct-detail-name,
#screen.sp-dark .ct-info-label,
#screen.sp-dark .qq-chat-name,
#screen.sp-dark .qq-me-name,
#screen.sp-dark .qq-me-menu-item,
#screen.sp-dark .qq-member-name,
#screen.sp-dark .qq-space-banner-name,
#screen.sp-dark .qq-msg-sheet-btn,
#screen.sp-dark .qq-forward-card-title,
#screen.sp-dark .qq-forward-viewer-head,
#screen.sp-dark .qq-forward-viewer-text,
#screen.sp-dark .qq-forward-target-name,
#screen.sp-dark .qq-profile-modal-name,
#screen.sp-dark .qq-card-content,
#screen.sp-dark .qq-space-post-content,
#screen.sp-dark .qq-space-comment-text,
#screen.sp-dark .qq-wb-cat-name,
#screen.sp-dark .qq-wb-item-name,
#screen.sp-dark .qq-wb-sel-cat-name,
#screen.sp-dark .qq-wb-sel-name,
#screen.sp-dark .qq-me-wb-text,
#screen.sp-dark .qq-shared-chat-name,
#screen.sp-dark .qq-gi-member-name,
#screen.sp-dark .qq-rp-claim-name,
#screen.sp-dark .qq-rp-detail-claim-name,
#screen.sp-dark .qq-poll-opt-text,
#screen.sp-dark .qq-poll-detail-opt-name,
#screen.sp-dark .qq-gp-detail-name,
#screen.sp-dark .qq-gp-detail-amount,
#screen.sp-dark .qq-bubble-preset-name,
#screen.sp-dark .qq-vclog-text,
#screen.sp-dark .qq-call-type-btn span,
#screen.sp-dark .wgt-sel-title,
#screen.sp-dark .wgt-section-title,
#screen.sp-dark .wgt-exist-name,
#screen.sp-dark .wgt-cat-name,
#screen.sp-dark .studio-hero-title,
#screen.sp-dark .studio-menu-label,
#screen.sp-dark .studio-item-title,
#screen.sp-dark .studio-role-header,
#screen.sp-dark .studio-role-check,
#screen.sp-dark .studio-editor-field-label,
#screen.sp-dark .studio-color-label,
#screen.sp-dark .studio-modal-header,
#screen.sp-dark .studio-modal-body p,
#screen.sp-dark .studio-msg-content,
#screen.sp-dark .studio-fav-text,
#screen.sp-dark .studio-fav-overlay-title,
#screen.sp-dark .acc-header-title,
#screen.sp-dark .acc-profile-name,
#screen.sp-dark .acc-form-title,
#screen.sp-dark .ct-select-name,
#screen.sp-dark .cal-month-title,
#screen.sp-dark .cal-day-num,
#screen.sp-dark .cal-today-title,
#screen.sp-dark .cal-today-card-name,
#screen.sp-dark .cal-today-item-text,
#screen.sp-dark .cal-popup-name,
#screen.sp-dark .cal-popup-content,
#screen.sp-dark .cal-set-char-name,
#screen.sp-dark .cp-chat-title,
#screen.sp-dark .cp-qq-chat-name,
#screen.sp-dark .cp-moment-text,
#screen.sp-dark .cp-note-title,
#screen.sp-dark .cp-memo-card-title,
#screen.sp-dark .cp-memo-full-title,
#screen.sp-dark .cp-hist-title,
#screen.sp-dark .cp-bill-merchant,
#screen.sp-dark .cp-diary-date,
#screen.sp-dark .cp-friend-name,
#screen.sp-dark .cp-friend-form-name,
#screen.sp-dark .cp-sheet-title,
#screen.sp-dark .cp-sheet-item-name,
#screen.sp-dark .cp-modal-title,
#screen.sp-dark .cp-look-app-name,
#screen.sp-dark .apay-bill-title,
#screen.sp-dark .apay-cat-chip,
#screen.sp-dark .apay-fc-name,
#screen.sp-dark .qq-voice-text-content {
  color: var(--sp-text);
}

/* ── 次要/弱化文字 → 柔和浅色 ── */
#screen.sp-dark .stg-sec-title,
#screen.sp-dark .stg-sec-icon,
#screen.sp-dark .stg-label,
#screen.sp-dark .stg-hint,
#screen.sp-dark .stg-act-icon svg,
#screen.sp-dark .stg-params-toggle,
#screen.sp-dark .ct-list-chevron,
#screen.sp-dark .ct-detail-presence,
#screen.sp-dark .ct-detail-text,
#screen.sp-dark .ct-info-value,
#screen.sp-dark .ct-empty-hint,
#screen.sp-dark .ct-form-avatar-hint,
#screen.sp-dark .qq-chat-time,
#screen.sp-dark .qq-chat-preview,
#screen.sp-dark .qq-me-sig,
#screen.sp-dark .qq-search-bar,
#screen.sp-dark .qq-space-post-time,
#screen.sp-dark .qq-space-comment-author,
#screen.sp-dark .qq-bubble-name,
#screen.sp-dark .qq-msg-time,
#screen.sp-dark .qq-card-date,
#screen.sp-dark .qq-card-time,
#screen.sp-dark .qq-forward-card-preview,
#screen.sp-dark .qq-forward-card-footer,
#screen.sp-dark .qq-forward-viewer-time,
#screen.sp-dark .qq-forward-target-tag,
#screen.sp-dark .qq-quote-ref-text,
#screen.sp-dark .qq-quote-preview-text,
#screen.sp-dark .qq-wb-item-preview,
#screen.sp-dark .qq-wb-cat-count,
#screen.sp-dark .qq-mem-source,
#screen.sp-dark .qq-time-separator span,
#screen.sp-dark .qq-narration-content,
#screen.sp-dark .qq-voice-dur,
#screen.sp-dark .qq-rp-detail-title,
#screen.sp-dark .qq-poll-meta,
#screen.sp-dark .qq-poll-opt-count,
#screen.sp-dark .qq-bubble-preset-time,
#screen.sp-dark .qq-vclog-name,
#screen.sp-dark .acc-account-name,
#screen.sp-dark .acc-form-label,
#screen.sp-dark .wgt-exist-size,
#screen.sp-dark .studio-hero-subtitle,
#screen.sp-dark .studio-menu-desc,
#screen.sp-dark .studio-item-desc,
#screen.sp-dark .studio-item-meta,
#screen.sp-dark .studio-role-desc,
#screen.sp-dark .studio-role-label,
#screen.sp-dark .studio-char-name,
#screen.sp-dark .studio-fav-name,
#screen.sp-dark .studio-stg-card-title,
#screen.sp-dark .cal-weekday,
#screen.sp-dark .cal-today-item-time,
#screen.sp-dark .cal-popup-time,
#screen.sp-dark .cal-add-label,
#screen.sp-dark .cal-empty-hint,
#screen.sp-dark .cp-qq-chat-time,
#screen.sp-dark .cp-qq-chat-preview,
#screen.sp-dark .cp-moment-time,
#screen.sp-dark .cp-note-body,
#screen.sp-dark .cp-note-time,
#screen.sp-dark .cp-memo-card-body,
#screen.sp-dark .cp-memo-card-time,
#screen.sp-dark .cp-memo-full-time,
#screen.sp-dark .cp-memo-full-body,
#screen.sp-dark .cp-hist-sub,
#screen.sp-dark .cp-hist-time,
#screen.sp-dark .cp-diary-text,
#screen.sp-dark .cp-bill-detail,
#screen.sp-dark .cp-friend-sub,
#screen.sp-dark .cp-chat-note,
#screen.sp-dark .cp-sec-title,
#screen.sp-dark .cp-empty,
#screen.sp-dark .cp-pick-hint,
#screen.sp-dark .apay-section-title,
#screen.sp-dark .apay-bill-sub,
#screen.sp-dark .apay-filter-summary {
  color: var(--sp-text-soft);
}
#screen.sp-dark .stg-sec-icon svg,
#screen.sp-dark .ct-list-chevron,
#screen.sp-dark .qq-search-bar svg,
#screen.sp-dark .qq-me-menu-icon svg { fill: var(--sp-text-soft); }
#screen.sp-dark .stg-sec-icon,
#screen.sp-dark .qq-me-menu-icon { background: rgba(255,255,255,0.08); }

/* ── 分隔线统一 ── */
#screen.sp-dark .stg-item-border,
#screen.sp-dark .stg-action-btn:not(:last-child),
#screen.sp-dark .ct-action-item:not(:last-child),
#screen.sp-dark .qq-chat-item,
#screen.sp-dark .qq-me-menu-item + .qq-me-menu-item,
#screen.sp-dark .qq-space-post-actions,
#screen.sp-dark .settings-header,
#screen.sp-dark .ct-header { border-color: rgba(255,255,255,0.08); }

/* ── 状态栏/标签栏/输入栏（QQ 聊天） ── */
#screen.sp-dark .qq-tabbar { background: rgba(26,28,34,0.92); }
#screen.sp-dark .qq-tab { color: var(--sp-text-soft); }
/* 聊天背景与输入栏跟随主题色（透明/var），仅补深色描边 */
#screen.sp-dark .qq-input-bar { border-top-color: rgba(255,255,255,0.06); }
#screen.sp-dark .qq-quote-preview { background: #1b1e24; border-top-color: rgba(255,255,255,0.06); }
/* 更多面板/表情面板背景跟随 var(--sp-header-bg)，仅补深色描边 */
#screen.sp-dark .qq-more-panel,
#screen.sp-dark .qq-sticker-panel { border-top-color: rgba(255,255,255,0.06); }
#screen.sp-dark .qq-input-icon-btn,
#screen.sp-dark .qq-more-icon,
#screen.sp-dark .qq-sticker-cell,
#screen.sp-dark .qq-sticker-tab { background: rgba(255,255,255,0.06); color: var(--sp-text-soft); }
#screen.sp-dark .qq-input-icon-btn svg,
#screen.sp-dark .qq-more-icon svg { fill: var(--sp-text-soft); }
#screen.sp-dark .qq-more-item span,
#screen.sp-dark .qq-sticker-cell-name { color: var(--sp-text-soft); }
#screen.sp-dark .qq-voice-hold-btn { background: var(--sp-input-bg); color: var(--sp-text); }

/* ── QQ 聊天气泡 ── */
#screen.sp-dark .qq-bubble-other,
#screen.sp-dark .qq-bubble-preview-other,
#screen.sp-dark .qq-bubble-other .qq-voice-bubble {
  background: #2a2f37;
  color: #ECE3D8;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
#screen.sp-dark .qq-bubble-voice-wrap { background: transparent !important; }
#screen.sp-dark .qq-voice-icon { color: rgba(236,227,216,0.6); }
#screen.sp-dark .qq-voice-bars span { background: rgba(236,227,216,0.4); }
#screen.sp-dark .qq-voice-text-area { background: rgba(255,255,255,0.08); }
#screen.sp-dark .qq-quote-ref { background: rgba(255,255,255,0.06); }
/* "我方"气泡保留微信绿，深色字仍可读，不改 */

/* ── 转发查看/收藏关闭按钮等小控件 ── */
#screen.sp-dark .qq-forward-viewer-close button,
#screen.sp-dark .qq-msg-sheet-btn:active,
#screen.sp-dark .stg-confirm-no,
#screen.sp-dark .modal-cancel,
#screen.sp-dark .acc-form-cancel,
#screen.sp-dark .studio-modal-btn,
#screen.sp-dark .studio-action-export { background: rgba(255,255,255,0.08); color: var(--sp-text-soft); }
#screen.sp-dark .studio-action-export svg { fill: var(--sp-text); }

/* ── 时间分隔/旁白等浅底块 ── */
#screen.sp-dark .qq-time-separator span { background: rgba(255,255,255,0.07); }
#screen.sp-dark .qq-space-likes-section,
#screen.sp-dark .qq-space-comments-section,
#screen.sp-dark .studio-bubble-system { background: rgba(255,255,255,0.05); }

/* ── 联系人头像占位/详情 ── */
#screen.sp-dark .qq-chat-header-presence,
#screen.sp-dark .qq-presence-inline-main,
#screen.sp-dark .qq-presence-inline-sub { color: var(--sp-text-soft); }

/* ── 日历：今日卡片/格子/侧栏背景 ── */
#screen.sp-dark .cal-today-card,
#screen.sp-dark .cal-dl-side,
#screen.sp-dark .cal-tl-heads { background: var(--sp-surface); }
#screen.sp-dark .cal-today-card { border-color: var(--sp-border); }
#screen.sp-dark .cal-day-num,
#screen.sp-dark .cal-day-has-event .cal-day-num { color: var(--sp-text); }
#screen.sp-dark .cal-nav-btn,
#screen.sp-dark .cal-popup-close,
#screen.sp-dark .cal-dl-av-nm,
#screen.sp-dark .cal-today-more { color: var(--sp-text-soft); }

/* ── 工作室：演绎/输入区背景 ── */
/* 选择栏/输入区背景跟随 var(--sp-header-bg)，仅补描边 */
#screen.sp-dark .studio-play-select-bar,
#screen.sp-dark .studio-play-input-area { border-top-color: var(--sp-border); }
#screen.sp-dark .studio-bubble-ai .studio-msg-content { background: var(--sp-surface); border-color: var(--sp-border); }
#screen.sp-dark .studio-action-chip,
#screen.sp-dark .studio-load-more { background: rgba(255,255,255,0.06); color: var(--sp-text-soft); }
#screen.sp-dark .studio-add-char-btn { background: rgba(255,255,255,0.03); color: var(--sp-text-soft); }
#screen.sp-dark .studio-color-reset-text,
#screen.sp-dark .studio-icon-btn { color: var(--sp-text); }

/* ── 面对面（多数已用变量；补硬编码白底气泡/段落） ── */
#screen.sp-dark .ftf-chat-bubble-char .ftf-chat-content,
#screen.sp-dark .ftf-msg-opening,
#screen.sp-dark .ftf-story-para,
#screen.sp-dark .ftf-rec-card,
#screen.sp-dark .ftf-input { background: var(--sp-surface); }
#screen.sp-dark .ftf-msg-context,
#screen.sp-dark .ftf-msg-narration,
#screen.sp-dark .ftf-story-user { background: rgba(255,255,255,0.04); }
/* 输入/多选操作区背景跟随 var(--sp-header-bg)，仅补描边 */
#screen.sp-dark .ftf-input-area,
#screen.sp-dark .ftf-multiselect-bar { border-top-color: var(--sp-border); }
#screen.sp-dark .ftf-tab { background: rgba(255,255,255,0.04); color: var(--sp-text-soft); }

/* ── 游戏厅（白天态/选择页白底卡片）；夜晚态与结算/复盘本就深色，保持 ── */
#screen.sp-dark .gh-ww-msg-bubble { background: rgba(255,255,255,0.07); color: var(--sp-text); }
#screen.sp-dark .gh-ww-action-area,
#screen.sp-dark .gh-ww-setup-footer { background: rgba(255,255,255,0.03); }
#screen.sp-dark .gh-ww-messages.day { background: linear-gradient(180deg, #16181d 0%, #121419 100%); }
#screen.sp-dark .gh-ww-play-header.day {
  background: linear-gradient(180deg, #23262e 0%, #1b1e24 100%) !important;
  color: var(--sp-text) !important;
}
#screen.sp-dark .gh-ww-play-header.day .ct-header-title,
#screen.sp-dark .gh-ww-play-header.day .ct-header-btn { color: var(--sp-text) !important; }
#screen.sp-dark .gh-ww-input { background: var(--sp-input-bg); color: var(--sp-text); }

/* ── 账号面板 ── */
#screen.sp-dark .acc-header-close,
#screen.sp-dark .acc-account-name,
#screen.sp-dark .acc-form-hint,
#screen.sp-dark .acc-loading { color: var(--sp-text-soft); }
#screen.sp-dark .acc-add-btn { background: rgba(255,255,255,0.06); color: var(--sp-text); }
#screen.sp-dark .acc-form-input { background: var(--sp-input-bg); color: var(--sp-text); }
#screen.sp-dark .acc-header { border-color: rgba(255,255,255,0.08); }

/* ── ta的手机（cphone） ── */
#screen.sp-dark .cp-chat-msg.left .cp-bubble { background: #2a2f37; color: var(--sp-text); }
#screen.sp-dark .cp-tabs { background: rgba(255,255,255,0.05); }
#screen.sp-dark .cp-tab { color: var(--sp-text-soft); }
#screen.sp-dark .cp-tab.active { background: rgba(255,255,255,0.12); color: var(--sp-accent-2); }
#screen.sp-dark .cp-qq-toolbar { background: rgba(26,28,34,0.92); }
#screen.sp-dark .cp-app-icon { background: #2a2f37; }
#screen.sp-dark .cp-qq-av,
#screen.sp-dark .cp-hist-ico { color: #fff; }
#screen.sp-dark .cp-webpage-title { color: #8ab4f8; }
#screen.sp-dark .cp-webpage-sub { color: #7fc08a; }
#screen.sp-dark .cp-webpage-content { color: var(--sp-text); }
#screen.sp-dark .cp-modal-close,
#screen.sp-dark .cp-diary-del,
#screen.sp-dark .cp-sheet-empty { color: var(--sp-text-soft); }
/* 便签类暖色卡片在深色下转为深色调，文字提亮 */
#screen.sp-dark .cp-note,
#screen.sp-dark .cp-memo-card { background: linear-gradient(160deg, #2b2820, #241f17); border-color: rgba(255,255,255,0.10); }
#screen.sp-dark .wgt-note-22-s1,
#screen.sp-dark .wgt-note-44-s2-card { background: linear-gradient(135deg, #3a3320, #2c2614); }
#screen.sp-dark .wgt-note-text { color: #ECE3D8; }
#screen.sp-dark .wgt-note-22-s2,
#screen.sp-dark .wgt-note-44-s1 { background: var(--sp-surface); border-color: var(--sp-border); }

/* ── 外观设置：预览/主题工具 ── */
#screen.sp-dark .ap-app-name,
#screen.sp-dark .ap-preset-name,
#screen.sp-dark .ap-font-preview { color: var(--sp-text); }
#screen.sp-dark .ap-font-preview { background: var(--sp-input-bg); border-color: var(--sp-border); }
#screen.sp-dark .ap-preset-time,
#screen.sp-dark .ap-pattern-hint,
#screen.sp-dark .ap-theme-custom,
#screen.sp-dark .ap-theme-pick,
#screen.sp-dark .ap-reset-btn { color: var(--sp-text-soft); }
#screen.sp-dark .ap-theme-custom,
#screen.sp-dark .ap-theme-pick,
#screen.sp-dark .ap-reset-btn { background: rgba(255,255,255,0.06); border-color: var(--sp-border); }
#screen.sp-dark .ap-app-edit { background: rgba(255,255,255,0.03); }

/* ── 贴纸/确认弹窗输入及标题 ── */
#screen.sp-dark .qq-sticker-dialog-input { background: var(--sp-input-bg); color: var(--sp-text); }
#screen.sp-dark .qq-bubble-preview-box { background: var(--sp-input-bg); }
#screen.sp-dark .qq-sticker-tab.active { background: rgba(var(--sp-accent-rgb),0.18); }

/* ── 表情/贴纸/头像/上传图：保持原样（不反色不变换） ── */
#screen.sp-dark .ct-avatar img,
#screen.sp-dark .qq-sticker-img,
#screen.sp-dark .qq-image-thumb,
#screen.sp-dark .cp-app-icon,
#screen.sp-dark .cp-chat-img,
#screen.sp-dark .ap-app-icon { filter: none; }