/* ===== 校园频道 — 社交信息流风格 v2 (GSAP) ===== */

/* ── Tokens ─────────────────────────────────────── */
:root {
  color-scheme: dark;
  font-family: "Noto Sans SC", system-ui, -apple-system, sans-serif;

  /* Background layers */
  --bg-base:       #1a1b1e;
  --bg-deeper:     #111214;
  --bg-surface:    #232428;
  --bg-elevated:   #2c2d32;
  --bg-hover:      #3e3f47;
  --bg-active:     #4a4b55;
  --bg-input:      #383a40;
  --bg-overlay:    rgba(0,0,0,0.55);
  --bg-card:       #2b2d31;

  /* Text */
  --text:          #f2f3f5;
  --text-sec:      #b5bac1;
  --text-dim:      #80848e;
  --text-muted:    #5c5e66;
  --text-link:     #a78bfa;
  --text-mention:  #f0b232;

  /* Accent (brand) */
  --accent:        #7c5cfc;
  --accent-hover:  #6a4ae8;
  --accent-active: #5939d4;
  --accent-light:  #a78bfa;
  --accent-g:      rgba(124,92,252,0.20);
  --accent-soft:   rgba(124,92,252,0.08);

  /* Semantic colors */
  --red:           #ed4245;
  --red-bg:        rgba(237,66,69,0.12);
  --green:         #23a559;
  --green-bg:      rgba(35,165,89,0.12);
  --yellow:        #f0b232;
  --yellow-bg:     rgba(240,178,50,0.12);
  --pink:          #ff6b8a;
  --orange:        #fa8c16;
  --orange-bg:     rgba(250,140,22,0.12);
  --warning:       #f59e0b;
  --warning-bg:    rgba(245,158,11,0.12);
  --blue:          #5865f2;
  --blue-bg:       rgba(88,101,242,0.12);
  --cyan:          #00b4d8;

  /* Borders & radii */
  --border:        rgba(255,255,255,0.06);
  --border-light:  rgba(255,255,255,0.10);
  --border-active: rgba(255,255,255,0.18);
  --border-focus:  var(--accent);
  --r-xs:          4px;
  --r:             8px;
  --r-md:          12px;
  --r-lg:          16px;
  --r-xl:          24px;

  /* Shadows */
  --sh-sm:        0 4px 12px rgba(0,0,0,0.28);
  --sh:           0 8px 24px rgba(0,0,0,0.30);
  --sh-lg:        0 16px 48px rgba(0,0,0,0.40);
  --sh-card:      0 4px 12px rgba(0,0,0,0.35);

  /* Transitions (CSS fallback; GSAP handles most animations) */
  --t:            0.18s ease;
  --t-spring:     0.4s cubic-bezier(.34,1.56,.64,1);
  --t-smooth:     0.3s cubic-bezier(0.4,0,0.2,1);

  /* Spacing Scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Typography Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  /* Social feed specific tokens */
  --feed-max-width: 720px;
  --avatar-size: 52px;
  --avatar-mobile-size: 44px;
}

