/* ============================================================
   椎名真昼 App Styles
   ============================================================ */
:root {
  --bg: #fff7f9;
  --bg-2: #ffffff;
  --card: #ffffff;
  --text: #2a2230;
  --text-2: #8a7f8c;
  --border: #f3e4ea;
  --primary: #ff9eb5;
  --primary-2: #ff7eb3;
  --nav-bg: rgba(255, 255, 255, 0.72);
  --shadow: 0 8px 28px rgba(255, 158, 181, 0.18);
  --radius: 18px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------- 动效规范（统一交互动效曲线） ---------- */
  --ease-main: cubic-bezier(0.22, 0.05, 0.18, 0.99);   /* 主交互：卡片展开 / 弹窗弹入，慢起慢收，起步极平缓，无突然加速、无弹跳 */
  --ease-micro: cubic-bezier(0.20, 0.02, 0.22, 0.96);  /* 微反馈：按压 / hover / 状态切换，极短时长，轻量形变 */
  --dur-main: 0.45s;   /* 主交互时长：弹窗 / 抽屉 / 卡片展开 */
  --dur-micro: 0.16s;  /* 微反馈时长：按压 / hover / 状态切换 */
}

/* Google Material Icons base (ligature font) - LOCAL font for offline use */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/MaterialIcons-Regular.ttf') format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
}

[data-theme="sakura"] {
  --bg: #fff6f9;
  --bg-2: #ffffff;
  --card: #ffffff;
  --primary: #ff8fb8;
  --primary-2: #ffadc9;
  --nav-bg: rgba(255, 255, 255, 0.85);
  --shadow: 0 8px 28px rgba(255, 143, 184, 0.18);
}

[data-theme="night"] {
  --bg: #0f1424;
  --bg-2: #161d33;
  --card: #1c2540;
  --text: #e8ecf7;
  --text-2: #9aa3c4;
  --border: #2a3558;
  --primary: #7aa2ff;
  --primary-2: #5a85f0;
  --nav-bg: rgba(22, 29, 51, 0.72);
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}


[data-theme="pure"] {
  --bg: #ffffff;
  --bg-2: #f0f7ff;
  --card: #ffffff;
  --text: #1a2a3a;
  --text-2: #7a8fa0;
  --border: #d0e3f0;
  --primary: #4a9eff;
  --primary-2: #2b85f0;
  --nav-bg: rgba(255, 255, 255, 0.82);
  --shadow: 0 8px 28px rgba(74, 158, 255, 0.15);
}



* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Hiragino Sans", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
  transition: background 0.3s, color 0.3s;
}

#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  /* 页面转场：挂载后透明度 + 轻微亮度渐变（模拟光线明暗），无位移 */
  animation: pageIn 0.5s var(--ease-main);
}

.status-bar-spacer { height: env(safe-area-inset-top, 0px); flex-shrink: 0; }

/* ---------- Views ---------- */
.view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 110px;
  -webkit-overflow-scrolling: touch;
  animation: pageIn 0.45s var(--ease-main);
}
/* 通用淡入（遮罩 / 弹层，纯透明度渐变） */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 页面转场：透明度渐变 + 极轻微亮度变化（模拟光线明暗），位移降到最低 */
@keyframes pageIn {
  from { opacity: 0; filter: brightness(1.07); }
  to   { opacity: 1; filter: brightness(1); }
}

/* ---------- Headers ---------- */
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 18px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--primary);
  box-shadow: 0 6px 16px var(--shadow);
  padding: 2px;
  background: var(--card);
}
.brand-text h1 {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--text), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-text p { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* ---------- Search bar ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: 999px;
  padding: 10px 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  border: 1px solid var(--border);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-bar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.search-icon {
  color: var(--text-2);
  font-size: 20px;
  flex-shrink: 0;
}
.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
}
.search-bar input::placeholder { color: var(--text-2); }

/* ---------- Home tabs ---------- */
.home-tabs {
  margin-bottom: 18px;
  position: relative;
}
.home-tabs-scroll {
  position: relative;
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--border);
}
.home-tab {
  flex: 1;
  padding: 10px 4px 12px;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.3s;
  position: relative;
}
.home-tab.active {
  color: var(--text);
  font-weight: 700;
}
.home-tab-indicator {
  position: absolute;
  bottom: -1.5px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
  transition: left 0.2s var(--ease-micro), width 0.2s var(--ease-micro);
  pointer-events: none;
}

/* ---------- Home tab panel ---------- */
.home-tab-panel {
  animation: fadeSlideIn 0.35s var(--ease-main);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(2px); filter: brightness(1.05); }
  to   { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

/* ---------- App grid (应用 tab) ---------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 10px;
  padding: 10px 4px 20px;
}
.app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}
.app-card:active { transform: scale(0.94); }
.app-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}
.app-icon i { font-size: 24px; }
.app-card:nth-child(2) .app-icon { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 4px 12px rgba(124,58,237,0.3); }
.app-card:nth-child(3) .app-icon { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 4px 12px rgba(5,150,105,0.3); }
.app-card:nth-child(4) .app-icon { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 4px 12px rgba(225,29,72,0.3); }
.app-card:nth-child(5) .app-icon { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.app-card:nth-child(6) .app-icon { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
.app-card:nth-child(7) .app-icon { background: linear-gradient(135deg, #d1d5db, #9ca3af); box-shadow: 0 4px 12px rgba(156,163,175,0.25); }
.app-card:nth-child(8) .app-icon { background: linear-gradient(135deg, #f472b6, #ec4899); box-shadow: 0 4px 12px rgba(236,72,153,0.3); }
.app-card-disabled { opacity: 0.5; cursor: not-allowed; }
.app-label {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}

/* ---------- Announcement marquee (CSS-only, no repeat gap) ---------- */
.marquee-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 18s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 16px;
  flex-shrink: 0;
}
.sub-header h2 { font-size: 22px; font-weight: 700; }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform 0.2s;
}
.icon-btn:active { transform: scale(0.92); }

/* ---------- Scroll gallery (horizontal) ---------- */
.scroll-gallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  margin-bottom: 6px;
  scroll-behavior: smooth;
}
.scroll-gallery::-webkit-scrollbar { display: none; }
.gallery-card {
  flex: 0 0 80%;
  height: 190px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  scroll-snap-align: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
  transition: transform 0.3s;
}
.gallery-card:active { transform: scale(0.98); }
.gallery-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7));
}
.gallery-caption {
  position: absolute;
  left: 16px; bottom: 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}
.gallery-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s;
  cursor: pointer;
}
.gallery-dot.active {
  width: 18px;
  border-radius: 3px;
  background: var(--primary);
}

/* ---------- Announcement capsule ---------- */
.announcement {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--card), color-mix(in srgb, var(--primary) 8%, var(--card)));
  border-radius: 999px;
  padding: 11px 16px;
  margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
}
.announce-icon {
  color: var(--primary);
  font-size: 16px;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}
.announce-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-2);
}

/* ---------- Quick cards grid ---------- */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.quick-card {
  background: var(--card);
  border-radius: 18px;
  padding: 16px 4px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.quick-card:active { transform: translateY(3px) scale(0.97); box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.quick-icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 30%, transparent);
}
.quick-card:nth-child(2) .quick-icon { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 4px 10px rgba(124,58,237,0.3); }
.quick-card:nth-child(3) .quick-icon { background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 4px 10px rgba(5,150,105,0.3); }
.quick-card:nth-child(4) .quick-icon { background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 4px 10px rgba(225,29,72,0.3); }
.quick-label { font-size: 12px; color: var(--text); font-weight: 500; }

/* ---------- Floating capsules ---------- */
.floating-capsules {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.capsule {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.capsule:active { transform: scale(0.95); }
.capsule-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 35%, transparent);
  flex: 1;
  justify-content: center;
  min-height: 46px;
}
.capsule-ghost {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  flex: 1;
  justify-content: center;
  min-height: 46px;
}
.capsule i { font-size: 18px; }

/* ---------- Quotes ---------- */
.quotes-list { display: flex; flex-direction: column; gap: 12px; }
.quote-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  border: 1px solid var(--border);
}
.quote-mark {
  position: absolute;
  top: 14px; left: 16px;
  font-size: 18px;
  color: var(--primary);
  opacity: 0.5;
}
.quote-text {
  font-size: 15px;
  line-height: 1.7;
  padding-left: 26px;
  margin-bottom: 12px;
  font-weight: 500;
}
.quote-meta {
  display: flex;
  justify-content: space-between;
  padding-left: 26px;
  font-size: 12px;
}
.quote-ep { color: var(--text-2); }
.quote-cat {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 2px 10px;
  border-radius: 999px;
}

/* ---------- Chat ---------- */
.token-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 16px 8px;
}
.gate-illust {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.token-gate h3 { font-size: 20px; margin-bottom: 6px; }
.gate-desc { font-size: 13px; color: var(--text-2); margin-bottom: 14px; max-width: 320px; }
.tutorial-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  margin-bottom: 16px;
}
.token-form { width: 100%; max-width: 340px; text-align: left; }
.form-label { font-size: 13px; color: var(--text-2); margin-bottom: 8px; display: block; font-weight: 500; }
.form-group { margin-bottom: 14px; }
.token-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 14px;
}
.form-group .token-input-wrap { margin-bottom: 0; }
.token-input-wrap i { color: var(--text-2); font-size: 15px; }
.token-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  min-width: 0;
}
.toggle-pass { cursor: pointer; }

/* Model info (fixed DeepSeek) */
.model-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.model-info .model-svg-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: var(--primary);
}

.model-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  margin: 4px 0 14px;
  padding: 0 2px;
}
.model-hint i { color: var(--primary); }

.btn-primary {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.btn-primary:active { transform: scale(0.98); }

/* API 对接地址弹层 */
.btn-ghost {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border-color, #e2e2e2);
  border-radius: 12px;
  background: transparent;
  color: var(--text-2, #666);
  font-size: 14px;
  cursor: pointer;
}
.btn-ghost:active { background: var(--bg-2, #f5f5f5); }
.api-url-val {
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

/* Chat view: flex column so input bar sits above bottom nav */
.view-chat { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.chat-area { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 4px 16px;
  -webkit-overflow-scrolling: touch;
}
.msg-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  align-items: flex-end;
}
.msg-row.user { flex-direction: row-reverse; }
.msg-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.msg-bubble {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}
.msg-row.ai .msg-bubble {
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.msg-row.user .msg-bubble {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg-name { display: block; font-size: 11px; color: var(--primary); margin-bottom: 2px; font-weight: 600; }
.msg-row.user .msg-bubble .msg-name { display: none; }
.typing { display: flex; gap: 4px; padding: 14px; }
.typing .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-2);
  animation: bounce 1.2s infinite;
}
.typing .dot:nth-child(2) { animation-delay: 0.15s; }
.typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.chat-input-bar {
  display: flex;
  gap: 10px;
  padding: 10px 4px calc(66px + var(--safe-bottom));
  align-items: flex-end;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* Chat empty state greeting */
.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px;
  text-align: center;
  color: var(--text-2);
}
.chat-empty-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.chat-empty-title { font-size: 15px; font-weight: 600; color: var(--text); }
.chat-empty-desc { font-size: 13px; line-height: 1.5; max-width: 220px; }
.input-shell {
  flex: 1;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 22px;
  padding: 10px 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
  max-height: 140px;
  overflow: hidden;
}
.input-shell:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.chat-input-bar textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  font-family: inherit;
  max-height: 120px;
  padding: 0;
}
.chat-input-bar textarea::placeholder { color: var(--text-2); }
.send-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow);
  flex-shrink: 0;
  transition: transform 0.15s, opacity 0.2s;
}
.send-btn:not(:disabled):active { transform: scale(0.9); }
.send-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.send-btn.stop-btn {
  background: var(--card);
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: none;
}
.send-btn.stop-btn:active { transform: scale(0.9); }

/* ---------- Settings ---------- */
.section-title {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
  margin: 18px 4px 10px;
  letter-spacing: 0.5px;
}

/* ---------- Mine view (我的) ---------- */

.mine-stats .count-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mine-stats .count-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.mine-stats .count-label {
  font-size: 11px;
  color: var(--text-2);
}
.avatar-group {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
}
.avatar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
.avatar-item:last-child { border-bottom: none; }
.avatar-img {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}
.avatar-info { flex: 1; }
.avatar-name { font-weight: 600; font-size: 15px; }
.avatar-sub { font-size: 12px; color: var(--text-2); }
.avatar-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--primary);
  cursor: pointer;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.theme-preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
}
.theme-card.active .theme-preview {
  border-color: var(--p, var(--primary));
  transform: scale(1.04);
}
.theme-card span { font-size: 11px; color: var(--text-2); }
.theme-card.active span { color: var(--text); font-weight: 600; }

.seg-group {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
}
.seg-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}
.seg-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
}

.cache-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.cache-info { display: flex; align-items: center; gap: 12px; }
.cache-info > i {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.cache-label { font-size: 13px; font-weight: 600; }
.cache-value { font-size: 12px; color: var(--text-2); }

/* ---------- Settings list (精简设置页) ---------- */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 0;
  overflow: hidden;
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.settings-item:active { background: var(--bg-2); }
.settings-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.settings-icon i { font-size: 18px; }
.settings-info { flex: 1; min-width: 0; }
.settings-label { font-size: 14px; font-weight: 600; color: var(--text); }
.settings-value { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.settings-chevron { color: var(--text-2); font-size: 20px; flex-shrink: 0; }
.btn-small { padding: 6px 12px; font-size: 12px; }

/* ---------- More Settings Modal ---------- */
/* 更多设置：全屏设置页样式（复刻参考图） */
.more-settings-overlay {
  position: fixed;
  inset: 0;
  background: #eef0f4;
  z-index: 2000;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.more-settings-modal {
  width: 100%;
  max-width: 480px;
  height: 100%;
  min-height: 100dvh;
  overflow-y: auto;
  background: #f5f6f9;
  border-radius: 0;
  padding: 0 0 28px;
  animation: pageIn 0.45s var(--ease-main);
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
}
.more-settings-modal::-webkit-scrollbar { display: none; }
.more-settings-header {
  position: sticky;
  top: 0;
  padding: 24px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(245, 246, 249, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10;
  flex-shrink: 0;
}
.more-settings-header h3 {
  font-size: 20px;
  font-weight: 800;
  color: #1c1c24;
  letter-spacing: 0.5px;
}
.more-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.exit-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #fef2f2;
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.exit-icon-btn:hover { background: #fee2e2; }
.exit-icon-btn:active { transform: scale(0.92); }
.exit-icon-btn i { font-size: 18px; }
.more-section { margin: 0 14px 14px; }
.more-section:first-of-type { padding-top: 8px; }
.more-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #8a8f9e;
  margin-bottom: 8px;
  padding: 0 6px;
}
.more-close-btn {
  width: 148px;
  height: 42px;
  margin: 18px auto 0;
  border: none;
  border-radius: 21px;
  background: #ffffff;
  color: #3a3f4b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: all 0.2s;
}
.more-close-btn:active { transform: scale(0.96); }
.more-settings-modal .theme-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #ffffff;
  border-radius: 16px;
  padding: 14px;
}
.theme-grid-compact .theme-card { font-size: 11px; }
.theme-grid-compact .theme-preview { height: 52px; border-radius: 12px; }
.more-settings-modal .theme-card span { font-size: 11.5px; }
.more-settings-modal .theme-card.active .theme-preview {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--p, var(--primary));
}
.avatar-group-compact {
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  border-radius: 16px;
  padding: 4px 0;
}
.avatar-group-compact .avatar-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 11px 14px;
}
.avatar-group-compact .avatar-item + .avatar-item {
  border-top: 1px solid #f0f1f4;
}
.avatar-group-compact .avatar-img {
  width: 48px;
  height: 48px;
  border: none;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.avatar-group-compact .avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: #f0f1f4;
  color: #5a5f6b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-group-compact .avatar-btn i { font-size: 18px; }
.more-settings-modal .seg-group {
  background: #ffffff;
  border: none;
  border-radius: 14px;
  padding: 5px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.more-settings-modal .seg-btn.active {
  background: linear-gradient(135deg, #4facfe, #2d6bff);
}

/* ---------- Exit button ---------- */
.exit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  color: #ef4444;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.exit-btn:hover { border-color: #ef4444; }
.exit-btn:active { transform: scale(0.98); background: #fef2f2; }
.exit-btn i { font-size: 20px; }

/* ---------- App grid: 去颜色，统一风格 ---------- */
.app-icon {
  background: var(--bg-2);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
}
.app-card:nth-child(2) .app-icon,
.app-card:nth-child(3) .app-icon,
.app-card:nth-child(4) .app-icon,
.app-card:nth-child(5) .app-icon,
.app-card:nth-child(6) .app-icon,
.app-card:nth-child(7) .app-icon,
.app-card:nth-child(8) .app-icon {
  background: var(--bg-2);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid var(--border);
}

.btn-ghost {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}

/* ---------- Profile View (个人主页) ---------- */
.view-profile {
  padding: 0 0 110px;
  overflow-y: auto;
}

.header-profile-btn {
  background: var(--card);
  border: 1px solid var(--border);
}
.header-profile-btn i { color: var(--primary); }

/* 背景封面 */
.profile-cover {
  position: relative;
  padding: 0 0 20px;
}
.profile-cover-bg {
  position: absolute;
  top: 0;
  left: -16px;
  right: -16px;
  height: 220px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  background-image: url("https://imgpng1.shinamah.cn/20260908070730_pic_20260711142958_0.jpg");
  background-size: cover;
  background-position: center;
}
.profile-cover-overlay {
  position: absolute;
  top: 0;
  left: -16px;
  right: -16px;
  height: 220px;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
}

/* 顶部操作栏 */
.profile-top-bar {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px 0;
}
.profile-back-btn,
.profile-settings-btn {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.profile-back-btn i,
.profile-settings-btn i { font-size: 20px; }

/* 用户信息区 */
.profile-user-section {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 60px 4px 0;
}
.profile-avatar-wrap {
  flex-shrink: 0;
  position: relative;
}
.profile-avatar-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--card);
  padding: 3px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border: 2px solid var(--primary);
  overflow: hidden;
}
.profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.profile-avatar-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-user-info {
  flex: 1;
  min-width: 0;
  color: #fff;
}
.profile-user-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.profile-gender {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
  flex-shrink: 0;
}
.profile-gender i { font-size: 13px; }
.profile-gender.gender-female {
  background: rgba(255, 120, 160, 0.85);
  color: #ffffff;
}
.profile-gender.gender-male {
  background: rgba(82, 120, 255, 0.85);
  color: #ffffff;
}
.profile-user-bio {
  font-size: 13px;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.profile-edit-btn-cover {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.profile-edit-btn-cover:active { transform: scale(0.96); }
.profile-edit-btn-cover i { font-size: 16px; }

/* 数据统计 — 磨砂玻璃效果 */
.profile-counts {
  position: relative;
  z-index: 5;
  display: flex;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 16px 8px;
  margin: 16px 0 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.count-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.count-item + .count-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: rgba(0, 0, 0, 0.08);
}
.count-num {
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(135deg, #333, var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.count-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

/* 标签导航栏 — 主题自适应风格 */
.profile-tabs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 10px 0;
  margin: 16px 0 14px;
}
.profile-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 2px;
  border: none;
  background: transparent;
  color: #9aa0a8;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}
.profile-tab.active {
  color: var(--primary);
  font-weight: 700;
}

/* 标签内容区 */
.profile-tab-content {
  animation: fadeSlideIn 0.35s var(--ease-main);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(2px); filter: brightness(1.05); }
  to   { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

/* 我的动态 — 二次元图片网格卡片 */
.profile-feed-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.feed-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s var(--ease-micro), box-shadow 0.18s var(--ease-micro);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.feed-card:active {
  transform: scale(0.96);
}
.feed-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, #fff), color-mix(in srgb, var(--primary-2) 15%, #fff));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.feed-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.feed-card:active .feed-card-img img {
  transform: scale(1.05);
}
.feed-card-icon {
  font-size: 48px;
  color: rgba(255,255,255,0.7);
}
.feed-card-body {
  padding: 10px 12px 12px;
}
.feed-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 8px;
  min-height: 36px;
}
.feed-card-meta {
  display: flex;
  gap: 12px;
}
.feed-stat {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-2);
}
.feed-stat i { font-size: 14px; color: var(--primary); }

/* 空状态 — 二次元可爱风格 */
.profile-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 70px 20px;
  color: var(--text-2);
}
.empty-illust {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, #fff), color-mix(in srgb, var(--primary-2) 20%, #fff));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 25%, transparent);
  animation: floaty 3s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.empty-illust i {
  font-size: 44px;
  color: var(--primary);
}
.profile-empty p {
  font-size: 14px;
  text-align: center;
  margin: 0;
  color: var(--text-2);
}
.empty-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent);
  transition: transform 0.18s var(--ease-micro), box-shadow 0.18s var(--ease-micro);
}
.empty-action-btn:active {
  transform: scale(0.94);
}
.empty-action-btn i { font-size: 18px; }

/* ---------- About ---------- */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0 24px;
}
.about-logo {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.about-hero h3 { font-size: 22px; }
.about-ver { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* Feature list */
.feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.feature-card {
  display: flex;
  gap: 10px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: flex-start;
}
.feature-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.feature-body { flex: 1; min-width: 0; }
.feature-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; color: var(--text); }
.feature-desc { font-size: 11px; line-height: 1.45; color: var(--text-2); }

.about-list {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.about-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.about-item:last-child { border-bottom: none; }
.about-item > i:first-child {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.about-item > div { flex: 1; }
.about-label { font-size: 14px; font-weight: 600; }
.about-val { font-size: 12px; color: var(--text-2); }
.about-item > i:last-child { color: var(--text-2); font-size: 16px; }
.heart-mini { font-size: 13px !important; vertical-align: middle; color: var(--primary); }
.pink { color: var(--primary); }

/* ---------- About page legal & filing ---------- */
.about-section-divider {
  margin: 16px 0 4px;
  padding: 8px 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-top: 1px solid var(--border);
}
.about-filing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 0 12px;
  margin-top: 4px;
}
.filing-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s;
}
.filing-link:active { color: var(--primary); }
.filing-link i { font-size: 14px; }
.filing-icon { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.about-copyright {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 6px;
  opacity: 0.7;
}

/* ---------- Legal page overlay ---------- */
.legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.legal-page {
  width: 100%;
  max-width: 480px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.legal-header h2 { font-size: 17px; }
.legal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px calc(80px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}
.legal-body h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 16px 0 6px;
}
.legal-body p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 6px;
}
.legal-update-date {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
}

/* ---------- Bottom nav (frosted glass + raised center plus) ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #f7f7f7, #ebebeb);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  padding-bottom: var(--safe-bottom);
  z-index: 100;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 54px;
  padding: 5px 0 7px;
  position: relative;
  cursor: pointer;
  color: var(--text-2);
  transition: color 0.25s;
  user-select: none;
}
/* 激活态：胶囊高亮弹性缩放出现 */
.nav-item::before {
  content: "";
  position: absolute;
  top: 3px;
  width: 38px;
  height: 24px;
  border-radius: 12px;
  background: transparent;
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.22s var(--ease-micro), opacity 0.22s var(--ease-micro), background 0.22s var(--ease-micro);
}
.nav-item.active::before {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--primary-2) 16%, transparent));
  transform: scale(1);
  opacity: 1;
}
.nav-item i {
  font-size: 18px;
  position: relative;
  z-index: 1;
  transition: transform 0.22s var(--ease-micro), color 0.2s var(--ease-micro);
}
.nav-item span {
  font-size: 9px;
  font-weight: 500;
  position: relative;
  z-index: 1;
  transition: color 0.25s;
  line-height: 1.2;
}
.nav-item.active { color: var(--primary); }
.nav-item.active i { transform: translateY(-1px) scale(1.14); }

/* 左右分组：各占一半宽度，保证中间加号精确居中 */
.nav-group {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

/* 中间凸起加号按钮 */
.nav-plus-slot {
  flex: 0 0 58px;
  position: relative;
  height: 54px;
}
.nav-plus-btn {
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid var(--bg);
  background: #111111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.18);
  -webkit-tap-highlight-color: transparent;
}
.nav-plus-btn i {
  font-size: 26px;
  line-height: 1;
  transition: transform 0.2s var(--ease-micro);
}
.nav-plus-btn.is-open i { transform: rotate(45deg); }

/* 发布模式：加号保持静止，仅弹出菜单 */

/* ===== 加号弹出快捷菜单（AI聊天 / 发帖）：扇形环绕展开 ===== */
.nav-plus-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 120;
}
.nav-plus-fan {
  position: absolute;
  left: 50%;
  bottom: calc(140px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(320px, calc(100vw - 40px));
  height: 96px;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
/* 扇形菜单项：圆形磨砂按钮 + 底部文字 */
.nav-plus-fan-item {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 72px;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  animation: fanItemIn 0.38s var(--ease-main) backwards;
}
.nav-plus-fan-item.chat { right: 50%; margin-right: 22px; }
.nav-plus-fan-item.compose { left: 50%; margin-left: 22px; animation-delay: 0.06s; }
.nav-plus-fan-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.16),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-plus-fan-icon i { font-style: normal; font-size: 24px; line-height: 1; }
.nav-plus-fan-icon.icon-chat { color: #1fbf6f; }
.nav-plus-fan-icon.icon-compose { color: #ff5f8f; }
.nav-plus-fan-label {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.nav-plus-fan-icon { transition: transform 0.15s ease; }
.nav-plus-fan-item:active .nav-plus-fan-icon { transform: scale(0.92); }




@keyframes fanItemIn {
  from { opacity: 0; transform: translateY(16px) scale(0.55); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.plus-menu-enter-active { transition: opacity 0.28s var(--ease-main); }
.plus-menu-leave-active { transition: opacity 0.2s var(--ease-main); }
.plus-menu-enter-from, .plus-menu-leave-to { opacity: 0; }

/* 夜间主题：弹层深色适配 */
[data-theme="night"] .nav-plus-fan-icon {
  background: rgba(30, 38, 66, 0.78);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme="night"] .nav-plus-fan-icon.icon-chat { color: #4ade80; }
[data-theme="night"] .nav-plus-fan-icon.icon-compose { color: #ff8fab; }
[data-theme="night"] .nav-plus-fan-label { color: #f0f3fc; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.82);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 999;
  animation: popIn 0.25s ease;
  max-width: 80%;
  text-align: center;
}
@keyframes popIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============================================================
   Community
   ============================================================ */
.view-community {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 16px 0;
}
.community-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: calc(56px + var(--safe-bottom));
}
.community-list::-webkit-scrollbar { display: none; }

/* Community head: 渐变 logo + 圆形发帖钮（无标题文字） */
/* Community top: 渐变 logo + 板块 tabs 一体（无顶栏） */
.community-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0 0;
}
.community-back-btn {
  flex-shrink: 0;
}
.community-post-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
  transition: transform 0.2s;
}
.community-post-btn:active { transform: scale(0.95); }
.community-post-btn i { font-size: 17px; }

/* Board tabs: 吸顶下划线式 */
.board-tabs {
  flex: 1;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0;
  scroll-snap-type: x mandatory;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.board-tabs::-webkit-scrollbar { display: none; }
.board-tab {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  white-space: nowrap;
}
.board-tab i { font-size: 17px; }
.board-tab.active { color: var(--primary); }
.board-tab.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
}
.board-tab:not(.active) i { color: var(--bc, var(--primary)); }

/* Sort bar: 分段胶囊组 */
.sort-bar {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--text-1) 6%, transparent);
  border-radius: 12px;
  width: fit-content;
}
.sort-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 9px;
  transition: all 0.2s;
}
.sort-btn i { font-size: 16px; }
.sort-btn.active {
  color: var(--primary);
  background: var(--card);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Post list & cards (信息流列表式) */
.post-list { display: flex; flex-direction: column; padding-bottom: 24px; }
.post-card {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 2px;
  cursor: pointer;
  transition: background 0.2s;
}
.post-card:last-child { border-bottom: none; }
.post-card:active { background: color-mix(in srgb, var(--text-1) 4%, transparent); }
.post-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
}
.post-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.post-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.post-author { font-size: 13.5px; font-weight: 700; color: var(--text); }
.post-time { font-size: 11.5px; color: var(--text-2); }
.post-board {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.post-main { display: flex; align-items: flex-start; gap: 12px; }
.post-main-text { flex: 1; min-width: 0; }
.post-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 5px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.post-excerpt {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.post-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.post-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-1) 5%, transparent);
  transition: color 0.2s, background 0.2s;
  user-select: none;
}
.post-stat i { font-size: 16px; }
.post-stat.liked {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.post-open {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 999px;
}
.post-open i { font-size: 16px; }

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--text-2);
}
.empty-state i { font-size: 48px; opacity: 0.5; }
.empty-state p { font-size: 14px; }

/* Post detail */
.post-detail { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.detail-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 0 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.detail-content::-webkit-scrollbar { display: none; }

/* Detail wrapper: 无框沉浸（不负责任何背景/边框） */

/* Author bar (白卡头部) */
/* Author bar (无框沉浸式) */
/* Author bar (卡内头部，无分隔线) */
/* Author bar (无框，留白分层) */
.detail-author-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0 18px;
}
.detail-author-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.detail-author-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.detail-author-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.detail-author-time {
  font-size: 12px;
  color: var(--text-2);
}
.detail-board-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid;
  background: color-mix(in srgb, currentColor 10%, transparent);
  flex-shrink: 0;
}
.detail-dm-btn {
  width: 38px;
  height: 38px;
  border: 1.5px solid color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.detail-dm-btn:active { transform: scale(0.92); }
.detail-dm-btn i { font-size: 18px; }

/* Post body (无框，留白分层) */
.detail-body {
  padding: 0 0 18px;
}
.detail-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 12px;
  -webkit-line-clamp: unset;
}
.post-full {
  font-size: 15px;
  color: var(--text);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Interaction bar (无框，留白分层) */
.detail-interaction {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0 18px;
}
.detail-interact-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-1) 5%, transparent);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.16s var(--ease-micro);
}
.detail-interact-btn:active { transform: scale(0.94); }
.detail-interact-btn i { font-size: 17px; }
.detail-interact-btn.liked {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Comments (无框，留白分层) */
.comments-section {
  padding: 18px 0 8px;
}
.comments-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  padding: 0 0 14px;
}
.comments-title span { color: var(--text-2); font-weight: 600; font-size: 13px; }
.empty-comments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px 20px;
  color: var(--text-2);
  font-size: 13px;
}
.empty-comments i {
  font-size: 36px;
  opacity: 0.3;
  color: var(--primary);
}
.comment-item {
  display: flex;
  gap: 10px;
  padding: 14px 0;
}
.comment-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.comment-body { flex: 1; min-width: 0; }
.comment-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.comment-author { font-size: 13px; font-weight: 700; color: var(--text); }
.comment-time { font-size: 11px; color: var(--text-2); }
.comment-text {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
  word-break: break-word;
}
.comment-actions { margin-top: 6px; }
.comment-like {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.comment-like i { font-size: 14px; }
.comment-like.liked { color: var(--primary); }

/* Comment input bar (above bottom nav) */
.comment-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 4px calc(56px + var(--safe-bottom));
  flex-shrink: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.comment-input-bar .input-shell {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0 16px;
  min-height: 42px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.comment-input-bar .input-shell:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.input-icon { font-size: 18px; color: var(--text-2); transition: color 0.25s; }
.comment-input-bar .input-shell:focus-within .input-icon { color: var(--primary); }
.comment-input-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  padding: 11px 0;
  outline: none;
  color: var(--text);
}
.comment-input-bar input::placeholder { color: var(--text-2); opacity: 0.7; }
.send-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
  transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
}
.send-btn i { font-size: 19px; }
.send-btn:disabled {
  background: var(--border);
  box-shadow: none;
  cursor: not-allowed;
}
.send-btn:not(:disabled):active { transform: scale(0.88); }
.send-btn:not(:disabled):hover { box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 40%, transparent); }

/* Compose (社交软件发帖样式：小红书/微博式) */
.compose-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Slide-in transition for compose */
.compose-slide-enter-active {
  transition: transform 0.4s var(--ease-main), opacity 0.4s var(--ease-main);
  transform-origin: bottom center;
}
.compose-slide-leave-active {
  transition: transform 0.3s var(--ease-main), opacity 0.3s var(--ease-main);
}
.compose-slide-enter-from {
  transform: translateY(40px) scale(0.96);
  opacity: 0;
}
.compose-slide-leave-to {
  transform: translateY(20px) scale(0.98);
  opacity: 0;
}

/* 顶栏：关闭 + 标题 + 发布按钮 */
.compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.compose-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.compose-publish-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
  transition: transform 0.15s, opacity 0.15s;
}
.compose-publish-btn:active { transform: scale(0.95); }
.compose-publish-btn i { font-size: 16px; }

/* 用户条：头像 + 昵称 */
.compose-userbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 4px;
  flex-shrink: 0;
}
.compose-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.compose-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.compose-user-hint {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 1px;
}

/* 表单区 */
.compose-form {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px calc(90px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-group { display: flex; flex-direction: column; gap: 8px; }

/* 板块话题 chips（社交软件话题标签风格） */
.board-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 6px;
}
.board-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--text-1) 6%, transparent);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.board-chip i { font-size: 14px; color: var(--text-2); }
.board-chip.active {
  color: var(--bc, var(--primary));
  border-color: color-mix(in srgb, var(--bc, var(--primary)) 45%, transparent);
  background: color-mix(in srgb, var(--bc, var(--primary)) 10%, transparent);
  box-shadow: none;
}
.board-chip.active i { color: var(--bc, var(--primary)); }

/* 标题：细线分隔输入 */
.compose-title-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  padding: 14px 2px 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  font-family: inherit;
}
.compose-title-input::placeholder { color: var(--text-3, #b0a8b0); font-weight: 400; }
.compose-title-input:focus { border-bottom-color: var(--primary); }

/* 正文：无边框大编辑区 */
.compose-content-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  padding: 10px 2px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  outline: none;
  resize: none;
  min-height: 150px;
  font-family: inherit;
}
.compose-content-input::placeholder { color: var(--text-3, #b0a8b0); }

/* 图片链接行 */
.compose-img-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--bg-2);
  border-radius: 12px;
  border: 1px dashed var(--border);
}
.compose-img-row i { font-size: 18px; color: var(--text-2); flex-shrink: 0; }
.compose-img-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
}
.compose-img-input::placeholder { color: var(--text-3, #b0a8b0); }

/* Image link preview in compose */
.image-preview {
  position: relative;
  border-radius: 14px;
  overflow: visible;
  border: 1px solid var(--border);
  background: var(--card);
  margin-top: 8px;
  animation: previewIn 0.3s var(--ease-main);
}
@keyframes previewIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.image-preview img {
  display: block;
  width: 100%;
  height: auto;
}
.image-preview-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.2s;
}
.image-preview-clear:active { transform: scale(0.85); }
.image-preview-clear i { font-size: 18px; }

/* Post card thumbnail image (信息流右置缩略图) */
.post-thumb {
  flex-shrink: 0;
  width: 108px;
  height: 108px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--border);
}
.post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s var(--ease-micro);
}
.post-card:active .post-thumb img { transform: scale(1.03); }

/* Post detail full image (卡内圆角全宽图片) */
.post-detail-image {
  margin: 14px 0 0;
  border-radius: 14px;
  overflow: hidden;
}
.post-detail-image img {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

/* img-preview transition */
.img-preview-enter-active {
  transition: opacity 0.3s var(--ease-main), transform 0.3s var(--ease-main);
}
.img-preview-leave-active {
  transition: opacity 0.22s var(--ease-main), transform 0.22s var(--ease-main);
}
.img-preview-enter-from, .img-preview-leave-to {
  opacity: 0;
  transform: scale(0.92);
}

/* ---------- Home latest activity ---------- */
.latest-section {
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px 16px 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.latest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.latest-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.latest-title i { font-size: 20px; color: var(--primary); }
.latest-more {
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.latest-more i { font-size: 16px; }

.latest-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 12px;
  color: var(--text-2);
}
.latest-empty > i { font-size: 44px; opacity: 0.4; }
.latest-empty p { font-size: 13px; text-align: center; margin: 0; }
.latest-empty .btn-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.latest-empty .btn-primary i { font-size: 16px; }

.latest-list { display: flex; flex-direction: column; gap: 0; }
.latest-item {
  display: flex;
  gap: 12px;
  padding: 13px 10px;
  cursor: pointer;
  border-radius: 14px;
  transition: background 0.2s, transform 0.15s;
}
.latest-item + .latest-item { border-top: 1px solid var(--border); }
.latest-item:active { background: var(--bg-2); transform: scale(0.99); }
.latest-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
}
.latest-body { flex: 1; min-width: 0; }
.latest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.latest-author { font-size: 13px; font-weight: 600; color: var(--text); }
.latest-time { font-size: 11px; color: var(--text-2); }
.latest-board {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid;
  flex-shrink: 0;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.latest-post-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 5px;
}
.latest-stats { display: flex; gap: 16px; }
.latest-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-2);
}
.latest-stat i { font-size: 14px; }

/* ---------- Entrance Exam (发帖资格认证 · 漫画风) ---------- */
.exam-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 漫画网点背景：三层白点 + 粉色底 */
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.5) 0 3px, transparent 3.6px) 0 0 / 26px 26px,
    radial-gradient(circle at 58% 34%, rgba(255,255,255,.38) 0 3px, transparent 3.6px) 0 0 / 26px 26px,
    radial-gradient(circle at 84% 62%, rgba(255,255,255,.42) 0 3px, transparent 3.6px) 0 0 / 26px 26px,
    radial-gradient(circle at 30% 78%, rgba(255,255,255,.3) 0 3px, transparent 3.6px) 0 0 / 26px 26px,
    linear-gradient(135deg, #ffd6e8 0%, #ffb3cd 55%, #ff8fb8 100%);
}
/* 漫画速度线 */
.exam-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 15px, rgba(43,43,43,.05) 15px 16px);
}
.exam-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 16px 0;
  z-index: 1;
}

/* ---------- Exam start screen (name input) ---------- */
.exam-start {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  text-align: center;
}
.exam-start-illust {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, #ffd93d 0deg 12deg, #ffb300 12deg 24deg);
  border: 4px solid #2b2b2b;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 6px 0 rgba(43,43,43,.85);
  margin-bottom: 8px;
  position: relative;
}
.exam-start-illust::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #2b2b2b;
}
.exam-start-illust i {
  font-size: 40px;
  color: #2b2b2b;
  position: relative;
  z-index: 1;
}
/* 标题漫画对白气泡 */
.exam-start h2 {
  font-size: 24px;
  font-weight: 900;
  color: #2b2b2b;
  margin: 0;
  background: #fff;
  border: 3px solid #2b2b2b;
  border-radius: 14px;
  padding: 8px 20px;
  box-shadow: 4px 4px 0 rgba(43,43,43,.85);
  position: relative;
}
.exam-start h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  margin-left: -10px;
  border: 8px solid transparent;
  border-top: 10px solid #2b2b2b;
}
.exam-start-sub {
  font-size: 13px;
  font-weight: 700;
  color: #2b2b2b;
  margin: 0;
  line-height: 1.5;
  background: rgba(255,255,255,.7);
  border: 2px dashed #ff6b9d;
  border-radius: 10px;
  padding: 6px 12px;
}
.exam-start-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  background: #fff;
  border: 3px solid #2b2b2b;
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 8px;
  box-shadow: 4px 4px 0 rgba(43,43,43,.85);
}
.exam-start-field i { font-size: 20px; color: #ff6b9d; flex-shrink: 0; }
.exam-start-field input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: #2b2b2b;
  min-width: 0;
}
.exam-start-field input::placeholder { color: #c9b0b8; }
.exam-start .exam-submit {
  width: 100%;
  max-width: 280px;
  margin-top: 10px;
}
.report-name-display {
  font-size: 15px;
  font-weight: 900;
  color: #2b2b2b;
}

/* ---------- Questions header ---------- */
.exam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 4px 16px;
  flex-shrink: 0;
}
.exam-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.exam-title > i {
  font-size: 26px;
  color: #2b2b2b;
  background: #ffd93d;
  border: 3px solid #2b2b2b;
  padding: 7px;
  border-radius: 12px;
  box-shadow: 3px 3px 0 rgba(43,43,43,.85);
  flex-shrink: 0;
}
.exam-title h2 {
  font-size: 18px;
  font-weight: 900;
  color: #2b2b2b;
  margin: 0;
  background: #fff;
  border: 3px solid #2b2b2b;
  border-radius: 12px;
  padding: 5px 12px;
  box-shadow: 3px 3px 0 rgba(43,43,43,.85);
  white-space: nowrap;
}
.exam-title p {
  font-size: 11px;
  font-weight: 700;
  color: #8a6a72;
  margin: 3px 0 0;
}
.exam-progress {
  font-size: 13px;
  font-weight: 900;
  color: #2b2b2b;
  background: #fff;
  border: 3px solid #2b2b2b;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(43,43,43,.85);
  flex-shrink: 0;
}
/* 拟声词贴纸 */
.exam-tag {
  flex-shrink: 0;
  background: #ffd93d;
  color: #2b2b2b;
  border: 2.5px solid #2b2b2b;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 9px;
  transform: rotate(-6deg);
  box-shadow: 3px 3px 0 rgba(43,43,43,.85);
}

/* ---------- Questions ---------- */
.exam-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 100px;
}
.exam-body::-webkit-scrollbar { width: 0; }

.exam-question {
  background: #fff;
  border: 3px solid #2b2b2b;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 5px 5px 0 rgba(43,43,43,.85);
  position: relative;
}
/* 题目卡右上角漫画小点装饰 */
.exam-question::before {
  content: "";
  position: absolute;
  top: -9px; right: 18px;
  width: 16px; height: 16px;
  background: #ff6b9d;
  border: 3px solid #2b2b2b;
  border-radius: 50%;
}
.exam-q-head {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.exam-q-num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: #ffd93d;
  border: 3px solid #2b2b2b;
  color: #2b2b2b;
  font-size: 14px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 rgba(43,43,43,.85);
}
.exam-q-text {
  font-size: 15px;
  font-weight: 800;
  color: #2b2b2b;
  line-height: 1.5;
  padding-top: 2px;
}
.exam-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exam-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: #fff;
  border: 3px solid #2b2b2b;
  border-radius: 12px;
  box-shadow: 3px 3px 0 rgba(43,43,43,.85);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .2s;
  text-align: left;
  width: 100%;
}
.exam-option:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}
.exam-option.selected {
  background: #ffe9b8;
  border-color: #2b2b2b;
}
.exam-opt-letter {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: #fff;
  border: 2.5px solid #2b2b2b;
  color: #2b2b2b;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.exam-option.selected .exam-opt-letter {
  background: #2b2b2b;
  color: #ffd93d;
}
.exam-opt-text {
  font-size: 14px;
  font-weight: 700;
  color: #2b2b2b;
}

/* ---------- Footer / Submit ---------- */
.exam-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, #ffb3cd 70%, transparent);
}
.exam-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px;
  border: 3px solid #2b2b2b;
  border-radius: 14px;
  background: #ffd93d;
  color: #2b2b2b;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(43,43,43,.85);
  transition: transform .12s, box-shadow .12s, background .2s;
}
.exam-submit:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}
.exam-submit.disabled {
  background: #e6e6e6;
  color: #9a9a9a;
  box-shadow: 5px 5px 0 rgba(43,43,43,.35);
  cursor: not-allowed;
}
.exam-submit i { font-size: 20px; }

/* 暂不考试按钮 */
.exam-skip-btn {
  margin-top: 14px;
  background: transparent;
  border: none;
  color: #2b2b2b;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: underline wavy #2b2b2b 2px;
  text-underline-offset: 5px;
  transition: all .2s;
}
.exam-skip-btn:active { transform: scale(0.96); opacity: 0.7; }
/* ---------- Exam track (逐题进度条) ---------- */
.exam-track {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 14px;
}
.exam-track-bar {
  flex: 1;
  height: 18px;
  background: #fff;
  border: 3px solid #2b2b2b;
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(43,43,43,.85);
  overflow: hidden;
}
.exam-track-bar i {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(135deg, #ff6b9d 0 12px, #ff9eb5 12px 24px);
  border-radius: 999px;
  transition: width .3s ease;
}
.exam-track-num {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
  color: #2b2b2b;
  background: #ffd93d;
  border: 2.5px solid #2b2b2b;
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 2px 2px 0 rgba(43,43,43,.85);
}

/* ---------- 单题作答容器 ---------- */
.exam-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding-bottom: 130px;
}
.exam-opt-check {
  margin-left: auto;
  opacity: 0;
  transform: scale(.5);
  transition: all .2s;
  color: #ff6b9d;
  flex-shrink: 0;
}
.exam-option.selected .exam-opt-check { opacity: 1; transform: scale(1); }
.exam-option.selected .exam-opt-check i { font-size: 22px; }

/* ---------- 答题卡 ---------- */
.exam-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: #fff;
  border: 3px solid #2b2b2b;
  border-radius: 14px;
  box-shadow: 3px 3px 0 rgba(43,43,43,.85);
}
.exam-dot {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2.5px solid #2b2b2b;
  background: #fff;
  color: #2b2b2b;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(43,43,43,.5);
  transition: all .15s;
}
.exam-dot.answered { background: #ffd93d; }
.exam-dot.current {
  background: #2b2b2b;
  color: #ffd93d;
  transform: translate(2px, 2px);
  box-shadow: none;
}
.exam-dot:active { transform: translate(2px, 2px); box-shadow: none; }

/* ---------- Footer 三栏：上/下一题 + 提交 ---------- */
.exam-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, #ffb3cd 70%, transparent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.exam-footer .exam-submit { flex: 1; padding: 13px; font-size: 15px; }
.exam-nav-btn {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #2b2b2b;
  border-radius: 13px;
  background: #fff;
  color: #2b2b2b;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(43,43,43,.85);
  transition: all .12s;
}
.exam-nav-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.exam-nav-btn:disabled { opacity: .35; box-shadow: 2px 2px 0 rgba(43,43,43,.3); cursor: not-allowed; }
.exam-nav-btn i { font-size: 24px; }
/* ---------- 考试界面 · 多机型适配 ---------- */
/* 刘海屏：卡片顶部让出安全区 */
.exam-card {
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 0;
}

/* 窄屏（<=400px）：压缩字号、间距与控件 */
@media (max-width: 400px) {
  .exam-card { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0; }
  .exam-header { padding: 10px 2px 12px; gap: 6px; }
  .exam-title { gap: 9px; }
  .exam-title > i { font-size: 22px; padding: 6px; }
  .exam-title h2 { font-size: 15px; padding: 4px 10px; }
  .exam-title p { font-size: 10px; }
  .exam-tag { font-size: 11px; padding: 3px 8px; }
  .exam-track { margin: 10px 0 12px; gap: 8px; }
  .exam-track-bar { height: 15px; border-width: 2.5px; }
  .exam-track-num { font-size: 12px; padding: 2px 8px; }
  .exam-q-num { width: 26px; height: 26px; font-size: 12px; }
  .exam-q-text { font-size: 14px; }
  .exam-option { padding: 10px 12px; gap: 8px; }
  .exam-opt-text { font-size: 13px; }
  .exam-opt-letter { width: 24px; height: 24px; font-size: 12px; }
  .exam-dot { width: 27px; height: 27px; font-size: 12px; }
  .exam-dots { gap: 7px; padding: 10px; margin-top: 14px; }
  .exam-nav-btn { width: 40px; height: 40px; }
  .exam-nav-btn i { font-size: 21px; }
  .exam-footer { gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .exam-footer .exam-submit { font-size: 13px; padding: 12px 8px; }
  .exam-skip-btn { margin-top: 12px; font-size: 13px; }
}
/* 超窄屏（<=340px）：进一步压缩，避免答题卡被底部遮挡 */
@media (max-width: 340px) {
  .exam-title p { font-size: 9px; margin-top: 2px; }
  .exam-dot { width: 24px; height: 24px; font-size: 11px; }
  .exam-dots { gap: 6px; padding: 8px; margin-top: 10px; }
  .exam-option { padding: 9px 10px; }
  .exam-q-head { margin-bottom: 9px; }
  .exam-question { padding: 13px; }
  .exam-body { padding-bottom: 108px; }
}

/* 矮屏（<=700px 高）：压缩开始页与答题页头部 */
@media (max-height: 700px) {
  .exam-start { gap: 10px; padding: 14px 20px; }
  .exam-start-illust { width: 72px; height: 72px; }
  .exam-start-illust i { font-size: 30px; }
  .exam-header { padding: 8px 4px 10px; }
  .exam-body { padding-bottom: 118px; }
}

/* 横屏小高度（<=500px 高）：隐藏次要信息，紧凑排布（保证答题卡不被底部遮挡） */
@media (max-height: 500px) {
  .exam-start { gap: 8px; padding: 8px 16px; }
  .exam-start-illust { width: 56px; height: 56px; }
  .exam-start-illust i { font-size: 24px; }
  .exam-start-sub { display: none; }
  .exam-header p,
  .exam-track,
  .exam-dots { display: none; }
  .exam-header { padding: 6px 4px 8px; }
  .exam-body { padding-bottom: 92px; }
  .exam-option { padding: 7px 10px; }
  .exam-q-head { margin-bottom: 6px; }
  .exam-question { padding: 11px; margin-bottom: 6px; }
  .exam-dots { margin-top: 6px; padding: 7px; gap: 6px; }
  .exam-dot { width: 24px; height: 24px; }
  .exam-q-num { width: 24px; height: 24px; font-size: 12px; }
  .exam-footer { padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .exam-nav-btn { width: 40px; height: 40px; }
  .exam-nav-btn i { font-size: 20px; }
}

/* ---------- Report Card (漫画成绩卡) ---------- */
.report-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(43, 43, 43, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.3s var(--ease-main);
}
.report-card {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border: 4px solid #2b2b2b;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  box-shadow: 8px 8px 0 rgba(43,43,43,.85);
  position: relative;
  animation: popIn 0.4s var(--ease-main);
}
@keyframes popIn {
  from { transform: scale(0.8) rotate(-2deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
/* 成绩卡星爆角标：右上角 */
.report-card::after {
  content: "★";
  position: absolute;
  top: -16px; right: -12px;
  width: 44px; height: 44px;
  background: #ffd93d;
  border: 3px solid #2b2b2b;
  border-radius: 50%;
  color: #2b2b2b;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(14deg);
  box-shadow: 3px 3px 0 rgba(43,43,43,.85);
  z-index: 2;
}
.report-card.fail::after {
  content: "!";
  background: #d9d9d9;
}

.report-ribbon {
  text-align: center;
  padding: 22px 0 8px;
  background:
    repeating-conic-gradient(from 0deg, #ffd93d 0deg 14deg, #ffb300 14deg 28deg);
  border-bottom: 3px solid #2b2b2b;
  position: relative;
}
.report-card.fail .report-ribbon {
  background:
    repeating-conic-gradient(from 0deg, #e6e6e6 0deg 14deg, #c9c9c9 14deg 28deg);
}
.report-ribbon i {
  font-size: 54px;
  color: #2b2b2b;
  background: #fff;
  border: 3px solid #2b2b2b;
  border-radius: 50%;
  width: 86px; height: 86px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 4px 4px 0 rgba(43,43,43,.85);
  position: relative;
  z-index: 1;
}

.report-header {
  text-align: center;
  padding: 12px 20px 4px;
}
.report-header h3 {
  font-size: 18px;
  font-weight: 900;
  color: #2b2b2b;
  margin: 0;
  display: inline-block;
  background: #fff;
  border: 3px solid #2b2b2b;
  border-radius: 12px;
  padding: 5px 14px;
  box-shadow: 3px 3px 0 rgba(43,43,43,.85);
  transform: rotate(-1.5deg);
}
.report-sub {
  font-size: 12px;
  font-weight: 800;
  color: #8a6a72;
  margin: 8px 0 0;
  letter-spacing: 4px;
}

.report-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 4px;
}
.report-name-row label {
  font-size: 13px;
  color: #2b2b2b;
  font-weight: 800;
  flex-shrink: 0;
  background: #ffe9b8;
  border: 2px solid #2b2b2b;
  border-radius: 8px;
  padding: 2px 8px;
}
.report-name-row input {
  flex: 1;
  border: 2.5px solid #2b2b2b;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  color: #2b2b2b;
  outline: none;
  background: #fff;
}
.report-name-row input:focus { background: #fffbe8; }

.report-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 16px 20px 6px;
}
.score-num {
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  color: #2b2b2b;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 #ffd93d;
}
.report-card.fail .score-num {
  -webkit-text-stroke: 6px #fff;
  text-shadow: 5px 5px 0 #d9d9d9;
}
.score-unit {
  font-size: 20px;
  font-weight: 900;
  color: #2b2b2b;
}

.report-result {
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  padding: 4px 20px;
}
.pass-text {
  color: #2b2b2b;
  background: #ffd93d;
  border: 3px solid #2b2b2b;
  border-radius: 12px;
  display: inline-block;
  padding: 5px 14px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 rgba(43,43,43,.85);
}
.fail-text {
  color: #2b2b2b;
  background: #e6e6e6;
  border: 3px solid #2b2b2b;
  border-radius: 12px;
  display: inline-block;
  padding: 5px 14px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 rgba(43,43,43,.85);
}

.report-details {
  margin: 14px 20px;
  padding: 14px 16px;
  background: #fff8e8;
  border: 2.5px dashed #2b2b2b;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
}
.report-detail-row span:first-child { color: #8a6a72; }
.report-detail-row span:last-child { color: #2b2b2b; font-weight: 900; }

.report-actions {
  padding: 0 20px 22px;
  display: flex;
  gap: 10px;
}
.report-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px;
  border: 3px solid #2b2b2b;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.report-btn:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}
.report-btn.retry {
  background: #ffd93d;
  color: #2b2b2b;
  box-shadow: 4px 4px 0 rgba(43,43,43,.85);
}
.report-btn.enter {
  background: #ff6b9d;
  color: #fff;
  box-shadow: 4px 4px 0 rgba(43,43,43,.85);
}
.report-btn.skip {
  background: #fff;
  border: 3px solid #2b2b2b;
  color: #2b2b2b;
  box-shadow: 4px 4px 0 rgba(43,43,43,.85);
}
.report-btn i { font-size: 18px; }
/* ---------- 成绩单 · 多机型适配 ---------- */
.report-modal { padding: 16px; }
.report-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
@media (max-width: 340px) {
  .report-card { max-width: 100%; }
  .report-modal { padding: 10px; }
  .report-card { max-height: calc(100dvh - 20px); }
}

/* ---------- Profile Hero (个人资料社交卡 · 左侧头像布局) ---------- */
/* ===== 我的页：OKK 个人主页风格 ===== */
.view-mine {
  position: relative;
  background: #eef0f4;
}
.view-mine::before {
  content: "昼圈";
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%) rotate(-16deg);
  font-size: 130px;
  font-weight: 900;
  letter-spacing: 6px;
  color: rgba(120, 130, 160, 0.06);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}
.view-mine > * {
  position: relative;
  z-index: 1;
}
.view-mine .sub-header {
  background: transparent;
}
.ok-profile {
  position: relative;
  margin: 4px 16px 16px;
  padding: 18px 16px 14px;
  border-radius: 24px;
  background: transparent;
  overflow: hidden;
  box-shadow: none;
}
.ok-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ok-avatar-box {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ok-avatar-box:active { transform: scale(0.96); }
.ok-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ffffff;
  position: relative;
  z-index: 1;
}
.ok-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ok-avatar i {
  font-size: 40px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ok-lv {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff7eb3;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.ok-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.ok-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.ok-name-row .ok-name { flex: 1; min-width: 0; }
.ok-title {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #ff9eb5, #ff7eb3);
  flex-shrink: 0;
  line-height: 1.7;
  box-shadow: 0 2px 6px rgba(255, 126, 179, 0.3);
}
.ok-account {
  font-size: 13px;
  color: #8a8f9e;
  font-weight: 500;
}
.ok-bio {
  font-size: 13px;
  color: #5c6070;
  line-height: 1.4;
}
.ok-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #9aa0ae;
}
.ok-name {
  font-size: 20px;
  font-weight: 800;
  color: #1c1c24;
  letter-spacing: 0.5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  line-height: 1.3;
}
.ok-name.ok-login-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2d6bff;
  cursor: pointer;
}
.ok-name.ok-login-hint::after {
  content: "chevron_right";
  font-family: "Material Icons";
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.ok-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.ok-meta .ok-id,
.ok-meta .ok-days {
  font-size: 13px;
  color: #8a8f9e;
  font-weight: 500;
}
.ok-meta .ok-sep { color: #c0c4cc; font-size: 12px; }


.ok-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
  position: relative;
  z-index: 1;
}
.ok-edit:active { opacity: 0.7; }
.ok-edit .material-icons { font-size: 15px; }
.ok-edit i {
  font-size: 18px;
}
.ok-grid {
  position: relative;
  z-index: 1;
  display: flex;
  margin: 16px 0 0;
  padding: 13px 0 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.ok-grid-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ok-grid-item b {
  font-size: 19px;
  font-weight: 800;
  color: #1c1c24;
  font-variant-numeric: tabular-nums;
}
.ok-stat span {
  font-size: 12px;
  color: #8a8f9e;
  font-weight: 500;
}
.view-mine .section-title {
  padding-left: 22px;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.hero-btn i { font-size: 16px; }
.hero-btn:active { transform: scale(0.94); }
.hero-edit {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 4px 12px rgba(255,158,181,0.35);
}
.hero-logout {
  background: var(--bg);
  color: var(--text-2);
  border-color: var(--border);
}
.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 16px 18px;
}
.profile-info-item {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  min-width: 0;
}
.profile-info-item i { font-size: 18px; color: var(--primary); }
.info-label { font-size: 11px; color: var(--text-2); }
.info-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.btn-sm { padding: 7px 12px; font-size: 12px; }

/* 点击展开：缓慢提升卡片高度 + 柔和透明度变化 + 阴影缓慢加深，无弹跳 */
.auth-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0.9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition:
    grid-template-rows 0.55s var(--ease-main),
    opacity 0.55s var(--ease-main),
    box-shadow 0.55s var(--ease-main);
}
.auth-panel.expanded {
  grid-template-rows: 1fr;
  opacity: 1;
  box-shadow: var(--shadow);
}
.auth-panel > .auth-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.55s var(--ease-main);
}
.auth-panel.expanded > .auth-inner {
  opacity: 1;
  padding: 4px 16px 18px;
  border-top: 1px solid var(--border);
}

.auth-tabs {
  display: flex;
  gap: 6px;
  padding: 14px 0 16px;
}
.auth-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 6px;
  border: none;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
}
.auth-tab i { font-size: 16px; }
.auth-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 30%, transparent);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeSlide 0.3s ease;
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.auth-field {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-field input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.field-icon {
  position: absolute;
  left: 13px;
  font-size: 18px;
  color: var(--text-2);
  pointer-events: none;
}
.field-suffix {
  position: absolute;
  right: 13px;
  font-size: 18px;
  color: var(--text-2);
  cursor: pointer;
}
.auth-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  padding: 0 2px;
}
.auth-hint i { font-size: 15px; color: var(--primary); }
.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 30%, transparent);
  transition: transform 0.15s;
}
.auth-submit:active { transform: scale(0.97); }
.auth-submit i { font-size: 18px; }
.auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
  margin: 4px 0 0;
}
.auth-switch span {
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  margin-left: 4px;
}

/* ---------- Account Avatar Image ---------- */
.account-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ---------- Profile Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.profile-modal {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  padding: 20px 18px 32px;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
  animation: slideUp 0.35s var(--ease-main);
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  position: relative;
}
.profile-avatar-large {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.profile-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar-large .material-icons {
  font-size: 32px;
  color: var(--text-2);
}
.profile-title { flex: 1; min-width: 0; }
.profile-name-display {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 2px;
}
.profile-email-display {
  font-size: 13px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-close {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.profile-close:hover { background: var(--primary); color: #fff; }
.profile-close .material-icons { font-size: 20px; }

.profile-section { margin-bottom: 8px; }
.profile-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 12px;
}
.profile-section-title .material-icons {
  font-size: 18px;
  color: var(--primary);
}
.profile-divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}
.profile-modal .auth-submit { width: 100%; }

.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.35s var(--ease-main);
}
.modal-fade-enter-from,
.modal-fade-leave-to { opacity: 0; }

@media (min-width: 600px) {
  .modal-overlay { align-items: center; padding: 20px; }
  .profile-modal {
    border-radius: 20px;
    max-height: 85vh;
    animation: popIn 0.3s var(--ease-main);
  }
  @keyframes popIn {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
}

/* ---------- Auth Modal (登录/注册/忘记密码 弹窗) ---------- */
.auth-modal {
  width: 100%;
  max-width: 440px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  padding: 20px 20px 32px;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.15);
  animation: slideUp 0.4s var(--ease-main);
  -webkit-overflow-scrolling: touch;
}
.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.auth-modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.auth-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.auth-modal-close:hover {
  background: var(--border);
  color: var(--text);
}
.auth-modal-close i { font-size: 20px; }

.auth-modal .auth-tabs {
  padding: 6px 0 18px;
}
.auth-modal .auth-form {
  gap: 14px;
}
.auth-modal .auth-submit {
  margin-top: 6px;
}

/* ---------- Auth 全屏极简登录页（参考网盘登录样式） ---------- */
.auth-full-overlay {
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: stretch;
}
.auth-full {
  max-width: 480px;
  max-height: none;
  height: 100vh;
  overflow-y: auto;
  border-radius: 0;
  padding: 0 32px;
  box-shadow: none;
  animation: none;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: var(--bg);
}
.auth-full-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: var(--bg-2);
}
.auth-full-body {
  padding: 40px 0 24px;
}
.auth-full-brand {
  font-size: 26px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 3px;
}
.auth-full-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  margin: 6px 0 40px;
}
.auth-mini {
  gap: 6px;
}
.auth-field.line-field input {
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  padding: 15px 2px;
  background: transparent;
  font-size: 15px;
  color: var(--text);
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}
.auth-field.line-field input:focus {
  border-color: var(--primary);
  box-shadow: none;
}
.auth-field.line-field input::placeholder {
  color: #b0b0b0;
}
.auth-forgot-field input {
  padding-right: 88px;
}
.auth-forgot {
  position: absolute;
  right: 2px;
  bottom: 17px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  background: var(--bg);
  padding-left: 10px;
}
.auth-circle-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transition: transform 0.15s, opacity 0.2s;
}
.auth-circle-btn:active {
  transform: scale(0.92);
}
.auth-circle-btn i {
  font-size: 24px;
}
.auth-full .auth-switch {
  margin-top: 28px;
  font-size: 14px;
}
.auth-full .auth-switch span {
  color: var(--text);
  font-weight: 700;
}

.auth-back-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}
.auth-back-btn i {
  font-size: 20px;
}

.auth-credit {
  margin-top: 18px;
  font-size: 11px;
  color: #c0c0c0;
  text-align: center;
  letter-spacing: 0.5px;
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}
.provider-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 8px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.provider-card:active { transform: scale(0.96); }
.provider-card.active {
  border-color: var(--pc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 18%, transparent);
}
.provider-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.provider-name { font-size: 13px; font-weight: 700; color: var(--text); }
.provider-desc { font-size: 10px; color: var(--text-2); text-align: center; line-height: 1.3; }
.model-select-wrap {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  overflow: hidden;
}
.model-select {
  width: 100%;
  padding: 12px 12px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.chat-back-btn { margin-top: 10px; }
.chat-model-bar {
  display: flex;
  justify-content: center;
  padding: 8px 12px 2px;
}
.chat-model-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chat-model-chip i { font-size: 16px; color: var(--primary); }
.chat-model-chip span { font-weight: 600; color: var(--text); }
.chat-model-chip:active { background: var(--bg-3); }

/* ===== AI Chat 手机App风格 ===== */
.view-chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: var(--bg);
}
.chat-free-pill {
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.chat-free-pill.active {
  background: var(--primary);
  color: #fff;
}
.chat-free-pill.active i {
  color: #fff;
}
.chat-free-tag {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 6px;
  font-size: 10px;
  line-height: 16px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  vertical-align: 1px;
}
.dark .chat-free-tag {
  background: rgba(255, 255, 255, 0.16);
  color: #cfd6e4;
}.chat-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.chat-topbar-user {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.chat-topbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
}
.chat-topbar-info { display: flex; flex-direction: column; min-width: 0; }
.chat-topbar-name { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.2; }
.chat-topbar-status {
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
/* 顶栏图标按钮：极简幽灵圆钮 */
.chat-topbar .icon-btn,
.chat-more-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-2);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.chat-topbar .icon-btn i,
.chat-more-btn i { font-size: 20px; }
.chat-topbar .icon-btn:active,
.chat-more-btn:active { background: color-mix(in srgb, var(--text-2) 12%, transparent); }

/* 顶栏更多菜单（毛玻璃小气泡） */
.chat-more-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.chat-more-menu {
  position: absolute;
  top: 58px;
  right: 12px;
  min-width: 150px;
  padding: 6px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--card) 84%, transparent));
  backdrop-filter: saturate(150%) blur(24px);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  animation: moreMenuIn 0.2s var(--ease-main);
}
@keyframes moreMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}
.chat-more-item i { font-size: 18px; color: var(--text-2); }
.chat-more-item:active { background: var(--bg-2); }
.chat-more-item.danger { color: #ff5b5b; }
.chat-more-item.danger i { color: #ff5b5b; }
.chat-more-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

/* ===== 表情选择器 ===== */
.chat-emoji-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.chat-emoji-btn i { font-size: 22px; }
.chat-emoji-btn.active { color: var(--primary); }
.chat-emoji-btn:active { background: var(--bg-2); }

.chat-emoji-panel {
  margin: 0 10px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  animation: emojiPanelUp 0.25s var(--ease-main);
}
@keyframes emojiPanelUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chat-emoji-tabs { display: flex; border-bottom: 1px solid var(--border); }
.chat-emoji-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 0;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.2s;
}
.chat-emoji-tab i { font-size: 18px; }
.chat-emoji-tab.active { color: var(--primary); font-weight: 600; }
.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 10px 8px;
  max-height: 210px;
  overflow-y: auto;
}
.chat-emoji-item {
  font-size: 24px;
  line-height: 1;
  padding: 6px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
}
.chat-emoji-item:active { background: var(--bg-2); }
.chat-sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
  max-height: 210px;
  overflow-y: auto;
}
.chat-sticker-item {
  position: relative;
  aspect-ratio: 1;
  border: none;
  background: var(--bg-2);
  border-radius: 12px;
  cursor: pointer;
  overflow: visible;
}
.chat-sticker-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.chat-sticker-item:active { transform: scale(0.94); }
.chat-sticker-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.chat-sticker-del i { font-size: 14px; }
.chat-sticker-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  font-size: 11px;
}
.chat-sticker-add i { font-size: 22px; }
.chat-sticker-add:active { background: var(--bg-3); }

/* 气泡内表情图片 */
.chat-msg-sticker {
  display: block;
  max-width: 140px;
  max-height: 140px;
  border-radius: 10px;
  margin-top: 6px;
}

/* ===== AI头像设置弹层 ===== */
.chat-avatar-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(300px, 82vw);
  padding: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card) 88%, transparent));
  backdrop-filter: saturate(150%) blur(24px);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-avatar-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.chat-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
}
.chat-avatar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  border: none;
  background: transparent;
  border-radius: 14px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s;
}
.chat-avatar-item i { font-size: 20px; color: var(--primary); }
.chat-avatar-item:active { background: var(--bg-2); }
.chat-avatar-cancel {
  margin-top: 4px;
  color: var(--text-2);
  background: var(--bg-2);
}
.chat-avatar-cancel:active { background: var(--bg-3); }
.chat-model-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px;
  background: var(--bg);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chat-model-strip::-webkit-scrollbar { display: none; }
.chat-model-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.chat-model-pill .pill-icon { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }
.chat-model-pill.active {
  border-color: var(--pc);
  color: var(--pc);
  background: color-mix(in srgb, var(--pc) 8%, var(--bg));
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 82%;
}
.chat-msg.user {
  flex-direction: row-reverse;
  align-self: flex-end;
}
.chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-2);
}
.chat-msg-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.chat-msg.ai .chat-msg-bubble {
  background: var(--bg-2);
  color: var(--text);
  border-top-left-radius: 4px;
}
.chat-msg.user .chat-msg-bubble {
  background: #3d8bfd;
  color: #fff;
  border-top-right-radius: 4px;
}
.chat-msg-name { display: block; font-size: 11px; color: var(--text-2); margin-bottom: 3px; }
.chat-msg-text { margin: 0; white-space: pre-wrap; }
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 16px; }
.typing .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-2);
  animation: typing-dot 1.2s infinite ease-in-out;
}
.typing .dot:nth-child(2) { animation-delay: 0.2s; }
.typing .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.chat-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 0;
  color: var(--text-2);
  overflow: hidden;
}
.chat-empty::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}
.chat-empty-avatar {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 14px;
  border: 3px solid color-mix(in srgb, var(--primary) 45%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 25%, transparent);
}
.chat-empty-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.chat-empty-desc { font-size: 13px; }
.chat-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px calc(10px + env(safe-area-inset-bottom));
  padding: 10px 10px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.chat-input-shell {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-input-shell:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.chat-input-shell textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  max-height: 90px;
}
.chat-send-btn {
  min-width: 64px;
  height: 40px;
  padding: 0 18px;
  border-radius: 22px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s, opacity 0.2s, background 0.2s;
}
.chat-send-btn:disabled { opacity: 0.45; }
.chat-send-btn:active { transform: scale(0.94); }
.chat-send-btn.stop { background: #ff6b6b; }
.chat-setup-hint {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  text-align: center;
}
.chat-setup-illust {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff1f5, #ffd6e0);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.chat-setup-illust img { width: 100%; height: 100%; border-radius: 24px; object-fit: cover; }
.chat-setup-hint h3 { font-size: 16px; color: var(--text); margin: 0 0 8px; }
.chat-setup-hint p { font-size: 12px; color: var(--text-2); line-height: 1.5; margin: 0 0 20px; }
.chat-setup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: 22px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.chat-setup-btn:active { transform: scale(0.96); }
.chat-setup-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 280px;
}
.chat-setup-actions .chat-setup-btn {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
.chat-setup-actions .chat-setup-btn i {
  font-size: 16px;
  line-height: 1;
}
.chat-setup-btn.chat-setup-free {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.chat-setup-free-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: contain;
}

/* 模型设置底部弹层 */
.sheet-up-enter-active, .sheet-up-leave-active { transition: transform 0.28s var(--ease-main), opacity 0.28s; }
.sheet-up-enter-from, .sheet-up-leave-to { transform: translateY(100%); opacity: 0.6; }
.model-sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-end;
}
.model-sheet {
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
  will-change: transform;
}
.model-sheet.dragging {
  transition: none;
  cursor: grabbing;
}
.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 6px auto 12px;
}
.sheet-title { font-size: 17px; font-weight: 800; color: var(--text); }
.sheet-sub { font-size: 12px; color: var(--text-2); margin: 4px 0 14px; }
.sheet-provider-list { display: flex; flex-direction: column; gap: 10px; }
.sheet-provider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: left;
}
.sheet-provider.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
}
.sheet-provider-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.sheet-provider-badge img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.sheet-provider-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet-provider-name { font-size: 14px; font-weight: 700; color: var(--text); }
.sheet-provider-desc { font-size: 11px; color: var(--text-2); }
.sheet-provider-state { color: var(--text-2); display: flex; align-items: center; }
.sheet-provider-state.ok { color: #2ecc71; }
.sheet-provider-state i { font-size: 20px; }
.sheet-config { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }

/* ===== 关于（复刻 OKK 参考样式） ===== */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  margin-bottom: 12px;
}
.about-app-icon {
  width: 84px;
  height: 84px;
  border-radius: 22%;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
.about-app-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-top: 12px;
}
.about-app-version {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 3px;
}
.about-check-btn {
  margin-top: 14px;
  padding: 9px 30px;
  border-radius: 22px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent);
  transition: transform 0.15s;
}
.about-check-btn:active { transform: scale(0.95); }
.about-menu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 12px;
}
.about-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 18px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.about-row:last-child { border-bottom: none; }
.about-row i { color: var(--text-2); font-size: 20px; }
.about-row:active { background: var(--bg-2); }
.about-foot {
  text-align: center;
  padding: 14px 0 8px;
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.7;
}
.about-contact {
  font-size: 13px;
  color: var(--primary);
  cursor: pointer;
  margin-bottom: 6px;
  font-weight: 600;
}


/* ===== 我的页功能列表（复刻设置页参考样式） ===== */
.mine-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 12px;
}
.mine-group-title {
  padding: 12px 18px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}
.mine-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.mine-row:last-child { border-bottom: none; }
.mine-row i:first-child { color: var(--primary); font-size: 22px; }
.mine-row-label { flex: 1; font-weight: 500; }
.mine-row-val { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.mine-chevron { color: var(--text-2) !important; font-size: 20px !important; }
.mine-row:active { background: var(--bg-2); }
.mine-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 16px 0 8px;
  padding: 13px;
  border-radius: 24px;
  border: none;
  background: #ff5b5b;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 91, 91, 0.35);
  transition: transform 0.15s;
}
.mine-logout-btn:active { transform: scale(0.97); }


/* ===== 我的页右上角设置入口 ===== */
.sub-header-right {
  width: 36px;
  height: 36px;
  font-size: 15px;
}
.view-settings { padding-bottom: 24px; }


/* ===== 关于移入其他分组：去嵌套卡片边框 ===== */
.mine-group .about-hero {
  background: none;
  border: none;
  box-shadow: none;
  padding: 18px 0 10px;
  margin-bottom: 0;
}
.mine-group .about-menu {
  background: none;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}
.mine-group .about-row {
  padding: 13px 18px;
}
.mine-group .about-foot {
  padding: 14px 0 16px;
}


/* ===== 关于独立页 ===== */
.view-about { padding-bottom: 24px; }
.view-about .about-hero {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: none;
  padding: 28px 0 24px;
  margin-bottom: 12px;
}
.view-about .about-menu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  margin-bottom: 12px;
}
.view-about .about-foot {
  padding: 14px 0 8px;
}


/* ===== 首页白色公告横幅 ===== */
.home-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 12px;
  padding: 11px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.home-notice > i:first-child {
  color: #ff9f43;
  font-size: 20px;
  flex-shrink: 0;
}
.home-notice-text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-notice-arrow {
  color: var(--text-2);
  font-size: 18px;
  flex-shrink: 0;
}
.home-notice:active { background: var(--bg-2); }


/* ===== 首页帖子流（公告横幅下方，无标题） ===== */
.view-home .featured-section {
  margin-bottom: 4px;
}


/* ===== 登录人机验证码 ===== */
.auth-captcha-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-captcha-field input {
  flex: 1;
  padding-right: 0;
}
.auth-captcha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 36px;
  min-width: 92px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px dashed var(--border);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 1px;
  transition: opacity 0.15s;
}
.auth-captcha:active { opacity: 0.75; }
.auth-captcha span { line-height: 1; }


/* ===== 登录页半截背景图 ===== */
.auth-login-hero {
  position: relative;
  height: 240px;
  margin: -40px -32px 26px;
  overflow: hidden;
  flex-shrink: 0;
}
.auth-login-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.auth-login-hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 48%, var(--bg) 100%);
}


/* ===== AI聊天 新人指引独立窗口 ===== */
.chat-guide-overlay {
  background: rgba(13, 38, 66, 0.45);
  z-index: 220;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.chat-guide-modal {
  position: relative;
  width: 86%;
  max-width: 420px;
  max-height: 82vh;
  overflow-y: auto;
  background: #f4f9ff;
  border-radius: 24px;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 48px rgba(13, 38, 66, 0.20);
  -webkit-overflow-scrolling: touch;
}
.chat-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.chat-guide-head h3 {
  font-size: 19px;
  font-weight: 800;
  color: #16324f;
  letter-spacing: 1px;
}
.chat-guide-sub {
  font-size: 12.5px;
  color: #7b93ab;
  margin-bottom: 16px;
}
.chat-guide-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-guide-step {
  display: flex;
  gap: 12px;
  padding: 13px 14px;
  background: #e9f3ff;
  border-radius: 16px;
}
.guide-step-no {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #4facfe, #2d6bff);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.guide-step-body h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: #1b3a5c;
  margin-bottom: 3px;
}
.guide-step-body p {
  font-size: 12.5px;
  line-height: 1.6;
  color: #6d87a2;
}
.chat-guide-start {
  width: 100%;
  height: 46px;
  margin-top: 18px;
  border: none;
  border-radius: 23px;
  background: linear-gradient(135deg, #4facfe, #2d6bff);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(45, 107, 255, 0.35);
}
.chat-guide-start:active { opacity: 0.85; }


.chat-guide-docs {
  margin-top: 16px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #d8e9ff;
  border-radius: 16px;
}
.chat-guide-docs h4 {
  font-size: 14px;
  font-weight: 800;
  color: #1b3a5c;
  margin-bottom: 3px;
}
.chat-guide-docs-tip {
  font-size: 11.5px;
  line-height: 1.5;
  color: #7b93ab;
  margin-bottom: 10px;
}
.guide-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s;
}
.guide-doc-item:hover,
.guide-doc-item:active {
  background: #e9f3ff;
}
.guide-doc-item img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
}
.guide-doc-item span {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: #1b3a5c;
}
.guide-doc-item i {
  font-size: 17px;
  color: #a9c4e0;
}


/* ===== 个性资料页（复刻参考图：头像 + 三行信息） ===== */
.view-profile-edit {
  background: #eef0f4;
}
.view-profile-edit .sub-header {
  background: #eef0f4;
}
.pe-avatar-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 40px 0 30px;
}
.pe-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, #ffd7e8, #c3dcff);
  box-shadow: 0 10px 28px rgba(90, 120, 200, 0.20), inset 0 0 0 4px rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pe-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pe-avatar i {
  font-size: 54px;
  color: #fff;
}
.pe-avatar-edit {
  position: absolute;
  right: calc(50% - 66px);
  bottom: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #eef0f4;
  background: #ffffff;
  color: #6d7585;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pe-avatar-edit i {
  font-size: 16px;
}
.pe-list {
  background: #ffffff;
  border-radius: 18px;
  margin: 0 16px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.04);
}
.pe-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px 18px;
  border: none;
  border-bottom: 1px solid #f0f1f4;
  background: transparent;
  cursor: pointer;
}
.pe-row:last-child { border-bottom: none; }
.pe-row:active { background: #fafbfc; }
.pe-label {
  width: 72px;
  font-size: 15px;
  font-weight: 600;
  color: #3a3f4b;
  text-align: left;
}
.pe-val {
  flex: 1;
  font-size: 14px;
  color: #1c1c24;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pe-intro {
  color: #6d7585;
}
.pe-chevron {
  font-size: 18px;
  color: #c3c7d0;
  margin-left: 6px;
}
.pe-tip {
  text-align: center;
  font-size: 12px;
  color: #a2a7b3;
  margin-top: 18px;
}
/* 编辑弹层输入 */
.pe-input-wrap {
  padding: 14px 20px 6px;
}
.pe-input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: none;
  border-radius: 14px;
  background: #f5f6f9;
  font-size: 15px;
  color: #1c1c24;
  outline: none;
}
.pe-input:focus {
  box-shadow: 0 0 0 2px rgba(77, 107, 254, 0.35);
}
.pe-save-row {
  padding: 14px 20px 30px;
}
.pe-save-btn {
  width: 100%;
  padding: 13px 0;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #2d6bff, #5b8cff);
  box-shadow: 0 4px 12px rgba(45, 107, 255, 0.25);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.pe-save-btn:active { opacity: 0.85; }


/* ===== 更多设置独立页（复刻设置列表样式） ===== */
.view-more-settings {
  background: #f5f6f9;
}
.view-more-settings .sub-header {
  background: #f5f6f9;
}
.ms-page {
  padding: 6px 16px 28px;
}
.ms-page .mine-group {
  margin-bottom: 14px;
}
.ms-page .mine-group-title {
  padding: 0 6px;
  color: #8a8f9e;
}
.ms-avatar-row .ms-avatar-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.35;
}
.ms-avatar-row .ms-row-sub {
  font-size: 12px;
  color: #a2a7b3;
}
.ms-row-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.ms-page .more-close-btn {
  margin-top: 26px;
}

/* ===== 主题/语言选择底部弹层 ===== */
/* ===== 重构：选择弹层（把手 + 标题 + 单选样式） ===== */
.picker-sheet {
  border-radius: 24px 24px 0 0;
  background: #ffffff;
}
.picker-grabber {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #e4e6eb;
  margin: 10px auto 4px;
}
.picker-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 2px;
}
.picker-sheet-head span {
  font-size: 17px;
  font-weight: 800;
  color: #1c1c24;
  letter-spacing: 0.5px;
}
.picker-sheet-sub {
  font-size: 12px;
  color: #a2a7b3;
  padding: 2px 20px 4px;
}
/* 主题：横向滑动圆形卡 + 选中描边对勾 */
.picker-theme-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 16px 20px 28px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.picker-theme-scroll::-webkit-scrollbar { display: none; }
.picker-theme-circle {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.theme-circle {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
  transition: transform 0.2s;
}
.picker-theme-circle.active .theme-circle {
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--p, #4facfe), 0 6px 16px rgba(0,0,0,0.14);
  transform: scale(1.06);
}
.picker-circle-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 22px;
  height: 22px;
  font-size: 22px;
  background: #ffffff;
  border-radius: 50%;
  color: #27b462;
  box-shadow: 0 1px 5px rgba(0,0,0,0.22);
}
.picker-theme-circle span {
  font-size: 12px;
  font-weight: 600;
  color: #6d7585;
}
.picker-theme-circle.active span {
  color: #1c1c24;
}
/* 语言：单选行列表 */
.lang-picker-list {
  padding: 8px 16px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lang-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 16px;
  border: none;
  border-radius: 14px;
  background: #f5f6f9;
  color: #3a3f4b;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.lang-picker-row:active { transform: scale(0.985); }
.lang-picker-row.active {
  background: #eaf3ff;
  color: #1b3a5c;
}
.lang-picker-row i {
  font-size: 20px;
  color: #2d6bff;
}


/* ---------- Responsive ---------- */
@media (min-width: 600px) {
  body { display: flex; justify-content: center; }
  #app {
    max-width: 480px;
    width: 100%;
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
  }
  .bottom-nav { max-width: 480px; left: 50%; transform: translateX(-50%); }
  .auth-modal {
    border-radius: 20px;
    max-height: 85vh;
    animation: popIn 0.35s var(--ease-main);
  }
  .more-settings-modal {
    max-width: 480px;
  }
}

/* ============== MESSAGE SYSTEM (统一消息列表) ============== */
.view-messages {
  padding-bottom: 100px;
}
.msg-header {
  padding: 16px 20px 8px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
}
.msg-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* Unread badge (通知未读红点 + 私信数字徽标) */
.msg-badge.dm-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 12px;
}

/* Unified message list */
.msg-list.unified {
  padding: 6px 16px;
}
.msg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--text-2);
  text-align: center;
}
.msg-empty i {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.3;
}
.msg-empty p { font-size: 14px; margin: 0; }

.msg-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 4px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  border-radius: 14px;
}
.msg-item:active {
  background: var(--bg-2);
}
.msg-item.unread::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.msg-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.msg-avatar-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.msg-content {
  flex: 1;
  min-width: 0;
}
.msg-top {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.msg-user {
  font-weight: 700;
  color: var(--text);
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-action {
  color: var(--text-2);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-time {
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
  flex-shrink: 0;
}
.msg-snippet {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-icon-like, .msg-icon-comment, .msg-icon-dm {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 12px;
}
.msg-icon-like { color: #ff5a76; }
.msg-icon-comment { color: var(--accent); }
.msg-icon-dm { color: var(--accent); }

/* DM chat panel (适配 APP 沉浸式聊天) */
.view-messages > .dm-chat-panel {
  margin: -12px -16px -110px;
  height: 100vh;
  height: 100dvh;
}
.dm-chat-panel {
  display: flex;
  flex-direction: column;
  background: #f7f8fa;
  overflow: hidden;
}
.dm-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--primary);
  flex-shrink: 0;
  z-index: 2;
  justify-content: space-between;
}
.dm-back-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: -6px;
}
.dm-back-btn:active { background: rgba(0, 0, 0, 0.05); }
.dm-back-btn i { font-size: 22px; }
.dm-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #ececf2;
}
.dm-header-avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dm-header-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.dm-header-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.dm-header-spacer {
  width: 34px;
  flex-shrink: 0;
}
.dm-header-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-header-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

/* DM messages area */
.dm-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  -webkit-overflow-scrolling: touch;
  background: #f7f8fa;
}
.dm-empty-chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  color: #9aa0aa;
  padding-top: calc(100vh * 0.24 - 140px);
  padding-top: calc(100dvh * 0.24 - 140px);
}
.dm-empty-chat i { font-size: 40px; margin-bottom: 8px; opacity: 0.3; color: #c3c7d2; }
.dm-empty-chat p { font-size: 13px; margin: 0; }

.dm-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  margin-bottom: 10px;
}
.dm-bubble-wrap.mine {
  align-self: flex-end;
  align-items: flex-end;
}
.dm-bubble-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.dm-bubble-wrap.mine .dm-bubble-row { justify-content: flex-end; }
.dm-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #ececf2;
}
.dm-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  border-top-left-radius: 4px;
  background: #ffffff;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.dm-bubble.mine {
  background: var(--primary);
  color: #fff;
  border-radius: 16px;
  border-top-left-radius: 16px;
  border-top-right-radius: 4px;
}
.dm-bubble-time {
  font-size: 10px;
  color: #a0a6b0;
  margin-top: 3px;
  padding: 0 2px;
}
.dm-bubble-wrap.mine .dm-bubble-time { align-self: flex-end; }

/* DM input bar */
.dm-input-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.dm-input {
  flex: 1;
  border: none;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  background: #f2f3f5;
  color: #1a1a1a;
  outline: none;
  transition: background 0.2s;
}
.dm-input:focus { background: #ffffff; box-shadow: 0 0 0 1.5px var(--primary); }
.dm-input::placeholder { color: #b0b4bf; }
.dm-send-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.dm-send-btn:active { transform: scale(0.92); }
.dm-send-btn i { font-size: 20px; }

/* Dark theme adjustments (DM) */
.dark .dm-chat-panel { background: #0f1424; }
.dark .dm-chat-header { background: #2f3a55; }
.dark .dm-back-btn { color: #e8e8ec; }
.dark .dm-header-avatar-fallback { background: rgba(255, 255, 255, 0.1); color: #8890a0; }
.dark .dm-header-name { color: #f2f2f4; }
.dark .dm-header-status { color: #8a8f9e; }
.dark .dm-messages { background: #0f1424; }
.dark .dm-empty-chat { color: #8a8f9e; }
.dark .dm-bubble { background: #1c2540; color: #e8e8ec; box-shadow: none; }
.dark .dm-bubble.mine { background: var(--primary); color: #fff; }
.dark .dm-bubble-time { color: #6b7280; }
.dark .dm-msg-avatar { background: #232a3d; }
.dark .dm-input-bar { background: #1c2540; border-top-color: rgba(255, 255, 255, 0.08); }
.dark .dm-input { background: #0f1424; color: #e8e8ec; }
.dark .dm-input:focus { background: #232a3d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.dark .dm-input::placeholder { color: #6b7280; }
/* 首页改版（Lucky社区 参考版式）                                          */
/* ===================================================================== */

/* ---------- 顶栏：菜单 + 标题 + 刷新/搜索 ---------- */
.home-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 4px 4px 14px;
}
.home-title {
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
}
.home-header-actions { display: flex; gap: 8px; }
.home-header .icon-btn {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

/* ---------- 搜索栏展开动画 ---------- */
.search-drop-enter-active,
.search-drop-leave-active {
  transition: opacity 0.3s var(--ease-main), transform 0.3s var(--ease-main);
}
.search-drop-enter-from,
.search-drop-leave-to {
  opacity: 0;
  transform: translateY(-6px);
}
.home-search-wrap {
  margin: -6px 0 14px;
}
.home-search-bar { margin-bottom: 0; }

/* ---------- 分类标签（推荐 + 板块） ---------- */
.home-tabs {
  margin-bottom: 14px;
}
.home-tabs-scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1.5px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.home-tabs-scroll::-webkit-scrollbar { display: none; }
.home-tab {
  flex: 1 0 auto;
  min-width: 0;
  padding: 9px 6px 11px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.3s;
  position: relative;
  white-space: nowrap;
}
.home-tab.active {
  color: var(--text);
  font-weight: 700;
}
.home-tab-indicator {
  position: absolute;
  bottom: -1.5px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
  transition: left 0.2s var(--ease-micro), width 0.2s var(--ease-micro);
  pointer-events: none;
}

/* ---------- Banner：轮播 + 标题/副标语浮层 ---------- */
.home-banner-wrap { position: relative; }
.home-banner-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.home-banner-title {
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.home-banner-sub {
  margin-top: 4px;
  color: rgba(255,255,255,0.94);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}

/* ---------- 功能入口（5 图标） ---------- */
.home-functions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 6px 12px;
  margin-bottom: 18px;
  box-shadow: 0 3px 12px var(--shadow);
}
.home-function {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: var(--text);
  transition: transform 0.2s;
}
.home-function:active { transform: scale(0.92); }
.function-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary);
}
.function-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.function-icon i { font-size: 22px; }
.function-label {
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- 精选推荐 ---------- */
.featured-section { margin-bottom: 8px; }
.featured-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.featured-pin {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.featured-pin i { font-size: 13px; }
.featured-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.featured-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 34px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
}
.featured-empty i { font-size: 44px; color: var(--primary); opacity: 0.6; }
.featured-empty p { font-size: 13px; }
.featured-cta {
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 13px;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

.featured-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.featured-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 11px 14px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 3px 10px var(--shadow);
}
.featured-card:active { transform: scale(0.99); }
.featured-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.featured-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--primary);
  flex-shrink: 0;
  background: var(--bg-2);
}
.featured-meta { flex: 1; min-width: 0; }
.featured-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.featured-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}
.featured-board {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.featured-time {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}
.featured-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 8px 0 10px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.featured-stats { display: flex; gap: 14px; }
.featured-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--text-2);
}
.featured-stat i { font-size: 16px; }
.featured-open {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  border: none;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.featured-open:active { transform: scale(0.94); }
.featured-open i { font-size: 16px; }

/* ---------- 首页侧滑菜单 ---------- */
.home-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 130;
}
.home-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  max-width: 78vw;
  background: var(--card);
  border-right: 1px solid var(--border);
  z-index: 131;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0,0,0,0.14);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.drawer-head h2 {
  font-size: 19px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.drawer-head .icon-btn { width: 34px; height: 34px; font-size: 14px; }
.drawer-list {
  display: flex;
  flex-direction: column;
}
.sdrawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: none;
  padding: 13px 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.2s;
  text-align: left;
}
.sdrawer-item:active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.sdrawer-item i { font-size: 21px; color: var(--primary); }
.sdrawer-item img.drawer-bot-icon { width: 21px; height: 21px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.drawer-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 6px;
}
.sdrawer-fade-enter-active,
.sdrawer-fade-leave-active { transition: opacity 0.3s var(--ease-main); }
.sdrawer-fade-enter-from,
.sdrawer-fade-leave-to { opacity: 0; }
.sdrawer-slide-enter-active,
.sdrawer-slide-leave-active {
  transition: transform 0.3s var(--ease-main);
}
.sdrawer-slide-enter-from,
.sdrawer-slide-leave-to { transform: translateX(-100%); }

/* ============================================================
   HOME V2（StarFree 风格重构 · 昼圈化）
   ============================================================ */
/* 顶栏：菜单 + 首页/社区 tab + 常驻搜索框 */
.v2-home-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 12px;
}
.v2-home-header .icon-btn {
  width: 36px;
  height: 36px;
  font-size: 15px;
  flex-shrink: 0;
}
.v2-home-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.v2-home-tab {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-2);
  padding: 6px 8px;
  cursor: pointer;
  position: relative;
  transition: color 0.25s;
  white-space: nowrap;
}
.v2-home-tab.active {
  color: var(--text);
  font-weight: 800;
}
.v2-home-tab.active::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--primary);
}
.v2-home-tab:active { color: var(--primary); }
.v2-home-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--text-2);
}
.v2-search-icon { font-size: 18px; flex-shrink: 0; }
.v2-home-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-size: 13px;
  color: var(--text);
}
.v2-home-search input::placeholder { color: var(--text-3, var(--text-2)); }

/* Banner 轮播 */
.v2-banner { margin-bottom: 4px; }
.v2-banner .scroll-gallery { margin-bottom: 4px; }
.v2-banner .gallery-card { height: 176px; border-radius: 16px; }
.v2-banner .gallery-dots { margin-bottom: 14px; }

/* 功能入口（4 宫格） */
.v2-home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.v2-home-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  padding: 13px 4px 11px;
  cursor: pointer;
  color: var(--text);
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px var(--shadow);
}
.v2-home-grid-item:active { transform: scale(0.94); }
.v2-grid-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  color: var(--primary);
  overflow: hidden;
}
.v2-grid-icon i { font-size: 22px; }
.v2-grid-icon img { width: 100%; height: 100%; object-fit: cover; }
.v2-grid-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

/* 欢迎横幅 */
.v2-home-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.v2-home-notice:active { background: var(--bg-2); }
.v2-notice-horn { font-size: 19px; color: var(--primary); flex-shrink: 0; }
.v2-notice-text {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.v2-notice-arrow { font-size: 19px; color: var(--text-2); flex-shrink: 0; }

/* 帖子卡片流 */
.v2-home-feeds {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.v2-post-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 0 2px 10px var(--shadow);
}
.v2-post-card:last-child { margin-bottom: 0; }
.v2-post-card:active { transform: scale(0.99); }
.v2-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v2-post-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-2);
}
.v2-post-meta { flex: 1; min-width: 0; }
.v2-post-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.v2-post-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}
.v2-post-board {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.v2-post-time {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}
.v2-post-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
  margin: 9px 0 7px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-post-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-post-img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 8px;
  background: var(--bg-2);
}
.v2-post-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.v2-post-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--text-2);
}
.v2-post-stat i { font-size: 16px; }

/* 深色模式适配 */
[data-dark="1"] .v2-home-search { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }
[data-dark="1"] .v2-grid-icon { background: rgba(255,255,255,0.08); }
/* ============================================================
   主题：黑白（简约黑白 · 昼圈）
   ============================================================ */
[data-theme="mono"] {
  --bg: #f7f7f7;
  --bg-2: #ffffff;
  --card: #ffffff;
  --text: #111111;
  --text-2: #8f8f8f;
  --border: #e6e6e6;
  --primary: #111111;
  --primary-2: #3a3a3a;
  --nav-bg: rgba(255, 255, 255, 0.82);
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
[data-theme="mono"] .featured-cta,
[data-theme="mono"] .auth-submit,
[data-theme="mono"] .home-functions .function-icon,
[data-theme="mono"] .v2-grid-icon {
  background: linear-gradient(135deg, #111111, #3a3a3a);
  color: #ffffff;
}
/* ============ 底部导航：浅灰渐变 + 黑色加号（复刻参考样式） ============ */
[data-theme="night"] .bottom-nav { background: linear-gradient(180deg, #161d33, #0f1424); border-top-color: #2a3558; }
[data-theme="night"] .nav-plus-btn { background: #e8ecf7; color: #0f1424; }
[data-theme="mono"] .bottom-nav { background: linear-gradient(180deg, #ffffff, #e9e9e9); }

/* ===== 邮箱验证码发送按钮 ===== */
.auth-code-field {
  position: relative;
}
.auth-code-field input {
  padding-right: 92px;
}
.auth-code-send {
  position: absolute;
  right: 2px;
  bottom: 13px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.auth-code-send:active { opacity: 0.7; }
.auth-code-send:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============ Announcement ============ */
.msg-announce-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 16px 2px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff6f9, #ffeaf1);
  border: 1px solid rgba(255, 158, 181, 0.35);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s;
}
.msg-announce-entry:active { transform: scale(0.98); }
.msg-announce-icon { font-size: 22px; color: var(--primary); }
.msg-announce-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.msg-announce-title { font-size: 15px; font-weight: 700; color: var(--text); }
.msg-announce-sub {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-announce-badge {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.msg-announce-arrow { font-size: 18px; color: var(--text-2); }

.announcement-view { display: flex; flex-direction: column; height: 100%; }
.announcement-content { flex: 1; overflow-y: auto; padding: 16px; }
.announcement-card {
  background: var(--card);
  border-radius: 18px;
  padding: 24px 20px;
  box-shadow: var(--shadow);
  text-align: center;
}
.announcement-card-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9eb5, #ff7eb3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.announcement-card-icon .material-icons { font-size: 26px; }
.announcement-card h3 { font-size: 20px; font-weight: 800; color: var(--text); margin: 0 0 14px; }
.announcement-p { font-size: 15px; color: var(--text); margin: 8px 0; line-height: 1.6; }
.announcement-qq {
  color: var(--primary);
  font-weight: 800;
  border-bottom: 1px dashed var(--primary);
  cursor: pointer;
  padding: 0 2px;
}
.announcement-got-btn {
  margin-top: 18px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9eb5, #ff7eb3);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s;
}
.announcement-got-btn:active { transform: scale(0.97); }

.announcement-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.announcement-modal {
  width: min(88vw, 360px);
  background: var(--card);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  text-align: center;
  animation: annPop 0.35s var(--ease-main);
}
@keyframes annPop {
  from { transform: scale(0.82); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.announcement-modal-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px;
}
.announcement-modal-body h3 { font-size: 19px; font-weight: 800; color: var(--text); margin: 0 0 12px; }
.announcement-modal-body p { font-size: 14px; color: var(--text-2); margin: 8px 0; line-height: 1.6; }
.announcement-btn {
  margin-top: 16px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9eb5, #ff7eb3);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s;
}
.announcement-btn:active { transform: scale(0.97); }

/* ============ Announcement detail v2 (headline style) ============ */
.announcement-content { flex: 1; overflow-y: auto; padding: 16px; }
.announcement-banner {
  position: relative;
  border-radius: 20px;
  padding: 26px 20px 24px;
  background: linear-gradient(135deg, #ff9eb5 0%, #ffb9c9 55%, #ffe3ea 100%);
  color: #fff;
  overflow: hidden;
  margin-bottom: 14px;
}
.announcement-banner::before {
  content: '';
  position: absolute;
  right: -30px;
  top: -36px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.announcement-banner::after {
  content: '';
  position: absolute;
  right: 28px;
  bottom: -46px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.announcement-banner-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #ff8fb8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(255, 126, 179, 0.35);
  margin-bottom: 12px;
}
.announcement-banner-icon .material-icons { font-size: 28px; }
.announcement-banner-text h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(255, 126, 179, 0.35);
}
.announcement-banner-text p {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.75);
}
.announcement-card2 {
  background: var(--card);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
}
.announcement-card2-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.announcement-tag {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 1px;
}
.announcement-card2-head h4 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
}
.announcement-date {
  font-size: 12px;
  color: var(--text-2);
}
.announcement-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}
.announcement-body2 p {
  font-size: 15px;
  color: var(--text);
  line-height: 1.7;
  margin: 8px 0;
}
.announcement-qqbox {
  margin-top: 14px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.announcement-qqbox-label {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
}
.announcement-qq-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 40%, transparent);
  transition: transform 0.15s;
}
.announcement-qq-btn .material-icons { font-size: 16px; }
.announcement-qq-btn:active { transform: scale(0.95); }
.announcement-foot2 {
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
}

/* ============ Announcement button (messages page -> standalone page) ============ */
.msg-announce-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 32px);
  margin: 12px 16px 4px;
  padding: 12px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff9eb5, #ff7eb3);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(255, 126, 179, 0.3);
  cursor: pointer;
  transition: transform 0.15s;
}
.msg-announce-btn:active { transform: scale(0.97); }
.msg-announce-btn .material-icons { font-size: 20px; }
.msg-announce-btn .msg-announce-badge {
  background: #fff;
  color: #ff7eb3;
}

/* ============ Messages page: circular entries + sessions (复刻参考图样式) ============ */
.msg-more { position: relative; }
.msg-more-btn { width: 38px; height: 38px; font-size: 20px; background: transparent; box-shadow: none; color: var(--text-2); }
.msg-menu-backdrop { position: fixed; inset: 0; z-index: 19; background: transparent; }
.msg-menu {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 20;
  min-width: 172px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.msg-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.msg-menu-item:active { background: var(--bg-2); }
.msg-menu-item .material-icons { font-size: 19px; color: var(--text-2); }
.msg-menu-item.danger { color: #ff5a76; }
.msg-menu-item.danger .material-icons { color: #ff5a76; }
.msg-menu-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #ff5a76;
  border-radius: 8px;
  padding: 2px 7px;
}
.msg-menu-enter-active, .msg-menu-leave-active { transition: opacity 0.24s var(--ease-main), transform 0.24s var(--ease-main); transform-origin: top right; }
.msg-menu-enter-from, .msg-menu-leave-to { opacity: 0; transform: scale(0.92) translateY(-4px); }

/* Circular entries */
.msg-entries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 10px 14px;
}
.msg-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 6px 0 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.msg-entry-ico {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s;
}
.msg-entry-ico .material-icons { font-size: 27px; }
.msg-entry:active .msg-entry-ico { transform: scale(0.92); }
.msg-entry.active .msg-entry-ico { outline: 2.5px solid var(--primary); outline-offset: 2px; }
.ico-like { background: linear-gradient(135deg, #ff6b81, #ff9eb5); }
.ico-comment { background: linear-gradient(135deg, #4a9eff, #7cc0ff); }
.ico-follow { background: linear-gradient(135deg, #a06bff, #c9a1ff); }
.ico-notice { background: linear-gradient(135deg, #ffa940, #ffd56b); }
.msg-entry-label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.msg-entry.active .msg-entry-label { color: var(--text); }
.msg-entry-badge {
  position: absolute;
  top: 0;
  right: calc(50% - 32px);
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff5a76;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(255, 90, 118, 0.4);
  z-index: 2;
}

/* Panels */
.msg-panel-title {
  padding: 4px 6px 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
}
.msg-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 6px;
}
.msg-panel-back { width: 34px; height: 34px; font-size: 18px; background: transparent; box-shadow: none; color: var(--text-2); }
.msg-panel-title-inline { font-size: 17px; font-weight: 700; color: var(--text); }
.msg-notices { padding: 4px 0; }
.conv-list .msg-item { align-items: center; }

/* Panel head (no back arrow) */
.msg-panel-head.center { justify-content: center; padding: 10px 0 8px; }

/* DM chat header: close button instead of back arrow */
.dm-chat-head-spacer { width: 34px; flex-shrink: 0; }
.dm-close-btn { width: 34px; height: 34px; font-size: 18px; background: transparent; box-shadow: none; color: var(--text-2); flex-shrink: 0; }

/* Notice card (公告内嵌卡片 · 重新构造) */
.notice-card {
  margin: 4px 0 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.notice-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
  background: linear-gradient(135deg, #fff6f9, #ffeaf1);
}
.notice-ico {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff7eb3, #ff9eb5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(255, 126, 179, 0.35);
  flex-shrink: 0;
}
.notice-ico .material-icons { font-size: 24px; }
.notice-head-text { flex: 1; min-width: 0; }
.notice-head-text h3 { font-size: 18px; font-weight: 800; color: var(--text); margin: 0; }
.notice-head-text p { font-size: 11px; color: var(--text-2); letter-spacing: 1.5px; margin: 2px 0 0; }
.notice-new {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff6b81, #ff9eb5);
  padding: 3px 9px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(255, 107, 129, 0.35);
  flex-shrink: 0;
}
.notice-divider { height: 1px; background: var(--border); margin: 0 18px; }
.notice-body { padding: 16px 18px; }
.notice-body h4 { font-size: 16px; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.notice-date { font-size: 12px; color: var(--text-2); }
.notice-p { font-size: 14px; color: var(--text); line-height: 1.7; margin: 10px 0 0; }
.notice-qqbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 14px;
}
.notice-qq-label { font-size: 13px; color: var(--text-2); font-weight: 600; }
.notice-qq-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: linear-gradient(135deg, #ff7eb3, #ff9eb5);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 126, 179, 0.3);
  transition: transform 0.15s;
}
.notice-qq-btn:active { transform: scale(0.96); }
.notice-qq-btn .material-icons { font-size: 17px; }
.notice-foot {
  padding: 12px 18px 16px;
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
}
.dark .notice-head { background: linear-gradient(135deg, rgba(255, 126, 179, 0.14), rgba(255, 158, 181, 0.07)); }
/* Clear conversations confirm sheet */
.msg-clear-mask {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.28s var(--ease-main);
}
.msg-clear-sheet {
  width: 100%;
  max-width: 480px;
  background: var(--bg-2);
  border-radius: 22px 22px 0 0;
  padding: 22px 20px calc(22px + var(--safe-bottom));
  text-align: center;
  animation: sheetUp 0.28s var(--ease-main);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.msg-clear-title { font-size: 17px; font-weight: 800; color: var(--text); }
.msg-clear-text { font-size: 13px; color: var(--text-2); margin: 10px 0 18px; line-height: 1.6; }
.msg-clear-actions { display: flex; gap: 12px; }
.msg-clear-btn {
  flex: 1;
  height: 46px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s;
}
.msg-clear-btn:active { transform: scale(0.97); }
.msg-clear-btn.cancel { background: var(--bg); color: var(--text-2); }
.msg-clear-btn.ok { background: linear-gradient(135deg, #ff6b81, #ff7eb3); color: #fff; box-shadow: 0 6px 16px rgba(255, 126, 179, 0.3); }
/* ============ Boards hub (板块页 · 贴吧式紧凑列表) ============ */
.view-boards { display: flex; flex-direction: column; }
.board-list-page, .board-posts-page { display: flex; flex-direction: column; height: 100%; }
.board-hub-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 12px 8px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-radius: 12px;
  color: var(--text-2);
  font-size: 13px;
  flex-shrink: 0;
}
.board-hub-tip .material-icons { font-size: 18px; color: var(--primary); }
.board-grid {
  flex: 1;
  overflow-y: auto;
  padding: 2px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.board-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: 13px;
  padding: 10px 11px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s;
  border-left: 4px solid var(--bc, var(--primary));
}
.board-card:active { transform: scale(0.98); }
.board-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bc, var(--primary)) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.board-card-icon .material-icons { font-size: 22px; }
.board-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.board-card-name { font-size: 15px; font-weight: 800; color: var(--text); }
.board-card-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.board-card-desc {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-card-count { font-size: 12px; color: var(--primary); font-weight: 700; flex-shrink: 0; }
.board-card-arrow { font-size: 18px; color: var(--text-2); flex-shrink: 0; }

.board-posts-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 8px;
}
.board-posts-bar .sort-bar { flex: 1; min-width: 0; }
.board-posts-bar .community-post-btn { flex-shrink: 0; }

/* 统计栏磨砂 - dark 适配 */
[data-dark="1"] .ok-profile {
  background: transparent;
  box-shadow: none;
}

[data-dark="1"] .ok-stats {
  background: transparent;
  border: none;
  box-shadow: none;
}
[data-dark="1"] .ok-stat b { color: #f2f2f4; }
[data-dark="1"] .ok-stat span { color: #a8a8b4; }

/* ============ 我的页功能菜单（分组列表 · 大厂社区软件风格） ============ */
.mine-menu {
  padding: 4px 16px 20px;
}
.mine-menu-group {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 12px;
}
.mine-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  transition: opacity 0.15s;
}
.mine-menu-item:active { opacity: 0.7; }
.mine-menu-item + .mine-menu-item { border-top: 1px solid rgba(127, 127, 127, 0.08); }
.mine-menu-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mc, var(--primary)) 14%, transparent);
  color: var(--mc, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mine-menu-icon .material-icons { font-size: 20px; }
.mine-menu-label {
  flex: 1;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
}
.mine-menu-arrow { font-size: 20px; color: #c0c4cc; }

.ok-grid-item span {
  font-size: 12px;
  color: #8a8f9e;
}
.ok-xp {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 16px;
}
.ok-xp-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ok-xp-level {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.ok-xp-title {
  font-size: 13px;
  font-weight: 600;
  color: #4c4f5a;
}
.ok-xp-nums {
  margin-left: auto;
  font-size: 12px;
  color: #8a8f9e;
}
.ok-xp-track {
  height: 8px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
.ok-xp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff9eb5, #ff7eb3);
  transition: width 0.4s;
}
.ok-xp-need {
  margin-top: 8px;
  font-size: 12px;
  color: #8a8f9e;
  text-align: right;
}


[data-dark="1"] .ok-grid { border-top-color: rgba(255, 255, 255, 0.08); }

[data-dark="1"] .ok-grid-item b { color: #f2f2f4; }

[data-dark="1"] .ok-grid-item span,

[data-dark="1"] .ok-xp-nums,

[data-dark="1"] .ok-xp-need,

[data-dark="1"] .ok-account,

[data-dark="1"] .ok-sub { color: #a8a8b4; }

[data-dark="1"] .ok-bio { color: #c8c8d0; }

[data-dark="1"] .ok-xp { background: rgba(255, 255, 255, 0.06); }

[data-dark="1"] .ok-xp-track { background: rgba(255, 255, 255, 0.12); }

[data-dark="1"] .ok-xp-title { color: #e8e8ec; }

/* ============ 独立认证页（login/register/forgot） ============ */
body.auth-standalone-page .view,
body.auth-standalone-page .bottom-nav,
body.auth-standalone-page .sub-header {
  display: none !important;
}
body.auth-standalone-page .modal-overlay.auth-full-overlay {
  position: static;
  inset: auto;
  z-index: 1;
  background: var(--bg);
  padding: 0;
}
/* ============ 认证页：全宽渐变胶囊按钮 ============ */
.auth-full-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  margin-top: 14px;
  border: none;
  border-radius: 26px;
  background: linear-gradient(135deg, #ff9eb5 0%, #ff7eb3 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 126, 179, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.auth-full-btn .material-icons {
  font-size: 20px;
}
.auth-full-btn:hover {
  opacity: 0.92;
}
.auth-full-btn:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(255, 126, 179, 0.3);
}
.auth-full-btn:disabled {
  opacity: 0.5;
}
[data-dark="1"] .auth-full-btn {
  background: linear-gradient(135deg, #ff8fb0 0%, #ff6ea6 100%);
  box-shadow: 0 8px 20px rgba(255, 110, 166, 0.3);
}
/* ============ 登录页：椎名真昼插画背景 ============ */
body.auth-standalone-page .auth-full-overlay.auth-bg-hero {
  background-color: var(--bg);
  background-image: url("../img/login-bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
body.auth-standalone-page .auth-full-overlay.auth-bg-hero .auth-modal.auth-full {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 32%, rgba(255, 255, 255, 0.92) 54%, #ffffff 76%);
}
body.auth-standalone-page .auth-full-overlay.auth-bg-hero .auth-full-body {
  padding-top: 64px;
}
body.auth-standalone-page .auth-full-overlay.auth-bg-hero .auth-full-brand,
body.auth-standalone-page .auth-full-overlay.auth-bg-hero .auth-full-title {
  color: #2a2a2a;
}
body.auth-standalone-page .auth-full-overlay.auth-bg-hero .auth-form {
  margin-top: 18px;
}
/* 深色主题下登录页保持亮色底 + 深色文字 */
body.auth-standalone-page[data-dark="1"] .auth-full-overlay.auth-bg-hero {
  background-color: var(--bg);
  background-image: url("../img/login-bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
body.auth-standalone-page[data-dark="1"] .auth-full-overlay.auth-bg-hero .auth-modal.auth-full {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 32%, rgba(255, 255, 255, 0.92) 54%, #ffffff 76%);
}
body.auth-standalone-page[data-dark="1"] .auth-full-overlay.auth-bg-hero .auth-full-brand,
body.auth-standalone-page[data-dark="1"] .auth-full-overlay.auth-bg-hero .auth-full-title,
body.auth-standalone-page[data-dark="1"] .auth-full-overlay.auth-bg-hero .auth-field input,
body.auth-standalone-page[data-dark="1"] .auth-full-overlay.auth-bg-hero .auth-field input::placeholder {
  color: #333;
}
body.auth-standalone-page[data-dark="1"] .auth-full-overlay.auth-bg-hero .auth-field line-field {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}
/* ============ 用户协议和隐私政策确认弹窗（复刻 OKK 样式 · 昼圈版） ============ */
.agreement-overlay {
  position: fixed;
  inset: 0;
  z-index: 1990;
  background: rgba(17, 17, 17, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.agreement-card {
  width: 100%;
  max-width: 340px;
  background: #ffffff;
  border-radius: 18px;
  padding: 24px 20px 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}
.agreement-title {
  font-size: 17px;
  font-weight: 700;
  color: #222;
  text-align: center;
  margin-bottom: 14px;
}
.agreement-body p {
  font-size: 13px;
  line-height: 1.7;
  color: #444;
  margin: 6px 0;
}
.agreement-brand {
  font-weight: 700;
  color: #222;
}
.agreement-link {
  color: #4a7dff;
}
.agreement-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.agreement-btn {
  flex: 1;
  height: 42px;
  border-radius: 21px;
  font-size: 15px;
  cursor: pointer;
  outline: none;
}
.agreement-btn-ghost {
  background: #ffffff;
  border: 1px solid #d5d5dd;
  color: #666;
}
.agreement-btn-primary {
  background: linear-gradient(135deg, #ff9eb5 0%, #ff7eb3 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(255, 126, 179, 0.35);
}


/* ===== 注册页·邮箱验证码按钮状态 ===== */
.auth-code-field input { padding-right: 110px; }
.auth-code-disabled { color: #b8b8b8 !important; cursor: not-allowed; }
.auth-code-disabled:active { opacity: 1; }


/* ===== 发帖·图片上传按钮 ===== */
.compose-img-row { position: relative; }
.compose-img-upload {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer; color: #888;
  padding: 4px; display: flex; align-items: center;
}
.compose-img-upload:hover { color: #ff7eb3; }
.compose-img-upload .material-icons { font-size: 20px; }
.compose-img-row .compose-img-input { padding-right: 40px; }


/* ============================================================
 * APP 风格登录/注册/忘记密码 重写（覆盖旧样式）
 * ============================================================ */
.auth-standalone-page .auth-full-overlay,
.auth-standalone-page .auth-full-overlay.auth-bg-hero {
  background: linear-gradient(180deg, #fff5f8 0%, #ffffff 38%) !important;
}
.auth-standalone-page .auth-modal.auth-full {
  background: transparent !important;
  box-shadow: none !important;
  max-width: 420px;
  margin: 0 auto;
}
.auth-full-body {
  padding: 0 28px !important;
  padding-top: max(72px, env(safe-area-inset-top)) !important;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* 品牌区：圆形头像 + 大字 */
.auth-full-brand {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: 2px;
  color: #222 !important;
  text-align: left !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.1;
}
.auth-full-brand::before {
  content: "";
  display: block;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: url("../img/bot-avatar.png") center/cover no-repeat, #ffe4ec;
  margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(255, 126, 179, .25);
}
.auth-full-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  text-align: left !important;
  margin: 0 0 28px 0 !important;
}
.auth-full-body .auth-back-btn {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.8);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* 表单 */
.auth-full-body .auth-form.auth-mini {
  flex: 1;
  padding-top: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-full-body .auth-field.line-field {
  margin: 0 !important;
  border: none !important;
  background: #f5f6f8 !important;
  border-radius: 14px !important;
  padding: 0 16px !important;
  height: 52px !important;
  display: flex;
  align-items: center;
  transition: background .15s, box-shadow .15s;
}
.auth-full-body .auth-field.line-field:focus-within {
  background: #fff !important;
  box-shadow: 0 0 0 2px #ff7eb3 inset !important;
}
.auth-full-body .auth-field.line-field input {
  background: transparent !important;
  border: none !important;
  height: 52px !important;
  font-size: 15px !important;
  padding: 0 !important;
  color: #1a1a1a !important;
}
.auth-full-body .auth-field.line-field input::placeholder {
  color: #aaa !important;
}

/* 忘记密码链接 / 获取验证码按钮 */
.auth-full-body .auth-forgot {
  font-size: 13px !important;
  color: #ff5c96 !important;
  font-weight: 600;
  padding: 6px 0 6px 12px;
  white-space: nowrap;
}
.auth-full-body .auth-forgot-field input {
  padding-right: 96px !important;
}
.auth-full-body .auth-code-disabled { color: #bbb !important; }

/* 图形验证码块 */
.auth-full-body .auth-captcha {
  border-radius: 8px;
  padding: 4px 10px;
}

/* 主按钮：全宽渐变胶囊 */
.auth-full-btn {
  margin-top: 10px !important;
  height: 52px !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, #ff9eb5 0%, #ff6f91 100%) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 2px;
  border: none !important;
  box-shadow: 0 8px 20px rgba(255, 111, 145, .35) !important;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
}
.auth-full-btn .material-icons { font-size: 20px !important; }
.auth-full-btn:active { transform: scale(.98); opacity: .95; }

/* 底部切换 */
.auth-full-body .auth-switch {
  margin-top: 18px !important;
  text-align: center;
  font-size: 14px;
  color: #999 !important;
}
.auth-full-body .auth-switch span {
  color: #ff5c96 !important;
  font-weight: 600;
}
.auth-full-body .auth-credit { display: none !important; }

/* 暗色模式微调 */
body.auth-standalone-page[data-dark="1"] .auth-full-overlay {
  background: linear-gradient(180deg, #2a1f25 0%, #1a1a1f 38%) !important;
}
body.auth-standalone-page[data-dark="1"] .auth-full-brand,
body.auth-standalone-page[data-dark="1"] .auth-full-title { color: #f0f0f0 !important; }
body.auth-standalone-page[data-dark="1"] .auth-field.line-field {
  background: #2a2a30 !important;
}
body.auth-standalone-page[data-dark="1"] .auth-field.line-field:focus-within {
  background: #33333a !important;
}
body.auth-standalone-page[data-dark="1"] .auth-field.line-field input { color: #f0f0f0 !important; }


/* ===== 简约版：输入框下划线风格 + 文字链接 ===== */
.auth-standalone-page .auth-full-overlay,
.auth-standalone-page .auth-full-overlay.auth-bg-hero {
  background: #ffffff !important;
}
.auth-full-body {
  padding: 0 32px !important;
  padding-top: max(80px, env(safe-area-inset-top)) !important;
}
.auth-full-brand::before {
  width: 56px; height: 56px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  margin-bottom: 22px;
}
.auth-full-brand { font-size: 26px !important; }
.auth-full-title {
  font-size: 20px !important;
  color: #333 !important;
  margin-bottom: 36px !important;
  font-weight: 600 !important;
}

/* 输入框：去掉灰色卡片，改底部细灰线 */
.auth-full-body .auth-form.auth-mini { gap: 0 !important; }
.auth-full-body .auth-field.line-field {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #ececec !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: 54px !important;
  margin: 0 !important;
  transition: border-color .2s;
}
.auth-full-body .auth-field.line-field:focus-within {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom-color: #ff7eb3 !important;
}
.auth-full-body .auth-field.line-field input {
  font-size: 16px !important;
  color: #222 !important;
}
.auth-full-body .auth-field.line-field input::placeholder { color: #c0c0c0 !important; }

/* 链接文字：纯粉色字，不要背景 */
.auth-full-body .auth-forgot {
  font-size: 13px !important;
  color: #ff7eb3 !important;
  font-weight: 500 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
}
.auth-full-body .auth-forgot:active { opacity: .6; }
.auth-full-body .auth-code-disabled { color: #c8c8c8 !important; background: transparent !important; }
.auth-full-body .auth-forgot-field { padding-right: 0 !important; }
.auth-full-body .auth-forgot-field input { padding-right: 90px !important; }

/* 图形验证码：浅灰底小卡片 */
.auth-full-body .auth-captcha {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 6px 12px;
}

/* 主按钮：黑色简约胶囊（去掉粉色渐变） */
.auth-full-btn {
  margin-top: 36px !important;
  height: 50px !important;
  border-radius: 25px !important;
  background: #1a1a1a !important;
  background: linear-gradient(135deg, #2c2c2e 0%, #1a1a1a 100%) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
}
.auth-full-btn .material-icons { display: none; }

/* 底部切换 */
.auth-full-body .auth-switch {
  margin-top: 24px !important;
  color: #b0b0b0 !important;
  font-size: 13px;
}
.auth-full-body .auth-switch span { color: #1a1a1a !important; font-weight: 600; }

/* 暗色模式 */
body.auth-standalone-page[data-dark="1"] .auth-full-overlay { background: #141416 !important; }
body.auth-standalone-page[data-dark="1"] .auth-full-brand,
body.auth-standalone-page[data-dark="1"] .auth-full-title { color: #eee !important; }
body.auth-standalone-page[data-dark="1"] .auth-field.line-field { border-bottom-color: #333 !important; }
body.auth-standalone-page[data-dark="1"] .auth-field.line-field:focus-within { border-bottom-color: #ff7eb3 !important; }
body.auth-standalone-page[data-dark="1"] .auth-field.line-field input { color: #eee !important; }
body.auth-standalone-page[data-dark="1"] .auth-full-btn { background: #eee !important; color: #1a1a1a !important; }


/* ===== 调整：输入框更宽松 + QQ 登录按钮 ===== */
.auth-full-body .auth-form.auth-mini {
  gap: 18px !important;
}
.auth-full-body .auth-field.line-field {
  height: 60px !important;
}
.auth-full-body .auth-field.line-field input {
  height: 60px !important;
  font-size: 16px !important;
}

/* 分隔线："其他登录方式" */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 28px 0 18px;
  color: #b0b0b0;
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ececec;
}
.auth-divider span { padding: 0 12px; }

/* QQ 登录圆形按钮 */
.auth-third-row {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.auth-qq-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  transition: transform .15s, background .15s;
}
.auth-qq-btn:active { transform: scale(.94); background: #ececec; }
.auth-qq-btn svg { width: 26px; height: 26px; }


/* ===== 修复：底部"立即注册"固定在屏幕底，小屏不用滑 ===== */
.auth-full-body {
  padding-top: max(48px, env(safe-area-inset-top)) !important;
  padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}
.auth-full-title { margin-bottom: 24px !important; }
.auth-full-brand::before { margin-bottom: 14px; }
.auth-full-body .auth-form.auth-mini { gap: 14px !important; }
.auth-full-body .auth-field.line-field { height: 56px !important; }
.auth-full-body .auth-field.line-field input { height: 56px !important; }
.auth-full-btn { margin-top: 22px !important; height: 48px !important; }
.auth-divider { margin: 20px 0 14px; }

/* 底部切换链接：固定在屏幕底 */
.auth-full-body > .auth-switch,
.auth-full-body .auth-form .auth-switch {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  margin: 0 !important;
  text-align: center;
  background: transparent;
  z-index: 10;
}


/* ===== 关于页重构 ===== */
.view-about { padding-bottom: 32px !important; }
.about-hero {
  padding: 28px 0 20px !important;
  display: flex; flex-direction: column; align-items: center;
}
.about-app-icon {
  width: 72px !important; height: 72px !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.about-app-name { font-size: 22px !important; font-weight: 700 !important; margin-top: 14px !important; }
.about-app-slogan {
  font-size: 13px; color: #999; margin-top: 4px;
}
.about-app-version {
  font-size: 12px; color: #bbb; margin-top: 6px;
  background: #f5f5f5; padding: 2px 10px; border-radius: 10px;
}
.about-check-btn { display: none !important; }

.about-group-title {
  font-size: 12px; color: #999; padding: 18px 20px 8px;
}
.about-menu {
  margin: 0 14px !important;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.view-about .about-menu { margin: 0 14px !important; }
.about-row {
  display: flex; align-items: center;
  padding: 14px 16px !important;
  border-bottom: 1px solid #f2f2f2 !important;
  background: transparent !important;
}
.about-row:last-child { border-bottom: none !important; }
.about-row-icon {
  font-size: 20px !important;
  color: #ff7eb3 !important;
  margin-right: 12px !important;
}
.about-row > span:first-of-type {
  flex: 1; font-size: 15px; color: #222;
}
.about-row-tail {
  font-size: 12px; color: #aaa; margin-right: 8px;
}
.about-row > .material-icons:last-child { color: #ccc !important; }

.about-foot {
  margin-top: 32px; padding: 0 20px;
  text-align: center;
}
.about-foot .about-copy-line {
  font-size: 12px; color: #bbb; margin-bottom: 6px;
}
.about-beian {
  display: block;
  font-size: 11px; color: #bbb; line-height: 1.8;
  text-decoration: none;
}
.about-beian:active { color: #888; }

body[data-dark="1"] .about-menu { background: #1f1f23; }
body[data-dark="1"] .about-row { border-bottom-color: #2a2a30 !important; }
body[data-dark="1"] .about-row > span:first-of-type { color: #eee; }


/* 修复：关于页菜单行对齐（终极版） */
.view-about .about-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.view-about .about-row .about-row-icon {
  flex: 0 0 auto !important;
  width: 24px !important;
  margin-right: 12px !important;
}
.view-about .about-row span {
  flex: 0 0 auto !important;
}
.view-about .about-row span:not(.about-row-tail) {
  flex: 1 1 auto !important;
  text-align: left !important;
  white-space: nowrap !important;
}
.view-about .about-row .about-row-tail {
  flex: 0 0 auto !important;
  margin-right: 8px !important;
}
.view-about .about-row .material-icons {
  flex: 0 0 auto !important;
}
.view-about .about-row .material-icons:last-child {
  margin-left: auto !important;
}


/* 关于页菜单文字标签 */
.about-row-label {
  flex: 1 1 auto !important;
  text-align: left !important;
  white-space: nowrap !important;
}


/* ===== 帖子详情页重构 ===== */
.post-detail {
  padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}
.post-detail .detail-card {
  background: #fff !important;
  margin: 12px !important;
  border-radius: 16px !important;
  padding: 18px 16px 20px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.post-detail .detail-author-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.post-detail .detail-author-avatar {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
}
.post-detail .detail-author-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1;
}
.post-detail .detail-author-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #222 !important;
}
.post-detail .detail-author-time {
  font-size: 12px !important;
  color: #aaa !important;
  margin-top: 2px;
}
.post-detail .detail-board-tag {
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
}
.post-detail .detail-body { padding: 4px 0; }
.post-detail .detail-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 0 12px !important;
  line-height: 1.3;
}
.post-detail .post-full {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #333 !important;
  white-space: pre-wrap;
  word-break: break-word;
}
.post-detail .post-detail-image {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
}
.post-detail .post-detail-image img {
  width: 100%;
  border-radius: 12px;
}
.post-detail .detail-interaction {
  display: flex !important;
  gap: 20px;
  padding: 14px 0 !important;
  border-top: 1px solid #f2f2f2;
  margin-top: 16px;
}
.post-detail .detail-interact-btn {
  display: flex; align-items: center; gap: 4px;
  color: #888 !important;
  font-size: 14px;
}
.post-detail .detail-interact-btn.liked { color: #ff5c96 !important; }
.post-detail .comments-section { margin-top: 8px; }
.post-detail .comments-title {
  font-size: 14px; color: #666; font-weight: 600;
  padding: 8px 0 12px;
}
.post-detail .comment-item {
  display: flex; gap: 10px;
  padding: 12px 0;
  border-top: 1px solid #f7f7f7;
}
.post-detail .comment-avatar {
  width: 32px; height: 32px; border-radius: 50%;
}
.post-detail .comment-body { flex: 1; }
.post-detail .comment-head {
  display: flex; align-items: center; gap: 8px;
}
.post-detail .comment-author { font-size: 13px; font-weight: 600; color: #444; }
.post-detail .comment-time { font-size: 11px; color: #aaa; }
.post-detail .comment-text {
  font-size: 14px; color: #333; margin-top: 4px; line-height: 1.5;
}
.post-detail .comment-like {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; color: #999; margin-top: 6px;
}
.post-detail .comment-like.liked { color: #ff5c96; }

/* 底部评论栏固定 */
.post-detail .comment-input-bar {
  position: fixed !important;
  bottom: 0 !important; left: 0; right: 0;
  background: #fff !important;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #eee !important;
  display: flex; gap: 10px; align-items: center;
  z-index: 50;
}
.post-detail .comment-input-bar .input-shell {
  flex: 1;
  background: #f5f5f7 !important;
  border-radius: 20px !important;
  padding: 0 14px !important;
  height: 40px !important;
}
.post-detail .comment-input-bar input {
  background: transparent !important; border: none !important;
  height: 40px !important; font-size: 14px;
}
.post-detail .comment-input-bar .send-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: #1a1a1a !important; color: #fff !important;
  display: flex; align-items: center; justify-content: center;
}


/* ===== 帖子详情页 v2（小红书/微博风格，覆盖旧版） ===== */
.post-detail {
  background: #f7f7f9 !important;
  min-height: 100vh;
  padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
}
.post-detail .sub-header.detail-header {
  background: #f7f7f9 !important;
}
.post-detail .detail-card {
  background: transparent !important;
  margin: 0 !important;
  padding: 16px !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.post-detail .detail-author-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  margin-bottom: 18px;
}
.post-detail .detail-author-avatar {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  border: 1px solid #eee;
}
.post-detail .detail-author-info {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
}
.post-detail .detail-author-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
}
.post-detail .detail-author-time {
  font-size: 12px !important;
  color: #999 !important;
  margin-top: 2px;
}
.post-detail .detail-dm-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 1px solid #eee;
  display: flex; align-items: center; justify-content: center;
  color: #666;
}
.post-detail .detail-board-tag {
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 10px !important;
  background: #fff !important;
}
.post-detail .detail-body { padding: 0; }
.post-detail .detail-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin: 0 0 10px !important;
  line-height: 1.35;
}
.post-detail .post-full {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #333 !important;
  white-space: pre-wrap;
  word-break: break-word;
}
.post-detail .post-detail-image {
  margin-top: 14px;
  border-radius: 12px;
  overflow: hidden;
}
.post-detail .post-detail-image img {
  width: 100%;
  border-radius: 12px;
  display: block;
}
.post-detail .detail-interaction {
  display: flex !important;
  align-items: center;
  gap: 24px;
  padding: 16px 0 !important;
  margin-top: 16px;
  border-top: none !important;
}
.post-detail .detail-interact-btn {
  display: flex; align-items: center; gap: 5px;
  color: #666 !important;
  font-size: 14px;
}
.post-detail .detail-interact-btn .material-icons { font-size: 20px; }
.post-detail .detail-interact-btn.liked { color: #ff5c96 !important; }
.post-detail .comments-section {
  background: #fff !important;
  border-radius: 14px;
  padding: 16px !important;
  margin-top: 8px;
}
.post-detail .comments-title {
  font-size: 15px; color: #111; font-weight: 600;
  padding: 0 0 12px;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 8px;
}
.post-detail .empty-comments {
  padding: 28px 0;
  text-align: center;
  color: #bbb;
  font-size: 13px;
}
.post-detail .empty-comments i { font-size: 36px; display: block; margin-bottom: 8px; }
.post-detail .comment-item {
  display: flex; gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid #f7f7f7;
}
.post-detail .comment-item:last-child { border-bottom: none; }
.post-detail .comment-avatar {
  width: 36px; height: 36px; border-radius: 50%;
}
.post-detail .comment-body { flex: 1; min-width: 0; }
.post-detail .comment-head {
  display: flex; align-items: center; gap: 8px;
}
.post-detail .comment-author { font-size: 13px; font-weight: 600; color: #555; }
.post-detail .comment-time { font-size: 11px; color: #bbb; }
.post-detail .comment-text {
  font-size: 14px; color: #222; margin-top: 4px; line-height: 1.5;
  word-break: break-word;
}
.post-detail .comment-like {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; color: #999; margin-top: 6px;
}
.post-detail .comment-like.liked { color: #ff5c96; }
.post-detail .comment-input-bar {
  position: fixed !important;
  bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  left: 0; right: 0;
  background: rgba(255,255,255,.95) !important;
  backdrop-filter: blur(10px);
  padding: 10px 14px !important;
  border-top: 1px solid #f0f0f0 !important;
  display: flex; gap: 10px; align-items: center;
  z-index: 50;
}
.post-detail .comment-input-bar .input-shell {
  flex: 1;
  background: #f2f2f5 !important;
  border-radius: 20px !important;
  padding: 0 16px !important;
  height: 40px !important;
}
.post-detail .comment-input-bar input {
  background: transparent !important; border: none !important;
  height: 40px !important; font-size: 14px;
}
.post-detail .comment-input-bar .send-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: #1a1a1a !important; color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}


/* ===== 帖子详情 v3 极简版 ===== */
.post-detail {
  background: #fff !important;
}
.post-detail .sub-header.detail-header {
  background: #fff !important;
  border-bottom: 1px solid #f5f5f5;
}
.post-detail .detail-card {
  padding: 20px 18px !important;
}
.post-detail .detail-author-bar {
  margin-bottom: 20px;
  gap: 10px;
}
.post-detail .detail-author-avatar {
  width: 38px !important; height: 38px !important;
  border: none !important;
}
.post-detail .detail-author-name { font-size: 14px !important; }
.post-detail .detail-author-time { font-size: 11px !important; }
.post-detail .detail-board-tag { display: none !important; }
.post-detail .detail-dm-btn { display: none !important; }

.post-detail .detail-title {
  font-size: 19px !important;
  margin-bottom: 12px !important;
}
.post-detail .post-full {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #222 !important;
}
.post-detail .post-detail-image { border-radius: 8px; }
.post-detail .post-detail-image img { border-radius: 8px; }

.post-detail .detail-interaction {
  padding: 16px 0 !important;
  margin-top: 20px;
  border-top: 1px solid #f5f5f5 !important;
  gap: 28px;
}
.post-detail .detail-interact-btn { color: #999 !important; font-size: 13px; }
.post-detail .detail-interact-btn .material-icons { font-size: 19px; }

.post-detail .comments-section {
  background: #fff !important;
  border-radius: 0 !important;
  padding: 16px 0 0 !important;
  margin-top: 0;
  border-top: 8px solid #f7f7f9;
}
.post-detail .comments-title {
  font-size: 14px; color: #333;
  padding-bottom: 10px;
}
.post-detail .comment-item { padding: 12px 0; }
.post-detail .comment-avatar { width: 32px; height: 32px; }
.post-detail .comment-author { font-size: 13px; }
.post-detail .comment-text { font-size: 14px; }

.post-detail .comment-input-bar {
  background: #fff !important;
  border-top: 1px solid #eee !important;
}
.post-detail .comment-input-bar .input-shell {
  background: #f5f5f7 !important;
}
.post-detail .comment-input-bar .send-btn {
  background: #1a1a1a !important;
}


/* 评论区：无卡片包裹 */
.post-detail .comments-section {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 16px 18px 0 !important;
  border-top: 8px solid #f5f5f7 !important;
}


/* 评论输入框：内嵌在评论区顶部 */
.post-detail .comment-input-bar {
  position: static !important;
  background: transparent !important;
  padding: 0 0 12px !important;
  border: none !important;
  display: flex !important;
  gap: 10px;
  align-items: center;
}
.post-detail .comment-input-bar .input-shell {
  flex: 1;
  background: #f5f5f7 !important;
  border-radius: 18px !important;
  padding: 0 14px !important;
  height: 38px !important;
}
.post-detail .comment-input-bar input {
  background: transparent !important;
  border: none !important;
  height: 38px !important;
  font-size: 14px;
}
.post-detail .comment-input-bar .send-btn {
  width: auto !important;
  height: 38px !important;
  border-radius: 18px !important;
  background: #1a1a1a !important;
  color: #fff !important;
  font-size: 13px;
  padding: 0 16px !important;
  border: none;
}
.post-detail .comment-input-bar .send-btn:disabled {
  background: #ddd !important;
}
.post-detail { padding-bottom: 30px !important; }


/* ===== 帖子详情 v4（知乎卡片风） ===== */
.post-detail {
  background: #f5f6f8 !important;
}
.post-detail .sub-header.detail-header {
  background: #f5f6f8 !important;
  border-bottom: none !important;
}
.post-detail .detail-card {
  background: #fff !important;
  margin: 12px !important;
  border-radius: 16px !important;
  padding: 22px 18px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.03) !important;
}

/* 作者：左头像，右昵称时间，右上角不显示标签 */
.post-detail .detail-author-bar {
  margin-bottom: 18px;
  gap: 10px;
}
.post-detail .detail-author-avatar {
  width: 40px !important; height: 40px !important;
}
.post-detail .detail-author-name { font-size: 14px !important; }
.post-detail .detail-author-time { font-size: 11px !important; }
.post-detail .detail-board-tag,
.post-detail .detail-dm-btn { display: none !important; }

.post-detail .detail-title {
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin-bottom: 12px !important;
  line-height: 1.4;
}
.post-detail .post-full {
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #333 !important;
}
.post-detail .post-detail-image { border-radius: 10px; }
.post-detail .post-detail-image img { border-radius: 10px; }

/* 互动：大圆角胶囊按钮 */
.post-detail .detail-interaction {
  margin-top: 20px !important;
  padding: 0 !important;
  border-top: none !important;
  gap: 10px;
}
.post-detail .detail-interact-btn {
  background: #f5f6f8 !important;
  border-radius: 20px !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  color: #666 !important;
}
.post-detail .detail-interact-btn .material-icons { font-size: 17px !important; }
.post-detail .detail-interact-btn.liked {
  background: #ffe4ec !important;
  color: #ff5c96 !important;
}

/* 评论区：另一个卡片 */
.post-detail .comments-section {
  background: #fff !important;
  border-radius: 16px !important;
  padding: 18px !important;
  margin: 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  border-top: none !important;
}
.post-detail .comments-title {
  font-size: 15px;
  border-bottom: none !important;
  padding-bottom: 10px;
}
.post-detail .comment-input-bar {
  margin-bottom: 8px;
}
.post-detail .comment-item {
  border-bottom: none;
  padding: 14px 0;
}
.post-detail .empty-comments { padding: 20px 0; }


/* ===== 帖子详情 v5（Medium 阅读风） ===== */
.post-detail {
  background: #fff !important;
}
.post-detail .sub-header.detail-header {
  background: #fff !important;
  border-bottom: none !important;
}
.post-detail .detail-card {
  background: #fff !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 24px 22px !important;
  box-shadow: none !important;
}

/* 作者行：小字灰色 */
.post-detail .detail-author-bar {
  margin-bottom: 24px;
  gap: 10px;
}
.post-detail .detail-author-avatar {
  width: 36px !important; height: 36px !important;
}
.post-detail .detail-author-name { font-size: 13px !important; color: #888 !important; font-weight: 500 !important; }
.post-detail .detail-author-time { font-size: 11px !important; color: #bbb !important; }
.post-detail .detail-board-tag,
.post-detail .detail-dm-btn { display: none !important; }

/* 标题超大 */
.post-detail .detail-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0a0a0a !important;
  margin-bottom: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: -.3px;
}
.post-detail .post-full {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #2c2c2c !important;
}
.post-detail .post-detail-image { border-radius: 6px; margin-top: 18px; }
.post-detail .post-detail-image img { border-radius: 6px; }

/* 互动：纯图标无背景 */
.post-detail .detail-interaction {
  margin-top: 28px !important;
  padding: 14px 0 !important;
  border-top: 1px solid #f0f0f0 !important;
  gap: 28px;
}
.post-detail .detail-interact-btn {
  background: transparent !important;
  padding: 0 !important;
  color: #999 !important;
  font-size: 13px !important;
}
.post-detail .detail-interact-btn .material-icons { font-size: 20px !important; }
.post-detail .detail-interact-btn.liked { color: #ff5c96 !important; background: transparent !important; }

/* 评论区 */
.post-detail .comments-section {
  background: #fff !important;
  border-radius: 0 !important;
  padding: 20px 22px !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-top: 8px solid #f5f5f7 !important;
}
.post-detail .comments-title {
  font-size: 14px; color: #999; font-weight: 500;
  border-bottom: none !important;
  padding-bottom: 12px;
}
.post-detail .comment-item {
  border-bottom: none;
  padding: 14px 0;
}
.post-detail .comment-avatar { width: 32px; height: 32px; }
.post-detail .comment-author { color: #555; }
.post-detail .comment-text { color: #2c2c2c; }


/* ===== 帖子详情 v6（小红书笔记风） ===== */
.post-detail {
  background: #fafafa !important;
}
.post-detail .sub-header.detail-header {
  background: linear-gradient(180deg, #fff0f4, #fafafa) !important;
  border-bottom: none !important;
}
.post-detail .detail-card {
  background: #fff !important;
  margin: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 24px 20px 20px !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.04) !important;
  margin-top: -10px !important;
  position: relative;
}

/* 作者行 */
.post-detail .detail-author-bar {
  margin-bottom: 18px;
  gap: 10px;
}
.post-detail .detail-author-avatar {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
}
.post-detail .detail-author-name { font-size: 14px !important; font-weight: 600 !important; }
.post-detail .detail-author-time { font-size: 11px !important; color: #aaa !important; }
.post-detail .detail-board-tag,
.post-detail .detail-dm-btn { display: none !important; }

.post-detail .detail-title {
  font-size: 19px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}
.post-detail .post-full {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #333 !important;
}
.post-detail .post-detail-image { border-radius: 10px; margin-top: 12px; }
.post-detail .post-detail-image img { border-radius: 10px; }

/* 互动栏：底部固定一行 */
.post-detail .detail-interaction {
  margin-top: 20px !important;
  padding: 14px 0 !important;
  border-top: 1px solid #f5f5f5 !important;
  justify-content: flex-end !important;
  gap: 20px;
}
.post-detail .detail-interact-btn {
  color: #888 !important;
  font-size: 13px !important;
}
.post-detail .detail-interact-btn .material-icons { font-size: 19px; }
.post-detail .detail-interact-btn.liked { color: #ff5c96 !important; }

/* 评论区 */
.post-detail .comments-section {
  background: #fff !important;
  border-radius: 0 !important;
  padding: 18px 20px !important;
  margin-top: 10px !important;
  box-shadow: none !important;
  border-top: 6px solid #f5f5f7 !important;
}
.post-detail .comments-title { font-size: 14px; border: none !important; }
.post-detail .comment-item { border-bottom: 1px solid #f7f7f7; }


/* ===== 帖子详情 v7（QQ空间/微博风，照参考图） ===== */
.post-detail {
  background: #fff !important;
}
.post-detail .sub-header.detail-header {
  background: #fff !important;
  border-bottom: none !important;
}
.post-detail .detail-card {
  background: #fff !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 16px 18px 20px !important;
  box-shadow: none !important;
}

/* 作者行：小头像 + 昵称 + 日期 + 浏览数 */
.post-detail .detail-author-bar {
  margin-bottom: 18px !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
.post-detail .detail-author-avatar {
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}
.post-detail .detail-author-info {
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
}
.post-detail .detail-author-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}
.post-detail .detail-author-time {
  font-size: 12px !important;
  color: #999 !important;
  margin-top: 0 !important;
}
.post-detail .detail-board-tag,
.post-detail .detail-dm-btn { display: none !important; }

/* 正文：无标题，直接内容 */
.post-detail .detail-body { padding: 0; }
.post-detail .detail-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin-bottom: 10px !important;
  line-height: 1.5;
}
.post-detail .post-full {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #1a1a1a !important;
  white-space: pre-wrap;
}
.post-detail .post-detail-image {
  margin-top: 14px;
  border-radius: 8px;
  overflow: hidden;
}
.post-detail .post-detail-image img {
  width: 100%;
  border-radius: 8px;
}

/* 互动栏：移到底部固定 */
.post-detail .detail-interaction { display: none !important; }

/* 评论区 */
.post-detail .comments-section {
  background: #fff !important;
  border-radius: 0 !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-top: 8px solid #f5f5f7 !important;
}
.post-detail .comments-title {
  font-size: 14px; color: #666; font-weight: 500;
  border-bottom: none !important;
  padding-bottom: 10px;
}
.post-detail .comment-item {
  border-bottom: none;
  padding: 12px 0;
}
.post-detail .comment-avatar { width: 34px; height: 34px; }
.post-detail .comment-author { font-size: 13px; color: #333; }
.post-detail .comment-time { font-size: 11px; color: #aaa; }
.post-detail .comment-text { font-size: 14px; color: #1a1a1a; }


/* 帖子详情底部栏：输入框 + 评论 + 点赞 */
.post-bottom-bar {
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom));
  left: 0; right: 0;
  background: #fff;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 50;
}
.bottom-input {
  flex: 1;
  background: #f5f5f7;
  border-radius: 20px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  color: #aaa;
  font-size: 13px;
}
.bottom-input .material-icons { font-size: 18px; }
.bottom-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #666;
  font-size: 11px;
}
.bottom-action .material-icons { font-size: 22px; }
.bottom-action.liked { color: #ff5c96; }
.post-detail { padding-bottom: calc(130px + env(safe-area-inset-bottom)) !important; }


/* 修 UI 残留问题 */
.post-detail .comment-input-bar { display: none !important; }
.post-detail .sub-header .back-btn {
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
}
.post-detail .sub-header .back-btn .material-icons {
  font-size: 26px;
  color: #1a1a1a;
}
.post-detail .comments-section { padding: 16px 18px !important; }
.post-detail .comments-title { padding-left: 0 !important; margin-left: 0 !important; }


/* ===== 帖子详情 v8：严格照参考图 ===== */
.post-detail {
  background: #fff !important;
  padding-bottom: 120px !important;
}
.post-detail .sub-header.detail-header {
  background: #fff !important;
  border-bottom: none !important;
  height: 48px !important;
}
.post-detail .sub-header .back-btn {
  background: transparent !important;
  width: 32px !important; height: 32px !important;
}
.post-detail .sub-header .back-btn .material-icons { font-size: 24px; color: #1a1a1a; }

.post-detail .detail-card {
  background: #fff !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 8px 16px 16px !important;
  box-shadow: none !important;
}

/* 作者行 */
.post-detail .detail-author-bar {
  margin-bottom: 14px !important;
  gap: 12px !important;
}
.post-detail .detail-author-avatar {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
}
.post-detail .detail-author-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}
.post-detail .detail-author-time {
  font-size: 12px !important;
  color: #999 !important;
  margin-top: 2px !important;
}
.post-detail .detail-board-tag,
.post-detail .detail-dm-btn { display: none !important; }

/* 标题+正文 */
.post-detail .detail-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin: 0 0 8px !important;
  line-height: 1.5;
}
.post-detail .post-full {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #1a1a1a !important;
}
.post-detail .post-detail-image {
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
}
.post-detail .post-detail-image img { border-radius: 8px; }

/* 隐藏旧互动栏 */
.post-detail .detail-interaction { display: none !important; }

/* 评论区 */
.post-detail .comments-section {
  background: #fff !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-top: none !important;
}
.post-detail .comments-title {
  font-size: 14px; color: #666; font-weight: 500;
  border-bottom: none !important;
  padding-bottom: 10px;
}
.post-detail .comment-item {
  border-bottom: none;
  padding: 12px 0;
}
.post-detail .comment-avatar { width: 34px; height: 34px; }
.post-detail .comment-author { font-size: 14px; color: #1a1a1a; font-weight: 500; }
.post-detail .comment-time { font-size: 11px; color: #aaa; }
.post-detail .comment-text { font-size: 14px; color: #333; }
.post-detail .comment-input-bar { display: none !important; }

/* 底部固定栏 */
.post-bottom-bar {
  position: fixed !important;
  bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  left: 0; right: 0;
  background: #fff !important;
  padding: 8px 12px !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #f0f0f0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  z-index: 50 !important;
}
.bottom-input {
  flex: 1;
  background: #f5f5f7 !important;
  border-radius: 18px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  color: #999 !important;
  font-size: 13px !important;
}
.bottom-input .material-icons { font-size: 18px; }
.bottom-action {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: #666 !important;
  font-size: 10px !important;
}
.bottom-action .material-icons { font-size: 22px; }
.bottom-action.liked { color: #ff5c96 !important; }


/* 帖子详情：浅灰背景，内容白 */
.post-detail {
  background: #f7f7f9 !important;
}
.post-detail .detail-card {
  background: #fff !important;
}
.post-detail .comments-section {
  background: #fff !important;
  margin-top: 10px !important;
}


/* 评论区位置调整 */
.post-detail .comments-section {
  margin-top: 10px !important;
  padding-top: 16px !important;
}
.post-detail .comments-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  margin-bottom: 4px;
}


/* 强制显示底部栏 */
.post-bottom-bar {
  display: flex !important;
  position: fixed !important;
  bottom: 60px !important;
  left: 0 !important; right: 0 !important;
  background: #fff !important;
  padding: 10px 14px !important;
  border-top: 1px solid #eee !important;
  z-index: 999 !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* 修复：post-detail 去掉 transform，让 fixed 生效 */
.post-detail {
  transform: none !important;
  -webkit-transform: none !important;
  perspective: none !important;
  filter: none !important;
}
.post-detail .post-bottom-bar {
  position: fixed !important;
  bottom: 60px !important;
  left: 0 !important; right: 0 !important;
  background: #fff !important;
  padding: 10px 14px !important;
  border-top: 1px solid #eee !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  z-index: 999 !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}
.post-detail .bottom-input {
  flex: 1;
  background: #f5f5f7 !important;
  border-radius: 18px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  color: #999 !important;
  font-size: 13px !important;
}
.post-detail .bottom-input .material-icons { font-size: 18px; }
.post-detail .bottom-action {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  color: #666 !important;
  font-size: 10px !important;
}
.post-detail .bottom-action .material-icons { font-size: 22px; }
.post-detail .bottom-action.liked { color: #ff5c96 !important; }
.post-detail { padding-bottom: 130px !important; }


/* ========================================
   帖子详情 v9（全新干净版本）
   ======================================== */

/* 页面容器 */
.post-detail {
  background: #f7f7f9 !important;
  transform: none !important;
  -webkit-transform: none !important;
  padding-bottom: 120px !important;
}

/* 顶部导航 */
.post-detail .detail-header {
  background: #fff !important;
  border-bottom: none !important;
  height: 48px !important;
}
.post-detail .detail-header .icon-btn {
  background: transparent !important;
  width: 32px !important;
  height: 32px !important;
}
.post-detail .detail-header .icon-btn .material-icons {
  font-size: 24px;
  color: #1a1a1a;
}

/* 内容卡片 */
.post-detail .detail-card {
  background: #fff !important;
  margin: 10px !important;
  border-radius: 12px !important;
  padding: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

/* 作者行 */
.post-detail .detail-author-bar {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.post-detail .detail-author-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}
.post-detail .detail-author-info {
  flex: 1;
  display: flex !important;
  flex-direction: column;
}
.post-detail .detail-author-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
}
.post-detail .detail-author-time {
  font-size: 11px !important;
  color: #999 !important;
  margin-top: 2px;
}
.post-detail .detail-board-tag,
.post-detail .detail-dm-btn { display: none !important; }

/* 标题+正文 */
.post-detail .detail-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 0 10px !important;
  line-height: 1.4;
}
.post-detail .post-full {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #333 !important;
}
.post-detail .post-detail-image {
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
}
.post-detail .post-detail-image img {
  width: 100%;
  border-radius: 8px;
}

/* 旧互动栏隐藏 */
.post-detail .detail-interaction { display: none !important; }

/* 评论区 */
.post-detail .comments-section {
  background: #fff !important;
  margin: 10px !important;
  border-radius: 12px !important;
  padding: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.post-detail .comments-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  margin-bottom: 4px;
}
.post-detail .empty-comments {
  padding: 20px 0;
  text-align: center;
  color: #aaa;
  font-size: 13px;
}
.post-detail .comment-item {
  display: flex !important;
  gap: 10px;
  padding: 12px 0;
  border-bottom: none !important;
}
.post-detail .comment-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}
.post-detail .comment-body { flex: 1; }
.post-detail .comment-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.post-detail .comment-author {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
}
.post-detail .comment-time {
  font-size: 11px !important;
  color: #aaa !important;
}
.post-detail .comment-text {
  font-size: 14px !important;
  color: #333 !important;
  line-height: 1.6;
}
.post-detail .comment-like {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  color: #999;
  font-size: 12px;
}
.post-detail .comment-like.liked { color: #ff5c96; }
.post-detail .comment-like .material-icons { font-size: 16px; }

/* 底部固定栏 */
.post-bottom-bar {
  position: fixed !important;
  bottom: 60px !important;
  left: 0 !important;
  right: 0 !important;
  background: #fff !important;
  padding: 10px 14px !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid #eee !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  z-index: 999 !important;
}
.post-bottom-bar .bottom-input {
  flex: 1;
  background: #f5f5f7 !important;
  border-radius: 18px !important;
  height: 36px !important;
  border: none !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  color: #333 !important;
  outline: none !important;
}
.post-bottom-bar .bottom-action {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  color: #666 !important;
  font-size: 10px !important;
}
.post-bottom-bar .bottom-action .material-icons { font-size: 22px; }
.post-bottom-bar .bottom-action.liked { color: #ff5c96 !important; }


/* ========================================
   帖子详情全新版 post-view (pv-)
   ======================================== */
.post-view {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 120px;
}
.pv-header {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.pv-back {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
}
.pv-back .material-icons {
  font-size: 24px;
  color: #1a1a1a;
}
.pv-body {
  padding: 8px 18px;
}
.pv-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.pv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.pv-name {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
.pv-time {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}
.pv-title {
  font-size: 19px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 10px;
  line-height: 1.4;
}
.pv-content {
  font-size: 16px;
  line-height: 1.75;
  color: #1a1a1a;
  white-space: pre-wrap;
}
.pv-image {
  margin-top: 12px;
  border-radius: 8px;
  overflow: hidden;
}
.pv-image img {
  width: 100%;
}
.pv-comments {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 8px solid #f5f5f7;
}
.pv-comments-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12px;
}
.pv-no-comments {
  color: #aaa;
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
}
.pv-comment {
  display: flex;
  gap: 10px;
  padding: 12px 0;
}
.pv-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.pv-comment-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.pv-comment-name {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
}
.pv-comment-time {
  font-size: 11px;
  color: #aaa;
}
.pv-comment-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}
.pv-bottom {
  position: fixed;
  bottom: 60px;
  left: 0; right: 0;
  background: #fff;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 999;
}
.pv-input {
  flex: 1;
  background: #f5f5f7;
  border: none;
  border-radius: 18px;
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
  outline: none;
}
.pv-like {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  font-size: 13px;
  cursor: pointer;
}
.pv-like .material-icons {
  font-size: 22px;
}
.pv-like.active {
  color: #ff5c96;
}


/* 公告弹窗 */
.announce-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.announce-box {
  width: 80%;
  max-width: 320px;
  background: #fff;
  border-radius: 16px;
  padding: 28px 22px 22px;
  text-align: center;
}
.announce-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.announce-sub {
  font-size: 12px;
  color: #999;
  margin-bottom: 18px;
}
.announce-body {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  margin-bottom: 22px;
}
.announce-body p { margin: 0; }
.announce-group {
  color: #ff5c96;
  font-weight: 500;
  margin-top: 8px;
}
.announce-btn {
  width: 100%;
  height: 42px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 21px;
  font-size: 15px;
  cursor: pointer;
}
.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0 20px 0;
}
.auth-forgot-row .auth-forgot {
  color: #ff5c96;
  font-size: 13px;
  cursor: pointer;
}
.cert-done { text-align:center; padding:60px 20px; }
.cert-done h3 { font-size:20px; margin:16px 0 8px; }
.cert-done p { color:#999; font-size:14px; }
.cert-form { padding:20px; }
.cert-field { margin-bottom:20px; }
.cert-field label { display:block; font-size:14px; color:#333; margin-bottom:8px; }
.cert-field textarea, .cert-field input {
  width:100%; padding:12px; border:1px solid #e8e8e8; border-radius:8px; font-size:14px; box-sizing:border-box;
}
.cert-submit {
  width:100%; padding:14px; background:#1a1a1a; color:#fff; border:none; border-radius:24px; font-size:16px; margin-top:10px;
}
.ok-cert {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: transparent;
  color: #5396FF;
  font-size: 12px;
  font-weight: 500;
}
.profile-gender {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}
.gender-male {
  background: rgba(83,150,255,0.2);
  color: #5396FF;
}
.gender-female {
  background: rgba(255,120,180,0.2);
  color: #FF78B4;
}
/* ===== 个人主页新样式 ===== */
.view-profile {
  background: #f5f6fa;
  min-height: 100vh;
  padding-bottom: 80px;
}
.pf-cover {
  height: 220px;
  background: linear-gradient(180deg, #d8dde8 0%, #e8ecf4 100%);
  position: relative;
}
.pf-back, .pf-menu {
  position: absolute;
  top: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}
.pf-back { left: 16px; }
.pf-menu { right: 16px; }
.pf-info {
  padding: 0 20px;
  margin-top: -50px;
  position: relative;
}
.pf-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.pf-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-avatar .material-icons {
  font-size: 48px;
  color: #ccc;
}
.pf-actions {
  position: absolute;
  right: 20px;
  top: 10px;
  display: flex;
  gap: 10px;
}
.pf-btn {
  padding: 8px 20px;
  border-radius: 20px;
  border: none;
  font-size: 14px;
  font-weight: 500;
}
.pf-btn-primary {
  background: #000;
  color: #fff;
}
.pf-name-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pf-name {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
}
.pf-gender {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-gender .material-icons { font-size: 14px; }
.pf-badges {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}
.pf-level, .pf-id {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.pf-level {
  background: #1a1a1a;
  color: #fff;
}
.pf-id {
  background: #f0f0f0;
  color: #666;
}
.pf-bio {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}
.pf-stats {
  margin: 20px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 0;
  display: flex;
}
.pf-stat {
  flex: 1;
  text-align: center;
}
.pf-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
}
.pf-stat-label {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
/* ===== 编辑资料页 ===== */
.edit-page {
  position: fixed;
  inset: 0;
  background: #f5f6fa;
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.edit-nav {
  position: sticky;
  top: 0;
  background: #fff;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 12px 10px;
  border-bottom: 1px solid #f0f0f0;
}
.edit-back {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}
.edit-back .material-icons { font-size: 22px; }
.edit-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.edit-save {
  font-size: 14px;
  color: #999;
  cursor: pointer;
  padding: 6px 12px;
}
.edit-body {
  padding: 10px 0 100px;
}
.edit-row {
  background: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.edit-row:first-child {
  border-radius: 0;
}
.edit-label {
  font-size: 14px;
  color: #1a1a1a;
}
.edit-value {
  display: flex;
  align-items: center;
  gap: 6px;
}
.edit-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.edit-avatar .material-icons {
  font-size: 26px;
  color: #ccc;
}
.edit-arrow {
  color: #ccc;
  font-size: 18px;
}
.edit-value-text {
  font-size: 13px;
  color: #999;
}
.edit-group {
  background: #fff;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.edit-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.edit-count {
  font-size: 11px;
  color: #bbb;
}
.edit-input-wrap {
  background: #f5f6fa;
  border-radius: 8px;
  padding: 10px 12px;
}
.edit-input-wrap input,
.edit-input-wrap textarea,
.edit-input-wrap select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #1a1a1a;
  -webkit-appearance: none;
}
.edit-textarea-wrap textarea {
  min-height: 72px;
  resize: none;
}
.edit-submit {
  margin: 20px 16px 0;
  width: calc(100% - 32px);
  height: 44px;
  border-radius: 22px;
  border: none;
  background: #1a1a1a;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
/* ===== 编辑资料页 v2 ===== */
.epage {
  position: fixed;
  inset: 0;
  background: #f5f6fa;
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top, 20px);
}
.epage-nav {
  position: sticky;
  top: 0;
  background: #fff;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid #f0f0f0;
  padding-top: env(safe-area-inset-top, 20px);
  padding-bottom: 8px;
}
.epage-back {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}
.epage-back .material-icons { font-size: 22px; }
.epage-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.epage-save {
  font-size: 14px;
  color: #999;
  cursor: pointer;
  padding: 6px 12px;
}
.epage-body {
  padding: 10px 12px 100px;
}
.epage-card {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.epage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
}
.epage-row-static {
  cursor: default;
}
.epage-label {
  font-size: 14px;
  color: #1a1a1a;
}
.epage-value {
  font-size: 13px;
  color: #999;
}
.epage-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.epage-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.epage-avatar .material-icons {
  font-size: 26px;
  color: #ccc;
}
.epage-field {
  padding: 12px 14px;
}
.epage-field-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.epage-count {
  font-size: 11px;
  color: #bbb;
}
.epage-input {
  width: 100%;
  border: none;
  outline: none;
  background: #f5f6fa;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #1a1a1a;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.epage-textarea {
  min-height: 72px;
  resize: none;
}
.epage-select {
  cursor: pointer;
}
.epage-divider {
  height: 1px;
  background: #f5f6fa;
  margin: 0 14px;
}
.epage-submit {
  margin: 20px 4px 0;
  width: calc(100% - 8px);
  height: 44px;
  border-radius: 22px;
  border: none;
  background: #1a1a1a;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
/* ===== 设置侧边抽屉 ===== */

/* ===== 设置侧边抽屉 ===== */
.setdrawer-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2000;
}
.setdrawer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: #fff;
  z-index: 2001;
  padding-top: 30px;
}
.setdrawer-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #f0f0f0;
}
.setdrawer-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.setdrawer-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
.setdrawer-body {
  padding: 10px 0;
}
.setdrawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.setdrawer-item:active {
  background: #f5f6fa;
}
.setdrawer-item .material-icons {
  font-size: 20px;
  color: #666;
}
/* ============================================
   发帖编辑器 · QQ 动态风格复刻（新增）
   ============================================ */
.compose-form { gap: 12px; padding-top: 14px; }

/* 配图或视频（选填） */
.compose-media-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-top: 4px;
  margin-bottom: 20px;
}
.compose-media-row { display: flex; gap: 10px; margin-top: 20px; }
.compose-media-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0;
  border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 60%, transparent);
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.compose-media-btn:active { transform: scale(0.96); }
.compose-media-btn i { font-size: 20px; }

/* 发布到圈子 */
.compose-circle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  margin: 0 16px 8px;
  flex-shrink: 0;
}
.compose-circle-label { font-size: 14px; font-weight: 600; color: var(--text); }
.compose-circle-picker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 0;
  max-width: 60%;
}
.compose-circle-picker .material-icons { font-size: 16px; flex-shrink: 0; }
.compose-circle-placeholder { color: var(--text-3); font-weight: 500; }
.compose-circle-chev { font-size: 18px; }

/* 底部全宽发布按钮 */
.compose-submit-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 4px auto calc(62px + var(--safe-bottom));
  padding: 13px 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 40%, transparent);
  transition: transform 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.compose-submit-btn:active { transform: scale(0.97); }

/* 圈子选择弹层 */
.compose-board-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 300;
  animation: fadeIn 0.24s var(--ease-main);
}
.compose-board-pop {
  position: fixed;
  left: 50%;
  bottom: calc(96px + var(--safe-bottom));
  transform: translateX(-50%);
  width: min(480px, calc(100% - 32px));
  background: var(--card);
  border-radius: 18px;
  border: 1.5px solid color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 14px 14px 12px;
  z-index: 301;
  box-sizing: border-box;
}
.compose-board-pop-head {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  padding: 2px 4px 8px;
}
.compose-board-pop .board-picker { padding-top: 0; }

/* 窄屏微调 */
@media (max-width: 400px) {
  .compose-media-btn { padding: 10px 0; font-size: 13px; }
  .compose-submit-btn { width: calc(100% - 24px); }
}
/* ============================================
   板块发现页 · 兴趣圈子风格复刻（新增）
   ============================================ */
.board-discover {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 6px 0 16px;
}
.board-discover-head { padding: 2px 2px 0; }
.board-discover-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.5px;
}
.board-discover-sub {
  font-size: 13px;
  color: var(--text-2);
  margin: 4px 0 0;
}
.board-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.board-search i { font-size: 18px; color: var(--text-3); }
.board-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
}
.board-search-input::placeholder { color: var(--text-3); }

/* 我的板块 */
.board-my-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 8px;
}
.board-my-label { font-size: 15px; font-weight: 700; color: var(--text); }
.board-my-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.board-my-list { display: flex; flex-wrap: wrap; gap: 8px; }
.board-my-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bc, var(--primary)) 40%, transparent);
  background: color-mix(in srgb, var(--bc, var(--primary)) 9%, var(--card));
  color: var(--bc, var(--primary));
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s;
}
.board-my-item:active { transform: scale(0.95); }
.board-my-item i { font-size: 16px; }
.board-my-empty {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
  padding: 2px 2px 6px;
}

/* 推荐板块 */
.board-rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 10px;
}
.board-rec-label { font-size: 15px; font-weight: 700; color: var(--text); }
.board-rec-tabs { display: flex; gap: 6px; }
.board-rec-tab {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s;
}
.board-rec-tab.active {
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
}
.board-rec-list { display: flex; flex-direction: column; gap: 12px; }
.board-rec-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.board-rec-card:active { transform: scale(0.98); }
.board-rec-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bc, var(--primary)) 16%, var(--card));
  color: var(--bc, var(--primary));
  flex-shrink: 0;
}
.board-rec-icon i { font-size: 22px; }
.board-rec-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.board-rec-name { font-size: 15px; font-weight: 700; color: var(--text); }
.board-rec-desc {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-rec-meta { font-size: 11px; color: var(--text-3); }
.board-rec-join {
  flex-shrink: 0;
  padding: 7px 15px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s;
}
.board-rec-join:active { transform: scale(0.94); }
.board-rec-join.joined {
  background: var(--bg-2);
  color: var(--text-3);
  box-shadow: none;
}
.board-rec-empty { font-size: 13px; color: var(--text-2); padding: 8px 2px; }
/* ============================================
   板块详情页 · 圈子详情风格（新增）
   ============================================ */
.board-posts-page { padding-bottom: 12px; }
.board-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 2px 0;
  padding: 16px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--bc, var(--primary)) 10%, var(--card)), var(--card));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.board-hero-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bc, var(--primary)) 18%, var(--card));
  color: var(--bc, var(--primary));
  flex-shrink: 0;
}
.board-hero-icon i { font-size: 28px; }
.board-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.board-hero-name { font-size: 18px; font-weight: 800; color: var(--text); }
.board-hero-meta { font-size: 12px; color: var(--text-2); }
.board-hero-desc {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-hero-actions {
  display: flex;
  gap: 10px;
  padding: 12px 2px 2px;
}
.board-hero-join, .board-hero-post {
  flex: 1;
  padding: 11px 0;
  border-radius: 999px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s;
}
.board-hero-join { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; }
.board-hero-join.joined { background: var(--bg-2); color: var(--text-3); }
.board-hero-post {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: var(--card);
  color: var(--primary);
  border: 1.5px solid color-mix(in srgb, var(--primary) 55%, transparent);
}
.board-hero-post i { font-size: 17px; }
.board-hero-join:active, .board-hero-post:active { transform: scale(0.96); }

/* 帖子/成员 tabs */
.board-tabs {
  display: flex;
  gap: 24px;
  margin: 14px 2px 4px;
  padding: 0 2px;
  border-bottom: 1px solid var(--border);
}
.board-tab {
  position: relative;
  padding: 9px 2px 11px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  font-family: inherit;
  cursor: pointer;
}
.board-tab.active { color: var(--primary); font-weight: 800; }
.board-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary);
}
.board-posts-body { display: flex; flex-direction: column; gap: 8px; }

/* 成员列表 */
.board-members { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  border-radius: 14px;
}
.member-item:active { background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
}
.member-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.member-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  border-radius: 999px;
  padding: 3px 10px;
}
.board-members-empty { font-size: 13px; color: var(--text-2); padding: 20px 8px; text-align: center; }
/* ===== 帖子详情 v5（参考图：来自圈子行 + 底部输入栏 + 发送文字按钮） ===== */
.post-detail { background: #fff !important; }
.post-detail .sub-header.detail-header { background: #fff !important; border-bottom: 1px solid #f4f4f6 !important; }
.post-detail .sub-header.detail-header h2 { font-size: 15px !important; font-weight: 600 !important; color: #1a1a1a !important; }
.post-detail .detail-card {
  background: #fff !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
}
.post-detail .detail-author-bar { margin-bottom: 14px !important; }
.post-detail .detail-author-avatar { width: 40px !important; height: 40px !important; border-radius: 50% !important; }
.post-detail .detail-title { font-size: 20px !important; margin-bottom: 10px !important; }
.post-detail .post-full { font-size: 15px !important; line-height: 1.7 !important; color: #333 !important; }
.post-detail .detail-from-board {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 12px !important;
  color: #999 !important;
  font-size: 12px !important;
}
.post-detail .detail-from-board i { font-size: 14px !important; }
.post-detail .detail-interaction {
  display: flex !important;
  padding: 14px 0 !important;
  margin-top: 14px !important;
  border-top: 1px solid #f2f2f2 !important;
  gap: 26px !important;
}
.post-detail .detail-interact-btn { color: #888 !important; font-size: 13px !important; }
.post-detail .comments-section {
  background: #fff !important;
  border-top: 8px solid #f7f7f9 !important;
  padding: 14px 18px 0 !important;
  margin: 0 !important;
}
.post-detail .comments-title { font-size: 14px !important; font-weight: 600 !important; color: #333 !important; padding-bottom: 8px !important; border-bottom: none !important; }
.post-detail .empty-comments { padding: 26px 0 !important; color: #bbb !important; font-size: 13px !important; }
.post-detail .empty-comments i { display: none !important; }
.post-detail .comment-input-bar {
  position: fixed !important;
  bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  left: 0 !important; right: 0 !important;
  background: #fff !important;
  border-top: 1px solid #eee !important;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  z-index: 60 !important;
}
.post-detail .comment-input-bar .input-shell { background: #f5f5f7 !important; border-radius: 18px !important; height: 38px !important; padding: 0 14px !important; }
.post-detail .comment-input-bar input { height: 38px !important; }
.post-detail .comment-input-bar .send-btn.send-text-btn {
  width: auto !important;
  height: 36px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ff8fb5, #ff5c96) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 18px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.post-detail .comment-input-bar .send-btn.send-text-btn:disabled { background: #e8e8ec !important; color: #aaa !important; }
.post-detail { padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important; }
/* ================== User profile (其他用户个人主页) ================== */
/* ===== 其他用户个人主页（复刻参考图：封面 + 圆形头像 + 称号 + 签名 + 四格统计 + 动态/关注/粉丝） ===== */
.user-profile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f5f6fa;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 110px;
}
.user-profile::-webkit-scrollbar { display: none; }
/* index.html 中 user-profile 位于带 padding 的 .view-community 内，负外边距实现通栏封面 */
.view-community > .user-profile { margin: -12px -16px 0; }
/* 固定区块不允许被 flex 压缩（否则内容超高时封面会被压成 0 高） */
.user-profile > .pf-cover,
.user-profile > .pf-info,
.user-profile > .pf-stats,
.user-profile > .profile-tabs,
.user-profile > .up-content { flex-shrink: 0; }

/* 操作按钮（关注 / 私信，取代“编辑资料”位置） */
.up-follow, .up-dm {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.up-follow { background: #1a1a1a; color: #fff; }
.up-follow.followed { background: #f0f0f2; color: #999; }
.up-dm { background: #fff; border: 1.5px solid #1a1a1a; color: #1a1a1a; }
.up-dm i { font-size: 16px; }

/* 动态 / 关注 / 粉丝内容区 */
.up-content { padding: 0 20px; }
.up-posts { padding: 4px 0 0; }
.up-post-card { background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.04); cursor: pointer; }
.up-post-title { font-size: 14.5px; font-weight: 600; color: #2b2b2b; }
.up-post-text { margin-top: 4px; font-size: 13px; color: #888; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.up-post-meta { display: flex; gap: 14px; margin-top: 8px; }
.up-post-stat { display: flex; align-items: center; gap: 3px; font-size: 12px; color: #aaa; }
.up-post-stat i { font-size: 14px; }
.up-list { padding: 4px 0 0; }
.up-user-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border-radius: 14px; margin-bottom: 8px; box-shadow: 0 1px 6px rgba(0,0,0,.04); cursor: pointer; }
.up-user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.up-user-name { flex: 1; font-size: 14.5px; font-weight: 600; color: #2b2b2b; }
.up-me-tag { font-size: 11px; color: #ff6f91; border: 1px solid #ff6f91; border-radius: 9px; padding: 1px 7px; }
.up-admin-tag { font-style: normal; font-size: 11px; font-weight: 600; color: #fff; background: #3b82f6; border-radius: 9px; padding: 1px 7px; margin-left: 6px; }
.up-mini-follow { border: 1px solid #ff6f91; background: #fff; color: #ff6f91; font-size: 12px; font-weight: 600; padding: 4px 14px; border-radius: 14px; cursor: pointer; }
.up-mini-follow.followed { border-color: #eee; background: #f7f7f9; color: #aaa; }
.up-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 0; color: #bbb; }
.up-empty i { font-size: 36px; }
.up-empty p { margin: 0; font-size: 13px; }

/* 暗色模式适配 */
[data-dark="1"] .user-profile { background: #0f1424; }
[data-dark="1"] .user-profile .pf-cover { background: linear-gradient(180deg, #232a3d 0%, #2c3450 100%); }
[data-dark="1"] .user-profile .pf-back { background: rgba(0,0,0,0.35); color: #e8e8ec; }
[data-dark="1"] .user-profile .pf-name { color: #f2f2f4; }
[data-dark="1"] .user-profile .pf-bio { color: #c8c8d0; }
[data-dark="1"] .user-profile .pf-id { background: rgba(255,255,255,0.1); color: #a8a8b4; }
[data-dark="1"] .user-profile .pf-stats { background: #1c2540; }
[data-dark="1"] .user-profile .pf-stat-num { color: #f2f2f4; }
[data-dark="1"] .user-profile .pf-stat-label { color: #a8a8b4; }
[data-dark="1"] .user-profile .up-post-card,
[data-dark="1"] .user-profile .up-user-row { background: #1c2540; }
[data-dark="1"] .user-profile .up-post-title,
[data-dark="1"] .user-profile .up-user-name { color: #e8e8ec; }
[data-dark="1"] .user-profile .up-post-text { color: #a8a8b4; }
[data-dark="1"] .user-profile .up-follow { background: #ffffff; color: #1a1a1a; }
[data-dark="1"] .user-profile .up-follow.followed { background: rgba(255,255,255,0.1); color: #a8a8b4; }
[data-dark="1"] .user-profile .up-dm { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: #e8e8ec; }
[data-dark="1"] .user-profile .up-empty { color: #8a8f9e; }
.post-head, .v2-post-head, .detail-author-bar, .member-item, .comment-head { cursor: pointer; }

/* ============================================================
   设置页 / 更多设置页 · 新版 App 风格（v2）
   与「我的」页 mine-menu 设计语言对齐：
   彩色圆角图标块 + 柔和阴影卡片 + 跟随主题变量
   ============================================================ */
.view-settings,
.view-more-settings {
  background: var(--bg);
}
.view-more-settings .sub-header,
.view-settings .sub-header {
  background: transparent;
}
.view-settings .sub-header h2,
.view-more-settings .sub-header h2 {
  font-size: 22px;
  font-weight: 700;
}

/* 分组卡片 */
.set-group {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin: 0 0 12px;
  border: none;
}
.set-group-title {
  padding: 14px 18px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.3px;
}

/* 列表行 */
.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: none;
  background: none;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: opacity 0.15s, background 0.15s;
}
.set-row + .set-row {
  border-top: 1px solid rgba(127, 127, 127, 0.08);
}
.set-row:active {
  opacity: 0.65;
  background: var(--bg-2);
}

/* 彩色圆角图标块（与 mine-menu-icon 一致） */
.ms-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mc, var(--primary)) 14%, transparent);
  color: var(--mc, var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ms-icon .material-icons {
  font-size: 20px;
}

.set-row-label {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.set-row-val {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42%;
}
.set-chevron {
  font-size: 20px;
  color: #c0c4cc;
  flex-shrink: 0;
}

/* 头像行（更多设置页） */
.ms-avatar-row .ms-avatar-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.35;
  min-width: 0;
}
.ms-avatar-row .ms-row-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 1px;
}
.ms-avatar-row .ms-row-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

/* 更多设置页内边距微调（外层 .view 已有 16px 左右 padding） */
.view-more-settings .ms-page {
  padding: 4px 0 28px;
}

/* 退出按钮：在新卡片风格下保持醒目 */
.view-settings .mine-logout-btn {
  margin-top: 18px;
}

/* ===== 我的页右上角设置按钮 · 胶囊版 ===== */
.mine-set-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mine-set-btn .material-icons {
  font-size: 18px;
  color: var(--primary);
}
.mine-set-btn:active {
  transform: scale(0.94);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ===== 设置页退出按钮 · 社区App风（白卡片+红字） ===== */
.view-settings .mine-logout-btn {
  width: 100%;
  margin: 18px 0 8px;
  padding: 14px;
  border: none;
  border-radius: 18px;
  background: var(--card);
  color: #ff4d4f;
  font-size: 15px;
  font-weight: 600;
  gap: 6px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.view-settings .mine-logout-btn .material-icons {
  font-size: 18px;
}
.view-settings .mine-logout-btn:active {
  transform: scale(0.98);
  opacity: 0.7;
}


/* ============================================================
   关于页 · 新版布局（v2）
   ============================================================ */
.view-about {
  background: var(--bg);
  padding-top: 4px;
}

/* 顶部渐变品牌卡片 */
.abt-hero {
  margin: 8px 0 18px;
  padding: 32px 20px 26px;
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--text);
}
.abt-app-icon {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 6px 20px rgba(255, 143, 184, 0.35);
}
.abt-app-name {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
}
.abt-app-slogan {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-2);
}
.abt-version-pill {
  margin-top: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 底部版权备案 */
.abt-foot {
  margin-top: 28px;
  padding: 10px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.abt-copy {
  font-size: 12px;
  color: var(--text-2);
}
.abt-beian {
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  opacity: 0.85;
}
.abt-beian:active { opacity: 0.6; }

/* ===== 我的页：整体白底，与白色状态栏无缝衔接 ===== */
.view-mine {
  background: #ffffff !important;
}
.view-mine .sub-header {
  background: #ffffff !important;
}
.view-mine .ok-profile {
  background: #ffffff !important;
}

/* ===== 根背景统一白色，消除状态栏下灰缝 ===== */
html, body {
  background: #ffffff !important;
}

/* ===== 各页面顶部头部统一白色，与状态栏无缝 ===== */
.msg-header,
.view-messages .msg-header {
  background: #ffffff !important;
}
.view-home .home-header,
.view-home header,
.view-community .sub-header,
.view-settings .sub-header,
.view-more-settings .sub-header,
.view-about .sub-header {
  background: #ffffff !important;
}

/* ===== 设置/更多设置/关于页背景统一白色，消除状态栏下灰缝 ===== */
.view-settings,
.view-more-settings,
.view-about,
.view-profile-edit,
.view-messages {
  background: #ffffff !important;
}

/* ===== 不沉浸式状态栏后，移除原状态栏占位，内容不再偏下 ===== */
.status-bar-spacer {
  height: 0 !important;
  display: none !important;
}

/* ===== 个人主页顶部背景统一白色，与状态栏衔接 ===== */
.view-profile {
  background: #ffffff !important;
}

/* ===== 私信聊天头部：白色风格，与状态栏统一 ===== */
.dm-chat-header {
  background: #ffffff !important;
  border-bottom: 1px solid #f0f0f2;
}
.dm-back-btn {
  color: #1a1a1a !important;
}
.dm-header-name {
  color: #1a1a1a !important;
}
.dm-header-status {
  color: #999 !important;
}
.dm-header-center {
  color: #1a1a1a !important;
}

/* ===== 私信聊天头部 v2：清爽白色风 ===== */
.dm-chat-header {
  background: #ffffff !important;
  padding: 8px 12px 10px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) !important;
  border-bottom: none !important;
}
.dm-back-btn {
  width: 36px !important;
  height: 36px !important;
  background: #f4f5f7 !important;
  color: #1a1a1a !important;
  margin-left: 0 !important;
}
.dm-back-btn:active { background: #e8e9ec !important; }
.dm-header-avatar {
  width: 38px !important;
  height: 38px !important;
  border: 2px solid #f0f0f2;
}
.dm-header-name {
  color: #1a1a1a !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
}
.dm-header-status {
  color: #999 !important;
  font-size: 11px !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dm-header-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf50;
  display: inline-block;
}
.dm-header-status.offline { color: #b6b8c0 !important; }
.dm-header-status.offline::before { background: #c7c9d1; }

/* ===== 私信表情选择器 ===== */
.dm-emoji-btn {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.dm-emoji-btn:active { background: rgba(0,0,0,0.05); }
.dm-emoji-btn .material-icons { font-size: 24px; }
.dm-emoji-panel {
  background: #ffffff;
  border-top: 1px solid #f0f0f2;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  max-height: 220px;
  overflow-y: auto;
  flex-shrink: 0;
}
.dm-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.dm-emoji-item {
  font-size: 24px;
  padding: 6px 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.1s;
}
.dm-emoji-item:active { background: #f0f0f2; }

/* ===== 聊天更多菜单 ===== */
.dm-more-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.dm-more-btn:active { background: rgba(0,0,0,0.05); }
.dm-menu-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 50;
  display: flex;
  align-items: flex-end;
}
.dm-menu-sheet {
  width: 100%;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 8px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.dm-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: none;
  background: none;
  font-size: 15px;
  cursor: pointer;
  border-radius: 12px;
}
.dm-menu-item.danger { color: #ff4d4f; }
.dm-menu-item:active { background: #f5f5f7; }
.dm-menu-cancel {
  width: 100%;
  margin-top: 6px;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: #f4f5f7;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
}
.dm-menu-cancel:active { background: #e8e9ec; }

/* ===== 中间悬浮+号按钮：更精致尺寸 ===== */
.nav-plus-btn {
  width: 46px !important;
  height: 46px !important;
  border-width: 3px !important;
  top: -20px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.14) !important;
}
.nav-plus-btn i {
  font-size: 23px !important;
}

/* ===== 关于页底部留足空间，避免被悬浮+号遮挡 ===== */
.view-about .abt-foot {
  padding-bottom: 120px !important;
}

/* ===== 编辑资料页：白色背景，去掉多余顶部 padding ===== */
.epage {
  background: #ffffff !important;
  padding-top: 0 !important;
}
.epage-nav {
  padding-top: 0 !important;
  padding-bottom: 10px !important;
  height: 52px !important;
}

/* ===== 每日签到弹窗 ===== */
.signin-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.signin-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 20px;
  padding: 24px 20px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.signin-close {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: #f4f5f7; color: #999;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.signin-close .material-icons { font-size: 18px; }
.signin-head { text-align: center; margin-bottom: 18px; }
.signin-title { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
.signin-sub { font-size: 13px; color: #888; }
.signin-sub b { color: #ff6b9d; }
.signin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.signin-day {
  position: relative;
  aspect-ratio: 0.85;
  border-radius: 12px;
  background: #f7f8fa;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
}
.signin-day-label { font-size: 10px; color: #999; }
.signin-day-reward { font-size: 14px; font-weight: 700; color: #ff6b9d; }
.signin-day.today {
  background: linear-gradient(135deg, #ff9eb5, #ff6b9d);
  box-shadow: 0 4px 12px rgba(255,107,157,0.35);
}
.signin-day.today .signin-day-label,
.signin-day.today .signin-day-reward { color: #fff; }
.signin-day.done { background: #fff0f4; }
.signin-day-check {
  position: absolute; top: 3px; right: 3px;
  font-size: 14px; color: #ff6b9d;
}
.signin-btn {
  width: 100%;
  padding: 13px;
  border: none; border-radius: 24px;
  background: linear-gradient(135deg, #ff9eb5, #ff6b9d);
  color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255,107,157,0.35);
}
.signin-btn:disabled {
  background: #e8e9ec; color: #aaa;
  box-shadow: none; cursor: default;
}
.signin-tip { text-align: center; font-size: 11px; color: #bbb; margin-top: 10px; }

/* ===== 板块详情页 v2：清爽白色 ===== */
.board-posts-page {
  background: #ffffff !important;
}
.board-posts-page .sub-header {
  background: #ffffff !important;
}
.board-hero {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important;
  margin: 8px 12px 0 !important;
  padding: 18px 16px !important;
}
.board-hero-icon {
  width: 56px !important;
  height: 56px !important;
  background: linear-gradient(135deg, #ff9eb5, #ff6b9d) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255,107,157,0.25);
}
.board-hero-name { font-size: 19px !important; }
.board-hero-actions {
  padding: 14px 12px 4px !important;
}
.board-hero-join {
  background: linear-gradient(135deg, #ff9eb5, #ff6b9d) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255,107,157,0.3);
}
.board-hero-join.joined {
  background: #f4f5f7 !important;
  color: #999 !important;
  box-shadow: none !important;
}
.board-hero-post {
  background: #f4f5f7 !important;
  color: #1a1a1a !important;
  border: none !important;
}
.board-tabs {
  margin: 0 12px !important;
}

/* ===== 板块详情页 v3 大焕新：参考小红书/B站话题页 ===== */
.board-posts-page {
  background: #f7f8fa !important;
}
.board-posts-page .sub-header {
  background: #ffffff !important;
  border-bottom: 1px solid #f0f0f2 !important;
}

/* 板块头部：大圆角方形图标 */
.board-hero {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  margin: 10px 12px !important;
  padding: 20px 16px !important;
  border-radius: 16px !important;
  gap: 14px !important;
}
.board-hero-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  background: #1a1a1a !important;
  color: #fff !important;
  box-shadow: none !important;
}
.board-hero-icon i { font-size: 30px !important; }
.board-hero-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  letter-spacing: 0.3px;
}
.board-hero-meta {
  font-size: 12px !important;
  color: #999 !important;
  margin-top: 2px;
}
.board-hero-desc {
  font-size: 12.5px !important;
  color: #888 !important;
  margin-top: 4px;
  white-space: normal !important;
  line-height: 1.5;
}

/* 按钮区：黑/白对比 */
.board-hero-actions {
  padding: 4px 12px 8px !important;
  gap: 10px !important;
}
.board-hero-join {
  background: #1a1a1a !important;
  color: #fff !important;
  border-radius: 22px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.board-hero-join.joined {
  background: #f0f1f3 !important;
  color: #999 !important;
}
.board-hero-post {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1.5px solid #1a1a1a !important;
  border-radius: 22px !important;
  font-weight: 600 !important;
}

/* tabs：下划线风格 */
.board-tabs {
  display: flex !important;
  gap: 24px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid #f0f0f2 !important;
  background: #ffffff !important;
  margin: 0 !important;
}
.board-tabs .board-tab {
  background: none !important;
  border: none !important;
  padding: 12px 2px !important;
  font-size: 15px !important;
  color: #999 !important;
  font-weight: 500 !important;
  position: relative;
}
.board-tabs .board-tab.active {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}
.board-tabs .board-tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: #1a1a1a;
}

/* sort-bar 简化 */
.board-posts-body .sort-bar {
  padding: 10px 16px !important;
  background: #f7f8fa !important;
}

/* ===== 板块详情页 v4 精修 ===== */
.board-posts-page {
  background: #ffffff !important;
}

/* 板块头部：去掉重复大标题，紧凑 */
.board-hero {
  background: #ffffff !important;
  box-shadow: none !important;
  border-bottom: 1px solid #f0f0f2 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 16px !important;
  gap: 12px !important;
}
.board-hero-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: #1a1a1a !important;
}
.board-hero-icon i { font-size: 24px !important; }
.board-hero-name { display: none !important; }  /* 导航已有，卡片不重复 */
.board-hero-meta {
  font-size: 13px !important;
  color: #666 !important;
}
.board-hero-desc {
  font-size: 13px !important;
  color: #999 !important;
  margin-top: 2px !important;
}

/* 按钮：小而精致 */
.board-hero-actions {
  padding: 12px 16px !important;
  gap: 10px !important;
}
.board-hero-join, .board-hero-post {
  padding: 8px 0 !important;
  font-size: 13px !important;
  border-radius: 18px !important;
}
.board-hero-join {
  background: #1a1a1a !important;
  color: #fff !important;
}
.board-hero-join.joined {
  background: #f0f1f3 !important;
  color: #999 !important;
}
.board-hero-post {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #e0e1e5 !important;
}

/* tabs：纯文字下划线，不要胶囊 */
.board-tabs {
  padding: 0 16px !important;
  gap: 20px !important;
}
.board-tabs .board-tab {
  padding: 10px 2px !important;
  font-size: 14px !important;
}

/* sort-bar：简洁 */
.board-posts-body .sort-bar {
  padding: 8px 16px !important;
  background: #fff !important;
}
.sort-btn {
  font-size: 13px !important;
  padding: 5px 12px !important;
}

/* post-card 间距收紧 */
.post-list { padding: 0 16px !important; }
.post-card {
  padding: 14px 0 !important;
}

/* ===== 社区列表页 v2：清爽紧凑 ===== */
.view-community {
  background: #ffffff !important;
}
.community-top {
  background: #ffffff !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid #f0f0f2 !important;
}
.community-post-btn {
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  height: auto !important;
  box-shadow: none !important;
}
.community-post-btn i { font-size: 15px !important; }

/* board tabs：下划线风格 */
.view-community .board-tabs {
  display: flex !important;
  gap: 20px !important;
  border-bottom: none !important;
  flex: 1;
}
.view-community .board-tabs .board-tab {
  background: none !important;
  border: none !important;
  color: #999 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 8px 2px !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
.view-community .board-tabs .board-tab.active {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}
.view-community .board-tabs .board-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: #1a1a1a;
}

/* sort-bar：简洁 */
.view-community .sort-bar {
  padding: 8px 16px !important;
  gap: 6px !important;
}
.view-community .sort-btn {
  background: #f4f5f7 !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  color: #999 !important;
}
.view-community .sort-btn.active {
  background: #1a1a1a !important;
  color: #fff !important;
}
.view-community .sort-btn i { font-size: 14px !important; }

/* post-card 紧凑 */
.view-community .post-list {
  padding: 0 16px !important;
}
.view-community .post-card {
  padding: 14px 0 !important;
  border-bottom: 1px solid #f0f0f2 !important;
}
.view-community .post-board {
  background: #f4f5f7 !important;
  color: #888 !important;
  border: none !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
}

/* ===== 注册页：按钮和底部链接不重叠 ===== */
.auth-full-body {
  padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
}
.auth-full-btn {
  margin-bottom: 20px !important;
}
/* 右侧溢出灰条：禁止横向滚动 */
.auth-full-overlay, .auth-modal, .auth-full-body {
  overflow-x: hidden !important;
}

/* ===== 头像选择弹窗 ===== */
.avatar-picker-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 3000;
  display: flex; align-items: flex-end; justify-content: center;
}
.avatar-picker-sheet {
  width: 100%;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}
.avatar-picker-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
}
.avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.avatar-picker-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
}
.avatar-picker-item.selected {
  border-color: #ff6b9d;
}
.avatar-picker-item img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.avatar-picker-check {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 20px;
  color: #ff6b9d;
  background: #fff;
  border-radius: 50%;
}
.avatar-picker-cancel {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: #f4f5f7;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
}

/* ===== 我的页面积分卡片 ===== */
.mine-points-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 16px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fff8e1, #ffecb3);
  border-radius: 14px;
  cursor: pointer;
}
.mine-points-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mine-points-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #ffc94d;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.mine-points-icon .material-icons { font-size: 22px; }
.mine-points-num {
  font-size: 20px;
  font-weight: 800;
  color: #e8a020;
  line-height: 1.1;
}
.mine-points-label {
  font-size: 11px;
  color: #b8860b;
}
.mine-points-go {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #b8860b;
  font-weight: 500;
}
.mine-points-go .material-icons { font-size: 18px; }
.mine-menu-val {
  margin-left: auto;
  font-size: 13px;
  color: #999;
  margin-right: 4px;
}

/* ===== 积分商店 ===== */
.view-shop { background: #f7f8fa !important; }
.shop-points-badge {
  display: flex; align-items: center; gap: 2px;
  background: #fff8e1; color: #e8a020;
  padding: 4px 12px; border-radius: 14px;
  font-size: 13px; font-weight: 700;
}
.shop-points-badge .material-icons { font-size: 16px; }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px;
}
.shop-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shop-card-thumb {
  width: 70px; height: 70px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.shop-thumb-icon { font-size: 34px; color: #fff; }
.shop-card-name { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.shop-card-desc { font-size: 11px; color: #999; margin: 4px 0 12px; text-align: center; }
.shop-card-bottom {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.shop-price {
  display: flex; align-items: center;
  color: #e8a020; font-weight: 700; font-size: 14px;
}
.shop-price .material-icons { font-size: 16px; }
.shop-buy-btn {
  border: none; border-radius: 14px;
  padding: 5px 14px;
  background: #1a1a1a; color: #fff;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.shop-buy-btn.owned {
  background: #f4f5f7; color: #999;
}
.shop-buy-btn.using {
  background: #fff0f4; color: #ff6b9d;
}

/* ===== 商店图标用字体图标 ===== */
.shop-card-thumb {
  background: #f4f5f7 !important;
}
.shop-thumb-icon { color: #1a1a1a !important; }

/* ===== 商品详情弹窗 ===== */
.shop-detail-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.shop-detail-card {
  position: relative;
  width: 100%; max-width: 300px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 20px 20px;
  text-align: center;
}
.shop-detail-close {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: #f4f5f7; color: #999;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.shop-detail-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.shop-detail-icon .material-icons { font-size: 40px; color: #fff; }
.shop-detail-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.shop-detail-desc { font-size: 13px; color: #888; margin: 8px 0 14px; }
.shop-detail-price {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  color: #e8a020; font-weight: 700; font-size: 16px;
  margin-bottom: 16px;
}
.shop-detail-price .material-icons { font-size: 18px; }
.shop-detail-buy {
  width: 100%; padding: 12px;
  border: none; border-radius: 22px;
  background: #1a1a1a; color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.shop-detail-buy.owned { background: #f4f5f7; color: #999; }
.shop-detail-buy.using { background: #fff0f4; color: #ff6b9d; }

/* ===== 关注者列表 ===== */
.follower-list { padding: 0 16px; }
.follower-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f2;
}
.follower-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #f4f5f7; object-fit: cover;
}
.follower-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.follower-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.follower-time { font-size: 12px; color: #999; }
.follower-follow-back {
  border: none; border-radius: 14px;
  padding: 5px 14px;
  background: #1a1a1a; color: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer;
}

/* 自定义头像上传项 */
.avatar-picker-item.custom {
  background: #f4f5f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.avatar-picker-item.custom .material-icons { font-size: 28px; color: #999; }
.avatar-picker-custom-label { font-size: 11px; color: #999; }

/* ===== 社区瀑布流 ===== */
.waterfall-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid #f0f0f2;
}
.waterfall-head {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
}
.waterfall-list {
  column-count: 2;
  column-gap: 10px;
  padding: 10px 12px 100px;
}
.waterfall-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 10px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  cursor: pointer;
}
.waterfall-card:active { opacity: 0.92; }
.waterfall-img img {
  width: 100%;
  display: block;
}
.waterfall-body { padding: 10px 10px 8px; }
.waterfall-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.waterfall-excerpt {
  font-size: 12px;
  color: #999;
  margin: 5px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.waterfall-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}
.waterfall-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f4f5f7;
  object-fit: cover;
}
.waterfall-author { font-size: 11px; color: #888; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waterfall-stats {
  display: flex;
  gap: 14px;
  margin-top: 7px;
  font-size: 12px;
  color: #888;
  align-items: center;
}
.waterfall-stats .material-icons { font-size: 15px; vertical-align: -3px; }
.waterfall-stats .liked { color: #ff6b9d; }

/* ===== 社区瀑布流 v2：竖版图片 + 底栏互动 ===== */
.waterfall-list {
  column-count: 2;
  column-gap: 10px;
  padding: 10px 12px 100px;
  background: #f7f8fa;
}
.waterfall-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 10px;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  cursor: pointer;
}
.waterfall-card:active { transform: scale(0.98); }
.waterfall-img {
  position: relative;
  width: 100%;
  background: transparent;
  overflow: hidden;
}
.waterfall-img img {
  width: 100%;
  height: auto;
  display: block;
}
.waterfall-img.img-err { display: none !important; }
.waterfall-img.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff5f7, #ffe3ea);
}
.waterfall-img.placeholder .material-icons { font-size: 36px; color: #ffb8c9; }
.waterfall-body { padding: 10px 11px 8px; }
.waterfall-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.waterfall-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #f5f5f7;
}
.waterfall-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.waterfall-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f4f5f7;
  object-fit: cover;
  flex-shrink: 0;
}
.waterfall-author {
  font-size: 11.5px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.waterfall-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #888;
  align-items: center;
  flex-shrink: 0;
}
.waterfall-stats .material-icons { font-size: 15px; vertical-align: -3px; }
.waterfall-stats .liked { color: #ff6b9d; }

/* 无图占位：紧凑矮条，不再 3:4 大块 */
.waterfall-img.placeholder {
  aspect-ratio: auto !important;
  height: 96px;
  background: linear-gradient(135deg, #fff5f7, #ffe3ea) !important;
}
.waterfall-img.placeholder .material-icons { font-size: 30px; }

/* 瀑布流背景统一纯白，避免浅灰突兀 */
.waterfall-list {
  background: #ffffff !important;
}
.view-community { background: #ffffff !important; }
.waterfall-card {
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* ===== 社区瀑布流 v3：精致卡片 ===== */
.waterfall-list {
  padding: 10px 12px 100px !important;
  background: #ffffff !important;
}
.waterfall-card {
  border: 1px solid #f0f1f3 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
  border-radius: 14px !important;
}
/* 无图：标题直接开头，加粉色小圆标 */
.waterfall-body.no-img {
  padding-top: 12px !important;
}
.waterfall-title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  position: relative;
  padding-left: 12px;
}
.waterfall-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff9eb5, #ff6b9d);
}
.waterfall-img { border-radius: 14px 14px 0 0 !important; }
.waterfall-foot {
  margin-top: 10px !important;
  padding-top: 9px !important;
}
.waterfall-avatar { width: 20px !important; height: 20px !important; }

/* 瀑布流卡片内容摘要：填高无图卡，两列更均衡 */
.waterfall-desc {
  margin: 6px 0 0 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: #8a8f99 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.waterfall-body { padding: 10px 12px 9px !important; }

/* ===== 社区列表 · 参考图改版 v4（两列卡片 / 自然图 / 深色正文 / 柔和阴影） ===== */
.view-community .waterfall-list {
  column-count: 2;
  column-gap: 14px;
  padding: 14px 14px 120px !important;
  background: #ffffff !important;
}
.view-community .waterfall-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 14px;
  background: #ffffff;
  border: none !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden;
  cursor: pointer;
}
.view-community .waterfall-card:active { transform: scale(0.98); }
/* 图片按自然比例展示，不再强制 3:4 裁剪 */
.view-community .waterfall-img {
  aspect-ratio: auto !important;
  height: auto !important;
  background: transparent;
  overflow: hidden;
}
.view-community .waterfall-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* 超长竖图（高/宽 ≥ 1.9）：限高并居中偏上裁切，避免单图占满整列 */
.view-community .waterfall-img.img-tall {
  max-height: 420px;
}
.view-community .waterfall-img.img-tall img {
  height: 100%;
  max-height: 420px;
  object-position: center top;
}
.view-community .waterfall-body { padding: 14px 14px 12px !important; }
.view-community .waterfall-title {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #1a1a1a !important;
  padding-left: 12px !important;
  -webkit-line-clamp: 2;
}
.view-community .waterfall-title::before {
  width: 5px !important;
  height: 16px !important;
  top: 3px !important;
  border-radius: 3px !important;
  background: linear-gradient(180deg, #ff9eb5, #ff6b9d) !important;
}
.view-community .waterfall-desc {
  margin: 6px 0 0 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #333333 !important;
  -webkit-line-clamp: 4;
}
.view-community .waterfall-foot {
  margin-top: 12px !important;
  padding-top: 11px !important;
  border-top: 1px solid #f0f0f2 !important;
  gap: 8px;
}
.view-community .waterfall-avatar { width: 24px !important; height: 24px !important; }
.view-community .waterfall-author { font-size: 12px !important; color: #999 !important; }
.view-community .waterfall-stats { gap: 12px !important; font-size: 12.5px !important; color: #999 !important; }
.view-community .waterfall-stats .material-icons { font-size: 17px !important; vertical-align: -4px !important; }
.view-community .waterfall-stats .liked { color: #ff6b9d !important; }

/* ===== 社区列表 v4.1 微调：圆角/留白/字号 ===== */
.view-community .waterfall-card {
  border-radius: 20px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07) !important;
}
.view-community .waterfall-body { padding: 15px 15px 13px !important; }
.view-community .waterfall-desc { margin-top: 8px !important; }
.view-community .waterfall-foot { margin-top: 14px !important; padding-top: 12px !important; }
.view-community .waterfall-author { font-size: 12.5px !important; }

/* ===== 首页实时搜索：清除钮 / 用户结果行 / 空状态 ===== */
.v2-home-search.active { border-color: var(--primary); }
.v2-search-clear {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: none; background: #e3e4e8;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #666; cursor: pointer; padding: 0;
}
.v2-search-clear .material-icons { font-size: 14px; }
.v2-search-section { margin: 4px 0 14px; }
.v2-search-section-title {
  font-size: 12.5px; color: #999; margin: 6px 2px 8px; font-weight: 600;
}
.v2-search-user {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 14px;
  padding: 10px 12px; margin-bottom: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  cursor: pointer;
}
.v2-search-user:active { transform: scale(0.98); }
.v2-search-user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: #f0f1f3; flex-shrink: 0;
}
.v2-search-user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-search-user-name {
  font-size: 14.5px; font-weight: 600; color: #1a1a1a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-search-user-sub { font-size: 12px; color: #999; }
.v2-search-chev { color: #ccc; font-size: 20px; flex-shrink: 0; }
.v2-search-empty { padding: 30px 0; }
[data-dark="1"] .v2-search-user { background: rgba(255,255,255,0.06); }
[data-dark="1"] .v2-search-clear { background: rgba(255,255,255,0.15); color: #ccc; }

.v2-search-me {
  font-style: normal; font-size: 11px; font-weight: 600; color: #fff;
  background: var(--primary); border-radius: 6px; padding: 1px 6px; margin-left: 6px;
  vertical-align: 1px;
}


/* ===== 站长专属金冠头像框 ===== */
.admin-ring {
  box-shadow: 0 0 0 2px #f6c453, 0 0 0 4px rgba(246, 196, 83, .28), 0 2px 10px rgba(217, 154, 31, .45) !important;
}
/* ============================================================
   Post detail · App community style (pd-app), final clean layer
   Monochrome black/white; overrides all legacy stacked versions.
   ============================================================ */
.post-detail.pd-app {
  background: #f7f7f8 !important;
  min-height: 100vh;
  padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}
.post-detail.pd-app .sub-header.detail-header {
  background: #fff !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.post-detail.pd-app .sub-header.detail-header h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #111 !important;
}
.post-detail.pd-app .detail-header .icon-btn {
  background: #f4f4f7 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s !important;
}
.post-detail.pd-app .detail-header .icon-btn:hover { background: #e9e9ef !important; }
.post-detail.pd-app .detail-header .icon-btn .material-icons {
  font-size: 22px !important;
  color: #1a1a1a !important;
}
.post-detail.pd-app .detail-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 24px !important;
}

/* Post main card */
.post-detail.pd-app .pd-post {
  background: #fff !important;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.post-detail.pd-app .pd-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.post-detail.pd-app .pd-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.post-detail.pd-app .pd-author-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.post-detail.pd-app .pd-author-name {
  font-size: 15px;
  font-weight: 600;
  color: #111;
}
.post-detail.pd-app .pd-author-time {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}
.post-detail.pd-app .pd-dm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #ececec;
  background: #fff;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.post-detail.pd-app .pd-dm:active { transform: scale(.92); }
.post-detail.pd-app .pd-dm i { font-size: 19px; }

.post-detail.pd-app .pd-title {
  font-size: 20px;
  font-weight: 700;
  color: #111;
  line-height: 1.35;
  margin: 14px 0 8px;
}
.post-detail.pd-app .pd-text {
  font-size: 15px;
  line-height: 1.75;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.post-detail.pd-app .pd-image {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
}
.post-detail.pd-app .pd-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 12px;
}
.post-detail.pd-app .pd-board {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  color: #999;
  font-size: 12px;
}
.post-detail.pd-app .pd-board i { font-size: 14px; }

/* Action row */
.post-detail.pd-app .pd-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f0;
}
.post-detail.pd-app .pd-act {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}
.post-detail.pd-app .pd-act .material-icons { font-size: 20px; }
.post-detail.pd-app .pd-act.liked,
.post-detail.pd-app .pd-act.liked .material-icons { color: #111; }
.post-detail.pd-app .pd-share { margin-left: auto; }

/* Comments */
.post-detail.pd-app .pd-comments {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  margin-top: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.post-detail.pd-app .pd-comments-title {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  padding-bottom: 8px;
}
.post-detail.pd-app .pd-empty {
  padding: 28px 0;
  text-align: center;
  color: #bbb;
  font-size: 13px;
}
.post-detail.pd-app .pd-empty i { display: block; font-size: 34px; margin-bottom: 8px; }
.post-detail.pd-app .pd-comment {
  display: flex;
  gap: 10px;
  padding: 9px 0;
}
.post-detail.pd-app .pd-comment + .pd-comment { border-top: 1px solid #f6f6f6; }
.post-detail.pd-app .pd-c-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.post-detail.pd-app .pd-c-body { flex: 1; min-width: 0; }
.post-detail.pd-app .pd-c-head { display: flex; align-items: center; gap: 8px; }
.post-detail.pd-app .pd-c-name { font-size: 13px; font-weight: 600; color: #444; }
.post-detail.pd-app .pd-c-time { font-size: 11px; color: #bbb; }
.post-detail.pd-app .pd-c-text {
  font-size: 14px;
  color: #222;
  line-height: 1.5;
  margin: 4px 0 0;
  word-break: break-word;
}
.post-detail.pd-app .pd-c-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.post-detail.pd-app .pd-c-like {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}
.post-detail.pd-app .pd-c-like.liked,
.post-detail.pd-app .pd-c-like.liked i { color: #111; }

/* Fixed bottom input */
.post-detail.pd-app .comment-input-bar.pd-input {
  position: fixed !important;
  bottom: calc(54px + env(safe-area-inset-bottom)) !important;
  left: 0 !important;
  right: 0 !important;
  background: #fff !important;
  border-top: 1px solid #eee !important;
  padding: 10px 14px !important;
  display: flex !important;
  gap: 10px;
  align-items: center;
  z-index: 60 !important;
}
.post-detail.pd-app .pd-input .input-shell {
  flex: 1;
  background: #f2f2f4 !important;
  border-radius: 15px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  display: flex;
  align-items: center;
}
.post-detail.pd-app .pd-input .input-shell .input-icon { color: #aaa; font-size: 16px; }
.post-detail.pd-app .pd-input input {
  background: transparent !important;
  border: none !important;
  height: 30px !important;
  font-size: 13px;
  flex: 1;
}
.post-detail.pd-app .pd-input .send-btn.send-text-btn {
  width: auto !important;
  height: 28px !important;
  border-radius: 14px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px !important;
  border: none !important;
  flex-shrink: 0;
}
.post-detail.pd-app .pd-input .send-btn.send-text-btn:disabled {
  background: #e2e2e4 !important;
  color: #aaa !important;
}
/* pd-app patch: remove legacy pink halo/gradient on send button; center fixed bar */
.post-detail.pd-app .pd-input .send-btn.send-text-btn {
  background-image: none !important;
  box-shadow: none !important;
}
.post-detail.pd-app .comment-input-bar.pd-input {
  max-width: 480px;
  left: 50% !important;
  transform: translateX(-50%);
}
/* ===== 详情更多菜单 / 删除确认 / 编辑态（黑白灰） ===== */
.post-detail.pd-app .pd-head-right{position:relative;display:flex;align-items:center;justify-content:flex-end;min-width:40px;}
.post-detail.pd-app .pd-more-btn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;color:#222;cursor:pointer;}
.post-detail.pd-app .pd-more-btn:hover{background:#f0f0f0;}
.post-detail.pd-app .pd-more-btn .material-icons{font-size:22px;}
.post-detail.pd-app .pd-menu-layer{position:fixed;inset:0;z-index:2000;}
.post-detail.pd-app .pd-menu-mask{position:absolute;inset:0;background:rgba(0,0,0,.25);}
.post-detail.pd-app .pd-menu{position:absolute;top:66px;right:14px;min-width:150px;background:#fff;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.16);padding:6px;}
.post-detail.pd-app .pd-menu::before{content:"";position:absolute;top:-5px;right:24px;width:10px;height:10px;background:#fff;transform:rotate(45deg);border-radius:2px;}
.post-detail.pd-app .pd-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;background:none;border:none;border-radius:10px;font-size:15px;color:#222;cursor:pointer;text-align:left;}
.post-detail.pd-app .pd-menu button:hover{background:#f4f4f4;}
.post-detail.pd-app .pd-menu .material-icons{font-size:19px;color:#555;}
/* 帖子图片全屏预览 */
.img-preview-layer{position:fixed;inset:0;z-index:3000;background:#000;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none;}
.img-preview-main{max-width:100vw;max-height:100vh;object-fit:contain;pointer-events:none;}
.img-preview-close{position:fixed;top:calc(16px + env(safe-area-inset-top));right:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3002;}
.img-preview-close .material-icons{font-size:24px;}
.img-preview-bottom-bar{position:fixed;bottom:calc(30px + env(safe-area-inset-bottom));left:0;right:0;display:flex;justify-content:center;z-index:3002;}
.img-preview-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;border-radius:24px;border:none;background:rgba(255,255,255,.95);color:#111;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 4px 20px rgba(0,0,0,.4);}
.img-preview-btn .material-icons{font-size:20px;}
.img-fade-enter-active,.img-fade-leave-active{transition:opacity .3s var(--ease-main);}
.img-fade-enter-from,.img-fade-leave-to{opacity:0;}
.post-detail.pd-app .pd-confirm-mask{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:24px;}
.post-detail.pd-app .pd-confirm{width:100%;max-width:320px;background:#fff;border-radius:18px;padding:22px 20px 16px;box-shadow:0 16px 40px rgba(0,0,0,.2);}
.pd-confirm-title{font-size:17px;font-weight:700;color:#111;margin:0 0 8px;text-align:center;}
.pd-confirm-text{font-size:14px;color:#666;margin:0 0 18px;text-align:center;line-height:1.6;}
.pd-confirm-actions{display:flex;gap:12px;}
.pd-confirm-actions button{flex:1;padding:11px 0;border-radius:12px;font-size:15px;cursor:pointer;border:1px solid #e5e5e5;background:#fff;color:#333;}
.pd-confirm-actions .pd-danger-btn{background:#111;color:#fff;border-color:#111;}
.pd-fade-enter-active,.pd-fade-leave-active{transition:opacity .22s var(--ease-main);}
.pd-fade-enter-from,.pd-fade-leave-to{opacity:0;}

/* ===== 详情评论区：通栏实心工具条，贴底，键盘弹出由 JS 顶起（黑白灰） ===== */
.post-detail.pd-app .comment-input-bar.pd-input {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  background: #fff !important;
  border: none !important;
  border-top: 1px solid #eee !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 12px calc(6px + var(--safe-bottom)) !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
  transform: none !important;
  z-index: 60 !important;
}
.post-detail.pd-app .detail-content {
  padding-bottom: 84px !important;
}

/* ===== 点赞点亮为红色 ===== */
.post-detail.pd-app .pd-act.liked,
.post-detail.pd-app .pd-act.liked .material-icons { color: #ff3b30 !important; }
.post-detail.pd-app .pd-c-like.liked,
.post-detail.pd-app .pd-c-like.liked i { color: #ff3b30 !important; }
.waterfall-stats .liked,
.post-stat.liked { color: #ff3b30 !important; }

.pd-share-icon{width:20px;height:20px;display:block;}

.pd-dm svg.dm-icon{width:19px;height:19px;display:block;}
.up-dm{display:inline-flex;align-items:center;gap:5px;}
.up-dm svg.dm-icon{width:16px;height:16px;display:block;}

/* ===== 详情头部：更多按钮贴最右，标题居中 ===== */
.post-detail.pd-app .detail-header { justify-content: flex-start !important; }
.post-detail.pd-app .detail-header h2 { flex: 1 1 auto; text-align: center; margin: 0; }
.post-detail.pd-app .pd-head-right { margin-left: auto !important; flex-shrink: 0; }

/* ===== 底部导航：选中态改为底部描边短横线（黑白灰） ===== */
.nav-item::before { display: none !important; }
.nav-item.active { color: #111 !important; }
.nav-item.active i { transform: none !important; }
.nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #111;
}

/* ===== 详情空评论态：收紧留白，隐藏大图标 ===== */
.post-detail.pd-app .pd-empty {
  padding: 14px 0 8px !important;
  font-size: 13px !important;
}
.post-detail.pd-app .pd-empty i { display: none !important; }

/* ===== 详情页配色统一：页面白底，卡片无边框，消除灰斑 ===== */
.post-detail.pd-app { background: #fff !important; }
.post-detail.pd-app .pd-post,
.post-detail.pd-app .pd-comments {
  background: #fff !important;
  border: none;
  box-shadow: none !important;
}

/* ===== 主页背景图：编辑页预览 + 封面自适应 ===== */
.pe-bg-preview img {
  width: 56px; height: 36px; object-fit: cover; border-radius: 6px; display: block;
}
.pe-bg-empty { color: #bbb; font-size: 13px; }
.pf-cover {
  background-image: url("../img/default-cover.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== 真实编辑资料弹窗：主页背景图预览 ===== */
.epage-bg-preview {
  width: 72px; height: 46px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #f2f3f5;
}
.epage-bg-preview img { width: 100%; height: 100%; object-fit: cover; }
.epage-bg-empty { color: #bbb; font-size: 12px; }

/* ============ 邀请好友弹窗（简约清爽 · 磨砂质感） ============ */
.invite-mask {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(24, 24, 30, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.invite-panel {
  width: min(92vw, 380px);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  animation: annPop 0.32s var(--ease-main);
}
.invite-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.08);
}
.invite-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.invite-title .material-icons { color: var(--primary); font-size: 20px; }
.invite-close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(127, 127, 127, 0.1);
  border-radius: 50%;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.invite-close:active { opacity: 0.7; }
.invite-close .material-icons { font-size: 18px; }
.invite-body { padding: 16px 18px 20px; overflow-y: auto; }
.invite-tip {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  background: rgba(127, 127, 127, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.invite-stats { display: flex; gap: 10px; margin-bottom: 14px; }
.invite-stat {
  flex: 1;
  text-align: center;
  background: rgba(127, 127, 127, 0.05);
  border: 1px solid rgba(127, 127, 127, 0.1);
  border-radius: 14px;
  padding: 12px 8px;
}
.invite-stat b { display: block; font-size: 20px; color: var(--text); }
.invite-stat span { font-size: 12px; color: var(--text-2); }
.invite-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.invite-item {
  border: 1px solid rgba(127, 127, 127, 0.1);
  border-radius: 14px;
  padding: 12px 12px 10px;
  background: rgba(255, 255, 255, 0.35);
}
.invite-code-wrap { display: flex; align-items: center; gap: 8px; }
.invite-code {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text);
}
.invite-code.off { color: #c0c0c0; text-decoration: line-through; }
.invite-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.invite-status.on { background: rgba(92, 200, 160, 0.15); color: #2f9e6e; }
.invite-status.full { background: rgba(255, 159, 107, 0.16); color: #e88a2f; }
.invite-status.off { background: rgba(127, 127, 127, 0.12); color: #9a9aa0; }
.invite-meta { font-size: 12px; color: var(--text-2); margin-top: 5px; }
.invite-ops { display: flex; gap: 8px; margin-top: 10px; }
.invite-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.invite-btn .material-icons { font-size: 15px; }
.invite-btn.ghost { background: rgba(127, 127, 127, 0.1); color: var(--text); }
.invite-btn.danger { background: rgba(255, 92, 92, 0.1); color: #e05563; }
.invite-btn:active { opacity: 0.7; }
.invite-off-tag { font-size: 12px; color: #c0c0c0; }
.invite-empty { text-align: center; color: #b6b6bd; padding: 22px 0 14px; }
.invite-empty .material-icons { font-size: 40px; opacity: 0.6; }
.invite-empty p { font-size: 13px; margin-top: 8px; }
.invite-gen {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9eb5, #ff7eb3);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}
.invite-gen:active { transform: scale(0.97); }
.invite-gen:disabled { opacity: 0.6; }
.invite-gen .material-icons { font-size: 18px; }
.invite-share {
  border: 1px dashed rgba(122, 162, 255, 0.4);
  background: rgba(122, 162, 255, 0.06);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
}
.invite-share-msg {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
}
.invite-share-link {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-2);
  word-break: break-all;
}
.invite-share-link .material-icons { font-size: 14px; color: var(--primary); }
.invite-share-ops { display: flex; gap: 10px; margin-top: 10px; }
.invite-btn.primary { background: var(--primary); color: #fff; }
.invite-btn:disabled { opacity: 0.55; }
/* ========== 全新图片预览组件 ========== */
.simple-img-preview {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.simple-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}
.simple-img-actions {
  position: absolute;
  bottom: calc(40px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.simple-btn {
  padding: 12px 28px;
  border-radius: 24px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.simple-btn.close {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.simple-btn.save {
  background: #fff;
  color: #111;
}

/* ============================================================
   下拉刷新：旋转光弧 + 「昼」字徽记（每页可定制主题色）
   ============================================================ */
.ptr-wrap {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  z-index: 9000;
  pointer-events: none;
  transform: translate(-50%, -84px) scale(0.82);
  opacity: 0;
  transition:
    transform 0.32s var(--ease-main),
    opacity 0.28s var(--ease-main);
}
.ptr-wrap.ptr-on {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}
.ptr-indicator {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-2);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease-main);
}
.ptr-wrap.ptr-on .ptr-indicator {
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ptr-accent, var(--primary)) 28%, rgba(0, 0, 0, 0.12));
}
/* 旋转光弧：下拉时随手指转动，刷新中匀速旋转（环绕角色头像徽记） */
.ptr-arc {
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--ptr-accent, var(--primary));
  border-right-color: color-mix(in srgb, var(--ptr-accent, var(--primary)) 55%, transparent);
  will-change: transform;
}
.ptr-wrap.ptr-spin .ptr-arc {
  animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* 角色头像徽记（Q版椎名真昼，加载图标） */
.ptr-badge-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ptr-accent, var(--primary)) 45%, transparent);
  display: block;
  flex-shrink: 0;
  background: #fff;
}
/* ===== 帖子详情：黑白简约风格（参考社交 App 布局结构，不照抄配色） ===== */
/* 去卡片化：正文与评论直接平铺，页面一体 */
.post-detail.pd-app .pd-post {
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  padding: 6px 0 14px;
  border-bottom: 1px solid #f0f0f0;
}
.post-detail.pd-app .pd-actions {
  gap: 26px;
  margin-top: 12px;
  padding-top: 0;
  border-top: none;
}
.post-detail.pd-app .pd-comments {
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 2px;
}
.post-detail.pd-app .pd-comments-title {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  padding: 12px 2px 2px;
}
.post-detail.pd-app .pd-comment { padding: 12px 2px; }
.post-detail.pd-app .pd-comment + .pd-comment { border-top: 1px solid #f4f4f4; }
.post-detail.pd-app .pd-c-name { color: #111; font-size: 13px; }
/* @提及 */
.post-detail.pd-app .pd-c-mention {
  display: inline-block;
  font-size: 13px;
  color: #555;
  background: #f5f5f5;
  padding: 1px 8px;
  border-radius: 6px;
  margin: 3px 0 0;
}
/* 评论操作行：点赞 + 回复 */
.post-detail.pd-app .pd-c-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 6px;
}
.post-detail.pd-app .pd-c-like,
.post-detail.pd-app .pd-c-reply {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #888;
  cursor: pointer;
  transition: color 0.16s var(--ease-micro), transform 0.16s var(--ease-micro);
}
.post-detail.pd-app .pd-c-like i,
.post-detail.pd-app .pd-c-reply i { font-size: 16px; }
.post-detail.pd-app .pd-c-like:active,
.post-detail.pd-app .pd-c-reply:active { transform: scale(0.92); }
.post-detail.pd-app .pd-c-like.liked,
.post-detail.pd-app .pd-c-like.liked i { color: #111 !important; }
/* 点赞激活统一黑色（黑白风格，覆盖历史红色） */
.post-detail.pd-app .pd-act.liked,
.post-detail.pd-app .pd-act.liked .material-icons { color: #111 !important; }
/* 举报按钮（黑白简约文字按钮） */
.post-detail.pd-app .pd-report-btn {
  border: none;
  background: transparent;
  color: #666;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  transition: background 0.16s var(--ease-micro), transform 0.16s var(--ease-micro);
}
.post-detail.pd-app .pd-report-btn:active { background: #f2f2f2; transform: scale(0.96); }
/* 输入栏辅助图标（@ 与图片） */
.post-detail.pd-app .comment-input-bar .input-shell .input-icon {
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  transition: background 0.16s var(--ease-micro);
}
.post-detail.pd-app .comment-input-bar .input-shell .input-icon:active { background: #f0f0f0; }
/* ============================================================
 * 登录页 · 彩姬风一键登录欢迎页（紫色星空）
 * 仅作用于 login.html 中带 .auth-hero-page 的 overlay
 * ============================================================ */
.auth-standalone-page .auth-full-overlay.auth-hero-page {
  background: #140b2e !important;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.8), transparent 50%),
    radial-gradient(1px 1px at 28% 8%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 45% 30%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 62% 12%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(2px 2px at 78% 25%, rgba(255,255,255,.8), transparent 50%),
    radial-gradient(1px 1px at 88% 40%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 8% 55%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(1px 1px at 35% 65%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 70%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(1px 1px at 92% 80%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(ellipse at 50% 0%, rgba(150, 90, 255, 0.35), transparent 60%),
    radial-gradient(ellipse at 20% 100%, rgba(90, 50, 200, 0.4), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(120, 60, 220, 0.3), transparent 60%),
    linear-gradient(180deg, #2a1550 0%, #1a0e3d 45%, #0d0722 100%) !important;
  background-attachment: fixed;
}
.auth-hero-page .auth-modal.auth-full {
  background: transparent !important;
  box-shadow: none !important;
}
.auth-hero-body {
  padding: 0 28px !important;
  padding-top: max(0px, env(safe-area-inset-top)) !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex !important;
  flex-direction: column;
}

/* ---------- Hero 欢迎视图 ---------- */
.auth-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-hero-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
}
.auth-hero-logo {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(150, 90, 255, 0.45), 0 0 0 1px rgba(255,255,255,0.08);
}
.auth-hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.auth-hero-name-row {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-hero-name {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 4px;
  text-shadow: 0 2px 12px rgba(150, 90, 255, 0.5);
}
.auth-hero-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.12);
  padding: 3px 10px;
  border-radius: 10px;
  letter-spacing: 1px;
}
.auth-hero-slogan {
  margin-top: 14px;
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 3px;
}

/* 按钮区 */
.auth-hero-actions {
  width: 100%;
  padding-bottom: 10px;
}
.auth-qq-primary-btn {
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 16px;
  background: #fff;
  color: #1a1a1a;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  transition: transform .15s, opacity .15s;
}
.auth-qq-primary-btn:active { transform: scale(.98); opacity: .92; }
.auth-qq-primary-btn svg { width: 26px; height: 26px; }
.auth-hero-alt {
  margin-top: 20px;
  text-align: center;
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
}
.auth-hero-alt:active { opacity: .6; }

/* 协议区 */
.auth-hero-agreement {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 4px;
  margin-top: 18px;
}
.auth-check-circle {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  cursor: pointer;
  transition: all .15s;
  box-sizing: border-box;
}
.auth-check-circle.on {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border-color: transparent;
}
.auth-check-circle svg { width: 12px; height: 12px; }
.auth-agreement-text {
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.auth-agreement-link {
  color: rgba(255,255,255,0.85);
}

/* ---------- 邮箱登录表单视图 ---------- */
.auth-hero-form {
  padding-top: max(20px, env(safe-area-inset-top));
  flex: 1;
  display: flex;
  flex-direction: column;
}
.auth-hero-back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  cursor: pointer;
  padding: 0;
}
.auth-hero-back .material-icons { font-size: 22px; }
.auth-hero-form .auth-full-brand {
  color: #fff !important;
  text-align: left !important;
  font-size: 28px !important;
  margin-bottom: 6px !important;
}
.auth-hero-form .auth-full-brand::before { display: none !important; }
.auth-hero-form .auth-full-title {
  color: rgba(255,255,255,0.85) !important;
  text-align: left !important;
  font-size: 18px !important;
  margin-bottom: 28px !important;
  font-weight: 500 !important;
}
.auth-hero-form .auth-form.auth-mini {
  gap: 14px !important;
}
.auth-hero-form .auth-field.line-field {
  background: rgba(255,255,255,0.1) !important;
  border-bottom: none !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  height: 52px !important;
}
.auth-hero-form .auth-field.line-field input {
  color: #fff !important;
}
.auth-hero-form .auth-field.line-field input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}
.auth-hero-form .auth-field.line-field:focus-within {
  background: rgba(255,255,255,0.16) !important;
  box-shadow: none !important;
}
.auth-hero-form .auth-field.line-field span {
  color: #c4b5fd !important;
  background: transparent !important;
}
.auth-hero-form .auth-captcha-field {
  background: rgba(255,255,255,0.08) !important;
}
.auth-hero-form .auth-full-btn {
  background: #fff !important;
  color: #1a1a1a !important;
  border-radius: 14px !important;
  height: 52px !important;
  margin-top: 24px !important;
  letter-spacing: 2px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25) !important;
}
.auth-hero-form .auth-full-btn .material-icons {
  display: inline !important;
  color: #1a1a1a !important;
  font-size: 20px !important;
}
.auth-hero-form .auth-switch {
  color: rgba(255,255,255,0.5) !important;
  margin-top: 20px !important;
  position: static !important;
  background: transparent !important;
}
.auth-hero-form .auth-switch span { color: #fff !important; }

/* 深色主题下保持紫色星空，不切回暗色 */
body.auth-standalone-page[data-dark="1"] .auth-full-overlay.auth-hero-page {
  background: #140b2e !important;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.8), transparent 50%),
    radial-gradient(1px 1px at 28% 8%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 45% 30%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 62% 12%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(2px 2px at 78% 25%, rgba(255,255,255,.8), transparent 50%),
    radial-gradient(ellipse at 50% 0%, rgba(150, 90, 255, 0.35), transparent 60%),
    radial-gradient(ellipse at 20% 100%, rgba(90, 50, 200, 0.4), transparent 60%),
    linear-gradient(180deg, #2a1550 0%, #1a0e3d 45%, #0d0722 100%) !important;
}
/* 修复：hero 页 overlay 撑满视口，body 不留白底 */
.auth-standalone-page .auth-full-overlay.auth-hero-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: block;
}
body.auth-standalone-page:has(.auth-hero-page) {
  background: #0d0722;
}
/* 修复：hero 页 modal 从顶部排列并撑满高度 */
.auth-hero-page .auth-modal.auth-full {
  justify-content: flex-start !important;
  min-height: 100vh;
  min-height: 100dvh;
}
/* ============================================================
 * 登录页 · 白底黑按钮版本（覆盖紫色星空）
 * ============================================================ */
.auth-standalone-page .auth-full-overlay.auth-hero-page {
  background: #ffffff !important;
  background-image: none !important;
}
body.auth-standalone-page:has(.auth-hero-page) {
  background: #ffffff !important;
}
.auth-hero-page .auth-modal.auth-full {
  background: transparent !important;
}

/* Logo 区 */
.auth-hero-logo {
  box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
}
.auth-hero-name {
  color: #1a1a1a !important;
  text-shadow: none;
}
.auth-hero-sub {
  color: #888 !important;
  background: #f2f3f5 !important;
}
.auth-hero-slogan {
  color: #999 !important;
}

/* QQ 大按钮：黑色圆角矩形 */
.auth-qq-primary-btn {
  background: #1a1a1a !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
}
.auth-qq-primary-btn svg path { fill: #fff; }
.auth-hero-alt {
  color: #666 !important;
}

/* 协议区 */
.auth-check-circle {
  border-color: #ccc !important;
}
.auth-check-circle.on {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}
.auth-agreement-text {
  color: #999 !important;
}
.auth-agreement-link {
  color: #333 !important;
}

/* 表单视图：白底 + 黑色主按钮 */
.auth-hero-form .auth-full-brand {
  color: #1a1a1a !important;
}
.auth-hero-form .auth-full-title {
  color: #666 !important;
}
.auth-hero-back {
  background: #f2f3f5 !important;
  color: #333 !important;
}
.auth-hero-form .auth-field.line-field {
  background: #f5f6f8 !important;
}
.auth-hero-form .auth-field.line-field input {
  color: #1a1a1a !important;
}
.auth-hero-form .auth-field.line-field input::placeholder {
  color: #aaa !important;
}
.auth-hero-form .auth-field.line-field:focus-within {
  background: #eef0f3 !important;
}
.auth-hero-form .auth-field.line-field span {
  color: #ff5c96 !important;
}
.auth-hero-form .auth-captcha-field {
  background: #f5f6f8 !important;
}
.auth-hero-form .auth-full-btn {
  background: #1a1a1a !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}
.auth-hero-form .auth-full-btn .material-icons {
  color: #fff !important;
}
.auth-hero-form .auth-switch {
  color: #999 !important;
}
.auth-hero-form .auth-switch span {
  color: #1a1a1a !important;
}
/* 调整：去掉 ZHOUQUAN 后文字布局 */
.auth-hero-name-row {
  margin-top: 26px !important;
}
.auth-hero-name {
  font-size: 40px !important;
  font-weight: 800 !important;
  letter-spacing: 6px !important;
  line-height: 1.1;
}
.auth-hero-slogan {
  margin-top: 16px !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  color: #999 !important;
}
.auth-hero-logo {
  width: 100px !important;
  height: 100px !important;
  border-radius: 26px !important;
}
/* ============================================================
 * 登录表单 v2：浮动标签 + 动效按钮（拒绝通用布局）
 * ============================================================ */
.form-v2 {
  padding-top: max(16px, env(safe-area-inset-top)) !important;
}
/* 标题区：左对齐大字排版 */
.form-v2-hero {
  margin: 18px 0 32px;
}
.form-v2-eyebrow {
  font-size: 13px;
  color: #999;
  letter-spacing: 3px;
  margin: 0 0 10px;
  font-weight: 500;
}
.form-v2-title {
  font-size: 30px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 8px;
  letter-spacing: 1px;
  line-height: 1.15;
}
.form-v2-sub {
  font-size: 14px;
  color: #999;
  margin: 0;
}

/* 浮动标签输入框 */
.form-v2-fields {
  margin-bottom: 28px;
}
.float-field {
  position: relative;
  margin: 26px 0;
}
.float-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #e0e0e0;
  padding: 10px 0 8px;
  font-size: 16px;
  color: #1a1a1a;
  outline: none;
  transition: border-color .25s ease;
}
.float-field label {
  position: absolute;
  left: 0;
  top: 12px;
  color: #aaa;
  font-size: 16px;
  pointer-events: none;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  transform-origin: left top;
}
/* 聚焦或有内容时标签上浮 */
.float-field input:focus + label,
.float-field input:not(:placeholder-shown) + label {
  top: -10px;
  font-size: 12px;
  color: #1a1a1a;
  letter-spacing: .5px;
}
/* 聚焦下划线从中间展开 */
.float-field::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1.5px;
  background: #1a1a1a;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.float-field:focus-within::after {
  transform: scaleX(1);
}
/* 忘记密码链接 */
.form-v2-forgot {
  position: absolute;
  right: 0;
  top: 12px;
  font-size: 13px;
  color: #999;
  cursor: pointer;
  transition: color .15s;
}
.form-v2-forgot:active { color: #1a1a1a; }

/* 滑块验证码容器 */
.form-v2-captcha {
  background: transparent !important;
  margin-top: 18px !important;
  padding: 0 !important;
}

/* 魔法按钮：光泽扫过 + 按压动效 */
.auth-btn-magic {
  position: relative;
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 27px;
  background: linear-gradient(135deg, #2c2c2e 0%, #1a1a1a 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease;
}
.auth-btn-magic:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.1);
}
.auth-btn-magic:active {
  transform: scale(.96);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
/* 光泽扫过层 */
.btn-magic-shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .7s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.auth-btn-magic:hover .btn-magic-shine {
  left: 160%;
}
/* 按钮文字 */
.btn-magic-text {
  position: relative;
  z-index: 1;
}
/* ============================================================
 * 登录页滑块验证码：黑白配色覆盖
 * ============================================================ */
/* 触发条 */
.form-v2-captcha .sc-trigger {
  border: 1.5px solid #e0e0e0 !important;
  background: #f7f7f8 !important;
  color: #1a1a1a !important;
  border-radius: 12px !important;
  height: 46px !important;
  font-size: 14px !important;
  letter-spacing: .5px;
}
.form-v2-captcha .sc-trigger:active {
  background: #efeff1 !important;
}
/* 成功态 */
.form-v2-captcha .sc-trigger-ok {
  border-color: #1a1a1a !important;
  background: #1a1a1a !important;
  color: #fff !important;
}
/* 弹层轨道 */
body.auth-standalone-page .sc-track {
  background: #f0f0f2 !important;
}
body.auth-standalone-page .sc-track-tip {
  color: #999 !important;
}
body.auth-standalone-page .sc-slider {
  background: linear-gradient(135deg, #2c2c2e, #1a1a1a) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
  color: #fff !important;
}
body.auth-standalone-page .sc-slider-ok {
  background: linear-gradient(135deg, #333, #000) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
body.auth-standalone-page .sc-slider-fail {
  background: linear-gradient(135deg, #555, #222) !important;
}
/* 弹层标题和刷新 */
body.auth-standalone-page .sc-refresh {
  color: #1a1a1a !important;
}
/* 覆盖：滑块触发条内文字被 line-field span 规则染成粉色 */
.form-v2-captcha .sc-trigger,
.form-v2-captcha .sc-trigger span,
.form-v2-captcha .sc-idle-txt {
  color: #1a1a1a !important;
}
/* 高特异性覆盖：滑块触发条文字粉色问题 */
.auth-hero-form .form-v2-captcha.auth-field.line-field .sc-trigger,
.auth-hero-form .form-v2-captcha.auth-field.line-field .sc-trigger span,
.auth-hero-form .form-v2-captcha.auth-field.line-field .sc-idle-txt {
  color: #1a1a1a !important;
}
/* ============================================================
 * 登录页滑块弹层：粉色改蓝色主题
 * ============================================================ */
body.auth-standalone-page .sc-head-title {
  color: #3b82f6 !important;
}
body.auth-standalone-page .sc-head-close {
  color: #999 !important;
}
body.auth-standalone-page .sc-refresh {
  color: #3b82f6 !important;
}
body.auth-standalone-page .sc-hint {
  color: #999 !important;
}
/* 滑块按钮改蓝色渐变 */
body.auth-standalone-page .sc-slider {
  background: linear-gradient(135deg, #6ab4ff, #3b82f6) !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, .4) !important;
}
body.auth-standalone-page .sc-slider .sc-arrow {
  color: #fff !important;
}
/* 触发条也改蓝色文字 */
.form-v2-captcha .sc-trigger,
.form-v2-captcha .sc-trigger span,
.form-v2-captcha .sc-idle-txt {
  color: #3b82f6 !important;
}
.form-v2-captcha .sc-trigger {
  border-color: #bfdcff !important;
  background: #fff !important;
}
/* 高特异性覆盖：滑块弹层内 span 被 line-field 规则染粉，改蓝色 */
.auth-hero-form .form-v2-captcha.auth-field.line-field .sc-root .sc-head-title,
.auth-hero-form .form-v2-captcha.auth-field.line-field .sc-root .sc-refresh,
.auth-hero-form .form-v2-captcha.auth-field.line-field .sc-root .sc-hint,
.auth-hero-form .form-v2-captcha.auth-field.line-field .sc-root .sc-head-close {
  color: #3b82f6 !important;
}
.auth-hero-form .form-v2-captcha.auth-field.line-field .sc-root .sc-head-close {
  color: #999 !important;
}
/* ============================================================
 * 注册页 v2：白色背景 + 复用登录表单样式
 * ============================================================ */
.auth-standalone-page .auth-full-overlay {
  background: #ffffff !important;
  background-image: none !important;
}
.register-v2 .auth-hero-back {
  background: #f2f3f5 !important;
  color: #333 !important;
}
/* 获取验证码按钮 */
.register-v2 .form-v2-forgot {
  color: #3b82f6 !important;
  font-weight: 500;
}
.register-v2 .form-v2-forgot-disabled {
  color: #bbb !important;
  cursor: not-allowed;
}
/* 注册页滑块验证码蓝色主题（复用登录页规则） */
.register-v2 .form-v2-captcha .sc-trigger,
.register-v2 .form-v2-captcha .sc-trigger span,
.register-v2 .form-v2-captcha .sc-idle-txt {
  color: #3b82f6 !important;
  border-color: #bfdcff !important;
  background: #fff !important;
}
.register-v2 .auth-switch {
  color: #999 !important;
  position: static !important;
  margin-top: 24px !important;
}
.register-v2 .auth-switch span {
  color: #1a1a1a !important;
}
/* 修复：注册页魔法按钮高度被压缩为 0 */
.register-v2 .auth-btn-magic {
  height: 54px !important;
  min-height: 54px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* 忘记密码页 v2：复用注册页修复 */
.forgot-v2 .auth-btn-magic {
  height: 54px !important;
  min-height: 54px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.forgot-v2 .form-v2-forgot {
  color: #3b82f6 !important;
  font-weight: 500;
}
.forgot-v2 .form-v2-forgot-disabled {
  color: #bbb !important;
  cursor: not-allowed;
}
.forgot-v2 .auth-switch {
  color: #999 !important;
  position: static !important;
  margin-top: 24px !important;
}
.forgot-v2 .auth-switch span {
  color: #1a1a1a !important;
}
/* ============================================================
 * 滑块验证码触发条：改为下划线风格，和浮动标签输入框统一
 * ============================================================ */
.form-v2-captcha.sc-field,
.auth-hero-form .form-v2-captcha,
.register-v2 .form-v2-captcha,
.forgot-v2 .form-v2-captcha {
  position: relative;
  padding: 20px 0 8px;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  background: transparent !important;
  margin-bottom: 8px;
}
.form-v2-captcha .sc-trigger {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  min-height: auto !important;
  text-align: left !important;
}
.form-v2-captcha .sc-idle-txt {
  color: #999 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.form-v2-captcha .sc-trigger-ok {
  background: transparent !important;
}
.form-v2-captcha .sc-ok-wrap {
  justify-content: flex-start !important;
  color: #11aa66 !important;
  font-size: 15px !important;
}
/* 协议链接改为 a 标签后保持样式 */
.auth-agreement-text a.auth-agreement-link {
  color: #3b82f6;
  text-decoration: none;
  cursor: pointer;
}
.auth-agreement-text a.auth-agreement-link:active {
  opacity: .7;
}
/* ============================================================
 * 返回按钮美化：白色悬浮圆 + 柔和阴影 + 按压动效
 * ============================================================ */
.auth-hero-back {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #333 !important;
  border: 1px solid #eee !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease, background .18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
.auth-hero-back .material-icons {
  font-size: 20px !important;
  line-height: 1 !important;
  transition: transform .18s ease !important;
}
.auth-hero-back:active {
  transform: scale(.92) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
  background: #f5f5f5 !important;
}
.auth-hero-back:active .material-icons {
  transform: translateX(-2px) !important;
}
/* ============================================================
 * 返回按钮 v2：修复注册/忘记密码页位置 + 重新设计样式
 * ============================================================ */
.register-v2,
.forgot-v2 {
  padding-top: max(56px, env(safe-area-inset-top)) !important;
}
.auth-hero-back {
  position: absolute !important;
  top: max(20px, env(safe-area-inset-top)) !important;
  left: 24px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  background: #f5f5f7 !important;
  color: #1a1a1a !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.4,0,.2,1) !important;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 10 !important;
}
.auth-hero-back .material-icons {
  font-size: 22px !important;
  font-weight: 300 !important;
  transition: transform .2s ease !important;
}
.auth-hero-back:hover {
  background: #ececee !important;
}
.auth-hero-back:active {
  transform: scale(.9) !important;
  background: #e0e0e3 !important;
}
.auth-hero-back:active .material-icons {
  transform: translateX(-3px) !important;
}
/* 返回按钮 v3：黑色圆形 + 白色箭头，和主按钮呼应 */
.auth-hero-back {
  background: #1a1a1a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
}
.auth-hero-back:hover {
  background: #2c2c2e !important;
}
.auth-hero-back:active {
  background: #000 !important;
}
/* 返回按钮位置微调：不遮挡标题 */
.auth-hero-back {
  left: 20px !important;
  top: max(16px, env(safe-area-inset-top)) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
}
.form-v2-hero {
  padding-left: 56px !important;
}
/* 返回按钮 v4：白色圆形 + 细灰边框，极简 */
.auth-hero-back {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1.5px solid #e5e5e5 !important;
  box-shadow: none !important;
}
.auth-hero-back:hover {
  background: #fafafa !important;
  border-color: #d5d5d5 !important;
}
.auth-hero-back:active {
  background: #f0f0f0 !important;
  border-color: #ccc !important;
}
/* 返回按钮 v5：纯白圆形 + 柔和阴影，SVG 箭头 */
.auth-hero-back {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04) !important;
}
.auth-hero-back:hover {
  background: #fafafa !important;
  box-shadow: 0 3px 16px rgba(0,0,0,.1) !important;
}
.auth-hero-back:active {
  background: #f0f0f0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.auth-hero-back svg {
  display: block !important;
}
/* 返回按钮 v6：加强阴影，从白色背景浮出 */
.auth-hero-back {
  background: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06) !important;
}
.auth-hero-back:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.08) !important;
}
.auth-hero-back:active {
  box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
}
/* 返回按钮 v7：平贴背景，无阴影 */
.auth-hero-back {
  background: #f5f5f7 !important;
  box-shadow: none !important;
  border: none !important;
}
.auth-hero-back:hover {
  background: #ececee !important;
  box-shadow: none !important;
}
.auth-hero-back:active {
  background: #e8e8eb !important;
  box-shadow: none !important;
}
/* 返回按钮 v8：无容器，纯箭头 */
.auth-hero-back {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 8px !important;
  margin: -8px 0 0 -8px !important;
  color: #1a1a1a !important;
}
.auth-hero-back:hover {
  background: transparent !important;
  color: #000 !important;
}
.auth-hero-back:active {
  background: transparent !important;
}
.auth-hero-back svg {
  width: 20px !important;
  height: 20px !important;
}
/* 注册/忘记密码页返回按钮：覆盖之前的浅灰圆形，统一为纯箭头 */
.register-v2 .auth-hero-back,
.forgot-v2 .auth-hero-back {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 8px !important;
  margin: -8px 0 0 -8px !important;
  color: #1a1a1a !important;
}
.register-v2 .auth-hero-back:hover,
.forgot-v2 .auth-hero-back:hover {
  background: transparent !important;
  color: #000 !important;
}
.register-v2 .auth-hero-back svg,
.forgot-v2 .auth-hero-back svg {
  width: 20px !important;
  height: 20px !important;
}
/* 返回按钮动画：hover 时箭头左滑 + 轻微位移 */
.auth-hero-back svg {
  transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
}
.auth-hero-back:hover svg {
  transform: translateX(-4px) !important;
}
.auth-hero-back:active svg {
  transform: translateX(-6px) scale(.9) !important;
}System.Text.UTF8EncodingSystem.Text.UTF8Encoding
/* 页面切换过渡：淡入 + 轻微滑动 */
.page-fade-enter-active,
.page-fade-leave-active {
  transition: opacity .3s ease, transform .3s ease;
}
.page-fade-enter-from {
  opacity: 0;
  transform: translateY(16px);
}
.page-fade-leave-to {
  opacity: 0;
  transform: translateY(-16px);
}
/* QQ 一键登录按钮：呼吸脉动动画 */
.auth-qq-primary-btn {
  animation: qqBreath 2.5s ease-in-out infinite !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
@keyframes qqBreath {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08); }
  50%      { box-shadow: 0 12px 36px rgba(0,0,0,.28), 0 4px 12px rgba(0,0,0,.12); }
}
.auth-qq-primary-btn:hover {
  transform: scale(1.03) !important;
  animation-play-state: paused !important;
}
.auth-qq-primary-btn:active {
  transform: scale(.97) !important;
}
/* ========== 编辑排版风格登录页 v3 ========== */
.auth-hero-v3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 60px 32px 32px;
  background: #fff;
}
.hero-v3-brand {
  margin-bottom: auto;
}
.hero-v3-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.hero-v3-headline {
  margin: auto 0;
}
.hero-v3-title {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #111;
  margin: 0 0 12px;
  line-height: 1.1;
}
.hero-v3-slogan {
  font-size: 16px;
  color: #999;
  margin: 0;
  letter-spacing: 0.02em;
}
.hero-v3-bottom {
  margin-top: auto;
}
.hero-v3-bottom .auth-qq-primary-btn {
  width: 100%;
  margin-bottom: 16px;
}
.hero-v3-alt {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin: 0;
  cursor: pointer;
  transition: color .2s;
}
.hero-v3-alt:active { color: #111; }
.hero-v3-agreement {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* 表单视图 v3 */
.auth-form-v3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 60px 32px 32px;
  background: #fff;
  position: relative;
}
.form-v3-headline {
  margin: 40px 0 40px;
}
.form-v3-eyebrow {
  font-size: 13px;
  color: #999;
  margin: 0 0 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.form-v3-title {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111;
  margin: 0 0 10px;
  line-height: 1.1;
}
.form-v3-sub {
  font-size: 14px;
  color: #999;
  margin: 0;
}
.form-v3-headline {
  margin: 40px 0 36px;
}
.form-v3-fields {
  flex: 1;
}
/* ============================================================
   我的页 · v2 重构（黑白主调 · 拼贴磁贴 · 磨砂质感）
   ============================================================ */
.my-page {
  padding: 8px 16px 130px;
  overflow-x: hidden;
}
.my-page::before {
  content: "昼";
  position: absolute;
  top: 40px;
  right: -24px;
  font-size: 200px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.025);
  pointer-events: none;
  z-index: 0;
  line-height: 1;
}
.my-page > * { position: relative; z-index: 1; }

/* 顶部：大标题 + 圆形磨砂设置钮 */
.my-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 4px;
}
.my-title {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #111;
  margin: 0;
  line-height: 1.1;
}
.my-gear {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s;
}
.my-gear:active { transform: scale(0.92); }
.my-gear .material-icons { font-size: 20px; color: #333; }

/* 身份区：无边框排版 */
.my-id {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 4px 10px;
  cursor: pointer;
}
.my-avatar {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #f0f1f4;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.my-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.my-avatar > i {
  font-size: 32px;
  color: #c0c4cc;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.my-lv {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.my-id-main { flex: 1; min-width: 0; }
.my-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.my-name {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-name-guest { color: #2d6bff; }
.my-badge {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-sub {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #999;
  min-width: 0;
}
.my-sub-guest { color: #aaa; }
.my-sub-guest .material-icons { font-size: 14px; }
.my-dot { color: #ccc; }

/* 统计：杂志式主+副排版 */
.my-stats {
  display: flex;
  align-items: stretch;
  padding: 16px 4px 4px;
}
.my-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.my-stat b {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.my-stat span {
  font-size: 11px;
  color: #999;
  font-weight: 500;
}
.my-stat.is-main { flex: 1.5; }
.my-stat.is-main b {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.my-stat.is-main span { font-size: 12px; }

/* 经验条：磨砂胶囊 */
.my-xp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.my-xp-lv {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.my-xp-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.my-xp-fill {
  height: 100%;
  border-radius: 999px;
  background: #111;
  transition: width 0.4s;
}
.my-xp-num {
  font-size: 11px;
  color: #999;
  font-variant-numeric: tabular-nums;
}

/* 磁贴墙：拼贴式布局 */
.my-tiles {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.my-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: none;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
  min-width: 0;
}
.my-tile:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.my-tile-ic {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--mc) 14%, #fff);
  color: var(--mc);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.my-tile-ic .material-icons { font-size: 20px; }
.my-tile-label {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #111;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-tile-out {
  font-size: 18px;
  color: #c0c4cc;
  flex-shrink: 0;
}
.my-tile-wide { grid-column: 1 / -1; }
.my-tile-pts {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: #ffc94d;
  font-weight: 800;
  flex-shrink: 0;
}
.my-tile-pts b {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.my-tile-pts .material-icons { font-size: 16px; }

/* 黑色特色磁贴：积分商店 */
.my-tile-dark {
  background: #111;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.my-tile-dark .my-tile-label { color: #fff; }
.my-tile-dark .my-tile-out { color: #555; }
.my-tile-dark .my-tile-ic {
  background: rgba(255, 201, 77, 0.18);
  color: #ffc94d;
}

/* 暗色模式适配 */
[data-dark="1"] .my-page { background: #0f0f11 !important; }
[data-dark="1"] .my-page::before { color: rgba(255, 255, 255, 0.03); }
[data-dark="1"] .my-title { color: #f2f2f4; }
[data-dark="1"] .my-gear {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-dark="1"] .my-gear .material-icons { color: #eee; }
[data-dark="1"] .my-name { color: #f2f2f4; }
[data-dark="1"] .my-name-guest { color: #7aa2ff; }
[data-dark="1"] .my-badge { background: #eee; color: #111; }
[data-dark="1"] .my-sub,
[data-dark="1"] .my-sub-guest { color: #888; }
[data-dark="1"] .my-stat b { color: #f2f2f4; }
[data-dark="1"] .my-stat span { color: #888; }
[data-dark="1"] .my-xp {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-dark="1"] .my-xp-track { background: rgba(255, 255, 255, 0.1); }
[data-dark="1"] .my-xp-fill { background: #eee; }
[data-dark="1"] .my-xp-num { color: #888; }
[data-dark="1"] .my-tile {
  background: #1c1c1f;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-dark="1"] .my-tile-label { color: #f2f2f4; }
[data-dark="1"] .my-tile-dark { background: #2a2a2e; }
[data-dark="1"] .my-tile-dark .my-tile-label { color: #fff; }
[data-dark="1"] .my-avatar {
  background: #2a2a2e;
  border-color: #1c1c1f;
}
[data-dark="1"] .my-avatar > i { color: #666; }

/* ============================================================
   我的页 · 编辑排版风（拒绝通用模板）
   - 顶部小导航（左"我的" 右齿轮）
   - 小头像 + 超大昵称
   - 突出获赞大数字 + 小数据行
   - 黑色细经验条
   - 黑色大胶囊按钮
   - 编号目录式功能入口（01/02/03）
   ============================================================ */

.view-mine.mine-editor-page {
  background: #ffffff !important;
  padding-bottom: 40px !important;
}

/* 顶部小导航 */
.mine-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 8px;
}
.mine-topbar-label {
  font-size: 14px;
  font-weight: 600;
  color: #999;
  letter-spacing: 0.05em;
}
.mine-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  cursor: pointer;
  transition: background 0.15s;
}
.mine-icon-btn:active { background: rgba(0,0,0,0.05); }
.mine-icon-btn .material-icons { font-size: 22px; }

/* Hero */
.mine-editor {
  padding: 12px 28px 24px;
}
.mine-avatar-mini {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f0f1f5, #e6e8ee);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.mine-avatar-mini:active { transform: scale(0.95); }
.mine-avatar-mini.admin-ring {
  box-shadow: 0 0 0 2px #ff7eb3, 0 4px 16px rgba(255,126,179,0.3);
}
.mine-avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
.mine-avatar-mini i { font-size: 28px; color: #b8bcc8; }

.mine-name {
  margin: 18px 0 8px;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #111;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.mine-name.mine-login-hint {
  cursor: pointer;
}
.mine-name.mine-login-hint:active { opacity: 0.6; }
.mine-lv-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}
.mine-sub {
  font-size: 14px;
  color: #999;
  margin: 0;
}

/* 统计：突出获赞大数字 + 小数据行 */
.mine-stats {
  margin-top: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f2;
}
.mine-stat-hero {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.mine-stat-hero b {
  font-size: 56px;
  font-weight: 900;
  color: #111;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.mine-stat-hero span {
  font-size: 13px;
  color: #999;
  font-weight: 500;
}
.mine-stat-line {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #999;
}
.mine-stat-line b {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  font-variant-numeric: tabular-nums;
}
.mine-stat-dot {
  font-style: normal;
  color: #d0d0d4;
}

/* 经验条 */
.mine-xp-line {
  margin-top: 20px;
}
.mine-xp-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}
.mine-xp-num { font-variant-numeric: tabular-nums; }
.mine-xp-track {
  height: 3px;
  border-radius: 999px;
  background: #f0f0f2;
  overflow: hidden;
}
.mine-xp-fill {
  height: 100%;
  border-radius: 999px;
  background: #111;
  transition: width 0.4s ease;
}

/* 主按钮：黑色大胶囊 */
.mine-primary-btn {
  margin-top: 28px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 24px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mine-primary-btn:active {
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.mine-primary-btn .material-icons { font-size: 18px; }

/* 编号目录式功能入口 */
.mine-index {
  margin-top: 36px;
}
.mine-index-row {
  display: flex;
  align-items: center;
  padding: 16px 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mine-index-row:active { opacity: 0.5; }
.mine-index-row + .mine-index-row {
  border-top: 1px solid #f5f5f7;
}
.mine-index-no {
  font-size: 12px;
  font-weight: 700;
  color: #c0c4cc;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  width: 28px;
  flex-shrink: 0;
}
.mine-index-label {
  flex: 1;
  font-size: 15px;
  color: #111;
  font-weight: 500;
}
.mine-index-val {
  font-size: 12px;
  color: #999;
  margin-right: 8px;
}
.mine-index-arrow {
  font-size: 14px;
  color: #c0c4cc;
}

/* 暗色模式 */
[data-dark="1"].mine-editor-page,
[data-dark="1"] .view-mine.mine-editor-page {
  background: #1a1a1f !important;
}
[data-dark="1"] .mine-topbar-label { color: #888; }
[data-dark="1"] .mine-icon-btn { color: #f2f2f4; }
[data-dark="1"] .mine-name { color: #f2f2f4; }
[data-dark="1"] .mine-stat-hero b { color: #f2f2f4; }
[data-dark="1"] .mine-stat-line b { color: #f2f2f4; }
[data-dark="1"] .mine-index-label { color: #f2f2f4; }
[data-dark="1"] .mine-stats { border-bottom-color: rgba(255,255,255,0.08); }
[data-dark="1"] .mine-index-row + .mine-index-row {
  border-top-color: rgba(255,255,255,0.06);
}
[data-dark="1"] .mine-xp-track { background: rgba(255,255,255,0.1); }
[data-dark="1"] .mine-xp-fill { background: #f2f2f4; }
[data-dark="1"] .mine-primary-btn { background: #f2f2f4; color: #111; }
[data-dark="1"] .mine-primary-btn .material-icons { color: #111; }

/* ============================================================
   消息页重构 (v2) — 保留功能，重做视觉层次
   ============================================================ */

/* ---- 顶部标题栏 ---- */
.msg-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 6px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
}
.msg-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.msg-more { position: relative; }
.msg-more-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-2);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-micro), transform var(--dur-micro) var(--ease-micro);
}
.msg-more-btn:active {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  transform: scale(0.92);
}
.msg-more-btn .material-icons { font-size: 22px; }

/* ---- 四个圆形入口 ---- */
.msg-entries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 18px 16px 8px;
}
.msg-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.msg-entry-ico {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform var(--dur-micro) var(--ease-micro);
}
.msg-entry-ico .material-icons { font-size: 28px; }
.msg-entry:active .msg-entry-ico { transform: scale(0.9); }
.msg-entry.active .msg-entry-ico {
  outline: 2.5px solid color-mix(in srgb, var(--primary) 40%, transparent);
  outline-offset: 3px;
}
.ico-like {
  background: linear-gradient(145deg, #ff7a95, #ff9eb5);
  box-shadow: 0 8px 20px rgba(255, 122, 149, 0.32);
}
.ico-comment {
  background: linear-gradient(145deg, #5aa8ff, #7cc0ff);
  box-shadow: 0 8px 20px rgba(90, 168, 255, 0.32);
}
.ico-follow {
  background: linear-gradient(145deg, #b07aff, #c9a1ff);
  box-shadow: 0 8px 20px rgba(176, 122, 255, 0.32);
}
.ico-notice {
  background: linear-gradient(145deg, #ffb04d, #ffd56b);
  box-shadow: 0 8px 20px rgba(255, 176, 77, 0.32);
}
.msg-entry-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.msg-entry.active .msg-entry-label { color: var(--text); }
.msg-entry-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 34px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff4d6d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(255, 77, 109, 0.45);
  z-index: 2;
}

/* ---- 会话分区标题 ---- */
.msg-section-label {
  padding: 18px 20px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.3px;
}

/* ---- 列表行（统一用于会话/赞/评论） ---- */
.msg-list {
  padding: 0 12px;
}
.msg-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  cursor: pointer;
  position: relative;
  border-radius: 16px;
  transition: background var(--dur-micro) var(--ease-micro);
}
.msg-row:active {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.msg-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.msg-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.msg-avatar-fallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-2);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg-row-body {
  flex: 1;
  min-width: 0;
}
.msg-row-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  line-height: 1.4;
}
.msg-row-name {
  font-weight: 700;
  color: var(--text);
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.msg-row-action {
  color: var(--text-2);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-row-time {
  font-size: 11px;
  color: var(--text-2);
  opacity: 0.7;
  margin-left: auto;
  flex-shrink: 0;
}
.msg-row-snippet {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-row-count {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ff4d6d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(255, 77, 109, 0.35);
}
.msg-row-side-ico {
  flex-shrink: 0;
  font-size: 20px;
}
.msg-row-side-ico.like { color: #ff5a76; }
.msg-row-side-ico.comment { color: var(--primary); }

/* ---- 空状态 ---- */
.msg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px 20px;
  color: var(--text-2);
  text-align: center;
}
.msg-empty i {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.25;
}
.msg-empty p { font-size: 14px; margin: 0; }

/* ---- 面板头（分类标题居中） ---- */
.msg-panel-head.center {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 0 10px;
}
.msg-panel-title-inline {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

/* ---- view-messages 基础 ---- */
.view-messages {
  padding-bottom: 110px;
  min-height: 100vh;
  min-height: 100dvh;
}
/* ---- 覆盖旧 .unified 双类选择器的 padding ---- */
.msg-list.unified,
.msg-list.conv-list {
  padding: 4px 12px;
}

/* ---- 粉丝列表微调（与新行风格统一） ---- */
.follower-list {
  padding: 4px 12px;
}
.follower-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  border-radius: 16px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-micro);
}
.follower-item:active {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.follower-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.follower-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.follower-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.follower-time {
  font-size: 13px;
  color: var(--text-2);
}
.follower-follow-back {
  flex-shrink: 0;
  padding: 7px 18px;
  border: none;
  border-radius: 20px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-micro);
}
.follower-follow-back:active {
  transform: scale(0.94);
}
/* ============================================================
   消息页布局 v3 — 磨砂卡片流（替代行式列表）
   ============================================================ */

/* ---- 顶部栏微调 ---- */
.msg-topbar {
  padding: 22px 22px 4px;
}
.msg-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1px;
}

/* ---- 四个圆入口包在磨砂容器里 ---- */
.msg-entries {
  margin: 14px 16px 4px;
  padding: 18px 8px 14px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  gap: 2px;
}
.msg-entry-ico {
  width: 58px;
  height: 58px;
}
.msg-entry-ico .material-icons { font-size: 26px; }
.msg-entry-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ---- 会话分区标题 ---- */
.msg-section-label {
  padding: 20px 22px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  opacity: 0.55;
}

/* ---- 列表改成卡片流 ---- */
.msg-list,
.msg-list.unified,
.msg-list.conv-list,
.follower-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}
.msg-row,
.follower-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform 0.18s var(--ease-micro), box-shadow 0.18s var(--ease-micro);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.msg-row:active,
.follower-item:active {
  transform: scale(0.97);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  background: var(--card);
}
.msg-row.unread {
  border-left: 3px solid #ff4d6d;
}

/* ---- 头像在卡片里稍微放大 ---- */
.msg-avatar,
.msg-avatar-fallback,
.follower-avatar {
  width: 46px;
  height: 46px;
}

/* ---- 卡片内文字排版 ---- */
.msg-row-name {
  font-size: 15px;
  font-weight: 700;
}
.msg-row-snippet {
  font-size: 13px;
  margin-top: 4px;
  opacity: 0.7;
}
.msg-row-time {
  font-size: 11px;
  opacity: 0.5;
}

/* ---- 未读徽章浮在卡片右上 ---- */
.msg-row-count {
  position: absolute;
  top: 10px;
  right: 12px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  font-size: 11px;
}
.msg-row { position: relative; }

/* ---- 空状态在卡片流里更克制 ---- */
.msg-empty {
  padding: 60px 20px;
}

/* ---- 面板头（分类标题）在卡片模式下 ---- */
.msg-panel-head.center {
  padding: 18px 0 6px;
}
.msg-panel-title-inline {
  font-size: 16px;
  font-weight: 700;
  opacity: 0.8;
}

/* ---- 回关按钮在卡片里 ---- */
.follower-follow-back {
  background: var(--text);
  color: var(--bg);
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 12px;
}

/* ---- 公告卡片在卡片流里更融合 ---- */
.notice-card {
  margin: 4px 0 16px;
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
/* ---- 修正：未读徽章正常流排列，不绝对定位 ---- */
.msg-row-count {
  position: static;
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ff4d6d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(255, 77, 109, 0.35);
}
.msg-row { position: relative; }

/* 有未读时 body 右边留点间距，避免和徽章贴太近 */
.msg-row.unread .msg-row-body {
  padding-right: 4px;
}
/* ============================================================
   消息页 v4 — 极简黑白，去掉所有多余容器
   ============================================================ */

/* 标题栏：透明背景，不要灰色横条 */
.msg-topbar {
  padding: 20px 22px 8px;
  background: transparent;
}
.msg-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.msg-more-btn {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--text-2);
}
.msg-more-btn:active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* 四个圆入口：去掉卡片包裹，直接放在页面上 */
.msg-entries {
  margin: 16px 0 0;
  padding: 8px 16px 4px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
  gap: 0;
}
.msg-entry-ico {
  width: 56px;
  height: 56px;
}
.ico-like { box-shadow: 0 4px 14px rgba(255, 122, 149, 0.25); }
.ico-comment { box-shadow: 0 4px 14px rgba(90, 168, 255, 0.25); }
.ico-follow { box-shadow: 0 4px 14px rgba(176, 122, 255, 0.25); }
.ico-notice { box-shadow: 0 4px 14px rgba(255, 176, 77, 0.25); }

/* 分区标题：更轻 */
.msg-section-label {
  padding: 22px 22px 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.5;
}

/* 会话行：去掉卡片白背景和阴影，回到极简行式 */
.msg-list,
.msg-list.unified,
.msg-list.conv-list,
.follower-list {
  display: block;
  padding: 0 16px;
}
.msg-row,
.follower-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 8px;
  background: transparent;
  border-radius: 12px;
  box-shadow: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s var(--ease-micro);
}
.msg-row:active,
.follower-item:active {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  transform: none;
  box-shadow: none;
}
.msg-row.unread {
  border-left: none;
}
.msg-row.unread .msg-row-name::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d6d;
  margin-left: 6px;
  vertical-align: middle;
}

/* 头像 */
.msg-avatar,
.msg-avatar-fallback,
.follower-avatar {
  width: 44px;
  height: 44px;
}

/* 文字 */
.msg-row-name { font-size: 15px; font-weight: 700; }
.msg-row-snippet { font-size: 13px; opacity: 0.65; margin-top: 2px; }
.msg-row-time { font-size: 11px; opacity: 0.4; }

/* 未读徽章：小而精致 */
.msg-row-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  box-shadow: none;
}

/* 公告卡片：保持但减淡 */
.notice-card {
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* 回关按钮 */
.follower-follow-back {
  border-radius: 14px;
  padding: 6px 14px;
  font-size: 12px;
}
/* ============================================================
   消息页 v5 — 对话胶囊卡（拒绝列表模板）
   ============================================================ */

/* 标题栏 */
.msg-topbar {
  padding: 24px 20px 4px;
  background: transparent;
}
.msg-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.msg-more-btn {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  backdrop-filter: none;
}

/* 四个圆入口：包在极淡的渐变容器里 */
.msg-entries {
  margin: 18px 16px 0;
  padding: 20px 10px 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 8%, transparent),
    color-mix(in srgb, #b07aff 5%, transparent));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 28px;
  box-shadow: none;
  gap: 0;
}
.msg-entry-ico {
  width: 56px;
  height: 56px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.msg-entry-ico .material-icons { font-size: 26px; }
.msg-entry-label {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}

/* 分区标题：去掉，让会话直接流式排列 */
.msg-section-label {
  padding: 24px 22px 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.4;
}

/* 会话列表：垂直排列的胶囊卡 */
.msg-list,
.msg-list.unified,
.msg-list.conv-list,
.follower-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}
.msg-row,
.follower-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border-radius: 26px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  cursor: pointer;
  transition: transform 0.15s var(--ease-micro), box-shadow 0.15s var(--ease-micro);
}
.msg-row:active,
.follower-item:active {
  transform: scale(0.98);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* 头像放大，带细环 */
.msg-avatar,
.msg-avatar-fallback,
.follower-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* 文字块 */
.msg-row-body {
  flex: 1;
  min-width: 0;
}
.msg-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.msg-row-name {
  font-size: 16px;
  font-weight: 700;
}
.msg-row-action {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text-2);
}
.msg-row-time {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.45;
}
.msg-row-snippet {
  font-size: 13px;
  margin-top: 4px;
  opacity: 0.6;
}

/* 未读数字在胶囊右下角 */
.msg-row-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  font-size: 11px;
  background: #ff4d6d;
  box-shadow: 0 2px 8px rgba(255, 77, 109, 0.4);
}

/* 未读胶囊左边加一条色条 */
.msg-row.unread {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 6%, var(--card)),
    var(--card));
}

/* 空状态 */
.msg-empty {
  padding: 60px 20px;
}

/* 面板头 */
.msg-panel-head.center {
  padding: 20px 0 10px;
}

/* 回关按钮做成胶囊 */
.follower-follow-back {
  border-radius: 18px;
  padding: 8px 18px;
  font-size: 12px;
  background: var(--text);
  color: var(--bg);
}

/* 公告卡片同步胶囊风 */
.notice-card {
  border-radius: 26px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
/* ============================================================
   消息页 v6 — 名片式阅读流（头像移到右上角，文字占满）
   ============================================================ */

/* 标题 */
.msg-topbar {
  padding: 26px 20px 6px;
}
.msg-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.8px;
}
.msg-more-btn {
  background: transparent;
}

/* 四个圆入口：去掉容器，直接放页面上 */
.msg-entries {
  margin: 20px 0 0;
  padding: 8px 20px 4px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
}
.msg-entry-ico {
  width: 54px;
  height: 54px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.msg-entry-label {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
}

/* 分区标题 */
.msg-section-label {
  padding: 28px 20px 12px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.4;
}

/* 会话列表：名片式 */
.msg-list,
.msg-list.unified,
.msg-list.conv-list,
.follower-list {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}
.msg-row,
.follower-item {
  position: relative;
  display: block;
  padding: 18px 68px 18px 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s var(--ease-micro);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.msg-row:last-child,
.follower-item:last-child {
  border-bottom: none;
}
.msg-row:active,
.follower-item:active {
  background: color-mix(in srgb, var(--text) 3%, transparent);
  transform: none;
}

/* 头像移到右上角 */
.msg-avatar-wrap {
  position: absolute;
  top: 16px;
  right: 8px;
  width: 48px;
  height: 48px;
}
.msg-avatar,
.msg-avatar-fallback,
.follower-avatar {
  width: 48px;
  height: 48px;
  box-shadow: none;
}

/* 文字块占满左侧 */
.msg-row-body {
  min-width: 0;
}
.msg-row-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.msg-row-name {
  font-size: 16px;
  font-weight: 700;
}
.msg-row-action {
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.msg-row-time {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.4;
}
.msg-row-snippet {
  font-size: 13.5px;
  margin-top: 6px;
  opacity: 0.6;
  line-height: 1.5;
}

/* 未读徽章在名字旁边 */
.msg-row-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: #ff4d6d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  box-shadow: none;
  position: relative;
  top: -2px;
}

/* 未读名字加粗加重 */
.msg-row.unread .msg-row-name {
  font-weight: 800;
}

/* 空状态 */
.msg-empty {
  padding: 60px 20px;
}

/* 粉丝列表适配名片式 */
.follower-list .follower-item {
  padding-right: 68px;
}
.follower-info {
  display: block;
}
.follower-name {
  font-size: 16px;
  font-weight: 700;
}
.follower-time {
  font-size: 13px;
  margin-top: 4px;
  opacity: 0.6;
  display: block;
}
.follower-follow-back {
  position: absolute;
  right: 8px;
  bottom: 16px;
  border-radius: 14px;
  padding: 6px 14px;
  font-size: 12px;
}

/* 公告卡片 */
.notice-card {
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
/* ============================================================
   消息页 v7 — 时间线风格（左侧竖线 + 头像挂在线上）
   ============================================================ */

/* 标题 */
.msg-topbar {
  padding: 26px 20px 4px;
}
.msg-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.8px;
}
.msg-more-btn { background: transparent; }

/* 四个圆入口：保持简洁横排 */
.msg-entries {
  margin: 18px 0 0;
  padding: 8px 20px 4px;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
}
.msg-entry-ico {
  width: 52px;
  height: 52px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.msg-entry-label {
  font-size: 11.5px;
  font-weight: 600;
  opacity: 0.65;
}

/* 分区标题 */
.msg-section-label {
  padding: 28px 24px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.35;
}

/* 会话列表：时间线容器 */
.msg-list,
.msg-list.unified,
.msg-list.conv-list {
  position: relative;
  padding: 4px 16px 4px 28px;
  display: block;
}
/* 左侧竖线 */
.msg-list::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--primary) 50%, transparent),
    color-mix(in srgb, var(--primary) 15%, transparent));
  border-radius: 1px;
}

/* 会话项 */
.msg-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 8px 14px 12px;
  background: transparent;
  border: none;
  border-radius: 16px;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s var(--ease-micro);
  border-bottom: none;
}
.msg-row:active {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

/* 头像挂在竖线上 */
.msg-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  z-index: 2;
  background: var(--bg);
  border-radius: 50%;
  padding: 2px;
}
.msg-avatar,
.msg-avatar-fallback {
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* 文字 */
.msg-row-body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.msg-row-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.msg-row-name {
  font-size: 15px;
  font-weight: 700;
}
.msg-row-action {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.msg-row-time {
  margin-left: auto;
  font-size: 10.5px;
  opacity: 0.4;
}
.msg-row-snippet {
  font-size: 13px;
  margin-top: 4px;
  opacity: 0.6;
  line-height: 1.45;
}

/* 未读徽章 */
.msg-row-count {
  position: absolute;
  top: 12px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff4d6d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(255, 77, 109, 0.4);
}

/* 空状态 */
.msg-empty {
  padding: 50px 20px;
}

/* 粉丝列表不用时间线，保持普通 */
.follower-list {
  padding: 0 16px;
}
.follower-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.follower-item:last-child { border-bottom: none; }
.follower-avatar {
  width: 44px;
  height: 44px;
  box-shadow: none;
}
.follower-info { display: block; }
.follower-name { font-size: 15px; font-weight: 700; }
.follower-time { font-size: 12px; opacity: 0.55; margin-top: 2px; display: block; }
.follower-follow-back {
  position: static;
  border-radius: 14px;
  padding: 6px 14px;
  font-size: 12px;
}

/* 公告卡片 */
.notice-card {
  border-radius: 20px;
  margin: 0 16px 16px;
}
/* ============================================================
   消息页 v8 — 2列网格联系人式（彻底放弃列表）
   ============================================================ */

/* 标题 */
.msg-topbar {
  padding: 24px 20px 4px;
}
.msg-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.msg-more-btn { background: transparent; }

/* 四个圆入口：缩小成小图标条 */
.msg-entries {
  margin: 16px 0 0;
  padding: 12px 20px 8px;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
  gap: 0;
}
.msg-entry-ico {
  width: 44px;
  height: 44px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
.msg-entry-ico .material-icons { font-size: 20px; }
.msg-entry-label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.6;
  margin-top: 2px;
}

/* 分区标题 */
.msg-section-label {
  padding: 20px 20px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.35;
}

/* 会话列表：2列网格 */
.msg-list,
.msg-list.conv-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px;
}
.msg-list.unified {
  display: flex;
  flex-direction: column;
}

/* 会话卡片：纵向排列，居中 */
.msg-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px 12px 16px;
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  cursor: pointer;
  transition: transform 0.15s var(--ease-micro), box-shadow 0.15s var(--ease-micro);
}
.msg-row:active {
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* 头像在顶部 */
.msg-avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0;
}
.msg-avatar,
.msg-avatar-fallback {
  width: 56px;
  height: 56px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

/* 文字块：居中 */
.msg-row-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
}
.msg-row-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}
.msg-row-name {
  font-size: 14px;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-row-action {
  display: none;
}
.msg-row-time {
  font-size: 10px;
  opacity: 0.4;
  margin: 0;
}
.msg-row-snippet {
  font-size: 11.5px;
  opacity: 0.55;
  margin-top: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 未读徽章：头像右上角 */
.msg-row-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #ff4d6d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(255, 77, 109, 0.4);
  z-index: 2;
}

/* 赞/评论列表（unified）不用网格，保持纵向 */
.msg-list.unified .msg-row {
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 12px;
  border-radius: 16px;
  gap: 12px;
}
.msg-list.unified .msg-avatar-wrap {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.msg-list.unified .msg-avatar,
.msg-list.unified .msg-avatar-fallback {
  width: 44px;
  height: 44px;
}
.msg-list.unified .msg-row-body {
  align-items: flex-start;
  width: auto;
  flex: 1;
}
.msg-list.unified .msg-row-top {
  justify-content: flex-start;
}
.msg-list.unified .msg-row-action {
  display: inline;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.msg-list.unified .msg-row-time {
  margin-left: auto;
}
.msg-list.unified .msg-row-snippet {
  -webkit-line-clamp: 1;
}

/* 空状态 */
.msg-empty {
  padding: 50px 20px;
}

/* 粉丝列表 */
.follower-list {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}
.follower-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
.follower-avatar { width: 44px; height: 44px; }
.follower-info { flex: 1; }
.follower-name { font-size: 14px; font-weight: 700; }
.follower-time { font-size: 12px; opacity: 0.55; margin-top: 2px; }
.follower-follow-back {
  border-radius: 14px;
  padding: 6px 14px;
  font-size: 12px;
}

/* 公告 */
.notice-card {
  border-radius: 20px;
  margin: 0 16px 16px;
}
/* ============================================================================
   昼光信笺 · 消息页重设计（通知页面 + 私信布局）
   概念：黑白为主 / 磨砂玻璃 / 光线动效（日轮通道、日冕分类、光束时间线、星轨气泡）
   ============================================================================ */

/* ---------- 页面基调：黑白磨砂（覆盖各主题） ---------- */
.view-messages {
  position: relative;
  background: #f2f3f6 !important;
  padding-bottom: 100px;
  --zl-bg: #f2f3f6;
  --zl-ink: #17181e;
  --zl-ink2: #666873;
  --zl-ink3: #9b9da8;
  --zl-line: rgba(18, 19, 26, 0.08);
  --zl-glass: rgba(255, 255, 255, 0.6);
  --zl-glass-strong: rgba(255, 255, 255, 0.82);
  --zl-solid: #ffffff;
  --zl-soft: #e9ebef;
  --zl-soft2: #dfe1e7;
  --zl-shadow: 0 10px 30px rgba(28, 30, 40, 0.1), 0 2px 8px rgba(28, 30, 40, 0.05);
  --zl-ring: #17181e;
}
[data-dark="1"] .view-messages {
  background: #121318 !important;
  --zl-bg: #121318;
  --zl-ink: #eceef4;
  --zl-ink2: #9a9caa;
  --zl-ink3: #5f6170;
  --zl-line: rgba(255, 255, 255, 0.09);
  --zl-glass: rgba(30, 31, 40, 0.6);
  --zl-glass-strong: rgba(38, 39, 50, 0.86);
  --zl-solid: #23242e;
  --zl-soft: #1b1c24;
  --zl-soft2: #272834;
  --zl-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --zl-ring: #eceef4;
}
.view-messages button {
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

/* ---------- 背景光斑（磨砂玻璃的模糊对象） ---------- */
.zl-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(46px);
  pointer-events: none;
  opacity: 0.6;
  will-change: transform;
}
.zl-glow-a {
  width: 260px; height: 260px; top: -70px; right: -60px;
  background: radial-gradient(circle, rgba(214, 217, 227, 0.9), rgba(214, 217, 227, 0) 70%);
  animation: zlDriftA 22s ease-in-out infinite alternate;
}
.zl-glow-b {
  width: 300px; height: 300px; top: 130px; left: -120px;
  background: radial-gradient(circle, rgba(199, 203, 216, 0.8), rgba(199, 203, 216, 0) 70%);
  animation: zlDriftB 26s ease-in-out infinite alternate;
}
.zl-glow-c {
  width: 200px; height: 200px; bottom: 70px; right: -70px;
  background: radial-gradient(circle, rgba(226, 228, 236, 0.85), rgba(226, 228, 236, 0) 70%);
  animation: zlDriftA 30s ease-in-out infinite alternate-reverse;
}
[data-dark="1"] .zl-glow-a { background: radial-gradient(circle, rgba(72, 78, 104, 0.5), rgba(72, 78, 104, 0) 70%); }
[data-dark="1"] .zl-glow-b { background: radial-gradient(circle, rgba(58, 64, 90, 0.45), rgba(58, 64, 90, 0) 70%); }
[data-dark="1"] .zl-glow-c { background: radial-gradient(circle, rgba(80, 86, 114, 0.4), rgba(80, 86, 114, 0) 70%); }
@keyframes zlDriftA {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-18px, 22px) scale(1.08); }
}
@keyframes zlDriftB {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(20px, -16px) scale(1.06); }
}

/* ---------- 顶部：光晕头栏 ---------- */
.zl-top {
  position: relative;
  z-index: 2;
  padding: 2px 2px 12px;
}
.zl-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 12px;
}
.zl-title-text {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--zl-ink);
  margin: 0;
}
.zl-title-sub {
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--zl-ink3);
  margin: 3px 0 0;
}
.zl-more { position: relative; }
.zl-more-btn {
  width: 40px; height: 40px;
  border: none; border-radius: 14px;
  background: var(--zl-glass);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: var(--zl-ink2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(28, 30, 40, 0.05);
  transition: transform 0.18s var(--ease-micro);
}
.zl-more-btn:active { transform: scale(0.9); }
.zl-more-btn .material-icons { font-size: 22px; }
.zl-menu-backdrop { position: fixed; inset: 0; z-index: 19; background: transparent; }
.zl-menu {
  position: absolute; top: 48px; right: 0; z-index: 20;
  min-width: 180px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--zl-glass-strong);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid var(--zl-line);
  border-radius: 18px;
  box-shadow: var(--zl-shadow);
}
.zl-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border: none; border-radius: 12px;
  background: transparent; color: var(--zl-ink);
  font-size: 14px; font-weight: 600; cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.zl-menu-item:active { background: var(--zl-soft); }
.zl-menu-item .material-icons { font-size: 19px; color: var(--zl-ink2); }
.zl-menu-item.danger { color: #e2556f; }
.zl-menu-item.danger .material-icons { color: #e2556f; }
.zl-menu-badge {
  margin-left: auto;
  font-size: 10px; font-weight: 700; color: var(--zl-bg);
  background: var(--zl-ring); border-radius: 8px; padding: 2px 7px;
}
.zl-menu-enter-active, .zl-menu-leave-active {
  transition: opacity 0.24s var(--ease-main), transform 0.24s var(--ease-main);
  transform-origin: top right;
}
.zl-menu-enter-from, .zl-menu-leave-to { opacity: 0; transform: scale(0.92) translateY(-4px); }

/* ---------- 双通道切换：日轮滑块 ---------- */
.zl-channel { padding: 0 0 4px; }
.zl-channel-track {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: 18px;
  background: var(--zl-soft);
  border: 1px solid var(--zl-line);
  box-shadow: inset 0 1px 3px rgba(18, 19, 26, 0.05);
}
.zl-channel-thumb {
  position: absolute; top: 4px; left: 4px;
  width: calc(50% - 4px); height: calc(100% - 8px);
  border-radius: 14px;
  background: var(--zl-solid);
  box-shadow: var(--zl-shadow);
  transition: transform 0.5s var(--ease-main);
}
.zl-channel-track.notice .zl-channel-thumb { transform: translateX(100%); }
.zl-channel-item {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; border: none; background: transparent; border-radius: 14px;
  color: var(--zl-ink2); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: color 0.3s;
}
.zl-channel-item .material-icons { font-size: 18px; }
.zl-channel-item.on { color: var(--zl-ink); font-weight: 700; }
.zl-channel-item:active { transform: scale(0.97); }
.zl-channel-badge {
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 9px;
  background: var(--zl-ring); color: var(--zl-bg);
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.zl-channel-badge.dot { width: 7px; min-width: 7px; height: 7px; padding: 0; border-radius: 50%; }

/* ---------- 通道切换过渡 ---------- */
.zl-switch-enter-active, .zl-switch-leave-active {
  transition: opacity 0.32s var(--ease-main), transform 0.32s var(--ease-main);
}
.zl-switch-enter-from { opacity: 0; transform: translateY(10px); }
.zl-switch-leave-to { opacity: 0; transform: translateY(-8px); }

/* ---------- 通用：空状态光环 ---------- */
.zl-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 84px 20px 40px;
  color: var(--zl-ink2); text-align: center;
}
.zl-empty-halo {
  position: relative;
  width: 84px; height: 84px; border-radius: 50%;
  border: 1.5px solid var(--zl-line);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: var(--zl-ink3);
}
.zl-empty-halo::before {
  content: '';
  position: absolute; inset: -10px; border-radius: 50%;
  border: 1px dashed var(--zl-line);
  animation: zlSpin 18s linear infinite;
}
.zl-empty-halo i { font-size: 34px; }
.zl-empty p { font-size: 13px; margin: 0; letter-spacing: 0.5px; }
@keyframes zlSpin { to { transform: rotate(360deg); } }

/* ---------- 私信通道：晨光会话卡 ---------- */
.zl-dm, .zl-notice { position: relative; z-index: 1; }
.zl-conv-list { display: flex; flex-direction: column; gap: 10px; }
.zl-conv {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--zl-line); border-radius: 20px;
  background: var(--zl-glass);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 4px 16px rgba(28, 30, 40, 0.05);
  cursor: pointer; text-align: left;
  overflow: hidden;
  animation: zlItemIn 0.5s var(--ease-main) both;
  animation-delay: calc(var(--i) * 45ms);
  transition: transform 0.18s var(--ease-micro);
}
.zl-conv:active { transform: scale(0.975); }
.zl-conv::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-100%);
  pointer-events: none;
}
.zl-conv:active::after { animation: zlSweep 0.7s var(--ease-main); }
@keyframes zlItemIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes zlSweep { to { transform: translateX(100%); } }
.zl-conv-ava {
  position: relative;
  width: 48px; height: 48px; border-radius: 16px; flex-shrink: 0;
  background: var(--zl-soft2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.zl-conv-img { width: 100%; height: 100%; object-fit: cover; }
.zl-conv-img-fb { font-size: 24px; color: var(--zl-ink3); }
.zl-conv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.zl-conv-top { display: flex; align-items: baseline; gap: 8px; }
.zl-conv-name {
  font-size: 15px; font-weight: 700; color: var(--zl-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zl-conv.unread .zl-conv-name { font-weight: 800; }
.zl-conv-time { margin-left: auto; font-size: 11px; color: var(--zl-ink3); flex-shrink: 0; }
.zl-conv-prev {
  font-size: 13px; color: var(--zl-ink2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zl-conv-badge {
  min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: 10px;
  background: var(--zl-ring); color: var(--zl-bg);
  font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
  flex-shrink: 0;
}

/* ---------- 通知通道：日冕分类条 ---------- */
.zl-notice-tabs {
  position: relative;
  display: flex;
  margin: 2px 0 16px;
  padding: 4px;
  border-radius: 16px;
  background: var(--zl-soft);
  border: 1px solid var(--zl-line);
}
.zl-notice-thumb {
  position: absolute; top: 4px; left: 4px;
  width: calc(25% - 4px); height: calc(100% - 8px);
  border-radius: 12px;
  background: var(--zl-solid);
  box-shadow: var(--zl-shadow);
  transition: transform 0.45s var(--ease-main);
}
.zl-notice-thumb.comments { transform: translateX(100%); }
.zl-notice-thumb.followers { transform: translateX(200%); }
.zl-notice-thumb.notices { transform: translateX(300%); }
.zl-notice-tab {
  position: relative; z-index: 1;
  flex: 1; min-width: 0; height: 40px;
  border: none; background: transparent; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: var(--zl-ink2); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: color 0.3s;
}
.zl-notice-tab .material-icons { font-size: 16px; flex-shrink: 0; }
.zl-notice-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl-notice-tab.on { color: var(--zl-ink); font-weight: 700; }
.zl-notice-tab:active { transform: scale(0.96); }
.zl-notice-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #e2556f;
  box-shadow: 0 0 0 3px rgba(226, 85, 111, 0.15);
}
@media (max-width: 360px) {
  .zl-notice-tab { font-size: 11px; gap: 3px; }
}

/* ---------- 通知通道：光束时间线 ---------- */
.zl-panel { position: relative; }
.zl-ray { position: relative; margin-left: 30px; }
.zl-ray::before {
  content: '';
  position: absolute; left: 12px; top: 10px; bottom: 10px;
  width: 1.5px;
  background: linear-gradient(180deg, var(--zl-line), var(--zl-line) 72%, transparent);
}
.zl-ray-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0;
  cursor: pointer;
  animation: zlItemIn 0.45s var(--ease-main) both;
  animation-delay: calc(var(--i) * 40ms);
}
.zl-ray-glyph {
  position: relative; z-index: 1;
  width: 26px; height: 26px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.zl-ray-glyph .material-icons { font-size: 14px; }
.zl-ray-glyph.like { background: rgba(226, 111, 142, 0.13); color: #d96d8d; }
.zl-ray-glyph.comment { background: rgba(97, 138, 205, 0.13); color: #618acd; }
.zl-ray-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zl-ray-line {
  display: flex; align-items: baseline; gap: 6px;
  margin: 0; font-size: 14px; color: var(--zl-ink2);
}
.zl-ray-line b { font-size: 15px; font-weight: 700; color: var(--zl-ink); }
.zl-ray-action { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-ray-sub {
  margin: 0; font-size: 13px; color: var(--zl-ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zl-ray-time { font-size: 11px; color: var(--zl-ink3); flex-shrink: 0; align-self: flex-start; margin-top: 3px; }

/* ---------- 通知通道：粉丝 ---------- */
.zl-follow-list { display: flex; flex-direction: column; gap: 10px; }
.zl-follow {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--zl-line); border-radius: 18px;
  background: var(--zl-glass);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 4px 14px rgba(28, 30, 40, 0.04);
  cursor: pointer;
  animation: zlItemIn 0.45s var(--ease-main) both;
  animation-delay: calc(var(--i) * 40ms);
  transition: transform 0.16s var(--ease-micro);
}
.zl-follow:active { transform: scale(0.975); }
.zl-follow-ava {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--zl-soft2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.zl-follow-ava img { width: 100%; height: 100%; object-fit: cover; }
.zl-follow-ava .material-icons { font-size: 22px; color: var(--zl-ink3); }
.zl-follow-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zl-follow-info b { font-size: 15px; color: var(--zl-ink); }
.zl-follow-info span { font-size: 12px; color: var(--zl-ink3); }
.zl-follow-back {
  height: 30px; padding: 0 14px;
  border: none; border-radius: 999px;
  background: var(--zl-ring); color: var(--zl-bg);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: transform 0.15s var(--ease-micro);
}
.zl-follow-back:active { transform: scale(0.92); }

/* ---------- 通知通道：系统通知（公告卡） ---------- */
.zl-announce {
  border: 1px solid var(--zl-line); border-radius: 24px;
  background: var(--zl-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--zl-shadow);
  overflow: hidden;
  animation: zlItemIn 0.5s var(--ease-main) both;
}
.zl-announce-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; }
.zl-announce-ico {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: var(--zl-ring); color: var(--zl-bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(20, 22, 30, 0.22);
}
.zl-announce-ico .material-icons { font-size: 22px; }
.zl-announce-titles { flex: 1; min-width: 0; }
.zl-announce-titles h3 { font-size: 17px; font-weight: 800; color: var(--zl-ink); margin: 0; }
.zl-announce-titles p { font-size: 10px; color: var(--zl-ink3); letter-spacing: 2px; margin: 2px 0 0; }
.zl-announce-new {
  font-size: 10px; font-weight: 800; color: var(--zl-bg);
  background: var(--zl-ring); padding: 3px 9px; border-radius: 999px; flex-shrink: 0;
}
.zl-announce-body { padding: 2px 18px 16px; border-top: 1px solid var(--zl-line); }
.zl-announce-body h4 { font-size: 15px; font-weight: 800; color: var(--zl-ink); margin: 14px 0 2px; }
.zl-announce-date { font-size: 11px; color: var(--zl-ink3); }
.zl-announce-p { font-size: 13.5px; color: var(--zl-ink2); line-height: 1.7; margin: 8px 0 0; }
.zl-announce-qq {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 10px 12px;
  background: var(--zl-soft); border-radius: 14px;
}
.zl-announce-qq-label { font-size: 13px; color: var(--zl-ink2); font-weight: 600; }
.zl-announce-qq-btn {
  display: flex; align-items: center; gap: 6px;
  border: none; border-radius: 11px;
  background: var(--zl-ring); color: var(--zl-bg);
  font-size: 13px; font-weight: 700;
  padding: 8px 12px; cursor: pointer;
  box-shadow: 0 5px 14px rgba(20, 22, 30, 0.2);
  transition: transform 0.15s var(--ease-micro);
}
.zl-announce-qq-btn:active { transform: scale(0.95); }
.zl-announce-qq-btn .material-icons { font-size: 16px; }
.zl-announce-foot {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--zl-line);
  font-size: 11.5px; color: var(--zl-ink3); text-align: center; letter-spacing: 0.5px;
}

/* ---------- 清空会话确认弹层 ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.zl-clear-mask {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(10, 11, 16, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.28s var(--ease-main);
}
.zl-clear-sheet {
  width: 100%; max-width: 480px;
  padding: 22px 20px calc(22px + var(--safe-bottom));
  background: var(--zl-glass-strong);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border-radius: 24px 24px 0 0;
  text-align: center;
  animation: zlSheetUp 0.3s var(--ease-main);
}
@keyframes zlSheetUp { from { transform: translateY(100%); } to { transform: none; } }
.zl-clear-title { font-size: 17px; font-weight: 800; color: var(--zl-ink); }
.zl-clear-text { font-size: 13px; color: var(--zl-ink2); margin: 10px 0 18px; line-height: 1.6; }
.zl-clear-actions { display: flex; gap: 12px; }
.zl-clear-btn {
  flex: 1; height: 46px;
  border: none; border-radius: 14px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform 0.15s var(--ease-micro);
}
.zl-clear-btn:active { transform: scale(0.97); }
.zl-clear-btn.cancel { background: var(--zl-soft); color: var(--zl-ink2); }
.zl-clear-btn.ok {
  background: var(--zl-ring); color: var(--zl-bg);
  box-shadow: 0 8px 20px rgba(20, 22, 30, 0.24);
}

/* ---------- 私信聊天：全屏沉浸面板 ---------- */
.view-messages > .zl-chat {
  margin: -12px -16px -110px;
  height: 100vh;
  height: 100dvh;
}
.zl-chat {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--zl-bg);
  overflow: hidden;
  animation: zlChatIn 0.4s var(--ease-main);
}
@keyframes zlChatIn { from { opacity: 0; } to { opacity: 1; } }
.zl-chat-glow {
  position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
  width: 340px; height: 260px;
  background: radial-gradient(circle, rgba(199, 203, 216, 0.55), rgba(199, 203, 216, 0) 70%);
  filter: blur(40px);
  pointer-events: none;
}
[data-dark="1"] .zl-chat-glow { background: radial-gradient(circle, rgba(70, 76, 102, 0.5), rgba(70, 76, 102, 0) 70%); }

.zl-chat-head {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--zl-glass-strong);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid var(--zl-line);
  flex-shrink: 0;
}
.zl-chat-back, .zl-chat-more {
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: transparent; color: var(--zl-ink2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, transform 0.15s var(--ease-micro);
}
.zl-chat-back:active, .zl-chat-more:active { background: var(--zl-soft); transform: scale(0.9); }
.zl-chat-back .material-icons, .zl-chat-more .material-icons { font-size: 22px; }
.zl-chat-center {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.zl-chat-ava { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.zl-chat-ava-img {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; display: block;
}
.zl-chat-ava-fb {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--zl-soft2); color: var(--zl-ink3); font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.zl-chat-live {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #4ecb71;
  border: 2px solid var(--zl-solid);
  box-shadow: 0 0 0 3px rgba(78, 203, 113, 0.22);
}
.zl-chat-live::after {
  content: '';
  position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(78, 203, 113, 0.5);
  animation: zlPulse 2.2s ease-out infinite;
}
.zl-chat-live.off { background: #a6a8b2; box-shadow: none; }
.zl-chat-live.off::after { display: none; }
@keyframes zlPulse {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.zl-chat-id { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.zl-chat-id b {
  font-size: 15px; font-weight: 700; color: var(--zl-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 46vw;
}
.zl-chat-id span { font-size: 11px; color: #4ecb71; }
.zl-chat-id span.off { color: var(--zl-ink3); }

.zl-chat-msgs {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.zl-chat-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--zl-ink3);
}
.zl-chat-empty .zl-empty-halo { margin-bottom: 14px; }
.zl-chat-empty p { font-size: 13px; margin: 0; }
.zl-msg {
  display: flex; align-items: flex-end; gap: 8px;
  max-width: 78%;
  animation: zlMsgIn 0.3s var(--ease-main) both;
}
.zl-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
@keyframes zlMsgIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.zl-msg-ava {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--zl-soft2); overflow: hidden;
}
.zl-msg-ava img { width: 100%; height: 100%; object-fit: cover; }
.zl-msg-ava.fb { display: flex; align-items: center; justify-content: center; color: var(--zl-ink3); }
.zl-msg-ava.fb .material-icons { font-size: 17px; }
.zl-msg-bubble {
  position: relative;
  padding: 10px 14px;
  border-radius: 18px; border-top-left-radius: 6px;
  background: var(--zl-glass-strong);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--zl-line);
  color: var(--zl-ink); font-size: 14px; line-height: 1.55;
  word-break: break-word;
  box-shadow: 0 3px 10px rgba(28, 30, 40, 0.05);
}
.zl-msg.mine .zl-msg-bubble {
  background: var(--zl-ring); color: var(--zl-bg);
  border: none;
  border-radius: 18px;
  border-top-left-radius: 18px;
  border-top-right-radius: 6px;
  box-shadow: 0 6px 16px rgba(20, 22, 30, 0.2);
}
.zl-msg-time { font-size: 10px; color: var(--zl-ink3); padding: 0 2px 2px; flex-shrink: 0; }

.zl-chat-inputbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: var(--zl-glass-strong);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-top: 1px solid var(--zl-line);
  flex-shrink: 0;
}
.zl-chat-emoji {
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: transparent; color: var(--zl-ink2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform 0.15s var(--ease-micro);
}
.zl-chat-emoji:active { transform: scale(0.88); }
.zl-chat-emoji .material-icons { font-size: 21px; }
.zl-chat-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--zl-line); border-radius: 22px;
  padding: 10px 16px;
  font-size: 14px;
  background: var(--zl-soft); color: var(--zl-ink);
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.zl-chat-input:focus {
  background: var(--zl-solid);
  border-color: rgba(23, 24, 30, 0.35);
  box-shadow: 0 0 0 3px rgba(23, 24, 30, 0.07);
}
[data-dark="1"] .zl-chat-input:focus {
  border-color: rgba(236, 238, 244, 0.35);
  box-shadow: 0 0 0 3px rgba(236, 238, 244, 0.08);
}
.zl-chat-input::placeholder { color: var(--zl-ink3); }
.zl-chat-send {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: var(--zl-ink3); color: var(--zl-bg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: transform 0.18s var(--ease-micro), background 0.3s, box-shadow 0.3s;
}
.zl-chat-send .material-icons { font-size: 19px; }
.zl-chat-send.has {
  background: var(--zl-ring);
  box-shadow: 0 6px 16px rgba(23, 24, 30, 0.28);
  animation: zlSendIn 0.3s var(--ease-main);
}
.zl-chat-send:active { transform: scale(0.86); }
@keyframes zlSendIn {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.zl-chat-emoji-panel {
  position: absolute; left: 10px; right: 10px;
  bottom: calc(58px + env(safe-area-inset-bottom));
  z-index: 5;
  max-height: 42vh;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--zl-line); border-radius: 20px;
  background: var(--zl-glass-strong);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: var(--zl-shadow);
  animation: zlPanelIn 0.28s var(--ease-main);
}
@keyframes zlPanelIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.zl-chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.zl-chat-emoji-item {
  height: 38px;
  border: none; background: transparent;
  font-size: 20px; border-radius: 10px; cursor: pointer;
  transition: background 0.15s, transform 0.12s var(--ease-micro);
}
.zl-chat-emoji-item:active { background: var(--zl-soft); transform: scale(0.85); }

.zl-chat-menu-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 11, 16, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.25s var(--ease-main);
}
.zl-chat-menu-sheet {
  width: 100%; max-width: 480px;
  padding: 14px 14px calc(14px + var(--safe-bottom));
  background: var(--zl-glass-strong);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border-radius: 24px 24px 0 0;
  animation: zlSheetUp 0.28s var(--ease-main);
}
.zl-chat-menu-item {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px;
  border: none; border-radius: 14px;
  background: transparent; color: var(--zl-ink);
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.zl-chat-menu-item.danger { color: #e2556f; }
.zl-chat-menu-item:active { background: var(--zl-soft); }
.zl-chat-menu-cancel {
  width: 100%; height: 44px; margin-top: 8px;
  border: none; border-radius: 14px;
  background: var(--zl-soft); color: var(--zl-ink2);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
/* ============================================================
   HOME v4（杂志感黑白 · 拒绝通用模板 · 2026-10-30）
   ============================================================ */
.home-v4 { padding-bottom: 12px; }

/* ---------- 顶栏：大字 tab + 磨砂搜索 ---------- */
.h4-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 14px;
}
.h4-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  padding-bottom: 6px;
}
.h4-tab {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: color .25s var(--ease-main), font-weight .25s;
  letter-spacing: .5px;
  line-height: 1;
}
.h4-tab.active {
  color: var(--text);
  font-weight: 800;
}
.h4-tab-ink {
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--text);
  transition: transform .35s var(--ease-main), width .35s var(--ease-main);
}
.h4-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  transition: box-shadow .25s var(--ease-main), border-color .25s;
}
.h4-search.active {
  border-color: var(--text);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 10%, transparent);
}
.h4-search-icon { font-size: 18px; color: var(--text-2); flex-shrink: 0; }
.h4-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
}
.h4-search input::placeholder { color: var(--text-2); opacity: .8; }
.h4-search-clear {
  width: 20px; height: 20px;
  border: none; background: var(--bg-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.h4-search-clear .material-icons { font-size: 14px; color: var(--text-2); }

/* ---------- Banner 沉浸式轮播 ---------- */
.h4-banner {
  position: relative;
  margin-bottom: 14px;
}
.h4-gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.h4-gallery::-webkit-scrollbar { display: none; }
.h4-gallery-card {
  flex: 0 0 100%;
  height: 196px;
  border-radius: 22px;
  background-size: cover;
  background-position: center;
  scroll-snap-align: center;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 12%, transparent);
  transition: transform .4s var(--ease-main);
}
.h4-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0 2px;
}
.h4-progress-bar {
  flex: 0 0 auto;
  height: 3px;
  width: 18px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 15%, transparent);
  cursor: pointer;
  transition: width .35s var(--ease-main), background .35s;
}
.h4-progress-bar.active {
  width: 32px;
  background: var(--text);
}

/* ---------- 功能入口：不对称 ---------- */
.h4-entries {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 12px;
}
.h4-signin {
  flex: 0 0 150px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: none;
  border-radius: 20px;
  background: var(--text);
  color: var(--card);
  cursor: pointer;
  text-align: left;
  transition: transform .2s var(--ease-main), box-shadow .25s var(--ease-main);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 22%, transparent);
}
.h4-signin:active { transform: scale(.96); }
.h4-signin.done {
  background: color-mix(in srgb, var(--text) 70%, var(--card));
}
.h4-signin-icon {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 18%, transparent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.h4-signin-icon .material-icons { font-size: 20px; color: var(--card); }
.h4-signin-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h4-signin-text b { font-size: 13px; font-weight: 700; line-height: 1.2; }
.h4-signin-text small { font-size: 10px; opacity: .7; }
.h4-signin-arrow { font-size: 14px; margin-left: auto; opacity: .6; }

.h4-rounds {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 6px;
}
.h4-round {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform .2s var(--ease-main);
}
.h4-round:active { transform: scale(.9); }
.h4-round .material-icons {
  font-size: 22px;
  color: var(--text);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  transition: background .25s;
}
.h4-round img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.h4-round span {
  font-size: 10px;
  color: var(--text-2);
  white-space: nowrap;
}

/* ---------- 公告跑马灯 ---------- */
.h4-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  transition: background .2s;
}
.h4-notice:active { background: var(--bg-2); }
.h4-notice-horn { font-size: 17px; color: var(--text); flex-shrink: 0; }
.h4-notice-marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.h4-notice-marquee span {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-2);
  padding-left: 100%;
  animation: h4-marquee 14s linear infinite;
}
.h4-notice-arrow { font-size: 18px; color: var(--text-2); flex-shrink: 0; }
@keyframes h4-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ---------- 搜索结果用户 ---------- */
.h4-search-section { margin-bottom: 14px; }
.h4-search-section-title {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 8px;
  padding-left: 2px;
}
.h4-search-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform .15s;
}
.h4-search-user:active { transform: scale(.98); }
.h4-search-user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
}
.h4-search-user-meta { flex: 1; min-width: 0; }
.h4-search-user-name {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.h4-search-me {
  font-style: normal; font-size: 10px;
  background: var(--text); color: var(--card);
  padding: 1px 6px; border-radius: 6px; margin-left: 4px;
}
.h4-search-user-sub { display: block; font-size: 11px; color: var(--text-2); margin-top: 2px; }
.h4-search-chev { font-size: 18px; color: var(--text-2); }

/* ---------- 帖子卡片 ---------- */
.h4-feed-list { display: flex; flex-direction: column; gap: 12px; }
.h4-post {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
  cursor: pointer;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--text) 6%, transparent);
  animation: h4-post-in .5s var(--ease-main) backwards;
  transition: transform .2s var(--ease-main), box-shadow .25s var(--ease-main);
}
.h4-post:active {
  transform: scale(.985);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 8%, transparent);
}
@keyframes h4-post-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.h4-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.h4-post-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
  flex-shrink: 0;
}
.h4-post-meta { flex: 1; min-width: 0; }
.h4-post-author-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.h4-post-author {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h4-post-board {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.h4-post-time {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 3px;
}
.h4-post-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text);
  margin: 12px 0 6px;
  line-height: 1.45;
  letter-spacing: .2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h4-post-text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h4-post-img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 14px;
  margin-top: 10px;
  background: var(--bg-2);
}
.h4-post-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}
.h4-post-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
}
.h4-post-stat .material-icons { font-size: 16px; }

/* ---------- 深色模式适配 ---------- */
[data-dark="1"] .h4-search,
[data-dark="1"] .h4-rounds,
[data-dark="1"] .h4-notice {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
[data-dark="1"] .h4-signin {
  background: #f2f2f2;
  color: #111;
}
[data-dark="1"] .h4-signin-icon { background: rgba(0,0,0,0.1); }
[data-dark="1"] .h4-signin-icon .material-icons { color: #111; }
[data-dark="1"] .h4-tab-ink { background: #f2f2f2; }
[data-dark="1"] .h4-progress-bar { background: rgba(255,255,255,0.15); }
[data-dark="1"] .h4-progress-bar.active { background: #f2f2f2; }

/* ---------- 黑白主题 mono 微调 ---------- */
[data-theme="mono"] .h4-search,
[data-theme="mono"] .h4-rounds,
[data-theme="mono"] .h4-notice {
  background: rgba(255,255,255,0.65);
}
/* ============================================================
   COMMUNITY v4（杂志感双列瀑布 · 2026-10-30）
   ============================================================ */
.c4-list { padding-bottom: 12px; }

/* ---------- 顶部：大标题 + 圆形发帖按钮 ---------- */
.c4-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 6px 0 16px;
}
.c4-head-text { display: flex; flex-direction: column; gap: 3px; }
.c4-head-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 1px;
  line-height: 1;
  margin: 0;
}
.c4-head-sub {
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: .5px;
}
.c4-post-fab {
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--text);
  color: var(--card);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 28%, transparent);
  transition: transform .2s var(--ease-main), box-shadow .25s var(--ease-main);
}
.c4-post-fab:active { transform: scale(.9); }
.c4-post-fab .material-icons { font-size: 20px; }

/* ---------- 双列瀑布流 ---------- */
.c4-waterfall {
  column-count: 2;
  column-gap: 10px;
}
.c4-card {
  break-inside: avoid;
  margin-bottom: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 6%, transparent);
  animation: c4-card-in .5s var(--ease-main) backwards;
  transition: transform .2s var(--ease-main), box-shadow .25s var(--ease-main);
}
.c4-card:active {
  transform: scale(.97);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 8%, transparent);
}
@keyframes c4-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 图：圆角卡片内图，去掉生硬顶边 */
.c4-card-img {
  width: 100%;
  overflow: hidden;
  background: var(--bg-2);
}
.c4-card-img img {
  width: 100%;
  display: block;
  transition: transform .5s var(--ease-main);
}
.c4-card:active .c4-card-img img { transform: scale(1.03); }
.c4-card-img.img-err { display: none !important; }

/* 文字区 */
.c4-card-body { padding: 12px 12px 10px; }
.c4-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin: 0 0 5px;
  letter-spacing: .2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c4-card-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 底部：头像 + 统计 */
.c4-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.c4-card-author {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  cursor: pointer;
}
.c4-card-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
  flex-shrink: 0;
}
.c4-card-name {
  font-size: 11px;
  color: var(--text-2);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c4-card-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-2);
}
.c4-card-stats span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.c4-card-stats .material-icons { font-size: 14px; }
.c4-card-stats .liked { color: #ff5b8a; }

/* ---------- 深色模式 ---------- */
[data-dark="1"] .c4-post-fab {
  background: #f2f2f2; color: #111;
}
[data-dark="1"] .c4-card-stats .liked { color: #ff7ba3; }

/* ---------- 黑白 mono 微调 ---------- */
[data-theme="mono"] .c4-card-stats .liked { color: #111; }
/* ============================================================
   HOME v4.1：去除社区tab + 在线用户横滑条
   ============================================================ */

/* 只剩"首页"一个tab时，ink 宽度收窄贴合文字 */
.h4-tabs { padding-bottom: 6px; }
.h4-tab-ink { width: 24px; left: 2px; bottom: 0; }

/* ---------- 在线用户横滑条 ---------- */
.h4-online {
  margin-bottom: 14px;
}
.h4-online-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.h4-online-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  animation: h4-online-pulse 2s ease-in-out infinite;
}
@keyframes h4-online-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.06); }
}
.h4-online-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .3px;
}
.h4-online-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
}
.h4-online-row::-webkit-scrollbar { display: none; }
.h4-online-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: transform .2s var(--ease-main);
}
.h4-online-item:active { transform: scale(.9); }
.h4-online-avatar-wrap {
  position: relative;
  width: 52px; height: 52px;
}
.h4-online-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
  border: 2px solid var(--card);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--text) 12%, transparent);
}
.h4-online-status {
  position: absolute;
  right: 0; bottom: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--card);
}
.h4-online-name {
  font-size: 10px;
  color: var(--text-2);
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ============================================================
   HOME v4.2：功能入口统一磨砂 4 等宽
   ============================================================ */
.h4-entries {
  display: flex;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px 6px;
  margin-bottom: 12px;
}
.h4-entry {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform .2s var(--ease-main);
}
.h4-entry:active { transform: scale(.88); }
.h4-entry-icon {
  width: 46px; height: 46px;
  border-radius: 16px;
  background: var(--text);
  color: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s, transform .25s var(--ease-main);
}
.h4-entry-icon .material-icons { font-size: 22px; }
.h4-entry-icon.done {
  background: color-mix(in srgb, var(--text) 55%, var(--card));
}
.h4-entry-img {
  padding: 0;
  overflow: hidden;
}
.h4-entry-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.h4-entry-label {
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

[data-dark="1"] .h4-entry-icon { background: #f2f2f2; color: #111; }
[data-dark="1"] .h4-entry-icon.done { background: rgba(242,242,242,.55); }
/* ============================================================
   HOME v4.3：入口去边框 + 柔和彩色图标
   ============================================================ */
.h4-entries {
  background: transparent;
  border: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 6px 0;
  box-shadow: none;
}
.h4-entry-icon {
  background: #f0f0f0;
  color: #555;
}
/* 每个入口独立彩色（柔和莫兰迪） */
.h4-entry:nth-child(1) .h4-entry-icon { background: #FFE0C7; color: #E8833A; }
.h4-entry:nth-child(2) .h4-entry-icon { background: #FFE0EC; color: #E5679A; }
.h4-entry:nth-child(3) .h4-entry-icon { background: #E8E0FF; color: #8B6FD8; }
.h4-entry:nth-child(4) .h4-entry-icon { background: #D4F1EC; color: #3FA99A; }
/* 签到完成态：彩色保留但加勾，不变灰 */
.h4-entry-icon.done { background: inherit; }

[data-dark="1"] .h4-entry:nth-child(1) .h4-entry-icon { background: rgba(232,131,58,.18); color: #F5A567; }
[data-dark="1"] .h4-entry:nth-child(2) .h4-entry-icon { background: rgba(229,103,154,.18); color: #F08AB5; }
[data-dark="1"] .h4-entry:nth-child(3) .h4-entry-icon { background: rgba(139,111,216,.2); color: #B39DDB; }
[data-dark="1"] .h4-entry:nth-child(4) .h4-entry-icon { background: rgba(63,169,154,.18); color: #5DC4B4; }
/* ============================================================
   HOME v4.4：公告极简标签式
   ============================================================ */
.h4-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 14px;
  margin-bottom: 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.h4-notice:active { background: transparent; opacity: .6; }
.h4-notice-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--card);
  background: var(--text);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 1px;
}
.h4-notice-text {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h4-notice-arrow {
  font-size: 12px;
  color: var(--text-2);
  flex-shrink: 0;
}
/* ============================================================
   HOME v4.5：帖子改时间线（去卡片化）
   ============================================================ */
.h4-feed-list { gap: 0; }
.h4-post {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 2px;
  box-shadow: none;
}
.h4-post:active {
  transform: none;
  box-shadow: none;
  opacity: .7;
}
.h4-post-img {
  border-radius: 14px;
}

/* 作者行：头像小一点，板块标签淡灰内联 */
.h4-post-avatar { width: 36px; height: 36px; }
.h4-post-author { font-size: 13.5px; font-weight: 700; }
.h4-post-board {
  font-size: 11px;
  font-weight: 400;
  background: transparent !important;
  padding: 0;
  color: var(--text-2) !important;
}
.h4-post-board::before {
  content: "·";
  margin-right: 6px;
  color: var(--text-3, var(--text-2));
}
.h4-post-time { font-size: 11px; color: var(--text-3, var(--text-2)); margin-top: 2px; }

/* 标题更大更有杂志感 */
.h4-post-title {
  font-size: 17px;
  font-weight: 800;
  margin: 10px 0 6px;
  letter-spacing: 0;
}
.h4-post-text {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
}

/* 底部统计：更淡更小 */
.h4-post-foot {
  margin-top: 12px;
  gap: 20px;
}
.h4-post-stat {
  font-size: 12px;
  color: var(--text-3, var(--text-2));
}
.h4-post-stat .material-icons { font-size: 17px; }
/* ============================================================
   账号安全弹窗
   ============================================================ */
.sec-modal-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: sec-fade .2s ease;
}
@keyframes sec-fade { from { opacity: 0; } to { opacity: 1; } }
.sec-modal {
  width: 86%; max-width: 340px;
  background: var(--card);
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  animation: sec-pop .3s cubic-bezier(.22,.05,.18,.99);
}
.sec-modal-lg { max-width: 360px; }
@keyframes sec-pop {
  from { transform: scale(.92) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.sec-modal h3 {
  font-size: 17px; font-weight: 700; color: var(--text);
  margin: 0 0 16px; text-align: center;
}
.sec-field {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.sec-field .material-icons { font-size: 18px; color: var(--text-2); }
.sec-field input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 14px; color: var(--text);
}
.sec-agreement {
  background: var(--bg-2);
  border-radius: 12px;
  padding: 12px 14px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 12px;
}
.sec-agreement p { margin: 0 0 8px; }
.sec-agreement b { color: var(--text); }
.sec-agree {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2);
  margin-bottom: 12px; cursor: pointer;
}
.sec-agree input { width: 16px; height: 16px; accent-color: #111; }
.sec-err {
  font-size: 12px; color: #ff5b5b;
  margin-bottom: 10px; text-align: center;
}
.sec-actions {
  display: flex; gap: 10px; margin-top: 6px;
}
.sec-btn-cancel, .sec-btn-ok, .sec-btn-danger {
  flex: 1;
  padding: 11px 0;
  border: none; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}
.sec-btn-cancel { background: var(--bg-2); color: var(--text-2); }
.sec-btn-ok { background: var(--text); color: var(--card); }
.sec-btn-danger { background: #ff5b5b; color: #fff; }
.sec-btn-danger:disabled { opacity: .4; cursor: not-allowed; }
.sec-btn-cancel:active, .sec-btn-ok:active, .sec-btn-danger:active { transform: scale(.97); }
/* ============================================================
   SETTINGS v4：极简杂志风（去卡片化）
   ============================================================ */
.view-settings .sub-header {
  padding: 6px 0 18px;
}
.view-settings .sub-header h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 1px;
}
.view-settings .sub-header .icon-btn {
  background: transparent;
  border: none;
  box-shadow: none;
}
.view-settings .sub-header .icon-btn .material-icons { color: var(--text); }

/* 去掉白色圆角卡片 */
.view-settings .set-group {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 24px;
  box-shadow: none;
}
.view-settings .set-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 2px 8px;
  margin: 0;
}

/* 每行：无背景，行间细分割线 */
.view-settings .set-row {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 14px 2px;
  margin: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
}
.view-settings .set-row:last-child { border-bottom: none; }
.view-settings .set-row:active { background: transparent; opacity: .6; }

/* 图标：去掉彩色圆角方块，纯黑线性图标 */
.view-settings .ms-icon {
  width: 28px; height: 28px;
  background: transparent !important;
  border: none !important;
  color: var(--text);
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
}
.view-settings .ms-icon .material-icons { font-size: 20px; color: var(--text) !important; }
.view-settings .ms-icon img { width: 22px; height: 22px; }

.view-settings .set-row-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.view-settings .set-row-val {
  font-size: 12px;
  color: var(--text-2);
}
.view-settings .set-chevron {
  font-size: 18px;
  color: var(--text-3, var(--text-2));
}

/* 退出登录按钮：黑色大按钮保留 */
.view-settings .mine-logout-btn {
  margin-top: 12px;
}