/* ============================================================
   星光留言邮局 - 主样式
   主题：star 星空 / cloud 云端 / sea 海边（body[data-theme]）
   ============================================================ */

:root {
  --radius: 18px;
  --card-bg: rgba(255, 255, 255, 0.08);
  --card-border: rgba(255, 255, 255, 0.16);
  --text: #f4f6ff;
  --text-dim: rgba(244, 246, 255, 0.66);
  --accent: #ffd97a;
  --accent-2: #b7a6ff;
  --btn-primary: linear-gradient(135deg, #ffd97a, #ffb36b);
  --btn-primary-text: #3a2a10;
  --danger: #ff8a8a;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  background: #0b1026;
  line-height: 1.65;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { vertical-align: middle; }

/* ============ 动态背景 ============ */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  transition: background 1.2s ease;
}

/* —— 星空 —— */
body[data-theme="star"] .bg-scene {
  background: linear-gradient(180deg, #05070f 0%, #10142e 45%, #241c4e 78%, #2f2350 100%);
}
.bg-star-layer { position: absolute; inset: 0; }
.bg-star-layer .star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
.bg-moon {
  position: absolute;
  top: 9%;
  right: 12%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7e0, #ffe9a8 55%, #f6c96b);
  box-shadow: 0 0 60px 22px rgba(255, 233, 168, 0.35);
  display: none;
}
body[data-theme="star"] .bg-moon { display: block; }
.bg-shooting-star {
  position: absolute;
  width: 130px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff, transparent);
  top: 18%;
  left: 60%;
  opacity: 0;
  transform: rotate(-28deg);
  display: none;
}
body[data-theme="star"] .bg-shooting-star {
  display: block;
  animation: shoot 7s ease-in-out 2s infinite;
}
@keyframes shoot {
  0% { transform: translate(0, 0) rotate(-28deg); opacity: 0; }
  4% { opacity: 1; }
  10% { transform: translate(-520px, 270px) rotate(-28deg); opacity: 0; }
  100% { transform: translate(-520px, 270px) rotate(-28deg); opacity: 0; }
}

/* —— 云端 —— */
body[data-theme="cloud"] .bg-scene {
  background: linear-gradient(180deg, #7ec9f0 0%, #a8dcf7 40%, #dff1fb 75%, #f6fbff 100%);
}
.bg-cloud-layer { position: absolute; inset: 0; display: none; }
body[data-theme="cloud"] .bg-cloud-layer { display: block; }
.bg-cloud {
  position: absolute;
  border-radius: 60px;
  background: #fff;
  opacity: 0.85;
  filter: blur(1px);
  animation: drift linear infinite;
}
.bg-cloud::before,
.bg-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.bg-cloud.c1 { width: 210px; height: 60px; top: 16%; animation-duration: 42s; }
.bg-cloud.c1::before { width: 90px; height: 90px; top: -38px; left: 34px; }
.bg-cloud.c1::after  { width: 70px; height: 70px; top: -26px; left: 96px; }
.bg-cloud.c2 { width: 150px; height: 46px; top: 34%; animation-duration: 56s; animation-delay: -20s; opacity: 0.7; }
.bg-cloud.c2::before { width: 64px; height: 64px; top: -28px; left: 24px; }
.bg-cloud.c2::after  { width: 50px; height: 50px; top: -18px; left: 70px; }
.bg-cloud.c3 { width: 260px; height: 70px; top: 8%; animation-duration: 64s; animation-delay: -40s; opacity: 0.55; }
.bg-cloud.c3::before { width: 104px; height: 104px; top: -46px; left: 40px; }
.bg-cloud.c3::after  { width: 80px; height: 80px; top: -32px; left: 118px; }
@keyframes drift {
  from { transform: translateX(-320px); }
  to { transform: translateX(calc(100vw + 320px)); }
}
.bg-sun {
  position: absolute;
  top: 8%;
  left: 14%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fffbe0, #ffe9a0 60%, #ffd76b);
  box-shadow: 0 0 70px 30px rgba(255, 231, 160, 0.5);
  display: none;
}
body[data-theme="cloud"] .bg-sun { display: block; }
body[data-theme="sea"] .bg-sun { display: block; }

/* —— 海边 —— */
body[data-theme="sea"] .bg-scene {
  background: linear-gradient(180deg, #59b7e8 0%, #8ed3f2 45%, #c2ecf7 72%, #7cc8e8 100%);
}
.bg-sea-layer { position: absolute; inset: 0; display: none; }
body[data-theme="sea"] .bg-sea-layer { display: block; }
.bg-wave {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 90px;
  border-radius: 45% 45% 0 0 / 60% 60% 0 0;
  background: rgba(255, 255, 255, 0.35);
  animation: waveMove 9s linear infinite;
}
.bg-wave.w2 { bottom: -26px; height: 120px; background: rgba(255, 255, 255, 0.28); animation-duration: 13s; animation-direction: reverse; }
.bg-wave.w3 { bottom: -58px; height: 150px; background: rgba(120, 190, 230, 0.45); animation-duration: 17s; }
@keyframes waveMove {
  from { transform: translateX(0); }
  to { transform: translateX(-8%); }
}

/* ============ 浅色主题适配（云端/海边 = 白天，文字用深色；星空 = 夜晚，文字保持白色） ============ */
body[data-theme="cloud"],
body[data-theme="sea"] {
  --text: #1e2b3f;
  --text-dim: rgba(30, 43, 63, 0.66);
  --card-bg: rgba(255, 255, 255, 0.62);
  --card-border: rgba(30, 43, 63, 0.16);
  --accent: #b0661e;
  --accent-2: #5b4fae;
}
body[data-theme="cloud"] { background: #7ec9f0; }
body[data-theme="sea"] { background: #59b7e8; }

/* 浅色主题：表单与输入 */
body[data-theme="cloud"] textarea,
body[data-theme="cloud"] input[type="text"],
body[data-theme="cloud"] input[type="email"],
body[data-theme="cloud"] input[type="password"],
body[data-theme="cloud"] input[type="datetime-local"],
body[data-theme="cloud"] input[type="file"],
body[data-theme="sea"] textarea,
body[data-theme="sea"] input[type="text"],
body[data-theme="sea"] input[type="email"],
body[data-theme="sea"] input[type="password"],
body[data-theme="sea"] input[type="datetime-local"],
body[data-theme="sea"] input[type="file"] {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(30, 43, 63, 0.24);
}
body[data-theme="cloud"] input::placeholder,
body[data-theme="cloud"] textarea::placeholder,
body[data-theme="sea"] input::placeholder,
body[data-theme="sea"] textarea::placeholder { color: rgba(30, 43, 63, 0.42); }

/* 浅色主题：头像描边 */
body[data-theme="cloud"] .mini-avatar,
body[data-theme="sea"] .mini-avatar,
body[data-theme="cloud"] .post-avatar,
body[data-theme="sea"] .post-avatar,
body[data-theme="cloud"] .user-avatar-lg,
body[data-theme="sea"] .user-avatar-lg,
body[data-theme="cloud"] #avatarPreview,
body[data-theme="sea"] #avatarPreview { border-color: rgba(30, 43, 63, 0.3); }

/* 浅色主题：标签深色化 */
body[data-theme="cloud"] .tag-anon,
body[data-theme="sea"] .tag-anon { background: rgba(120, 105, 220, 0.16); color: #4f3f9e; }
body[data-theme="cloud"] .tag-future,
body[data-theme="sea"] .tag-future { background: rgba(210, 150, 30, 0.2); color: #8a5a06; }
body[data-theme="cloud"] .tag-private,
body[data-theme="sea"] .tag-private { background: rgba(90, 95, 115, 0.15); color: #4e5366; }
body[data-theme="cloud"] .tag-pending,
body[data-theme="sea"] .tag-pending { background: rgba(220, 80, 80, 0.16); color: #a33a3a; }
body[data-theme="cloud"] .tag-public,
body[data-theme="sea"] .tag-public { background: rgba(40, 170, 120, 0.16); color: #14684b; }

/* 浅色主题：flash 提示 */
body[data-theme="cloud"] .flash-ok,
body[data-theme="sea"] .flash-ok { color: #14684b; }
body[data-theme="cloud"] .flash-err,
body[data-theme="sea"] .flash-err { color: #a33a3a; }

/* 浅色主题：单选卡片 / 主题切换 / 下拉菜单 */
body[data-theme="cloud"] .radio-card,
body[data-theme="sea"] .radio-card { background: rgba(255, 255, 255, 0.72); }
body[data-theme="cloud"] .theme-switch,
body[data-theme="sea"] .theme-switch { background: rgba(255, 255, 255, 0.55); }
body[data-theme="cloud"] .user-menu-drop,
body[data-theme="sea"] .user-menu-drop {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(30, 43, 63, 0.2);
  box-shadow: 0 10px 30px rgba(30, 43, 63, 0.18);
}
body[data-theme="cloud"] .user-menu-drop a:hover,
body[data-theme="sea"] .user-menu-drop a:hover { background: rgba(30, 43, 63, 0.08); }

/* 浅色主题：私信气泡（对方） */
body[data-theme="cloud"] .bubble-text,
body[data-theme="sea"] .bubble-text { background: rgba(255, 255, 255, 0.85); }

/* 浅色主题：滚动条 */
body[data-theme="cloud"] ::-webkit-scrollbar-thumb,
body[data-theme="sea"] ::-webkit-scrollbar-thumb { background: rgba(30, 43, 63, 0.25); }

/* ============ 顶栏 ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(10, 14, 34, 0.42);
  border-bottom: 1px solid var(--card-border);
}
body[data-theme="cloud"] .topbar,
body[data-theme="sea"] .topbar { background: rgba(255, 255, 255, 0.35); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 18px; }

.topbar-inner { display: flex; align-items: center; gap: 22px; height: 62px; }

.brand { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: 1px; color: var(--text); }
.brand:hover { text-decoration: none; }

.main-nav { display: flex; gap: 4px; flex: 1; }
.main-nav a {
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 14.5px;
  transition: all .25s;
}
.main-nav a:hover { color: var(--text); background: rgba(255,255,255,.12); text-decoration: none; }
.main-nav a.on { color: var(--accent); background: rgba(255, 217, 122, 0.14); font-weight: 600; }
.nav-msg { position: relative; }

.topbar-right { display: flex; align-items: center; gap: 14px; }

/* 主题切换 */
.theme-switch { display: flex; gap: 5px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.14); }
.ts-btn {
  border: none;
  cursor: pointer;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-dim);
  background: transparent;
  transition: all .25s;
}
.ts-btn:hover { color: var(--text); }
.ts-btn.on { background: rgba(255,255,255,.28); color: var(--text); font-weight: 600; }

/* 用户菜单 */
.user-menu { position: relative; }
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 999px;
}
.user-menu-btn:hover { background: rgba(255,255,255,.12); }
.mini-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.4); }
.user-menu-drop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 140px;
  background: rgba(20, 24, 52, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 6px;
  display: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.user-menu-drop.show { display: block; }
.user-menu-drop a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text); font-size: 14px; }
.user-menu-drop a:hover { background: rgba(255,255,255,.12); text-decoration: none; }

/* 按钮 */
.btn {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
  text-align: center;
  color: var(--text);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--btn-primary); color: var(--btn-primary-text); }
.btn-primary:hover { box-shadow: 0 8px 22px rgba(255, 179, 107, 0.4); }
.btn-ghost { background: transparent; border-color: var(--card-border); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 13px 30px; font-size: 16px; }
.btn-block { display: block; width: 100%; }
.auth-btns { display: flex; gap: 8px; }

/* 徽标 */
.msg-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a7a, #ff4d6d);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* ============ 页面主体 ============ */
.page-main { padding: 34px 18px 60px; }

h1 { font-size: 30px; letter-spacing: 1.5px; }
.hero-sub { color: var(--text-dim); margin: 10px 0 24px; font-size: 15px; }

.wall-hero { text-align: center; padding: 34px 0 30px; }
.wall-hero h1 { font-size: 38px; }

/* 卡片 */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

/* 帖子卡片 */
.wall { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.post-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20px 22px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  transition: transform .25s, box-shadow .25s;
}
.post-card:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.24); }
.post-head { margin-bottom: 10px; }
.post-author { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.post-author:hover { text-decoration: none; }
.post-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.35); }
.post-name { font-weight: 600; font-size: 15.5px; }
.post-content { font-size: 15.5px; white-space: pre-wrap; word-break: break-word; margin-bottom: 12px; }
.post-foot { display: flex; align-items: center; justify-content: space-between; color: var(--text-dim); font-size: 13px; }
.btn-comment {
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  padding: 5px 13px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  transition: all .2s;
}
.btn-comment:hover { color: var(--accent); border-color: var(--accent); }

/* 标签 */
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}
.tag-anon { background: rgba(183, 166, 255, 0.22); color: #d6cdff; }
.tag-future { background: rgba(255, 217, 122, 0.2); color: var(--accent); }
.tag-private { background: rgba(140, 140, 160, 0.25); color: #c9c9dd; }
.tag-pending { background: rgba(255, 138, 138, 0.2); color: #ffb1b1; }
.tag-public { background: rgba(120, 220, 170, 0.2); color: #a5ecc6; }

/* 评论 */
.comments-box { margin-top: 14px; border-top: 1px dashed var(--card-border); padding-top: 12px; }
.comments-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.cmt-item { display: flex; gap: 10px; }
.cmt-item.reply { margin-left: 34px; }
.cmt-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cmt-body { flex: 1; }
.cmt-head { font-size: 13px; color: var(--text-dim); }
.cmt-name { color: var(--text); font-weight: 600; margin-right: 8px; }
.cmt-replyto { color: var(--accent-2); }
.cmt-text { font-size: 14px; word-break: break-word; }
.cmt-actions { font-size: 12px; margin-top: 2px; }
.cmt-actions button { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0; font-size: 12px; }
.cmt-actions button:hover { color: var(--accent); }
.reply-input { display: none; margin-top: 6px; }
.reply-input.show { display: flex; gap: 8px; }
.reply-input textarea { flex: 1; }
.comment-form { display: flex; gap: 10px; align-items: flex-start; }
.comment-form textarea { flex: 1; }
.login-hint { font-size: 13px; color: var(--text-dim); }

/* 表单 */
textarea, input[type="text"], input[type="email"], input[type="password"], input[type="datetime-local"], input[type="file"] {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 14.5px;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
textarea { resize: vertical; min-height: 60px; }
textarea:focus, input:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.4); }

.field { display: block; margin-bottom: 20px; }
.field > span:first-child { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.field-hint { display: block; text-align: right; font-size: 12px; color: var(--text-dim); margin-top: 4px; }

/* 单选卡片 */
.radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-card {
  position: relative;
  flex: 1;
  min-width: 150px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.07);
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.radio-card input { position: absolute; opacity: 0; }
.radio-title { font-weight: 600; font-size: 15px; }
.radio-sub { font-size: 12.5px; color: var(--text-dim); }
.radio-card.sel, .radio-card:has(input:checked) { border-color: var(--accent); background: rgba(255, 217, 122, 0.12); box-shadow: 0 0 0 1px var(--accent) inset; }
.check-line { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; margin-bottom: 8px; }
.check-line input { width: auto; }

/* flash 提示 */
.flash {
  padding: 11px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid;
}
.flash-ok { background: rgba(120, 220, 170, 0.14); border-color: rgba(120,220,170,.4); color: #b6f5d6; }
.flash-err { background: rgba(255, 138, 138, 0.14); border-color: rgba(255,138,138,.4); color: #ffc2c2; }

/* 登录/注册卡片 */
.auth-card {
  max-width: 430px;
  margin: 40px auto 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  backdrop-filter: blur(12px);
  padding: 34px 34px 26px;
  box-shadow: 0 16px 50px rgba(0,0,0,.25);
}
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-icon { font-size: 34px; margin-bottom: 6px; }
.auth-head h1 { font-size: 24px; }
.auth-head p { color: var(--text-dim); font-size: 13.5px; margin-top: 6px; }
.auth-form .field input { background: rgba(255,255,255,.08); }
.auth-switch { text-align: center; margin-top: 18px; font-size: 14px; color: var(--text-dim); }

/* 写信页 */
.post-page { max-width: 700px; margin: 0 auto; }
.post-form { padding: 26px; margin-top: 8px; }
.reveal-field { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }

/* 邮筒 */
.section-title { margin: 34px 0 16px; font-size: 21px; }
.section-tip { font-size: 13px; color: var(--text-dim); font-weight: 400; }
.future-list { display: flex; flex-direction: column; gap: 14px; }
.future-card {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  align-items: flex-start;
}
.future-seal {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 217, 122, 0.16);
  border: 1px solid rgba(255, 217, 122, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.future-card.sealed .future-seal { background: rgba(255,138,138,.14); border-color: rgba(255,138,138,.45); }
.future-info { flex: 1; }
.future-status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.future-eta { font-size: 12.5px; color: var(--text-dim); }
.countdown { font-variant-numeric: tabular-nums; }
.future-content { font-size: 15px; margin-bottom: 6px; }
.future-content.sealed-blur { filter: blur(5px); user-select: none; }
.future-hint { font-size: 12.5px; color: var(--text-dim); }
.my-list { display: flex; flex-direction: column; gap: 14px; }
.my-item { padding: 18px 20px; }
.my-meta { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.my-link { font-size: 13px; }

/* 空状态 */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); }
.empty-state .empty-star { font-size: 44px; color: var(--accent); margin-bottom: 14px; }
.empty-state.small { padding: 30px 20px; }
.empty-state p { margin-bottom: 16px; }

/* 加载更多 */
.load-more-wrap { text-align: center; padding: 28px 0 10px; }

/* 用户主页 */
.user-hero { text-align: center; padding: 36px 20px 28px; margin-bottom: 10px; }
.user-avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.4); box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.user-hero h1 { margin: 14px 0 6px; }
.user-bio { color: var(--text-dim); font-size: 14.5px; max-width: 560px; margin: 0 auto; }
.user-meta { color: var(--text-dim); font-size: 12.5px; margin-top: 8px; }
.user-actions { margin-top: 18px; display: flex; justify-content: center; gap: 10px; }

/* 资料页 */
.profile-page { max-width: 700px; margin: 0 auto; }
.profile-form { padding: 26px; }
.avatar-current { display: flex; justify-content: center; margin-bottom: 14px; }
#avatarPreview { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.4); }
.preset-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px; margin-bottom: 12px; }
.preset-avatar { position: relative; cursor: pointer; border-radius: 50%; border: 2px solid transparent; padding: 2px; }
.preset-avatar img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.preset-avatar.sel { border-color: var(--accent); }
.preset-avatar input { position: absolute; opacity: 0; }
.upload-line { margin-top: 4px; }
.theme-group .radio-card { display: flex; flex-direction: row; align-items: center; gap: 10px; }

/* 私信 */
.msg-page {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 560px;
  overflow: hidden;
  margin-top: 6px;
}
.conv-list { border-right: 1px solid var(--card-border); padding: 18px 14px; overflow-y: auto; max-height: 640px; }
.conv-list h2 { font-size: 16px; margin-bottom: 12px; padding: 0 6px; }
.conv-empty { font-size: 13.5px; color: var(--text-dim); padding: 0 6px; }
.conv-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 12px; color: var(--text); position: relative; }
.conv-item:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.conv-item.on { background: rgba(255, 217, 122, 0.15); }
.conv-info { flex: 1; min-width: 0; }
.conv-name { display: block; font-size: 14px; font-weight: 600; }
.conv-last { display: block; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-main { display: flex; flex-direction: column; min-width: 0; }
.conv-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--card-border); font-weight: 600; }
.conv-head a { color: var(--text); }
.conv-thread { flex: 1; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; max-height: 460px; }
.conv-placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-dim); gap: 10px; }
.bubble { max-width: 72%; align-self: flex-start; }
.bubble.mine { align-self: flex-end; }
.bubble-text { padding: 10px 15px; border-radius: 16px; background: rgba(255,255,255,.14); font-size: 14.5px; word-break: break-word; }
.bubble.mine .bubble-text { background: linear-gradient(135deg, rgba(255,217,122,.85), rgba(255,179,107,.85)); color: #3a2a10; }
.bubble-time { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.conv-input { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--card-border); align-items: flex-end; }
.conv-input textarea { flex: 1; }

/* 页脚 */
.site-footer { text-align: center; padding: 26px 0 40px; color: var(--text-dim); }
.site-footer p { font-size: 13.5px; }
.footer-sub { font-size: 12px; opacity: .8; margin-top: 4px; }

/* 滚动条美化 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ 品牌开场动画（星星火 team → 星 play 开发工作室） ============ */
body.splash-lock { overflow: hidden; }

#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity .7s ease, visibility .7s ease;
}
#splash.out { opacity: 0; visibility: hidden; pointer-events: none; }
#splashCanvas { position: absolute; inset: 0; z-index: 1; }

.splash-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, transform .45s ease, filter .45s ease;
}
.splash-stage.on { opacity: 1; visibility: visible; }
.splash-stage.out { opacity: 0; visibility: hidden; transform: scale(.96); filter: blur(6px); }