/* ── Reset ──────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:#020412; color:var(--text); line-height:1.5;
  overflow:hidden; height:100vh; height:100dvh;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--text-link); text-decoration:none; }
a:hover { color:#c4b5fd; }
img { display:block; max-width:100%; }
button {
  cursor:pointer; font-family:inherit; border:none;
  background:none; color:inherit;
}
input,textarea { font-family:inherit; }
.view { display:none; }
.view.active { display:block; }

/* ── Mobile touch polish ── */
button, a, .ch-item, .quick-action, .member-item, .msg-author,
.msg-hover-btn, .msg-reaction, .role-badge, .login-actions .btn-signin,
.login-actions .btn-signup, .btn-login {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ch-item, .member-item, .quick-action, .sidebar-server, .msg-author,
.msg-mention, .msg-tag-pill, .friend-item {
  -webkit-user-select: none;
  user-select: none;
}

/* ══════════════════════════════════════════════════
   LOGIN BACKGROUND LAYERS
   ══════════════════════════════════════════════════ */
/* 登录页已改用聊天界面默认主题背景(#main-bg + #main-dots)，旧学校/星空图背景停用 */
#school-bg {
  display:none !important;
}
#school-glow {
  display:none !important;
}
#stars-canvas {
  display:none !important;
}
.vignette-overlay {
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(2,4,14,0.25) 75%, rgba(0,0,0,0.50) 95%);
}
.grain-overlay {
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.main-active #school-bg,
body.main-active #school-glow,
body.main-active #stars-canvas,
body.main-active .vignette-overlay,
body.main-active .grain-overlay,
body.main-active #welcome-screen,
body.main-active #loading-stage,
body.main-active #login-submit-loader,
body.main-active #monster-login { display:none !important; }

/* ── 主题背景（极光为默认 :root） ── */
:root {
  --main-bg-image:
    radial-gradient(ellipse 90% 55% at 25% 18%, rgba(124,92,252,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 75% 22%, rgba(0,210,255,0.40) 0%, transparent 48%),
    radial-gradient(ellipse 100% 45% at 55% 88%, rgba(88,101,242,0.45) 0%, transparent 52%),
    radial-gradient(ellipse 70% 35% at 12% 75%, rgba(236,72,153,0.28) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 90% 70%, rgba(167,139,250,0.25) 0%, transparent 50%),
    linear-gradient(180deg, #080b20 0%, #0f1232 25%, #140f35 55%, #0d0f28 100%);
  --main-bg-overlay: linear-gradient(180deg, rgba(5,8,22,0.15) 0%, rgba(5,8,22,0.42) 100%);
  --main-bg-blur: 0px;
  --main-bg-dim: 0.38;
}

/* ── 白昼极简（全站浅色主题） ── */
[data-theme="light"] {
  color-scheme: light;
  --bg-base: #eef0f4;
  --bg-deeper: #e4e7ec;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-hover: #f1f3f6;
  --bg-active: #e7eaf0;
  --bg-input: #f4f6f9;
  --bg-overlay: rgba(255,255,255,0.55);
  --bg-card: #ffffff;

  --text: #16181d;
  --text-sec: #474c57;
  --text-dim: #767b86;
  --text-muted: #9aa0ab;
  --text-link: #6d4ed8;
  --text-mention: #b8860b;

  --accent: #7c5cfc;
  --accent-hover: #6a4ae8;
  --accent-active: #5939d4;
  --accent-light: #a78bfa;
  --accent-g: rgba(124,92,252,0.14);
  --accent-soft: rgba(124,92,252,0.06);

  --red: #e0303a;          --red-bg: rgba(224,48,58,0.10);
  --green: #1a9e52;        --green-bg: rgba(26,158,82,0.12);
  --yellow: #c9910a;       --yellow-bg: rgba(201,145,10,0.12);
  --pink: #e8556f;
  --orange: #e07b12;       --orange-bg: rgba(224,123,18,0.12);
  --blue: #4a5be8;         --blue-bg: rgba(74,91,232,0.12);
  --cyan: #0098b8;

  --border: rgba(20,24,40,0.08);
  --border-light: rgba(20,24,40,0.10);
  --border-active: rgba(20,24,40,0.16);
  --border-focus: var(--accent);

  --sh-sm: 0 4px 12px rgba(20,24,40,0.08);
  --sh: 0 8px 24px rgba(20,24,40,0.10);
  --sh-lg: 0 16px 48px rgba(20,24,40,0.14);
  --sh-card: 0 4px 12px rgba(20,24,40,0.08);

  /* 白昼背景 */
  --main-bg-image:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(124,92,252,0.10) 0%, transparent 50%),
    radial-gradient(ellipse 70% 45% at 100% 100%, rgba(0,180,216,0.07) 0%, transparent 50%),
    linear-gradient(180deg, #f7f8fb 0%, #eef0f4 100%);
  --main-bg-overlay: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(240,242,247,0.5) 100%);
  --main-bg-blur: 0px;
  --main-bg-dim: 0.0;
}

/* ── 自然森绿（清新浅绿全站主题） ── */
[data-theme="classroom"] {
  color-scheme: light;
  --bg-base: #c5ebd2;
  --bg-deeper: #b3e4c4;
  --bg-surface: #d1f0db;
  --bg-elevated: #e1f7e9;
  --bg-hover: #bbe8ca;
  --bg-active: #a7ddb8;
  --bg-input: #e8f9ee;
  --bg-overlay: rgba(16,48,32,0.35);
  --bg-card: #e9fbf1;

  --text: #0a3324;
  --text-sec: #255540;
  --text-dim: #487a61;
  --text-muted: #6f9f84;
  --text-link: #0d8a55;
  --text-mention: #0b6b43;

  --accent: #16a34a;
  --accent-hover: #15803d;
  --accent-active: #166534;
  --accent-light: #22c55e;
  --accent-g: rgba(22,163,74,0.18);
  --accent-soft: rgba(22,163,74,0.08);

  --red: #dc2626;          --red-bg: rgba(220,38,38,0.10);
  --green: #16a34a;        --green-bg: rgba(22,163,74,0.12);
  --yellow: #a16207;       --yellow-bg: rgba(161,98,7,0.12);
  --pink: #db2777;
  --orange: #c2410c;       --orange-bg: rgba(194,65,12,0.12);
  --blue: #2563eb;         --blue-bg: rgba(37,99,235,0.12);
  --cyan: #0f766e;

  --border: rgba(10,51,36,0.10);
  --border-light: rgba(10,51,36,0.14);
  --border-active: rgba(10,51,36,0.22);
  --border-focus: var(--accent);

  --sh-sm: 0 4px 12px rgba(10,51,36,0.08);
  --sh: 0 8px 24px rgba(10,51,36,0.10);
  --sh-lg: 0 16px 48px rgba(10,51,36,0.14);
  --sh-card: 0 4px 12px rgba(10,51,36,0.08);

  /* 自然森绿背景：清新薄荷绿底色 + 嫩绿光晕 + 叶子纹理 */
  --main-bg-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M30 45c-5-8-2-18 6-23 8-5 18-2 23 6 5 8 2 18-6 23-8 5-18 2-23-6z' fill='%2316a34a' fill-opacity='0.05'/%3E%3Cpath d='M85 70c-4-6-1-14 5-18 6-4 14-1 18 5 4 6 1 14-5 18-6 4-14 1-18-5z' fill='%230f766e' fill-opacity='0.04'/%3E%3Ccircle cx='20' cy='90' r='1.5' fill='%2322c55e' fill-opacity='0.06'/%3E%3Ccircle cx='95' cy='25' r='1' fill='%2322c55e' fill-opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 50% at 30% 22%, rgba(74,222,128,0.32) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 78% 18%, rgba(45,212,191,0.24) 0%, transparent 48%),
    radial-gradient(ellipse 90% 40% at 55% 88%, rgba(22,163,74,0.20) 0%, transparent 52%),
    radial-gradient(ellipse 60% 35% at 15% 68%, rgba(134,239,172,0.22) 0%, transparent 50%),
    linear-gradient(180deg, #e0f7e6 0%, #d1f0db 38%, #c2e8cf 70%, #d6f2de 100%);
  --main-bg-overlay: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(209,240,219,0.45) 100%);
  --main-bg-blur: 0px;
  --main-bg-dim: 0.0;
}

/* ═══ 星空 Starfield（默认主题 · 深蓝夜空 + Canvas 星河） ═══ */
[data-theme="starry"] {
  color-scheme: dark;
  --bg-base:       #070b1a;
  --bg-deeper:     #04060f;
  --bg-surface:    rgba(18,26,52,0.55);
  --bg-elevated:   rgba(26,36,68,0.66);
  --bg-hover:      rgba(44,56,96,0.45);
  --bg-active:     rgba(58,72,120,0.55);
  --bg-input:      rgba(22,30,58,0.72);
  --bg-overlay:    rgba(2,4,12,0.42);
  --bg-card:       rgba(20,28,56,0.60);

  --text:          #eaf0ff;
  --text-sec:      #aab6d8;
  --text-dim:      #6f7da6;
  --text-muted:    #4b557a;
  --text-link:     #7fd6ff;
  --text-mention:  #ffd86b;

  --accent:        #22d3ee;
  --accent-hover:  #36e0f5;
  --accent-active: #16b8d0;
  --accent-light:  #7fe9ff;
  --accent-g:      rgba(34,211,238,0.22);
  --accent-soft:   rgba(34,211,238,0.10);

  --red:           #ff5c70; --red-bg: rgba(255,92,112,0.14);
  --green:         #2ee6a0; --green-bg: rgba(46,230,160,0.14);
  --yellow:        #ffd86b; --yellow-bg: rgba(255,216,107,0.14);
  --pink:          #ff8fc0;
  --orange:        #ff9f5a; --orange-bg: rgba(255,159,90,0.14);
  --blue:          #5aa6ff; --blue-bg: rgba(90,166,255,0.14);
  --cyan:          #22d3ee;

  --border:        rgba(150,175,255,0.10);
  --border-light:  rgba(150,175,255,0.16);
  --border-active: rgba(150,175,255,0.28);
  --border-focus:  var(--accent);

  --sh-sm: 0 4px 12px rgba(0,0,0,0.35);
  --sh:    0 8px 24px rgba(0,0,0,0.40);
  --sh-lg: 0 16px 48px rgba(0,0,0,0.50);
  --sh-card: 0 4px 12px rgba(0,0,0,0.45);

  /* --main-bg-image 已移除：主界面恢复纯深色渐变背景，不再显示星空大图 */
  --main-bg-overlay: linear-gradient(180deg, rgba(4,6,16,0.00) 0%, rgba(2,4,12,0.18) 100%);
  --main-bg-blur: 0px;
  --main-bg-dim: 0.04;
}

/* starry 玻璃质感：面板半透明透出星空 */
[data-theme="starry"] .top-nav,
[data-theme="starry"] .channel-drawer,
[data-theme="starry"] .right-sidebar,
[data-theme="starry"] .sidebar-card,
[data-theme="starry"] .message-input-wrapper,
[data-theme="starry"] .avatar-popup,
[data-theme="starry"] .notify-dropdown,
[data-theme="starry"] .emoji-panel,
[data-theme="starry"] .modal-box,
[data-theme="starry"] .welcome-card {
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
/* 聊天主区完全透明，让星云+星点透出来 */
[data-theme="starry"] .channel-main,
[data-theme="starry"] .feed-wrapper,
[data-theme="starry"] .messages-area {
  background: transparent !important;
}

#main-bg {
  display:block; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    var(--main-bg-overlay),
    var(--main-bg-image,
      radial-gradient(ellipse 90% 55% at 25% 18%, rgba(124,92,252,0.55) 0%, transparent 55%),
      radial-gradient(ellipse 80% 50% at 75% 22%, rgba(0,210,255,0.40) 0%, transparent 48%),
      radial-gradient(ellipse 100% 45% at 55% 88%, rgba(88,101,242,0.45) 0%, transparent 52%),
      radial-gradient(ellipse 70% 35% at 12% 75%, rgba(236,72,153,0.28) 0%, transparent 50%),
      radial-gradient(ellipse 60% 40% at 90% 70%, rgba(167,139,250,0.25) 0%, transparent 50%),
      linear-gradient(180deg, #080b20 0%, #0f1232 25%, #140f35 55%, #0d0f28 100%)
    );
  background-size: cover;
  background-position: center;
  filter: blur(var(--main-bg-blur)) brightness(1.08) saturate(1.15);
  transition: filter 0.3s ease, opacity 0.4s ease;
  will-change: filter, opacity;
}
#main-bg::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 0%, transparent 30%, rgba(5,8,22,var(--main-bg-dim)) 100%);
  pointer-events:none;
}

#main-dots {
  display:block; position:fixed; inset:0; z-index:1; pointer-events:none;
}

/* ══════════════════════════════════════════════════
   LOGIN FLOW (BobZhang 同款：welcome → loading → monster-login)
   ══════════════════════════════════════════════════ */

/* ── 第一阶段：欢迎引导页 ── */
.welcome-screen {
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .5s ease;
}
.welcome-screen.active { opacity:1; pointer-events:auto; visibility:visible; }

.welcome-inner {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  animation:welcomeRise 1s ease both;
  padding:0 20px;
}
@keyframes welcomeRise {
  from { opacity:0; transform:translateY(26px) scale(.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* 校园徽章（悬浮在标题上方） */
.welcome-campus-badge {
  position:relative; margin-bottom:28px;
  animation:campusBadgeFloat 4s ease-in-out infinite;
}
@keyframes campusBadgeFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%     { transform:translateY(-10px) scale(1.05); }
}
.welcome-campus-img {
  width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 0 30px rgba(124,92,252,.55), 0 0 60px rgba(124,92,252,.25), 0 0 90px rgba(124,92,252,.1);
  background:#fff;
}
.welcome-campus-star {
  position:absolute; top:-8px; right:-8px; font-size:1.6rem; line-height:1; color:#ffd86b;
  text-shadow:0 0 14px rgba(255,216,107,.95), 0 0 30px rgba(255,180,80,.55);
  animation:starPulse 2.4s ease-in-out infinite;
}
@keyframes starPulse {
  0%,100% { transform:scale(.85) rotate(0deg); opacity:.8; }
  50%     { transform:scale(1.15) rotate(20deg); opacity:1; }
}

/* 流光标题 */
.welcome-title-wrap { position:relative; margin-bottom:48px; padding:6px 14px; }
.welcome-title-glow {
  position:absolute; inset:-30% -12%;
  filter:blur(32px); opacity:.75; border-radius:50%;
  background:linear-gradient(90deg,#22d3ee,#3b82f6,#a855f7,#facc15);
  background-size:300% auto;
  animation:welcomeFlow 6s linear infinite;
}
.welcome-title {
  position:relative; margin:0;
  font-size:clamp(2.4rem, 7vw, 4.8rem); font-weight:900; letter-spacing:.1em;
  background:linear-gradient(90deg,#67e8f9,#60a5fa,#c084fc,#fde047);
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 0 18px rgba(34,211,238,.55));
  animation:welcomeFlow 6s linear infinite;
  padding-bottom:8px; line-height:1.15;
}
@keyframes welcomeFlow {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

/* 确定进入按钮 */
.welcome-enter {
  padding:16px 52px; border-radius:2rem;
  background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.35); color:#fff;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:1.15rem; font-weight:800; letter-spacing:.2em;
  cursor:pointer; transition:all .35s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 0 rgba(255,255,255,0);
}
.welcome-enter:hover {
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 0 24px rgba(255,255,255,.45); border-color:rgba(255,255,255,.85);
}
.welcome-enter:active { transform:translateY(-1px) scale(.98); }

/* ── 第二阶段：加载过渡 ── */
.loading-stage {
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:#4c28d9;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .5s ease, background-color .6s ease;
}
.loading-stage.active { opacity:1; pointer-events:auto; visibility:visible; }
.loading-goo-defs { position:absolute; width:0; height:0; pointer-events:none; }

.loading-dots {
  position:relative; width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
  filter:url(#goo);
}
.loading-stage.phase-rotating .loading-dots,
.loading-stage.phase-merging  .loading-dots { animation:dotSpin 1.6s ease-in; }
@keyframes dotSpin { from{transform:rotate(0)} to{transform:rotate(720deg)} }
.loading-dot {
  position:absolute; width:24px; height:24px; border-radius:50%; background:#fff;
  transition:transform .4s ease-in-out;
}
.loading-stage.phase-rotating .loading-dot:first-child { transform:translateY(-25px); }
.loading-stage.phase-rotating .loading-dot:last-child  { transform:translateY(25px); }
.loading-stage.phase-merging  .loading-dot { transform:translateY(0) scale(1.5) !important; }

.loading-star {
  position:absolute; width:84px; height:84px; opacity:0;
  transform:scale(.2) rotate(-45deg);
  transition:all .4s cubic-bezier(.34,1.56,.64,1);
}
.loading-star svg { width:100%; height:100%; display:block; fill:#fff; }
.loading-stage.phase-star   .loading-star,
.loading-stage.phase-flying .loading-star { opacity:1; transform:scale(1) rotate(0); }
.loading-stage.phase-rotating .loading-star,
.loading-stage.phase-merging  .loading-star { display:none; }

/* 飞行星（JS 克隆到 body 层） */
.loading-fly-star {
  position:fixed; z-index:95; width:84px; height:84px; opacity:0; pointer-events:none;
  transform:translate(-50%,-50%) scale(.4) rotate(-45deg);
  transition:transform .85s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
}
.loading-fly-star svg { width:100%; height:100%; fill:#0f172a; display:block; }

/* ── 第三阶段：小怪兽登录界面 ── */
.monster-login {
  position:fixed; inset:0; z-index:80;
  display:flex; opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .5s ease;
  padding:0;
}
.monster-login.active { opacity:1; pointer-events:auto; visibility:visible; }

.monster-scene {
  flex:1 1 50%; position:relative; overflow:hidden;
  background:#e5e7eb;
  display:flex; align-items:flex-end; justify-content:center;
}
.monster-canvas {
  position:relative; width:340px; height:340px; bottom:0;
  transform-origin:bottom; transform:scale(.95);
}
@media (max-width:880px){ .monster-scene{ display:none; } }

/* 身体：用 CSS 变量组合变换，JS 只改 --bx，状态类改 --by/--br/--bsx/--bsy，互不覆盖 */
.monster {
  position:absolute; bottom:0; transform-origin:bottom;
  --bx:0px; --by:0px; --br:0deg; --bsx:1; --bsy:1;
  transform: translateX(var(--bx)) translateY(var(--by)) rotate(var(--br)) scaleX(var(--bsx)) scaleY(var(--bsy));
  will-change:transform;
}
.monster-body-svg { position:absolute; bottom:0; left:0; width:100%; height:100%; overflow:visible; }
.monster-shape { transition: d .4s cubic-bezier(.34,1.3,.64,1); }

/* 紫色高个 */
.monster-purple { left:55px; width:130px; height:260px; z-index:10; }
/* 黑色高个 - 直角顶（原图 SVG 平顶，无圆角） */
.monster-black { left:135px; width:80px; height:210px; z-index:30; }
/* 黄色圆头 */
.monster-yellow { left:205px; width:95px; height:170px; z-index:40; background:#ecd842; border-radius:47.5px 47.5px 0 0; overflow:hidden; }
/* 橙色胖子 - 左移与主视觉重叠（原图 left:-90px） */
.monster-orange { left:-90px; width:240px; height:95px; z-index:50; background:#fb8b46; border-radius:120px 120px 0 0; overflow:hidden; }

/* 脸：整体随鼠标平移（CSS 变量组合，状态类可叠加 --fr 旋转） */
.monster-face {
  position:absolute; display:flex; flex-direction:column; align-items:center;
  --fx:0px; --fy:0px; --fr:0deg;
  transform: translateX(var(--fx)) translateY(var(--fy)) rotate(var(--fr));
  will-change:transform;
}
.monster-purple-face { top:14px; left:0; width:100%; }
.monster-black-face  { top:30px; left:0; width:100%; }
.monster-yellow-face { top:40px; left:24px; align-items:flex-start; }
.monster-orange-face { top:30px; left:60px; }

.eyes { display:flex; gap:8px; }
.eye { border-radius:50%; position:relative; overflow:hidden; will-change:transform; }
/* 紫/黑：白眼底 + 黑瞳（原图 w-3.5 / w-[14px] 白眼，黑瞳 6px） */
.eye-white { background:#fff; display:flex; align-items:center; justify-content:center; }
.monster-purple .eye-white, .monster-black .eye-white { width:14px; height:14px; }
/* 黄/橙：纯黑眼（原图 w-2.5 / w-3 全黑，无白底无可见瞳） */
.eye-black { background:#000; }
.monster-yellow .eye-black { width:10px; height:10px; }
.monster-orange .eye-black { width:12px; height:12px; }

.pupil {
  position:absolute; top:25%; left:25%; width:50%; height:50%; border-radius:50%;
  background:#000; will-change:transform;
  transform: translate(var(--px,0), var(--py,0));
}
.monster-purple .pupil, .monster-black .pupil { width:6px; height:6px; }
.monster-yellow .pupil, .monster-orange .pupil { width:7px; height:7px; } /* 黑上黑，视觉不可见，仅保留位移 */

.mouth { background:#000; border-radius:50%; will-change:transform,width,height; }
.monster-purple .mouth { width:12px; height:4px; border-radius:2px; margin-top:8px; }
.monster-yellow .mouth { width:56px; height:4px; border-radius:2px; margin-top:12px; transform-origin:left; }
.monster-orange .mouth { width:22px; height:12px; border-radius:0; margin-top:6px; overflow:visible; }
.monster-orange .mouth-svg { width:22px; height:12px; display:block; overflow:visible; }
.monster-orange .mouth-svg path { transition: d .3s ease; }

/* 状态：密码聚焦 → 眼睛眯起、身体压扁 */
.monster-login.state-pwfocus .eye-white { height:5px !important; }
.monster-login.state-pwfocus .eye-black { height:3px !important; }
.monster-login.state-pwfocus .monster-purple { --bsy:.9; }
.monster-login.state-pwfocus .monster-orange { --bsx:1.05; --bsy:.8; }
.monster-login.state-pwfocus .monster-yellow .mouth { width:20px; }
.monster-login.state-pwfocus .monster-orange .mouth { width:18px; }
/* 状态：邮箱聚焦 → 紫色怪兽歪头看向输入框 */
.monster-login.state-email .monster-purple { --by:-12px; --br:5deg; }
/* 状态：错误 → 眼睛朝下、紫怪低头、嘴变倒弧 */
.monster-login.state-error .pupil { transform:translateY(4px) !important; }
.monster-login.state-error .monster-purple { --bx:-20px; --br:-8deg; }
.monster-login.state-error .monster-purple-face { --fx:-60px; --fy:40px; --fr:-30deg; }
.monster-login.state-error .monster-orange .mouth { transform:scaleY(-1); }
.monster-login.state-error .monster-yellow .mouth { transform:rotate(15deg); width:30px; }

/* 入场掉落（仿 BobZhang spring drop：紫先落、橙弹入、黑/黄随后）
   用独立 translate 属性，避免与眼睛跟随的 transform(CSS 变量) 冲突 */
.monster-login.active .monster { animation:monsterDrop .9s cubic-bezier(.34,1.4,.5,1) both; }
.monster-login.active .monster-purple { animation-delay:.05s; }
.monster-login.active .monster-orange { animation-delay:.20s; }
.monster-login.active .monster-black  { animation-delay:.45s; }
.monster-login.active .monster-yellow { animation-delay:.65s; }
@keyframes monsterDrop {
  0%   { opacity:0; translate:0 -140%; }
  55%  { opacity:1; translate:0 10%; }
  78%  { opacity:1; translate:0 -4%; }
  100% { opacity:1; translate:0 0; }
}
@media (prefers-reduced-motion: reduce){
  .monster-login.active .monster { animation:none; opacity:1; translate:0 0; }
}

/* 右侧登录卡片容器 */
.monster-login-card-wrap {
  flex:1 1 50%; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,12,24,.6); /* 半透明深色，让背后流星隐约透出 */
}
@media (max-width:880px){ .monster-login-card-wrap { flex:1 1 100%; } }

.login-card {
  width:min(420px,92%); text-align:center; position:relative; z-index:1;
  padding:44px 36px 36px; max-height:calc(100dvh - 32px); overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#fff; border-radius:24px;
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  color:#0f172a;
}
@media (min-width:881px){
  .monster-login-card-wrap { align-items:center; }
}

.modal-close {
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#f1f5f9; color:#64748b; border:none; cursor:pointer;
  transition:all .2s ease;
}
.modal-close:hover { background:#e2e8f0; color:#0f172a; transform:scale(1.05); }

/* 顶部星标 Logo */
.login-logo-star {
  display:flex; justify-content:center; margin-bottom:18px; min-height:32px;
  animation:modalStarPop .5s ease .2s both;
}
.login-logo-star svg { width:32px; height:32px; fill:#0f172a; }
@keyframes modalStarPop {
  0%   { transform:scale(.3) rotate(-40deg); opacity:0; }
  60%  { transform:scale(1.25) rotate(8deg); opacity:1; }
  100% { transform:scale(1) rotate(0); opacity:1; }
}

.login-card h2 {
  font-size:1.8rem; font-weight:900; color:#0f172a; margin:0 0 6px;
}
.login-card .login-sub {
  font-size:.95rem; color:#64748b; margin:0 0 28px;
}

/* 白色卡片内的表单元素 */
.monster-login-card-wrap .login-card .input-group { margin-bottom:20px; text-align:left; }
.monster-login-card-wrap .login-card .input-label {
  display:block; font-size:.85rem; font-weight:700; color:#334155; margin:0 0 8px 4px; letter-spacing:.5px;
}
.monster-login-card-wrap .login-card .input-wrapper {
  display:flex; align-items:center; gap:10px;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px; padding:0 14px;
  transition:all .2s ease;
}
.monster-login-card-wrap .login-card .input-wrapper:focus-within {
  background:#fff; border-color:#4f46e5; box-shadow:0 0 0 4px rgba(79,70,229,.1);
}
.monster-login-card-wrap .login-card .input-icon { width:18px; height:18px; color:#94a3b8; flex-shrink:0; }
.monster-login-card-wrap .login-card input {
  flex:1; padding:14px 0; border:none; background:transparent; outline:none;
  font-size:1rem; color:#0f172a; font-weight:600;
}
.monster-login-card-wrap .login-card input::placeholder { color:#94a3b8; }
.monster-login-card-wrap .login-card .toggle-pw {
  background:transparent; border:none; color:#94a3b8; cursor:pointer; padding:6px; display:flex; flex-shrink:0;
}
.monster-login-card-wrap .login-card .toggle-pw svg { width:20px; height:20px; display:block; }
.monster-login-card-wrap .login-card .toggle-pw:hover { color:#4f46e5; }
.monster-login-card-wrap .login-card .input-hint {
  font-size:.75rem; color:#64748b; margin:6px 0 0 4px;
}
.monster-login-card-wrap .login-card .login-extras {
  display:flex; align-items:center; justify-content:space-between; margin:14px 0 22px;
  font-size:.85rem;
}
.monster-login-card-wrap .login-card .checkbox-label { display:flex; align-items:center; gap:6px; color:#475569; cursor:pointer; }
.monster-login-card-wrap .login-card .checkbox-label input { width:16px; height:16px; accent-color:#4f46e5; }
.monster-login-card-wrap .login-card .login-extras a { color:#4f46e5; text-decoration:none; font-weight:600; }
.monster-login-card-wrap .login-card .login-extras a:hover { text-decoration:underline; }

.monster-login-card-wrap .login-card .btn-login {
  width:100%; padding:16px; border-radius:16px; border:none;
  background:#0f172a; color:#fff; font-size:1.1rem; font-weight:800;
  cursor:pointer; transition:all .2s ease;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.monster-login-card-wrap .login-card .btn-login:hover:not(:disabled) {
  background:#000; transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(0,0,0,.3);
}
.monster-login-card-wrap .login-card .btn-login:disabled {
  background:#e2e8f0; color:#94a3b8; cursor:not-allowed;
}
.monster-login-card-wrap .login-card .login-error {
  color:#dc2626; font-size:.85rem; min-height:20px; margin:10px 0 0; text-align:center;
}
.monster-login-card-wrap .login-card .login-retry {
  width:100%; margin-top:8px; padding:10px; border-radius:12px; border:1px solid #e2e8f0;
  background:#fff; color:#475569; cursor:pointer; font-weight:600;
}
.monster-login-card-wrap .login-card .login-retry:hover { background:#f8fafc; }
.monster-login-card-wrap .login-card .login-footer-text {
  margin-top:24px; font-size:.9rem; color:#64748b; text-align:center;
}
.monster-login-card-wrap .login-card .login-footer-text a { color:#4f46e5; font-weight:700; text-decoration:none; }
.monster-login-card-wrap .login-card .login-footer-text a:hover { text-decoration:underline; }

/* 验证面板 */
#verify-panel { display:none; }
#verify-panel h2 { font-size:1.6rem; margin-top:8px; }
#verify-panel .login-sub { margin-bottom:22px; }

/* 登录提交加载层：全屏深色（透出流星）+ 恒星轨道校徽（GSAP） */
.login-submit-loader {
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(8,10,20,0.55);
  backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .35s ease;
}
.login-submit-loader.active { opacity:1; pointer-events:auto; visibility:visible; }

.orbit-loader {
  position:relative; width:240px; height:240px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
}
.orbit-svg {
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
  transform-origin:50% 50%;
}
.orbit-svg ellipse {
  fill:none; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:340; stroke-dashoffset:40;
  filter:drop-shadow(0 0 6px currentColor);
}
.orbit-1 { color:#6366f1; transform:rotate(0deg); }
.orbit-1 ellipse { stroke:#6366f1; opacity:.85; }
.orbit-2 { color:#22d3ee; transform:rotate(60deg); }
.orbit-2 ellipse { stroke:#22d3ee; opacity:.65; }
.orbit-3 { color:#a855f7; transform:rotate(120deg); }
.orbit-3 ellipse { stroke:#a855f7; opacity:.55; }

.orbit-badge {
  position:absolute; width:84px; height:84px; border-radius:50%; object-fit:cover;
  border:3px solid rgba(255,255,255,0.95);
  box-shadow:0 0 0 4px rgba(99,102,241,.25), 0 0 28px 8px rgba(99,102,241,.45), 0 0 60px 16px rgba(99,102,241,.2);
  left:50%; top:50%; transform:translate(-50%,-50%);
  display:block; margin:0; padding:0;
  z-index:2;
}

.submit-loader-text { font-size:1rem; color:#e2e8f0; font-weight:600; letter-spacing:1px; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.submit-loader-dots::after { content:''; animation:loaderDots 1.5s steps(4,end) infinite; }
@keyframes loaderDots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} 100%{content:''} }

/*/* ══════════════════════════════════════════════════
   3D CAROUSEL (Login)
   ══════════════════════════════════════════════════ */
.login-carousel-container {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  overflow:visible; z-index:5; perspective:1350px; pointer-events:none;
}
.login-camera { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; pointer-events:none; transform-style:preserve-3d; }
.login-3d-card { position:absolute; transform-style:preserve-3d; backface-visibility:visible; pointer-events:auto; cursor:pointer; }
.login-3d-card-layer { position:absolute; inset:0; border-radius:16px; overflow:hidden; pointer-events:none; }
.login-3d-card-front { backface-visibility:hidden; background:#0f0f0f; border:1px solid rgba(255,255,255,0.15); box-shadow:inset 0 1px 1px rgba(255,255,255,0.15); }
.login-3d-card-front img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:16px; }
.campus-overlay { position:absolute; inset:0; padding:20px; z-index:10; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.2) 40%,transparent 70%); }
.campus-card-title { font-size:1rem; font-weight:800; color:#fff; letter-spacing:2px; text-shadow:0 2px 8px rgba(0,0,0,0.5); }
.campus-card-desc { font-size:0.78rem; color:rgba(255,255,255,0.75); margin-top:4px; letter-spacing:1px; text-shadow:0 1px 4px rgba(0,0,0,0.4); }
.login-3d-card-mid { background:#808080; border:1px solid #808080; }
.login-3d-card-back { backface-visibility:hidden; background:#0f0f0f; border:1px solid rgba(255,255,255,0.15); }
.login-3d-card-back .back-campus-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(12px) brightness(0.6); transform:scale(1.1); }
.back-campus-overlay { position:absolute; inset:0; padding:20px; z-index:20; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:rgba(0,0,0,0.25); }
.back-campus-title { font-size:1.15rem; font-weight:900; color:#fff; letter-spacing:3px; text-shadow:0 2px 12px rgba(0,0,0,0.6); }
.back-campus-desc { font-size:0.82rem; color:rgba(255,255,255,0.8); margin-top:6px; letter-spacing:1.5px; text-shadow:0 1px 6px rgba(0,0,0,0.5); }


/* ═══════════════════════════════════════════════════════════════════════
   ★★★  APP SHELL — 社交信息流布局 v2 (无固定侧栏，全宽内容区)  ★★★
   ═══════════════════════════════════════════════════════════════════════ */

.app-shell {
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  position:relative;
  z-index:3;
}

/* ═══ TOP NAVIGATION BAR ═══ */
.top-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:52px;
  min-height:52px;
  padding:0 16px;
  padding-top:env(safe-area-inset-top);
  flex-shrink:0;
  background:var(--bg-surface);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  position:relative;
  z-index:10;
}
.nav-left {
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}
.hamburger-btn {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r);
  color:var(--text-sec); transition:background var(--t), color var(--t);
  flex-shrink:0;
}
.hamburger-btn:hover { background:var(--bg-hover); color:var(--text); }
.hamburger-btn:active { transform:scale(0.92); }
/* ═══ 顶部频道信息卡（方案A：主题色 + 大动态图标 + 左彩条 + 底部流光 + 渐变拖尾） ═══ */
.nav-channel-info {
  position:relative;
  display:flex; align-items:center; gap:10px;
  min-width:0;
  padding:5px 0 6px 8px;           /* 无前置校徽，紧贴左边缘 */
  border-radius:14px 0 0 14px;
  background:var(--ch-tint, rgba(124,92,252,0.06));
  border:none;                       /* 彻底去掉边框线，含底部横线 */
  overflow:visible;                  /* 允许拖尾溢出卡片边界 */
  transition:background var(--t);
}
/* 渐变拖尾（从卡片右边缘延伸到顶栏右侧） */
.nav-channel-info::after {
  content:''; position:absolute;
  top:5px; bottom:5px;               /* 比卡片略窄，优雅感 */
  left:100%;                         /* 紧贴卡片右边缘 */
  width:180px;                       /* 拖尾长度 PC端 */
  background:linear-gradient(90deg,
    var(--ch-tint, rgba(124,92,252,0.10)),
    var(--ch-tint, rgba(124,92,252,0.04)) 40%,
    transparent 85%
  );
  pointer-events:none;
  opacity:0.8;
}
/* 左侧主题彩条 */
.ch-card-bar {
  position:absolute; left:0; top:9px; bottom:9px;
  width:4px; border-radius:0 4px 4px 0;
  background:var(--ch-color, var(--accent));
}
.nav-channel-title {
  font-size:1rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.25;
}
.nav-channel-desc {
  font-size:0.8rem; color:var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.3;
}
.ch-card-text { display:flex; flex-direction:column; min-width:0; }
/* 📢 公告栏 — 喇叭 + 声波 + 星 */
.hi-notice .hn-horn {
  left:4px; top:11px; width:16px; height:12px;
  background:var(--warning, #f59e0b);
  clip-path:polygon(0% 22%, 58% 0%, 58% 100%, 0% 78%);
  border-radius:2px;
  transform-origin:left center;
  animation:hero-notice-horn 2s ease-in-out infinite;
}
.hi-notice .hn-wave {
  right:5px; top:50%; border:2px solid var(--warning, #f59e0b);
  border-left:none; border-radius:0 14px 14px 0; opacity:0;
  animation:hero-notice-wave 2s ease-out infinite;
}
.hi-notice .hn-wave.w1 { width:5px; height:12px; margin-top:-6px; animation-delay:0s; }
.hi-notice .hn-wave.w2 { width:9px; height:20px; margin-top:-10px; animation-delay:0.35s; }
.hi-notice .hn-star {
  left:2px; top:2px; width:6px; height:6px;
  background:radial-gradient(circle,#fff 0%,var(--warning,#f59e0b) 70%,transparent 72%);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  animation:hero-twinkle 1.6s ease-in-out infinite;
}
@keyframes hero-notice-horn { 0%,100%{transform:scaleX(1);} 50%{transform:scaleX(1.12);} }
@keyframes hero-notice-wave { 0%{opacity:0;transform:scaleX(0.5);} 30%{opacity:0.9;} 100%{opacity:0;transform:scaleX(1.3);} }

/* 💬 综合大厅 — 双气泡 + 三点 */
.hi-chat .hc-bubble { background:var(--accent, #7c5cfc); }
.hi-chat .hc-bubble.b1 {
  left:2px; top:6px; width:22px; height:17px; border-radius:9px 9px 9px 3px;
  animation:hero-chat-float 2.2s ease-in-out infinite;
}
.hi-chat .hc-bubble.b2 {
  right:2px; bottom:3px; width:14px; height:11px; border-radius:7px 7px 3px 7px;
  opacity:0.75; background:var(--pink, #ff6b8a);
  animation:hero-chat-float 2.2s ease-in-out infinite 0.5s;
}
.hi-chat .hc-dots {
  left:7px; top:12px; width:12px; height:3px;
  background:
    radial-gradient(circle 1.5px at 1.5px 1.5px,#fff 100%,transparent) 0 0/5px 3px repeat-x;
  animation:hero-chat-dots 1.4s ease-in-out infinite;
}
@keyframes hero-chat-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
@keyframes hero-chat-dots { 0%,100%{opacity:0.4;} 50%{opacity:1;} }

/* 📖 学习园地 — 书本 + 书脊 + 翻页 + 笔尖 */
.hi-book .hb-cover {
  left:5px; top:5px; width:22px; height:26px; border-radius:2px 6px 6px 2px;
  background:linear-gradient(135deg,#60a5fa,#2563eb);
  box-shadow:inset -4px 0 6px rgba(0,0,0,0.18);
  transform-origin:left center;
  animation:hero-book-tilt 3.4s ease-in-out infinite;
}
.hi-book .hb-spine { left:5px; top:5px; width:3px; height:26px; background:#1e40af; border-radius:2px 0 0 2px; }
.hi-book .hb-page {
  left:14px; top:8px; width:12px; height:20px; background:#eef4ff; border-radius:1px 3px 3px 1px;
  transform-origin:left center;
  animation:hero-book-page 3.4s ease-in-out infinite;
}
.hi-book .hb-pen {
  right:1px; top:0; width:4px; height:16px; border-radius:2px;
  background:linear-gradient(#fbbf24,#f59e0b);
  transform:rotate(38deg);
  animation:hero-twinkle 2.2s ease-in-out infinite;
}
@keyframes hero-book-tilt { 0%,100%{transform:rotateY(0);} 50%{transform:rotateY(-16deg);} }
@keyframes hero-book-page { 0%,60%,100%{transform:rotateY(0);opacity:1;} 30%{transform:rotateY(-52deg);opacity:0.85;} }

/* 🌿 生活日常 — 心跳 + 脉冲环 + 叶 */
.hi-life .hl-heart {
  left:9px; top:10px; width:16px; height:14px;
  background:linear-gradient(135deg,#4ade80,#22c55e);
  clip-path:path('M8 14 L1 6.5 A4 4 0 0 1 8 3 A4 4 0 0 1 15 6.5 Z');
  animation:hero-life-beat 1.5s ease-in-out infinite;
}
.hi-life .hl-ring {
  left:50%; top:50%; border:1.5px solid var(--green, #22c55e); border-radius:50%; opacity:0;
  animation:hero-life-ring 1.8s ease-out infinite;
}
.hi-life .hl-ring.r1 { width:26px; height:26px; margin:-13px 0 0 -13px; }
.hi-life .hl-ring.r2 { width:26px; height:26px; margin:-13px 0 0 -13px; animation-delay:0.6s; }
.hi-life .hl-leaf {
  right:3px; top:3px; width:8px; height:8px; background:#86efac;
  border-radius:0 100% 0 100%; transform:rotate(20deg);
  animation:hero-twinkle 2s ease-in-out infinite;
}
@keyframes hero-life-beat { 0%,100%{transform:scale(1);} 15%{transform:scale(1.18);} 30%{transform:scale(0.96);} 45%{transform:scale(1.08);} 60%{transform:scale(1);} }
@keyframes hero-life-ring { 0%{opacity:0.7;transform:scale(0.4);} 100%{opacity:0;transform:scale(1.15);} }

/* ✨ 二次元世界 — 大星旋转 + 环 + 小星 */
.hi-anime .ha-star {
  background:radial-gradient(circle at 50% 40%,#fff 0%,#ffd32a 35%,#f59e0b 65%,transparent 70%);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.hi-anime .ha-star.big {
  left:7px; top:7px; width:20px; height:20px;
  animation:hero-anime-spin 5s linear infinite, hero-twinkle 1.3s ease-in-out infinite;
}
.hi-anime .ha-star.s1 { right:2px; top:3px; width:9px; height:9px; animation:hero-twinkle 1.5s ease-in-out infinite; }
.hi-anime .ha-star.s2 { left:2px; bottom:2px; width:7px; height:7px; background:radial-gradient(circle,#fff,#ff6b9d 60%,transparent 70%); animation:hero-twinkle 1.8s ease-in-out infinite 0.4s; }
.hi-anime .ha-ring {
  left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent, rgba(255,211,42,0.3), transparent, rgba(236,72,153,0.25), transparent);
  animation:hero-anime-spin 4s linear infinite reverse;
}
@keyframes hero-anime-spin { to{transform:rotate(360deg);} }
@keyframes hero-twinkle { 0%,100%{filter:brightness(1);transform:scale(1);} 50%{filter:brightness(1.4);transform:scale(1.12);} }

/* ── 频道主题变量（作用于整卡）── */
.nav-channel-info[data-ch="notice"], .welcome-card[data-ch="notice"] { --ch-color:#f59e0b; --ch-glow:rgba(245,158,11,0.55); --ch-tint:rgba(245,158,11,0.08); --ch-line:rgba(245,158,11,0.18); }
.nav-channel-info[data-ch="chat"],   .welcome-card[data-ch="chat"]   { --ch-color:#7c5cfc; --ch-glow:rgba(124,92,252,0.55); --ch-tint:rgba(124,92,252,0.08); --ch-line:rgba(124,92,252,0.18); }
.nav-channel-info[data-ch="book"],   .welcome-card[data-ch="book"]   { --ch-color:#3b82f6; --ch-glow:rgba(59,130,246,0.55); --ch-tint:rgba(59,130,246,0.08); --ch-line:rgba(59,130,246,0.18); }
.nav-channel-info[data-ch="life"],   .welcome-card[data-ch="life"]   { --ch-color:#22c55e; --ch-glow:rgba(34,197,94,0.55);  --ch-tint:rgba(34,197,94,0.08);  --ch-line:rgba(34,197,94,0.18); }
.nav-channel-info[data-ch="anime"],  .welcome-card[data-ch="anime"]  { --ch-color:#ec4899; --ch-glow:rgba(236,72,153,0.55); --ch-tint:rgba(236,72,153,0.08); --ch-line:rgba(236,72,153,0.18); }

@media (prefers-reduced-motion: reduce) {
  /* ch-card-icon 已移除 */
}
.nav-right {
  display:flex; align-items:center; gap:4px; flex-shrink:0;
}
.nav-icon-btn {
  width:38px; height:38px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); transition:background var(--t), color var(--t);
}
.nav-icon-btn:hover { background:var(--bg-hover); color:var(--text); }
#btn-compose.compose-active {
  color: var(--accent);
  background: rgba(124,92,252,0.12);
}
#btn-compose:hover { background: rgba(124,92,252,0.15); color: var(--accent-light); }
.nav-avatar-btn {
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t);
  border:2px solid transparent; padding:0;
  background:var(--bg-surface); color:var(--text-sec);
  cursor:pointer;
}
.nav-avatar-btn:hover { border-color:var(--border-active); background:var(--bg-hover); color:var(--text); transform:scale(1.08); }
.nav-menu-icon { display:block; }
.nav-avatar {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; font-weight:700; color:#fff;
  overflow:hidden;
}
.nav-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ═══ CHANNEL DRAWER (hamburger → slide-in) ═══ */
.channel-drawer {
  position:fixed;
  top:0; left:0; bottom:0;
  width:280px;
  background:var(--bg-surface);
  border-right:1px solid var(--border);
  box-shadow:4px 0 32px rgba(0,0,0,0.45);
  z-index:500;
  transform:translateX(-100%);
  /* 显隐改由 CSS class + transition 驱动，不再依赖 GSAP inline transform，
     避免 GSAP 未加载/动画未跑完时抽屉卡在 -100% 看不见 */
  transition:transform .34s cubic-bezier(.16,1,.3,1);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  will-change:transform;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.channel-drawer.open { transform:translateX(0); }
.drawer-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:499;
  opacity:0; visibility:hidden;
  pointer-events:none;
}
.drawer-overlay.active {
  opacity:1; visibility:visible; pointer-events:auto;
}
.drawer-header {
  padding:14px 16px; flex-shrink:0;
}
.drawer-server {
  display:flex; align-items:center; gap:18px;
  flex-shrink:0;
}
.drawer-server-icon {
  width:96px; height:96px; border-radius:var(--r-md); object-fit:cover;
  flex-shrink:0;
}
.drawer-server-name {
  font-size:1.78rem; font-weight:700; color:var(--text);
  white-space: nowrap;
}
.drawer-divider {
  height:1px; background:var(--border); flex-shrink:0;
}
.drawer-channels {
  flex:1; overflow-y:auto; padding:8px 6px;
  scrollbar-width:thin; scrollbar-color:var(--bg-hover) transparent;
}
.drawer-user {
  padding:10px 12px;
  display:flex; align-items:center; gap:10px;
  border-top:1px solid var(--border);
  background:var(--bg-deeper);
  flex-shrink:0;
}
.drawer-user-avatar {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.82rem; font-weight:700; color:#fff; flex-shrink:0;
  overflow:hidden;
}
.drawer-user-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.drawer-user-info { flex:1; min-width:0; }
.drawer-user-name { font-size:0.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.drawer-user-tag { font-size:0.74rem; color:var(--text-dim); display:flex; align-items:center; gap:4px; }

/* Drawer bottom: settings + logout action buttons */
.drawer-user-actions {
  display:flex; align-items:center; gap:4px;
  flex-shrink:0; margin-left:auto;
}
.drawer-settings-btn, .drawer-logout-btn {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); transition:background var(--t), color var(--t), transform var(--t);
  position:relative; overflow:hidden;
}
.drawer-settings-btn:hover { background:rgba(100,140,255,0.12); color:#6ca3ff; }
.drawer-logout-btn:hover { background:rgba(255,90,80,0.1); color:#ff645a; }
.drawer-logout-btn:active { transform:scale(0.9); }
/* GSAP logout ripple ring */
.drawer-logout-btn::after {
  content:''; position:absolute; inset:2px; border-radius:7px;
  border:1.5px solid transparent; opacity:0;
  transition:border-color 0.3s, opacity 0.3s;
}
.drawer-logout-btn:hover::after { border-color:rgba(255,100,90,0.35); opacity:1; }

/* Channel items in drawer (reuse existing .ch-item styles) */
.ch-category { margin-bottom:2px; }
.ch-category-title {
  display:flex; align-items:center; gap:2px;
  padding:8px 8px 5px; font-size:1.02rem; font-weight:800;
  color:var(--text-sec); text-transform:uppercase; letter-spacing:0.5px;
  cursor:pointer; transition:color var(--t); user-select:none;
}
.ch-category-title:hover { color:var(--text-sec); }
.ch-category-title svg { width:10px; height:10px; transition:transform 0.2s ease; flex-shrink:0; }
.ch-category-title.collapsed svg { transform:rotate(-90deg); }
.ch-item {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:var(--r);
  cursor:pointer; transition:background var(--t), color var(--t);
  font-size:1.08rem; color:var(--text-dim);
  margin:1px 0;
}
.ch-item:hover { background:var(--bg-hover); color:var(--text-sec); }
.ch-item.active { background:var(--bg-active); color:var(--text); }
/* ═══ 频道动态图标（纯 CSS keyframe 循环动画） ═══ */
.ch-icon { position:relative; flex-shrink:0; width:24px; height:24px; display:flex; align-items:center; justify-content:center; }
.ch-icon::before { content:''; display:block; }

/* 📢 公告栏 — 喇叭声波扩散（清晰可见的喇叭形状） */
.ch-icon-notice {
  position:relative;
}
.ch-icon-notice::before {
  content:'';
  width:14px; height:11px;
  background:var(--warning);
  border-radius:3px 7px 7px 2px;
  clip-path:polygon(0% 20%, 55% 0%, 55% 100%, 0% 80%);
  animation: notice-pulse 1.8s ease-in-out infinite;
  box-shadow:0 0 5px rgba(251,191,36,0.4);
}
.ch-icon-notice::after {
  content:'';
  position:absolute; right:-3px; top:50%; margin-top:-6px;
  width:8px; height:12px;
  border-left:3.5px solid var(--warning);
  border-radius:0 10px 10px 0;
  opacity:0.9;
  animation: notice-wave 1.8s ease-in-out infinite;
}
@keyframes notice-pulse {
  0%,100% { transform:scaleX(1); filter:brightness(1); }
  50%      { transform:scaleX(1.15); filter:brightness(1.35); }
}
@keyframes notice-wave {
  0%,100% { opacity:0.85; transform:scaleX(1) translateX(0); }
  50%      { opacity:1;   transform:scaleX(1.15) translateX(1px); }
}

/* 💬 综合大厅 — 气泡浮动 */
.ch-icon-chat::before {
  width:15px; height:13px; border-radius:7px 9px 9px 4px;
  background:var(--accent);
  animation: chat-float 2s ease-in-out infinite;
  position:relative;
}
.ch-icon-chat::after {
  content:''; position:absolute; left:3px; bottom:1px;
  width:5px; height:3px; border-radius:0 0 3px 0;
  background:var(--accent);
  clip-path:polygon(0 0,100% 0,0 100%);
  animation: chat-tail 2s ease-in-out infinite;
}
@keyframes chat-float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-2.5px); }
}
@keyframes chat-tail {
  0%,100% { opacity:0.75; }
  50%      { opacity:1; }
}

/* 📖 学习园地 — 书本翻页 */
.ch-icon-book::before {
  width:14px; height:17px; border-radius:1px 6px 6px 1px;
  background:linear-gradient(135deg, #60a5fa 0%, #3b82f6 40%, #2563eb 100%);
  animation: book-flip 3s ease-in-out infinite;
  box-shadow:1px 1px 4px rgba(59,130,246,0.35), inset -3px 0 5px rgba(0,0,0,0.12);
}
.ch-icon-book::after {
  content:''; position:absolute; left:50%; top:3px; margin-left:-2px;
  width:4px; height:11px; background:rgba(255,255,255,0.25); border-radius:1px;
}
@keyframes book-flip {
  0%,55%,100% { transform:rotateY(0deg) scaleX(1); }
  10%,45%     { transform:rotateY(-18deg) scaleX(0.92); }
  27%         { transform:rotateY(12deg) scaleX(0.97); }
}

/* 🌿 生活日常 — 心跳/脉冲绿光 */
.ch-icon-life::before {
  width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #86efac 0%, #22c55e 50%, #16a34a 100%);
  box-shadow:0 0 6px rgba(34,197,94,0.4);
  animation: life-beat 1.5s ease-in-out infinite;
}
.ch-icon-life::after {
  content:'\2727'; position:absolute; font-size:9px; color:#22c55e;
  top:50%; left:50%; transform:translate(-50%,-50%);
  text-shadow:0 0 4px rgba(34,197,94,0.6);
  animation: life-spark 1.5s ease-in-out infinite;
}
@keyframes life-beat {
  0%,100% { transform:scale(1); }
  14%     { transform:scale(1.18); box-shadow:0 0 12px rgba(34,197,94,0.55); }
  28%     { transform:scale(0.95); }
  42%     { transform:scale(1.06); }
  56%     { transform:scale(1); }
}
@keyframes life-spark {
  0%,100% { opacity:0.5; transform:translate(-50%,-50%) scale(1); }
  14%     { opacity:1;   transform:translate(-50%,-50%) scale(1.3); }
  56%     { opacity:0.5; }
}

/* ✨ 二次元世界 — 星星旋转闪烁 */
.ch-icon-anime::before {
  width:16px; height:16px;
  background:radial-gradient(circle at 50% 35%, #fff 0%, #ffd32a 30%, #f59e0b 60%, rgba(245,158,11,0) 70%);
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: anime-spin 4s linear infinite, anime-twinkle 1.2s ease-in-out infinite;
}
.ch-icon-anime::after {
  content:''; position:absolute; inset:-2px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent, rgba(255,211,42,0.25), transparent, rgba(236,72,153,0.2), transparent);
  animation: anime-ring 3s linear infinite;
  border-radius:50%;
}
@keyframes anime-spin {
  to { transform:rotate(360deg); }
}
@keyframes anime-twinkle {
  0%,100% { filter:brightness(1) drop-shadow(0 0 2px rgba(255,211,42,0.5)); }
  50%      { filter:brightness(1.3) drop-shadow(0 0 6px rgba(255,211,42,0.8)); }
}
@keyframes anime-ring {
  to { transform:rotate(360deg); }
}

/* 图标状态适配 */
.ch-item .ch-icon { opacity:0.72; transition:opacity var(--t); }
.ch-item:hover .ch-icon { opacity:0.9; }
.ch-item.active .ch-icon { opacity:1; }
.ch-notice .ch-icon-notice::before { background:
  radial-gradient(ellipse 6px 4px at 30% 50%, var(--warning) 0 98%, transparent); }
.ch-notice .ch-icon-notice::after { border-color:var(--warning); }
.ch-item .ch-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 公告频道 — 单条直显（无折叠） */
.ch-notice {
  background: linear-gradient(135deg, rgba(251,191,36,0.06), rgba(245,158,11,0.03));
  border:1px solid rgba(251,191,36,0.12);
}
.ch-notice:hover { background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.06)); }
.ch-notice.active {
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.10));
  color: var(--text); font-weight:600;
  border-color: rgba(251,191,36,0.3);
}

/* 二次元频道星星闪烁 */
.ch-star-spark { animation:none; /* GSAP controls this */ }
.ch-badge {
  margin-left:auto; background:var(--red); color:#fff;
  font-size:0.70rem; font-weight:700; padding:1px 6px; border-radius:8px; min-width:18px; text-align:center;
}
.ch-unread-dot {
  display:none; position:absolute; left:-4px; top:50%; transform:translateY(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--accent);
}

/* ═══ AVATAR POPUP (replaces right panel) ═══ */
.avatar-popup-overlay {
  position:fixed; inset:0; z-index:598;
  opacity:0; visibility:hidden; pointer-events:none;
  background:rgba(0,0,0,0.25);
  transition:opacity 0.2s ease, visibility 0.2s;
}
.avatar-popup-overlay.active { opacity:1; visibility:visible; pointer-events:auto; }
.avatar-popup {
  position:fixed;
  top:0; right:0; bottom:0;
  width:320px;
  max-width:86vw;
  background:var(--bg-surface);
  border-left:1px solid var(--border);
  box-shadow:-4px 0 32px rgba(0,0,0,0.4);
  z-index:599;
  transform:translateX(100%);
  display:flex; flex-direction:column;
  overflow:hidden;
  will-change:transform;
}
.avatar-popup.open { transform:translateX(0); }
.popup-handle {
  width:100%; height:4px;
  background:var(--border-light); border-radius:2px;
  margin:8px auto 0; flex-shrink:0;
  display:none; /* only on mobile */
}
.popup-scroll {
  flex:1; overflow-y:auto;
  padding:16px 14px calc(16px + env(safe-area-inset-bottom));
  scrollbar-width:thin; scrollbar-color:var(--bg-hover) transparent;
  display:flex; flex-direction:column; gap:20px;
}
.popup-section { }
.popup-title {
  font-size:0.72rem; font-weight:700; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:0.6px;
  margin-bottom:10px; display:flex; align-items:center; gap:8px;
}

/* 桌面端 avatar popup 不显示热门话题（在右侧边栏）；移动端改显示 */
#popup-hot-topics { display:none; }
@media (max-width: 900px) {
  #popup-hot-topics { display:block; }
  /* 移动端 popup 里热门话题卡片占满宽度 */
  #hot-topics-mobile .hot-card { padding:12px 10px; }
}

/* Member roles in popup */
.role-section { margin-bottom:8px; }
.role-header {
  font-size:0.78rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.5px;
  margin-bottom:4px; display:flex; align-items:center; gap:6px;
}
.role-header .role-count { font-size:0.65rem; color:var(--text-muted); font-weight:400; }
.member-list { display:flex; flex-direction:column; gap:1px; }
.member-item {
  display:flex; align-items:center; gap:10px;
  padding:7px 8px; border-radius:var(--r);
  cursor:pointer; transition:background var(--t);
}
.member-item:hover { background:var(--bg-hover); }
.member-avatar {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:700; color:#fff; flex-shrink:0;
  overflow:hidden;
}
.member-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.member-info { flex:1; min-width:0; }
.member-name { font-size:0.96rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-role { font-size:0.76rem; color:var(--text-dim); margin-top:1px; }
.status-dot.online { background:var(--green); }
.status-dot.idle { background:var(--yellow); }
.status-dot.offline { background:var(--text-muted); }

/* Role badges & title badge */
.role-badge {
  display:inline-block; padding:0 5px; border-radius:4px;
  font-size:0.66rem; font-weight:600;
}
.role-badge.admin { background:rgba(237,66,69,0.2); color:var(--red); }
.role-badge.moderator { background:rgba(88,101,242,0.2); color:var(--blue); }
.role-badge.member { background:rgba(35,165,89,0.2); color:var(--green); }
.title-badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 8px; border-radius:10px;
  font-size:0.68rem; font-weight:600;
  background:linear-gradient(135deg, rgba(124,92,252,0.18), rgba(255,107,138,0.12));
  color:var(--accent-light); border:1px solid rgba(124,92,252,0.15);
}
.title-badge::before { content:'✦'; font-size:0.6rem; }

/* Quick actions in popup */
.quick-actions { display:flex; flex-direction:column; gap:4px; }
.quick-action {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--r);
  font-size:0.85rem; color:var(--text-dim);
  cursor:pointer; transition:all var(--t);
  background:none; border:none; text-align:left;
}
.quick-action:hover { background:var(--bg-hover); color:var(--text-sec); }
.quick-action .qa-icon { width:20px; text-align:center; font-size:1rem; }

/* Background theme picker */
.bg-themes {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
}
@media (max-width:768px) {
  .bg-themes { gap:10px; }
}
.bg-theme {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:0; background:none; border:none; cursor:pointer;
  color:var(--text-dim); transition:transform var(--t), color var(--t);
}
.bg-theme:hover { transform:translateY(-2px); color:var(--text-sec); }
.bg-theme.active { color:var(--text); }
.bg-theme-preview {
  width:100%; aspect-ratio:1/1; border-radius:var(--r-md);
  border:2px solid transparent; position:relative; overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
.settings-panel .bg-theme-preview { aspect-ratio:16/10; border-radius:var(--r-lg); }
@media (max-width:768px) {
  .settings-panel .bg-theme-preview { aspect-ratio:1/1; border-radius:var(--r-md); }
}
.bg-theme:hover .bg-theme-preview { box-shadow:0 6px 18px rgba(0,0,0,0.35); }
.bg-theme.active .bg-theme-preview { border-color:var(--accent-light); box-shadow:0 0 0 2px var(--accent-soft), 0 6px 18px rgba(0,0,0,0.35); }
.bg-theme-preview.light {
  background:
    radial-gradient(ellipse 80% 60% at 50% 18%, rgba(124,92,252,0.28), transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 80%, rgba(0,180,216,0.18), transparent 50%),
    linear-gradient(180deg, #f7f8fb, #e4e7ec);
  border: 1px solid rgba(20,24,40,0.10);
}
.bg-theme-preview.classroom {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M15 22c-2.5-4-1-9 3-11.5 4-2.5 9-1 11.5 3 2.5 4 1 9-3 11.5-4 2.5-9 1-11.5-3z' fill='%2316a34a' fill-opacity='0.30'/%3E%3Ccircle cx='47' cy='42' r='1' fill='%2316a34a' fill-opacity='0.45'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 55% at 30% 25%, rgba(74,222,128,0.65), transparent 55%),
    radial-gradient(ellipse 70% 45% at 80% 20%, rgba(45,212,191,0.5), transparent 50%),
    linear-gradient(180deg, #d1f0db, #b3e4c4);
  border: 1px solid rgba(10,51,36,0.12);
}
.bg-theme-preview.custom {
  background:var(--bg-hover);
  display:flex; align-items:center; justify-content:center;
}
.bg-theme-preview.starry {
  background:
    radial-gradient(circle at 28% 30%, #ffffff 0 1.2px, transparent 2px),
    radial-gradient(circle at 62% 52%, #ffffff 0 1px, transparent 2px),
    radial-gradient(circle at 78% 38%, #cfe6ff 0 1.2px, transparent 2px),
    radial-gradient(circle at 45% 72%, #ffffff 0 1px, transparent 2px),
    radial-gradient(ellipse 90% 60% at 70% 18%, rgba(34,211,238,0.55) 0%, transparent 55%),
    linear-gradient(135deg, #05081a, #0b1438);
}
.bg-upload-icon {
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.12); color:var(--text-sec);
  font-size:1rem; font-weight:500;
}
.bg-theme-name { font-size:0.72rem; font-weight:500; }

.bg-sliders {
  display:flex; flex-direction:column; gap:10px;
  padding:12px; border-radius:var(--r);
  background:rgba(0,0,0,0.18); border:1px solid var(--border);
}
.bg-slider-row {
  display:flex; align-items:center; gap:10px;
  font-size:0.78rem; color:var(--text-sec);
}
.bg-slider-row span { width:32px; flex-shrink:0; }
.bg-slider-row input[type="range"] {
  flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px;
  background:var(--bg-hover); outline:none;
}
.bg-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent-light); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.bg-slider-row input[type="range"]::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%; border:none;
  background:var(--accent-light); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.bg-reset {
  margin-top:10px; width:100%; padding:8px; border-radius:var(--r);
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  color:var(--text-dim); font-size:0.8rem; cursor:pointer; transition:all var(--t);
}
.bg-reset:hover { background:var(--bg-hover); color:var(--text-sec); }

/* ══════════════════════════════════════════════════
   SETTINGS PANEL (slide-in from right)
   ══════════════════════════════════════════════════ */
.settings-overlay {
  position:fixed; inset:0; z-index:599;
  opacity:0; visibility:hidden; pointer-events:none;
  background:rgba(0,0,0,0.3);
  transition:opacity 0.25s ease, visibility 0.25s;
}
.settings-overlay.active { opacity:1; visibility:visible; pointer-events:auto; }
.settings-panel {
  position:fixed; inset:0;
  width:100vw; max-width:100vw; height:100vh; height:100dvh;
  background:rgba(16, 18, 26, 0.55);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border-left:none;
  box-shadow:none;
  transform:translateX(100%); display:flex; flex-direction:column;
  overflow:hidden; will-change:transform; z-index:600;
}
.settings-panel.open { transform:translateX(0); }
.settings-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 12px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.settings-title {
  font-size:1.06rem; font-weight:700; color:var(text); letter-spacing:0.3px;
}
.settings-close-btn { color:var(--text-dim); }
.settings-close-btn:hover { color:#ff6b6b; background:rgba(255,90,80,0.08); }
.settings-body {
  flex:1; overflow-y:auto;
  width:100%; max-width:none; margin:0 auto;
  padding:16px 32px 64px;
  scrollbar-width:thin; scrollbar-color:var(--bg-hover) transparent;
  overscroll-behavior:contain;
}
@media (max-width:768px) {
  .settings-body { padding:8px 16px 48px; }
}
.settings-body::-webkit-scrollbar { width:6px; }
.settings-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:4px; }

/* Settings section cards */
.settings-section {
  margin-bottom:8px;
}
.settings-section-header {
  display:flex; align-items:center; gap:8px;
  padding:10px 2px 6px;
}
.settings-section-icon { font-size:1rem; flex-shrink:0; }
.settings-section-title {
  font-size:0.82rem; font-weight:700; color:var(--text-sec);
  text-transform:uppercase; letter-spacing:0.5px;
}
.settings-group {
  padding:16px 18px; border-radius:var(--r-md);
  background:rgba(20, 22, 30, 0.55); border:1px solid rgba(255,255,255,0.08);
}
@media (max-width:768px) {
  .settings-group { padding:12px 14px; }
}
.settings-label {
  display:block; font-size:0.78rem; font-weight:600; color:var(--text-dim);
  margin-bottom:10px;
}

/* Placeholder for future settings */
.settings-row-placeholder {
  padding:20px 0; text-align:center;
}
.placeholder-text {
  font-size:0.82rem; color:var(--text-dim);
  opacity:0.5; font-style:italic;
}

/* Settings info rows (About section) */
.settings-info-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.settings-info-row:last-child { border-bottom:none; }
.settings-info-label { font-size:0.84rem; color:var(--text-dim); }
.settings-info-value { font-size:0.82rem; color:var(--text-sec); font-weight:600; font-family:'SF Mono',Consolas,monospace; }

/* Icon button base */
.icon-btn {
  width:36px; height:36px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); transition:background var(--t), color var(--t);
  background:none; border:none; cursor:pointer;
}
.icon-btn:hover { background:var(--bg-hover); color:var(--text); }
.icon-btn:active { transform:scale(0.92); transition:transform 0.05s ease; }
.icon-btn:disabled { opacity:0.45; cursor:not-allowed; }
.send-btn, .attach-btn, .emoji-btn { width:40px; height:40px; }
.send-btn { color:var(--accent-light) !important; }
.send-btn:hover { color:var(--accent) !important; }

/* Notification bell (reused from nav) */
.notify-wrap { position:relative; }
.notify-badge {
  position:absolute; top:-2px; right:-4px;
  min-width:16px; height:16px; background:var(--red); color:#fff;
  font-size:0.65rem; font-weight:700; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 4px; line-height:1;
  pointer-events:none;
}
.notify-dropdown {
  position:absolute; top:calc(100% + 8px); right:0; width:320px; max-height:400px;
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:0 8px 32px rgba(0,0,0,0.4);
  z-index:100; overflow:hidden; display:flex; flex-direction:column;
}
.notify-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border);
  font-weight:700; font-size:0.92rem;
}
.notify-mark-all {
  background:none; border:none; color:var(--text-link); font-size:0.78rem; cursor:pointer;
}
.notify-mark-all:hover { text-decoration:underline; }
.notify-list { flex:1; overflow-y:auto; padding:4px 0; }
.notify-item {
  display:flex; gap:10px; padding:10px 16px; cursor:pointer; transition:background var(--t);
  border-left:3px solid transparent;
}
.notify-item:hover { background:var(--bg-hover); }
.notify-item.unread { background:var(--accent-soft); border-left-color:var(--accent); }
.notify-item .notify-icon { font-size:1.2rem; flex-shrink:0; margin-top:2px; }
.notify-item .notify-body { flex:1; min-width:0; }
.notify-item .notify-title { font-size:0.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notify-item .notify-preview { font-size:0.78rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.notify-empty { padding:32px 16px; text-align:center; color:var(--text-muted); font-size:0.85rem; }
.notify-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.notify-btn { padding:5px 11px; border-radius:var(--r); border:none; font-size:0.75rem; font-weight:600; cursor:pointer; transition:opacity var(--t), background var(--t); }
.notify-btn:disabled { opacity:0.55; cursor:default; }
.notify-accept { background:var(--accent); color:#fff; }
.notify-accept:hover:not(:disabled) { filter:brightness(0.9); }
.notify-reject { background:var(--bg-hover); color:var(--text); border:1px solid var(--border); }
.notify-reject:hover:not(:disabled) { background:var(--bg-pressed); }
.notify-status { font-size:0.75rem; color:var(--text-muted); }

/* Notify tabs（通知 / 好友 切换） */
.notify-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.notify-tab {
  flex:1; padding:10px 8px; background:none; border:none; cursor:pointer;
  color:var(--text-dim); font-size:0.85rem; font-weight:600; position:relative;
  transition:color var(--t);
}
.notify-tab:hover { color:var(--text); }
.notify-tab.active { color:var(--text); }
.notify-tab.active::after {
  content:''; position:absolute; left:14px; right:14px; bottom:-1px; height:2px;
  background:var(--accent); border-radius:2px;
}
.notify-tab-panel { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }

/* Friends Tab 内容 */
.friends-box { display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; padding:4px 0; }
.friends-head {
  padding:10px 16px 4px; font-size:0.72rem; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--text-muted);
}
.friend-item { display:flex; align-items:center; gap:10px; padding:8px 16px; }
.friend-avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:0.78rem; font-weight:700; background:var(--accent);
}
.friend-avatar img { width:100%; height:100%; object-fit:cover; }
.friend-name { flex:1; min-width:0; font-size:0.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.friend-actions { display:flex; gap:6px; flex-shrink:0; }
.friend-btn {
  border:1px solid var(--border); background:var(--bg-elevated); color:var(--text);
  border-radius:var(--r); padding:4px 10px; font-size:0.74rem; cursor:pointer; transition:all var(--t);
}
.friend-btn:hover { border-color:var(--accent); }
.friend-accept { color:var(--accent); border-color:var(--accent-soft); }
.friend-accept:hover { background:var(--accent-soft); }
.friend-reject { color:var(--text-dim); }
.friend-remove { color:var(--red); border-color:transparent; }
.friend-remove:hover { background:var(--red-bg, rgba(224,48,58,0.10)); }
.friends-add { display:flex; flex-direction:column; gap:8px; padding:10px 16px 14px; border-top:1px solid var(--border); margin-top:4px; }
.friend-add-row { display:flex; gap:8px; align-items:stretch; }
.friend-add-input {
  flex:1; min-width:0; padding:8px 10px; border-radius:var(--r);
  border:1px solid var(--border); background:var(--bg-elevated); color:var(--text); font-size:0.82rem;
}
.friend-add-input:focus { outline:none; border-color:var(--accent); }
.friend-add-btn {
  flex-shrink:0; padding:8px 14px; border:none; border-radius:var(--r);
  background:var(--accent); color:#fff; font-size:0.82rem; font-weight:600; cursor:pointer;
}
.friend-add-btn:disabled { opacity:0.6; cursor:default; }
.friend-search-results { display:none; max-height:160px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--r); background:var(--bg-elevated); }
.friend-search-results.visible { display:block; }
.friend-search-candidate { display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; transition:background var(--t); border-bottom:1px solid var(--border); }
.friend-search-candidate:last-child { border-bottom:none; }
.friend-search-candidate:hover { background:var(--bg-hover); }
.friend-search-candidate .friend-avatar { width:28px; height:28px; font-size:0.75rem; flex-shrink:0; }

/* 通知锚点消息高亮 */
.msg-highlight { animation: msgHighlight 2.4s ease-out; }
@keyframes msgHighlight {
  0%   { background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent); }
  100% { background:transparent; box-shadow:inset 0 0 0 0 transparent; }
}

/* Emoji picker */
.emoji-panel {
  display:none; position:absolute; bottom:calc(100% + 8px); right:8px;
  width:min(320px, 88vw); max-height:240px; overflow-y:auto;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,0.5); z-index:60; padding:8px;
}
.emoji-panel.open { display:block; }
.emoji-grid { display:grid; grid-template-columns:repeat(8, 1fr); gap:2px; }
.emoji-item {
  border:none; background:transparent; font-size:20px; line-height:1;
  padding:4px 0; border-radius:8px; cursor:pointer; transition:background .12s;
}
.emoji-item:hover { background:var(--bg-hover); }
.emoji-item:active { transform:scale(0.9); }

/* ═══ CHANNEL MAIN CONTENT (两栏Grid：Feed + 右侧边栏) ═══ */
.channel-main {
  flex:1; display:grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap:0; min-width:0; overflow:hidden; position:relative;
}
.feed-wrapper {
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  position:relative;
}

/* Pinned bar */
.pin-bar {
  padding:8px 16px; background:rgba(240,178,50,0.06);
  border-bottom:1px solid rgba(240,178,50,0.12);
  display:none; align-items:center; gap:10px;
  font-size:0.82rem; flex-shrink:0; cursor:pointer; transition:background var(--t);
}
.pin-bar:hover { background:rgba(240,178,50,0.10); }
.pin-bar.visible { display:flex; }
.pin-bar .pin-icon { color:var(--yellow); flex-shrink:0; }
.pin-bar .pin-text { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-sec); }
.pin-bar .pin-count { font-size:0.75rem; color:var(--text-link); flex-shrink:0; }

/* Announcement banner */
.announcement-banner {
  margin:0 16px 8px; padding:12px 16px;
  background:var(--accent-soft); border:1px solid rgba(124,92,252,0.15);
  border-radius:var(--r-md); display:none; align-items:flex-start; gap:10px; flex-shrink:0;
}
.announcement-banner.visible { display:flex; }
.announcement-banner .ann-icon { font-size:1.1rem; flex-shrink:0; color:var(--accent); }
.announcement-banner .ann-content { flex:1; font-size:0.85rem; color:var(--text-sec); }
.announcement-banner .ann-close { flex-shrink:0; opacity:0.5; cursor:pointer; transition:opacity var(--t); }
.announcement-banner .ann-close:hover { opacity:1; }

/* ═══ MESSAGES AREA — SOCIAL FEED LAYOUT ═══ */
.messages-area {
  flex:1; overflow-y:auto; padding:12px 0 4px;
  display:flex; flex-direction:column; align-items:flex-end;
  gap:0;
  scrollbar-width:thin; scrollbar-color:var(--bg-hover) transparent;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}

/* Inner container to constrain feed width */
.messages-area > * {
  width:100%; max-width:var(--feed-max-width);
  padding:0 0 0 56px;
  box-sizing:border-box;
}

/* ── 加载更多：按频道专属主题的转圈 ── */
.load-more-spinner {
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:30; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border-radius:999px;
  background:rgba(22,22,32,0.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,0.35); pointer-events:none;
}
.load-more-spinner .ls-dot {
  width:7px; height:7px; border-radius:50%; background:var(--ls-color,#7c5cfc);
  animation:ls-bounce 1s infinite ease-in-out;
}
.load-more-spinner .ls-dot:nth-child(2){ animation-delay:.15s; }
.load-more-spinner .ls-dot:nth-child(3){ animation-delay:.3s; }
@keyframes ls-bounce { 0%,80%,100%{ transform:scale(0.6); opacity:0.5; } 40%{ transform:scale(1); opacity:1; } }

.load-more-spinner .ls-ring {
  width:22px; height:22px; border-radius:50%;
  border:3px solid rgba(124,92,252,0.25); border-top-color:var(--ls-color,#7c5cfc);
  animation:ls-spin 0.8s linear infinite;
}
@keyframes ls-spin { to { transform:rotate(360deg); } }

.load-more-spinner .ls-book {
  width:20px; height:20px; border-radius:4px; background:var(--ls-color,#10b981);
  animation:ls-book 1s infinite ease-in-out;
}
@keyframes ls-book { 0%,100%{ transform:rotateY(0deg) scale(0.9); } 50%{ transform:rotateY(180deg) scale(1); } }

.load-more-spinner .ls-wave { display:flex; align-items:flex-end; gap:4px; height:22px; }
.load-more-spinner .ls-wave i {
  width:5px; height:100%; border-radius:3px; background:var(--ls-color,#06b6d4);
  animation:ls-wave 0.9s infinite ease-in-out;
}
.load-more-spinner .ls-wave i:nth-child(2){ animation-delay:.15s; }
.load-more-spinner .ls-wave i:nth-child(3){ animation-delay:.3s; }
@keyframes ls-wave { 0%,100%{ transform:scaleY(0.4); } 50%{ transform:scaleY(1); } }

.load-more-spinner .ls-star {
  font-size:20px; color:var(--ls-color,#ff6b9d); line-height:1;
  animation:ls-star 1.1s infinite linear;
}
@keyframes ls-star { to { transform:rotate(360deg); } }

/* 综合大厅：声波共振（均衡器条） */
.load-more-spinner .ls-sound { display:flex; align-items:flex-end; gap:3px; height:22px; }
.load-more-spinner .ls-sound i {
  width:4px; height:100%; border-radius:2px; background:var(--ls-color,#7c5cfc);
  transform-origin:bottom; animation:ls-sound 0.9s infinite ease-in-out;
}
.load-more-spinner .ls-sound i:nth-child(1){ animation-delay:0s; }
.load-more-spinner .ls-sound i:nth-child(2){ animation-delay:.15s; }
.load-more-spinner .ls-sound i:nth-child(3){ animation-delay:.3s; }
.load-more-spinner .ls-sound i:nth-child(4){ animation-delay:.45s; }
.load-more-spinner .ls-sound i:nth-child(5){ animation-delay:.6s; }
@keyframes ls-sound { 0%,100%{ transform:scaleY(0.35); } 50%{ transform:scaleY(1); } }

/* 二次元世界：彩虹星 */
.load-more-spinner .ls-rainbowstar {
  font-size:20px; line-height:1;
  background:linear-gradient(135deg,#ff6b9d,#7c5cfc,#06b6d4,#10b981,#f0b232);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:ls-star 1.1s infinite linear;
}

/* 各频道主题色（专属辨识） */
.load-more-spinner.ls-notice  { --ls-color:#f0b232; }
.load-more-spinner.ls-general { --ls-color:#7c5cfc; }
.load-more-spinner.ls-study   { --ls-color:#10b981; }
.load-more-spinner.ls-life    { --ls-color:#06b6d4; }
.load-more-spinner.ls-anime   { --ls-color:#ff6b9d; }
.load-more-spinner.ls-default { --ls-color:#7c5cfc; }

/* Welcome card — A 全幅主题横幅 */
.welcome-card {
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:16px;
  margin:12px 0 4px; padding:18px 22px;
  min-height:88px;
  background:var(--ch-tint, rgba(124,92,252,0.06));
  border:0.5px solid var(--ch-line, rgba(124,92,252,0.16));
  border-left:5px solid var(--ch-color, var(--accent));
  border-radius:var(--r-lg);
  box-shadow:-3px 0 12px -2px var(--ch-glow, rgba(124,92,252,0.35)), inset 0 1px 0 rgba(255,255,255,0.03);
  transition:background var(--t), border-color var(--t), box-shadow var(--t);
}
/* 右上柔光晕 */
.welcome-card::before {
  content:""; position:absolute; top:-60%; right:-12%;
  width:240px; height:240px;
  background:radial-gradient(circle, var(--ch-glow, rgba(124,92,252,0.25)), transparent 70%);
  border-radius:50%; pointer-events:none;
}
/* 底部流光 — 按需求不再改动大卡片，移除欢迎卡底部彗星拖尾 */
.welcome-card::after { display:none; }
/* 复用导航卡同款动态图标（52px 容器 + 柔光晕） */
.welcome-hero {
  position:relative; flex-shrink:0;
  width:52px; height:52px; border-radius:14px;
  background:var(--ch-tint, rgba(124,92,252,0.14));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 16px var(--ch-glow, rgba(124,92,252,0.30));
  overflow:hidden;
}
.welcome-hero .hi { position:relative; display:block; width:34px; height:34px; transform:scale(1.25); transform-origin:center; }
.welcome-hero i { position:absolute; display:block; }
.welcome-text { position:relative; min-width:0; }
.welcome-text h3 { font-size:1.25rem; font-weight:800; margin:0 0 4px; color:var(--text); position:relative; }
.welcome-text p { font-size:0.85rem; color:var(--text-sec); margin:0; position:relative; }

/* ═══ RIGHT SIDEBAR (贴吧风格：热点 + 频道推荐) ═══ */
.right-sidebar {
  display:flex; flex-direction:column; gap:16px;
  padding:12px 12px 12px 0;
  overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--bg-hover) transparent;
  min-width:0; border-left:1px solid var(--border);
  background:var(--bg-surface);
}
.sidebar-card {
  background:var(--bg-elevated); border-radius:var(--r-lg);
  padding:16px; border:1px solid var(--border);
}
.sidebar-card-title {
  font-size:0.9rem; font-weight:700; color:var(--text);
  margin:0 0 12px; padding-bottom:8px;
  border-bottom:1px solid var(--border); letter-spacing:0.3px;
}
.sidebar-list {
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;
}
/* 热点话题条目（非卡片类） */
.sidebar-list li:not(.sidebar-skeleton):not(.channel-rec-item):not(.hot-card) {
  display:flex; align-items:center; gap:10px;
  padding:8px 6px; border-radius:var(--r-sm);
  cursor:pointer; transition:background var(--t);
  font-size:0.84rem; color:var(--text-sec);
}
.sidebar-list li:not(.sidebar-skeleton):not(.channel-rec-item):not(.hot-card):hover { background:rgba(255,255,255,0.04); color:var(--text); }

/* 热门话题 B 方案：卡片话题流 + 克制动效（无 glow/渐变/阴影） */
.hot-card {
  display:flex; gap:10px; align-items:stretch;
  padding:9px 10px;
  border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  transition: background var(--t), border-color var(--t), transform var(--t);
  animation: hotCardIn 0.42s cubic-bezier(0.2,0,0,1) both;
}
.hot-card:hover {
  background:rgba(124,92,252,0.10);
  border-color:rgba(124,92,252,0.35);
  transform: translateY(-1px);
}
.hot-card:active { transform: scale(0.985); }
.hot-card-rank {
  flex-shrink:0; width:20px; align-self:flex-start;
  text-align:center; font-weight:800; font-size:0.82rem;
  color:var(--text-muted); padding-top:1px;
}
.hot-card:nth-child(1) .hot-card-rank { color:#f43f5e; }
.hot-card:nth-child(2) .hot-card-rank { color:#f97316; }
.hot-card:nth-child(3) .hot-card-rank { color:#eab308; }
.hot-card-body { flex:1; min-width:0; }
.hot-card-title {
  font-size:0.84rem; color:var(--text); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hot-card-meta {
  font-size:0.72rem; color:var(--accent-light); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hot-card-foot { display:flex; align-items:center; gap:8px; margin-top:5px; }
.hot-card-time { font-size:0.68rem; color:var(--text-muted); flex-shrink:0; }
.hot-heat-track {
  flex:1; height:3px; border-radius:2px;
  background:rgba(255,255,255,0.08); overflow:hidden;
}
.hot-heat-fill {
  display:block; height:100%; border-radius:2px;
  background:var(--accent);
  transform: scaleX(0); transform-origin:left;
  animation: hotHeatGrow 0.6s cubic-bezier(0.2,0,0,1) 0.12s both;
}
.hot-card:nth-child(1) .hot-heat-fill { background:#f43f5e; }
.hot-card:nth-child(2) .hot-heat-fill { background:#f97316; }
.hot-card:nth-child(3) .hot-heat-fill { background:#eab308; }
@keyframes hotCardIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
@keyframes hotHeatGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hot-card { animation: none; transform:none; }
  .hot-card:hover { transform:none; }
  .hot-heat-fill { animation: none; transform: scaleX(1); }
}
.hot-rank {
  width:20px; height:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.82rem; border-radius:4px;
  color:var(--text-muted);
}
.hot-rank.top3 { background:var(--accent); color:#fff; }
.hot-rank:nth-child(1) { background:#f43f5e; }
.hot-rank:nth-child(2) { background:#f97316; }
.hot-rank:nth-child(3) { background:#eab308; }
.hot-text { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hot-tag {
  font-size:0.68rem; padding:1px 6px; border-radius:4px; flex-shrink:0;
  font-weight:600;
}
.hot-tag.hot { background:rgba(244,63,94,0.15); color:#f43f5e; }
.hot-tag.new { background:rgba(59,130,246,0.15); color:#60a5fa; }

/* 热门话题跳转高亮：主题色描边呼吸（紫↔青）+ 顶部来源标签 */
.msg-group.msg-hot-highlight {
  animation: msgHotBreathe 3.6s ease-in-out 1;
  z-index: 4;
  will-change: box-shadow, background;
}
@keyframes msgHotBreathe {
  0%   { box-shadow: 0 0 0 1.5px var(--accent); background: rgba(124,92,252,0.10); }
  25%  { box-shadow: 0 0 0 1.5px var(--cyan);   background: rgba(0,180,216,0.07); }
  50%  { box-shadow: 0 0 0 1.5px var(--accent); background: rgba(124,92,252,0.10); }
  75%  { box-shadow: 0 0 0 1.5px var(--cyan);   background: rgba(0,180,216,0.07); }
  100% { box-shadow: 0 0 0 0 transparent;       background: transparent; }
}
/* 顶部「来自热门话题」来源标签 */
.msg-hot-badge {
  position: absolute;
  top: -11px; left: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent); color: #fff;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  line-height: 1; padding: 4px 9px; border-radius: 999px;
  z-index: 6; pointer-events: none;
  animation: msgHotBadgeIn 0.25s ease-out, msgHotBadgeOut 0.45s ease-in 2.6s forwards;
}
@keyframes msgHotBadgeIn  { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes msgHotBadgeOut { to   { opacity: 0; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .msg-group.msg-hot-highlight { animation: none; box-shadow: 0 0 0 1.5px var(--accent); }
  .msg-hot-badge { animation: none; }
}

/* 渲染窗口：「加载更早消息」按钮（纯前端分页，数据已在缓存中） */
.load-earlier {
  text-align:center; padding:11px; margin:10px auto 4px; cursor:pointer;
  color:var(--accent-light); font-size:0.82rem; font-weight:600;
  border:1px solid rgba(124,92,252,0.25); border-radius:999px; width:fit-content;
  background:rgba(124,92,252,0.06); transition:background var(--t), border-color var(--t);
  user-select:none;
}
.load-earlier:hover { background:rgba(124,92,252,0.14); border-color:rgba(124,92,252,0.45); }
.load-earlier:active { transform:scale(0.98); }

/* 频道推荐卡片 */
.channel-rec-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 6px; border-radius:var(--r-sm);
  cursor:pointer; transition:background var(--t);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.channel-rec-item:hover { background:rgba(255,255,255,0.04); }
.channel-rec-avatar {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; font-weight:700; color:#fff;
  flex-shrink:0; background:linear-gradient(135deg,var(--accent),var(--pink));
  border:1.5px solid rgba(255,255,255,0.08);
}
.channel-rec-info { flex:1; min-width:0; }
.channel-rec-name {
  font-size:0.82rem; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.channel-rec-desc {
  font-size:0.72rem; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.channel-rec-stats {
  font-size:0.7rem; color:var(--text-dim); margin-top:2px;
}

/* Sidebar skeleton loading */
.sidebar-skeleton {
  display:flex; align-items:center; gap:10px; padding:10px 6px;
}
.skeleton-line {
  height:14px; border-radius:4px; background:linear-gradient(90deg,var(--bg-hover),var(--bg-elevated),var(--bg-hover));
  animation:skeleton-pulse 1.5s ease infinite;
  display:block;
}
.skeleton-box {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(90deg,var(--bg-hover),var(--bg-elevated),var(--bg-hover));
  animation:skeleton-pulse 1.5s ease infinite;
}
@keyframes skeleton-pulse { 0%,100%{opacity:0.4} 50%{opacity:0.8} }

/* Day divider */
.day-divider {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px 8px; margin:0; width:100%; max-width:var(--feed-max-width); box-sizing:border-box;
}
.day-divider::before, .day-divider::after {
  content:""; flex:1; height:1px; background:var(--border);
}
.day-divider span { font-size:0.72rem; font-weight:600; color:var(--text-muted); white-space:nowrap; }

/* ═══★ SOCIAL FEED MESSAGE CARD (贴吧风格：无卡片背景，仅行间距) ★═══ */
.msg-group {
  display:flex; flex-direction:column; padding:16px 0; gap:10px;
  position:relative; transition:background var(--t);
  border-radius:0; cursor:default;
  border-bottom:1px solid rgba(255,255,255,0.04);
  opacity:1;
}
.msg-group:hover { background:rgba(255,255,255,0.015); }
.msg-group-mod {
  background:rgba(245,158,11,0.07);
  border-left:3px solid #f59e0b;
  border-radius:var(--r-md);
}
.msg-group-mod .msg-author { color:#d97706; font-weight:600; }
.msg-group-mod .msg-feed-avatar { background:linear-gradient(135deg,#f59e0b,#fbbf24) !important; }

/* Left column: avatar + name ROW (贴吧风格：头像左，昵称+称号右) */
.msg-feed-left {
  display:flex; flex-direction:row; align-items:center; gap:10px;
  flex-shrink:0; width:auto;
}
.msg-feed-avatar {
  width:var(--avatar-size); height:var(--avatar-size); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; font-weight:700; color:#fff;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--accent), var(--pink));
  border:2px solid rgba(255,255,255,0.08);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink:0;
}
.msg-feed-avatar img { width:100%; height:100%; object-fit:cover; }
.msg-feed-avatar:hover {
  transform:scale(1.06);
  box-shadow:0 0 0 3px var(--accent-g), 0 4px 16px rgba(0,0,0,0.3);
}
.msg-feed-meta {
  display:flex; flex-direction:row; align-items:center; gap:6px;
  text-align:left; width:auto; flex-wrap:wrap;
}
.msg-feed-name {
  font-size:0.88rem; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:220px; cursor:pointer;
  transition:color var(--t);
}
.msg-feed-name:hover { color:var(--accent-light); }
.msg-feed-role {
  font-size:0.68rem; color:var(--text-dim); display:flex; align-items:center; gap:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:var(--avatar-size);
}
.msg-feed-role .role-badge { font-size:0.58rem; padding:0 4px; }
.msg-feed-title {
  font-size:0.62rem; color:var(--accent-light); display:inline-flex; align-items:center; gap:2px;
  white-space:nowrap;
  background:rgba(124,92,252,0.08); padding:1px 8px; border-radius:6px;
}

/* Right column: message content area */
.msg-feed-body {
  flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;
}

/* Message time (top right of content) */
.msg-feed-time-row {
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
}
.msg-time { font-size:0.68rem; color:var(--text-muted); }
.msg-status { font-size:0.68rem; margin-left:2px; opacity:0.8; }
.msg-pending { opacity:0.7; }
.msg-pending .msg-status { color:var(--accent-light); }
.msg-failed { opacity:1; }
.msg-failed .msg-content { border:1px dashed rgba(239,68,68,0.5); border-radius:var(--r); padding:5px 8px; background:rgba(239,68,68,0.06); }
.msg-failed .msg-status { color:#ff6b6b; cursor:pointer; text-decoration:underline; }

/* Message content */
.msg-content {
  font-size:0.95rem; color:var(--text-sec); line-height:1.7;
  word-wrap:break-word; white-space:pre-wrap;
}
.msg-content a { color:var(--text-link); }
.msg-content a:hover { text-decoration:underline; }
.msg-content strong { color:var(--text); font-weight:700; }
.msg-content code {
  background:rgba(255,255,255,0.06); padding:1px 5px; border-radius:4px; font-size:0.85rem;
}

/* Image gallery (multi-image horizontal layout per 手绘稿) */
.msg-img-gallery {
  display:flex; gap:6px; margin-top:6px; flex-wrap:wrap;
}
.msg-img-wrap {
  cursor:pointer; border-radius:var(--r-md); overflow:hidden;
  display:inline-block; border:1px solid var(--border);
  transition:transform var(--t), box-shadow var(--t);
  flex:1 1 0; min-width:0; max-width:280px;
  aspect-ratio:4/3;
}
.msg-img-wrap:hover {
  transform:scale(1.02); box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.msg-img-wrap img {
  display:block; width:100%; height:100%;
  object-fit:cover;
}
.msg-file-broken { padding:20px 32px; color:var(--text-muted); font-size:0.85rem; }

/* File card */
.msg-file-card {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; margin-top:4px;
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--r); max-width:320px;
}
.msg-file-icon { font-size:1.4rem; flex-shrink:0; }
.msg-file-info { min-width:0; display:flex; flex-direction:column; }
.msg-file-name { font-size:0.88rem; color:var(--text-link); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-file-name:hover { text-decoration:underline; }
.msg-file-size { font-size:0.72rem; color:var(--text-muted); }

/* Bottom interaction bar (贴吧风格：👁️浏览 ❤️点赞 💬评论 一行排开) */
.msg-interactions {
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
  margin-top:6px; padding:8px 24px 0 0;
  border-top:1px solid rgba(255,255,255,0.04);
  color:var(--text-dim);
  font-size:0.82rem;
}
.msg-interactions-left {
  display:flex; align-items:center; gap:16px;
}
.msg-interactions-right {
  display:flex; align-items:center; gap:8px;
}
.msg-send-time {
  display:inline-flex; align-items:center; gap:2px;
  font-size:0.85rem; font-weight:500; color:rgba(185,195,230,0.92);
  font-variant-numeric:tabular-nums;
  letter-spacing:0.02em;
}
.msg-send-time .msg-time-char { display:inline-block; opacity:1; }
.msg-interact-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 8px; border-radius:6px;
  font-size:0.82rem; color:var(--text-dim);
  cursor:pointer; transition:all 0.15s ease;
  background:none; border:none;
}
.msg-interact-btn:hover {
  background:rgba(255,255,255,0.05); color:var(--text);
}
.msg-interact-btn.liked { color:#f43f5e; }
.msg-interact-btn.liked:hover { background:rgba(244,63,94,0.08); }
.msg-interact-count { font-size:0.78rem; font-weight:500; transition:transform 0.18s ease; }
/* 点赞粒子爆裂 */
.like-particle {
  position:fixed; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ff9bb0, #f43f5e);
  box-shadow:0 0 6px rgba(244,63,94,0.65);
  pointer-events:none; z-index:10000;
}
.like-ring {
  position:fixed; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(244,63,94,0.7); pointer-events:none; z-index:9999;
}

/* ── 撤回浮层（长按/右键消息浮现的「撤回」按键）── */
.msg-group { position: relative; }
.recall-pop {
  position:absolute; top:6px; right:6px; z-index:30;
  background:rgba(20,22,34,0.96);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px; padding:4px;
  box-shadow:0 6px 22px rgba(0,0,0,0.45);
  backdrop-filter:blur(8px);
}
.recall-pop-btn {
  display:block; width:100%;
  padding:6px 16px; border:none; border-radius:7px;
  background:rgba(244,63,94,0.14); color:#ff8da3;
  font-size:0.84rem; font-weight:600; cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.recall-pop-btn:hover { background:rgba(244,63,94,0.26); color:#fff; }
@media (max-width: 900px) {
  .recall-pop-btn { min-height:44px; } /* 移动端触摸目标 ≥44px */
}

/* ── 已撤回消息（仅管理员可见，红色标识）── */
.msg-recalled-admin {
  position: relative;
}
.msg-recalled-admin::before {
  content: '';
  position: absolute;
  left: -8px; top: 4px; bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, rgba(239,68,68,0.9), rgba(239,68,68,0.4));
  border-radius: 2px;
}
.msg-recalled-admin .msg-feed-body .msg-content,
.msg-recalled-admin .msg-feed-body .msg-forward,
.msg-recalled-admin .msg-feed-body .msg-quote,
.msg-recalled-admin .msg-feed-body .msg-img-gallery,
.msg-recalled-admin .msg-feed-body .msg-file-card {
  color: #ff6b6b !important;
  border-color: rgba(239,68,68,0.35) !important;
}
.msg-recalled-admin .msg-feed-body .msg-content img {
  opacity: 0.72;
  filter: grayscale(30%) sepia(15%) hue-rotate(320deg) saturate(1.2);
}
.msg-recalled-admin .msg-send-time,
.msg-recalled-admin .msg-feed-name,
.msg-recalled-admin .msg-feed-role,
.msg-recalled-admin .msg-interact-btn {
  opacity: 0.85;
}

/* ═══ 内联评论区（完全按参考图：与主消息内容左对齐，无紫色边线） ═══ */
.msg-comment-section {
  display:none; margin-top:10px;
  padding:0; /* 与主消息内容区左边缘对齐 */
}
.msg-comment-section.open { display:block; animation:commentSlide 0.25s ease; }
@keyframes commentSlide { from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform: translateY(0);} }

.comment-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0 12px;
  font-size:0.84rem; color:var(--text-sec);
  border-bottom:1px solid rgba(255,255,255,0.05);
  margin-bottom:4px;
}
.comment-header .comment-title { font-weight:600; color:var(--text); }
.comment-header .comment-count { font-size:0.74rem; color:var(--text-muted); }

.comment-list { display:flex; flex-direction:column; }
.msg-comment-item {
  display:flex; align-items:flex-start;
  gap:12px; padding:10px 10px 9px; border-radius:10px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background 0.15s ease;
}
.msg-comment-item:hover { background:rgba(255,255,255,0.03); }
.msg-comment-item:last-child { border-bottom:none; }

/* 平铺列表：主评论无缩进；所有回复统一 32px 缩进，不再随嵌套层级逐级右移 */
.msg-comment-item[data-depth="0"] { margin-left:0; }
.msg-comment-item:not([data-depth="0"]) { margin-left:32px; padding:8px 0; }
.msg-comment-item[data-depth="0"] .msg-comment-avatar { width:40px; height:40px; font-size:0.85rem; }
.msg-comment-item:not([data-depth="0"]) .msg-comment-avatar { width:32px; height:32px; font-size:0.72rem; }

.msg-comment-avatar {
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--pink));
}
.msg-comment-body { flex:1; min-width:0; padding-top:2px; }
.comment-name-row {
  display:flex; align-items:center; flex-wrap:wrap; gap:5px;
  margin-bottom:4px; line-height:1.2;
}
.comment-name {
  font-size:0.82rem; font-weight:500; color:var(--text-muted);
}
.reply-arrow {
  font-size:0.7rem; color:var(--text-dim); margin:0 3px;
}
.reply-target {
  font-size:0.82rem; font-weight:500; color:var(--text-muted);
}
.msg-comment-text {
  font-size:0.94rem; color:var(--text); line-height:1.55;
  word-break:break-word; white-space:pre-wrap;
}
.comment-footer {
  display:flex; align-items:center; gap:6px;
  margin-top:5px;
}
.comment-time {
  font-size:0.72rem; color:var(--text-dim);
}
.comment-dot {
  font-size:0.72rem; color:var(--text-dim);
}
.comment-reply-text {
  background:transparent; border:none; padding:0;
  font-size:0.72rem; color:var(--text-dim);
  cursor:pointer; transition:color 0.15s;
}
.comment-reply-text:hover { color:var(--text); }

/* 右侧点赞列：参考图结构 — 单行「心 + 计数」（下行碎心已移除）*/
.comment-like-col {
  display:flex; flex-direction:column; align-items:center;
  min-width:46px; padding-top:2px; flex-shrink:0;
  gap:6px;
}
.comment-like-row {
  display:flex; align-items:center; justify-content:center;
  gap:3px; min-height:20px;
}
.comment-like-btn {
  background:transparent; border:none; padding:0;
  font-size:1.1rem; color:var(--text-muted);
  cursor:pointer; line-height:1; transition:color 0.15s, transform 0.1s;
}
.comment-like-btn:hover { color:var(--text); }
.comment-like-btn:active { transform:scale(0.92); }
.comment-like-btn.liked { color:#f43f5e; text-shadow:0 0 8px rgba(244,63,94,0.5); }
.comment-like-count {
  font-size:0.72rem; color:var(--text-muted); line-height:1;
  min-width:12px; text-align:left;
}

/* 评论区底部：展开更多 / 收起 */
.comment-footer-bar {
  display:flex; align-items:center; justify-content:center;
  gap:28px;
  padding:14px 0 6px;
  color:var(--text-dim); font-size:0.8rem;
  border-top:1px solid rgba(255,255,255,0.04);
}
.comment-more-btn,
.comment-collapse-btn {
  cursor:pointer; transition:color 0.15s;
}
.comment-more-btn:hover,
.comment-collapse-btn:hover { color:var(--text); }

/* Reply action (per-message) */
.msg-actions {
  display:flex; gap:6px; margin-top:4px; opacity:1;
}
.msg-action-btn {
  border:1px solid var(--border); background:rgba(255,255,255,0.04);
  color:var(--text-sec); font-size:0.75rem;
  padding:3px 10px; border-radius:14px; cursor:pointer;
  transition:background .12s, color .12s;
}
.msg-action-btn:hover { background:rgba(124,92,252,0.18); color:var(--text); }

/* Quoted message (reply reference) */
.msg-quote {
  display:flex; flex-direction:column; gap:1px;
  margin-bottom:4px; padding:4px 10px;
  border-left:3px solid rgba(124,92,252,0.6);
  background:rgba(124,92,252,0.06);
  border-radius:0 8px 8px 0; max-width:90%;
}
.msg-quote .quote-author { font-size:0.75rem; font-weight:600; color:#a78bfa; }
.msg-quote .quote-text { font-size:0.8rem; color:var(--text-sec); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Reply bar above input */
.reply-bar { display:none; align-items:center; gap:8px; padding:6px 12px; margin:0 16px 6px; background:rgba(124,92,252,0.08); border:1px solid rgba(124,92,252,0.3); border-radius:10px; }
.reply-bar.open { display:flex; }
.reply-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.reply-label { font-size:0.78rem; font-weight:600; color:#a78bfa; }
.reply-preview { font-size:0.8rem; color:var(--text-sec); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-cancel { border:none; background:transparent; color:var(--text-sec); font-size:1.2rem; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px; }
.reply-cancel:hover { background:rgba(255,255,255,0.08); color:var(--text); }

/* @mention autocomplete */
.mention-dropdown {
  position:absolute; bottom:calc(100% + 4px); left:8px;
  width:200px; max-height:200px;
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--r); box-shadow:0 -4px 16px rgba(0,0,0,0.3);
  z-index:50; overflow-y:auto;
}
.mention-item {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  cursor:pointer; font-size:0.88rem; transition:background var(--t);
}
.mention-item:hover, .mention-item.active { background:var(--bg-active); }
.mention-item .mention-avatar {
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; font-weight:700; color:#fff; flex-shrink:0;
}
.mention-item .mention-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* @mention highlight */
.msg-mention { background:var(--accent-soft); color:var(--accent-light); padding:0 2px; border-radius:3px; font-weight:600; cursor:pointer; }
.msg-mention:hover { background:rgba(124,92,252,0.25); }

/* Continuation messages (same author, no avatar repeat) */
.msg-continuation {
  padding:2px 0 2px calc(var(--avatar-size) + 30px);
  position:relative;
}
.msg-continuation .msg-content { font-size:0.92rem; }
.msg-continuation:hover .msg-cont-time { display:inline; }
.msg-cont-time { display:none; font-size:0.65rem; color:var(--text-muted); margin-right:6px; }

/* Reactions */
.msg-reactions { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.msg-reaction {
  display:flex; align-items:center; gap:4px; padding:2px 8px; border-radius:12px;
  background:rgba(255,255,255,0.06); border:1px solid transparent;
  font-size:0.78rem; color:var(--text-dim); cursor:pointer;
  transition:all var(--t); user-select:none;
}
.msg-reaction:hover { background:rgba(124,92,252,0.12); border-color:rgba(124,92,252,0.2); }
.msg-reaction.active { background:rgba(124,92,252,0.15); border-color:var(--accent); color:var(--accent-light); }
.msg-reaction .reaction-emoji { font-size:0.9rem; }
.msg-reaction .reaction-count { font-weight:600; font-size:0.78rem; }
.msg-reaction .reaction-add {
  width:28px; height:24px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.04); border:1px dashed rgba(255,255,255,0.15);
  color:var(--text-muted); cursor:pointer; font-size:1rem; transition:all var(--t);
}
.msg-reaction .reaction-add:hover { background:rgba(255,255,255,0.08); border-color:var(--border-light); color:var(--text-sec); }

/* Embed card */
.msg-embed { margin-top:8px; border-left:4px solid var(--accent); border-radius:var(--r); background:var(--bg-elevated); overflow:hidden; max-width:520px; }
.msg-embed.embed-green { border-left-color:var(--green); }
.msg-embed.embed-yellow { border-left-color:var(--yellow); }
.msg-embed.embed-pink { border-left-color:var(--pink); }
.msg-embed.embed-blue { border-left-color:var(--blue); }
.msg-embed.embed-red { border-left-color:var(--red); }
.embed-content { padding:12px 16px; }
.embed-title { font-size:0.9rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.embed-desc { font-size:0.82rem; color:var(--text-sec); line-height:1.5; }
.embed-field { display:flex; margin-top:8px; gap:12px; }
.embed-field-name { font-size:0.78rem; color:var(--text-dim); font-weight:600; min-width:80px; }
.embed-field-value { font-size:0.82rem; color:var(--text-sec); }
.embed-image { width:100%; max-height:300px; object-fit:cover; border-radius:0 0 var(--r) var(--r); }
.embed-footer { padding:8px 16px; border-top:1px solid var(--border); font-size:0.72rem; color:var(--text-muted); display:flex; align-items:center; gap:8px; }

/* File attachment */
.msg-attachment {
  display:flex; align-items:center; gap:12px; margin-top:6px;
  padding:10px 14px; background:var(--bg-elevated);
  border-radius:var(--r-md); border:1px solid var(--border);
  max-width:420px; cursor:pointer; transition:border-color var(--t), background var(--t);
}
.msg-attachment:hover { border-color:var(--border-light); background:var(--bg-hover); }
.att-icon { width:36px; height:36px; border-radius:var(--r); background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; }
.att-info { flex:1; min-width:0; }
.att-name { font-size:0.85rem; font-weight:600; color:var(--text); }
.att-size { font-size:0.72rem; color:var(--text-muted); }
.att-download { color:var(--text-dim); flex-shrink:0; }

/* Video embed */
.msg-video { margin-top:8px; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); max-width:520px; }
.msg-video video { display:block; width:100%; border-radius:var(--r); background:var(--bg-deeper); }

/* Reply chain indicator */
.msg-reply { display:flex; align-items:center; gap:6px; padding:4px 0; font-size:0.78rem; color:var(--text-link); cursor:pointer; transition:color var(--t); }
.msg-reply:hover { color:var(--accent-light); }
.msg-reply .reply-line { width:2px; height:16px; background:var(--text-muted); border-radius:2px; }
.msg-reply .reply-author { font-weight:600; }

/* Topic tag / hashtag */
.msg-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.msg-tag-pill { font-size:0.70rem; padding:1px 8px; border-radius:10px; background:rgba(124,92,252,0.12); color:var(--accent-light); cursor:pointer; transition:all var(--t); }
.msg-tag-pill:hover { background:rgba(124,92,252,0.2); }
.msg-tag-pill::before { content:'#'; opacity:0.6; }

/* Pinned indicator */
.msg-pin-indicator { position:absolute; top:4px; right:16px; font-size:0.65rem; color:var(--yellow); display:flex; align-items:center; gap:4px; opacity:0.6; }

/* Thread reply count */
.msg-thread { margin-top:4px; font-size:0.78rem; color:var(--text-link); cursor:pointer; display:flex; align-items:center; gap:6px; transition:color var(--t); }
.msg-thread:hover { color:var(--accent-light); }
.msg-thread .thread-line { height:1px; width:24px; background:var(--text-muted); }

/* Message hover actions (edit/delete/pin) */
.msg-hover-actions {
  position:absolute; right:12px; top:8px;
  display:flex; gap:2px; opacity:0; transition:opacity var(--t); z-index:5;
}
.msg-group:hover .msg-hover-actions { opacity:1; }
.msg-hover-btn {
  width:26px; height:26px; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer; font-size:0.8rem; transition:all var(--t);
}
.msg-hover-btn:hover { background:var(--bg-hover); color:var(--text); border-color:var(--border-light); }

/* Tag badges on messages */
.msg-tag { font-size:0.68rem; padding:1px 6px; border-radius:4px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; flex-shrink:0; }
.msg-tag.announcement { background:var(--accent-soft); color:var(--accent-light); }
.msg-tag.notice { background:rgba(88,101,242,0.15); color:var(--blue); }
.msg-tag.pin { background:var(--yellow-bg); color:var(--yellow); }

/* ═══ INPUT AREA — 默认隐藏，点FAB/💬评论时才显示 ═══ */
.message-input-area {
  display:none;
  padding:0 0 calc(16px + env(safe-area-inset-bottom)) 16px;
  flex-shrink:0; position:relative;
}
.message-input-area.input-visible {
  display:flex; justify-content:flex-end;
}

/* 公告栏（announcement）非管理员禁言状态 */
#btn-compose.locked-announcement,
#btn-compose[disabled] { display: none; }
.message-input-area.locked-announcement .message-input-wrapper {
  opacity: 0.45;
  pointer-events: none;
  background: rgba(120,120,140,0.08);
  border-color: rgba(255,255,255,0.06);
}
.message-input-area.locked-announcement .msg-input::placeholder { color: rgba(255,255,255,0.35); }

/* ═══ FAB 浮动发消息按钮 — 全平台左上角（顶栏下方、feed 左上） ═══ */
.msg-fab {
  position:fixed; top:58px; left:14px; bottom:auto; right:auto;
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,#7c5cfc,#5a3de0);
  border:none; color:#fff; font-size:1.5rem;
  cursor:pointer; z-index:30;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(124,92,252,0.4);
  transition:transform 0.2s, box-shadow 0.2s;
}
.msg-fab:hover { transform:scale(1.08); box-shadow:0 6px 20px rgba(124,92,252,0.5); }
.msg-fab:active { transform:scale(0.95); }
.message-input-wrapper {
  display:flex; align-items:flex-end;
  background:var(--bg-input); border-radius:var(--r-md);
  padding:0 12px; border:1px solid transparent;
  transition:border-color var(--t), box-shadow var(--t);
  width:100%; max-width:var(--feed-max-width);
}
.message-input-wrapper:focus-within {
  border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-g);
}
.msg-input {
  flex:1; background:none; border:none; outline:none;
  padding:11px 8px; font-size:0.95rem; color:var(--text);
  resize:none; min-height:22px; max-height:144px;
}
.msg-input::placeholder { color:var(--text-muted); }
.input-actions { display:flex; gap:2px; align-items:center; flex-shrink:0; }

/* Scroll-to-bottom button */
.scroll-bottom-btn {
  position:absolute; bottom:calc(80px + env(safe-area-inset-bottom)); right:24px;
  width:38px; height:38px; border-radius:50%;
  background:var(--bg-elevated); border:1px solid var(--border);
  color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:10; opacity:0; transform:translateY(10px); pointer-events:none;
  transition:all 0.25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:var(--sh-sm);
}
.scroll-bottom-btn.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.scroll-bottom-btn:hover { background:var(--bg-hover); color:var(--text); transform:translateY(-2px); }
.scroll-bottom-btn .new-dot {
  position:absolute; top:-3px; right:-3px;
  width:14px; height:14px; border-radius:50%;
  background:var(--red); border:2px solid var(--bg-surface);
  font-size:0.5rem; color:#fff; display:none; align-items:center; justify-content:center; font-weight:700;
}
.scroll-bottom-btn .new-dot.show { display:flex; }

/* Image lightbox */
.img-lightbox {
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:9999; display:flex; align-items:center; justify-content:center;
  animation:fadeIn 0.2s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.img-lightbox-bg {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(8px);
}
.img-lightbox-img {
  position:relative; max-width:90vw; max-height:90vh;
  border-radius:var(--r); box-shadow:0 8px 48px rgba(0,0,0,0.5);
}
.img-lightbox-close {
  position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px;
  width:40px; height:40px; background:rgba(255,255,255,0.1);
  border:none; border-radius:50%; color:#fff; font-size:1.5rem;
  cursor:pointer; transition:background var(--t); z-index:1; line-height:1;
}
.img-lightbox-close:hover { background:rgba(255,255,255,0.2); }

/* Upload toast */
.upload-toast {
  position:fixed; top:calc(16px + env(safe-area-inset-top)); left:50%;
  transform:translateX(-50%); z-index:9998;
  padding:10px 24px; border-radius:var(--r-md);
  font-size:0.88rem; animation:fadeIn 0.2s ease;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  max-width:calc(100vw - 32px); text-align:center; word-break:break-word;
}
.upload-toast-info  { background:var(--bg-elevated); color:var(--text-sec); border:1px solid var(--border); }
.upload-toast-error { background:rgba(237,66,69,0.15); color:var(--red); border:1px solid rgba(237,66,69,0.3); }
.upload-toast-success { background:rgba(35,165,89,0.15); color:var(--green); border:1px solid rgba(35,165,89,0.3); }

/* Scroll reveal */
[data-reveal] { opacity:0; transform:translateY(32px); transition:opacity 0.8s ease, transform 0.8s ease; }
[data-reveal].revealed { opacity:1; transform:translateY(0); }


/* ══════════════════════════════════════════════════
   PROFILE PAGE
   ══════════════════════════════════════════════════ */
.profile-container {
  max-width:640px; margin:0 auto; padding:32px 24px;
  position:relative; z-index:3; height:100vh; height:100dvh; overflow-y:auto;
}
.profile-back {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--r);
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  color:var(--text-sec); cursor:pointer; margin-bottom:24px; transition:all var(--t);
}
.profile-back:hover { background:var(--bg-hover); color:var(--text); }
.profile-card {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:36px 32px; text-align:center; margin-bottom:24px;
}
.profile-avatar {
  width:80px; height:80px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:700; color:#fff; margin:0 auto 16px;
  position:relative; overflow:hidden;
}
.profile-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.profile-avatar-wrap {
  width:88px; height:88px; margin:0 auto 14px; cursor:pointer;
  position:relative; border-radius:50%; transition:transform var(--t);
}
.profile-avatar-wrap:hover { transform:scale(1.06); }
.profile-avatar-wrap:hover .avatar-camera-overlay { opacity:1; }
.avatar-camera-overlay {
  position:absolute; inset:0; border-radius:50%;
  background:rgba(0,0,0,0.45); display:flex; align-items:center;
  justify-content:center; opacity:0; transition:opacity var(--t);
  pointer-events:none;
}
.avatar-camera-overlay span { font-size:1.4rem; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.profile-name { font-size:1.5rem; font-weight:800; margin-bottom:4px; }
.profile-username { font-size:0.88rem; color:var(--text-dim); margin-bottom:12px; }
.profile-bio { font-size:0.9rem; color:var(--text-sec); margin-bottom:20px; max-width:400px; margin-left:auto; margin-right:auto; }
.profile-stats { display:flex; justify-content:center; gap:32px; margin-bottom:24px; }
.profile-stat { display:flex; flex-direction:column; align-items:center; }
.ps-num { font-size:1.2rem; font-weight:700; color:var(--text); }
.ps-label { font-size:0.72rem; color:var(--text-muted); margin-top:2px; }
.profile-actions { display:flex; gap:12px; justify-content:center; }
.profile-btn {
  padding:10px 24px; border-radius:var(--r-md);
  background:var(--accent); color:#fff; font-weight:600;
  border:none; cursor:pointer; font-size:0.9rem; transition:all var(--t);
}
.profile-btn:hover { background:#8b6ffc; transform:translateY(-1px); }
.profile-btn-outline { background:transparent; border:1.5px solid var(--border); color:var(--text-sec); }
.profile-btn-outline:hover { background:var(--bg-hover); color:var(--text); }
.profile-btn:disabled { opacity:.6; cursor:default; transform:none; }

/* 称号徽章（个人主页） */
.profile-title-row { display:flex; justify-content:center; margin:2px 0 12px; }
.profile-title-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.78rem; font-weight:600; letter-spacing:.02em;
  padding:4px 12px; border-radius:999px;
  color:#ffe6a8; background:linear-gradient(135deg,rgba(255,196,84,.18),rgba(255,140,50,.14));
  border:1px solid rgba(255,196,84,.35);
}
.profile-title-empty { color:var(--text-dim); background:var(--bg-hover); border:1px dashed var(--border); }

/* 资料编辑区 */
.profile-edit { max-width:360px; margin:4px auto 18px; text-align:left; }
.pe-field { margin-bottom:14px; }
.pe-field label { display:block; font-size:0.82rem; color:var(--text-sec); margin-bottom:6px; }
.pe-hint { color:var(--text-dim); font-weight:400; font-size:0.72rem; }
.pe-field input {
  width:100%; box-sizing:border-box; padding:10px 12px;
  background:var(--bg-surface); border:1.5px solid var(--border);
  border-radius:var(--r-md,10px); color:var(--text); font-size:0.9rem;
  transition:border-color .15s;
}
.pe-field input:focus { outline:none; border-color:#8b6ffc; }
.pe-actions { display:flex; gap:12px; justify-content:center; margin-top:4px; }
.pe-msg { text-align:center; margin-top:10px; font-size:0.82rem; min-height:1em; }
.pe-msg-err { color:#ff7676; }
.profile-section {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:20px 24px; margin-bottom:16px;
}
.profile-section h3 {
  font-size:0.85rem; font-weight:700; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.profile-section h3 .badge { background:var(--accent); color:#fff; padding:0 8px; border-radius:8px; font-size:0.68rem; font-weight:700; }
.empty-text { font-size:0.85rem; color:var(--text-muted); padding:8px 0; }
.friend-list { display:flex; flex-direction:column; gap:2px; }
.friend-item { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:var(--r); transition:background var(--t); }
.friend-item:hover { background:var(--bg-hover); }
.friend-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700; color:#fff; flex-shrink:0; }
.friend-info { flex:1; min-width:0; }
.friend-name { font-size:0.88rem; font-weight:600; }
.friend-since { font-size:0.72rem; color:var(--text-muted); }
.friend-actions { display:flex; gap:4px; flex-shrink:0; }
.add-friend-form { display:flex; gap:8px; }
.add-friend-input {
  flex:1; padding:8px 12px; border-radius:var(--r);
  background:var(--bg-input); border:1px solid var(--border);
  color:var(--text); outline:none; font-size:0.85rem;
}
.add-friend-input:focus { border-color:var(--accent); }
.add-friend-input::placeholder { color:var(--text-muted); }

/* Account card embedded in settings page */
.settings-account-group .profile-card {
  background:transparent; border:none;
  padding:24px 12px; text-align:center;
}
.settings-account-group .profile-stats {
  justify-content:space-around; gap:16px;
}
.settings-account-group .profile-actions {
  justify-content:stretch; gap:16px;
}
.settings-account-group .profile-actions .profile-btn {
  flex:1; min-width:120px;
}
.settings-account-group .profile-edit {
  max-width:none; margin:4px 0 18px;
}
@media (max-width:768px) {
  .settings-account-group .profile-card { padding:16px 0; }
  .settings-account-group .profile-actions { flex-wrap:wrap; justify-content:center; }
  .settings-account-group .profile-actions .profile-btn { flex:1 1 45%; }
}


/* ══════════════════════════════════════════════════
   RESPONSIVE — Tablet
   ══════════════════════════════════════════════════ */
@media (max-width:1000px) {
  :root { --feed-max-width:600px; --avatar-size:48px; }
  .avatar-popup { width:280px; }
}


/* ══════════════════════════════════════════════════
   RESPONSIVE — Mobile (社交信息流，大头像+称号)
   ══════════════════════════════════════════════════ */
@media (max-width:900px) {
  :root {
    --feed-max-width:100%;
    --avatar-size:var(--avatar-mobile-size); /* 44px */
  }

  /* Login single column */
  .login-page { grid-template-columns:1fr; }
  .login-left { display:none; }
  .login-right {
    padding:calc(30px + env(safe-area-inset-top)) 20px calc(30px + env(safe-area-inset-bottom));
    min-height:100vh; min-height:100dvh;
  }
  .login-entry { max-width:100%; padding:0 10px; }
  .login-badge { width:120px; height:120px; }
  .login-school-name { font-size:1.7rem; letter-spacing:1px; }
  .login-motto { font-size:0.82rem; margin-bottom:24px; }
  .login-actions { flex-direction:column; gap:12px; width:80%; }
  .btn-signin, .btn-signup { width:100%; padding:14px 32px; }
  .login-card { width:92vw; padding:36px 24px 28px; }

  /* Nav bar adjustments */
  .top-nav { height:48px; padding:0 12px; }
  .nav-channel-desc { display:none; }
  .nav-channel-info { gap:8px; padding:4px 0 5px 10px; border-radius:11px 0 0 11px; }
  .nav-channel-info::after { width:80px; top:4px; bottom:4px; }  /* 移动端拖尾缩短 */
  .ch-card-bar { top:7px; bottom:7px; width:3px; }
  .nav-avatar { width:30px; height:30px; font-size:0.75rem; }
  .welcome-card { padding:14px 16px; gap:12px; }
  .welcome-hero { width:44px; height:44px; border-radius:12px; }
  .welcome-hero .hi { transform:scale(1.05); }
  .welcome-text h3 { font-size:1.1rem; }

  /* Drawer stays same size but with safe areas already handled */
  .channel-drawer { width:280px; }

  /* Avatar popup becomes full-screen drawer on mobile */
  .avatar-popup {
    width:100vw; max-width:100vw;
    top:auto; right:0; bottom:0; height:60vh;
    border-radius:16px 16px 0 0;
    border-left:none; border-top:1px solid var(--border);
    box-shadow:0 -4px 32px rgba(0,0,0,0.4);
    transform:translateY(100%);
  }
  .avatar-popup.open { transform:translateY(0); }
  .popup-handle { display:block; } /* drag handle visible on mobile */

  /* 移动端：avatar-popup 里显示热门话题 */
  #popup-hot-topics { display:block; }
  #popup-hot-topics .sidebar-list { padding:0; }
  #popup-hot-topics .hot-card { padding:10px 8px; margin:0 -4px; }

  /* ═══★ MOBILE FEED (贴吧极简流) ★═══ */
  /* 两栏→单栏：隐藏右侧边栏，feed满宽 */
  .channel-main { grid-template-columns:1fr; }
  .right-sidebar { display:none; }
  .feed-wrapper { display:flex; flex-direction:column; }

  /* 去掉卡片盒子 → 极简列表，不同用户间仅细分隔线 */
  .msg-group {
    display:flex; flex-direction:column; padding:12px 14px; gap:8px;
    background:transparent; border-radius:0;
    margin:0; box-shadow:none;
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .msg-group:last-child { border-bottom:none; }
.messages-area > * { padding:0 0 0 16px; }
.messages-area { padding:0 0 16px !important; align-items:flex-start !important; }

  /* 头部：头像 + 昵称/称号 横排 */
  .msg-feed-left {
    flex-direction:row; align-items:center; gap:10px;
    width:auto; flex-shrink:0;
  }
  .msg-feed-avatar { width:40px; height:40px; font-size:1rem; }
  .msg-feed-meta {
    flex-direction:row; align-items:center; gap:5px;
    text-align:left; width:auto; flex-wrap:wrap;
  }
  .msg-feed-name { font-size:0.9rem; font-weight:600; max-width:none; }
  .msg-feed-role .role-badge { font-size:0.6rem; }
  .msg-feed-title { font-size:0.65rem; }

  /* 内容区 */
  .msg-feed-body { gap:6px; }

  /* 图片满宽（抖音风格） */
  .msg-img-wrap {
    max-width:100%; border-radius:12px; aspect-ratio:auto;
    overflow:hidden; margin-top:4px;
  }
  .msg-img-wrap img { object-fit:cover; min-height:180px; max-height:400px; width:100%; }
  .msg-img-gallery { flex-direction:column; gap:8px; }
  .msg-img-gallery .msg-img-wrap { max-width:100%; }

  /* 底部互动栏：时间、❤️ 💬 ↗️ 紧凑靠右（无浏览量） */
  .msg-interactions {
    justify-content:flex-end; padding:4px 16px 0 0; margin-top:2px;
    border-top:none; gap:12px;
  }
  .msg-interact-btn {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 8px; font-size:0.82rem; color:var(--text-dim);
    background:none; border:none; cursor:pointer;
    transition:color var(--t), transform var(--t);
  }
  .msg-interact-btn:active { transform:scale(0.9); }
  .msg-interact-btn.liked { color:#f43f5e; }
  .msg-interact-count { font-size:0.76rem; }
  /* 浏览量在移动端完全隐藏 */
  .msg-views { display:none !important; }

  /* 回复按钮隐藏（合并到💬） */
  .msg-actions { display:none !important; }

  /* ═══ 移动端 FAB 尺寸微调（位置已全局为左上角） ═══ */
  .msg-fab {
    width:44px; height:44px; font-size:1.4rem;
    box-shadow:0 3px 12px rgba(124,92,252,0.35);
  }

  /* ═══ 移动端输入栏弹出样式（紧凑浮层） ═══ */
  .message-input-area.input-visible {
    position:fixed; bottom:0; left:0; right:0;
    z-index:35; padding:8px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--bg-surface); border-top:1px solid var(--border);
    box-shadow:0 -2px 12px rgba(0,0,0,0.2);
  }
  .message-input-area.input-visible .message-input-wrapper {
    background:var(--bg-elevated);
    padding:0 10px;
  }
  .message-input-area.input-visible .msg-input {
    padding:9px 6px;
  }

  /* ═══ 移动端评论区微调（抖音/贴吧风格） ═══ */
  .msg-comment-section { padding-left:0; }
  .msg-comment-avatar { width:34px; height:34px; font-size:0.72rem; }
  .msg-comment-item:not([data-depth="0"]) { margin-left:24px; }
  .msg-comment-item:not([data-depth="0"]) .msg-comment-avatar { width:24px; height:24px; font-size:0.55rem; }
  .comment-name, .reply-target { font-size:0.76rem; }
  .reply-arrow { font-size:0.62rem; margin:0 2px; }
  .msg-comment-text { font-size:0.95rem; }
  .comment-time, .comment-dot, .comment-reply-text { font-size:0.66rem; }
  .comment-like-btn, .comment-dislike-btn { font-size:1rem; }
  .comment-like-count { font-size:0.65rem; }
  .comment-like-col { min-width:40px; gap:5px; }
  .comment-like-row { gap:2px; min-height:18px; }
  .msg-comment-item { gap:10px; padding:10px 0 8px; }
  .msg-comment-item:not([data-depth="0"]) { padding:6px 0; }
  .comment-footer-bar { gap:22px; font-size:0.75rem; padding:12px 0 4px; }

  /* Interaction buttons always visible on mobile (no hover) */
  .msg-hover-actions { opacity:1; position:relative; right:auto; top:auto; justify-content:flex-end; margin-bottom:4px; }

  /* Touch targets */
  .icon-btn, .send-btn, .attach-btn, .emoji-btn { width:44px; height:44px; }
  .ch-item { min-height:44px; padding:11px 10px; }
  .hamburger-btn, .nav-icon-btn, .nav-avatar-btn { width:44px; height:44px; }
  .modal-close { width:44px; height:44px; top:12px; right:12px; }
  .toggle-pw { width:44px; height:44px; padding:0; right:8px; display:flex; align-items:center; justify-content:center; }
  .login-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]) { padding:14px 42px 14px 42px; font-size:16px; }
  .input-hint { font-size:0.78rem; margin:7px 0 -6px 2px; }
  .quick-action { min-height:44px; }
  .msg-input { font-size:16px; }
  .notify-dropdown { width:min(320px, calc(100vw - 24px)); max-height:calc(100dvh - 120px); }

  /* Image gallery: single column on mobile */
  .msg-img-gallery { flex-direction:column; }
  .msg-img-wrap { max-width:100%; }

  /* Message continuation offset */
  .msg-continuation { padding-left:calc(var(--avatar-mobile-size) + 26px); }
}


/* ══════════════════════════════════════════════════
   REDUCED MOTION (WCAG 2.2 AA)
   ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #stars-canvas, #main-dots, .login-carousel-container, .login-badge::after {
    display:none !important;
  }
  .login-modal-overlay, .login-card-modal, .channel-drawer, .drawer-overlay,
  .avatar-popup, .avatar-popup-overlay, .notify-dropdown, .msg-group {
    animation:none !important; transition:opacity 0.01ms linear !important;
  }
  .login-modal-overlay.active, .login-card-modal,
  .channel-drawer.open, .drawer-overlay.active,
  .avatar-popup.open, .avatar-popup-overlay.active,
  .notify-dropdown[style*="block"] {
    opacity:1 !important; transform:none !important; visibility:visible !important;
  }
  .login-school-name, .login-school-name .gradient-text, .login-school-name::after {
    animation:none !important; background:none !important;
    -webkit-background-clip:border-box !important; color:var(--text) !important; opacity:1 !important;
  }
  /* GSAP: skip all animated elements */
  .msg-group { opacity:1 !important; transform:none !important; }
}


/* ══════════════════════════════════════════════════
   SKELETON LOADER
   ══════════════════════════════════════════════════ */
.msg-skeleton { display:flex; gap:12px; padding:14px 16px; }
.msg-skeleton .sk-avatar {
  width:var(--avatar-size); height:var(--avatar-size);
  border-radius:50%; background:var(--bg-elevated); flex-shrink:0;
}
.msg-skeleton .sk-body { flex:1; display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.msg-skeleton .sk-line { height:12px; border-radius:4px; background:var(--bg-elevated); position:relative; overflow:hidden; }
.msg-skeleton .sk-line:first-child { width:28%; }
.msg-skeleton .sk-line:nth-child(2) { width:72%; }
.msg-skeleton .sk-line:nth-child(3) { width:48%; }
.sk-line::after {
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  animation:skShimmer 1.8s infinite;
}
@keyframes skShimmer { 100% { transform:translateX(100%); } }
@keyframes skBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ═══ 频道专属骨架屏（GSAP 动画驱动） ═══ */
.skeleton-wrapper { padding:20px 16px; min-height:300px; }
.sk-channel { display:flex; flex-direction:column; gap:16px; }

/* ── 公告栏：打字机风格 ── */
.sk-notice { align-items:flex-start; gap:12px; }
.sk-n-icon { font-size:1.6rem; flex-shrink:0; padding-top:2px; }
.sk-n-body { flex:1; display:flex; flex-direction:column; gap:10px; }
.sk-n-line { height:14px; border-radius:4px; background:rgba(251,191,36,0.08); position:relative; overflow:hidden; }
.sk-n-line.short { width:55%; }
.sk-n-line span { display:block; height:100%; width:0%; background:linear-gradient(90deg, rgba(251,191,36,0.3), rgba(245,158,11,0.2)); border-radius:4px; }

/* ── 综合大厅：弹跳圆圈 + 脉冲线 ── */
.sk-general { gap:12px; }
.sk-b-row { display:flex; gap:10px; padding:4px 0; }
.sk-b-dot { width:14px; height:14px; border-radius:50%; background:var(--accent); opacity:0.7; flex-shrink:0; }
.sk-p-lines { display:flex; flex-direction:column; gap:8px; }
.sk-pl { height:13px; border-radius:5px; background:rgba(124,92,252,0.1); transform-origin:left; }
.sk-pl.short { width:50%; }

/* ── 学习园地：书本翻页 ── */
.sk-study { gap:14px; }
.sk-book { display:flex; gap:2px; height:32px; margin-bottom:4px; position:relative; }
.sk-bk-spine { width:4px; background:#a78bfa; border-radius:2px; }
.sk-bk-page { flex:1; background:rgba(167,139,250,0.06); border-radius:2px 4px 4px 2px; transform-origin:left center; border:1px solid rgba(167,139,250,0.1); }
.sk-t-lines { display:flex; flex-direction:column; gap:8px; }
.sk-tl { height:12px; border-radius:4px; background:rgba(167,139,250,0.08); }
.sk-tl.short { width:45%; }

/* ── 生活日常：呼吸波纹 ── */
.sk-life { gap:12px; }
.sk-w-avatar { width:40px; height:40px; border-radius:50%; background:rgba(16,185,129,0.1); position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.sk-w-ring { position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(16,185,129,0.2); }
.sk-br-lines { display:flex; flex-direction:column; gap:8px; }
.sk-bl { height:12px; border-radius:6px; background:rgba(16,185,129,0.08); }
.sk-bl.short { width:40%; }

/* ── 二次元世界：星星彩虹 ── */
.sk-anime { gap:12px; position:relative; overflow:hidden; }
.sk-s-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg, rgba(255,107,157,0.15), rgba(197,108,240,0.15)); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.sk-r-lines { display:flex; flex-direction:column; gap:8px; }
.sk-rl { height:13px; border-radius:6px;
  background: linear-gradient(90deg,
    rgba(255,107,157,0.12), rgba(197,108,240,0.12),
    rgba(23,192,235,0.12), rgba(255,211,42,0.12),
    rgba(255,107,157,0.12));
  background-size: 200% 100%;
}
.sk-rl.short { width:42%; }
.sk-f-stars { display:flex; gap:16px; padding:4px 0; font-size:1rem; color:rgba(255,107,157,0.5); }
.sk-f-stars span { animation:skFloatStar 2s ease-in-out infinite; }
.sk-f-stars span:nth-child(2) { animation-delay:0.6s; }
.sk-f-stars span:nth-child(3) { animation-delay:1.2s; }
@keyframes skFloatStar {
  0%,100%{transform:translateY(0);opacity:0.5;} 50%{transform:translateY(-8px);opacity:1;}
}

/* ===== 消息互动：转发预览卡（HuLa 范式） ===== */
.msg-forward { margin:0 0 8px; }
.msg-forward-head { font-size:0.78rem; color:var(--text-sec); margin-bottom:4px; }
.msg-forward-card {
  background:var(--bg-elevated, rgba(255,255,255,0.04));
  border:1px solid var(--border, rgba(255,255,255,0.08));
  border-radius:10px; padding:8px 10px;
  font-size:0.84rem; color:var(--text); line-height:1.5;
  max-height:96px; overflow:hidden; word-break:break-word;
}
.msg-comment-empty { padding:12px 14px; color:var(--text-muted); font-size:0.84rem; }

/* ===== 转发弹窗 ===== */
.modal-mask {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.modal-box {
  width:min(420px, 92vw);
  background:var(--bg, #1a1a2e);
  border:1px solid var(--border, rgba(255,255,255,0.1));
  border-radius:16px; padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:commentSlide 0.22s ease;
}
.modal-title { font-size:1.05rem; font-weight:700; margin-bottom:12px; }
.forward-preview {
  background:var(--bg-elevated, rgba(255,255,255,0.04));
  border-radius:10px; padding:10px 12px;
  font-size:0.85rem; color:var(--text); line-height:1.5;
  max-height:80px; overflow:hidden; margin-bottom:12px;
  word-break:break-word;
}
.forward-hint { font-size:0.82rem; color:var(--text-sec); margin-bottom:8px; }
.forward-channels { display:flex; flex-direction:column; gap:8px; max-height:240px; overflow:auto; }
.forward-ch-item {
  text-align:left; padding:10px 14px; border-radius:10px;
  border:1px solid var(--border, rgba(255,255,255,0.1));
  background:var(--bg-elevated, rgba(255,255,255,0.03));
  color:var(--text); font-size:0.9rem; cursor:pointer;
  transition:background 0.15s, border-color 0.15s;
}
.forward-ch-item:hover { background:rgba(167,139,250,0.12); border-color:rgba(167,139,250,0.4); }
.forward-section-title {
  font-size:0.78rem; font-weight:600; color:var(--text-sec);
  margin:14px 0 8px; letter-spacing:0.04em;
}
.share-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.share-item {
  padding:10px 8px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border, rgba(255,255,255,0.1));
  background:var(--bg-elevated, rgba(255,255,255,0.03));
  color:var(--text); font-size:0.82rem; text-align:center;
  transition:background 0.15s, border-color 0.15s, transform 0.1s;
}
.share-item:hover { background:rgba(167,139,250,0.12); border-color:rgba(167,139,250,0.4); }
.share-item:active { transform:scale(0.96); }
.share-tip { font-size:0.8rem; color:var(--text-sec); margin:12px 0 8px; text-align:center; }
.wx-qr { display:flex; justify-content:center; }
.wx-qr canvas, .wx-qr img { border-radius:8px; background:#fff; padding:6px; }
.card-preview-box { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:12px; }
.card-preview-img { width:100%; max-width:280px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.modal-actions { margin-top:16px; display:flex; justify-content:flex-end; }
.btn-cancel {
  padding:8px 18px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border, rgba(255,255,255,0.12));
  background:transparent; color:var(--text-sec); font-size:0.88rem;
}

/* ══════════════════════════════════════════════════════════════
   好友列表（头像弹窗内，原快捷操作区）
   ══════════════════════════════════════════════════════════════ */
.friend-list {
  display:flex; flex-direction:column; gap:6px;
  max-height:264px; overflow-y:auto; margin-top:8px;
  padding-right:2px;
}
.friend-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--r);
  background:var(--bg-surface);
  cursor:pointer; user-select:none;
  transition:background var(--t), transform var(--t);
  position:relative;
}
.friend-item:hover { background:var(--bg-hover); transform:translateX(2px); }
.friend-item:active { background:var(--bg-active); }
.friend-avatar {
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; font-weight:600; font-size:15px;
  overflow:hidden;
}
.friend-avatar img { width:100%; height:100%; object-fit:cover; }
.friend-name {
  flex:1; min-width:0; color:var(--text); font-size:14px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.friend-badge {
  flex:0 0 auto; min-width:20px; height:20px; padding:0 6px;
  border-radius:10px; background:var(--red); color:#fff;
  font-size:12px; font-weight:700; line-height:20px; text-align:center;
  display:none;
}
.friend-item.has-unread .friend-badge { display:block; }

/* 主题专属适配 */
[data-theme="starry"] .friend-avatar {
  box-shadow:0 0 0 2px var(--accent-g), 0 0 14px var(--accent-g);
}
[data-theme="starry"] .friend-item { backdrop-filter:blur(6px); background:var(--bg-surface); }
[data-theme="starry"] .friend-item:hover { background:var(--bg-hover); }
[data-theme="classroom"] .friend-item { border-radius:var(--r-md); }
[data-theme="classroom"] .friend-item:hover { transform:translateY(-1px); box-shadow:var(--sh-sm); }
[data-theme="light"] .friend-item { box-shadow:var(--sh-sm); }
[data-theme="light"] .friend-item:hover { box-shadow:var(--sh); }

/* ══════════════════════════════════════════════════════════════
   DM 返回箭头（顶部 nav-left，进入私聊时显示）
   ══════════════════════════════════════════════════════════════ */
.dm-back-btn {
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  display:none; align-items:center; justify-content:center;
  background:var(--bg-surface); color:var(--text);
  border:1px solid var(--border-light);
  transition:background var(--t), color var(--t);
  will-change:transform;
}
.dm-back-btn:hover { background:var(--bg-hover); color:var(--accent); }
.dm-back-btn svg { display:block; }
/* 进入私聊：显示返回箭头，隐藏 hamburger / 服务器徽标 / # 前缀 */
body.dm-mode #dm-back-btn { display:flex !important; }
body.dm-mode #hamburger-btn,
body.dm-mode .nav-hash { display:none !important; }

[data-theme="starry"] .dm-back-btn {
  backdrop-filter:blur(10px); background:var(--bg-elevated);
}
[data-theme="starry"] .dm-back-btn:hover { background:var(--bg-hover); }
[data-theme="classroom"] .dm-back-btn { border-radius:var(--r-md); }
[data-theme="light"] .dm-back-btn { box-shadow:var(--sh-sm); }

/* ══════════════════════════════════════════════════════════════
   PC 三栏布局：频道抽屉常驻左栏
   断点 900px —— ≥901px 生效三栏，≤900px 保持原移动布局
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  :root { --left-w: 260px; }

  /* 父容器改为横排 flex：左侧抽屉 + 右侧主区
     （仅当 view-main 激活时生效，不破坏 .view{display:none} 隐藏机制）*/
  #view-main.active {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .app-shell {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* 频道抽屉：从「浮层滑出」变为「常驻左列」*/
  .channel-drawer {
    position: static !important;
    top: auto !important; left: auto !important; bottom: auto !important;
    width: var(--left-w);
    max-width: var(--left-w);
    height: auto !important;
    max-height: none !important;
    min-height: 100vh;
    min-height: 100dvh;
    transform: none !important;
    box-shadow: none !important;
    border-right: 1px solid var(--border);
    z-index: auto !important;
    will-change: auto;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow-y: auto;
    flex-shrink: 0;
    order: -1;
  }
  .channel-drawer.open { transform: none !important; }

  /* 浮层遮罩在 PC 常驻布局下不再需要 */
  .drawer-overlay { display: none !important; }

  /* PC 隐藏汉堡按钮（左栏已常驻）*/
  .hamburger-btn { display: none !important; }

  /* 消息流：左对齐、铺满中间列（去掉 720px 上限）*/
  .messages-area { align-items: flex-start !important; padding:12px 0 4px 56px !important; }
  .messages-area > * { max-width: none !important; padding:0 !important; }
}
.btn-cancel:hover { background:rgba(255,255,255,0.06); }