/* LXGW 字体改为 head 里异步加载（见 index.php）：@import 是串行阻塞，国内 CDN 慢会拖慢整个首屏 */

/* ===== 主题过渡 =====
   注意（性能）：
   1. 不要过渡 background（渐变无法插值，只会白白触发每帧重绘）和 box-shadow（每帧重算阴影，移动端掉帧大户）
   2. 不要用 !important —— 会覆盖元素自身的 transition（比如 .post-card 的入场动画会被它干掉）
   3. 排除特效层（樱花/星星），避免主题切换劫持它们正在跑的动画
   4. * 级 transition 只在主题切换瞬间开启（html.theme-anim）：常驻会让每次滚动重绘都给
      所有元素做颜色插值，移动端明显掉帧；日常 hover 过渡由下方轻量名单负责 */
html.theme-anim [data-theme] *:not(canvas):not(img):not(video):not(.toast):not(.sakura):not(.star-field):not(.bg-star) {
    transition: background-color 0.35s ease, color 0.3s ease, border-color 0.3s ease;
}
/* 常驻轻量过渡：只覆盖常用交互元素，hover/状态变化不生硬（代价可控） */
a, button, input, select, textarea,
.menu-item, .quick-item, .nav-btn, .btn-nav, .btn-primary, .btn-action, .btn-sm,
.btn-green, .btn-yellow, .btn-red, .btn-cancel, .btn-outline, .btn-icon,
.tag, .badge, .badge-gray, .comment-item, .msg-citem, .post-card, .post-form-card,
.profile-card, .auth-card, .weather-card, .admin-stat-card, .admin-section, .login-hint {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ===== 深色主题 ===== */
:root, [data-theme="dark"] {
    --primary: #5b8dd9; --primary-light: #8bb4f0; --primary-dark: #3a6bc5;
    --accent: #a8d4f0;
    --bg: #0b1a2e; --bg2: #0f2240;
    --bg-card: rgba(15,34,64,0.85);
    --text: #d0dff0; --text-dim: #7a9ac0; --text-bright: #eef4ff;
    --glass: rgba(255,255,255,0.04); --glass-border: rgba(130,170,220,0.15);
    --shadow: 0 8px 32px rgba(0,0,0,0.4);
    --card-bg: rgba(12,28,52,0.8);
    --input-bg: rgba(255,255,255,0.05);
    --footer-bg: linear-gradient(180deg, rgba(11,26,46,0) 0%, rgba(8,16,33,0.65) 100%);
    --menu-bg: rgba(8,16,35,0.75);
    --rose: #fd79a8;           /* 粉色强调（限定/标签） */
    --rose-soft: #ff7a96;      /* 粉色文字（浅底上用） */
    --cyan: #7df9ff;           /* 青色链接/高亮 */
    --danger-text: #e17055;    /* 危险/删除文字色 */
    --brand-pink: #fe2c55;     /* 品牌粉（图库/点赞） */
    /* 主题化文字色（原先是各处硬编码的十六进制，浅色模式下会变成浅字压浅底） */
    --text-soft: #8fa9c9;      /* 次级文字 */
    --text-faint: #62789a;     /* 辅助/说明文字 */
    --text-on-glass: #dce9f8;  /* 玻璃面上的正文 */
    --gold: #fdcb6e;           /* 金色强调（等级/昵称/活动标签） */
    --radius: 16px; --radius-sm: 10px;
    --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ===== 浅色主题 ===== */
[data-theme="light"] {
    --primary: #4a7ec7; --primary-light: #6b9ee0; --primary-dark: #3565a8;
    --accent: #7ab8e0;
    --bg: #f0ece4; --bg2: #f5f1ea;
    --bg-card: rgba(245,241,234,0.92);
    --text: #3d3530; --text-dim: #8a7e75; --text-bright: #2a2420;
    --glass: rgba(0,0,0,0.03); --glass-border: rgba(160,140,120,0.2);
    --shadow: 0 8px 32px rgba(60,50,40,0.1);
    --card-bg: rgba(245,241,234,0.88);
    --input-bg: rgba(60,50,40,0.04);
    --footer-bg: linear-gradient(180deg, rgba(240,236,228,0) 0%, rgba(229,221,212,0.7) 100%);
    --menu-bg: rgba(240,236,228,0.75);
    /* 对应深色的那组主题化文字色 */
    --rose: #b3206a;
    --rose-soft: #c2185b;
    --cyan: #0b6e7a;
    --danger-text: #b8391c;
    --brand-pink: #c40f3d;
    --text-soft: #6f645b;
    --text-faint: #94897f;
    --text-on-glass: #33302c;
    --gold: #9c6b06;
}
/* 注意选择器方向：data-theme 挂在 <html> 上，必须写 html[data-theme=...]，写成 [data-theme] html 永远匹配不到 */
html[data-theme="light"] { background: #f0ece4 !important; }
/* body 不能再放不透明背景：body 的背景会画在负 z-index 壁纸层上方，把壁纸整个盖住（html 的背景负责画画布即可） */
[data-theme="light"] body { background: transparent !important; }
/* 浅色模式不再给壁纸加白色蒙层：
   原先 .hero-bg::after 是 60% 米白、.hero-overlay 又叠一层顶部米白渐变，
   整张壁纸被“洗白”，看起来就是背景上盖了一层白纱。
   这里全部改成透明，直接显示壁纸原图（深色主题的压暗层不受影响）。 */
[data-theme="light"] .hero-overlay { background: none; }
[data-theme="light"] .hero-bg::after { background: transparent; }

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* overscroll-behavior-y:none —— 关键修复：
   安卓 Chrome（Android 12+）在滚到顶部/底部继续拖拽时，会对「整页」做拉伸回弹，
   背景是 position:fixed，于是跟着被拉大/压小（就是“背景扩大缩小”）；
   同时整页被按非整数比例重栅格化，所有 backdrop-filter 层都要重算，帧率直接崩。
   关掉过度滚动链后，顶部/底部的拉伸与下拉刷新都不再触发。 */
/* html 负责画画布背景（与浅色主题一致）；body 必须透明——否则它的不透明背景会画在负 z-index 壁纸层上方，把壁纸整个盖住 */
html { scroll-behavior: smooth; overscroll-behavior-y: none; background: var(--bg); }
body { font-family:'LXGW WenKai','Noto Serif SC','STSong','SimSun',serif; background:transparent; color:var(--text); min-height:100vh; overflow-x:hidden; line-height:1.6; overscroll-behavior-y:none; }
a { color:var(--primary-light); text-decoration:none; }
a:hover { color:var(--accent); }
img { max-width:100%; height:auto; }
#snow { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:none; }

/* ===== 导航栏 ===== */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:0.8rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
/* 注意：这里不再改 padding —— 旧版滚动过 50px 时会把 0.8rem 改成 0.6rem，
   而 50px 正好在页面顶部，等于在“滑到最上面”时触发一次固定元素的布局+重绘。
   改为只换背景/阴影，视觉差异很小但不产生布局抖动。 */
.navbar.scrolled { background:var(--bg-card); box-shadow:0 2px 20px rgba(0,0,0,0.2); }
.nav-brand { font-size:1.2rem; font-weight:700; color:var(--primary-light); position:relative; z-index:1001; white-space:nowrap; flex-shrink:0; display:flex; align-items:center; gap:0.35rem; }   /* 雪花图标与站名必须同一行：inline 流下 svg 与文本的断行不可控，用 flex 钉死 */
.nav-links { display:flex; align-items:center; gap:0.6rem; }
.nav-user { display:flex; align-items:center; gap:0.4rem; font-size:0.85rem; color:var(--text-dim); text-decoration:none; }
.nav-name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-avatar { width:26px; height:26px; border-radius:50%; border:2px solid var(--primary); object-fit:cover; }
.btn-nav { padding:0.4rem 1rem; border-radius:var(--radius-sm); font-size:0.8rem; font-weight:500; background:var(--primary); color:#fff; border:none; cursor:pointer; display:inline-block; }
.btn-nav:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(91,141,217,0.4); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--glass-border); color:var(--text); }
.btn-outline:hover { background:var(--glass); }
.btn-icon { background:transparent; border:none; font-size:1.1rem; cursor:pointer; padding:4px 8px; border-radius:8px; }
.nav-toggle { display:none; position:relative; width:28px; height:20px; cursor:pointer; z-index:1001; flex-direction:column; justify-content:center; }
.nav-toggle span { display:block; width:100%; height:2px; background:var(--text-bright); border-radius:2px; position:absolute; left:0; transition:all 0.3s; }
.nav-toggle span:nth-child(1) { top:0; }
.nav-toggle span:nth-child(2) { top:50%; transform:translateY(-50%); }
.nav-toggle span:nth-child(3) { bottom:0; }
.nav-toggle.active span:nth-child(1) { top:50%; transform:translateY(-50%) rotate(45deg); background:var(--accent); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { bottom:50%; transform:translateY(50%) rotate(-45deg); background:var(--accent); }

/* ===== 移动端菜单（重新设计） ===== */
.mobile-menu { position:fixed; inset:0; z-index:999; background:linear-gradient(135deg,rgba(8,16,35,0.75),rgba(15,25,50,0.85)); backdrop-filter:blur(40px) saturate(2); -webkit-backdrop-filter:blur(40px) saturate(2); display:flex; flex-direction:column; opacity:0; pointer-events:none; transform:scale(0.95); transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1); overflow-y:auto; }
.mobile-menu::before { content:''; position:absolute; top:0; left:0; right:0; height:50%; background:linear-gradient(180deg,rgba(130,180,255,0.06),transparent); pointer-events:none; z-index:0; }
.mobile-menu.active { opacity:1; pointer-events:all; transform:scale(1); }
.mobile-menu-header { padding:3rem 1.5rem 1.5rem; text-align:center; position:relative; z-index:1; }
.menu-user-card { display:flex; align-items:center; gap:1rem; background:linear-gradient(135deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius); padding:1.2rem; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 4px 20px rgba(0,0,0,0.2); position:relative; overflow:hidden; }
.menu-user-card::before { content:''; position:absolute; top:0; left:0; right:0; height:50%; background:linear-gradient(180deg,rgba(255,255,255,0.06),transparent); pointer-events:none; border-radius:var(--radius) var(--radius) 0 0; }
.menu-user-avatar { width:56px; height:56px; border-radius:50%; border:3px solid var(--primary); object-fit:cover; }
.menu-user-info { text-align:left; }
.menu-user-name { font-size:1.1rem; font-weight:700; color:var(--text-bright); }
.menu-user-role { font-size:0.8rem; color:var(--text-dim); margin-top:0.2rem; }
.menu-body { flex:1; padding:0 1.5rem; position:relative; z-index:1; }
.menu-item { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; color:var(--text-bright); text-decoration:none; border-radius:var(--radius-sm); transition:all 0.25s; margin-bottom:0.3rem; background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.05); position:relative; overflow:hidden; }
.menu-item::before { content:''; position:absolute; top:0; left:0; right:0; height:50%; background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent); pointer-events:none; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.menu-item:hover, .menu-item:active { background:linear-gradient(135deg,rgba(91,141,217,0.12),rgba(168,212,240,0.06)); border-color:rgba(130,170,220,0.15); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 2px 10px rgba(0,0,0,0.15); transform:translateX(3px); }
.menu-item .menu-icon { font-size:1.3rem; width:32px; text-align:center; flex-shrink:0; }
.menu-item .menu-text { flex:1; font-size:0.95rem; }
.menu-item .menu-arrow { color:var(--text-dim); font-size:1.2rem; }
.menu-item-danger { color:#e17055; }
.menu-item-danger:hover { background:rgba(225,112,85,0.1); }
.menu-divider { height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent); margin:0.5rem 1.2rem; }
.menu-footer { padding:1.5rem; text-align:center; border-top:1px solid rgba(255,255,255,0.06); margin-top:auto; position:relative; z-index:1; }
.menu-footer-logo { font-size:1rem; font-weight:700; color:var(--primary-light); margin-bottom:0.3rem; }
.menu-footer-ver { font-size:0.7rem; color:var(--text-dim); }
/* 菜单项入场动画 */
.mobile-menu.active .menu-item { opacity:0; animation:menuItemIn 0.3s var(--ease-out) forwards; }
.mobile-menu.active .menu-item:nth-child(1) { animation-delay:0.04s; }
.mobile-menu.active .menu-item:nth-child(2) { animation-delay:0.08s; }
.mobile-menu.active .menu-item:nth-child(3) { animation-delay:0.12s; }
.mobile-menu.active .menu-item:nth-child(4) { animation-delay:0.16s; }
.mobile-menu.active .menu-item:nth-child(5) { animation-delay:0.20s; }
.mobile-menu.active .menu-item:nth-child(6) { animation-delay:0.24s; }
.mobile-menu.active .menu-item:nth-child(7) { animation-delay:0.28s; }
.mobile-menu.active .menu-item:nth-child(8) { animation-delay:0.32s; }
.mobile-menu.active .menu-item:nth-child(9) { animation-delay:0.36s; }
.mobile-menu.active .menu-item:nth-child(10) { animation-delay:0.40s; }
.mobile-menu.active .menu-item:nth-child(11) { animation-delay:0.44s; }
.mobile-menu.active .menu-item:nth-child(12) { animation-delay:0.48s; }
.mobile-menu.active .menu-divider { opacity:0; animation:menuItemIn 0.3s var(--ease-out) forwards; animation-delay:0.50s; }
@keyframes menuItemIn { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }

/* ===== 英雄区 ===== */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* 背景固定壁纸层：position:fixed 钉在视口上，z-index 负值保证永远压在所有内容后面（帖子从上面滚过） */
/* 移动端（iOS/微信内置浏览器）滚动时 fixed 层有重绘错位通病（背景滞后、顶部露白），
   两个必备解法：① translateZ(0) 独立合成层交给 GPU 管；② 用 <img object-fit:cover> 画图而不是 background-size:cover */
.hero-bg { position:fixed; inset:0; width:100%; height:100%; /* 回退：不支持 lvh 的浏览器 */
    /* 关键修复：固定壁纸层用「最大视口高度」而不是动态视口高度。
       安卓地址栏隐藏/显示会改变 position:fixed 的包含块高度，
       旧写法下背景会跟着变大变小，而且每次都要把这张大图按新尺寸重新栅格化（很卡）。
       lvh 在整个过程中恒定，于是地址栏伸缩不再影响它。 */
    height:100lvh; z-index:-2; overflow:hidden; transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden; background: linear-gradient(135deg, #0b1a2e 0%, #1a2a4a 50%, #0b1a2e 100%); }
.hero-bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; pointer-events:none; -webkit-user-select:none; user-select:none; opacity:0; transition:opacity 1.1s ease; }
.hero-bg-img.loaded { opacity:1; }
.hero-bg::after { content:''; position:absolute; inset:0; background:rgba(6,13,26,0.5); pointer-events:none; } /* 压暗层：保证文字可读 */
.hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,26,46,0.35) 0%,rgba(11,26,46,0.12) 45%,rgba(11,26,46,0) 100%); pointer-events:none; }
.hero-content { position:relative; z-index:2; text-align:center; padding:2rem; animation:fadeUp 1s ease-out; }
.hero-avatar-wrap { position:relative; width:130px; height:130px; margin:0 auto 1.5rem; }
.hero-avatar { width:130px; height:130px; border-radius:50%; object-fit:cover; border:3px solid var(--primary); position:relative; z-index:2; cursor:pointer; }
.hero-avatar:hover { transform:scale(1.05); border-color:var(--accent); }
.avatar-ring { position:absolute; inset:-8px; border-radius:50%; border:2px solid transparent; border-top-color:var(--accent); border-right-color:var(--primary-light); animation:spin 3s linear infinite; }
.avatar-frost { position:absolute; inset:-16px; border-radius:50%; border:1px dashed rgba(168,212,240,0.2); animation:spin 8s linear infinite reverse; }
.hero-name { font-size:2.5rem; font-weight:700; margin-bottom:0.5rem; color:var(--text-bright); }
.hero-signature { font-size:1rem; color:var(--text-dim); margin-bottom:1.5rem; font-style:italic; }

