/* 若愚博客 —— 全站样式 */
:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #2c3e50;
  --muted: #7f8c9b;
  --line: #e8ecf1;
  --accent: #4f7cff;
  --accent-soft: #eef3ff;
  --danger: #e74c3c;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(30, 50, 90, .06);
  --shadow-hover: 0 6px 24px rgba(30, 50, 90, .12);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ---------- 深色模式 ---------- */
html[data-theme="dark"] {
  --bg: #141920;
  --card: #1d242e;
  --text: #d7dee8;
  --muted: #8a97a6;
  --line: #2b3441;
  --accent: #7396ff;
  --accent-soft: #252f42;
  --shadow: 0 2px 12px rgba(0, 0, 0, .35);
  --shadow-hover: 0 6px 24px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .site-header { background: rgba(23, 29, 37, .92); }
html[data-theme="dark"] .md code { background: #2a3340; color: #e2bdfd; }
html[data-theme="dark"] .md pre { background: #10151b; }
html[data-theme="dark"] .md th { background: #232b36; }
html[data-theme="dark"] .search-form input,
html[data-theme="dark"] .comment-form .nickname-input,
html[data-theme="dark"] .comment-form textarea,
html[data-theme="dark"] .admin-form :is(input, textarea, select) { background: #171d25; }
html[data-theme="dark"] .search-form :is(input,textarea):focus,
html[data-theme="dark"] .comment-form :is(input,textarea):focus,
html[data-theme="dark"] .admin-form :is(input,textarea,select):focus { background: #1d242e; }
html[data-theme="dark"] .saved-tip { background: #173227; color: #4fd39a; }
html[data-theme="dark"] .err-tip { background: #3a2325; }
html[data-theme="dark"] .msg-owner-reply { background: #252f42; }
html[data-theme="dark"] .like-btn:hover, html[data-theme="dark"] .toggle-comment:hover { background: #252f42; }
html[data-theme="dark"] img { opacity: .92; }
body { transition: background .25s ease, color .25s ease; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  font-size: 15.5px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .85; }
img { max-width: 100%; }
.container { max-width: 920px; margin: 0 auto; padding: 0 18px; }
.main-wrap { min-height: calc(100vh - 220px); padding-top: 26px; padding-bottom: 48px; }


/* ---------- 顶栏：半透明 + 玻璃化（毛玻璃）样式 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.theme-toggle {
  background: none; border: none; cursor: pointer; font-size: 18px;
  padding: 6px 8px; border-radius: 8px; line-height: 1;
  transition: background .15s;
}
.theme-toggle:hover { background: var(--accent-soft); }
.header-inner { display: flex; align-items: center; gap: 18px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 17px; }
.brand-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.brand-avatar-text {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 700;
}
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a {
  color: var(--muted); padding: 6px 12px; border-radius: 8px; font-size: 15px;
}
.site-nav a:hover { color: var(--text); background: var(--accent-soft); opacity: 1; }
.site-nav a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.nav-toggle { display: none; margin-left: auto; background: none; border: none; font-size: 22px; color: var(--text); cursor: pointer; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px;
}
a.card { display: block; color: inherit; transition: box-shadow .2s, transform .2s; }
a.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); opacity: 1; }

/* ---------- 首页 ---------- */
.hero { text-align: center; padding: 44px 22px 36px; }
.hero-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.hero-avatar-text {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4f7cff, #9b6cff); color: #fff;
  font-size: 40px; font-weight: 700;
}
.hero-name { font-size: 26px; margin-top: 16px; }
.hero-motto { color: var(--muted); margin-top: 6px; }
.hero-stats { display: flex; justify-content: center; gap: 34px; margin-top: 22px; }
.hero-stats a { display: flex; flex-direction: column; color: var(--text); }
.hero-stats b { font-size: 20px; }
.hero-stats span { color: var(--muted); font-size: 13px; }

.home-section { margin-top: 34px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.section-head h2 { font-size: 19px; }
.section-head .more { font-size: 14px; color: var(--muted); }
.section-head .more:hover { color: var(--accent); opacity: 1; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.post-card { padding: 0; overflow: hidden; }
.post-cover img { width: 100%; height: 150px; object-fit: cover; display: block; }
.post-card-body { padding: 14px 16px 16px; }
.post-card-body h3 { font-size: 16.5px; margin-bottom: 6px; }
.post-excerpt {
  color: var(--muted); font-size: 13.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 13px; margin-top: 10px; }

.home-moments { display: grid; gap: 12px; }
.home-moment p { font-size: 14.5px; }

.home-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.home-photos img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block;
  transition: transform .2s;
}
.home-photos a:hover img { transform: scale(1.04); }

/* ---------- 页面标题 ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.page-head h1 { font-size: 24px; }
.page-sub { color: var(--muted); font-size: 14px; }

.search-form { display: flex; gap: 8px; }
.search-form input {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; width: 200px;
  background: var(--card); font-size: 14px; outline: none;
}
.search-form input:focus { border-color: var(--accent); }
.search-tip { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.search-tip a { margin-left: 8px; }

/* ---------- 日志列表 ---------- */
.post-list { display: grid; gap: 14px; }
.post-row { display: flex; gap: 16px; padding: 16px 18px; }
.post-row-cover { width: 130px; height: 88px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.post-row-body h3 { font-size: 17px; margin-bottom: 4px; }
.tag {
  display: inline-block; background: var(--accent-soft); color: var(--accent);
  font-size: 12px; padding: 1px 9px; border-radius: 20px;
}

.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.pager-info { color: var(--muted); font-size: 14px; }

.btn {
  display: inline-block; border: none; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 14.5px;
  padding: 8px 18px; border-radius: 9px; transition: filter .15s;
  font-family: inherit;
}
.btn:hover { filter: brightness(1.08); opacity: 1; }
.btn.small { padding: 5px 14px; font-size: 13.5px; }
.btn.ghost { background: var(--card); color: var(--text); border: 1px solid var(--line); }
.btn.danger { background: var(--danger); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 日志详情 ---------- */
.post-detail { padding: 28px 30px; }
.post-title { font-size: 26px; line-height: 1.4; margin-bottom: 10px; }
.post-meta-detail { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.post-cover-full { border-radius: 10px; margin-bottom: 18px; }
.post-tags { margin-top: 20px; display: flex; gap: 8px; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.post-nav-item { font-size: 14px; color: var(--muted); padding: 14px 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-nav-item.right { text-align: right; }
.post-nav-item:hover { color: var(--accent); opacity: 1; }

/* ---------- Markdown 正文 ---------- */
.md { font-size: 15.5px; overflow-wrap: break-word; }
.md h1, .md h2, .md h3, .md h4 { margin: 1.2em 0 .5em; line-height: 1.4; }
.md h1 { font-size: 22px; } .md h2 { font-size: 20px; } .md h3 { font-size: 17.5px; }
.md p { margin: .7em 0; }
.md ul, .md ol { padding-left: 1.6em; margin: .6em 0; }
.md blockquote {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 8px 14px; border-radius: 0 8px 8px 0; margin: .8em 0; color: #4a5a6a;
}
.md code {
  background: #f0f2f5; padding: 2px 6px; border-radius: 5px; font-size: .88em;
  font-family: Consolas, Monaco, "Courier New", monospace;
}
.md pre {
  background: #282c34; color: #abb2bf; padding: 14px 16px; border-radius: 10px;
  overflow-x: auto; margin: .9em 0; line-height: 1.55;
}
.md pre code { background: none; padding: 0; color: inherit; }
.md img { border-radius: 8px; }
.md table { border-collapse: collapse; margin: .8em 0; width: 100%; }
.md th, .md td { border: 1px solid var(--line); padding: 7px 12px; font-size: 14px; }
.md th { background: #f4f6f9; }
.md hr { border: none; border-top: 1px solid var(--line); margin: 1.4em 0; }

/* ---------- 说说 ---------- */
.moment-list { display: grid; gap: 16px; }
/* 锚点跳转预留顶栏高度：说说卡片与留言卡片，保证整个卡片框完整可见 */
.moment { scroll-margin-top: 80px; }
.msg { scroll-margin-top: 80px; }
.moment-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.avatar-dot {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 16px; object-fit: cover;
}
.avatar-dot.big { width: 42px; height: 42px; }
.moment-author { display: flex; flex-direction: column; }
.moment-author .reltime { color: var(--muted); font-size: 12.5px; }
.moment-text { white-space: normal; font-size: 15px; }
.moment-imgs { display: grid; gap: 8px; margin-top: 12px; }
.moment-imgs.n1 { grid-template-columns: minmax(0, 320px); }
.moment-imgs.n2 { grid-template-columns: 1fr 1fr; }
.moment-imgs.n3 { grid-template-columns: 1fr 1fr 1fr; }
.moment-imgs img {
  width: 100%; height: 120px; object-fit: cover; border-radius: 10px; cursor: zoom-in;
  transition: transform .15s;
}
.moment-imgs.n1 img { height: auto; max-height: 400px; }
.moment-imgs img:hover { transform: scale(1.02); }
.moment-foot { display: flex; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.like-btn, .toggle-comment {
  border: none; background: none; cursor: pointer; font-size: 14px;
  color: var(--muted); padding: 5px 12px; border-radius: 20px; font-family: inherit;
  transition: all .15s;
}
.like-btn:hover, .toggle-comment:hover { background: var(--accent-soft); color: var(--accent); opacity: 1; }
.like-btn.liked { color: #e74c3c; }
.like-btn.liked .heart { animation: pop .35s; }
.like-btn .heart { display: inline-block; }
@keyframes pop { 40% { transform: scale(1.4); } }
.moment-comments { display: none; margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.moment-comments.open { display: block; }

/* ---------- 评论 ---------- */
.comment-section { margin-top: 18px; }
.section-title { font-size: 17px; margin-bottom: 14px; }
.comment { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.comment:last-of-type { border-bottom: none; }
.comment-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.comment-head .reltime { color: var(--muted); font-size: 12.5px; }
.comment-text { font-size: 14.5px; margin-top: 3px; }
.reply-btn {
  border: none; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer;
}
.reply-btn:hover { color: var(--accent); opacity: 1; }

.comment-form { display: flex; flex-direction: column; gap: 10px; }
.comment-form .nickname-input {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; width: 220px;
  font-size: 14px; outline: none; background: var(--bg); font-family: inherit;
}
.comment-form textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14.5px;
  outline: none; resize: vertical; background: var(--bg); font-family: inherit; min-height: 70px;
}
.comment-form :is(input, textarea):focus { border-color: var(--accent); background: #fff; }
.comment-form.compact { flex-direction: row; flex-wrap: wrap; margin-top: 10px; }
.comment-form.compact .nickname-input { width: 140px; }
.comment-form.compact textarea { flex: 1; min-width: 200px; min-height: 44px; }
.form-err { color: var(--danger); font-size: 13.5px; }

/* ---------- 相册 ---------- */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.album-card { padding: 0; overflow: hidden; }
.album-cover { position: relative; }
.album-cover img { width: 100%; height: 170px; object-fit: cover; display: block; }
.album-cover .count {
  position: absolute; right: 10px; bottom: 10px; background: rgba(0, 0, 0, .55);
  color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 20px;
}
.album-body { padding: 13px 16px 16px; }
.album-body h3 { font-size: 16.5px; }
.album-body p { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.photo-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; cursor: zoom-in; display: block;
  transition: transform .15s;
}
.photo-grid a:hover img { transform: scale(1.03); }

/* ---------- 留言板 ---------- */
.guest-hero { text-align: center; padding: 34px 22px; margin-bottom: 20px; }
.guest-hero h1 { font-size: 24px; }
.guest-hero p { color: var(--muted); margin-top: 6px; }
.msg-list { display: grid; gap: 14px; }
.msg { display: flex; gap: 14px; }
.msg-body { flex: 1; }
.msg-head { display: flex; align-items: baseline; gap: 10px; }
.msg-head .reltime { color: var(--muted); font-size: 12.5px; }
.msg-loc { color: var(--muted); font-size: 12.5px; }
/* 省市级联选择器（留言板 / 后台通用）：必须显式指定文字颜色，否则深色模式下不可见 */
.city-select select {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px;
  font-size: 14.5px; background: var(--bg); color: var(--text);
  outline: none; font-family: inherit; margin-right: 8px;
}
.city-select select option { background: var(--bg); color: var(--text); }
.msg-text { font-size: 14.5px; margin-top: 3px; }
.msg-owner-reply {
  margin-top: 10px; background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; font-size: 14px;
}
.msg-owner-reply .who { color: var(--accent); font-weight: 600; margin-right: 6px; }
#msg-form { margin-bottom: 22px; }
#msg-form textarea { min-height: 90px; }
#msg-form .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ---------- 关于 ---------- */
.about-card { padding: 30px 34px; }

/* ---------- 通用 ---------- */
.empty { color: var(--muted); text-align: center; padding: 40px 0; font-size: 14.5px; }
.reltime { color: var(--muted); }

/* ---------- 灯箱 ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(15, 18, 25, .92);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 92vw; max-height: 88vh; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
  user-select: none; -webkit-user-drag: none; cursor: zoom-in;
}
.lightbox img.lb-zoomed { cursor: grab; }
.lightbox img.lb-dragging { cursor: grabbing; }
.lb-close, .lb-prev, .lb-next {
  position: absolute; background: rgba(255,255,255,.12); color: #fff; border: none;
  border-radius: 50%; width: 42px; height: 42px; font-size: 20px; cursor: pointer;
}
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.25); }

/* ---------- 页脚 ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 26px 0 30px; text-align: center; color: var(--muted); font-size: 13.5px; }
.footer-meta { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }

/* ---------- 后台 ---------- */
.admin-body { display: flex; gap: 22px; align-items: flex-start; }
.admin-side {
  width: 170px; flex-shrink: 0; position: sticky; top: 80px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
}
.admin-side a { display: block; color: var(--muted); padding: 8px 12px; border-radius: 8px; font-size: 14.5px; }
.admin-side a:hover, .admin-side a.active { background: var(--accent-soft); color: var(--accent); opacity: 1; font-weight: 600; }
.admin-main { flex: 1; min-width: 0; display: grid; gap: 18px; }
.admin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.admin-top h1 { font-size: 21px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.stat-item { text-align: center; padding: 16px 8px; }
.stat-item b { font-size: 24px; display: block; color: var(--accent); }
.stat-item span { color: var(--muted); font-size: 13px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table th { color: var(--muted); font-weight: 500; font-size: 13px; }
.admin-table .ops { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-form { display: grid; gap: 14px; }
.admin-form label { font-size: 14px; font-weight: 600; display: block; margin-bottom: 5px; }
.admin-form input[type=text], .admin-form input[type=password], .admin-form input[type=number],
.admin-form textarea, .admin-form select {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px;
  font-size: 14.5px; outline: none; font-family: inherit; background: var(--bg);
}
.admin-form :is(input, textarea, select):focus { border-color: var(--accent); background: #fff; }
.admin-form textarea { resize: vertical; }
.admin-form .md-editor { min-height: 340px; font-family: Consolas, Monaco, monospace; font-size: 14px; line-height: 1.6; }
.form-row { display: flex; gap: 12px; }
.form-row > * { flex: 1; }
.form-actions { display: flex; gap: 12px; align-items: center; }
.form-tip { color: var(--muted); font-size: 13px; }
.saved-tip { background: #e8f8ef; color: #1e8e5a; border-radius: 8px; padding: 8px 14px; font-size: 14px; }
.err-tip { background: #fdeeee; color: var(--danger); border-radius: 8px; padding: 8px 14px; font-size: 14px; }
.thumb-prev { display: flex; gap: 8px; flex-wrap: wrap; }
.thumb-prev img { width: 86px; height: 86px; object-fit: cover; border-radius: 8px; }
.md-preview { border: 1px dashed var(--line); border-radius: 10px; padding: 14px 16px; background: var(--bg); }
.md-preview:empty { display: none; }
.auth-card { max-width: 380px; margin: 60px auto 0; padding: 30px 30px 34px; }
.auth-card h1 { text-align: center; font-size: 21px; margin-bottom: 20px; }
.inline-form { display: flex; gap: 8px; }
.inline-form input[type=text] { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 14px; outline: none; }
.switch-form { display: flex; align-items: center; gap: 8px; }
.switch-form input[type=text] { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 14px; outline: none; flex: 1; min-width: 160px; }
.switch-form button { white-space: nowrap; }
.msg-row-reply { margin-top: 8px; display: none; gap: 8px; }
.msg-row-reply.open { display: flex; }
.msg-row-reply input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 14px; outline: none; }

/* ---------- 返回顶部 ---------- */
.back-top {
  position: fixed; right: 22px; bottom: 26px; z-index: 90;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--card); color: var(--text); font-size: 18px;
  box-shadow: var(--shadow-hover); border: 1px solid var(--line);
  transition: transform .15s, background .15s;
}
.back-top:hover { transform: translateY(-3px); background: var(--accent); color: #fff; }

/* ---------- 照片详情 ---------- */
.photo-detail { padding: 18px; }
.photo-detail-img {
  max-width: 100%; max-height: 70vh; display: block; margin: 0 auto;
  border-radius: 10px; cursor: zoom-in;
}
.photo-breadcrumb { margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.photo-breadcrumb a { color: var(--muted); }
.photo-breadcrumb a:hover { color: var(--accent); opacity: 1; }
.photo-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 10px; }
.photo-nav .pos { color: var(--muted); font-size: 13.5px; }

/* ---------- 响应式 ---------- */
@media (max-width: 700px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 60px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; padding: 10px 18px; gap: 2px;
  }
  .site-nav.open { display: flex; }
  .post-row { flex-direction: column; }
  .post-row-cover { width: 100%; height: 150px; }
  .post-nav { grid-template-columns: 1fr; }
  .home-photos { grid-template-columns: repeat(2, 1fr); }
  .admin-body { flex-direction: column; }
  .admin-side { width: 100%; position: static; display: flex; flex-wrap: wrap; }
  .post-detail, .about-card { padding: 20px 18px; }
  .hero-stats { gap: 22px; }
  .comment-form.compact .nickname-input { width: 100%; }
}

/* ---------- 照片描述 ---------- */
.photo-caption {
  margin-top: 12px; padding: 10px 14px; font-size: 14.5px;
  background: var(--accent-soft); border-radius: 10px; color: var(--text);
}

/* ---------- 后台照片管理行 ---------- */
.admin-photo-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px dashed var(--line);
}
.admin-photo-row:last-child { border-bottom: none; }
.admin-photo-row img { width: 130px; height: 90px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.admin-photo-info { flex: 1; min-width: 0; }
.admin-photo-info input[type=text] {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; font-size: 14px; outline: none; background: var(--bg); font-family: inherit;
}
.admin-photo-info input[type=text]:focus { border-color: var(--accent); background: #fff; }
.admin-photo-del { flex-shrink: 0; }

/* ---------- 音乐播放器 ---------- */
.music-box { position: fixed; right: 18px; bottom: 18px; z-index: 150; }
.music-fab {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #4f7cff, #9b6cff); color: #fff; font-size: 22px;
  box-shadow: 0 6px 20px rgba(79, 124, 255, .45);
  transition: transform .2s;
}
.music-fab:hover { transform: scale(1.08); }
.music-fab.active { transform: rotate(0); }
.music-panel {
  position: absolute; right: 0; bottom: 64px; width: 290px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18); padding: 14px 16px 12px;
}
.music-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14.5px; }
.music-close { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.music-now { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.music-disc {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #4f7cff, #9b6cff); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.music-disc.spin { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.music-now-info { display: flex; flex-direction: column; min-width: 0; }
.music-now-info b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-now-info span { color: var(--muted); font-size: 12.5px; }
.music-progress { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 8px; cursor: pointer; touch-action: none; }
.music-bar { height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width .2s linear; }
.music-progress.dragging .music-bar { transition: none; }
.music-progress:hover { filter: brightness(1.2); }
.music-ctrl { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.music-ctrl button {
  border: none; background: none; cursor: pointer; font-size: 16px; color: var(--text);
  width: 32px; height: 32px; border-radius: 50%;
}
.music-ctrl button:hover { background: var(--accent-soft); }
.music-ctrl button.active { color: var(--accent); background: var(--accent-soft); }
.music-ctrl .music-play {
  background: var(--accent); color: #fff; font-size: 14px;
}
.music-ctrl .music-play:hover { filter: brightness(1.1); background: var(--accent); }
.music-time { margin-left: auto; color: var(--muted); font-size: 12px; }
.music-list { list-style: none; max-height: 180px; overflow-y: auto; border-top: 1px dashed var(--line); padding-top: 6px; }
.music-list li {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px;
  cursor: pointer; font-size: 13.5px;
}
.music-list li:hover { background: var(--accent-soft); }
.music-list li.playing { color: var(--accent); font-weight: 600; }
.music-list .music-idx { color: var(--muted); font-size: 12px; width: 16px; flex-shrink: 0; }
.music-list li.playing .music-idx { color: var(--accent); }
.music-list .music-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-list .music-name em { font-style: normal; color: var(--muted); font-size: 12px; }
@media (max-width: 700px) {
  .music-panel { width: min(290px, calc(100vw - 36px)); }
}

/* ================= 美化升级 ================= */

/* 首页英雄卡：柔和渐变背景 */
.hero {
  background: linear-gradient(160deg, #ffffff 55%, #eef3ff 100%);
  position: relative; overflow: hidden;
}
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(2px); opacity: .35;
}
.hero::before { width: 180px; height: 180px; background: #dfe9ff; top: -60px; left: -40px; }
.hero::after { width: 140px; height: 140px; background: #f3e8ff; bottom: -50px; right: -30px; }
.hero > * { position: relative; z-index: 1; }
html[data-theme="dark"] .hero { background: linear-gradient(160deg, #1e252e 55%, #232c40 100%); }
html[data-theme="dark"] .hero::before { background: #2a3550; }
html[data-theme="dark"] .hero::after { background: #3a2f52; }

/* 顶栏品牌与导航细节 */
.brand-name { letter-spacing: .5px; }
.site-nav a { transition: all .15s; }

/* 卡片阴影更柔和 */
:root { --shadow: 0 1px 3px rgba(30,50,90,.04), 0 4px 16px rgba(30,50,90,.06); }
html[data-theme="dark"] { --shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); }

/* ---------- 相册网格（悬浮显示描述与数据） ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.photo-cell {
  position: relative; display: block; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); background: var(--card);
}
.photo-cell img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.photo-cell:hover img { transform: scale(1.06); }
.photo-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 10px 12px;
  background: linear-gradient(to top, rgba(10,14,22,.72), rgba(10,14,22,0) 55%);
  opacity: 0; transition: opacity .25s;
}
.photo-cell:hover .photo-overlay { opacity: 1; }
.photo-cap {
  color: #fff; font-size: 13px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.photo-stat { color: #d8dee7; font-size: 12px; margin-top: 3px; }

/* ---------- 照片详情：深色展台 ---------- */
.photo-breadcrumb { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.photo-stage { padding: 0; overflow: hidden; }
.stage-frame {
  position: relative; background: #10141b;
  display: flex; align-items: center; justify-content: center; min-height: 220px;
}
.stage-img { max-width: 100%; max-height: 72vh; display: block; cursor: zoom-in; }
.stage-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 2;
}
.stage-arrow:hover { background: rgba(255,255,255,.3); opacity: 1; }
.stage-arrow.prev { left: 14px; }
.stage-arrow.next { right: 14px; }
.stage-info { padding: 16px 22px 20px; text-align: center; }
.stage-meta {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  color: var(--muted); font-size: 13px; margin-bottom: 8px;
}
.stage-info .photo-caption {
  background: none; padding: 0; font-size: 15px; margin: 0 auto 12px; max-width: 560px;
}
.stage-actions { display: flex; justify-content: center; gap: 14px; }
.stage-like {
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  border-radius: 24px; padding: 8px 22px; font-size: 14.5px; color: var(--text);
  font-family: inherit; transition: all .2s;
}
.stage-like:hover { border-color: #e74c3c; color: #e74c3c; opacity: 1; }
.stage-like.liked { background: #fdeeee; border-color: #e74c3c; color: #e74c3c; }
.stage-like.liked .heart { animation: pop .35s; }
html[data-theme="dark"] .stage-like.liked { background: #3a2729; }
.stage-comment-btn {
  border: 1px solid var(--line); background: var(--card);
  border-radius: 24px; padding: 8px 22px; font-size: 14.5px; color: var(--text);
  transition: all .2s; text-decoration: none;
}
.stage-comment-btn:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }

/* 说说九宫格图片圆角略大更精致 */
.moment-imgs img { border-radius: 12px; }

/* 日志卡片标题更醒目 */
.post-card-body h3, .post-row-body h3 { letter-spacing: .2px; }
.post-card:hover h3, .post-row:hover h3 { color: var(--accent); }

/* 相册封面卡片悬浮联动 */
.album-card .album-cover { overflow: hidden; }
.album-card .album-cover img { transition: transform .35s ease; }
.album-card:hover .album-cover img { transform: scale(1.05); }

/* ================= 全站美化 v3 ================= */

/* 背景：极淡的顶部渐变，更有空气感 */
body {
  background:
    linear-gradient(180deg, rgba(79,124,255,.05), rgba(79,124,255,0) 320px),
    var(--bg);
}
html[data-theme="dark"] body {
  background: linear-gradient(180deg, rgba(79,124,255,.08), rgba(79,124,255,0) 320px), var(--bg);
}

/* 页面大标题：左侧强调条 */
.page-head h1 { position: relative; padding-left: 16px; }
.page-head h1::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px;
  border-radius: 4px; background: linear-gradient(180deg, #4f7cff, #9b6cff);
}

/* 卡片标题小强调条 */
.section-title { position: relative; padding-left: 13px; }
.section-title::before {
  content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 4px;
  border-radius: 3px; background: var(--accent); opacity: .85;
}

/* 按钮：渐变主按钮 + 柔和投影 */
.btn {
  background: linear-gradient(135deg, #4f7cff, #6f6cff);
  box-shadow: 0 3px 10px rgba(79,124,255,.28);
}
.btn:hover { box-shadow: 0 5px 16px rgba(79,124,255,.38); filter: brightness(1.05); }
.btn.ghost { box-shadow: none; }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn.danger { background: linear-gradient(135deg, #ff6b5e, #e74c3c); box-shadow: 0 3px 10px rgba(231,76,60,.25); }

/* 英雄卡：头像描边光环 + 统计胶囊 */
.hero { padding: 50px 22px 40px; }
.hero-avatar { box-shadow: 0 0 0 4px #fff, 0 8px 24px rgba(79,124,255,.35); }
html[data-theme="dark"] .hero-avatar { box-shadow: 0 0 0 4px #2a323d, 0 8px 24px rgba(0,0,0,.5); }
.hero-stats a {
  padding: 6px 18px; border-radius: 14px; transition: background .2s;
}
.hero-stats a:hover { background: var(--accent-soft); }
.hero-stats b { background: linear-gradient(135deg, #4f7cff, #9b6cff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* 日志列表行：悬浮更灵动 */
.post-row { transition: box-shadow .2s, transform .2s, border-color .2s; }
.post-row:hover { border-color: rgba(79,124,255,.4); }
.post-row:hover .post-row-body h3 { color: var(--accent); }

/* 标签胶囊更精致 */
.tag { border: 1px solid rgba(79,124,255,.25); background: rgba(79,124,255,.08); }
html[data-theme="dark"] .tag { background: rgba(111,149,255,.12); }

/* 空状态：虚线框 */
.empty {
  border: 1.5px dashed var(--line); border-radius: 14px;
  background: rgba(127,140,155,.04); margin: 8px 0;
}

/* 留言/评论输入框圆角统一 */
.comment-form .nickname-input, .comment-form textarea { border-radius: 10px; }

/* 页脚更沉稳 */
.site-footer { background: var(--card); margin-top: 30px; }
.footer-motto { font-size: 14px; }

/* ---------- 照片详情：左图右栏 ---------- */
.photo-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start;
}
.stage-wrap { display: grid; gap: 12px; }
.stage-frame {
  border-radius: 16px; background: #10141b; border: none;
  display: flex; align-items: center; justify-content: center;
  min-height: 300px; padding: 14px; box-shadow: var(--shadow);
}
.stage-img { max-width: 100%; max-height: 74vh; border-radius: 8px; }
.stage-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.stage-arrow {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: 24px; padding: 8px 20px; font-size: 14px;
  transition: all .18s; text-decoration: none;
}
.stage-arrow:hover { border-color: var(--accent); color: var(--accent); opacity: 1; transform: translateY(-1px); }
.stage-arrow.disabled { opacity: .4; pointer-events: none; }
.stage-pos { color: var(--muted); font-size: 13.5px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 5px 14px; }

.photo-side { display: grid; gap: 14px; }
.side-block {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 16px 18px;
}
.side-title { font-size: 15.5px; margin-bottom: 12px; position: relative; padding-left: 12px; }
.side-title::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  border-radius: 3px; background: var(--accent);
}
.side-meta { display: flex; gap: 14px; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.side-block .photo-caption {
  background: var(--accent-soft); padding: 10px 13px; border-radius: 10px;
  font-size: 14.5px; margin-bottom: 12px;
}
.stage-like {
  width: 100%; justify-content: center; display: flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); background: var(--bg); cursor: pointer;
  border-radius: 24px; padding: 10px 0; font-size: 15px; color: var(--text);
  font-family: inherit; transition: all .2s;
}
.stage-like:hover { border-color: #e74c3c; color: #e74c3c; opacity: 1; transform: translateY(-1px); }
.stage-like.liked { background: linear-gradient(135deg, #ff8a80, #e74c3c); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(231,76,60,.35); }
.stage-like.liked .heart { animation: pop .35s; }
.side-empty { color: var(--muted); font-size: 13.5px; text-align: center; padding: 14px 0; }
.photo-side .comment { padding: 9px 0; }
.photo-side .comment-form textarea { min-height: 64px; }

@media (max-width: 860px) {
  .photo-layout { grid-template-columns: 1fr; }
  .stage-img { max-height: 60vh; }
}

/* 覆盖旧版 stage-arrow 的绝对定位样式 */
.stage-nav .stage-arrow {
  position: static; transform: none;
  width: auto; height: auto; border-radius: 24px;
}

/* ================= 本轮升级：均衡器图标 / 照片放大 / 大图格 ================= */

/* 悬浮音乐按钮：均衡器条 */
.music-fab .eq { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.music-fab .eq i {
  width: 4px; background: #fff; border-radius: 2px; height: 30%; opacity: .85;
  transition: height .3s;
}
.music-box.is-playing .eq i { animation: eq 1s ease-in-out infinite; }
.music-box.is-playing .eq i:nth-child(1) { animation-delay: 0s; }
.music-box.is-playing .eq i:nth-child(2) { animation-delay: .2s; }
.music-box.is-playing .eq i:nth-child(3) { animation-delay: .4s; }
.music-box.is-playing .eq i:nth-child(4) { animation-delay: .15s; }
@keyframes eq {
  0%, 100% { height: 26%; }
  50% { height: 92%; }
}

/* 照片详情：可点击放大 */
.stage-img { cursor: zoom-in; }

/* 相册格子默认更大 */
.photo-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
@media (max-width: 700px) {
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 灯箱遮罩加关闭按钮更醒目 */
.lightbox .lb-close { width: 46px; height: 46px; font-size: 24px; background: rgba(255,255,255,.18); }
.lightbox .lb-close:hover { background: rgba(255,255,255,.32); transform: rotate(90deg); }
.lightbox .lb-close { transition: transform .2s, background .2s; }

/* 歌单默认显示 4 首左右，滚动查看更多 */
.music-list { max-height: 160px; overflow-y: auto; }
.music-list::-webkit-scrollbar { width: 6px; }
.music-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }

/* ================= 评论：滑动验证 + 头像选择 ================= */
.cf-extra { display: grid; gap: 10px; }
.cf-row { display: flex; gap: 10px; }
.cf-row .cf-contact {
  flex: 1; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; font-size: 14px; outline: none; background: var(--bg); font-family: inherit;
}
.cf-row .cf-contact:focus { border-color: var(--accent); background: #fff; }
.comment-form.compact .cf-row { flex-wrap: wrap; }

/* 头像选择器 */
.avatar-picker {
  display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px;
}
.av-opt {
  width: 30px; height: 30px; border: none; border-radius: 50%; cursor: pointer;
  background: transparent; font-size: 18px; line-height: 30px; text-align: center;
  transition: transform .12s, background .12s; font-family: inherit;
}
.av-opt:hover { background: var(--accent-soft); transform: scale(1.15); opacity: 1; }
.av-opt.picked { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent) inset; }
.av-clear { color: var(--muted); font-size: 14px; }

/* 滑动验证 */
.slide-verify {
  position: relative; height: 42px; border-radius: 21px;
  background: var(--bg); border: 1px solid var(--line); overflow: hidden; user-select: none;
}
.slide-verify .sv-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, rgba(79,124,255,.25), rgba(155,108,255,.3));
}
.slide-verify .sv-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13.5px; pointer-events: none;
}
.slide-verify .sv-thumb {
  position: absolute; left: 0; top: 0;
  width: 52px; height: 40px;
  background: linear-gradient(135deg, #4f7cff, #6f6cff); color: #fff;
  border-radius: 20px; cursor: grab; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(79,124,255,.35);
}
.slide-verify .sv-thumb:active { cursor: grabbing; }
.slide-verify.ok { border-color: #27ae60; }
.slide-verify.ok .sv-fill { background: linear-gradient(90deg, rgba(39,174,96,.2), rgba(39,174,96,.35)); }
.slide-verify.ok .sv-thumb { background: linear-gradient(135deg, #58d68d, #27ae60); box-shadow: 0 3px 10px rgba(39,174,96,.35); }
.slide-verify.ok .sv-hint { color: #27ae60; }

/* emoji 头像 */
.avatar-dot.emoji { background: var(--accent-soft); font-size: 19px; }
.avatar-dot.emoji.big { font-size: 22px; }

/* 按钮禁用态 */
.btn:disabled { filter: grayscale(.5); }

/* ================= 本轮：日志双栏 / 照片循环 ================= */

/* 日志详情：正文左 + 评论区右；有双栏时页面加宽 */
.main-wrap:has(.post-layout) { max-width: 1160px; }
.post-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start;
}
.post-main { display: grid; gap: 18px; }
.post-side { display: grid; gap: 14px; position: sticky; top: 78px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 2px; }
.post-side::-webkit-scrollbar { width: 5px; }
.post-side::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
.post-side .comment-section, .post-side #comment-form { margin: 0; }
.post-side .comment-form textarea { min-height: 70px; }
/* 双栏下正文排版更紧凑 */
.post-layout .post-detail { padding: 24px 26px; }
.post-layout .post-title { font-size: 22px; }
.post-layout .post-nav { grid-template-columns: 1fr; }
@media (max-width: 1000px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-side { position: static; max-height: none; overflow: visible; }
}

/* 照片循环翻页：箭头永远可点 */
.stage-arrow.disabled { display: none; }

/* ================= 主页改版：左侧个人卡片 + 内容流 ================= */
.main-wrap:has(.home-layout) { max-width: 1120px; }
.home-layout {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start;
}
.home-side { display: grid; gap: 16px; position: sticky; top: 78px; }
.home-feed { display: grid; gap: 30px; }

/* 个人卡片：渐变封面 + 悬浮头像 */
.profile-card { padding: 0; overflow: hidden; text-align: center; }
.profile-cover {
  height: 92px;
  background:
    radial-gradient(circle at 20% 120%, rgba(255,255,255,.25), transparent 45%),
    linear-gradient(135deg, #6c8cff 0%, #9b6cff 55%, #c86cff 100%);
}
.profile-body { padding: 0 20px 22px; }
.profile-avatar {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  margin: -44px auto 10px; display: block; position: relative;
  box-shadow: 0 0 0 4px #fff, 0 8px 20px rgba(79,124,255,.30);
}
html[data-theme="dark"] .profile-avatar { box-shadow: 0 0 0 4px #232b36, 0 8px 20px rgba(0,0,0,.5); }
.profile-avatar-text {
  background: linear-gradient(135deg, #4f7cff, #9b6cff); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700;
}
.profile-name { font-size: 21px; }
.profile-motto { color: var(--muted); font-size: 13.5px; margin-top: 5px; line-height: 1.6; }
.profile-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.profile-stats a { display: flex; flex-direction: column; border-radius: 10px; padding: 5px 2px; transition: background .15s; }
.profile-stats a:hover { background: var(--accent-soft); opacity: 1; }
.profile-stats b { font-size: 17px; }
.profile-stats span { color: var(--muted); font-size: 12px; }

/* 社交关注卡片 */
.side-heading {
  font-size: 15px; position: relative; padding-left: 12px; margin-bottom: 14px;
}
.side-heading::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px;
  border-radius: 3px; background: linear-gradient(180deg, #4f7cff, #9b6cff);
}
.social-links { display: flex; gap: 10px; }
.social-links a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px 12px; border-radius: 12px; color: var(--text); font-size: 13px;
  border: 1px solid var(--line); transition: all .18s; background: var(--bg);
}
.social-links a:hover {
  opacity: 1; transform: translateY(-3px); border-color: #fb7299; color: #fb7299;
  box-shadow: 0 6px 16px rgba(251,114,153,.18);
}
.social-links a:nth-child(2):hover { border-color: #fc5531; color: #fc5531; box-shadow: 0 6px 16px rgba(252,85,49,.18); }

/* 首页说说卡片更像"便签" */
.home-moment { position: relative; padding-left: 18px; overflow: hidden; }
.home-moment::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #4f7cff, #9b6cff); opacity: .65;
}
.home-moment:hover::before { opacity: 1; }

/* ================= 留言板分隔美化 ================= */
.gb-divider { margin: 26px 0 16px; display: flex; align-items: center; gap: 12px; }
.gb-divider h2 { font-size: 18px; position: relative; padding-left: 13px; }
.gb-divider h2::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  border-radius: 3px; background: linear-gradient(180deg, #4f7cff, #9b6cff);
}
.gb-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.msg-form-card {
  margin-top: 24px; border-top: 3px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, #4f7cff, #9b6cff) border-box;
  border: 1px solid transparent;
  position: relative;
}
.msg-form-card::before {
  content: '留言区'; position: absolute; top: -11px; left: 18px;
  background: linear-gradient(135deg, #4f7cff, #9b6cff); color: #fff;
  font-size: 12px; padding: 2px 12px; border-radius: 12px;
}

/* 日志列表行更像博客文章流 */
.post-list .post-row { padding: 18px 20px; }
.post-row-body h3 { font-size: 17.5px; transition: color .15s; }

/* 全站滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c9d2dd; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #aeb9c6; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #37414d; }

/* 选中文本颜色 */
::selection { background: rgba(79,124,255,.25); }

/* 品牌名渐变字 */
.brand-name {
  background: linear-gradient(135deg, #4f7cff, #9b6cff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 空状态更柔和 */
.empty { border-style: dashed; }

@media (max-width: 900px) {
  .home-layout { grid-template-columns: 1fr; }
  .home-side { position: static; }
  .profile-cover { height: 70px; }
}

/* 社交图标：品牌色常显（B站粉 / CSDN 橙红），悬浮加深上浮 */
.social-links a.bili { color: #fb7299; border-color: rgba(251,114,153,.35); background: rgba(251,114,153,.06); }
.social-links a.bili:hover { background: #fb7299; color: #fff; border-color: #fb7299; box-shadow: 0 6px 16px rgba(251,114,153,.35); }
.social-links a.csdn { color: #fc5531; border-color: rgba(252,85,49,.35); background: rgba(252,85,49,.06); }
.social-links a.csdn:hover { background: #fc5531; color: #fff; border-color: #fc5531; box-shadow: 0 6px 16px rgba(252,85,49,.35); }

/* 左侧个人卡片下移，与右侧内容卡片顶部平齐 */
.home-side { margin-top: 47px; }
@media (max-width: 900px) {
  .home-side { margin-top: 0; }
}

/* ================= 本轮：RSS 卡片 / 平行世界 / 字号优化 ================= */

/* RSS 订阅卡片 */
.rss-desc { color: var(--muted); font-size: 13px; line-height: 1.65; margin-bottom: 12px; }
.rss-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1.5px solid #f78422; color: #f78422; border-radius: 10px;
  padding: 9px 0; font-size: 14px; font-weight: 600;
  background: rgba(247,132,34,.06); transition: all .18s;
}
.rss-btn:hover { background: #f78422; color: #fff; opacity: 1; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(247,132,34,.3); }

/* 平行世界下拉菜单 */
.nav-drop { position: relative; }
.nav-drop-label { color: var(--muted); padding: 6px 12px; border-radius: 8px; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.nav-drop-label:hover { color: var(--text); background: var(--accent-soft); opacity: 1; }
.nav-drop-label .caret { font-size: 10px; transition: transform .2s; }
.nav-drop:hover .caret { transform: rotate(180deg); }
.nav-drop-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,.14); padding: 6px; min-width: 190px; z-index: 100;
}
.nav-drop-menu::before {
  content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--card); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.nav-drop:hover .nav-drop-menu { display: block; }
.nav-drop-menu a {
  display: flex; align-items: center; gap: 8px; color: var(--text);
  padding: 8px 12px; border-radius: 8px; font-size: 14px; white-space: nowrap;
}
.nav-drop-menu a:hover { background: var(--accent-soft); color: var(--accent); opacity: 1; transform: none; }
/* 移动端展开的导航里，下拉改为静态铺开 */
@media (max-width: 700px) {
  .nav-drop { width: 100%; }
  .nav-drop-menu {
    display: block; position: static; transform: none; box-shadow: none;
    border: none; background: var(--accent-soft); border-radius: 8px; margin: 4px 0 8px;
  }
  .nav-drop-menu::before { display: none; }
}

/* 字号整体微调：更精致统一 */
body { font-size: 15px; }
.page-head h1 { font-size: 22px; }
.post-row-body h3, .post-card-body h3 { font-size: 16.5px; }
.post-excerpt { font-size: 13px; line-height: 1.65; }
.post-meta { font-size: 12.5px; gap: 10px; }
.moment-text { font-size: 14.5px; }
.comment-text, .msg-text { font-size: 14px; }
.comment-head { font-size: 13.5px; }
.home-moment p { font-size: 14px; }
.section-head h2 { font-size: 18px; }
.md { font-size: 15px; }
.site-nav a { font-size: 14.5px; }
.btn { font-size: 14px; }
.empty { font-size: 14px; }

/* ================= 网上邻居（友链页） ================= */
.nb-heading { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 14px; }
.nb-heading:first-of-type { margin-top: 6px; }
.nb-heading h2 { font-size: 18px; position: relative; padding-left: 13px; }
.nb-heading h2::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  border-radius: 3px; background: linear-gradient(180deg, #4f7cff, #9b6cff);
}
.nb-heading span { color: var(--muted); font-size: 13px; }

.friend-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.friend-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  color: var(--text); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.friend-card:hover {
  opacity: 1; transform: translateY(-3px);
  border-color: rgba(79,124,255,.45); box-shadow: 0 8px 22px rgba(79,124,255,.14);
}
.friend-avatar {
  width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4f7cff, #9b6cff); color: #fff;
  font-size: 20px; font-weight: 600;
}
.friend-avatar-fb { display: none; }
.agg-emoji { font-size: 24px; background: var(--accent-soft); }
.friend-info { min-width: 0; }
.friend-info b { font-size: 14.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-info p {
  color: var(--muted); font-size: 12.5px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 本站信息卡 */
.my-info-card {
  display: flex; gap: 16px; align-items: flex-start;
  border-left: 4px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, #4f7cff, #9b6cff) border-box;
  border: 1px solid transparent;
}
.my-info-avatar-wrap { flex-shrink: 0; }
.my-info-avatar {
  width: 74px; height: 74px; border-radius: 14px; object-fit: cover;
  box-shadow: var(--shadow);
}
.my-info-body b { font-size: 16px; }
.my-info-body > p { color: var(--muted); font-size: 13.5px; margin: 3px 0 10px; }
.my-info-fields { display: grid; gap: 5px; }
.my-info-fields code {
  background: var(--bg); border-radius: 7px; padding: 5px 10px;
  font-size: 12.5px; color: var(--muted); word-break: break-all;
  font-family: Consolas, Monaco, monospace;
}

/* 申请表单两列 */
.apply-row { display: flex; gap: 10px; }
.apply-row input { flex: 1; }
.comment-form input[type="text"], .comment-form input[type="url"] {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
  font-size: 14px; outline: none; background: var(--bg); font-family: inherit; width: 100%;
}
.comment-form :is(input, textarea):focus { border-color: var(--accent); background: #fff; }
.comment-form > input[type="text"], .comment-form > input[type="url"] { margin-bottom: 10px; }

/* ================= 友人帐：信息复制列表 ================= */
.link-card { padding: 18px 20px; }
.my-info-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.my-info-head .my-info-avatar { width: 54px; height: 54px; border-radius: 12px; }
.my-info-head b { font-size: 15.5px; }
.link-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; margin-bottom: 8px;
}
.link-row:last-child { margin-bottom: 0; }
.link-row code {
  flex: 1; min-width: 0; word-break: break-all;
  font-family: Consolas, Monaco, "Courier New", monospace; font-size: 13px; color: var(--text);
}
.link-label {
  flex-shrink: 0; width: 52px; text-align: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12.5px; padding: 3px 0; border-radius: 7px; font-weight: 600;
}
.copy-btn {
  flex-shrink: 0; width: 34px; height: 30px; border: none; cursor: pointer;
  background: var(--accent-soft); color: var(--accent); border-radius: 8px;
  font-size: 15px; transition: all .15s; font-family: inherit;
}
.copy-btn:hover { background: var(--accent); color: #fff; opacity: 1; }
.copy-btn.copied { background: #27ae60; color: #fff; width: auto; padding: 0 10px; font-size: 12.5px; }

/* 申请表单输入垂直对齐 */
#apply-form .comment-form { display: flex; flex-direction: column; gap: 10px; }
#apply-form .cf-extra { margin-top: 2px; }

/* ================= 进站动画：超级赛亚人变身 ================= */
#intro {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(circle at 50% 42%, #1c1633 0%, #07060f 62%);
  overflow: hidden; cursor: pointer;
  transition: opacity .45s ease, visibility .45s;
}
#intro.done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: i-shake .12s linear infinite;
}
@keyframes i-shake {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(1.5px,-1px); }
  50% { transform: translate(-1.5px,1px); }
  75% { transform: translate(1px,1.5px); }
}
#intro.super .intro-stage { animation: i-shake .09s linear infinite; }

.intro-aura {
  position: absolute; left: 50%; top: 50%; width: 240px; height: 320px;
  transform: translate(-50%, -54%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120,140,255,.28), rgba(120,140,255,0));
  filter: blur(6px);
  animation: i-aura 1s ease-in-out infinite;
}
@keyframes i-aura {
  0%, 100% { transform: translate(-50%,-54%) scale(1); opacity: .7; }
  50% { transform: translate(-50%,-54%) scale(1.12); opacity: 1; }
}
#intro.super .intro-aura {
  width: 340px; height: 430px;
  background: radial-gradient(closest-side, rgba(255,214,64,.55), rgba(255,170,20,.22) 60%, rgba(255,150,0,0));
  animation-duration: .45s;
}

.intro-goku { width: 210px; height: auto; position: relative; z-index: 2; }
.intro-goku .i-hair { fill: #0d0d1c; transition: fill .25s; }
.intro-goku .i-hair-glow {
  fill: url(#hairGold); opacity: 0; filter: drop-shadow(0 0 14px rgba(255,210,60,.9));
}
#intro.super .intro-goku .i-hair { fill: transparent; }
#intro.super .intro-goku .i-hair-glow { opacity: 1; animation: i-hairpulse .5s ease-in-out infinite alternate; }
@keyframes i-hairpulse {
  from { filter: drop-shadow(0 0 10px rgba(255,210,60,.8)); }
  to { filter: drop-shadow(0 0 22px rgba(255,220,90,1)); }
}
#intro.super .intro-goku .i-figure { filter: drop-shadow(0 0 18px rgba(255,200,60,.55)); }

.intro-goku .i-bolts polyline { opacity: 0; }
#intro.super .intro-goku .i-bolts polyline { animation: i-bolt .38s steps(2) infinite; }
#intro.super .intro-goku .i-bolts polyline:nth-child(2) { animation-delay: .12s; }
#intro.super .intro-goku .i-bolts polyline:nth-child(3) { animation-delay: .2s; }
#intro.super .intro-goku .i-bolts polyline:nth-child(4) { animation-delay: .08s; }
@keyframes i-bolt {
  0% { opacity: 1; }
  50% { opacity: .15; }
  100% { opacity: 1; }
}

/* 上升的能量粒子 */
.intro-particles { position: absolute; inset: 0; pointer-events: none; }
.intro-particles i {
  position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%;
  background: rgba(140,160,255,.9); opacity: 0;
  animation: i-rise 1.15s linear infinite;
}
.intro-particles i:nth-child(1) { left: 12%; animation-delay: 0s; }
.intro-particles i:nth-child(2) { left: 22%; animation-delay: .3s; }
.intro-particles i:nth-child(3) { left: 31%; animation-delay: .55s; }
.intro-particles i:nth-child(4) { left: 40%; animation-delay: .12s; }
.intro-particles i:nth-child(5) { left: 48%; animation-delay: .42s; }
.intro-particles i:nth-child(6) { left: 57%; animation-delay: .2s; }
.intro-particles i:nth-child(7) { left: 64%; animation-delay: .6s; }
.intro-particles i:nth-child(8) { left: 72%; animation-delay: .05s; }
.intro-particles i:nth-child(9) { left: 80%; animation-delay: .35s; }
.intro-particles i:nth-child(10) { left: 88%; animation-delay: .5s; }
.intro-particles i:nth-child(11) { left: 17%; animation-delay: .7s; }
.intro-particles i:nth-child(12) { left: 44%; animation-delay: .8s; }
.intro-particles i:nth-child(13) { left: 60%; animation-delay: .9s; }
.intro-particles i:nth-child(14) { left: 93%; animation-delay: .25s; }
@keyframes i-rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: .95; }
  100% { transform: translateY(-62vh) scale(.3); opacity: 0; }
}
#intro.super .intro-particles i { background: rgba(255,208,74,.95); animation-duration: .8s; }

/* 变身白闪 */
.intro-flash {
  position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5;
}
#intro.super .intro-flash { animation: i-flash .5s ease-out 1; }
@keyframes i-flash {
  0% { opacity: 0; }
  18% { opacity: .95; }
  100% { opacity: 0; }
}

/* 文案 */
.intro-text { position: relative; z-index: 3; margin-top: 26px; height: 34px; text-align: center; }
.intro-text span {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 19px; font-weight: 700; letter-spacing: 4px; white-space: nowrap;
}
.intro-text .t-charge { color: #aab4ff; opacity: 0; animation: i-text1 .5s ease .15s forwards; text-shadow: 0 0 12px rgba(130,150,255,.8); }
.intro-text .t-super {
  color: #ffd94a; opacity: 0;
  text-shadow: 0 0 16px rgba(255,200,50,.95), 0 0 34px rgba(255,170,20,.6);
}
#intro.super .intro-text .t-charge { animation: none; opacity: 0; }
#intro.super .intro-text .t-super { animation: i-text2 .4s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes i-text1 { to { opacity: 1; } }
@keyframes i-text2 {
  from { opacity: 0; transform: translateX(-50%) scale(2.2); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.intro-skip {
  position: absolute; right: 18px; bottom: 14px; z-index: 6;
  color: rgba(255,255,255,.4); font-size: 12.5px;
}

/* ================= 进站动画 v2：3 秒逼真变身 ================= */
#intro { background: radial-gradient(circle at 50% 45%, #151230 0%, #05040c 65%); }
#intro .intro-stage { animation: i-shake .14s linear infinite; }
#intro.super .intro-stage { animation: i-shake .07s linear infinite; }

/* 地面与地裂 */
.g2-ground {
  position: absolute; left: 50%; bottom: 16%; width: 460px; height: 60px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, #0a0817, transparent);
  border-radius: 50%;
}
.g2-cracks { position: absolute; left: 50%; bottom: 15%; width: 340px; height: 40px; transform: translateX(-50%); opacity: 0; transition: opacity .3s; }
#intro.super .g2-cracks { opacity: 1; }
.g2-cracks i { position: absolute; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #ffd23e, transparent); box-shadow: 0 0 8px #ffd23e; }
.g2-cracks i:nth-child(1) { left: 0; width: 90px; transform: rotate(8deg); }
.g2-cracks i:nth-child(2) { left: 70px; width: 120px; transform: rotate(-6deg); }
.g2-cracks i:nth-child(3) { left: 160px; width: 100px; transform: rotate(5deg); }
.g2-cracks i:nth-child(4) { left: 40px; width: 70px; top: 22px; transform: rotate(-10deg); }
.g2-cracks i:nth-child(5) { left: 170px; width: 110px; top: 20px; transform: rotate(9deg); }
.g2-cracks i:nth-child(6) { left: 250px; width: 80px; transform: rotate(-7deg); }

/* 冲击波圆环 */
.g2-shock {
  position: absolute; left: 50%; top: 52%; width: 60px; height: 60px;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 3px solid rgba(255,214,64,.9); opacity: 0;
}
#intro.super .g2-shock { animation: i-shockwave .8s ease-out 1; }
@keyframes i-shockwave {
  0% { opacity: .95; transform: translate(-50%,-50%) scale(.3); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(5.5); }
}

/* 分层火焰光环 */
.g2-aura { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); border-radius: 50%; }
.g2-a1 {
  width: 200px; height: 300px;
  background: radial-gradient(closest-side, rgba(110,140,255,.30), transparent 72%);
  filter: blur(8px);
  animation: i-aura 1s ease-in-out infinite;
}
#intro.super .g2-a1 { width: 330px; height: 470px; background: radial-gradient(closest-side, rgba(255,196,40,.42), transparent 74%); animation-duration: .4s; }
.g2-a2 {
  width: 130px; height: 210px;
  background: radial-gradient(closest-side, rgba(150,170,255,.35), transparent 70%);
  filter: blur(5px);
  animation: i-aura .8s ease-in-out .15s infinite;
}
#intro.super .g2-a2 { width: 230px; height: 380px; background: radial-gradient(closest-side, rgba(255,222,90,.5), transparent 70%); animation-duration: .3s; }
.g2-a3 {
  width: 70px; height: 130px;
  background: radial-gradient(closest-side, rgba(220,230,255,.5), transparent 70%);
  filter: blur(3px);
  animation: i-aura .6s ease-in-out .1s infinite;
}
#intro.super .g2-a3 { display: none; }

/* SVG 人物 */
.g2-svg { width: 240px; height: auto; position: relative; z-index: 2; }
.g2-flames .f { transform-origin: 120px 290px; opacity: 0; transition: opacity .25s; }
.f1 { fill: rgba(255,170,20,.30); filter: blur(10px); }
.f2 { fill: rgba(255,210,70,.42); filter: blur(5px); }
.f3 { fill: rgba(255,244,190,.75); filter: blur(2px); }
#intro.super .g2-flames .f { opacity: 1; }
#intro.super .f1 { animation: i-flame .34s ease-in-out infinite alternate; }
#intro.super .f2 { animation: i-flame .27s ease-in-out .06s infinite alternate; }
#intro.super .f3 { animation: i-flame .22s ease-in-out .12s infinite alternate; }
@keyframes i-flame {
  from { transform: scaleY(1) skewX(-2deg); }
  to { transform: scaleY(1.14) skewX(2.5deg); }
}

.g2-body { transition: filter .3s; }
#intro.super .g2-body { filter: drop-shadow(0 0 22px rgba(255,200,60,.6)); }
.g2-gi { fill: url(#g2gi); }
.g2-shirt { fill: #2b5cff; }
.g2-lapel { fill: url(#g2gi); stroke: #c96e00; stroke-width: 1.5; }
.g2-neck { fill: #f0b98a; }
.g2-face { fill: #ffd9b3; }
.g2-ear { fill: #ffd9b3; }
.g2-eyes .eye { fill: #fff; }
.g2-eyes .pupil { fill: #24303e; }
#intro.super .g2-eyes .pupil { fill: #1fb6c9; }
.g2-brow { stroke: #1c1c28; stroke-width: 4; stroke-linecap: round; transition: stroke .3s; }
#intro.super .g2-brow { stroke: #e8b400; }
.g2-mouth { stroke: #8a4b2f; stroke-width: 3; fill: none; stroke-linecap: round; }

/* 头发：黑发 → 金发竖起 */
.g2-hair-black { fill: #12121f; transition: opacity .18s; }
.g2-hair-super { opacity: 0; transform-origin: 120px 88px; transform: scaleY(.55); transition: transform .28s cubic-bezier(.2,1.5,.4,1), opacity .18s; }
.g2-hair-super .hs { fill: url(#g2hair); }
.g2-hair-super .hs:first-child { filter: drop-shadow(0 0 16px rgba(255,214,70,.95)); }
#intro.super .g2-hair-black { opacity: 0; }
#intro.super .g2-hair-super { opacity: 1; transform: scaleY(1); }

/* 闪电 */
.g2-bolts polyline { opacity: 0; }
#intro.super .g2-bolts polyline { animation: i-bolt .36s steps(2) infinite; }
#intro.super .g2-bolts polyline:nth-child(2) { animation-delay: .1s; }
#intro.super .g2-bolts polyline:nth-child(3) { animation-delay: .18s; }
#intro.super .g2-bolts polyline:nth-child(4) { animation-delay: .07s; }
#intro.super .g2-bolts polyline:nth-child(5) { animation-delay: .14s; }
#intro.super .g2-bolts polyline:nth-child(6) { animation-delay: .22s; }

/* 金色粒子 */
.g2-particles { position: absolute; inset: 0; pointer-events: none; }
.g2-particles i {
  position: absolute; bottom: -14px; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(140,160,255,.9); opacity: 0;
  animation: i-rise 1.1s linear infinite;
}
.g2-particles i:nth-child(1) { left: 8%; animation-delay: 0s; }
.g2-particles i:nth-child(2) { left: 16%; animation-delay: .32s; }
.g2-particles i:nth-child(3) { left: 25%; animation-delay: .6s; }
.g2-particles i:nth-child(4) { left: 34%; animation-delay: .15s; }
.g2-particles i:nth-child(5) { left: 42%; animation-delay: .5s; }
.g2-particles i:nth-child(6) { left: 50%; animation-delay: .24s; }
.g2-particles i:nth-child(7) { left: 58%; animation-delay: .66s; }
.g2-particles i:nth-child(8) { left: 66%; animation-delay: .08s; }
.g2-particles i:nth-child(9) { left: 74%; animation-delay: .4s; }
.g2-particles i:nth-child(10) { left: 82%; animation-delay: .56s; }
.g2-particles i:nth-child(11) { left: 90%; animation-delay: .2s; }
.g2-particles i:nth-child(12) { left: 96%; animation-delay: .72s; }
.g2-particles i:nth-child(13) { left: 30%; animation-delay: .84s; }
.g2-particles i:nth-child(14) { left: 55%; animation-delay: .92s; }
.g2-particles i:nth-child(15) { left: 12%; animation-delay: .78s; }
.g2-particles i:nth-child(16) { left: 88%; animation-delay: .88s; }
#intro.super .g2-particles i { background: rgba(255,206,66,.95); animation-duration: .75s; }

/* 文案（3 秒分镜） */
#intro .intro-text { height: 40px; }
#intro .t-charge { font-size: 21px; color: #aab4ff; opacity: 0; animation: i-scream .9s ease .1s infinite alternate; text-shadow: 0 0 14px rgba(130,150,255,.85); }
@keyframes i-scream { from { opacity: .55; letter-spacing: 3px; } to { opacity: 1; letter-spacing: 6px; } }
#intro.super .t-charge { animation: none; opacity: 0; }
#intro .t-super { font-size: 26px; color: #ffd94a; opacity: 0;
  text-shadow: 0 0 18px rgba(255,200,50,.95), 0 0 40px rgba(255,170,20,.6); }
#intro.super .t-super { animation: i-text2 .45s cubic-bezier(.2,1.6,.4,1) forwards; }

/* 变身白闪（更饱满） */
#intro.super .intro-flash { animation: i-flash .55s ease-out 1; }
@keyframes i-flash {
  0% { opacity: 0; }
  15% { opacity: 1; }
  40% { opacity: .55; }
  70% { opacity: .25; }
  100% { opacity: 0; }
}

/* 标题/介绍同行两列 */
.link-row.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.link-pair { display: flex; align-items: center; gap: 9px; min-width: 0; }
.link-pair code {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .link-row.duo { grid-template-columns: 1fr; }
}

.g2-hair-black { fill: #20203a; stroke: rgba(130,150,255,.45); stroke-width: 1.6; }
.g2-mouth { fill: #5b2b1d; stroke: none; }

/* 金发贴合头顶（路径底边下移对齐脸部） */
.g2-hair-super { transform: translateY(24px) scaleY(.55); }
#intro.super .g2-hair-super { transform: translateY(24px) scaleY(1); }

/* Canvas 版开场动画 */
#intro canvas { display: block; width: 100%; height: 100%; }

/* 一键复制全部按钮 + 两列间距 */
.copy-all-btn {
  border: 1.5px solid var(--accent); color: var(--accent); background: var(--accent-soft);
  border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; font-family: inherit; transition: all .18s;
  flex-shrink: 0;
}
.copy-all-btn:hover { background: var(--accent); color: #fff; opacity: 1; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(79,124,255,.3); }
.copy-all-btn.copied { background: #27ae60; border-color: #27ae60; color: #fff; }
.link-row.duo { gap: 20px; }
@media (max-width: 700px) {
  .link-row.duo { gap: 10px; }
  .copy-all-btn { width: 100%; margin-top: 8px; }
}

/* 邮箱输入框与其他输入框样式统一 */
.comment-form input[type="email"] {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
  font-size: 14px; outline: none; background: var(--bg); font-family: inherit; width: 100%;
}

/* 正文图片：限制尺寸、居中、可点击放大 */
.md img {
  display: block; margin: 1em auto;
  max-width: 100%; max-height: 340px; width: auto;
  border-radius: 10px; cursor: zoom-in;
  box-shadow: var(--shadow);
}

/* 星图照片缩略图标记（覆盖层，跟随地图缩放平移） */
.starmap-photo-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.photo-marker {
  position: absolute; width: 52px; height: 40px; transform: translate(-50%, -100%);
  border-radius: 9px; overflow: hidden; pointer-events: auto;
  border: 2px solid #5b8cff; box-shadow: 0 3px 10px rgba(0,0,0,.4);
  background: #16203a; display: flex;
  transition: transform .15s, box-shadow .15s;
}
.photo-marker:hover { transform: translate(-50%, -100%) scale(1.15); box-shadow: 0 5px 18px rgba(91,140,255,.55); z-index: 9; }
.photo-marker img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-marker .pm-count {
  position: absolute; right: 2px; bottom: 2px; background: rgba(15,20,32,.85);
  color: #cfe0ff; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 8px;
}

/* ================= 星图 ================= */
.starmap-card { padding: 10px; }
.starmap-chart { width: 100%; height: 560px; }
.starmap-legend {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; padding: 8px 0 4px;
  color: var(--muted); font-size: 13.5px;
}
.starmap-legend .dot { font-style: normal; margin-right: 5px; }
.dot-star { color: #ffd23e; }
.dot-photo { color: #5b8cff; }
.dot-moment { color: #3ecf8e; }
.starmap-photo-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.photo-marker {
  position: absolute; width: 52px; height: 40px; transform: translate(-50%, -100%);
  border-radius: 9px; overflow: hidden; pointer-events: auto;
  border: 2px solid #5b8cff; box-shadow: 0 3px 10px rgba(0,0,0,.4);
  background: #16203a; display: flex;
  transition: transform .15s, box-shadow .15s;
}
.photo-marker:hover { transform: translate(-50%, -100%) scale(1.15); box-shadow: 0 5px 18px rgba(91,140,255,.55); z-index: 9; }
.photo-marker img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-marker .pm-count {
  position: absolute; right: 2px; bottom: 2px; background: rgba(15,20,32,.85);
  color: #cfe0ff; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 8px;
}
/* 后台省市选择器 */
.city-select select {
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px;
  font-size: 14.5px; background: var(--bg); outline: none; font-family: inherit; margin-right: 8px;
}
.city-select select:focus { border-color: var(--accent); background: #fff; }
@media (max-width: 700px) {
  .starmap-chart { height: 400px; }
}

.dot-city { color: #2dd8c6; }

/* ================= 星图 v2：卫星图（Leaflet） ================= */
.main-wrap:has(.starmap-card) { max-width: 1280px; }
.starmap-card { position: relative; z-index: 0; padding: 8px; }
.starmap-chart {
  height: 78vh; min-height: 520px; width: 100%;
  border-radius: 12px; overflow: hidden;
}
.leaflet-container { background: #0a0f1a; font-family: inherit; }
/* 自绘标签 */
.map-label-wrap { background: transparent !important; border: none !important; }
.map-label {
  display: inline-block; transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 4px rgba(0,0,0,.95), 0 1px 4px rgba(0,0,0,.9);
}
.label-prov { color: rgba(255,255,255,.8); font-size: 13px; font-weight: 600; letter-spacing: 3px; }
.label-city { color: #fff; font-size: 12px; font-weight: 600; }
.label-visited { color: #fff; font-size: 15px; font-weight: 800; text-shadow: 0 0 6px rgba(0,0,0,.95); }
/* Leaflet 里的照片标记 */
.pm-wrap { background: none; border: none; }
.photo-marker.pm-leaflet {
  position: relative; transform: none; display: flex;
  width: 52px; height: 40px; margin: 0;
}
@media (max-width: 700px) {
  .starmap-chart { height: 60vh; min-height: 380px; }
  .label-prov { font-size: 11px; letter-spacing: 1px; }
}

/* 星图覆盖层（自绘标签/照片标记） */
.starmap-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 500; overflow: hidden; }
.starmap-overlay .map-label {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
}
.starmap-overlay .photo-marker {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto;
  width: 52px; height: 40px; display: flex;
  border-radius: 9px; overflow: hidden;
  border: 2px solid #5b8cff; box-shadow: 0 3px 10px rgba(0,0,0,.45);
  background: #16203a;
  transition: transform .15s, box-shadow .15s;
}
.starmap-overlay .photo-marker:hover {
  transform: translate(-50%, -100%) scale(1.15);
  box-shadow: 0 5px 18px rgba(91,140,255,.6); z-index: 9;
}
.starmap-overlay .photo-marker img { width: 100%; height: 100%; object-fit: cover; display: block; }
.starmap-overlay .photo-marker .pm-count {
  position: absolute; right: 2px; bottom: 2px; background: rgba(15,20,32,.85);
  color: #cfe0ff; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 8px;
}
/* 覆盖层里的足迹标签不需要位移（由 left/top 定位） */
.starmap-overlay .label-visited { transform: translate(-50%, -100%); }

/* 足迹城市白色气泡（参考写作者地图样式） */
.map-pill-wrap { background: transparent !important; border: none !important; }
.map-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 12px; padding: 6px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.mp-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  background: #e04b3f; box-shadow: 0 0 0 3px rgba(224,75,63,.22);
}
.mp-body { display: flex; flex-direction: column; line-height: 1.35; }
.mp-body b { color: #333; font-size: 13px; font-weight: 700; }
.mp-body em { color: #999; font-size: 11px; font-style: normal; }

/* 覆盖层内气泡 */
.starmap-overlay .map-pill {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: none; display: flex;
}

/* 图例移到地图上方后的间距 */
.starmap-legend { padding: 0 0 10px; }

/* 说说位置独立行 */
.moment-loc { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* 照片标记缩小一档 */
.starmap-overlay .photo-marker { width: 44px; height: 34px; }
.starmap-overlay .photo-marker .pm-count { font-size: 9px; padding: 1px 4px; }

/* 足迹气泡缩小 */
.map-pill { padding: 4px 10px; border-radius: 10px; }
.mp-dot { width: 10px; height: 10px; }
.map-pill .mp-body b { font-size: 12px; }
/* Leaflet 悬停提示（足迹备注） */
.leaflet-tooltip.starmap-tip {
  background: #fff; color: #333; border: 1px solid #e04b3f;
  border-radius: 8px; box-shadow: 0 3px 12px rgba(0,0,0,.25);
  font-size: 12.5px; padding: 5px 10px;
}
.leaflet-tooltip.starmap-tip::before { border-top-color: #e04b3f; }

/* 修复点击足迹区域出现黑色焦点边框 */
.leaflet-container path.leaflet-interactive:focus,
.leaflet-container svg.leaflet-interactive:focus { outline: none !important; }

/* 深色模式：瓦片反色伪深色地图 */
.starmap-dark .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88);
}
.starmap-dark .leaflet-container { background: #0e1420; }

/* 足迹气泡再缩小一档 */
.map-pill { padding: 3px 8px; border-radius: 8px; }
.mp-dot { width: 8px; height: 8px; }
.map-pill .mp-body b { font-size: 11px; }
/* 照片标记再缩小一档 */
.starmap-overlay .photo-marker { width: 38px; height: 30px; border-width: 1.5px; }
.starmap-overlay .photo-marker .pm-count { font-size: 8.5px; padding: 1px 3px; }

/* ================= 片忆当年（影片墙） ================= */
.film-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1400px) {
  .film-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .film-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .film-grid { grid-template-columns: minmax(0, 1fr); }
}
.film-card { display: block; overflow: hidden; color: inherit; transition: transform .25s, box-shadow .25s; }
.film-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.film-cover {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, #232b36, #171d25);
}
.film-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.film-card:hover .film-cover img { transform: scale(1.06); }
.film-cover-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 44px; opacity: .5;
}
.film-play-badge {
  position: absolute; right: 14px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(15, 18, 25, .62); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 17px; padding-left: 4px; backdrop-filter: blur(4px);
  transition: background .25s, transform .25s;
}
.film-card:hover .film-play-badge { background: var(--accent); transform: scale(1.1); }
.film-card-body { padding: 18px 20px 20px; }
.film-name {
  font-size: 20px; font-weight: 700; margin: 0 0 8px; line-height: 1.35;
  word-break: break-word; /* 标题一行放得下就一行，放不下自动换行完整显示 */
}
.film-desc {
  color: var(--muted); font-size: 15px; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 22px;
}
.film-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 13.5px; }

/* 影片详情：左播放器右评论（整栏限宽居中，保证视频下方的介绍在首屏可见） */
.film-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start;
  max-width: 1460px; margin: 0 auto;
}
.film-side { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
.film-main { display: grid; gap: 14px; }
.film-player {
  position: relative; background: #000; border-radius: 14px; overflow: hidden;
  aspect-ratio: 16 / 9; box-shadow: var(--shadow); user-select: none;
}
.film-player video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.fp-bigplay {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  cursor: pointer; background: rgba(0, 0, 0, .18);
}
.fp-bigplay.show { display: flex; }
.fp-bigplay span {
  width: 74px; height: 74px; border-radius: 50%; background: rgba(15, 18, 25, .66);
  color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center;
  padding-left: 6px; backdrop-filter: blur(4px); transition: transform .2s, background .2s;
}
.fp-bigplay:hover span { transform: scale(1.08); background: var(--accent); }
.fp-controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  opacity: 1; transition: opacity .25s;
}
.film-player.is-playing .fp-controls:not(.show) { opacity: 0; }
.film-player.is-playing .fp-controls:not(.show):hover { opacity: 1; }
.fp-btn {
  border: none; background: none; color: #fff; cursor: pointer; font-size: 17px;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; line-height: 1;
}
.fp-btn:hover { background: rgba(255, 255, 255, .16); }
.fp-progress {
  flex: 1; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .25);
  position: relative; cursor: pointer; touch-action: none; overflow: hidden;
}
.fp-progress:hover { height: 7px; }
.fp-buffered { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, .3); }
.fp-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }
.fp-progress.dragging .fp-played { transition: none; }
.fp-time { color: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.film-info { padding: 18px 20px; }
.film-detail-title { font-size: 26px; margin: 0 0 8px; }
.film-detail-meta { margin: 0 0 10px; }
.film-detail-desc { color: var(--text); font-size: 15.5px; margin: 0; }
.film-like { width: 100%; justify-content: center; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  border-radius: 24px; padding: 8px 22px; font-size: 14.5px; color: var(--text);
  font-family: inherit; transition: all .2s; }
.film-like:hover { border-color: #e74c3c; color: #e74c3c; }
.film-like.liked { background: #fdeeee; border-color: #e74c3c; color: #e74c3c; }
.film-like.liked .heart { animation: pop .35s; }
html[data-theme="dark"] .film-like.liked { background: #3a2729; }
.film-side { display: grid; gap: 14px; }
/* 后台影片缩略图 */
.film-admin-thumb { width: 120px; flex-shrink: 0; }
.film-admin-thumb img { width: 120px; height: 68px; object-fit: cover; border-radius: 8px; display: block; }
.film-admin-noimg {
  width: 120px; height: 68px; border-radius: 8px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
@media (max-width: 900px) {
  .film-layout { grid-template-columns: 1fr; }
}

/* ================= 片忆当年：全宽布局升级 ================= */
.main-wrap.main-wide { max-width: 1720px; }
.fp-danmaku { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.fp-danmaku .dan-item {
  position: absolute; left: 100%; white-space: nowrap; pointer-events: auto;
  color: #fff; font-size: 15px; padding: 2px 8px; border-radius: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.4);
  background: rgba(0,0,0,.22); will-change: transform;
  animation: fpDanMove linear forwards; animation-play-state: paused;
}
.film-player.is-playing .fp-danmaku .dan-item { animation-play-state: running; }
@keyframes fpDanMove { from { transform: translateX(0); } to { transform: translateX(var(--dan-dist)); } }
.fp-btn.fp-dan-on { color: var(--accent); background: rgba(255,255,255,.14); font-size: 13px; font-weight: 700; }

/* ================= 相册 / 照片：宽界面适配 ================= */
/* ① 顶栏通栏：品牌贴最左、导航与主题按钮贴最右，与页面边缘留出一点距离 */
.site-header .container { max-width: none; padding-left: 24px; padding-right: 24px; }

/* ② 相册详情（宽界面）：一行 5 张，格子保持 284px 不放大；窄屏回落为默认自适应 */
@media (min-width: 701px) {
  .main-wrap.main-wide .photo-grid { grid-template-columns: repeat(auto-fill, 284px); justify-content: center; }
}

/* ③ 照片详情：中等宽度（约为宽版的一半多），照片比窄版大又不至于过宽 */
.main-wrap.main-photo { max-width: 1120px; }

/* 照片详情：翻页导航固定在照片上方 —— 序号居左，上一张/下一张成组靠右 */
.stage-nav .stage-arrow[data-dir="prev"] { margin-left: auto; }

/* ================= 界面美化 v4：环境光背景 + 标题样式 ================= */
/* ① 背景环境光：固定柔光层，底色仍由 var(--bg) 提供（末尾声明覆盖旧的顶部淡渐变，避免叠加发脏） */
body { background: var(--bg); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(79,124,255,.10), transparent 62%),
    radial-gradient(950px 560px at 88% -6%, rgba(155,108,255,.09), transparent 62%),
    radial-gradient(900px 520px at 100% 42%, rgba(255,138,101,.05), transparent 65%),
    radial-gradient(800px 480px at -6% 78%, rgba(79,124,255,.05), transparent 65%);
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(115,150,255,.12), transparent 62%),
    radial-gradient(950px 560px at 88% -6%, rgba(155,108,255,.10), transparent 62%),
    radial-gradient(900px 520px at 100% 42%, rgba(255,138,101,.04), transparent 65%),
    radial-gradient(800px 480px at -6% 78%, rgba(115,150,255,.06), transparent 65%);
}

/* ② 标题荧光笔底衬：色带只贴文字宽度，与左侧竖条装饰共存 */
.page-head h1, .section-head h2 {
  width: fit-content;
  background-image: linear-gradient(100deg, rgba(79,124,255,.16), rgba(155,108,255,.20));
  background-repeat: no-repeat;
  background-size: 100% .42em;
  background-position: 0 100%;
  padding-bottom: 2px;
  border-radius: 3px;
}
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .section-head h2 {
  background-image: linear-gradient(100deg, rgba(115,150,255,.20), rgba(155,108,255,.24));
}

/* ③ 装饰竖条统一为蓝紫渐变（与友人帐/留言板标题一致） */
.section-title::before, .side-title::before { background: linear-gradient(180deg, #4f7cff, #9b6cff); }