.splash-star { width: clamp(96px, 20vw, 150px); height: auto; margin-bottom: 26px; }
.splash-arc { stroke-dasharray: 200; stroke-dashoffset: 200; }

.splash-title {
  font-size: clamp(30px, 7vw, 58px);
  font-weight: 800;
  letter-spacing: 3px;
  color: #7a63ff;
  text-shadow: 0 0 16px rgba(122, 99, 255, .55), 0 0 44px rgba(255, 217, 122, .4);
  margin: 0;
}
.splash-title em {
  font-style: italic;
  font-weight: 900;
  text-transform: lowercase;
  margin: 0 .12em;
  color: #9a7bff;
}
.splash-sub {
  margin-top: 16px;
  font-size: 12.5px;
  letter-spacing: 5px;
  color: #6b5bd0;
  opacity: 0;
  text-transform: uppercase;
}
.splash-sub.on { opacity: 1; }

/* 阶段1：星星火 team 团队 */
.stage-1 .splash-star-g { animation: starPop .9s cubic-bezier(.2, 1.5, .4, 1) .1s both; }
.stage-1 .splash-title span:nth-child(1) { animation: titlePop .55s .42s both; }
.stage-1 .splash-title em              { animation: titlePop .55s .68s both; }
.stage-1 .splash-title span:nth-child(3){ animation: titlePop .55s .94s both; }
.stage-1 .splash-sub { animation: subFade .55s 1.3s both; }
.stage-1 .splash-arc { animation: arcDraw 1.1s .25s both; }
.stage-1 .splash-spark { animation: sparkTw 1.5s .8s infinite; }