/* ===== 签名浅蓝毛玻璃胶囊徽章（浅蓝半透玻璃底 + 白字 + 末尾浅蓝呼吸光标） ===== */
.breath-badge {
    display:inline-flex;
    align-items:center;
    gap:0.55rem;
    padding:0.6rem 1.75rem;
    border-radius:999px;
    font-style:normal;
    font-size:1.02rem;
    letter-spacing:0.035em;
    color:#fff;
    background:linear-gradient(135deg, rgba(162,216,250,0.38) 0%, rgba(112,178,238,0.26) 55%, rgba(142,206,250,0.34) 100%);
    backdrop-filter:blur(14px) saturate(1.6);
    -webkit-backdrop-filter:blur(14px) saturate(1.6);
    border:1px solid rgba(255,255,255,0.42);
    box-shadow:0 2px 6px rgba(40,100,160,0.18), 0 0 14px rgba(110,180,235,0.28), inset 0 1px 0 rgba(255,255,255,0.28);
    text-shadow:0 1px 2px rgba(30,80,130,0.35);
}
/* 左侧小方块图标容器（视频同款） */
.breath-badge-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:1.5em;
    height:1.5em;
    border-radius:0.45em;
    font-style:normal;
    font-size:0.85rem;
    line-height:1;
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.28);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}
/* 末尾闪烁光标（浅紫细条，视频同款） */
.breath-cursor {
    display:inline-block;
    flex-shrink:0;
    width:0.62em;
    height:1.35em;
    margin-left:0.14em;
    border-radius:0;
    background:#a483e0;
    box-shadow:0 0 6px rgba(164,131,224,0.55);
    animation:cursorBreath 1.1s ease-in-out infinite;
    will-change:opacity;
}
@keyframes cursorBreath {
    0%, 100% { opacity:1; }
    50% { opacity:0.3; }
}
@media (prefers-reduced-motion: reduce) {
    .breath-cursor { animation:none; opacity:1; }
}
@media (max-width: 600px) {
    .breath-badge { padding:0.5rem 1.25rem; font-size:0.9rem; gap:0.4rem; }
}
.hero-tags { display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; }
.tag { padding:0.35rem 0.9rem; background:var(--glass); border:1px solid var(--glass-border); border-radius:20px; font-size:0.8rem; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.tag:hover { background:rgba(91,141,217,0.15); border-color:var(--primary); transform:translateY(-2px); }
.hero-stats { display:flex; gap:2.5rem; justify-content:center; margin-bottom:2rem; }
.stat { text-align:center; }
.stat-num { display:block; font-size:1.8rem; font-weight:700; color:var(--text-bright); font-family:'LXGW WenKai',serif; }
.stat-label { font-size:0.75rem; color:var(--text-dim); }
.hero-scroll { display:inline-flex; flex-direction:column; align-items:center; gap:0.4rem; color:var(--text-dim); animation:bounce 2s infinite; }
.scroll-arrow { width:18px; height:18px; border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim); transform:rotate(45deg); }

/* ===== 帖子区域 ===== */
.posts-section { position:relative; z-index:2; max-width:760px; margin:0 auto; padding:3rem 1.2rem 5rem; }
.section-header { text-align:center; margin-bottom:2.5rem; }
.section-header h2 { font-size:1.8rem; margin-bottom:0.4rem; color:var(--primary-light); }
.section-header p { color:var(--text-dim); font-size:0.9rem; }

.post-form-card { background:var(--card-bg); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.2rem; margin-bottom:1.5rem; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.post-form-card:focus-within { border-color:var(--primary); }
.post-form-header { display:flex; align-items:center; gap:0.7rem; margin-bottom:0.8rem; }
.post-form-avatar { width:32px; height:32px; border-radius:50%; border:2px solid var(--primary); object-fit:cover; }
.post-form-card textarea { width:100%; background:var(--input-bg); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:0.8rem; color:var(--text); font-size:0.9rem; resize:vertical; font-family:inherit; }
.post-form-card textarea:focus { outline:none; border-color:var(--primary); }
.post-form-card textarea::placeholder { color:var(--text-dim); }
.post-form-actions { display:flex; align-items:center; gap:0.8rem; margin-top:0.8rem; }
.upload-btn { padding:0.4rem 0.8rem; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-sm); cursor:pointer; font-size:0.8rem; }
.upload-btn:hover { background:rgba(91,141,217,0.15); border-color:var(--primary); }
.image-name { font-size:0.75rem; color:var(--text-dim); }
.btn-primary { padding:0.5rem 1.5rem; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; border:none; border-radius:var(--radius-sm); font-weight:600; cursor:pointer; margin-left:auto; font-size:0.85rem; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 4px 15px rgba(91,141,217,0.4); }

.post-card { background:var(--card-bg); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.2rem; margin-bottom:1.2rem; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; transform:translateY(var(--sy,20px)); }
.post-card.visible { opacity:1; transform:none; transition:opacity 0.6s ease, transform 0.35s cubic-bezier(.2,.8,.3,1); }
.post-card:hover { border-color:rgba(91,141,217,0.3); transform:translateY(-2px); box-shadow:var(--shadow); }
.post-header { display:flex; align-items:center; gap:0.7rem; margin-bottom:0.8rem; padding-left:6px; }
.post-avatar { width:36px; height:36px; border-radius:50%; border:2px solid var(--primary); object-fit:cover; cursor:pointer; }
.post-avatar:hover { border-color:var(--accent); }
.post-meta { flex:1; }
.post-author { display:block; font-weight:600; font-size:0.9rem; }
.post-time { font-size:0.7rem; color:var(--text-dim); }
.btn-delete { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:1rem; padding:3px 6px; border-radius:6px; }
.btn-delete:hover { background:rgba(255,100,100,0.15); color:#ff6b6b; }
.post-body { margin-bottom:0.8rem; }
.post-text { line-height:1.7; white-space:pre-wrap; word-break:break-word; font-size:0.9rem; }
.post-image { max-width:100%; max-height:400px; border-radius:var(--radius-sm); margin-top:0.6rem; cursor:pointer; object-fit:cover; display:block; transition:transform 0.2s; border:1px solid var(--glass-border); }
.post-image:hover { transform:scale(1.01); box-shadow:0 4px 20px rgba(0,0,0,0.2); }
.post-video { max-width:100%; max-height:420px; border-radius:var(--radius-sm); margin-top:0.6rem; display:block; border:1px solid var(--glass-border); background:#000; }
.post-footer { display:flex; gap:0.8rem; padding-top:0.6rem; border-top:1px solid var(--glass-border); align-items:center; flex-wrap:wrap; }
.btn-action { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:0.85rem; padding:0.3rem 0.6rem; border-radius:var(--radius-sm); display:flex; align-items:center; gap:0.25rem; }
.btn-action:hover { background:var(--glass); color:var(--accent); }

.comments-section { margin-top:0.8rem; padding-top:0.8rem; border-top:1px solid var(--glass-border); }
.comments-list { max-height:250px; overflow-y:auto; }
.comment-item { display:flex; gap:0.5rem; padding:0.5rem 0; padding-left:4px; }
.comment-avatar { width:24px; height:24px; border-radius:50%; flex-shrink:0; object-fit:cover; }
.comment-body { flex:1; }
.comment-author { font-size:0.75rem; font-weight:600; color:var(--primary-light); }
.comment-text { font-size:0.8rem; margin-top:0.15rem; }
.comment-time { font-size:0.65rem; color:var(--text-dim); margin-top:0.15rem; }
.comment-form { display:flex; gap:0.4rem; margin-top:0.6rem; }
.comment-input { flex:1 1 0; min-width:0; background:var(--input-bg); border:1px solid var(--glass-border); border-radius:20px; padding:0.4rem 0.8rem; color:var(--text); font-size:0.8rem; font-family:inherit; }
.comment-input:focus { outline:none; border-color:var(--primary); }
.btn-comment { padding:0.4rem 1rem; background:var(--primary); color:#fff; border:none; border-radius:20px; font-size:0.8rem; cursor:pointer; flex:0 0 auto; white-space:nowrap; }
.btn-comment:hover { background:var(--primary-dark); }
/* ===== 评论回复 ===== */
.comment-item { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.comment-meta { display:flex; align-items:center; gap:0.7rem; margin-top:0.2rem; }
.comment-meta .comment-time { margin-top:0; }
.comment-click { cursor:pointer; border-radius:8px; transition:background .2s; }
.comment-click:hover { background:rgba(91,141,217,0.06); }
.comment-click:hover .comment-reply-btn { color:var(--primary); opacity:1; }
.comment-reply-btn { color:var(--text-dim); font-size:0.68rem; opacity:0.55; transition:color .2s,opacity .2s; user-select:none; }
/* 楼中楼：子评论嵌在父评论下面 */
.comment-thread { }
.comment-children { margin-left:24px; padding-left:14px; border-left:2px solid var(--glass-border); }
.comment-children .comment-item { padding-top:0.35rem; padding-bottom:0.35rem; }
.reply-to { color:var(--primary); font-size:0.72rem; margin-right:0.35rem; font-weight:600; }
/* 回复弹窗 */
.reply-modal { width:min(92vw,420px); background:var(--card-bg); border:1px solid var(--glass-border); border-radius:16px; padding:1.1rem 1.2rem; box-shadow:0 20px 60px rgba(0,0,0,0.35); animation:modalFadeIn .25s ease; }
.rm-title { font-size:1rem; color:var(--text-bright); margin:0 0 0.8rem; }
.rm-title .rm-name { color:var(--primary); }
.reply-textarea { width:100%; box-sizing:border-box; background:var(--input-bg); border:1px solid var(--glass-border); border-radius:10px; padding:0.6rem 0.8rem; color:var(--text); font-size:0.9rem; font-family:inherit; resize:vertical; min-height:80px; }
.reply-textarea:focus { outline:none; border-color:var(--primary); }
.reply-modal-btns { display:flex; justify-content:flex-end; gap:0.6rem; margin-top:0.9rem; }
.rm-cancel { padding:0.5rem 1.1rem; background:var(--input-bg); color:var(--text-dim); border:1px solid var(--glass-border); border-radius:20px; font-size:0.82rem; cursor:pointer; }
.rm-cancel:hover { color:var(--text); }
.rm-send { padding:0.5rem 1.3rem; background:var(--primary); color:#fff; border:none; border-radius:20px; font-size:0.82rem; cursor:pointer; }
.rm-send:hover { background:var(--primary-dark); }
.rm-del { padding:0.5rem 1.3rem; background:#e74c3c; color:#fff; border:none; border-radius:20px; font-size:0.82rem; cursor:pointer; }
.rm-del:hover { background:#c0392b; }
.del-desc { font-size:0.82rem; color:var(--text-dim); margin:0 0 0.2rem; }

.empty-state { text-align:center; padding:3rem 2rem; }
.empty-icon { font-size:3.5rem; margin-bottom:0.8rem; animation:float 3s ease-in-out infinite; }
.login-hint { text-align:center; padding:2rem 1.5rem; background:var(--card-bg); border:1px solid var(--glass-border); border-radius:var(--radius); margin-bottom:1.5rem; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.login-hint p { color:var(--text-dim); font-size:0.95rem; margin-bottom:0.5rem; }

/* ===== 底部 ===== */
.footer {
    position:relative; padding:3rem 1.2rem 2.6rem; text-align:center; overflow:hidden;
    background:
        radial-gradient(1100px 480px at 50% -15%, rgba(91,141,217,0.18), transparent 60%),
        radial-gradient(760px 380px at 12% 108%, rgba(168,212,240,0.09), transparent 55%),
        radial-gradient(700px 360px at 88% 105%, rgba(110,231,168,0.06), transparent 55%),
        var(--footer-bg);
}
/* 顶部一道流光分界线 */
.footer::before{
    content:''; position:absolute; top:0; left:12%; right:12%; height:1px; z-index:3;
    background:linear-gradient(90deg, transparent, rgba(139,190,255,0.6), transparent);
    box-shadow:0 0 14px rgba(139,190,255,0.35);
}
.footer-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1.35rem; }
/* 壁纸透出后文字需要一点投影保证可读性（不遮照片，只补对比度） */
[data-theme="dark"] .footer-content { text-shadow:0 1px 3px rgba(0,0,0,0.55); }
[data-theme="light"] .footer-content { text-shadow:0 1px 2px rgba(255,255,255,0.55); }
.footer-info { margin:0; }
.footer-time { display:flex; justify-content:center; }

/* ===== 本站运行时间：真实 split-flap 翻页钟 ===== */
.flip-clock {
    position:relative;
    display:inline-flex; flex-direction:column; align-items:center; gap:0.7rem;
    padding:1rem 1.6rem 0.9rem; border-radius:16px;
    background:linear-gradient(170deg, rgba(18,26,46,0.72), rgba(8,13,27,0.62));
    border:1px solid rgba(139,180,240,0.14);
    box-shadow:0 14px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.flip-head { display:flex; align-items:center; gap:0.5rem; font-size:0.72rem; letter-spacing:0.26em; color:#93aad0; }
.flip-led { width:7px; height:7px; border-radius:50%; background:#6ee7a8; box-shadow:0 0 8px rgba(110,231,168,0.8); animation:fcPulse 2.2s ease-in-out infinite; }
.flip-title { font-weight:600; }
.flip-since { padding:0.1rem 0.55rem; border-radius:999px; font-size:0.6rem; letter-spacing:0.14em; color:#bcd6f5; border:1px solid rgba(139,180,240,0.3); background:rgba(139,180,240,0.1); }
.flip-track { display:flex; align-items:flex-end; gap:0.5rem; }
.flip-group { display:flex; flex-direction:column; align-items:center; gap:0.28rem; }
.flip-cells { display:flex; gap:4px; }
.flip-label { font-size:0.6rem; letter-spacing:0.3em; color:#7e96bd; }
/* 冒号：竖排两点 */
.flip-colon { position:relative; width:6px; height:44px; align-self:center; margin-bottom:1.05rem; }
.flip-colon::before, .flip-colon::after { content:''; position:absolute; left:0; width:6px; height:6px; border-radius:50%; background:#7e96bd; opacity:0.75; }
.flip-colon::before { top:3px; } .flip-colon::after { bottom:3px; }
/* ---- 翻牌单元 ---- */
.fc { position:relative; width:30px; height:44px; perspective:240px; }
.fc-face {
    position:absolute; left:0; right:0; height:50%; overflow:hidden;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    background:linear-gradient(180deg, #1c2942, #111a2e);
    border:1px solid rgba(139,180,240,0.18);
}
.fc-top { top:0; transform-origin:bottom center; border-radius:7px 7px 2px 2px; border-bottom:none; box-shadow:inset 0 1px 0 rgba(255,255,255,0.12); }
.fc-bot { bottom:0; transform-origin:top center; border-radius:2px 2px 7px 7px; border-top:none; box-shadow:inset 0 -1px 0 rgba(0,0,0,0.3); }
.fc-digit {
    display:block; width:100%; height:44px; line-height:44px; text-align:center;
    font-family:'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size:25px; font-weight:600; font-variant-numeric:tabular-nums;
    color:#f2f7ff; text-shadow:0 1px 2px rgba(0,0,0,0.55), 0 0 8px rgba(139,180,240,0.28);
}
.fc-bot .fc-digit { margin-top:-22px; }
/* 中缝：翻页轴 */
.fc::after {
    content:''; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; z-index:6; pointer-events:none;
    background:rgba(0,0,0,0.55); box-shadow:0 1px 0 rgba(168,212,240,0.14);
}
/* 翻转动画层：默认隐藏，JS 触发时显示、播完隐藏 */
.fc-anim-top, .fc-anim-bot { visibility:hidden; z-index:4; }
@keyframes fcDown { from { transform:rotateX(0); } to { transform:rotateX(-90deg); } }
@keyframes fcUp { from { transform:rotateX(90deg); } to { transform:rotateX(0); } }
@keyframes fcPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.4; transform:scale(0.75); } }
/* 浅色主题：白瓷牌 + 深蓝刻字 */
[data-theme="light"] .flip-clock { background:linear-gradient(170deg, rgba(255,255,255,0.75), rgba(244,240,232,0.55)); border-color:rgba(91,126,199,0.22); box-shadow:0 14px 34px rgba(90,75,58,0.16), inset 0 1px 0 rgba(255,255,255,0.8); }
[data-theme="light"] .flip-head { color:#6b7f9e; }
[data-theme="light"] .flip-since { color:var(--primary-dark); border-color:rgba(91,126,199,0.3); background:rgba(91,126,199,0.08); }
[data-theme="light"] .flip-label { color:#6b7f9e; }
[data-theme="light"] .flip-colon::before, [data-theme="light"] .flip-colon::after { background:#93a5bd; }
[data-theme="light"] .fc-face { background:linear-gradient(180deg, #fdfbf7, #ece6db); border-color:rgba(91,126,199,0.25); }
[data-theme="light"] .fc-top { box-shadow:inset 0 1px 0 rgba(255,255,255,0.9); }
[data-theme="light"] .fc-bot { box-shadow:inset 0 -1px 0 rgba(90,75,58,0.12); }
[data-theme="light"] .fc-digit { color:#2f4a77; text-shadow:0 1px 1px rgba(90,75,58,0.1); }
[data-theme="light"] .fc::after { background:rgba(90,75,58,0.3); box-shadow:0 1px 0 rgba(255,255,255,0.7); }
/* 减少动态：停 LED 脉冲（翻牌由 JS 检测 matchMedia 跳过） */
@media (prefers-reduced-motion: reduce) { .flip-led { animation:none; } }
/* 统计：发光数据胶囊 */
.footer-stats { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin:0; }
.footer-stats span {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.52rem 1.05rem; border-radius:999px;
    font-size:.74rem; color:var(--text-dim);
    background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    border:1px solid rgba(139,180,240,0.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 16px rgba(0,0,0,0.2);
    transition:transform .25s, border-color .25s, box-shadow .25s;
}
.footer-stats span:hover {
    transform:translateY(-2px); border-color:rgba(139,190,255,0.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 8px 24px rgba(0,0,0,0.3);
}
.footer-stats b {
    font-family:'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size:.88rem; font-weight:600; color:#eaf3ff;
    text-shadow:0 0 10px rgba(139,190,255,0.5);
}
.footer-interactive { margin:0; }
#footerCanvas { max-width:100%; opacity:0.45; }
/* 版权：细线之上的低音 */
.footer-copyright { width:min(520px, 100%); padding-top:1.1rem; border-top:1px solid rgba(139,180,240,0.15); }
.footer-copyright p { font-size:.76rem; color:var(--text-dim); white-space:nowrap; }   /* 「用 ♥ 构建」整体一行，图标不换行断开 */
.footer-copyright morph-icon svg { display:inline-block; vertical-align:-0.14em; }   /* 全局 svg 是 block 会独占一行，版权行内改为行内 */
.footer-sub { font-size:.66rem; margin-top:.3rem; opacity:.55; letter-spacing:.1em; }

/* 浅色主题：白瓷质感胶囊 + 靛蓝刻字 */
[data-theme="light"] .footer { background:radial-gradient(1000px 420px at 50% -12%, rgba(91,126,199,0.12), transparent 60%), var(--footer-bg); }
[data-theme="light"] .footer::before { background:linear-gradient(90deg, transparent, rgba(91,126,199,0.5), transparent); }
[data-theme="light"] .footer-stats span { background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.5)); border-color:rgba(91,126,199,0.22); }
[data-theme="light"] .footer-stats b { color:#2f4a77; text-shadow:0 1px 2px rgba(90,75,58,0.1); }

/* 翻牌钟外圈流光描边 */
.flip-clock::before {
    content:''; position:absolute; inset:-1px; border-radius:17px; padding:1px; pointer-events:none;
    background:linear-gradient(120deg, rgba(139,190,255,0) 20%, rgba(139,190,255,0.55) 50%, rgba(139,190,255,0) 80%);
    background-size:220% 100%;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:footerRing 5s linear infinite;
}
@keyframes footerRing { from { background-position:140% 0; } to { background-position:-140% 0; } }
@media (prefers-reduced-motion: reduce) { .flip-clock::before { animation:none; } .flip-clock::before{opacity:.35} }

/* ===== 天气卡片 ===== */
.weather-card{display:inline-flex;align-items:center;gap:1rem;padding:0.7rem 1.2rem;margin-bottom:1.2rem;background:linear-gradient(135deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.1);border-radius:14px;backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 4px 16px rgba(0,0,0,0.15);position:relative;overflow:hidden}
.weather-card::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,0.05),transparent);pointer-events:none;border-radius:14px 14px 0 0}
.weather-icon{font-size:2.2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2))}
.weather-info{text-align:left}
.weather-temp{font-size:1.4rem;font-weight:700;color:var(--text-bright);line-height:1.2}
.weather-desc{font-size:0.75rem;color:var(--text-dim);margin-top:0.1rem}
.weather-detail{font-size:0.7rem;color:var(--text-dim);text-align:right;line-height:1.6}

/* ===== 弹窗 ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); z-index:2000; display:flex; align-items:center; justify-content:center; }
.modal { background:var(--bg-card); border:1px solid var(--glass-border); border-radius:var(--radius); width:90%; max-width:480px; padding:1.5rem; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.modal-header h3 { font-size:1.2rem; }
.modal-close { background:none; border:none; color:var(--text-dim); font-size:1.2rem; cursor:pointer; }
.modal-close:hover { color:var(--accent); }
.modal textarea { width:100%; background:var(--input-bg); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:0.8rem; color:var(--text); font-size:0.9rem; resize:vertical; font-family:inherit; }
.modal textarea:focus { outline:none; border-color:var(--primary); }
.modal-actions { display:flex; align-items:center; gap:0.8rem; margin-top:1.2rem; }

/* ===== 登录/注册 ===== */
.auth-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; }
.auth-container { position:relative; z-index:2; width:100%; max-width:400px; }
.auth-card { background:var(--card-bg); border:1px solid var(--glass-border); border-radius:var(--radius); padding:2rem; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); animation:slideUp 0.5s ease-out; }
.auth-header { text-align:center; margin-bottom:1.5rem; }
.auth-icon { font-size:2rem; margin-bottom:0.4rem; animation:spin 4s linear infinite; }
.auth-header h2 { font-size:1.6rem; margin-bottom:0.2rem; color:var(--text-bright); }
.auth-header p { color:var(--text-dim); font-size:0.85rem; }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:0.8rem; color:var(--text-dim); margin-bottom:0.3rem; }
.form-group input { width:100%; padding:0.7rem 0.9rem; background:var(--input-bg); border:1px solid var(--glass-border); border-radius:var(--radius-sm); color:var(--text); font-size:0.9rem; font-family:inherit; }
.form-group input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(91,141,217,0.15); }
.form-group input::placeholder { color:var(--text-dim); }

/* ===== 登录 / 注册：浮动标签 =====
   未输入时标签落在框内（替代占位符）；聚焦或有内容后缩小移到框线上方并常驻。
   只作用于 .auth-card 内「直接子元素是 input」的组：profile 页与 select 组不受影响。 */
.auth-card .form-group{position:relative}
/* 只作用于「直接子元素是 input」的组：生日组（select）保持原有块级标签，不浮动 */
.auth-card .form-group:has(>input)>label{
    position:absolute;top:50%;left:1rem;z-index:1;
    display:block;margin:0;
    font-size:.92rem;line-height:1.4;
    color:var(--text-dim);
    pointer-events:none;
    transform:translateY(-50%);
    transform-origin:left center;
    transition:top .16s cubic-bezier(.4,0,.2,1),
               transform .16s cubic-bezier(.4,0,.2,1),
               font-size .16s, color .16s;
    white-space:nowrap;
}
.auth-card .form-group>input,.auth-card .pwd-field>input{padding:.7rem .9rem}
/* 占位符文字交给浮动标签承担，隐藏原 placeholder 避免与标签重叠 */
.auth-card .form-group>input::placeholder,.auth-card .pwd-field>input::placeholder{opacity:0}

/* ===== 注册页：密码要求提示（密码框与强度条之间） ===== */
/* 密码框专属：label 只相对输入框定位（form-group 内还有规则提示/强度条，top:50% 会跑偏） */
.auth-card .pwd-field{position:relative}
.auth-card .pwd-field>label{
    position:absolute;top:50%;left:1rem;z-index:1;
    display:block;margin:0;
    font-size:.92rem;line-height:1.4;
    color:var(--text-dim);
    pointer-events:none;
    transform:translateY(-50%);
    transform-origin:left center;
    transition:top .16s cubic-bezier(.4,0,.2,1),
               transform .16s cubic-bezier(.4,0,.2,1),
               font-size .16s, color .16s;
    white-space:nowrap;
}
.auth-card .pwd-field:has(>input:focus)>label,
.auth-card .pwd-field:has(>input:not(:placeholder-shown))>label,
.auth-card .pwd-field:has(>input:-webkit-autofill)>label{
    top:0;
    transform:translateY(-50%) scale(.7);
    color:var(--primary-light,#8bb4f0);
    background:var(--card-bg);
    padding:0 .32rem;left:.85rem;border-radius:5px;
}
@media (prefers-reduced-motion:reduce){
    .auth-card .pwd-field>label{transition:none}
}
.pwd-rules{margin-top:.4rem;font-size:.7rem;line-height:1.5;color:var(--text-dim,#7a9ac0);opacity:.85}

/* ===== 注册页密码强度条：从红到绿 ===== */
.pwd-strength{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}
.pwd-strength-track{flex:1;height:5px;min-width:60px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.pwd-strength-fill{height:100%;width:0;border-radius:99px;background:transparent;
    transition:width .22s ease, background-color .22s ease}
.pwd-strength-text{flex:0 0 auto;font-size:.7rem;line-height:1;color:var(--text-dim);transition:color .22s ease}
.pwd-strength[data-level="0"] .pwd-strength-fill{width:30%;background-color:#e74c3c}
.pwd-strength[data-level="1"] .pwd-strength-fill{width:55%;background-color:#e79a54}
.pwd-strength[data-level="2"] .pwd-strength-fill{width:80%;background-color:#f1c40f}
.pwd-strength[data-level="3"] .pwd-strength-fill{width:100%;background-color:#2ecc71}
.pwd-strength[data-level="0"] .pwd-strength-text{color:#e7655c}
.pwd-strength[data-level="1"] .pwd-strength-text{color:#e79a54}
.pwd-strength[data-level="2"] .pwd-strength-text{color:#e8c95e}
.pwd-strength[data-level="3"] .pwd-strength-text{color:#54d98c}
@media (prefers-reduced-motion:reduce){.pwd-strength-fill,.pwd-strength-text{transition:none}}
/* 聚焦 / 已填写 / 浏览器自动填充 → 上浮缩小常驻（背景切掉背后的边框线） */
.auth-card .form-group:has(>input:focus)>label,
.auth-card .form-group:has(>input:not(:placeholder-shown))>label,
.auth-card .form-group:has(>input:-webkit-autofill)>label{
    top:0;
    transform:translateY(-50%) scale(.7);
    color:var(--primary-light,#8bb4f0);
    background:var(--card-bg);
    padding:0 .32rem;left:.85rem;border-radius:5px;
}
@media (prefers-reduced-motion:reduce){
    .auth-card .form-group>label{transition:none}
}
.btn-submit { width:100%; padding:0.8rem; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; border:none; border-radius:var(--radius-sm); font-size:0.95rem; font-weight:600; cursor:pointer; margin-top:0.4rem; }
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 4px 15px rgba(91,141,217,0.4); }
.auth-footer { text-align:center; margin-top:1.2rem; font-size:0.8rem; }
.auth-footer p { margin-bottom:0.4rem; }

/* ===== 个人资料卡 ===== */
.profile-card { background:var(--card-bg); border:1px solid var(--glass-border); border-radius:var(--radius); padding:2rem; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); text-align:center; margin-top:60px; position:relative; overflow:hidden; }
.profile-card[class*="entrance-ice"]{animation:entranceIce 0.8s ease-out}
.profile-card[class*="entrance-aurora"]{animation:entranceAurora 1s ease-out}
.profile-card[class*="entrance-stardust"]{animation:entranceStardust 0.9s ease-out}
.profile-card[class*="entrance-flame"]{animation:entranceFlame 0.7s ease-out}
.profile-card-header { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.profile-card-avatar { width:100px; height:100px; border-radius:50%; border:3px solid var(--primary); object-fit:cover; }
.profile-card-avatar:hover { transform:scale(1.05); border-color:var(--accent); }
.profile-card-name { font-size:1.5rem; margin-bottom:0.3rem; color:var(--text-bright); }
.profile-card-bio { color:var(--text-dim); font-size:0.9rem; margin-bottom:0.8rem; font-style:italic; }
.profile-card-meta { display:flex; gap:1.5rem; justify-content:center; font-size:0.8rem; color:var(--text-dim); }
.profile-avatar-wrap { position:relative; width:100px; height:100px; margin:0 auto 1rem; cursor:pointer; }
.profile-avatar-lg { width:100px; height:100px; border-radius:50%; border:3px solid var(--primary); object-fit:cover; }
.profile-avatar-wrap:hover .profile-avatar-lg { filter:brightness(0.7); }
.profile-name { font-size:1.6rem; margin-top:0.8rem; color:var(--text-bright); }
.profile-username { font-size:0.8rem; color:var(--text-dim); margin-top:0.2rem; }
.profile-bio { font-size:0.95rem; color:var(--text-dim); margin-top:0.6rem; font-style:italic; }
.profile-badges { display:flex; gap:0.4rem; justify-content:center; flex-wrap:wrap; margin-top:0.8rem; }
.badge { padding:0.15rem 0.5rem; border-radius:10px; font-size:0.7rem; font-weight:600; }
.badge-green { background:rgba(0,184,148,0.15); color:#00b894; }
.badge-red { background:rgba(214,48,49,0.15); color:#d63031; }
.badge-blue { background:rgba(91,141,217,0.15); color:var(--primary-light); }
.badge-gray { background:var(--glass); color:var(--text-dim); border:1px solid var(--glass-border); }
.form-hint { display:block; font-size:0.7rem; color:var(--text-dim); margin-top:0.2rem; }

/* ===== 管理员 ===== */
.admin-stats { display:flex; gap:1rem; margin-bottom:2rem; margin-top:60px; }
.admin-stat-card { flex:1; background:var(--card-bg); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.2rem; text-align:center; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.admin-stat-num { display:block; font-size:2rem; font-weight:700; color:var(--primary-light); }
.admin-stat-label { font-size:0.8rem; color:var(--text-dim); }
.admin-section { background:var(--card-bg); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.2rem; margin-bottom:1.5rem; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); overflow-x:auto; }
.admin-section h2 { font-size:1.1rem; margin-bottom:1rem; color:var(--text-bright); }
.admin-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.admin-table { width:100%; border-collapse:collapse; font-size:0.8rem; white-space:nowrap; }
.admin-table th { text-align:left; padding:0.6rem 0.8rem; color:var(--text-dim); border-bottom:1px solid var(--glass-border); font-weight:500; }
.admin-table td { padding:0.5rem 0.8rem; border-bottom:1px solid var(--glass-border); }
.admin-table tr:hover { background:var(--glass); }
.td-content { max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.admin-actions { display:flex; gap:0.4rem; }
.btn-sm { padding:0.25rem 0.6rem; border:none; border-radius:6px; font-size:0.7rem; cursor:pointer; color:#fff; }
.btn-sm:hover { transform:translateY(-1px); opacity:0.9; }
.btn-red { background:#e17055; }
.btn-yellow { background:#fdcb6e; color:#333; }
.btn-green { background:#00b894; }

/* ===== Toast ===== */
/* toast 默认隐藏：空的 #toast 常驻 DOM，不隐藏会在手机上（bottom:80px，播放器上方）留一个透明描边小框 */
.toast { position:fixed; top:70px; right:15px; padding:0.7rem 1.2rem; border-radius:var(--radius-sm); font-size:0.85rem; z-index:3000; transform:translateX(120%); opacity:0; visibility:hidden; transition:transform 0.3s, opacity 0.3s, visibility 0.3s; max-width:280px; }
.toast.show { transform:translateX(0); opacity:1; visibility:visible; }
.toast.success { background:linear-gradient(135deg,#00b894,#00cec9); color:#fff; }
.toast.error { background:linear-gradient(135deg,#e17055,#d63031); color:#fff; }

.image-preview { position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:2500; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.image-preview img { max-width:90%; max-height:90vh; border-radius:var(--radius-sm); }

/* ===== 动画 ===== */
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes themeBtnSpin { 0% { transform:rotate(0deg) scale(1); } 50% { transform:rotate(180deg) scale(1.3); } 100% { transform:rotate(360deg) scale(1); } }
.theme-spin { animation:themeBtnSpin 0.6s cubic-bezier(0.4,0,0.2,1); }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:3px; }

@media(max-width:768px) {
    .navbar { padding:0.6rem 1rem; }
    .nav-links { display:flex; gap:0.35rem; }
    .nav-extra { display:none; }
    .nav-name { display:none; }
    .nav-brand { font-size:1rem; }
    .nav-toggle { display:none; }
    .hero-name { font-size:1.8rem; }
    .hero-avatar-wrap { width:100px; height:100px; }
    .hero-avatar { width:100px; height:100px; }
    .hero-stats { gap:1.5rem; }
    .stat-num { font-size:1.4rem; }
    .tag { font-size:0.7rem; padding:0.25rem 0.7rem; }
    .posts-section { padding:2rem 1rem 3rem; }
    .post-card { padding:1rem; }
    .footer-time .flip-clock { padding:0.8rem 0.95rem 0.7rem; gap:0.5rem; }
    .footer-time .flip-track { gap:0.35rem; }
    .footer-time .fc { width:26px; height:38px; }
    .footer-time .fc-digit { height:38px; line-height:38px; font-size:21px; }
    .footer-time .fc-bot .fc-digit { margin-top:-19px; }
    .footer-time .flip-colon { height:38px; margin-bottom:0.9rem; }
    .footer-time .flip-head { font-size:0.66rem; flex-wrap:wrap; justify-content:center; }
    .modal { width:95%; padding:1.2rem; }
    .auth-card { padding:1.5rem; }
    .post-form-actions { flex-wrap:wrap; }
    .btn-primary { width:100%; margin-left:0; }
    .menu-item { font-size:1.3rem; padding:0.6rem 1.5rem; }
    .admin-stats { flex-direction:column; }
}
.hero-avatar-wrap a{text-decoration:none;display:block}

/* ===== 底部优化 ===== */
/* 运行时间胶囊已在上方 .uptime 统一定义，此处不再覆盖字号 */
.footer-quote p { font-size:1rem; letter-spacing:1px; }

/* 底部光晕动画 */
.footer-glow { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:300px; height:300px; background:radial-gradient(circle,rgba(91,141,217,0.08) 0%,transparent 70%); pointer-events:none; animation:glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{ opacity:0.5; } 50%{ opacity:1; } }

/* 底部星星闪烁 */
.footer-stars { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.footer-star { position:absolute; width:2px; height:2px; background:var(--primary-light); border-radius:50%; box-shadow:0 0 4px var(--primary-light), 0 0 9px rgba(139,190,255,0.55); animation:starBlink 2s ease-in-out infinite; }
@keyframes starBlink { 0%,100%{ opacity:0.2; transform:scale(1); } 50%{ opacity:1; transform:scale(1.5); } }

/* ===== 搜索框 ===== */
.search-bar { display:flex; gap:0.5rem; margin-bottom:1.5rem; max-width:500px; margin-left:auto; margin-right:auto; }
.search-bar input { flex:1; background:var(--input-bg); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:0.6rem 1rem; color:var(--text); font-size:0.9rem; font-family:inherit; }
.search-bar input:focus { outline:none; border-color:var(--primary); }

/* ===== 置顶标记 ===== */
.post-card.pinned { border-left:3px solid var(--accent); }
.post-card.pinned .post-author::before { content:'📌 '; }

/* ===== 在线人数 ===== */
.footer-stats { display:flex; gap:1.5rem; justify-content:center; margin-bottom:1.5rem; font-size:0.85rem; color:var(--text-dim); }
.footer-stats b { color:var(--primary-light); font-weight:600; }

/* ===== 注册彩纸 ===== */
.confetti-piece { position:fixed; width:10px; height:10px; z-index:99999; pointer-events:none; animation:confettiFall 3s ease-in forwards; }
@keyframes confettiFall {
    0% { opacity:1; transform:translateY(0) rotate(0deg); }
    100% { opacity:0; transform:translateY(100vh) rotate(720deg); }
}

/* ===== 点赞动画 ===== */
.like-heart { position:absolute; font-size:1.2rem; pointer-events:none; animation:heartFloat 1s ease-out forwards; z-index:100; }
@keyframes heartFloat {
    0% { opacity:1; transform:translateY(0) scale(1); }
    100% { opacity:0; transform:translateY(-60px) scale(1.5); }
}

/* ===== 鼠标拖尾 ===== */
.mouse-trail { position:fixed; width:4px; height:4px; border-radius:50%; pointer-events:none; z-index:99998; animation:trailFade 0.8s ease-out forwards; }
@keyframes trailFade {
    0% { opacity:0.8; transform:scale(1); }
    100% { opacity:0; transform:scale(0); }
}

/* ===== 樱花飘落（浅色模式） ===== */
.sakura { position:fixed; pointer-events:none; z-index:1; animation:sakuraFall linear forwards; }
@keyframes sakuraFall {
    0% { opacity:1; transform:translateY(-10px) rotate(0deg) translateX(0); }
    25% { transform:translateY(25vh) rotate(90deg) translateX(30px); }
    50% { transform:translateY(50vh) rotate(180deg) translateX(-20px); }
    75% { transform:translateY(75vh) rotate(270deg) translateX(25px); }
    100% { opacity:0; transform:translateY(100vh) rotate(360deg) translateX(0); }
}

/* ===== 加载骨架屏 ===== */
.skeleton { background:linear-gradient(90deg,var(--glass) 25%,var(--glass-border) 50%,var(--glass) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--radius-sm); }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-card { background:var(--card-bg); border:1px solid var(--glass-border); border-radius:var(--radius); padding:1.2rem; margin-bottom:1.2rem; }
.skeleton-avatar { width:36px; height:36px; border-radius:50%; }
.skeleton-line { height:14px; margin:0.5rem 0; border-radius:4px; }
.skeleton-line.w60 { width:60%; }
.skeleton-line.w80 { width:80%; }
.skeleton-line.w40 { width:40%; }

/* ===== 用户等级徽章 ===== */
.user-level { font-size:0.65rem; padding:0.1rem 0.4rem; border-radius:8px; margin-left:0.3rem; font-weight:600; }
.level-1 { background:rgba(108,92,231,0.15); color:#a29bfe; }
.level-2 { background:rgba(0,184,148,0.15); color:#00b894; }
.level-3 { background:rgba(253,203,110,0.15); color:#fdcb6e; }
.level-4 { background:rgba(253,121,168,0.15); color:#fd79a8; }

/* ===== 摸鱼日历 ===== */
.fish-calendar { text-align:center; margin-bottom:1rem; font-size:0.85rem; color:var(--text-dim); }
.fish-calendar .day { font-size:1.1rem; color:var(--text-bright); font-weight:600; }

@media(max-width:768px) {
    .search-bar { flex-direction:column; }
    .footer-stats { flex-wrap:wrap; gap:0.8rem; }
}

/* ===== 汉堡菜单过渡动画 ===== */
.mobile-menu {
    transform: scale(0.95);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1), transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.mobile-menu.active {
    transform: scale(1);
    opacity: 1;
}

/* 汉堡按钮动画 */
.nav-toggle span {
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    transform-origin: center;
}
.nav-toggle.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background: var(--accent);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-toggle.active span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
    background: var(--accent);
}

/* ===== 头像框 CSS ===== */
.avatar-container{position:relative}
/* 头像圆形裁剪：原先只写在 profile.php 的内联 <style> 里，
   于是 user.php（点头像进入的个人主页）拿到的是未裁剪的方形头像，
   而头像图片四角是黑的（上传时透明底被压成黑色）→ 表现为“大头像后面一个黑框”。
   现在提到公共样式，所有页面统一裁剪。 */
.avatar-container .avatar-img{border-radius:50%;object-fit:cover;display:block;
    position:relative;z-index:2;border:3px solid var(--primary);cursor:pointer;
    transition:transform 0.3s,border-color 0.3s}
.avatar-container .avatar-img:hover{transform:scale(1.05);border-color:var(--accent)}
/* 兜底：任何地方直接把头像当图片用时也保持圆形，避免再露出黑角 */
img.avatar-img{border-radius:50%;object-fit:cover}
.avatar-frame{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;z-index:3}
.frame-ice{border:3px solid #8bb4f0;box-shadow:0 0 12px rgba(139,180,240,0.6),0 0 24px rgba(91,141,217,0.3),inset 0 0 8px rgba(168,212,240,0.3)}
.frame-star{border:3px solid #fdcb6e;box-shadow:0 0 10px rgba(253,203,110,0.6),0 0 20px rgba(253,203,110,0.3),0 0 40px rgba(253,203,110,0.1)}
.frame-flame{border:3px solid #e17055;box-shadow:0 0 12px rgba(225,112,85,0.6),0 0 24px rgba(253,203,110,0.4),0 0 36px rgba(225,112,85,0.2)}
.frame-crown{border:3px solid #fdcb6e;box-shadow:0 0 15px rgba(253,203,110,0.7),0 0 30px rgba(253,203,110,0.4)}
.frame-crown::before{content:'👑';position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:1.2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}

/* ===== 表情按钮 ===== */
.emoji-btn {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    font-size: 1.2rem;
    border-radius: 6px;
    transition: background 0.2s, transform 0.2s;
}
.emoji-btn:hover {
    background: var(--glass);
    transform: scale(1.2);
}

/* ===== 帖子卡片悬停效果 ===== */
.post-card {
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    border-color: rgba(91,141,217,0.3);
}

/* ===== 导航栏毛玻璃 ===== */
.navbar.scrolled {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* ===== 发帖框聚焦动画 ===== */
.post-form-card textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(91,141,217,0.15), 0 0 20px rgba(91,141,217,0.05);
}

/* ===== 空状态插图 ===== */
.empty-state .empty-icon {
    font-size: 4rem;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.empty-state p {
    font-size: 1rem;
    color: var(--text-dim);
    margin-top: 0.5rem;
}

/* ===== 移动端安全区 ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .footer { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
    .mobile-menu { padding-bottom: env(safe-area-inset-bottom); }
}

/* ===== 触摸反馈 ===== */
@media (hover: none) {
    .btn-nav:active, .btn-primary:active, .btn-submit:active, .btn-comment:active {
        transform: scale(0.95);
        opacity: 0.9;
    }
    .post-card:active {
        transform: scale(0.98);
    }
    .btn-action:active {
        background: var(--glass);
        transform: scale(0.9);
    }
}

/* ===== 表情回应栏 ===== */
.reaction-bar {
    display: flex;
    gap: 0.3rem;
    padding: 0.4rem 0;
    flex-wrap: wrap;
}
.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.5rem;
    background: none;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.reaction-btn:hover {
    background: rgba(91,141,217,0.15);
    border-color: var(--primary);
    transform: scale(1.1);
}
.reaction-btn.active {
    background: rgba(91,141,217,0.2);
    border-color: var(--primary);
}
.reaction-count {
    font-size: 0.7rem;
    color: var(--text-dim);
    font-weight: 600;
}

/* ===== 刷新一言按钮 ===== */
.btn-quote-refresh {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    transition: transform 0.3s;
    vertical-align: middle;
}
.btn-quote-refresh:hover {
    transform: rotate(180deg);
    background: var(--glass);
}

/* ===== 底部地理位置 ===== */
.footer-location {
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* ===== 星座连线画布 ===== */
#constellationCanvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* ===== 加载动画 ===== */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    top: 50%; left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* ===== 自定义确认弹窗 ===== */
.custom-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(5px);    backdrop-filter: blur(5px);
    z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s ease;
}
.custom-confirm {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 2rem;
    max-width: 360px;
    width: 90%;
    text-align: center;
    -webkit-backdrop-filter: blur(20px);    backdrop-filter: blur(20px);
    animation: slideUp 0.3s var(--ease-out);
}
.custom-confirm h3 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    color: var(--text-bright);
}
.custom-confirm p {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin-bottom: 1.5rem;
}
.custom-confirm-btns {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
}
.custom-confirm-btns button {
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}
.btn-cancel {
    background: var(--glass);
    color: var(--text);
    border: 1px solid var(--glass-border) !important;
}
.btn-cancel:hover { background: var(--glass-border); }
.btn-confirm-danger {
    background: linear-gradient(135deg, #e17055, #d63031);
    color: #fff;
}
.btn-confirm-danger:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(225,112,85,0.4); }

/* ===== Toast 移动端底部 ===== */
@media (max-width: 768px) {
    .toast {
        top: auto;
        bottom: 80px;
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(20px);
        max-width: 90%;
    }
    .toast.show {
        transform: translateX(-50%) translateY(0);
    }
}

/* ===== 帖子排序按钮 ===== */
.sort-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: flex-end;
}
.sort-btn {
    padding: 0.3rem 0.8rem;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: var(--transition);
}
.sort-btn.active, .sort-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ===== 评论折叠 ===== */
.comment-toggle {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    font-size: 0.75rem;
    color: var(--text-dim);
    cursor: pointer;
    margin-top: 0.5rem;
    transition: var(--transition);
}
.comment-toggle:hover {
    background: rgba(91,141,217,0.15);
    border-color: var(--primary);
}

/* ===== 未读红点 ===== */
.unread-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: #e17055;
    border-radius: 50%;
    margin-left: 0.3rem;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* ===== 草稿提示 ===== */
.draft-hint {
    font-size: 0.75rem;
    color: var(--accent);
    margin-top: 0.3rem;
    display: none;
}
.draft-hint.show { display: block; }

/* ===== 点赞爆炸 ===== */
.like-explode {
    position: absolute;
    pointer-events: none;
    font-size: 1rem;
    z-index: 100;
    animation: explode 0.8s ease-out forwards;
}
@keyframes explode {
    0% { opacity: 1; transform: translate(0,0) scale(1); }
    100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(0.3); }
}

/* ===== 帖子多方向进场 ===== */
.post-card.from-left { animation: slideFromLeft 0.6s ease-out forwards; }
.post-card.from-right { animation: slideFromRight 0.6s ease-out forwards; }
.post-card.from-bottom { animation: slideFromBottom 0.6s ease-out forwards; }
@keyframes slideFromLeft {
    from { opacity: 0; transform: translateX(-40px) rotate(-2deg); }
    to { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes slideFromRight {
    from { opacity: 0; transform: translateX(40px) rotate(2deg); }
    to { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes slideFromBottom {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== 数字跳动 ===== */
.stat-num.bump {
    animation: numBump 0.4s var(--ease-out);
}
@keyframes numBump {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); color: var(--accent); }
}

/* ===== 品牌呼吸光效 ===== */
.nav-brand {
    text-shadow: 0 0 0 transparent;
    animation: brandGlow 3s ease-in-out infinite;
}
@keyframes brandGlow {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50% { text-shadow: 0 0 12px rgba(139,180,240,0.4); }
}

/* ===== 发帖成功烟花 ===== */
.post-firework {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 100;
}
.firework-dot {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    animation: fireworkBurst 0.8s ease-out forwards;
}
@keyframes fireworkBurst {
    0% { opacity: 1; transform: translate(0,0) scale(1); }
    100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0); }
}

/* ===== 页面整体淡入 ===== */
body {
    animation: pageFadeIn 0.6s ease-out;
}
@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 3D 倾斜已移除：preserve-3d/perspective/rotateX/rotateY 会把卡片提升为独立合成层，
   导致固定定位的音乐播放器毛玻璃（backdrop-filter）经过该区域时采样不到背景、无法模糊 */

/* ===== 引言打字机 ===== */
.typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--primary-light);
    animation: typing 2s steps(20,end), blink 0.6s step-end infinite;
    max-width: 100%;
}
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}
@keyframes blink {
    50% { border-color: transparent; }
}

/* ===== 深色模式星空闪烁 ===== */
[data-theme="dark"] .star-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1; /* 背景特效：压在内容后面（原 z-index:0 会盖住正文） */
    overflow: hidden;
}
[data-theme="dark"] .bg-star {
    position: absolute;
    width: 2px; height: 2px;
    background: #fff;
    border-radius: 50%;
    animation: twinkle var(--twinkle-dur) ease-in-out infinite;
    animation-delay: var(--twinkle-delay);
}
@keyframes twinkle {
    0%, 100% { opacity: 0.1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.5); }
}

/* ===== 移动端背景图适配 ===== */
@media (max-width: 768px) {
    .hero-bg-img {
        /* 竖屏居中铺满：img + object-fit:cover 自动裁切，地址栏伸缩也不会露边，主体不会被切掉 */
        object-position: center center;
    }
    .hero {
        min-height: 100vh;
        min-height: 100dvh; /* 动态视口高度，解决移动端地址栏问题 */
    }
    .hero-content {
        padding-top: 80px;
        padding-bottom: 60px;
    }
}

/* ===== 加载动画 ===== */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #0b1a2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
.page-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}
.loader-logo {
    font-size: 2rem;
    font-weight: 700;
    color: #8bb4f0;
    margin-bottom: 2rem;
    animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}
.loader-spinner {
    width: 50px;
    height: 50px;
    position: relative;
    margin-bottom: 1.5rem;
}
.loader-spinner::before,
.loader-spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}
.loader-spinner::before {
    border-top-color: #5b8dd9;
    animation: spin 1s linear infinite;
}
.loader-spinner::after {
    border-bottom-color: #a8d4f0;
    animation: spin 1.5s linear infinite reverse;
    inset: 6px;
}
.loader-text {
    color: #7a9ac0;
    font-size: 0.85rem;
    animation: loaderDots 1.5s ease-in-out infinite;
}
@keyframes loaderDots {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}
.loader-snowflakes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.loader-snow {
    position: absolute;
    color: rgba(255,255,255,0.3);
    animation: loaderSnowFall linear infinite;
}
@keyframes loaderSnowFall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

/* ===== 新功能：昵称颜色 ===== */
.name-color-ice{color:#8bb4f0!important;text-shadow:0 0 8px rgba(139,180,240,0.4)}
.name-color-aurora{color:#a29bfe!important;text-shadow:0 0 8px rgba(162,155,254,0.4)}
.name-color-flame{color:#e17055!important;text-shadow:0 0 8px rgba(225,112,85,0.4)}
.name-color-gold{color:#fdcb6e!important;text-shadow:0 0 8px rgba(253,203,110,0.4)}
.name-color-rainbow{background:linear-gradient(90deg,#e17055,#fdcb6e,#00b894,#0984e3,#6c5ce7,#fd79a8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rainbowShift 3s linear infinite}
@keyframes rainbowShift{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}

/* ===== 帖子卡片皮肤 ===== */
.post-card.skin-aurora{background:linear-gradient(135deg,rgba(162,155,254,0.12),rgba(253,121,168,0.08),rgba(253,203,110,0.06))!important;border:1.5px solid rgba(162,155,254,0.3)!important;box-shadow:0 0 20px rgba(162,155,254,0.1),0 0 40px rgba(253,121,168,0.05)!important;position:relative;overflow:hidden}
.post-card.skin-aurora::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#a29bfe,#fd79a8,#fdcb6e,#a29bfe);background-size:200% 100%;animation:auroraBar 3s linear infinite;pointer-events:none}
@keyframes auroraBar{0%{background-position:0% 0%}100%{background-position:200% 0%}}
.post-card.skin-starry{background:linear-gradient(135deg,#080e1f,#0d1a33,#0a1525)!important;border:1.5px solid rgba(80,120,200,0.2)!important;box-shadow:0 0 20px rgba(30,60,120,0.15)!important;position:relative;overflow:hidden}
.post-card.skin-starry::before{content:'';position:absolute;inset:0;background:radial-gradient(2px 2px at 10% 15%,rgba(255,255,255,0.7),transparent),radial-gradient(1.5px 1.5px at 25% 45%,rgba(200,220,255,0.5),transparent),radial-gradient(2.5px 2.5px at 45% 8%,rgba(255,255,255,0.8),transparent),radial-gradient(1.5px 1.5px at 60% 35%,rgba(200,220,255,0.4),transparent),radial-gradient(2px 2px at 78% 18%,rgba(255,255,255,0.6),transparent),radial-gradient(1.5px 1.5px at 90% 55%,rgba(200,220,255,0.5),transparent),radial-gradient(2px 2px at 15% 70%,rgba(255,255,255,0.45),transparent),radial-gradient(1.5px 1.5px at 35% 85%,rgba(200,220,255,0.35),transparent),radial-gradient(2px 2px at 55% 60%,rgba(255,255,255,0.5),transparent),radial-gradient(1.5px 1.5px at 85% 75%,rgba(200,220,255,0.4),transparent);pointer-events:none;animation:twinkle 3s ease-in-out infinite alternate}
@keyframes twinkle{0%{opacity:0.4}100%{opacity:1}}
.post-card.skin-snowfall{position:relative;overflow:hidden!important;background:linear-gradient(180deg,rgba(15,25,45,0.03),rgba(100,160,220,0.06))!important;border:1.5px solid rgba(139,180,240,0.2)!important;box-shadow:0 0 15px rgba(139,180,240,0.08)!important}
.post-card.skin-snowfall::after{content:'';position:absolute;top:-10px;left:0;width:100%;height:calc(100% + 20px);background-image:radial-gradient(3px 3px at 10% 0%,rgba(200,230,255,0.7),transparent),radial-gradient(2px 2px at 25% 15%,rgba(180,210,255,0.5),transparent),radial-gradient(4px 4px at 40% 5%,rgba(220,240,255,0.8),transparent),radial-gradient(2px 2px at 55% 20%,rgba(200,230,255,0.4),transparent),radial-gradient(3px 3px at 70% 8%,rgba(180,210,255,0.6),transparent),radial-gradient(2px 2px at 85% 25%,rgba(220,240,255,0.5),transparent),radial-gradient(3px 3px at 15% 35%,rgba(200,230,255,0.45),transparent),radial-gradient(2px 2px at 50% 40%,rgba(180,210,255,0.55),transparent),radial-gradient(4px 4px at 90% 12%,rgba(220,240,255,0.7),transparent),radial-gradient(2px 2px at 30% 50%,rgba(200,230,255,0.35),transparent);animation:snowfallBg 8s linear infinite;pointer-events:none}
@keyframes snowfallBg{0%{transform:translateY(-30px)}100%{transform:translateY(30px)}}
.post-card.skin-flame{border:1.5px solid rgba(225,112,85,0.3)!important;background:linear-gradient(180deg,rgba(225,112,85,0.04),rgba(253,203,110,0.03))!important;box-shadow:0 0 20px rgba(225,112,85,0.12),0 0 40px rgba(225,112,85,0.05)!important;position:relative;overflow:hidden}
.post-card.skin-flame::before{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,rgba(225,112,85,0.5),rgba(253,203,110,0.6),rgba(225,112,85,0.5),transparent);animation:flameGlow 2s ease-in-out infinite alternate;pointer-events:none}
@keyframes flameGlow{0%{opacity:0.5;filter:blur(2px)}100%{opacity:1;filter:blur(3px)}}
.post-card.skin-rainbow{border:none!important;border-image:none!important;position:relative;overflow:hidden!important;background:var(--card-bg)!important}
.post-card.skin-rainbow::before{content:'';position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,#e17055,#fdcb6e,#00b894,#0984e3,#6c5ce7,#fd79a8,#e17055);background-size:300% 300%;animation:rainbowBorder 4s linear infinite;z-index:-1}
.post-card.skin-rainbow::after{content:'';position:absolute;inset:2px;border-radius:calc(var(--radius) - 2px);background:var(--card-bg);z-index:-1}
@keyframes rainbowBorder{0%{background-position:0% 0%}100%{background-position:300% 300%}}

/* ===== 个人主页背景 ===== */
.profile-bg-aurora{background:linear-gradient(135deg,#0f0a20 0%,#1a1040 20%,#0d1f3a 50%,#1a1040 80%,#0f0a20 100%)!important;overflow:hidden}
.profile-bg-aurora::after{content:'';position:absolute;top:-50%;left:-30%;width:160%;height:160%;background:radial-gradient(ellipse at 20% 30%,rgba(162,155,254,0.45),transparent 40%),radial-gradient(ellipse at 80% 40%,rgba(253,121,168,0.35),transparent 35%),radial-gradient(ellipse at 50% 80%,rgba(253,203,110,0.2),transparent 30%),radial-gradient(ellipse at 60% 10%,rgba(100,200,255,0.15),transparent 30%);animation:auroraPulse 5s ease-in-out infinite alternate;pointer-events:none;z-index:0}
@keyframes auroraPulse{0%{opacity:0.6;transform:translateX(-8%) rotate(-3deg) scale(0.95)}100%{opacity:1;transform:translateX(8%) rotate(3deg) scale(1.05)}}
.profile-bg-starry{background:linear-gradient(180deg,#010508 0%,#060e1e 35%,#0a1830 70%,#060e1e 100%)!important;overflow:hidden}
.profile-bg-starry::after{content:'';position:absolute;inset:0;background:radial-gradient(2px 2px at 8% 12%,rgba(255,255,255,0.8),transparent),radial-gradient(1.5px 1.5px at 18% 38%,rgba(200,220,255,0.6),transparent),radial-gradient(2.5px 2.5px at 32% 8%,rgba(255,255,255,0.9),transparent),radial-gradient(1.5px 1.5px at 45% 42%,rgba(200,220,255,0.5),transparent),radial-gradient(2px 2px at 58% 15%,rgba(255,255,255,0.7),transparent),radial-gradient(1.5px 1.5px at 72% 48%,rgba(200,220,255,0.55),transparent),radial-gradient(2.5px 2.5px at 85% 22%,rgba(255,255,255,0.75),transparent),radial-gradient(1.5px 1.5px at 92% 55%,rgba(200,220,255,0.45),transparent),radial-gradient(2px 2px at 12% 62%,rgba(255,255,255,0.6),transparent),radial-gradient(1.5px 1.5px at 28% 78%,rgba(200,220,255,0.5),transparent),radial-gradient(2px 2px at 48% 68%,rgba(255,255,255,0.55),transparent),radial-gradient(1.5px 1.5px at 65% 82%,rgba(200,220,255,0.4),transparent),radial-gradient(2.5px 2.5px at 78% 72%,rgba(255,255,255,0.65),transparent),radial-gradient(1.5px 1.5px at 3% 88%,rgba(200,220,255,0.5),transparent),radial-gradient(2px 2px at 55% 92%,rgba(255,255,255,0.4),transparent),radial-gradient(1.5px 1.5px at 95% 85%,rgba(200,220,255,0.35),transparent),radial-gradient(3px 3px at 42% 28%,rgba(180,200,255,0.6),transparent),radial-gradient(3px 3px at 88% 68%,rgba(180,200,255,0.5),transparent);pointer-events:none;z-index:0;animation:starTwinkle 3s ease-in-out infinite alternate}
@keyframes starTwinkle{0%{opacity:0.5}100%{opacity:1}}
.profile-bg-ice{background:linear-gradient(135deg,#060e1a 0%,#0b1e35 25%,#143a5c 50%,#0d2a48 75%,#060e1a 100%)!important;overflow:hidden}
.profile-bg-ice::after{content:'';position:absolute;top:-60%;left:-40%;width:180%;height:180%;background:radial-gradient(ellipse at 20% 30%,rgba(139,200,255,0.35),transparent 40%),radial-gradient(ellipse at 80% 50%,rgba(168,220,255,0.25),transparent 35%),radial-gradient(ellipse at 50% 15%,rgba(200,235,255,0.3),transparent 30%),radial-gradient(ellipse at 35% 75%,rgba(139,180,240,0.15),transparent 30%);pointer-events:none;z-index:0;animation:icePulse 6s ease-in-out infinite alternate}
@keyframes icePulse{0%{opacity:0.7;transform:scale(0.98)}100%{opacity:1;transform:scale(1.02)}}
.profile-bg-sakura{background:linear-gradient(135deg,#140a10 0%,#261018 20%,#351525 45%,#261018 70%,#140a10 100%)!important;overflow:hidden}
.profile-bg-sakura::after{content:'';position:absolute;top:-40%;left:-25%;width:150%;height:150%;background:radial-gradient(ellipse at 25% 35%,rgba(255,140,170,0.4),transparent 40%),radial-gradient(ellipse at 75% 30%,rgba(255,190,180,0.3),transparent 35%),radial-gradient(ellipse at 50% 70%,rgba(255,170,190,0.25),transparent 30%),radial-gradient(ellipse at 85% 75%,rgba(255,210,200,0.2),transparent 25%);pointer-events:none;z-index:0;animation:sakuraPulse 5s ease-in-out infinite alternate}
@keyframes sakuraPulse{0%{opacity:0.6;transform:translateY(-3%)}100%{opacity:1;transform:translateY(3%)}}

/* ===== 入场特效 ===== */
.entrance-ice{animation:entranceIce 0.8s ease-out}
@keyframes entranceIce{0%{transform:scale(0.2) rotate(-15deg);opacity:0;filter:blur(15px) brightness(1.5)}30%{filter:blur(5px) brightness(1.2)}60%{transform:scale(1.08) rotate(3deg);filter:blur(0) brightness(1)}100%{transform:scale(1) rotate(0);opacity:1;filter:blur(0) brightness(1)}}
.entrance-aurora{animation:entranceAurora 1.2s ease-out}
@keyframes entranceAurora{0%{clip-path:circle(0% at 50% 50%);opacity:0;filter:brightness(2) saturate(1.5)}50%{clip-path:circle(60% at 50% 50%);filter:brightness(1.3) saturate(1.2)}100%{clip-path:circle(100% at 50% 50%);opacity:1;filter:brightness(1) saturate(1)}}
.entrance-stardust{animation:entranceStardust 1s ease-out}
@keyframes entranceStardust{0%{transform:translateY(40px) scale(0.3);opacity:0;filter:brightness(3) blur(8px)}40%{filter:brightness(2) blur(2px)}70%{transform:translateY(-5px) scale(1.05);filter:brightness(1.2) blur(0)}100%{transform:translateY(0) scale(1);opacity:1;filter:brightness(1) blur(0)}}
.entrance-flame{animation:entranceFlame 0.8s ease-out}
@keyframes entranceFlame{0%{transform:scale(2.5) rotate(5deg);opacity:0;filter:brightness(3) saturate(2) blur(6px)}40%{transform:scale(0.95) rotate(-2deg);filter:brightness(1.2) saturate(1.3) blur(0)}70%{transform:scale(1.03) rotate(1deg);filter:brightness(1) saturate(1)}100%{transform:scale(1) rotate(0);opacity:1;filter:brightness(1) saturate(1)}}

/* ===== 新功能：限定头像框 ===== */
.frame-snowflake{border:3px solid rgba(168,212,240,0.6);box-shadow:0 0 15px rgba(168,212,240,0.5),0 0 30px rgba(139,180,240,0.3),inset 0 0 10px rgba(168,212,240,0.2)}
.frame-snowflake::before{content:'❄';position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:1rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}
.frame-goddess{border:3px solid #a29bfe;box-shadow:0 0 20px rgba(162,155,254,0.5),0 0 35px rgba(253,121,168,0.3),inset 0 0 12px rgba(162,155,254,0.2)}
.frame-goddess::before{content:'✨';position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:1rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3))}

/* ===== 新功能：弹幕 ===== */
.danmaku-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:10;border-radius:inherit}
.danmaku-item{position:absolute;white-space:nowrap;font-size:0.75rem;font-weight:600;color:rgba(255,255,255,0.85);text-shadow:0 1px 3px rgba(0,0,0,0.5);animation:danmakuScroll 8s linear;pointer-events:none;padding:2px 6px;background:rgba(0,0,0,0.2);border-radius:10px}
@keyframes danmakuScroll{0%{transform:translateX(110%)}100%{transform:translateX(-110%)}}

/* ===== 新功能：送温暖特效 ===== */
.warmth-effect{position:fixed;pointer-events:none;z-index:9999;font-size:1.5rem;animation:warmthFloat 2s ease-out forwards}
@keyframes warmthFloat{0%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(-60px) scale(1.3);opacity:0.8}100%{transform:translateY(-120px) scale(0.5);opacity:0}}

/* ===== 新功能：称号 ===== */
.user-title{display:inline-flex;align-items:center;gap:0.25rem;padding:0.2rem 0.65rem;border-radius:12px;font-size:0.7rem;font-weight:600;background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));color:rgba(200,220,255,0.95);border:1px solid rgba(255,255,255,0.1);margin-left:0.3rem;backdrop-filter:blur(12px) saturate(1.8);-webkit-backdrop-filter:blur(12px) saturate(1.8);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 2px 8px rgba(0,0,0,0.15);text-shadow:0 1px 2px rgba(0,0,0,0.2);position:relative;overflow:hidden;transition:all 0.3s}
.user-title::before{content:'';position:absolute;top:0;left:-50%;width:100%;height:50%;background:linear-gradient(180deg,rgba(255,255,255,0.12),transparent);pointer-events:none;border-radius:12px 12px 0 0}
.user-title:hover{border-color:rgba(255,255,255,0.18);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 4px 12px rgba(0,0,0,0.2);transform:translateY(-1px)}

/* 无障碍：键盘焦点可见 */
*:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 高对比度优化 */
[data-theme="light"] .post-author{color:#1a1410!important}
[data-theme="light"] .post-time{color:#6a5e55!important}
[data-theme="light"] .post-text{color:#2a2420!important}
[data-theme="light"] .comment-text{color:#2a2420!important}
[data-theme="light"] .comment-author{color:#1a1410!important}
[data-theme="light"] .profile-bio{color:#5a4e45!important}
[data-theme="light"] .hero-signature{color:#4a3e35!important}
[data-theme="light"] .breath-badge{background:linear-gradient(135deg,rgba(142,198,242,0.42) 0%,rgba(96,162,226,0.32) 55%,rgba(126,190,244,0.40) 100%);color:#fff;border-color:rgba(255,255,255,0.55);text-shadow:0 1px 2px rgba(30,80,130,0.30)}

/* ===== 通用弹窗组件 ===== */
.edit-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9999;display:none;align-items:center;justify-content:center;padding:1rem;animation:modalFadeIn 0.3s var(--ease-out)}
.edit-modal-overlay.show{display:flex}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalSlideUp{from{opacity:0;transform:translateY(30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.edit-modal{background:var(--bg2);border:1px solid var(--glass-border);border-radius:var(--radius);width:100%;max-width:440px;position:relative;overflow:hidden;animation:modalSlideUp 0.35s var(--ease-out);box-shadow:0 20px 60px rgba(0,0,0,0.4)}
.edit-modal-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-border);color:var(--text-dim);font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:2}
.edit-modal-close:hover{background:rgba(225,112,85,0.15);border-color:#e17055;color:#e17055}
.edit-modal-header{text-align:center;padding:2rem 1.5rem 1.2rem;background:linear-gradient(135deg,rgba(91,141,217,0.08),rgba(168,212,240,0.04));border-bottom:1px solid var(--glass-border)}
.edit-modal-avatar-wrap{position:relative;width:80px;height:80px;margin:0 auto 1rem;cursor:pointer}
.edit-modal-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--primary);display:block;transition:transform 0.3s}
.edit-modal-avatar-wrap:hover .edit-modal-avatar{transform:scale(1.05)}
.edit-modal-avatar-badge{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;background:var(--primary);border:2px solid var(--bg2);display:flex;align-items:center;justify-content:center;font-size:0.75rem;transition:transform 0.2s}
.edit-modal-avatar-badge:hover{transform:scale(1.15)}
.edit-modal-title{font-size:1.15rem;font-weight:700;color:var(--text-bright);margin-bottom:0.2rem}
.edit-modal-subtitle{font-size:0.78rem;color:var(--text-dim)}
.edit-modal-body{padding:1.5rem}
.edit-field{margin-bottom:1.3rem}
.edit-label{display:block;font-size:0.78rem;font-weight:600;color:var(--text-dim);margin-bottom:0.45rem;letter-spacing:0.02em}
.edit-input-wrap{display:flex;align-items:center;gap:0.5rem;background:var(--input-bg);border:1.5px solid var(--glass-border);border-radius:var(--radius-sm);padding:0 0.75rem;transition:border-color 0.25s,box-shadow 0.25s}
.edit-input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,141,217,0.1)}
.edit-input-wrap.disabled{opacity:0.45;cursor:not-allowed}
.edit-input-wrap.disabled:focus-within{border-color:var(--glass-border);box-shadow:none}
.edit-input-icon{font-size:0.9rem;flex-shrink:0}
.edit-input{flex:1;background:none;border:none;color:var(--text);font-size:0.9rem;padding:0.65rem 0;font-family:inherit;outline:none}
.edit-input::placeholder{color:var(--text-dim);opacity:0.6}
.edit-input:disabled{cursor:not-allowed}
.edit-input-count{font-size:0.68rem;color:var(--text-dim);flex-shrink:0;min-width:2.5rem;text-align:right}
.edit-hint{font-size:0.7rem;color:var(--text-dim);margin-top:0.3rem;padding-left:0.2rem}
.edit-actions{display:flex;gap:0.8rem;margin-top:1.6rem}
.edit-btn-cancel{flex:1;padding:0.65rem;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-dim);font-size:0.88rem;cursor:pointer;font-weight:500;transition:all 0.2s}
.edit-btn-cancel:hover{border-color:var(--primary);color:var(--text)}
.edit-btn-save{flex:1.5;padding:0.65rem;background:linear-gradient(135deg,var(--primary),var(--accent));border:none;border-radius:var(--radius-sm);color:#fff;font-size:0.88rem;cursor:pointer;font-weight:600;transition:all 0.25s}
.edit-btn-save:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(91,141,217,0.35)}
.edit-btn-save:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}
@media(max-width:768px){
    .edit-modal{max-width:100%;margin:0 0.5rem;border-radius:var(--radius)}
    .edit-modal-header{padding:1.5rem 1rem 1rem}
    .edit-modal-body{padding:1.2rem 1rem}
}

/* ==================== 动态效果 v3.0 ==================== */
@media (prefers-reduced-motion: no-preference) {
    /* 1) 滚动渐显 */
    .reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1); }
    .reveal.in { opacity:1; transform:none; }

    /* 2) Hero 视差（JS 驱动 transform；不加 will-change / filter，避免提升合成层破坏毛玻璃采样） */

    /* 3) 微交互：按钮涟漪 / 爱心飞出 */
    .rp-host { position:relative; overflow:hidden; }
    .rp { position:absolute; border-radius:50%; background:rgba(255,255,255,.38); transform:scale(0); animation:rpOut .62s ease-out forwards; pointer-events:none; }
    @keyframes rpOut { to { transform:scale(2.8); opacity:0; } }
    .fly-heart { position:fixed; z-index:99999; pointer-events:none; animation:flyUp 1.05s ease-out forwards; font-size:1.15rem; line-height:1; }
    @keyframes flyUp {
        0%   { opacity:.95; transform:translate(-50%,-50%) scale(.5) rotate(0deg); }
        60%  { opacity:.85; }
        100% { opacity:0; transform:translate(-50%,-150px) scale(1.55) rotate(18deg); }
    }
    .confetti-bit { position:fixed; z-index:99999; width:8px; height:12px; pointer-events:none; border-radius:2px; animation:confFall 1.5s cubic-bezier(.2,.7,.4,1) forwards; }
    @keyframes confFall {
        0%   { opacity:1; transform:translate(0,0) rotate(0deg); }
        100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); }
    }

    /* 4) 图片加载淡入 */
    img.fade-load { opacity:0; transition:opacity .55s ease, transform .35s ease; }
    img.fade-load.loaded { opacity:1; }

    /* 5) 等级进度条 / 签到火焰 */
    .level-bar-wrap { margin-top:.7rem; }
    .level-bar { height:8px; border-radius:6px; background:rgba(125,170,230,.16); overflow:hidden; }
    .level-bar .fill { height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width 1.1s cubic-bezier(.2,.8,.3,1); box-shadow:0 0 10px rgba(91,141,217,.45); }
    .level-bar-text { margin-top:.35rem; font-size:.72rem; color:var(--text-dim); }
    .streak-flame { display:inline-block; animation:flameWob 1.15s ease-in-out infinite; transform-origin:50% 90%; }
    @keyframes flameWob { 0%,100% { transform:scale(1) rotate(-2deg); } 50% { transform:scale(1.16) rotate(2.5deg); } }

    /* 6) 转场：页面淡入 / 灯箱缩放 / 菜单弹性
       注意：这里不能动 body 的 transform——一旦 body 带上 transform，
       全站 position:fixed 元素都会改为相对整页定位（加载页/返回顶部/播放器全会跑位） */
    body { animation:pageIn .42s ease both; }
    @keyframes pageIn { from { opacity:0; } to { opacity:1; } }
    #imagePreview { transition:opacity .28s ease; }
    #imagePreview img { transition:transform .38s cubic-bezier(.2,.85,.3,1); }
    #imagePreview.zoom img { transform:scale(1); }
    #imagePreview:not(.zoom) img { transform:scale(.86); }
    .mobile-menu { transform:scale(.92) translateY(-8px); transition:opacity .32s ease, transform .38s cubic-bezier(.22,1,.36,1); }
    .mobile-menu.active { transform:none; }

    /* 7) 音乐可视化 */
    .viz { display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
    .viz i { width:3px; height:28%; border-radius:2px; background:currentColor; opacity:.85; }
    .viz.play i { animation:vizJump .95s ease-in-out infinite; }
    .viz.play i:nth-child(2) { animation-delay:.14s; }
    .viz.play i:nth-child(3) { animation-delay:.28s; }
    .viz.play i:nth-child(4) { animation-delay:.42s; }
    @keyframes vizJump { 0%,100% { height:24%; } 50% { height:100%; } }

    /* 8) 鼠标柔光 / 首屏流光 */
    #cursorGlow { position:fixed; left:-999px; top:-999px; width:360px; height:360px; border-radius:50%; pointer-events:none; z-index:2; background:radial-gradient(circle, rgba(120,170,255,.13), rgba(120,170,255,0) 68%); transform:translate(-50%,-50%); transition:opacity .4s ease; }
    /* 首屏流光：旧版动画 background-position —— 渐变无法交给 GPU 合成，
       等于每帧重绘一块整屏大小的渐变（实测关掉它顶部能从 50.3 → 60 FPS，
       主线程每 3 秒少干 450ms，掉帧归零）。

       现在把「渐变画布」本身做成一个元素：宽 240%、渐变停靠点原样照抄，
       几何与旧版 background-size:240% 完全等价（所以宽度、角度、柔度都不变）；
       只是把原来的 background-position 位移换算成 transform 位移：
         旧 background-position 155%→-55%，图片宽 240%，
         左边缘 = (100%-240%)×pos → -2.17W → +0.77W
         换成自身宽度(2.4W)的百分比 = -90.4% → +32.1%
       动画只动 transform，走合成层，不再逐帧重绘。 */
    .hero-shine { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
    .hero-shine::before { content:''; position:absolute; top:0; left:0; width:240%; height:100%;
        background:linear-gradient(112deg, transparent 32%, rgba(255,255,255,.11) 46%, transparent 58%);
        transform:translate3d(-90.4%,0,0); animation:shineFlow 7.5s linear infinite; will-change:transform; }
    @keyframes shineFlow { 0% { transform:translate3d(-90.4%,0,0); } 100% { transform:translate3d(32.1%,0,0); } }

    /* 按钮点击反馈 */
    .btn-primary, .btn-nav, .quick-item, .btn-checkin { -webkit-tap-highlight-color:transparent; }
}

/* 无障碍：小屏加大可点区域（置顶/编辑/删除按钮） */
@media (max-width:768px) {
    .post-header .btn-delete { min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
}

/* ===== 第八轮：动效与氛围（转场 / 滚动驱动 / 回弹 / 倾斜 / 天气 / 话题 / 求签） ===== */
:root { --spring:cubic-bezier(.22,1,.36,1); /* 原为 .34,1.56,.64,1 过冲回弹，已改为非过冲减速（见第十四轮注） */ }

/* 主题切换平滑过渡（:where 零特异性，不抢其它 transition 声明） */
:where(body,.navbar,.post-card,.post-form-card,.quick-item,.footer,.mp-bar,.mp-panel,.comment-item,.topic-hero,.doodle-tools,.admin-stats) {
    transition:background-color .5s ease, border-color .5s ease, color .5s ease, box-shadow .5s ease;
}

/* 3D 倾斜容器：已移除 perspective（会破坏毛玻璃 backdrop-filter 采样） */

/* 评论入场 */
.comment-item { animation:commentIn .32s ease-out both; }
@keyframes commentIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* 话题标签 */
.topic-tag { color:var(--accent); text-decoration:none; padding:0 .15rem; font-weight:600; border-bottom:1px dashed rgba(130,170,220,.5); }
.topic-tag:hover { background:rgba(91,141,217,.15); border-radius:6px; }

/* 回弹物理感 */
.btn-primary,.btn-nav,.btn-action,.btn-comment,.btn-submit,.dt-btn {
    transition:transform .4s var(--spring), background .3s ease, border-color .3s ease, color .3s ease;
}
.btn-primary:active,.btn-action:active,.btn-comment:active,.btn-submit:active,.dt-btn:active {
    transform:scale(.93); transition:transform .12s var(--ease-out);
}
.mp-panel { transition:all .38s var(--spring); }
.reply-modal { animation:modalPop .38s var(--spring); }
@keyframes modalPop { from { opacity:0; transform:translateY(14px) scale(.92); } to { opacity:1; transform:none; } }

/* 求签摇签 */
.fortune-shake { display:inline-block; animation:fortuneShake .8s ease-in-out; }
@keyframes fortuneShake {
    0%,100% { transform:rotate(0); }
    20% { transform:rotate(-14deg) scale(1.05); }
    40% { transform:rotate(12deg) scale(1.08); }
    60% { transform:rotate(-8deg); }
    80% { transform:rotate(5deg); }
}

/* 滚动驱动动画（新内核生效，旧内核自动忽略；只用在装饰性区块，功能性区块不冒隐身风险） */
@supports (animation-timeline: view()) {
    @keyframes viewFadeUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
    :where(.section-header,#footprintCard,.topic-hero) {
        animation:viewFadeUp both;
        animation-timeline:view();
        animation-range:entry 0% entry 55%;
    }
}

/* 减少动态偏好：全部关闭 */
@media (prefers-reduced-motion: reduce) {
    .comment-item,.fortune-shake,.reply-modal { animation:none; }
}

/* 商店/背包优化：分类数量徽标 */
.shop-cnt { display:inline-block; min-width:18px; padding:0 5px; margin-left:2px; border-radius:9px; background:rgba(91,141,217,0.18); font-size:0.66rem; line-height:16px; }

/* ============================================================
   第十三轮：液态玻璃增强层（Liquid Glass）
   全站玻璃件统一加强：更透的分层渐变 + 高斯模糊 + 边缘棱光 + 顶部高光。
   只做叠加增强，不动布局；浅色主题自动换用白霜棱光。
   ============================================================ */

/* ---- 一级玻璃面（大块卡片/面板）---- */
.navbar.scrolled,
.mobile-menu,
.menu-user-card,
.post-form-card,
.post-card,
.login-hint,
.weather-card,
.profile-card,
.auth-card,
.admin-stat-card,
.modal,
.edit-modal,
.reply-modal,
.custom-confirm {
    background-color: var(--card-bg);
    background-image: linear-gradient(162deg,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.03) 34%,
        rgba(255,255,255,0) 60%,
        rgba(255,255,255,0.07) 100%);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow:
        0 14px 36px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.32),
        inset 0 -1px 0 rgba(255,255,255,0.06),
        inset 1px 0 0 rgba(255,255,255,0.10),
        inset -1px 0 0 rgba(255,255,255,0.10);
}
.navbar.scrolled {
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

/* ---- 二级玻璃面（列表项 / 模块 / 评论）---- */
.menu-item,
.comment-item,
.comment-form,
.fortune-shake,
.footer-quote,
.image-preview,
.user-level,
.empty-state {
    background-color: var(--glass);
    background-image: linear-gradient(165deg,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.02) 45%,
        rgba(255,255,255,0.05) 100%);
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(255,255,255,0.04);
}

/* ---- 玻璃按钮（保留原底色，叠棱光）---- */
.btn-nav,
.btn-primary,
.btn-green,
.btn-yellow,
.btn-red,
.btn-action,
.btn-sm,
.btn-comment,
.btn-submit,
.btn-quote-refresh,
.btn-confirm-danger,
.btn-cancel,
.btn-outline,
.btn-icon,
.sort-btn,
.upload-btn {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.10) 100%);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow:
        0 6px 16px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.40),
        inset 0 -1px 0 rgba(255,255,255,0.08);
    transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, filter .22s;
}
.btn-nav:hover,
.btn-primary:hover,
.btn-green:hover,
.btn-yellow:hover,
.btn-red:hover,
.btn-action:hover,
.btn-sm:hover,
.btn-comment:hover,
.btn-submit:hover,
.sort-btn:hover,
.upload-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 12px 26px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.50),
        inset 0 -1px 0 rgba(255,255,255,0.10),
        0 0 18px rgba(91,141,217,0.18);
}
.btn-nav:active,
.btn-primary:active,
.btn-green:active,
.btn-yellow:active,
.btn-red:active,
.btn-action:active,
.btn-sm:active,
.btn-comment:active,
.btn-submit:active {
    transform: translateY(0) scale(0.97);
}

/* ---- 玻璃小件（标签 / 徽章 / 回应）---- */
.tag,
.topic-tag,
.badge-gray,
.badge,
.shop-cnt {
    background-color: var(--glass);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 3px 10px rgba(0,0,0,0.14);
    backdrop-filter: blur(10px) saturate(1.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
}

/* ---- 玻璃输入框（内凹 + 聚焦光环）----
   注意：.edit-input 不在其中——它本身没有边框/底色，
   视觉外框由 .edit-input-wrap 提供，避免出现「双层圆角框」。 */
.comment-input,
.reply-textarea,
.search-bar input,
.modal textarea,
.form-group input,
.form-group textarea,
.form-group select {
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        inset 0 2px 10px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.14);
    transition: border-color .25s, box-shadow .25s;
}
.comment-input:focus,
.reply-textarea:focus,
.search-bar input:focus,
.modal textarea:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: rgba(139,180,240,0.65);
    box-shadow:
        inset 0 2px 10px rgba(0,0,0,0.12),
        0 0 0 3px rgba(91,141,217,0.22),
        0 4px 18px rgba(91,141,217,0.18);
}

/* ---- 弹窗浮层：更厚的玻璃 + 棱光描边 ---- */
.modal,
.edit-modal,
.reply-modal,
.custom-confirm {
    background-color: rgba(14,30,56,0.72);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.50),
        inset 0 1px 0 rgba(255,255,255,0.38),
        inset 0 -1px 0 rgba(255,255,255,0.08),
        inset 1px 0 0 rgba(255,255,255,0.12),
        inset -1px 0 0 rgba(255,255,255,0.12);
}
.modal-overlay,
.edit-modal-overlay,
.custom-confirm-overlay {
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
}

/* ---- Toast 也玻璃化（保留语义色，叠高光）---- */
.toast {
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow:
        0 12px 32px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.40),
        inset 0 -1px 0 rgba(255,255,255,0.10);
}

/* ---- 浅色主题：换白霜棱光 ---- */
[data-theme="light"] .navbar.scrolled,
[data-theme="light"] .mobile-menu,
[data-theme="light"] .menu-user-card,
[data-theme="light"] .post-form-card,
[data-theme="light"] .post-card,
[data-theme="light"] .login-hint,
[data-theme="light"] .weather-card,
[data-theme="light"] .profile-card,
[data-theme="light"] .auth-card,
[data-theme="light"] .admin-stat-card,
[data-theme="light"] .modal,
[data-theme="light"] .edit-modal,
[data-theme="light"] .reply-modal,
[data-theme="light"] .custom-confirm {
    background-color: rgba(252,250,246,0.82);
    background-image: linear-gradient(162deg,
        rgba(255,255,255,0.85) 0%,
        rgba(255,255,255,0.35) 38%,
        rgba(255,255,255,0.15) 62%,
        rgba(255,255,255,0.55) 100%);
    border-color: rgba(255,255,255,0.75);
    box-shadow:
        0 14px 36px rgba(90,75,58,0.16),
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -1px 0 rgba(255,255,255,0.45),
        inset 1px 0 0 rgba(255,255,255,0.60),
        inset -1px 0 0 rgba(255,255,255,0.60);
}
[data-theme="light"] .btn-nav,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-green,
[data-theme="light"] .btn-yellow,
[data-theme="light"] .btn-red,
[data-theme="light"] .btn-action,
[data-theme="light"] .btn-sm,
[data-theme="light"] .btn-comment,
[data-theme="light"] .btn-submit,
[data-theme="light"] .btn-cancel,
[data-theme="light"] .btn-outline,
[data-theme="light"] .sort-btn,
[data-theme="light"] .upload-btn {
    border-color: rgba(255,255,255,0.75);
    box-shadow:
        0 6px 16px rgba(90,75,58,0.16),
        inset 0 1px 0 rgba(255,255,255,0.85),
        inset 0 -1px 0 rgba(255,255,255,0.35);
}

/* ---- 减少动态：不关玻璃质感，只去悬浮位移 ---- */
@media (prefers-reduced-motion: reduce) {
    .btn-nav:hover, .btn-primary:hover, .btn-green:hover, .btn-yellow:hover,
    .btn-red:hover, .btn-action:hover, .btn-sm:hover, .btn-comment:hover,
    .btn-submit:hover, .sort-btn:hover, .upload-btn:hover {
        transform: none;
    }
}

/* ============================================================
 * 首页 Hero 布局 v2 —— 手机：紧凑纵向 / 桌面：非对称双栏
 * ============================================================ */
.hero-content {
    width:100%; max-width:1180px; margin:0 auto;
    display:flex; flex-direction:column; align-items:center; gap:1.9rem;
    padding:clamp(5.5rem,13vh,7.5rem) 1.4rem 3.2rem;
    text-align:center;
}
.hero-side { order:-1; }
.hero-main { display:flex; flex-direction:column; align-items:center; width:100%; }
.hero-avatar-wrap { width:clamp(104px,26vw,132px); height:clamp(104px,26vw,132px); margin:0; }
.hero-avatar { width:100%; height:100%; }
.hero-name { font-size:clamp(2.05rem,7.2vw,2.7rem); letter-spacing:0.01em; margin-bottom:0.55rem; }
.user-title { margin:0 auto 0.55rem; }
.hero-signature { margin-bottom:1.15rem; }

/* 每日一言：由内联样式迁入样式表，方便两端分别调 */
.hero-poem {
    margin:0 auto 1.35rem; max-width:620px;
    display:flex; align-items:center; justify-content:center; gap:0.55rem; flex-wrap:wrap;
    padding:0.55rem 1rem; border-radius:14px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(168,212,240,0.16);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hero-poem-icon { flex-shrink:0; font-size:1rem; }
.hero-poem-text { margin:0; font-size:0.92rem; line-height:1.8; text-align:center; color:var(--text); transition:opacity .4s; }
.hero-poem-btn {
    flex-shrink:0; width:30px; height:30px; border-radius:50%;
    border:1px solid rgba(168,212,240,0.2); background:rgba(255,255,255,0.08);
    cursor:pointer; font-size:0.85rem; transition:transform .25s ease, background .25s ease;
}
.hero-poem-btn:hover { transform:rotate(45deg) scale(1.06); background:rgba(168,212,240,0.16); }

/* 数据：细分隔线 + 疏朗留白 */
.hero-stats { display:flex; justify-content:center; gap:0; width:100%; max-width:420px; margin-bottom:1.55rem; }
.stat { flex:1; text-align:center; padding:0.3rem 0; position:relative; }
.stat + .stat::before {
    content:''; position:absolute; left:0; top:18%; height:64%; width:1px;
    background:linear-gradient(180deg,transparent,rgba(168,212,240,0.28),transparent);
}
.stat-num { font-size:clamp(1.55rem,5.4vw,1.95rem); }
.stat-label { font-size:0.72rem; letter-spacing:0.18em; color:var(--text-dim); }

/* 向下探索：慢呼吸箭头，替代弹跳 */
.hero-scroll {
    display:inline-flex; flex-direction:row; align-items:center; gap:0.7rem;
    color:var(--text-dim); text-decoration:none;
    font-size:0.78rem; letter-spacing:0.24em;
    animation:none;
}
.scroll-arrow {
    width:15px; height:15px;
    border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim);
    transform:rotate(45deg);
    animation:scrollNudge 2.4s ease-in-out infinite;
}
@keyframes scrollNudge {
    0%,100% { transform:rotate(45deg) translate(0,0); opacity:0.65; }
    50%     { transform:rotate(45deg) translate(4px,4px); opacity:1; }
}

/* 手机窄屏微调 */
@media (max-width:420px) {
    .hero-content { gap:1.55rem; padding:5.2rem 1.1rem 2.6rem; }
    .hero-poem { padding:0.5rem 0.85rem; gap:0.45rem; }
    .hero-poem-text { font-size:0.85rem; }
    .hero-scroll { letter-spacing:0.18em; }
}

/* ===== 桌面：非对称双栏（文案居左 · 头像居右） ===== */
@media (min-width:1024px) {
    .hero-content {
        display:grid;
        grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);
        align-items:center;
        column-gap:clamp(2.5rem,6vw,5.5rem);
        padding:6.5rem 2.5rem 4.5rem;
        text-align:left;
    }
    .hero-side { order:0; justify-self:center; }
    .hero-main { align-items:flex-start; }
    .hero-avatar-wrap { width:clamp(196px,16.5vw,242px); height:clamp(196px,16.5vw,242px); }
    .hero-name { font-size:clamp(3rem,4.8vw,4.25rem); letter-spacing:-0.015em; margin-bottom:0.65rem; }
    .user-title { margin:0 0 0.75rem; }
    .hero-signature { margin-bottom:1.5rem; }
    .hero-poem { margin:0 0 1.8rem; max-width:560px; justify-content:flex-start; padding:0.75rem 1.15rem; }
    .hero-poem-text { text-align:left; }
    .hero-stats { justify-content:flex-start; max-width:470px; margin-bottom:2rem; }
    .stat { text-align:left; flex:0 0 auto; min-width:110px; padding:0.25rem 0; }
    .stat + .stat { padding-left:1.9rem; }
    .stat + .stat::before { left:0.95rem; top:12%; height:76%; }
    .hero-scroll { margin-top:0.25rem; }
}

/* 浅色主题适配 */
[data-theme="light"] .hero-poem { background:rgba(255,255,255,0.55); border-color:rgba(110,160,210,0.22); }
[data-theme="light"] .hero-poem-btn { background:rgba(255,255,255,0.6); border-color:rgba(110,160,210,0.25); }
[data-theme="light"] .stat + .stat::before { background:linear-gradient(180deg,transparent,rgba(110,160,210,0.35),transparent); }

/* ===== Hero v2 微调：层级间距 / 节奏 / 头像呼吸光晕 ===== */
.hero-name { margin-bottom:0.85rem; }
.hero-stats { margin-bottom:1.55rem; }
.hero-scroll { margin-top:0.15rem; }
.hero-avatar { animation:avatarBreath 5.5s ease-in-out infinite; }
@keyframes avatarBreath {
    0%,100% { box-shadow:0 0 12px rgba(139,180,240,0.12); }
    50%     { box-shadow:0 0 26px rgba(168,212,240,0.28); }
}
@media (min-width:1024px) {
    .hero-name { margin-bottom:1.05rem; }
    .user-title { margin:0 0 0.85rem; }
    .hero-stats { margin-bottom:2.15rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-avatar, .hero-avatar-wrap { animation:none; }
    .scroll-arrow { animation:none; }
}

/* ============================================================
 * 首页 Hero 布局 v3 —— 手机：头像居左横向身位 + 左对齐编辑排版
 *                 电脑：非对称双栏（左文右图）
 * ============================================================ */
.hero-content {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"side id" "main main";
    column-gap:1.15rem; row-gap:1.65rem;
    align-items:center;
    width:100%; max-width:1180px; margin:0 auto;
    padding:clamp(5.5rem,13vh,7.5rem) 1.4rem 3.2rem;
    text-align:left;
}
.hero-side { grid-area:side; order:0; }
.hero-id { grid-area:id; min-width:0; }
.hero-main { grid-area:main; display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.hero-name { font-size:clamp(1.8rem,6.4vw,2.55rem); letter-spacing:0.005em; margin-bottom:0.45rem; }
.user-title { margin:0 0 0.55rem; }
.hero-poem { margin:0 0 1.35rem; justify-content:flex-start; }
.hero-poem-text { text-align:left; }
.hero-stats { justify-content:flex-start; margin-left:0; margin-right:auto; }
.hero-scroll { align-self:flex-start; }

@media (max-width:420px) {
    .hero-content { column-gap:0.95rem; row-gap:1.35rem; padding:5.2rem 1.1rem 2.6rem; }
    .hero-avatar-wrap { width:92px; height:92px; }
    .hero-name { font-size:1.72rem; }
}

/* ===== 桌面：非对称双栏（左文右图） ===== */
@media (min-width:1024px) {
    .hero-content {
        grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);
        grid-template-areas:"id side" "main side";
        column-gap:clamp(2.5rem,6vw,5.5rem);
        row-gap:0.35rem;
        align-items:center;
        padding:6.5rem 2.5rem 4.5rem;
    }
    .hero-id { align-self:end; }
    .hero-main { align-self:start; }
    .hero-side { align-self:center; }
    .hero-name { font-size:clamp(3rem,4.8vw,4.25rem); margin-bottom:0.6rem; }
    .user-title { margin:0 0 0.85rem; }
    .hero-poem { margin:0 0 1.8rem; max-width:560px; }
    .hero-stats { max-width:470px; margin-bottom:2.15rem; }
}

/* ============================================================
   第十四轮：丝滑与高级感（Motion & Typography Polish）
   只做叠加增强：不改布局、不改业务逻辑、不动 HTML。
   全部可降级（旧内核自动忽略），新增动效均接 reduced-motion。
   ------------------------------------------------------------
   1) 缓动体系        —— 统一减速曲线，去掉过冲弹跳
   2) View Transition —— 多页导航交叉淡入，替代白屏硬切
   3) text-wrap       —— 标题平衡断行 / 正文避免孤字
   4) content-visibility —— 长列表滚动流畅度
   ============================================================ */

/* ---------- 1) 缓动体系 ----------
   物体是减速停下的，不会先冲过头再弹回来。
   过冲（overshoot / spring）曲线是「廉价玩具感」的主要来源，
   全站交互反馈统一走二次减速。色彩类 transition 保留原样——
   颜色插值用什么缓动肉眼几乎无感，不必为改而改。
   注：--spring 变量名保留（有 3 处引用），但值已换成非过冲曲线。 */
:root {
    --ease-out:    cubic-bezier(.22, 1, .36, 1);   /* easeOutQuint：入场 / 展开 / hover */
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-in:     cubic-bezier(.4, 0, 1, 1);      /* 退场 / 收起 */
}

/* ---------- 2) View Transition（多页导航） ----------
   多页 PHP 站最大的体感提升：把「白屏硬切」变成连续过渡。
   两条硬性约束（改这里前先读）：
   a) 只做 root 交叉淡入，**不给任何元素 view-transition-name**。
      .hero-avatar 在 index.php 出现 2 次、各页面 nav 标记不一致
      （nav-avatar 只有 index 有），同页命名重名会让元素直接不渲染。
   b) body 的 pageIn 淡入（上方 1298 行）会与 VT 叠加成双重淡入，
      故在支持时交给 VT 负责。靠源顺序胜出，不用 !important。
   只用 transform + opacity（不碰布局属性，不加 blur 滤镜）。 */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: vtOut .26s var(--ease-in) both;
}
::view-transition-new(root) {
    animation: vtIn .42s var(--ease-out) both;
}
@keyframes vtOut {
    to   { opacity: 0; transform: scale(.988); }
}
@keyframes vtIn  {
    from { opacity: 0; transform: scale(1.012); }
}

/* VT 接管页面淡入：避免与 body 的 pageIn（上方）叠加成双重淡入。
   靠源顺序胜出，不用 !important。
   为什么要两个条件一起判：view-transition-name 在 Chrome 111 就有了，
   但跨文档导航转场（@view-transition navigation）要 Chrome 126。
   只判前者会误伤 111-125 的浏览器（它们会丢掉淡入）。
   判不出来时保守保留 pageIn，最坏只是淡入略柔，不会没有过渡。 */
@supports (view-transition-name: none) and (view-transition-class: none) {
    body { animation: none; }
}

/* ---------- 3) text-wrap：零成本排版 ----------
   balance：标题每行长度均匀，不再出现「末行俩字」的丑断行。
   pretty ：正文修掉行尾孤字。浏览器对过长段落会自动退回正常折行。 */
.hero-name, .section-header h2, h1, h2, h3,
.post-author, .user-title, .topic-title {
    text-wrap: balance;
}
p, .post-text, .hero-poem {
    text-wrap: pretty;
}

/* ---------- 4) content-visibility：长列表滚动流畅度 ----------
   首页一次渲染 50 个帖子，视口外的盒子跳过布局/绘制，
   滚动帧率明显提升。
   contain-intrinsic-size 的 auto 关键字会记住上次渲染的真实尺寸，
   避免滚动条跳动，也避免影响 main.js 的无限滚动高度判断
   （window.scrollY >= document.body.offsetHeight - 500）。
   只加给 .post-card：gallery 的灯箱要读 getBoundingClientRect()，
   不碰。 */
@supports (content-visibility: auto) {
    .posts-list .post-card {
        content-visibility: auto;
        contain-intrinsic-size: auto 340px;
    }
}

/* ---------- 新增动效统一降级 ---------- */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) {
        animation-duration: .01s;
        animation-delay: 0s;
    }
}

/* ============================================================
   移动端滚动性能优化（实测数据驱动）

   412×915 实测：滑到底部时平均帧间隔 40ms（≈25fps）、43 个掉帧。
   对照实验逐个排除后定位到两个主因：

     ① backdrop-filter —— 最大头。滚动时它要逐帧重新采样背景做模糊，
        而本站背景还是 position:fixed 的壁纸层，等于每帧都要重算一遍；
        页面上同时有十几个毛玻璃元素（quick-item / q-pill / login-hint /
        uptime / weather-card / post-card …）。禁掉后：43 掉帧 → 3 掉帧。

     ② 动画 box-shadow / background-position —— 这两个都不是合成属性，
        每帧都会触发重绘（hero-avatar 呼吸、uptime 秒位辉光、骨架屏 shimmer）。

   这里只对移动端（≤767px）降级：毛玻璃换成半透明纯色（观感接近，
   但不再触发模糊合成），非合成属性动画停掉。桌面端完全不受影响。
   ============================================================ */
@media (max-width: 767px) {
    /* ① 去掉逐帧背景重采样。元素自身的半透明 background 仍在，所以不会变透明块 */
    *, *::before, *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* ② 停掉“非合成属性”动画：box-shadow / background-position 每帧重绘 */
    .hero-avatar,          /* avatarBreath：box-shadow */
    .uptime-cell.is-sec,   /* upSecGlow：box-shadow */
    .btn-primary,          /* lgSheen：background-position */
    .footer-glow {         /* glowPulse：300px 径向渐变的 opacity */
        animation: none !important;
    }
    /* ③ 骨架屏只应在等数据时出现；内容就绪后若还有残留节点，
       它的 shimmer 会一直重绘。这里限定时长并在移动端停掉动画 */
    .skeleton { animation: none !important; }
}

/* ============================================================================
 * 壁纸明暗自适应文字色（配合 main.js 采样壁纸亮度写入 html[data-hero-bg]）
 * ----------------------------------------------------------------------------
 * 首页壁纸是固定的整屏图层，文字直接压在它上面；而壁纸本身可能是亮图也可能是
 * 暗图，跟站点主题（data-theme）无关。只按主题配色，会出现“深色主题 + 亮壁纸”
 * 或“浅色主题 + 暗壁纸”时文字看不清的情况。
 * main.js 采样壁纸平均亮度后给 <html> 加 data-hero-bg="light|dark"，
 * 这里的规则据此把压在壁纸上的文字切成深色或浅色，并配一层反向投影兜底。
 * 采样失败（外链壁纸不给跨域）时不加该属性，自动回退到原来的主题配色。
 * ========================================================================== */
:root {
    --on-wall: #ffffff;
    --on-wall-dim: rgba(255, 255, 255, 0.84);
    --on-wall-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 2px rgba(0, 0, 0, 0.45);
}
html[data-hero-bg="light"] {
    --on-wall: #16120e;
    --on-wall-dim: rgba(22, 18, 14, 0.80);
    --on-wall-shadow: 0 1px 3px rgba(255, 255, 255, 0.85), 0 0 2px rgba(255, 255, 255, 0.95);
}
html[data-hero-bg="dark"] {
    --on-wall: #ffffff;
    --on-wall-dim: rgba(255, 255, 255, 0.84);
    --on-wall-shadow: 0 1px 4px rgba(0, 0, 0, 0.62), 0 0 2px rgba(0, 0, 0, 0.45);
}

/* 纯文字：直接换对比色 + 投影 */
html[data-hero-bg] .hero-name,
html[data-hero-bg] .hero-stats .stat-num,
html[data-hero-bg] .hero-scroll,
html[data-hero-bg] .q-head-cn {
    color: var(--on-wall);
    text-shadow: var(--on-wall-shadow);
}
html[data-hero-bg] .hero-stats .stat-label,
html[data-hero-bg] .q-head-en,
html[data-hero-bg] .section-header p {
    color: var(--on-wall-dim);
    text-shadow: var(--on-wall-shadow);
}
/* 每日一言胶囊：底色与文字一起随壁纸明暗切换，避免白底白字 / 暗底暗字互吃 */
html[data-hero-bg="light"] .hero-poem { background: rgba(255, 255, 255, 0.66); border-color: rgba(0, 0, 0, 0.08); }
html[data-hero-bg="light"] .hero-poem-text { color: #241f1a; text-shadow: none; }
html[data-hero-bg="light"] .hero-poem-btn { background: rgba(255, 255, 255, 0.72); border-color: rgba(0, 0, 0, 0.10); }
html[data-hero-bg="dark"] .hero-poem { background: rgba(10, 18, 32, 0.42); border-color: rgba(255, 255, 255, 0.18); }
html[data-hero-bg="dark"] .hero-poem-text { color: #f3f0ea; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }
html[data-hero-bg="dark"] .hero-poem-btn { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.20); }

/* ============================================================================
 * 浅色主题：文字可读性补丁
 * 这些类在深色主题下用浅色字（好看），到浅色主题下就成了「浅字压浅底」。
 * 逐个给出深色化的对应色，保持同样的色彩语义（冰蓝/极光紫/火焰橙/金色），
 * 只是把明度压下来，保证在米色画布上清晰可读。
 * ========================================================================== */
[data-theme="light"] .name-color-ice    { color:#2b6cb0 !important; text-shadow:none; }
[data-theme="light"] .name-color-aurora { color:#5b4fc4 !important; text-shadow:none; }
[data-theme="light"] .name-color-flame  { color:#c0432a !important; text-shadow:none; }
[data-theme="light"] .name-color-gold   { color:var(--gold) !important; text-shadow:none; }

[data-theme="light"] .level-1 { color:#5b4fc4; }
[data-theme="light"] .level-2 { color:#00795f; }
[data-theme="light"] .level-3 { color:var(--gold); }
[data-theme="light"] .level-4 { color:#b3206a; }

/* 载入页：原来的浅蓝 logo 与 30% 白雪花在米色底上几乎看不见 */
[data-theme="light"] .loader-logo { color:var(--primary); }
[data-theme="light"] .loader-snow { color:rgba(90,75,58,0.32); }

/* 弹幕：浅色主题下英雄区被浅色纱盖住，白字会糊掉，改深字浅底 */
[data-theme="light"] .danmaku-item {
    color:#33302c; background:rgba(255,255,255,0.55); text-shadow:none;
}

/* ---------------------------------------------------------------------------
 * 浅色主题：音乐播放器面板（mini 条 + 展开面板）
 * 面板背景是主题化玻璃（浅色下接近白），原来那批浅色字会糊掉。
 * 注意：全屏播放器 .mpf-* 是"永远黑底"的电影感界面，那里的浅字是正确的，不动。
 * ------------------------------------------------------------------------- */
[data-theme="light"] .mp-title           { color:var(--text-bright); }
[data-theme="light"] .mp-time            { color:var(--text-dim); }
[data-theme="light"] .mp-tab             { color:var(--text-dim); }
[data-theme="light"] .mp-tab.active      { color:var(--text-bright); }
[data-theme="light"] .mp-lrc-line        { color:var(--text-dim); }
[data-theme="light"] .mp-lrc-line.active { color:var(--text-bright); }
[data-theme="light"] .mp-item-idx        { color:var(--text-faint); }
[data-theme="light"] .mp-item.playing .mp-item-idx { color:var(--primary); }
[data-theme="light"] .mp-item-sub        { color:var(--text-faint); }
[data-theme="light"] .mp-item-tag        { color:var(--primary-dark); }
[data-theme="light"] .mp-empty           { color:var(--text-dim); }
[data-theme="light"] .mp-sec-title       { color:var(--text-soft); }
[data-theme="light"] .mp-src-btn         { color:var(--text-soft); }
[data-theme="light"] .mp-plat-btn        { color:var(--text-soft); }
[data-theme="light"] .mp-src-badge       { color:var(--text-soft); }

/* 音源徽标：深色下是浅色品牌色 + 20% 底，浅色下换成深一档的品牌色 + 更淡底 */
[data-theme="light"] .mp-src-badge.src-netease { color:#c0392b; background:rgba(236,65,65,0.13); }
[data-theme="light"] .mp-src-badge.src-qq      { color:#0a7b52; background:rgba(49,194,124,0.15); }
[data-theme="light"] .mp-src-badge.src-kugou   { color:#1565b0; background:rgba(65,152,236,0.15); }
[data-theme="light"] .mp-src-badge.src-spotify { color:#0a7b52; background:rgba(29,185,84,0.15); }
[data-theme="light"] .mp-src-badge.src-deezer  { color:#6420b8; background:rgba(162,56,255,0.13); }
[data-theme="light"] .mp-src-badge.src-youtube { color:#b3202f; background:rgba(255,0,51,0.11); }

/* 状态文字：错误/成功/警告在浅底上要压深 */
[data-theme="light"] .mp-plat-btn.off    { color:#b3202f; }
[data-theme="light"] .mp-import-tip.err  { color:#b3202f; }
[data-theme="light"] .mp-import-tip.ok   { color:#0a7b52; }
[data-theme="light"] .mp-pl-del          { color:#b3202f; }
[data-theme="light"] .mp-admin-ok        { color:#0a7b52; }
[data-theme="light"] .mp-admin-no        { color:var(--gold); }
[data-theme="light"] .mp-s-vip           { color:var(--gold); }

/* 载入页说明文字 */
[data-theme="light"] .loader-text        { color:var(--text-dim); }

/* 删除按钮 hover：深色下用亮红，浅色底上要压深才看得清 */
[data-theme="light"] .btn-delete:hover { background:rgba(192,57,43,0.12); color:#c0392b; }

/* ===== morphicons 全站 SVG 图标 ===== */
morph-icon svg{display:inline-block;width:1em;height:1em;vertical-align:-0.11em}
.btn-icon morph-icon svg{vertical-align:0}
.q-icon morph-icon svg,.breath-badge-icon morph-icon svg,.hero-poem-icon morph-icon svg{display:block}
@media(prefers-reduced-motion:reduce){morph-icon{animation:none!important}}


/* ===== 发帖媒体预览网格 ===== */
#postMediaPreview{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));
    gap:0.5rem;max-width:480px;padding:0.5rem;
    background:var(--glass);border:1px dashed var(--glass-border);border-radius:var(--radius-sm);
}
.pm-thumb{position:relative;width:100%;padding-top:100%;border-radius:8px;overflow:hidden;background:var(--bg-main)}
.pm-thumb img,.pm-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pm-x{
    position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;
    background:rgba(225,112,85,.92);color:#fff;border:1.5px solid var(--bg);
    font-size:0.62rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
    line-height:1;padding:0;z-index:2;
}
.pm-tag{
    position:absolute;left:2px;bottom:2px;font-size:0.6rem;padding:0.1rem 0.35rem;
    background:rgba(11,26,46,.72);color:#a8d4f0;border-radius:5px;z-index:2;
}
.pm-tag-vid{color:#f6c177}

/* ===== 帖子多图网格 ===== */
.post-media-grid,.post-media-grid-3{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:0.35rem;margin-top:0.5rem;max-width:360px;
}
.pmg-cell{
    position:relative;width:100%;padding-top:100%;border-radius:8px;
    overflow:hidden;background:var(--bg-main);cursor:pointer;
    border:1px solid var(--glass-border);
}
.pmg-cell img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform .25s var(--ease-out);
}
.pmg-cell:hover img{transform:scale(1.05)}
@media(max-width:480px){ .post-media-grid,.post-media-grid-3{grid-template-columns:repeat(3,1fr);max-width:100%} }