/* 阶段2：星 play 开发工作室 */
.stage-2 .splash-star-g { animation: starOrbit 1.1s cubic-bezier(.2, 1.5, .4, 1) .05s both; }
.stage-2 .splash-title span:nth-child(1) { animation: titleFlip .5s .18s both; }
.stage-2 .splash-title em              { animation: titleFlip .5s .4s both; }
.stage-2 .splash-title span:nth-child(3){ animation: titleFlip .5s .62s both; }
.stage-2 .splash-sub { animation: subFade .55s .95s both; }
.stage-2 .splash-arc { animation: arcSpin 2.6s linear infinite; }
.stage-2 .splash-spark { animation: sparkTw 1.4s .5s infinite; }
.stage-2::after {
  content: "";
  position: absolute;
  top: 56%;
  left: -40%;
  width: 42%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 122, .9), rgba(199, 155, 255, .9), transparent);
  animation: sweepLine 1.5s .15s ease-out both;
  pointer-events: none;
}

@keyframes starPop {
  0% { transform: scale(.15) rotate(-55deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes starOrbit {
  0% { transform: rotate(-200deg) scale(.2); opacity: 0; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}
@keyframes titlePop {
  0% { opacity: 0; transform: translateY(32px) scale(.82); filter: blur(9px); }
  60% { opacity: 1; transform: translateY(-5px) scale(1.04); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes titleFlip {
  0% { opacity: 0; transform: rotateX(88deg) translateY(20px); }
  100% { opacity: 1; transform: none; }
}
@keyframes subFade {
  0% { opacity: 0; letter-spacing: 14px; filter: blur(4px); }
  100% { opacity: 1; letter-spacing: 5px; filter: blur(0); }
}
@keyframes arcDraw {
  0% { stroke-dashoffset: 200; opacity: 0; }
  70% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes arcSpin { to { transform: rotate(360deg); } }
@keyframes sparkTw {
  0%, 100% { opacity: .25; transform: scale(.65); }
  50% { opacity: 1; transform: scale(1.3); }
}
@keyframes sweepLine {
  0% { left: -40%; opacity: 0; }
  10% { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

#splashSkip {
  position: absolute;
  bottom: 26px;
  right: 30px;
  z-index: 3;
  border: 1px solid rgba(109, 91, 255, .4);
  background: rgba(255, 255, 255, .75);
  color: #6d5bff;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .25s;
  backdrop-filter: blur(6px);
}
#splashSkip:hover { background: linear-gradient(135deg, #6d5bff, #8f6bff); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(109, 91, 255, .35); }
#splashSkip:focus-visible { outline: 2px solid #6d5bff; outline-offset: 2px; }

@media (max-width: 860px) {
  #splashSkip { bottom: 20px; right: 20px; }
}

/* ============ 响应式 ============ */
@media (max-width: 860px) {
  .msg-page { grid-template-columns: 1fr; }
  .conv-list { border-right: none; border-bottom: 1px solid var(--card-border); max-height: 200px; }
  .main-nav { gap: 0; }
  .main-nav a { padding: 6px 9px; font-size: 13px; }
  .theme-switch { display: none; }
  .topbar-inner { gap: 10px; }
  .brand span { font-size: 16px; }
  .wall-hero h1 { font-size: 28px; }
  .future-card { flex-direction: column; }
  .radio-card { min-width: 130px; }
}