:root {
--pink: #ff9ecd; --pink-deep: #ff6fb5; --lavender: #c9a7ff; --purple: #9d7bff;
--blue: #7bc4ff; --cream: #fff8fc; --ink: #5a4a6e; --ink-light: #7f6da0;
--glass: rgba(255,255,255,.5); --glass-border: rgba(255,255,255,.6);
--shadow: 0 12px 40px rgba(157,123,255,.18);
color-scheme: light;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
font-family:'Noto Sans SC',sans-serif; color:var(--ink); min-height:100vh; line-height:1.65;
background:#140e2e; overflow-x:hidden;
}
/* 流畅性：固定渐变+星云光晕合并到单一 fixed 层，替代 background-attachment:fixed（后者每帧重绘导致滚动卡顿） */
body::before {
content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(38% 30% at 18% 22%, rgba(255,111,181,.16), transparent 70%),
radial-gradient(42% 34% at 82% 78%, rgba(123,196,255,.13), transparent 70%),
radial-gradient(30% 26% at 65% 12%, rgba(201,167,255,.12), transparent 70%),
linear-gradient(180deg,#140e2e 0%,#2a1c50 45%,#4b2f6e 75%,#7a4a8f 100%);
}
/* 闪烁星空 + 流星雨画布 */
#sky { position:fixed; inset:0; z-index:0; pointer-events:none; contain:paint; }
/* 细滚动条（窄、半透明、圆角，贴合紫粉主题） */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(157,123,255,.32); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:rgba(157,123,255,.55); }
::-webkit-scrollbar-corner { background:transparent; }
/* ===== 顶栏（悬浮液态玻璃胶囊） ===== */
header {
position:sticky; top:10px; z-index:100; width:min(1200px, calc(100% - 20px));
margin:10px auto 0; border-radius:22px;
-webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
background:rgba(255,255,255,.34);
border:1px solid rgba(255,255,255,.55);
box-shadow:0 8px 32px rgba(90,74,110,.22), inset 0 1px 0 rgba(255,255,255,.65);
}
.nav { padding:3px 18px; display:flex; align-items:center; gap:10px; max-width:1200px; margin:0 auto; }
.logo { font-family:'ZCOOL KuaiLe'; font-size:18px; cursor:pointer; display:flex; align-items:center; gap:7px;
background:linear-gradient(90deg,var(--pink-deep),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent;
transition:transform .3s; }
.logo:hover { transform:scale(1.05) rotate(-2deg); }
.logo .paw { font-size:19px; -webkit-text-fill-color:initial; }
.nav-links { margin-left:auto; display:flex; align-items:center; gap:2px; }
/* 修复：nav-auth/user-info 是 span，在 flex 容器内被块化导致内部按钮竖向堆叠 */
#nav-auth, #nav-user-info { display:flex; align-items:center; gap:2px; }
.nav-btn { border:none; background:transparent; font-family:inherit; font-size:12.5px; color:var(--ink);
padding:4px 10px; border-radius:7px; cursor:pointer; transition:background .25s,color .25s,box-shadow .25s; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.nav-btn:hover { background:rgba(255,158,205,.18); color:var(--pink-deep); }
.nav-btn.primary { background:linear-gradient(135deg,var(--pink),var(--lavender)); color:#fff;
box-shadow:0 4px 12px rgba(255,111,181,.3); }
.nav-btn.primary:hover { box-shadow:0 6px 18px rgba(255,111,181,.45); color:#fff; }
.nav-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; cursor:pointer;
border:2px solid #fff; box-shadow:0 2px 8px rgba(157,123,255,.3); transition:transform .25s; }
.nav-avatar:hover { transform:scale(1.12) rotate(5deg); }
.nav-avatar-placeholder { width:28px; height:28px; border-radius:50%; cursor:pointer; display:flex; align-items:center;
justify-content:center; background:linear-gradient(135deg,var(--lavender),var(--blue)); color:#fff; font-size:13px;
border:2px solid #fff; box-shadow:0 2px 8px rgba(157,123,255,.3); transition:transform .25s; }
.nav-avatar-placeholder:hover { transform:scale(1.12) rotate(5deg); }
.nav-user { display:flex; align-items:center; gap:5px; cursor:pointer; padding:3px 8px 3px 3px; border-radius:7px; transition:background .2s; }
.nav-user:hover { background:rgba(255,158,205,.12); }
.nav-user-name { font-size:12.5px; color:var(--ink); font-weight:500; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
main { max-width:1100px; margin:0 auto; padding:30px 24px 80px; position:relative; z-index:1; }
.view { display:none; animation: fadeUp .5s ease; }
.view.active { display:block; }
@keyframes fadeUp { from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:translateY(0)} }
/* ===== 首页 Hero ===== */
.hero { text-align:center; padding:28px 20px 22px; position:relative; }
/* ===== Hero 大星球 ===== */
.hero-planet { position:relative; width:130px; height:110px; margin:0 auto;
animation: bob 3s ease-in-out infinite; filter:drop-shadow(0 10px 20px rgba(157,123,255,.45)); }
.hero-planet .p-body { position:absolute; top:13px; left:23px; width:84px; height:84px; border-radius:50%; z-index:2;
background:radial-gradient(circle at 32% 28%, #ffe0f0 0%, var(--pink) 38%, var(--purple) 82%, #6d4fd0 100%);
box-shadow: inset -12px -14px 24px rgba(90,60,140,.38), inset 8px 10px 18px rgba(255,255,255,.45); }
.hero-planet .p-body::before { content:''; position:absolute; border-radius:50%;
width:14px; height:14px; left:18px; top:44px; background:rgba(255,255,255,.28);
box-shadow: 34px -26px 0 -3px rgba(255,255,255,.22), 26px 14px 0 -5px rgba(109,79,208,.3); }
.hero-planet .p-ring { position:absolute; top:50%; left:50%; width:128px; height:40px; border-radius:50%;
border:7px solid rgba(201,167,255,.9); transform:translate(-50%,-50%) rotate(-16deg); }
.hero-planet .p-ring.back { z-index:1; box-shadow:0 0 14px rgba(201,167,255,.55); }
.hero-planet .p-ring.front { z-index:3; clip-path:inset(52% 0 0 0); border-color:rgba(255,220,240,.95); }
.hero-planet .p-moon { position:absolute; width:16px; height:16px; border-radius:50%; z-index:4;
right:6px; top:8px; background:radial-gradient(circle at 35% 30%, #fff, #ffe28a 60%, #ffb84d);
box-shadow:0 0 12px 3px rgba(255,226,138,.75); animation: moonTwinkle 2.4s ease-in-out infinite; }
@keyframes moonTwinkle { 0%,100%{transform:scale(.85); opacity:.8} 50%{transform:scale(1.1); opacity:1} }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-14px) rotate(4deg)} }
.hero h1 { font-family:'ZCOOL KuaiLe'; font-size:40px; margin:10px 0 8px;
background:linear-gradient(90deg,#ff6fb5,#9d7bff,#7bc4ff); -webkit-background-clip:text; background-clip:text; color:transparent;
letter-spacing:2px; }
.hero p { color:rgba(255,255,255,.78); font-size:15.5px; letter-spacing:1px; }
.hero-actions { margin-top:16px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn { border:none; font-family:inherit; font-size:15px; padding:12px 26px; border-radius:999px; cursor:pointer;
transition:transform .25s,box-shadow .25s,opacity .25s; display:inline-flex; align-items:center; gap:8px; }
.btn-primary { background:linear-gradient(135deg,var(--pink-deep),var(--purple)); color:#fff; box-shadow:0 8px 22px rgba(255,111,181,.4); }
.btn-primary:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 12px 30px rgba(255,111,181,.55); }
.btn-ghost { background:var(--glass); border:1.5px solid var(--glass-border); color:var(--ink); }
.btn-ghost:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.btn-danger { background:linear-gradient(135deg,#ff7b7b,#ff5a8a); color:#fff; }
.btn-sm { padding:7px 15px; font-size:13px; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none !important; }
.section-title { font-family:'ZCOOL KuaiLe'; font-size:26px; margin:28px 0 18px; display:flex; align-items:center; gap:10px; color:#f4ecff; }
.section-title::after { content:''; flex:1; height:2px; border-radius:2px;
background:linear-gradient(90deg,rgba(255,158,205,.55),transparent); }
/* ===== 星球卡片 ===== */
.planet-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
.planet-card { background:var(--glass); border:1.5px solid var(--glass-border);
border-radius:28px; padding:26px; cursor:pointer; transition:transform .35s cubic-bezier(.2,.9,.3,1.3),box-shadow .35s cubic-bezier(.2,.9,.3,1.3);
position:relative; overflow:hidden; box-shadow:0 6px 20px rgba(157,123,255,.1); }
.planet-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 18px 44px rgba(255,111,181,.28); }
/* 精选轻徽章：左上角小标签，一眼看懂上榜理由 */
.pick-badge{position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;color:#fff;background:linear-gradient(135deg,#9d7bff,#ff6fb5);box-shadow:0 4px 12px rgba(157,123,255,.4);z-index:1}
.planet-card::before { content:''; position:absolute; top:-40px; right:-40px; width:130px; height:130px;
border-radius:50%; background:var(--pc,linear-gradient(135deg,var(--pink),var(--lavender))); opacity:.22; transition:transform .35s,opacity .35s; }
.planet-card:hover::before { transform:scale(1.5); opacity:.3; }
.planet-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:32px; background:var(--pc,linear-gradient(135deg,var(--pink),var(--lavender)));
box-shadow:0 8px 20px rgba(157,123,255,.35), inset 0 -6px 12px rgba(0,0,0,.08);
animation: planetSpin 8s ease-in-out infinite; }
@keyframes planetSpin { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(6deg) translateY(-4px)} }
.planet-card h3 { font-family:'ZCOOL KuaiLe'; font-size:22px; margin:14px 0 6px; }
.planet-card .desc { font-size:14px; color:var(--ink-light); line-height:1.6; min-height:22px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.planet-meta { margin-top:14px; display:flex; align-items:center; gap:12px; font-size:12.5px; color:var(--ink-light); }
.planet-meta .owner { display:flex; align-items:center; gap:5px; }
.badge-count { margin-left:auto; background:rgba(157,123,255,.14); color:var(--purple);
padding:3px 11px; border-radius:999px; font-weight:500; }
.empty { text-align:center; padding:60px 20px; color:rgba(255,255,255,.62); }
.empty .big { font-size:56px; display:block; margin-bottom:12px; position:relative; animation:emptyFloat 3.2s ease-in-out infinite; }
/* UI6.0 空态插画化：图标悬浮 + 底部光环底座，全站 28 处空态统一观感 */
.empty .big::after { content:''; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
width:64px; height:10px; border-radius:50%; background:radial-gradient(ellipse, rgba(157,123,255,.4), transparent 70%); }
@keyframes emptyFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
/* ===== 文章列表 / 详情 ===== */
.post-card { background:var(--glass); border:1.5px solid var(--glass-border);
border-radius:24px; padding:22px 26px; margin-bottom:16px; cursor:pointer; transition:transform .3s,box-shadow .3s,border-color .3s;
box-shadow:0 4px 14px rgba(157,123,255,.08); }
.post-card:hover { transform:translateX(6px); box-shadow:var(--shadow); border-color:rgba(255,158,205,.6); }
/* 动态渲染卡片逐项淡入上浮（配合 JS 内联 animation-delay 实现错落） */
.planet-card, .post-card { animation: fadeUp .5s ease backwards; }
/* ===== 文章作者头像 ===== */
.post-avatar, .post-detail-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; }
.post-avatar-ph, .post-detail-avatar-ph { width:34px; height:34px; border-radius:50%; flex:none;
display:inline-flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,var(--lavender),var(--blue)); color:#fff; font-size:14px; font-weight:600; }
.post-head { display:flex; align-items:flex-start; gap:12px; }
.post-head-main { flex:1; min-width:0; }
.post-detail-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:2px; }
.post-detail-avatar, .post-detail-avatar-ph { width:46px; height:46px; font-size:17px; }
/* ===== 星球分组标题 ===== */
.planet-group-title { font-family:'ZCOOL KuaiLe'; font-size:20px; margin:26px 0 14px;
display:flex; align-items:center; gap:8px; color:#f4ecff; }
.planet-group-title::after { content:''; flex:1; height:1.5px; border-radius:2px;
background:linear-gradient(90deg,rgba(255,158,205,.4),transparent); }
/* ===== 积分榜 ===== */
.leaderboard { max-width:520px; margin:4px auto 26px; background:rgba(255,255,255,.5);
border:1px solid rgba(157,123,255,.18); border-radius:22px; padding:16px 22px;
box-shadow:0 4px 14px rgba(157,123,255,.08); }
.leaderboard h3 { font-family:'ZCOOL KuaiLe'; font-size:19px; margin-bottom:10px;
display:flex; align-items:center; gap:8px; color:#f4ecff; }
.lb-row { display:flex; align-items:center; gap:10px; padding:7px 4px;
border-bottom:1px dashed rgba(157,123,255,.15); }
.lb-row:last-child { border-bottom:none; }
.lb-rank { width:26px; height:26px; border-radius:50%; flex:none;
display:inline-flex; align-items:center; justify-content:center;
font-size:13px; font-weight:600; background:rgba(157,123,255,.12); color:var(--purple); }
.lb-rank.lb-1 { background:linear-gradient(135deg,#f7c948,#e8a020); color:#fff; }
.lb-rank.lb-2 { background:linear-gradient(135deg,#d5dde5,#9aa8b8); color:#fff; }
.lb-rank.lb-3 { background:linear-gradient(135deg,#e8a87c,#c97b4a); color:#fff; }
.lb-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; font-weight:600; font-size:14px; }
.lb-score { flex:none; font-size:13px; color:var(--purple); font-weight:700; }
.user-tag { display:inline-block; padding:3px 12px; border-radius:999px; font-size:12px; color:var(--pink-deep);
background:linear-gradient(135deg,rgba(255,158,205,.16),rgba(157,123,255,.16)); border:1px solid rgba(255,158,205,.4);
box-shadow:0 2px 8px rgba(255,158,205,.12); transition:transform .2s, box-shadow .2s; cursor:default; }
.user-tag:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(255,158,205,.3); }
.lb-empty { color:var(--ink-light); font-size:13px; padding:6px 0; text-align:center; }
.post-card h3 { font-size:19px; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.post-card h3:hover { color:var(--pink-deep); }
.post-meta { font-size:13px; color:var(--ink-light); display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.paper { background:var(--glass); border:1.5px solid var(--glass-border);
border-radius:26px; padding:44px 48px; box-shadow:var(--shadow); }
.paper h1 { font-family:'ZCOOL KuaiLe'; font-size:34px; margin-bottom:14px; }
.paper .content { margin-top:26px; font-size:16px; line-height:2; word-break:break-word; }
/* Markdown 渲染样式 */
.md-body h1,.md-body h2,.md-body h3,.md-body h4 { font-family:'ZCOOL KuaiLe'; margin:22px 0 10px; line-height:1.5; }
.md-body h1 { font-size:26px; border-bottom:2px solid rgba(255,158,205,.35); padding-bottom:8px; }
.md-body h2 { font-size:22px; } .md-body h3 { font-size:19px; }
.md-body p { margin:10px 0; }
/* 需求：文章内链接标蓝，点击可跳转 */
.md-body a { color:#2e7cd6; text-decoration:none; border-bottom:1px dashed rgba(46,124,214,.55); word-break:break-all; }
.md-body a:hover { color:#1a5cb8; }
.md-body code { background:rgba(157,123,255,.13); color:#c0392b; padding:2px 7px; border-radius:6px;
font-size:14px; font-family:Consolas,Monaco,monospace; }
.md-body pre { background:#3d3252; color:#f8f0ff; padding:16px 18px; border-radius:14px; overflow-x:auto;
margin:14px 0; box-shadow:inset 0 2px 8px rgba(0,0,0,.25); }
.md-body pre code { background:none; color:inherit; padding:0; font-size:13.5px; line-height:1.7; }
.md-body blockquote { border-left:4px solid var(--pink); background:rgba(255,158,205,.1);
padding:10px 18px; margin:14px 0; border-radius:0 12px 12px 0; color:var(--ink-light); }
.md-body ul,.md-body ol { padding-left:26px; margin:10px 0; }
.md-body li { margin:5px 0; }
.md-body img { max-width:100%; border-radius:14px; box-shadow:0 6px 18px rgba(157,123,255,.2); transition:transform .3s,box-shadow .3s; }
.md-body img:hover { transform:scale(1.015); box-shadow:0 10px 28px rgba(157,123,255,.32); }
/* 修复：Markdown 表格此前无任何边框/内边距，内容挤成一团；现补齐完整表格样式 */
.md-body table { display:block; max-width:100%; overflow-x:auto; margin:16px 0;
border-collapse:separate; border-spacing:0; width:auto; min-width:50%;
background:rgba(255,255,255,.7); border:1.5px solid rgba(157,123,255,.28);
border-radius:14px; box-shadow:0 4px 14px rgba(157,123,255,.1); }
.md-body th { text-align:left; background:linear-gradient(90deg,rgba(157,123,255,.16),rgba(255,158,205,.12));
color:var(--purple); font-weight:600; white-space:nowrap; }
.md-body th, .md-body td { padding:10px 14px; border-bottom:1px solid rgba(157,123,255,.15); }
.md-body tr:last-child td { border-bottom:none; }
.md-body tbody tr:nth-child(even) td { background:rgba(157,123,255,.05); }
.md-body tbody tr:hover td { background:rgba(255,158,205,.09); }
.md-body hr { border:none; height:2px; margin:22px 0; border-radius:2px;
background:linear-gradient(90deg,var(--pink),var(--lavender),transparent); }
.md-body input[type=checkbox] { margin-right:6px; accent-color:var(--pink-deep); }
.back-link { display:inline-flex; align-items:center; gap:6px; color:#d3bfff; cursor:pointer;
font-size:14px; margin-bottom:18px; transition:gap .2s; }
.back-link:hover { gap:10px; }
.planet-hero { text-align:center; padding:30px 0 10px; }
.planet-hero .planet-icon { width:90px; height:90px; font-size:46px; margin:0 auto; }
.planet-hero h1 { font-family:'ZCOOL KuaiLe'; font-size:36px; margin:14px 0 6px; color:#fff; }
.planet-hero p { color:rgba(255,255,255,.75); }
.perm-tag { display:inline-block; font-size:12.5px; background:rgba(255,255,255,.16); color:#ffe9f6;
padding:4px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.25); }
/* ===== 弹窗 ===== */
.modal-mask { position:fixed; inset:0; background:rgba(40,28,66,.42); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
#modal-post { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
body:has(#modal-post.show) header, body:has(#modal-post.show) main { visibility:hidden; }
.modal-mask.show { display:flex; animation:fadeIn .25s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal { background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-radius:30px; padding:34px 36px;
width:100%; max-width:440px; max-height:88vh; overflow-y:auto; scroll-behavior:smooth; box-shadow:0 24px 70px rgba(90,74,110,.35);
border:1.5px solid #fff; animation:popIn .35s cubic-bezier(.2,.9,.3,1.3); position:relative; }
.modal.wide { max-width:640px; }
@keyframes popIn { from{opacity:0; transform:scale(.85) translateY(30px)} to{opacity:1; transform:scale(1) translateY(0)} }
.modal h2 { font-family:'ZCOOL KuaiLe'; font-size:26px; margin-bottom:20px; text-align:center; }
.modal-close { position:absolute; top:16px; right:18px; border:none; background:rgba(157,123,255,.12);
width:32px; height:32px; border-radius:50%; cursor:pointer; color:var(--ink); font-size:14px; transition:background .2s,color .2s,transform .2s; }
.modal-close:hover { background:var(--pink); color:#fff; transform:rotate(90deg); }
.tabs { display:flex; gap:8px; margin-bottom:22px; background:rgba(157,123,255,.1); padding:5px; border-radius:999px; }
.tab { flex:1; text-align:center; padding:9px; border-radius:999px; cursor:pointer; font-size:14px;
transition:background .25s,color .25s,box-shadow .25s; color:var(--ink-light); border:none; background:transparent; font-family:inherit; }
.tab.active { background:linear-gradient(135deg,var(--pink),var(--lavender)); color:#fff; box-shadow:0 4px 12px rgba(255,111,181,.35); }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13.5px; margin-bottom:7px; color:var(--ink); font-weight:500; }
/* 修复：number 输入框（封禁时长等）此前完全没吃到输入框样式 */
.field input[type=text], .field input[type=password], .field input[type=number], .field textarea, .field select {
width:100%; padding:12px 16px; border-radius:14px; border:1.5px solid rgba(255,255,255,.55);
background:rgba(255,255,255,.42); font-family:inherit; font-size:14.5px; color:var(--ink);
outline:none; transition:border-color .25s,box-shadow .25s,background .25s; }
.field input:focus, .field textarea:focus, .field select:focus {
border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,158,205,.18); }
/* 复选框统一主题色（封禁弹窗 / AI 管理员开关） */
input[type=checkbox] { accent-color:var(--pink-deep); }
.field textarea { min-height:150px; resize:vertical; line-height:1.8; }
.gender-group { display:flex; gap:10px; }
.gender-opt { flex:1; text-align:center; padding:10px; border-radius:14px; border:1.5px solid rgba(255,255,255,.5);
cursor:pointer; font-size:14px; transition:transform .2s,border-color .2s,background .2s,color .2s; background:rgba(255,255,255,.38); }
.gender-opt:hover { transform:translateY(-2px); }
.gender-opt.sel { border-color:var(--pink); background:rgba(255,158,205,.18); color:var(--pink-deep); font-weight:500; }
.form-error { color:#ff5a8a; font-size:13px; margin:-6px 0 12px; min-height:18px; text-align:center; }
.w-full { width:100%; justify-content:center; }
/* ===== 个人中心 / 管理后台 ===== */
.profile-card { background:var(--glass); border:1.5px solid var(--glass-border);
border-radius:26px; padding:36px; box-shadow:var(--shadow); margin-bottom:24px; }
.profile-head { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.big-avatar { width:110px; height:110px; border-radius:50%; object-fit:cover; border:4px solid #fff;
box-shadow:0 10px 26px rgba(157,123,255,.35); }
.big-avatar-placeholder { width:110px; height:110px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:46px; color:#fff; background:linear-gradient(135deg,var(--lavender),var(--blue));
border:4px solid #fff; box-shadow:0 10px 26px rgba(157,123,255,.35); }
.avatar-upload { position:relative; display:inline-block; }
.avatar-edit-btn { position:absolute; bottom:2px; right:2px; width:34px; height:34px; border-radius:50%;
background:linear-gradient(135deg,var(--pink-deep),var(--purple)); color:#fff; border:2.5px solid #fff;
cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.avatar-edit-btn:hover { transform:scale(1.15); }
.role-tag { display:inline-block; font-size:12px; padding:3px 12px; border-radius:999px; margin-left:8px; vertical-align:middle; }
.role-user { background:rgba(123,196,255,.18); color:#4aa3df; border:1px solid rgba(123,196,255,.35); }
.role-admin { background:linear-gradient(135deg,rgba(255,184,120,.26),rgba(255,158,205,.32)); color:#e8932c; border:1px solid rgba(255,200,120,.45); }
.role-super_admin { background:linear-gradient(135deg,#2a1f4d,#3a2360); color:#ffd98a; border:1px solid rgba(255,217,138,.6); text-shadow:0 0 8px rgba(255,217,138,.65); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; padding:12px 14px; color:var(--ink-light); font-weight:500; font-size:13px;
border-bottom:2px solid rgba(157,123,255,.2); }
td { padding:12px 14px; border-bottom:1px solid rgba(157,123,255,.12); vertical-align:middle; }
tr:hover td { background:rgba(255,158,205,.07); }
.mini-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid #fff;
box-shadow:0 2px 6px rgba(157,123,255,.3); }
.mini-avatar-ph { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,var(--lavender),var(--blue)); color:#fff; font-size:14px; border:2px solid #fff; }
/* ===== 浮窗公告 ===== */
.announce-btn { position:fixed; right:26px; bottom:26px; z-index:150; width:52px; height:52px; border-radius:50%;
border:2.5px solid #fff; background:linear-gradient(135deg,var(--pink-deep),var(--purple)); color:#fff; font-size:22px;
cursor:pointer; box-shadow:0 8px 22px rgba(255,111,181,.45); display:none; align-items:center; justify-content:center;
transition:transform .25s, box-shadow .25s; }
.announce-btn:hover { transform:scale(1.12) rotate(-6deg); box-shadow:0 12px 30px rgba(255,111,181,.6); }
/* 修复：bob 动画原先挂在按钮上占用了 transform，导致 :hover 放大永远不生效；现移到内部图标 */
.announce-btn i { animation:bob 3s ease-in-out infinite; display:inline-block; }
.announce-dot { position:absolute; top:1px; right:1px; width:13px; height:13px; border-radius:50%;
background:#ff5a5a; border:2px solid #fff; display:none; animation: moonTwinkle 1.6s ease-in-out infinite; }
.announce-body { font-size:14px; line-height:1.8; color:var(--ink); white-space:pre-wrap;
word-break:break-word; max-height:40vh; overflow-y:auto; scroll-behavior:smooth; }
.announce-modal { max-width:480px; padding:30px 32px; }
.announce-footer { display:flex; justify-content:flex-end; margin-top:20px; }
/* toast */
#toast { position:fixed; top:50px; left:50%; transform:translateX(-50%) translateY(-20px); z-index:300;
background:rgba(90,74,110,.92); color:#fff; padding:12px 26px; border-radius:999px; font-size:14.5px;
opacity:0; pointer-events:none; transition:opacity .35s,transform .35s; box-shadow:0 10px 30px rgba(0,0,0,.25); }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.err { background:linear-gradient(135deg,#ff7b7b,#ff5a8a); }
#toast.ok { background:linear-gradient(135deg,#5ad6a0,#4bb8e6); }
/* 发布文章 loading 遮罩 */
.post-loading-mask { position:fixed; inset:0; z-index:500; background:rgba(90,74,110,.45);
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; }
.post-loading-mask.show { display:flex; animation:fadeIn .25s; }
.post-loading-inner { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.94);
padding:18px 30px; border-radius:999px; font-size:15px; color:var(--ink);
box-shadow:0 16px 44px rgba(90,74,110,.35); }
.post-loading-inner i { color:var(--pink-deep); font-size:18px; }
/* ===== 文章互动（赞/收藏/精华） ===== */
.post-actions { display:flex; align-items:center; gap:12px; margin-top:32px; padding-top:20px;
border-top:2px dashed rgba(157,123,255,.25); flex-wrap:wrap; }
.act-btn { border:1.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.4);
-webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4); border-radius:999px;
padding:9px 20px; font-size:14px; cursor:pointer; font-family:inherit; color:var(--ink);
display:inline-flex; align-items:center; gap:7px; transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s; }
.act-btn:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(157,123,255,.25); }
.act-btn.on { background:linear-gradient(135deg,var(--pink),var(--lavender)); color:#fff; border-color:transparent; }
.essence-tag { background:linear-gradient(135deg,#ffd166,#ffb84d); color:#8a5200;
padding:6px 16px; border-radius:999px; font-size:13px; font-weight:500;
box-shadow:0 4px 12px rgba(255,184,77,.4); }
/* ===== 评论区 ===== */
.comments { margin-top:30px; }
.comment-item { display:flex; gap:12px; padding:14px 0; border-bottom:1px dashed rgba(157,123,255,.2); }
.comment-body { flex:1; min-width:0; }
.comment-head { font-size:13px; color:var(--ink-light); display:flex; gap:10px; align-items:center; }
.comment-head b { color:var(--ink); font-size:14px; }
.comment-text { margin-top:5px; font-size:14.5px; line-height:1.7; word-break:break-word; white-space:pre-wrap; }
.comment-del { border:none; background:none; color:var(--ink-light); cursor:pointer; font-size:12px; margin-left:auto; }
.comment-del:hover { color:#ff5a8a; }
.comment-box { display:flex; gap:10px; margin-top:18px; align-items:flex-start; }
.comment-box textarea { flex:1; min-height:48px; max-height:120px; padding:12px 16px; border-radius:14px;
border:1.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.42); font-family:inherit;
font-size:14px; resize:vertical; outline:none; color:var(--ink); }
.comment-box textarea:focus { border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,158,205,.18); }
.loading { text-align:center; padding:50px; color:var(--ink-light); font-size:15px; }
.loading i { animation:spin 1s linear infinite; margin-right:8px; }
@keyframes spin { to{transform:rotate(360deg)} }
/* ===== 骨架屏（列表加载占位，比转圈更接近最终形态） ===== */
.skeleton-card { border-radius:22px; padding:18px 20px; margin-bottom:14px; cursor:default;
background:rgba(255,255,255,.35); border:1.5px solid rgba(255,255,255,.5);
box-shadow:var(--shadow); overflow:hidden; }
.skeleton-card::after { content:''; display:block; clear:both; }
.sk-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.sk-avatar { width:44px; height:44px; border-radius:50%; flex:none; }
.sk-line { height:13px; border-radius:7px; margin-bottom:10px; }
.sk-line.w40 { width:40%; height:17px; }
.sk-line.w88 { width:88%; }
.sk-line.w62 { width:62%; margin-bottom:0; }
.sk-line, .sk-avatar { background:linear-gradient(90deg, rgba(122,74,143,.10) 25%, rgba(122,74,143,.22) 50%, rgba(122,74,143,.10) 75%);
background-size:200% 100%; animation:sk-shimmer 1.3s ease-in-out infinite; }
@keyframes sk-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
footer { text-align:center; padding:26px; color:rgba(255,255,255,.5); font-size:13px; position:relative; z-index:1; }
/* ===== 人机验证闸门 ===== */
#human-gate { position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center;
background:linear-gradient(180deg,#140e2e 0%,#2a1c50 45%,#4b2f6e 75%,#7a4a8f 100%);
transition:opacity .5s; }
#human-gate.hide { opacity:0; visibility:hidden; pointer-events:none; }
.gate-card { text-align:center; padding:44px 52px; border-radius:28px; background:var(--glass);
border:1.5px solid var(--glass-border); box-shadow:var(--shadow); -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
animation:popIn .35s ease; max-width:90vw; }
.gate-card .gate-paw { font-size:52px; display:inline-block; animation:bob 2.5s ease-in-out infinite; }
.gate-card h2 { font-family:'ZCOOL KuaiLe'; font-size:26px; margin:14px 0 6px;
background:linear-gradient(90deg,var(--pink-deep),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gate-card p { color:var(--ink-light); font-size:14px; margin-bottom:22px; }
#gate-btn { min-width:230px; position:relative; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:none; }
#gate-btn::after { content:''; position:absolute; left:0; bottom:0; height:4px; width:0;
background:rgba(255,255,255,.75); transition:width .2s; }
#gate-btn.holding::after { width:100%; transition:width 1.2s linear; }
#gate-hint { font-size:13px; margin-top:12px; min-height:18px; }
#gate-hint.err { color:#e5537a; animation:shake .4s; }
#gate-hint.ok { color:#3f9e63; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.post-editor-full { position:fixed; inset:0; z-index:400; background:transparent; display:flex; flex-direction:column; animation:fadeIn .2s; }
.post-editor-top { flex:none; display:flex; align-items:center; gap:14px; padding:12px 20px; background:var(--glass); -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5); border-bottom:1.5px solid var(--glass-border); position:relative; }
.post-editor-top .modal-close { position:static; flex:none; }
.post-editor-title { font-family:'ZCOOL KuaiLe'; font-size:19px; color:#f4ecff; white-space:nowrap; }
.post-editor-top .tabs { margin:0; flex:none; }
.post-draft-hint { font-size:12px; color:#d8a33c; white-space:nowrap; }
.post-editor-actions { margin-left:auto; display:flex; gap:8px; align-items:center; flex:none; }
.post-editor-body { flex:1; min-height:0; width:100%; max-width:1920px; margin:0 auto; padding:18px 28px 56px; display:flex; flex-direction:column; overflow-y:auto; scroll-behavior:smooth; box-sizing:border-box; }
.post-title-input { font-size:20px; font-weight:600; padding:12px 14px; border:1.5px solid var(--glass-border); border-radius:14px; background:rgba(255,255,255,.45); color:var(--ink); width:100%; box-sizing:border-box; outline:none; }
.post-title-input:focus { border-color:var(--pink); box-shadow:0 0 0 4px rgba(255,158,205,.18); }
.post-editor-body #post-editor-wrap { flex:1; display:flex; flex-direction:column; min-height:0; margin-top:14px; }
.post-editor-body #post-editor-wrap label { flex:none; }
.post-editor-body #post-content { flex:1; min-height:0; resize:none; font-size:15px; }
.post-editor-body #post-preview { flex:1; min-height:0; max-height:none; margin-bottom:0; }
.ban-active { color:#e5537a; font-weight:600; }
.ban-expired { color:var(--ink-light); font-size:12px; }
@media (max-width:640px) {
.post-editor-top { flex-wrap:wrap; gap:8px; padding:8px 10px; }
.post-editor-title { font-size:15px; }
.post-editor-body { padding:12px 12px 48px; }
.post-draft-hint { display:none !important; }
}
@media (max-width:640px) {
.hero h1 { font-size:36px; } .paper { padding:28px 22px; }
.nav { padding:3px 10px; gap:6px; } .logo { font-size:15px; }
.nav-btn { padding:3px 7px; font-size:12px; gap:3px; }
.nav-user-name { max-width:48px; font-size:12px; }
.nav-avatar, .nav-avatar-placeholder { width:26px; height:26px; }
main { padding:20px 14px 60px; }
}
@media (max-width:640px) {
/* 移动端背景已由 body::before 固定层承担，无需再处理 attachment */
}
/* ============================================================
UI 视觉美化（纯 CSS 增强；不改变功能逻辑/DOM id/事件/布局结构）
============================================================ */
/* 1) 统一配色主题：液态玻璃——更透的底、折射感边框、聚焦光圈 */
:root {
--glass: rgba(255,255,255,.5);
--glass-border: rgba(255,255,255,.6);
--shadow: 0 16px 46px rgba(157,123,255,.24);
--ring: 0 0 0 4px rgba(255,158,205,.15);
}
body { letter-spacing:.02em; }
/* 2) 卡片质感：液态玻璃——半透明渐变底 + 折射描边 + 背景模糊提饱和 + 顶部高光 */
.planet-card, .post-card, .profile-card, .paper, .gate-card, .leaderboard {
position:relative; /* ::after 高光线依赖定位上下文，缺失会导致白线漂移到页面顶端 */
border:1.5px solid transparent;
background:
linear-gradient(155deg, rgba(255,255,255,.52), rgba(255,255,255,.2)) padding-box,
linear-gradient(135deg, rgba(255,255,255,.85), rgba(201,167,255,.35) 45%, rgba(255,158,205,.45)) border-box;
-webkit-backdrop-filter: blur(14px) saturate(1.55); backdrop-filter: blur(14px) saturate(1.55);
box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -14px 28px rgba(255,255,255,.05);
}
.planet-card::after, .post-card::after, .profile-card::after, .paper::after, .gate-card::after, .leaderboard::after {
content:''; position:absolute; top:0; left:20px; right:20px; height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
border-radius:999px; pointer-events:none;
}
.modal {
border:1.5px solid transparent;
background:
linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.48)) padding-box,
linear-gradient(135deg, rgba(255,255,255,.9), rgba(201,167,255,.45)) border-box;
-webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
box-shadow:0 26px 76px rgba(90,74,110,.42), inset 0 1px 0 rgba(255,255,255,.75);
}
/* 3) 按钮 hover 动效：光扫 + 按压反馈 + 光晕（排除 #gate-btn，避免破坏长按进度条） */
.btn:not(#gate-btn) { position:relative; overflow:hidden; }
.btn:not(#gate-btn)::after {
content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);
transform:translateX(-130%); transition:transform .6s ease;
}
.btn:not(#gate-btn):hover::after { transform:translateX(130%); }
.btn:not(#gate-btn):active { transform:translateY(1px) scale(.99); }
.btn-primary:hover { box-shadow:0 14px 34px rgba(255,111,181,.55); filter:saturate(1.08) brightness(1.03); }
.btn-ghost:hover { background:rgba(255,255,255,.88); border-color:var(--pink); color:var(--pink-deep); box-shadow:var(--shadow); }
.btn-danger:hover { box-shadow:0 10px 26px rgba(255,90,138,.4); }
/* 4) 输入框 focus 光圈统一 */
.field input[type=text]:focus, .field input[type=password]:focus, .field textarea:focus, .field select:focus,
.comment-box textarea:focus, .post-title-input:focus, .post-editor-body textarea:focus, .post-editor-body input[type=text]:focus {
border-color:var(--pink); box-shadow:var(--ring), 0 6px 18px rgba(255,158,205,.14);
}
/* 5) 排版与间距微调 */
.hero h1 { letter-spacing:3px; }
.hero p { letter-spacing:1.5px; }
.section-title { letter-spacing:1px; }
.planet-card h3, .post-card h3 { letter-spacing:.5px; }
.planet-group-title { letter-spacing:.5px; }
/* 6) 顶栏 / 导航（顶栏已在基础规则中改为悬浮液态玻璃胶囊，这里不再覆盖） */
.nav-btn:hover { transform:translateY(-1px); }
.nav-user { transition:background .2s, box-shadow .2s; }
.nav-user:hover { box-shadow:0 2px 10px rgba(255,158,205,.25); }
/* 7) 星球卡片 hover：光斑 + 图标辉光 */
.planet-card:hover { transform:translateY(-10px) scale(1.02); box-shadow:0 22px 52px rgba(255,111,181,.3), inset 0 1px 0 rgba(255,255,255,.7); }
.planet-icon { transition:filter .4s ease; }
.planet-card:hover .planet-icon { filter:drop-shadow(0 0 14px rgba(255,158,205,.65)); }
/* 8) 文章卡片 hover：左侧渐变指示条 */
.post-card { position:relative; }
.post-card::before {
content:''; position:absolute; left:0; top:16px; bottom:16px; width:4px; border-radius:999px;
background:linear-gradient(180deg,var(--pink),var(--purple));
opacity:0; transition:opacity .3s;
}
.post-card:hover::before { opacity:1; }
.post-card:hover { box-shadow:0 14px 34px rgba(157,123,255,.18); border-color:rgba(255,158,205,.65); }
/* 9) 个人主页 / 资料 */
.big-avatar, .big-avatar-placeholder {
box-shadow:0 0 0 4px rgba(255,255,255,.95), 0 14px 32px rgba(157,123,255,.42);
}
.user-tag {
background:rgba(255,158,205,.14); border:1px solid rgba(255,158,205,.38);
box-shadow:0 2px 10px rgba(255,158,205,.14);
}
.role-tag { box-shadow:0 2px 8px rgba(157,123,255,.14); }
/* ===== 角色昵称 · 极光 / 金色 ===== */
.nm-aurora { background:linear-gradient(90deg,#8ef7ff,#b28eff,#ff8ed8,#8ef7ff); background-size:300% 100%;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
animation:auroraFlow 4s linear infinite; font-weight:600;
filter:drop-shadow(0 0 5px rgba(142,247,255,.7)) drop-shadow(0 0 11px rgba(255,142,216,.5)); }
@keyframes auroraFlow { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
.nm-gold { background:linear-gradient(90deg,#f8d66d,#e8a020,#f7c948,#ffd98a); background-size:200% 100%;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
font-weight:600; filter:drop-shadow(0 0 4px rgba(255,200,80,.6)); }
/* ===== 角色头像框 · 霓虹 / 金色 ===== */
.av-aurora { box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 10px 2px rgba(142,247,255,.75),0 0 20px 4px rgba(178,142,255,.65),0 0 32px 7px rgba(255,142,216,.55); }
.av-gold { box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 10px 2px rgba(255,200,80,.75),0 0 22px 5px rgba(232,160,32,.55); }
.avatar-edit-btn:hover { box-shadow:0 6px 16px rgba(255,111,181,.5); }
/* 10) 管理后台表格 */
th {
background:linear-gradient(90deg,rgba(157,123,255,.14),rgba(255,158,205,.1));
letter-spacing:.6px;
}
td { transition:background .2s; }
tr:hover td { background:rgba(255,158,205,.1); }
/* 11) 组件细节 */
.tab.active { box-shadow:0 6px 18px rgba(255,111,181,.42); }
.lb-row { transition:background .2s, transform .2s; }
.lb-row:hover { background:rgba(255,255,255,.4); transform:translateX(4px); }
.back-link { color:#e9d9ff; }
#toast { -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16); box-shadow:0 16px 44px rgba(90,74,110,.42); }
/* ============================================================
UI 美化第三阶段（纯 CSS 增强；不改变功能逻辑/DOM/事件）
============================================================ */
/* 1) 文本选区配色贴合主题 */
::selection { background:rgba(255,111,181,.35); color:#fff; }
/* 2) 星空下的极光光晕已合并进顶部 body::before 固定背景层（减少一层全屏元素，滚动更流畅） */
/* 3) Hero 标题流光扫过 */
.hero h1 {
background:linear-gradient(90deg,#ff6fb5,#9d7bff,#7bc4ff,#c9a7ff,#ff6fb5);
background-size:220% 100%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
animation:heroShimmer 7s linear infinite;
}
@keyframes heroShimmer { from{background-position:0% 0} to{background-position:220% 0} }
.hero p { text-shadow:0 2px 12px rgba(20,14,46,.55); }
.hero-planet { filter:drop-shadow(0 14px 28px rgba(157,123,255,.5)) drop-shadow(0 0 34px rgba(255,111,181,.28)); }
/* 4) 键盘可达性：统一聚焦轮廓（表单控件已有 focus 光圈，排除在外） */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline:2px solid rgba(255,158,205,.85); outline-offset:2px; border-radius:6px; }
.tab:focus-visible, .nav-btn:focus-visible, .btn:focus-visible, .act-btn:focus-visible { outline-offset:1px; }
/* 5) 空状态 / 加载态打磨 */
.empty { color:rgba(255,255,255,.72); }
.empty .big { filter:drop-shadow(0 6px 16px rgba(157,123,255,.45)); }
.loading { color:#cbb8ea; }
.loading i { color:var(--pink); }
/* 6) 导航主按钮动效 */
.nav-btn.primary { transition:transform .25s, box-shadow .25s; }
.nav-btn.primary:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(255,111,181,.5); }
/* 7) 卡片交互细节 */
.planet-card:active, .post-card:active { transform:translateY(-2px) scale(.995); }
.act-btn:active { transform:translateY(0) scale(.97); }
/* 8) 正文排版细节 */
.md-body a { border-bottom-color:rgba(46,124,214,.45); transition:color .2s,border-color .2s; }
.md-body a:hover { border-bottom-style:solid; border-bottom-color:#1a5cb8; }
.md-body blockquote { border-radius:4px 14px 14px 4px; }
.paper h1 { letter-spacing:1px; }
.comment-text { color:var(--ink); }
/* 9) 表格可读性 */
th { border-bottom:2px solid rgba(157,123,255,.28); }
td { color:var(--ink); }
/* 10) 页脚呼吸感 */
footer { letter-spacing:.5px; opacity:.9; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior:auto; }
*, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
#gate-btn::after { transition-duration:1.2s !important; }
.hero-planet, .announce-btn, .announce-btn i, .announce-dot, .planet-icon, .gate-paw, .notice-dot { animation:none !important; }
.planet-card, .post-card { animation:none !important; }
.hero h1, .empty .big, #gate-btn.holding, #view-messages .fa-bell, footer .fa-heart { animation:none !important; }
}
/* ============================================================
UI 美化第四阶段（纯 CSS 增强；不改变功能逻辑/DOM id/事件）
============================================================ */
/* 1) 顶栏已改为悬浮胶囊（见基础规则），旧的底部流光线在圆角形态下不再适用 */
header::after { content:none; }
.logo .paw { filter:drop-shadow(0 0 6px rgba(255,158,205,.55)); }
/* 2) 主按钮：顶部内高光质感（光扫动画已占用 ::after，故用 ::before） */
.btn:not(#gate-btn)::before { content:''; position:absolute; left:10%; right:10%; top:7%; height:36%;
background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0));
border-radius:999px; pointer-events:none; opacity:.75; }
.btn-ghost:not(#gate-btn)::before, .btn-danger:not(#gate-btn)::before { display:none; }
/* 3) 弹窗标题：居中渐变装饰短线 */
.modal h2 { position:relative; padding-bottom:14px; }
.modal h2::after { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
width:56px; height:3px; border-radius:3px;
background:linear-gradient(90deg,var(--pink),var(--lavender)); }
/* 4) 表单：placeholder 柔化 + 选中选项浮起 */
.field input::placeholder, .field textarea::placeholder,
.comment-box textarea::placeholder, .post-title-input::placeholder { color:#96829f; opacity:1; }
.gender-opt.sel { box-shadow:0 4px 14px rgba(255,111,181,.22); transform:translateY(-1px); }
/* 5) Toast：左侧主题色指示条 */
#toast { display:flex; align-items:center; gap:10px; }
#toast::before { content:''; flex:none; width:4px; height:18px; border-radius:4px;
background:linear-gradient(180deg,var(--pink),var(--lavender)); }
#toast.err::before { background:linear-gradient(180deg,#ffd9e6,#ffb3cd); }
#toast.ok::before { background:linear-gradient(180deg,#c9f7e5,#a8e8ff); }
/* 6) 积分榜：前三名行淡金/银/铜底色 */
.leaderboard .lb-row:has(.lb-1) { background:linear-gradient(90deg,rgba(247,201,72,.16),transparent 70%); border-radius:10px; }
.leaderboard .lb-row:has(.lb-2) { background:linear-gradient(90deg,rgba(213,221,229,.28),transparent 70%); border-radius:10px; }
.leaderboard .lb-row:has(.lb-3) { background:linear-gradient(90deg,rgba(232,168,124,.18),transparent 70%); border-radius:10px; }
/* 7) 空状态：虚线卡片 + 图标浮动 */
.empty { border:1.5px dashed rgba(255,255,255,.28); border-radius:24px;
background:rgba(255,255,255,.06); margin-top:8px; }
.empty .big { display:inline-block; animation:bob 3.5s ease-in-out infinite; }
/* 8) 区块标题图标粉色辉光 */
.section-title i, .planet-group-title i { color:var(--pink);
filter:drop-shadow(0 0 8px rgba(255,158,205,.45)); }
/* 9) 评论：气泡化正文 + 头部防溢出 */
.comment-head { flex-wrap:wrap; }
.comment-text { display:inline-block; background:rgba(255,255,255,.55);
border:1px solid rgba(157,123,255,.14); padding:9px 14px;
border-radius:4px 14px 14px 14px; }
/* 10) 后台表格操作按钮间距 */
td .btn + .btn { margin-left:6px; }
/* 11) 页脚呼吸分隔线 */
footer { margin-top:34px; border-top:1px dashed rgba(255,255,255,.16); padding-top:30px; }
/* 12) 人机验证长按脉动光环（配合进度条） */
@keyframes gatePulse { from { box-shadow:0 0 0 0 rgba(255,158,205,.55); } to { box-shadow:0 0 0 24px rgba(255,158,205,0); } }
#gate-btn.holding { animation:gatePulse 1.2s ease-out forwards; }
/* 13) 导航小字号昵称去掉模糊辉光，保持清晰锐利 */
.nav-user-name.nm-aurora, .nav-user-name.nm-gold { filter:none; }
/* 14) 滚动条拇指改用主题渐变 */
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,rgba(255,158,205,.42),rgba(157,123,255,.42)); }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,rgba(255,111,181,.65),rgba(157,123,255,.65)); }
/* 15) 编辑器顶栏底部渐变线 */
.post-editor-top::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
background:linear-gradient(90deg,transparent,rgba(157,123,255,.5),transparent); pointer-events:none; }
/* ===== 移动端适配补充 ===== */
@media (max-width:640px) {
/* 修复：登录后导航项较多会横向溢出，允许换行 */
.nav { flex-wrap:wrap; row-gap:2px; }
.nav-links { margin-left:auto; }
/* 窄屏下「排行」收成纯图标，缓解拥挤 */
.nav-icon-sm { font-size:0; gap:0; padding:4px 9px; }
.nav-icon-sm i { font-size:13px; }
.modal { padding:26px 20px; border-radius:24px; }
table { font-size:13px; }
th, td { padding:9px 10px; }
.planet-grid { gap:12px; }
.hero { padding:40px 12px 32px; }
.leaderboard { padding:14px 16px; }
}
/* ============================================================
UI 美化第五阶段 · 精致化 + 流畅性（纯视觉；不动功能/DOM id/事件）
============================================================ */
/* A. 导航链接组：玻璃胶囊容器 */
.nav-links { padding:3px; border-radius:999px; background:rgba(255,255,255,.38);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
/* B. 主按钮：粉→紫→蓝三色渐变，层次更通透 */
.btn-primary { background:linear-gradient(135deg,#ff6fb5,#9d7bff 58%,#7bc4ff); }
.btn-primary:hover { filter:saturate(1.12) brightness(1.05); }
/* C. 星球主昵称：胶囊徽章 + hover 提亮 */
.planet-meta .owner { padding:3px 10px; margin:-3px 0; border-radius:999px;
background:rgba(157,123,255,.1); transition:background .25s; }
.planet-card:hover .planet-meta .owner { background:rgba(157,123,255,.22); }
/* D. 文章元信息：药丸化标签（排除右侧"编辑/删除"操作容器） */
.post-meta > span { display:inline-flex; align-items:center; gap:6px;
padding:3px 11px; border-radius:999px; background:rgba(157,123,255,.09); }
.post-meta > span[style*="margin-left"] { padding:0; background:none; }
/* E. 积分榜前三名奖牌辉光 */
.lb-rank.lb-1 { box-shadow:0 0 12px rgba(247,201,72,.6); }
.lb-rank.lb-2 { box-shadow:0 0 10px rgba(190,203,216,.55); }
.lb-rank.lb-3 { box-shadow:0 0 10px rgba(232,168,124,.55); }
/* F. 页脚爱心跳动 */
footer .fa-heart { display:inline-block; animation:heartBeat 1.8s ease-in-out infinite; }
@keyframes heartBeat { 0%,100%{transform:scale(1)} 12%{transform:scale(1.28)} 24%{transform:scale(1)}
36%{transform:scale(1.16)} 48%{transform:scale(1)} }
/* G. 弹窗顶部三色渐变饰条 */
.modal::before { content:''; position:absolute; top:0; left:26px; right:26px; height:3px;
border-radius:0 0 6px 6px; pointer-events:none;
background:linear-gradient(90deg,var(--pink-deep),var(--purple),var(--blue)); opacity:.85; }
/* H. 视图切换更快更跟手（覆盖基础 .5s ease） */
.view { animation-duration:.32s; animation-timing-function:cubic-bezier(.22,.9,.32,1); }
/* I. 标题字距微调，更大气 */
.paper h1, .planet-hero h1 { letter-spacing:1.5px; }
/* J. 移动端：关闭持续型文字动画（流光/极光），省电且滚动不掉帧 */
@media (max-width:640px) {
.hero h1 { animation:none !important; background-position:0% 50%; }
.nm-aurora { animation:none !important; background-position:0% 50%; }
}
/* ============================================================
个人相册 + 灯箱
============================================================ */
.album-hint { font-size:12.5px; color:var(--ink-light); margin-bottom:14px; line-height:1.7; }
.album-grid { columns:3 150px; column-gap:10px; }
.album-item { position:relative; margin:0 0 10px; border-radius:14px; overflow:hidden; break-inside:avoid;
cursor:zoom-in; background:rgba(157,123,255,.08);
box-shadow:0 4px 12px rgba(157,123,255,.16), inset 0 0 0 1px rgba(255,255,255,.35); }
.album-item img { width:100%; height:auto; display:block; min-height:90px; background:rgba(157,123,255,.08);
transition:transform .35s cubic-bezier(.2,.9,.3,1.2); }
.album-item:hover img { transform:scale(1.07); }
.album-del { position:absolute; top:6px; right:6px; width:28px; height:28px; border:none; border-radius:50%;
background:rgba(90,74,110,.6); color:#fff; font-size:12px; cursor:pointer; opacity:0;
transition:opacity .2s,background .2s,transform .2s; display:flex; align-items:center; justify-content:center; }
.album-item:hover .album-del { opacity:1; }
.album-del:hover { background:#ff5a8a; transform:scale(1.08); }
@media (max-width:640px) { .album-item .album-del { opacity:1; } } /* 触屏没有 hover，常显删除按钮 */
/* 灯箱（点击相册照片全屏查看） */
.lightbox { position:fixed; inset:0; z-index:600; display:none; align-items:center; justify-content:center;
padding:24px; background:rgba(20,14,46,.85);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:zoom-out; animation:fadeIn .25s; }
.lightbox.show { display:flex; }
.lightbox img { max-width:min(1100px,94vw); max-height:86vh; border-radius:22px;
box-shadow:0 30px 80px rgba(0,0,0,.5); animation:popIn .3s cubic-bezier(.2,.9,.3,1.3); }
.lightbox-close { position:absolute; top:18px; right:22px; width:38px; height:38px; border-radius:50%;
border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; font-size:16px;
cursor:pointer; transition:background .2s,transform .2s; display:flex; align-items:center; justify-content:center; }
.lightbox-close:hover { background:var(--pink-deep); transform:rotate(90deg); }
/* 站长终端 */
.terminal { background:rgba(14,9,30,.92); border:1px solid rgba(157,123,255,.35); border-radius:14px;
padding:14px; font-family:Consolas,'Courier New',monospace; font-size:13px; color:#e6e0ff;
box-shadow:inset 0 0 40px rgba(157,123,255,.08), 0 4px 14px rgba(157,123,255,.15); }
.term-out { max-height:360px; min-height:120px; overflow-y:auto; line-height:1.6;
white-space:pre-wrap; word-break:break-all; }
.term-out div { margin:1px 0; }
.t-cmd { color:#ff9ecd; }
.t-head { color:#c9a7ff; font-weight:700; }
.t-ok { color:#8affc1; }
.t-warn { color:#ffd166; }
.t-err { color:#ff7b8a; }
.t-dim { color:rgba(230,224,255,.45); }
.term-line { display:flex; gap:10px; margin-top:10px; padding-top:10px;
border-top:1px dashed rgba(157,123,255,.3); align-items:center; }
.term-prompt { color:#9d7bff; font-weight:700; white-space:nowrap; text-shadow:0 0 8px rgba(157,123,255,.5); }
#term-input { flex:1; background:none; border:none; outline:none; color:#fff; font:inherit; caret-color:#ff9ecd; }
#term-input::placeholder { color:rgba(230,224,255,.3); }
/* 站内通知 */
.notice-dot { position:absolute; top:-4px; right:-2px; min-width:16px; height:16px; padding:0 4px;
border-radius:999px; background:#ff5a5a; color:#fff; font-size:10px; font-weight:700;
border:2px solid rgba(255,255,255,.9); align-items:center; justify-content:center;
animation:noticePulse 2.8s ease-in-out infinite; }
@keyframes noticePulse { 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.08); opacity:.92} }
/* 消息中心内的铃铛图标不应跳动，保持静止 */
#view-messages .fa-bell,
#view-messages .fa-envelope,
#view-messages .fa-user-group { animation:none !important; }
#view-messages .section-title i,
#msg-tab-notices i,
#msg-tab-dms i,
#msg-tab-follows i { animation:none !important; }
.notice-item { display:flex; gap:12px; padding:11px 6px; border-bottom:1px dashed rgba(157,123,255,.2);
cursor:pointer; border-radius:10px; transition:background .2s; align-items:flex-start; }
.notice-item:hover { background:rgba(255,158,205,.08); }
.notice-item.unread { background:rgba(255,158,205,.07); }
.notice-ico { flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
justify-content:center; background:rgba(157,123,255,.12); font-size:13px; margin-top:2px; }
.notice-main { flex:1; min-width:0; font-size:13.5px; line-height:1.6; word-break:break-word; }
.notice-time { font-size:11.5px; color:var(--ink-light); margin-top:3px; }
.notice-unread-dot { flex:none; width:8px; height:8px; border-radius:50%;
background:var(--pink-deep); margin-top:10px; box-shadow:0 0 6px rgba(255,111,181,.7); }
#view-messages .profile-card { min-height:62vh; }
#view-messages #dm-history { min-height:260px; }
.dm-conv { display:flex; gap:10px; align-items:center; padding:10px 8px; border-radius:12px; cursor:pointer; transition:background .2s; border-bottom:1px dashed rgba(157,123,255,.12); }
.dm-conv:hover { background:rgba(255,158,205,.1); }
.dm-conv:last-child { border-bottom:none; }
.at-complete { position:absolute; left:0; right:0; bottom:100%; margin-bottom:6px; max-height:160px; overflow-y:auto; background:rgba(255,255,255,.96); border:1px solid rgba(157,123,255,.3); border-radius:12px; box-shadow:0 8px 24px rgba(90,74,110,.2); z-index:10; }
.at-item { padding:8px 12px; cursor:pointer; font-size:13px; color:var(--ink); }
.at-item:hover { background:rgba(255,158,205,.15); }
.badge-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.badge-item { width:74px; text-align:center; padding:10px 6px; border-radius:12px; background:rgba(255,255,255,.6); border:1px solid rgba(157,123,255,.15); font-size:11px; line-height:1.3; }
.badge-item.earned { background:linear-gradient(135deg,rgba(255,158,205,.18),rgba(157,123,255,.18)); border-color:rgba(255,158,205,.35); }
.badge-item i { font-size:20px; color:var(--purple); display:block; margin-bottom:4px; }
/* ============================================================
UI 第七阶段 · 液态玻璃（Liquid / Frosted Glass）
============================================================ */
/* A. 背景星云增艳：玻璃更透后，让模糊层透出更多色彩层次 */
body::before {
background:
radial-gradient(38% 30% at 18% 22%, rgba(255,111,181,.22), transparent 70%),
radial-gradient(42% 34% at 82% 78%, rgba(123,196,255,.19), transparent 70%),
radial-gradient(30% 26% at 65% 12%, rgba(201,167,255,.17), transparent 70%),
linear-gradient(180deg,#140e2e 0%,#2a1c50 45%,#4b2f6e 75%,#7a4a8f 100%);
}
/* B. 导航胶囊在更透的顶栏上降低自身白度，保持层次 */
.nav-links { background:rgba(255,255,255,.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
/* C. 细节表面适配半透明基底 */
.comment-text { background:rgba(255,255,255,.4); border-color:rgba(157,123,255,.18); }
.empty { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.32); }
.post-meta > span { background:rgba(157,123,255,.13); }
.planet-meta .owner { background:rgba(157,123,255,.15); }
/* D. 移动端：降低模糊半径与饱和增益，玻璃观感保留、滚动保持流畅 */
@media (max-width:640px) {
.planet-card, .post-card, .profile-card, .paper, .gate-card, .leaderboard {
-webkit-backdrop-filter:blur(10px) saturate(1.35); backdrop-filter:blur(10px) saturate(1.35);
}
header { top:8px; width:calc(100% - 16px); margin-top:8px; border-radius:14px;
-webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4); }
}
/* ============================================================
UI 美化第八阶段 · 质感细节 + 微交互（纯 CSS；不动功能/DOM id/事件）
============================================================ */
/* 1) 全局细噪点颗粒：让磨砂玻璃有真实的"砂"感（静态层、contain 隔离，零重绘成本；
位于背景与内容之间，卡片 backdrop-filter 会把它一并模糊，玻璃层次更真） */
body::after {
content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04; contain:paint;
background-image:url("data:image/svg+xml;utf8,");
}
/* 2) Hero 环绕星光：box-shadow 点阵星星 + 呼吸闪烁（移动端自动隐藏，避免拥挤） */
.hero::before {
content:''; position:absolute; left:50%; top:16%; width:3px; height:3px; border-radius:50%;
background:rgba(255,255,255,.9); pointer-events:none;
box-shadow:
-300px 30px 0 .5px rgba(255,255,255,.55),
-180px 110px 0 1.5px rgba(255,214,240,.6),
260px 20px 0 0 rgba(255,255,255,.45),
170px 130px 0 -0.5px rgba(214,230,255,.55),
-60px 200px 0 .5px rgba(255,255,255,.4),
340px 90px 0 1px rgba(255,255,255,.5),
-380px 70px 0 0 rgba(255,255,255,.35);
animation:heroStarTwinkle 3.6s ease-in-out infinite;
}
@keyframes heroStarTwinkle { 0%,100%{opacity:.55} 50%{opacity:1} }
/* 3) 星球卡片 3D 悬浮倾斜：hover 透视倾斜 + 按压回正（覆盖前阶段的平移悬停） */
.planet-card:hover {
transform:perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(-8px) scale(1.02);
box-shadow:0 22px 52px rgba(255,111,181,.3), inset 0 1px 0 rgba(255,255,255,.7);
}
.planet-card:active { transform:perspective(900px) rotateX(1deg) rotateY(-1deg) translateY(-3px) scale(.99); }
/* 4) 导航图标 hover 弹跳 */
.nav-btn i { transition:transform .25s cubic-bezier(.2,.9,.3,1.5); }
.nav-btn:hover i { transform:translateY(-2px) scale(1.18); }
.nav-btn.primary:hover i { transform:translateY(-2px) rotate(-8deg) scale(1.15); }
/* 5) 区块标题图标轻浮动（消息中心的排除规则已在前面定义，自动生效） */
.section-title i { animation:iconFloat 3.2s ease-in-out infinite; }
@keyframes iconFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
/* 6) 搜索框升级：更大更通透，聚焦时玻璃提亮 + 光圈（覆盖内联样式需 !important） */
#search-input {
padding:16px 24px !important; font-size:17px !important; border-radius:18px;
background:rgba(255,255,255,.5);
box-shadow:0 8px 26px rgba(157,123,255,.15), inset 0 1px 0 rgba(255,255,255,.65);
transition:box-shadow .3s, background .3s;
}
#search-input:focus {
background:rgba(255,255,255,.75);
box-shadow:var(--ring), 0 12px 32px rgba(255,158,205,.22), inset 0 1px 0 rgba(255,255,255,.7);
}
/* 7) 代码块窗口化：Mac 三色圆点 + 深色底提亮 */
.md-body pre { position:relative; padding-top:36px; background:#2e2547; }
.md-body pre::before {
content:''; position:absolute; top:15px; left:18px; width:11px; height:11px; border-radius:50%;
background:#ff5f57; box-shadow:19px 0 0 #febc2e, 38px 0 0 #28c840;
}
/* UI6.0 代码块：语言标签 + 复制按钮（覆盖在三色圆点右侧） */
.code-head { position:absolute; top:0; left:0; right:0; height:34px; display:flex; align-items:center;
padding:0 12px 0 68px; pointer-events:none; }
.code-lang { font-size:11px; font-family:monospace; letter-spacing:.5px;
color:rgba(248,240,255,.55); text-transform:uppercase; flex:1; text-align:left;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.code-copy { pointer-events:auto; border:none; font-family:inherit; font-size:11.5px; cursor:pointer;
display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px;
background:rgba(255,255,255,.1); color:rgba(248,240,255,.75); transition:background .2s,color .2s; }
.code-copy:hover { background:rgba(255,158,205,.25); color:#fff; }
/* 8) 引用块装饰引号 */
.md-body blockquote { position:relative; padding-left:46px; }
.md-body blockquote::before {
content:'\201C'; position:absolute; left:12px; top:-2px; font-size:36px;
font-family:Georgia,'Times New Roman',serif; color:var(--pink); opacity:.75; line-height:1;
}
/* 9) 正文首字下沉（博客经典排版；替换元素开头不生效，安全） */
.md-body > p:first-child::first-letter {
font-family:'ZCOOL KuaiLe'; font-size:2.5em; line-height:1; float:left;
margin:8px 10px 0 0; color:var(--pink-deep);
text-shadow:0 2px 12px rgba(255,111,181,.35);
}
/* 10) 返回链接按钮化：玻璃药丸 */
.back-link {
padding:7px 16px; border-radius:999px; font-size:13px;
background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.24);
transition:gap .2s, background .25s, color .25s, border-color .25s, transform .25s;
}
.back-link:hover { background:rgba(255,158,205,.26); border-color:rgba(255,158,205,.5); color:#fff; transform:translateX(-2px); }
/* 11) 站长终端：CRT 扫描线 + 屏幕辉光 */
.terminal { position:relative; overflow:hidden; }
.terminal::after {
content:''; position:absolute; inset:0; pointer-events:none;
background:repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
}
/* 12) 评论/动态头像统一描边光环 */
.post-avatar, .post-detail-avatar, .post-avatar-ph, .post-detail-avatar-ph {
box-shadow:0 0 0 2px rgba(255,255,255,.92), 0 3px 10px rgba(157,123,255,.28);
}
/* 13) Tab 图标激活弹跳 */
.tab i { transition:transform .25s cubic-bezier(.2,.9,.3,1.5); }
.tab.active i { transform:scale(1.14); }
/* 14) 成就徽章 hover 浮起（未获得的保持安静） */
.badge-item { transition:transform .22s, box-shadow .22s, border-color .22s; }
.badge-item.earned:hover {
transform:translateY(-4px) scale(1.04); border-color:rgba(255,158,205,.55);
box-shadow:0 10px 22px rgba(255,111,181,.28);
}
.badge-item.earned i { filter:drop-shadow(0 0 6px rgba(255,158,205,.55)); }
/* 15) 收藏/草稿卡片与文章卡片 hover 对齐（保持左指示条语言一致） */
/* 16) 相册格子 hover 光泽扫过 */
.album-item::after {
content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
}
.album-item:hover::after { opacity:1; }
/* 17) DM 会话列表头像微动效 */
.dm-conv { transition:background .2s, transform .2s; }
.dm-conv:hover { transform:translateX(3px); }
/* 18) 榜单头像金/银/铜描边呼应 */
.leaderboard .lb-row:has(.lb-1) .mini-avatar, .leaderboard .lb-row:has(.lb-1) .mini-avatar-ph {
box-shadow:0 0 0 2px rgba(247,201,72,.85), 0 3px 10px rgba(247,201,72,.4); }
.leaderboard .lb-row:has(.lb-2) .mini-avatar, .leaderboard .lb-row:has(.lb-2) .mini-avatar-ph {
box-shadow:0 0 0 2px rgba(190,203,216,.85), 0 3px 10px rgba(190,203,216,.35); }
.leaderboard .lb-row:has(.lb-3) .mini-avatar, .leaderboard .lb-row:has(.lb-3) .mini-avatar-ph {
box-shadow:0 0 0 2px rgba(232,168,124,.8), 0 3px 10px rgba(232,168,124,.35); }
/* 19) 灯箱打开时背景禁止滚动穿透（配合 .lightbox.show 由 JS 控制类） */
body:has(.lightbox.show) { overflow:hidden; }
/* 20) 通知图标按类型着色容器（图标本身已有内联色，容器玻璃化衬托） */
.notice-ico { background:rgba(255,255,255,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); }
/* 21) 骨架屏对齐玻璃卡片圆角体系 */
.skeleton-card { border-radius:24px; }
/* 22) 移动端：关闭 hero 星光点阵（窄屏拥挤）与首字下沉（小屏排版跳动） */
@media (max-width:640px) {
.hero::before { display:none; }
.md-body > p:first-child::first-letter { font-size:inherit; float:none; margin:0; color:inherit; text-shadow:none; font-family:inherit; }
}
/* ============================================================
第九阶段 · 阅读体验：目录 / 进度条 / 底部导航 / 灯箱增强 / 验证码
============================================================ */
/* 文章目录（≥3 个 h2/h3 才显示，桌面右侧悬浮；窄屏横向可滚动胶囊） */
#post-toc { margin:18px 0 6px; padding:12px 16px; border-radius:16px;
background:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.5);
-webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4); }
.toc-title { font-weight:600; font-size:13.5px; color:var(--purple); margin-bottom:8px;
display:flex; align-items:center; gap:7px; }
#post-toc { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.toc-item { font-size:12.5px; color:var(--ink-light); text-decoration:none; padding:4px 11px;
border-radius:999px; background:rgba(157,123,255,.08); white-space:nowrap;
transition:background .2s,color .2s,transform .2s; display:inline-block; max-width:220px;
overflow:hidden; text-overflow:ellipsis; }
.toc-item:hover { background:rgba(255,158,205,.2); color:var(--pink-deep); transform:translateY(-1px); }
.toc-item.toc-h3 { padding-left:22px; font-size:12px; background:transparent; }
/* 阅读进度条（顶部细线，跟随滚动） */
#read-progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:250; pointer-events:none;
background:linear-gradient(90deg,var(--pink-deep),var(--purple),var(--blue));
box-shadow:0 0 8px rgba(255,111,181,.6); transition:width .12s linear; }
/* 移动端底部导航（≤640px 显示；桌面隐藏） */
#bottom-nav { display:none; }
@media (max-width:640px) {
#bottom-nav {
display:flex; position:fixed; left:10px; right:10px; bottom:10px; z-index:180;
border-radius:20px; padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.55);
-webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
box-shadow:0 8px 32px rgba(90,74,110,.28), inset 0 1px 0 rgba(255,255,255,.6);
justify-content:space-around; align-items:stretch;
}
#bottom-nav .bn-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
padding:6px 2px; border-radius:14px; cursor:pointer; color:var(--ink); text-decoration:none;
font-size:10.5px; background:transparent; border:none; font-family:inherit;
transition:background .2s,color .2s; position:relative; }
#bottom-nav .bn-item i { font-size:17px; }
#bottom-nav .bn-item.active { background:linear-gradient(135deg,rgba(255,158,205,.25),rgba(157,123,255,.25)); color:var(--pink-deep); }
#bottom-nav .bn-dot { position:absolute; top:4px; right:calc(50% - 16px); min-width:14px; height:14px;
padding:0 3px; border-radius:999px; background:#ff5a5a; color:#fff; font-size:9px; font-weight:700;
display:none; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,.9); }
/* 底部导航占位，防内容被遮 */
main { padding-bottom:110px; }
/* 消息中心红点在底部导航上的映射 */
#bottom-nav .bn-item[data-bn="msg"] .bn-dot { display:none; }
#bottom-nav .bn-item[data-bn="msg"].has-unread .bn-dot { display:flex; }
/* 登录/未登录切换 */
#bottom-nav .bn-item[data-bn="me"] .bn-ava { width:22px; height:22px; border-radius:50%; object-fit:cover;
border:2px solid #fff; box-shadow:0 1px 4px rgba(157,123,255,.3); }
#bottom-nav .bn-item[data-bn="me"] .bn-ava-ph { width:22px; height:22px; border-radius:50%;
display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff;
background:linear-gradient(135deg,var(--lavender),var(--blue)); border:2px solid #fff; }
}
/* 灯箱增强：缩放/拖拽时的形态 */
.lightbox img { transition:transform .18s ease; will-change:transform; cursor:grab; }
.lightbox img.dragging { cursor:grabbing; transition:none; }
.lightbox .lb-hint { position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
color:rgba(255,255,255,.75); font-size:12px; padding:6px 14px; border-radius:999px;
background:rgba(20,14,46,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
pointer-events:none; white-space:nowrap; }
.lightbox .lb-controls { position:absolute; top:18px; left:50%; transform:translateX(-50%);
display:flex; align-items:center; gap:2px; color:#fff; font-size:12px; padding:4px 6px; border-radius:999px;
background:rgba(20,14,46,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.lightbox .lb-pct { min-width:46px; text-align:center; font-variant-numeric:tabular-nums; }
.lightbox .lb-btn { width:26px; height:26px; border-radius:50%; border:none; cursor:pointer;
background:transparent; color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center;
transition:background .2s, transform .2s; }
.lightbox .lb-btn:hover { background:rgba(255,255,255,.22); }
.lightbox .lb-btn:active { transform:scale(.9); }
/* 登录验证码（SVG 内联， CSP img-src data: 已放行） */
.captcha-box { display:flex; gap:10px; align-items:center; }
.captcha-img { height:42px; border-radius:10px; cursor:pointer; border:1.5px solid rgba(255,255,255,.55);
flex:none; user-select:none; -webkit-user-drag:none; }
.captcha-hint { font-size:11.5px; color:var(--ink-light); line-height:1.5; }
/* ===== 深色主题（html[data-theme="dark"]，由 theme-boot.js 防闪烁初始化） ===== */
html[data-theme="dark"] {
--ink: #e8ddff; --ink-light: #b3a3d6; --cream: #241a40;
--glass: rgba(40, 28, 74, .55); --glass-border: rgba(157, 123, 255, .28);
--shadow: 0 12px 40px rgba(0,0,0,.45);
color-scheme: dark;
}
html[data-theme="dark"] body::before {
background:
radial-gradient(38% 30% at 18% 22%, rgba(255,111,181,.10), transparent 70%),
radial-gradient(42% 34% at 82% 78%, rgba(123,196,255,.08), transparent 70%),
radial-gradient(30% 26% at 65% 12%, rgba(201,167,255,.07), transparent 70%),
linear-gradient(180deg,#0a0618 0%,#150d2e 45%,#231242 75%,#33194f 100%);
}
html[data-theme="dark"] header {
background:rgba(24,16,48,.6); border-color:rgba(157,123,255,.25);
box-shadow:0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(157,123,255,.15);
}
html[data-theme="dark"] .modal,
html[data-theme="dark"] .gate-card {
background:rgba(30,20,58,.96); border-color:rgba(157,123,255,.3);
}
html[data-theme="dark"] .leaderboard { background:rgba(40,28,74,.55); }
html[data-theme="dark"] .act-btn,
html[data-theme="dark"] .comment-box textarea,
html[data-theme="dark"] .notice-ico,
html[data-theme="dark"] .lb-row:hover { background:rgba(60,42,110,.45); border-color:rgba(157,123,255,.3); }
html[data-theme="dark"] .comment-text,
html[data-theme="dark"] .dm-history-bubble { background:rgba(60,42,110,.5); }
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="date"], html[data-theme="dark"] textarea, html[data-theme="dark"] select {
background:rgba(30,20,58,.7); border-color:rgba(157,123,255,.3); color:var(--ink);
}
html[data-theme="dark"] .post-title-input,
html[data-theme="dark"] #post-tags {
background:rgba(30,20,58,.7); border-color:rgba(157,123,255,.3); color:var(--ink);
}
html[data-theme="dark"] #dm-history { background:rgba(30,20,58,.55); border-color:rgba(157,123,255,.25); }
html[data-theme="dark"] .gender-opt { border-color:rgba(157,123,255,.3); }
html[data-theme="dark"] .gender-opt.sel { background:rgba(255,158,205,.14); }
html[data-theme="dark"] .planet-card h3, html[data-theme="dark"] .post-card h3 { color:var(--ink); }
html[data-theme="dark"] .toc-item { color:var(--ink-light); }
html[data-theme="dark"] .toc-item.active { color:var(--pink); }
/* ===== 新组件：标签 chip ===== */
.post-tags { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 2px; }
.tag-chip {
display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:999px;
font-size:12.5px; cursor:pointer; user-select:none;
background:rgba(157,123,255,.12); border:1.5px solid rgba(157,123,255,.28); color:var(--purple);
transition:background .2s, transform .2s, color .2s;
}
.tag-chip i { font-size:10.5px; }
.tag-chip:hover { background:rgba(157,123,255,.25); transform:translateY(-1px); color:var(--pink-deep); }
/* ===== 新组件：表情回应栏 ===== */
.reactions-bar { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 4px; }
.react-btn {
display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px;
border:1.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.4);
font-family:inherit; font-size:13px; cursor:pointer; transition:transform .18s, background .2s, border-color .2s;
}
.react-btn:hover { transform:translateY(-2px) scale(1.06); background:rgba(255,158,205,.16); }
.react-btn.on { background:rgba(255,158,205,.22); border-color:var(--pink); }
.react-emoji { font-size:16px; line-height:1; }
.react-count { font-size:12px; color:var(--ink-light); min-width:10px; }
.react-btn.on .react-count { color:var(--pink-deep); font-weight:600; }
/* ===== 新组件：评论树 / 回复 / 点赞 ===== */
.comment-children { margin-left:30px; padding-left:12px; border-left:2px solid rgba(157,123,255,.18); }
.comment-ops { display:flex; gap:14px; margin-top:4px; }
.comment-op {
border:none; background:transparent; font-family:inherit; font-size:12px; cursor:pointer;
color:var(--ink-light); display:inline-flex; align-items:center; gap:4px; padding:2px 4px; border-radius:6px;
transition:color .2s, background .2s;
}
.comment-op:hover { color:var(--pink-deep); background:rgba(255,158,205,.1); }
.comment-op.on { color:var(--pink-deep); }
.comment-op.on i { color:var(--pink-deep); }
.reply-tag { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; color:var(--purple);
background:rgba(157,123,255,.12); padding:1px 8px; border-radius:999px; }
.reply-tag i { font-size:9.5px; }
.reply-hint {
display:flex; align-items:center; gap:8px; width:100%; font-size:12.5px; color:var(--purple);
background:rgba(157,123,255,.1); border-radius:10px 10px 0 0; padding:6px 12px; margin-bottom:-2px;
}
.comment-box { flex-wrap:wrap; }
/* ===== 新组件：目录增强 ===== */
#post-toc { margin:14px 0 6px; }
.toc-title {
font-family:'ZCOOL KuaiLe'; font-size:15px; cursor:pointer; user-select:none;
display:flex; align-items:center; gap:6px; color:var(--ink-light);
}
.toc-title:hover { color:var(--pink-deep); }
.toc-caret { margin-left:auto; transition:transform .25s; font-size:12px; }
#post-toc.collapsed .toc-caret { transform:rotate(-90deg); }
#post-toc.collapsed .toc-items { display:none; }
.toc-items { display:flex; flex-direction:column; margin-top:6px; }
.toc-item { padding:4px 10px; border-radius:8px; font-size:13px; color:var(--ink-light);
text-decoration:none; border-left:2px solid transparent; transition:background .2s, color .2s; }
.toc-item.toc-h3 { padding-left:24px; font-size:12.5px; }
.toc-item:hover { background:rgba(255,158,205,.1); color:var(--pink-deep); }
.toc-item.active { color:var(--pink-deep); border-left-color:var(--pink); background:rgba(255,158,205,.08); font-weight:500; }
/* ===== 新组件：封面横幅 / 关于我 / 置顶 ===== */
.cover-banner {
aspect-ratio:16/9; height:auto; max-height:520px; border-radius:20px; margin:-6px -6px 18px;
background-size:cover; background-position:center;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 6px 18px rgba(90,74,110,.18);
position:relative;
}
.user-page-card .cover-banner { margin:-6px -6px 20px; }
.about-me {
margin-top:20px; padding:16px 18px; border-radius:14px;
background:rgba(157,123,255,.07); border:1.5px dashed rgba(157,123,255,.25);
}
.about-me h3 { color:var(--ink); }
.pinned-row {
display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--r-md);
border:1.5px solid rgba(157,123,255,.16); background:rgba(157,123,255,.06); margin-bottom:10px;
transition:background .2s, border-color .2s, transform var(--dur-fast), box-shadow var(--dur-fast);
box-shadow:0 2px 8px rgba(157,123,255,.06);
}
.pinned-row:hover { background:rgba(157,123,255,.14); border-color:rgba(157,123,255,.4); transform:translateY(-2px); box-shadow:0 6px 18px rgba(157,123,255,.15); }
.pinned-row i { color:var(--pink-deep); font-size:13px; }
/* ===== 新组件：通知分组 ===== */
.notice-group { margin-bottom:14px; }
.notice-group-title {
display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink);
padding:8px 6px 6px; border-bottom:1.5px solid rgba(157,123,255,.18); margin-bottom:4px;
}
/* ============================================================
UI 5.0（滚动叙事 + 悬浮系统）：纯增强，不改 DOM 结构与既有语义
============================================================ */
/* 1) 全局质感：固定噪点纹理层，让"毛玻璃"真正磨砂（渲染一次的 SVG turbulence，零动画开销） */
body::after {
content:''; position:fixed; inset:0; z-index:2000; pointer-events:none; opacity:.05;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* 旧浏览器不支持 mix-blend-mode 时降级为极低透明度，不会发灰 */
@supports not (mix-blend-mode: overlay) { body::after { opacity:.025; mix-blend-mode:normal; } }
/* 2) 流式字号：大屏更舒展、小屏不挤压 */
.hero h1 { font-size:clamp(34px, 6.5vw, 60px); }
.paper h1 { font-size:clamp(26px, 4.5vw, 36px); }
.section-title { font-size:clamp(22px, 3.4vw, 28px); }
.planet-hero h1 { font-size:clamp(26px, 5vw, 38px); }
/* 滚动条常驻占位，避免弹层出现/消失时页面横向跳动 */
html { scrollbar-gutter:stable; }
/* 3) Hero 增强：徽章胶囊 + 环绕星云光斑 */
.hero-badge {
display:inline-flex; align-items:center; gap:7px; padding:7px 18px; margin-bottom:20px;
border-radius:999px; font-size:13px; letter-spacing:1px; color:#ffe9f6;
background:linear-gradient(135deg,rgba(255,111,181,.22),rgba(157,123,255,.22));
border:1px solid rgba(255,255,255,.35);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
box-shadow:0 4px 18px rgba(157,123,255,.25), inset 0 1px 0 rgba(255,255,255,.35);
animation:fadeUp .6s ease backwards;
}
.hero-badge i { color:var(--pink); filter:drop-shadow(0 0 6px rgba(255,158,205,.7)); }
.hero-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(34px); opacity:.55; z-index:-1; }
.hero-orb.o1 { width:190px; height:190px; left:8%; top:-6%;
background:radial-gradient(circle,rgba(255,111,181,.4),transparent 68%); animation:orbDrift 11s ease-in-out infinite; }
.hero-orb.o2 { width:230px; height:230px; right:4%; top:22%;
background:radial-gradient(circle,rgba(123,196,255,.36),transparent 68%); animation:orbDrift 14s ease-in-out infinite reverse; }
.hero-orb.o3 { width:150px; height:150px; left:38%; bottom:-8%;
background:radial-gradient(circle,rgba(201,167,255,.4),transparent 68%); animation:orbDrift 17s ease-in-out infinite 2s; }
@keyframes orbDrift {
0%,100% { transform:translate(0,0) scale(1); }
33% { transform:translate(26px,-20px) scale(1.08); }
66% { transform:translate(-20px,16px) scale(.94); }
}
.hero > *:not(.hero-orb) { position:relative; } /* 光斑沉底，内容浮于其上 */
/* 4) 顶栏滚动收缩：下滑后更紧凑、阴影加深（.scrolled 由 app.js 增删） */
header { transition:box-shadow .35s ease, background .35s ease, top .35s ease; }
header.scrolled {
top:6px;
background:rgba(255,255,255,.52);
box-shadow:0 14px 40px rgba(90,74,110,.3), inset 0 1px 0 rgba(255,255,255,.7);
}
html[data-theme="dark"] header.scrolled { background:rgba(30,20,58,.62); }
/* 5) 滚动入场动效（IntersectionObserver 驱动；JS 不可用或未启用时自动回退旧 fadeUp） */
html.js-reveal .planet-card, html.js-reveal .post-card, html.js-reveal .comment-item { animation:none; }
html.js-reveal .reveal-init { opacity:0; transform:translateY(26px) scale(.98); }
html.js-reveal .reveal-init.in-view {
opacity:1; transform:none;
transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
transition-delay:calc(var(--rv, 0) * 55ms);
}
@media (prefers-reduced-motion: reduce) {
html.js-reveal .reveal-init { opacity:1; transform:none; transition:none; }
.hero-orb, .hero-badge { animation:none !important; }
}
/* 6) 返回顶部：玻璃圆钮 + 渐变描边，滚过 600px 浮现 */
#back-top {
position:fixed; right:26px; bottom:96px; z-index:160; width:46px; height:46px; border-radius:50%;
border:1.5px solid transparent; cursor:pointer; color:#fff; font-size:15px;
background:
linear-gradient(150deg,rgba(255,111,181,.92),rgba(157,123,255,.92)) padding-box,
linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,158,205,.5)) border-box;
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
box-shadow:0 10px 26px rgba(157,123,255,.42), inset 0 1px 0 rgba(255,255,255,.5);
opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); pointer-events:none;
transition:opacity .3s, transform .3s, visibility .3s;
display:flex; align-items:center; justify-content:center;
}
#back-top.show { opacity:1; visibility:visible; transform:none; pointer-events:auto; }
#back-top:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(255,111,181,.55); }
#back-top:active { transform:translateY(0) scale(.94); }
@media (max-width:640px) { #back-top { right:14px; bottom:86px; width:42px; height:42px; } }
/* 7) 文章图片：可点击放大（复用灯箱），hover 提示可交互 */
.md-body img[data-act="openLightbox"] { cursor:zoom-in; }
.md-body img[data-act="openLightbox"]:hover { transform:scale(1.01); box-shadow:0 10px 30px rgba(157,123,255,.4); }
/* 8) toast 图标配位（api.js 注入 ） */
#toast i { margin-right:8px; }
/* 9) 阅读进度条加"到达感"：末端光点 */
#read-progress::after { content:''; position:absolute; right:-3px; top:50%; width:7px; height:7px;
transform:translateY(-50%); border-radius:50%; background:#fff; box-shadow:0 0 10px 2px rgba(255,158,205,.9); }
/* ============================================================
UI 5.1 精修：图标立体辉光 / Hero 轨道卫星 / 移动端顶栏单行 / 按钮高光
============================================================ */
/* 1) 星球图标：立体球体质感 + 同色系背景辉光（--pc 由卡片内联渐变继承） */
.planet-icon { position:relative; box-shadow:0 10px 24px rgba(90,74,110,.3), inset 0 -10px 18px rgba(0,0,0,.16), inset 0 8px 14px rgba(255,255,255,.4); }
.planet-icon::before {
content:''; position:absolute; inset:-14px; border-radius:50%; z-index:-1;
background:var(--pc,linear-gradient(135deg,var(--pink),var(--lavender)));
filter:blur(20px); opacity:.4; transition:opacity .4s;
}
.planet-card:hover .planet-icon::before { opacity:.7; }
/* 2) Hero：小卫星绕星球公转（纯 CSS 轨道动画） */
.hero-planet { width:150px; height:130px; }
.hero-planet .p-body { top:16px; left:33px; }
.hero-planet::after {
content:''; position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px;
border-radius:50%; z-index:5;
background:radial-gradient(circle at 35% 30%, #fff, #7bc4ff 55%, #4b9be6);
box-shadow:0 0 10px 2px rgba(123,196,255,.8);
animation:orbit 6s linear infinite;
}
@keyframes orbit {
from { transform:rotate(0deg) translateX(95px) rotate(0deg); }
to { transform:rotate(360deg) translateX(95px) rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) { .hero-planet::after { animation:none; display:none; } }
/* 3) 移动端顶栏：logo + 导航保持单行，导航超出可横向轻扫（不换行、隐藏滚动条） */
@media (max-width:640px) {
.nav { flex-wrap:nowrap; }
.nav-links { flex-wrap:nowrap; overflow-x:auto; max-width:calc(100% - 90px); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.nav-links::-webkit-scrollbar { display:none; }
.hero h1 { letter-spacing:1px; }
.hero-badge { font-size:11.5px; padding:6px 14px; }
}
/* 4) 按钮高光：顶部内发光让渐变按钮有"果冻感" */
.btn-primary, .nav-btn.primary, .tab.active {
box-shadow:0 8px 22px rgba(255,111,181,.4), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -6px 12px rgba(0,0,0,.08) !important;
}
.btn-ghost, .act-btn { box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
/* 5) 区块标题： leading 发光小星球 */
.section-title::before {
content:''; width:9px; height:9px; flex:none; border-radius:50%;
background:linear-gradient(135deg,var(--pink),var(--purple));
box-shadow:0 0 10px 2px rgba(255,158,205,.6);
animation:moonTwinkle 2.4s ease-in-out infinite;
}
/* 6) 相关文章（文章页底部） */
#post-related { margin-top:36px; }
#post-related .post-card { padding:16px 20px; }
#post-related .planet-group-title { margin-top:6px; }
/* 7) 页脚：顶部渐变分隔线 */
footer { border-top:1.5px solid transparent;
border-image:linear-gradient(90deg,transparent,rgba(255,158,205,.45),rgba(157,123,255,.45),transparent) 1;
padding-top:30px; margin-top:20px; }
/* 8) 徽章计数：跟随主题色更立体 */
.badge-count { box-shadow:inset 0 1px 0 rgba(255,255,255,.4); }
/* ================= UI 6.0：设计令牌 / 微交互 / 无障碍 ================= */
/* ④ 设计令牌（增量引入）：新组件一律引用令牌，存量字面量随维护逐步迁移 */
:root {
--r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px;
--sp-1: 4px; --sp-2: 8px; --sp-3: 14px; --sp-4: 22px; --sp-5: 32px;
--dur-fast: .18s; --dur: .25s; --dur-slow: .35s;
--ease-bounce: cubic-bezier(.2,.9,.3,1.3);
--focus-ring: 0 0 0 3px rgba(157,123,255,.45);
}
/* ⑧ 点赞爆星粒子：8 颗小星星从爱心向外飘散消隐（JS 挂到 body，fixed 定位） */
.like-star { position:fixed; z-index:900; width:10px; height:10px; pointer-events:none;
background:#ffd76e; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
filter:drop-shadow(0 0 6px rgba(255,215,110,.9));
animation:likeBurst .8s var(--ease-bounce) backwards; }
@keyframes likeBurst {
0% { transform:translate(-50%,-50%) scale(.4); opacity:1; }
100% { transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(120deg); opacity:0; }
}
/* ① 编辑器拖拽悬停高亮 */
textarea.drop-hover { border-color:var(--pink-deep) !important; background:rgba(255,158,205,.08) !important;
box-shadow:var(--focus-ring); }
/* ⑫ 无障碍：键盘焦点统一可见光圈（鼠标点击不触发） */
:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-sm); }
.nav-btn:focus-visible, .btn:focus-visible, .act-btn:focus-visible { box-shadow:var(--focus-ring); }
/* ⑤ 深色主题补齐：本批新组件 */
html[data-theme="dark"] .code-lang { color:rgba(232,221,255,.45); }
html[data-theme="dark"] .code-copy { background:rgba(157,123,255,.2); color:rgba(232,221,255,.85); }
html[data-theme="dark"] .code-copy:hover { background:rgba(255,158,205,.3); color:#fff; }
html[data-theme="dark"] .empty { color:rgba(232,221,255,.6); }
/* ⑪ 搜索高亮与标签云 */
.md-body mark, .post-card mark { background:linear-gradient(transparent 55%, rgba(255,215,110,.55) 45%); color:inherit; padding:0 1px; border-radius:3px; }
html[data-theme="dark"] .post-card mark { background:linear-gradient(transparent 55%, rgba(255,193,94,.4) 45%); }
.tag-cloud { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:8px 0 20px; }
.tag-cloud .section-title { width:100%; margin:10px 0 6px; }
.tag-chip.cloud-1 { font-size:12.5px; opacity:.75; }
.tag-chip.cloud-2 { font-size:13.5px; }
.tag-chip.cloud-3 { font-size:15px; }
.tag-chip.cloud-4 { font-size:16.5px; background:rgba(255,158,205,.16); border-color:rgba(255,111,181,.4); }
.tag-chip b { font-weight:600; font-size:.85em; opacity:.65; }
/* ================= 流畅性专项 ================= */
/* 长列表渲染跳过：视口外的卡片跳过布局/绘制（50 条搜索结果、长信息流滚动明显更顺），
contain-intrinsic-size 给出估计高度防滚动条跳动，auto 前缀让浏览器记住真实尺寸后自愈 */
.post-card, .planet-card { content-visibility:auto; contain-intrinsic-size:auto 150px; }
.comment-item { content-visibility:auto; contain-intrinsic-size:auto 110px; }
/* 移动端减小顶栏模糊半径：sticky 顶栏每帧都在毛玻璃重合成，blur 18px 在手机 GPU 上开销大 */
@media (max-width:640px) {
header { -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3); }
}
/* 极低端设备：停用全部毛玻璃（theme-boot.js 标记 html.low-end），玻璃组件回退高不透明度纯色 */
html.low-end * { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
html.low-end header { background:rgba(255,250,253,.92); box-shadow:0 8px 32px rgba(90,74,110,.28); }
html[data-theme="dark"].low-end header { background:rgba(16,10,34,.94); }
html.low-end .modal, html.low-end .gate-card { background:rgba(252,246,251,.98); }
html[data-theme="dark"].low-end .modal, html[data-theme="dark"].low-end .gate-card { background:rgba(22,14,44,.98); }
/* ===== UI REFACTOR 2026-09 START ===== */
/* P0-① 首页 Hero：直述价值 */
.hero-tagline{max-width:660px;margin:8px auto 0;font-size:15px;line-height:1.85;color:rgba(255,255,255,.86);letter-spacing:.3px}
.hero-tagline b{color:#ffd9ec;font-weight:600}
.hero-tagline .hl{color:#cbe6ff}
.hero .hero-actions{margin-top:18px}
.hero .btn-ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.44);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.28);box-shadow:0 10px 26px rgba(20,10,45,.35)}
.hero-checkin-meta{margin:10px auto 0;font-size:12.5px;color:rgba(255,255,255,.85);letter-spacing:.2px}
/* Hero 次级入口：创建星球/签到退为轻量文字链，主按钮只留探索+写作 */
.hero-mini-links{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px}
.hero-mini-link{border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:13px;color:rgba(255,255,255,.8);display:inline-flex;align-items:center;gap:5px;padding:4px 6px;border-radius:8px;transition:color .2s,background .2s}
.hero-mini-link:hover{color:#fff;background:rgba(255,255,255,.14)}
.hero-mini-dot{color:rgba(255,255,255,.5)}
/* P0-① 首页分区骨架 */
.home-sec{margin-top:36px;animation:fadeUp .6s ease both}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sec-head .section-title{margin:0;flex:1;min-width:0}
.sec-more{flex:none;border:1.5px solid rgba(255,255,255,.42);background:rgba(255,255,255,.14);color:#fff;font-family:inherit;font-size:12.5px;padding:6px 14px;border-radius:999px;cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s;display:inline-flex;align-items:center;gap:6px}
.sec-more:hover{background:rgba(255,255,255,.26);transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,10,45,.3)}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:16px;align-items:start}
/* 创建星球实时预览：与成品卡片同模板，仅禁点并加虚线框示意“预览态” */
.planet-preview-live .planet-card{cursor:default;outline:2px dashed rgba(157,123,255,.5);outline-offset:4px;}
/* 无发文权限时的提示态（星球页发文按钮位） */
.perm-hint{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-light);background:rgba(255,255,255,.42);border:1.5px dashed rgba(157,123,255,.4);border-radius:999px;padding:7px 16px}
/* 我的空间：收藏/草稿/通知/私信/关注/设置统一工作台 */
.space-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-width:720px;margin:0 auto}
.space-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 10px;border-radius:18px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.55);cursor:pointer;transition:transform .22s,box-shadow .22s,background .22s;position:relative}
.space-tile:hover{transform:translateY(-4px);background:rgba(255,255,255,.74);box-shadow:0 12px 26px rgba(157,123,255,.24)}
.space-tile-ico{font-size:22px;color:var(--purple);position:relative}
.space-tile b{font-size:22px}
.space-tile-label{font-size:12.5px;color:var(--ink-light)}
.space-dot{position:absolute;top:-2px;right:-8px;width:10px;height:10px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 2px #fff}
/* 首页空态卡片：冷启动期也显得像设计，而不是"这里没东西" */
.home-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:28px 20px;border-radius:20px;background:rgba(255,255,255,.42);border:1.5px dashed rgba(157,123,255,.4)}
.home-empty-icon{font-size:30px;line-height:1;filter:drop-shadow(0 4px 10px rgba(157,123,255,.35))}
.home-empty b{font-size:15px}
.home-empty-sub{font-size:12.5px;color:var(--ink-light)}
.home-empty-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.home-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:16px;align-items:start}
.home-panel{padding:16px 16px 14px;border-radius:20px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 30px rgba(90,74,110,.16)}
.home-panel-title{font-family:'ZCOOL KuaiLe';font-size:18px;color:#f4ecff;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.home-panel-title .mini-more{margin-left:auto;font-size:12px;color:rgba(255,255,255,.7);font-family:'Noto Sans SC';cursor:pointer;border:none;background:transparent}
.home-panel-title .mini-more:hover{color:#ffd9ec}
/* P0-① 迷你列表（最新动态 / 热门文章） */
.mini-list{display:flex;flex-direction:column;gap:8px}
.mini-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:13px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.55);cursor:pointer;transition:transform .22s,background .22s,box-shadow .22s;min-width:0}
.mini-item:hover{transform:translateX(4px);background:rgba(255,255,255,.72);box-shadow:0 8px 20px rgba(157,123,255,.2)}
.mini-rank{flex:none;width:20px;height:20px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--lavender),var(--blue))}
.mini-rank.hot{background:linear-gradient(135deg,#ffb84d,#ff6fb5)}
.mini-title{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-meta{flex:none;font-size:11.5px;color:var(--ink-light);display:inline-flex;align-items:center;gap:4px}
/* 热门文章卡片：标题 + 一句话摘要 + 作者/星球/阅读数据 */
.hot-post-card{display:flex;flex-direction:column;gap:6px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.55);cursor:pointer;transition:transform .22s,background .22s,box-shadow .22s}
.hot-post-card:hover{transform:translateY(-2px);background:rgba(255,255,255,.74);box-shadow:0 8px 20px rgba(157,123,255,.2)}
.hot-post-top{display:flex;align-items:center;gap:10px;min-width:0}
.hot-post-snippet{margin:0;font-size:12.5px;color:var(--ink-light);line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.hot-post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-light)}
.hot-post-meta span{display:inline-flex;align-items:center;gap:4px}
/* P0-① 本周创作者 */
.creator-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.creator-chip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border-radius:16px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.55);cursor:pointer;text-align:center;transition:transform .22s,box-shadow .22s,background .22s}
.creator-chip:hover{transform:translateY(-4px);background:rgba(255,255,255,.74);box-shadow:0 12px 26px rgba(157,123,255,.24)}
.creator-chip b{font-size:13px;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.creator-score{font-size:11.5px;color:var(--ink-light)}
.creator-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 4px 14px rgba(157,123,255,.35)}
.creator-avatar-ph{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--lavender),var(--blue));color:#fff;font-size:18px;border:2px solid #fff;box-shadow:0 4px 14px rgba(157,123,255,.35)}
/* P0-② 星球卡片：深色宇宙 + 发光边缘 + 紫蓝渐变 + 克制星尘 */
.planet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.planet-card{position:relative;overflow:hidden;border-radius:20px;padding:20px 18px 15px;background:linear-gradient(158deg,#2b1b55 0%,#1b1035 52%,#331e63 100%);border:1px solid rgba(157,123,255,.34);box-shadow:0 12px 34px rgba(14,7,32,.5),inset 0 0 0 1px rgba(255,255,255,.05);color:#efe7ff;transition:transform .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s,border-color .32s;will-change:transform}
.planet-card::before{content:'';position:absolute;width:170px;height:170px;right:-56px;top:-62px;border-radius:50%;background:radial-gradient(circle,var(--pc,rgba(157,123,255,.6)),transparent 68%);opacity:.6;filter:blur(6px);pointer-events:none;transition:opacity .32s,transform .32s}
.planet-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 46px rgba(157,123,255,.16),inset 0 0 0 1px rgba(255,255,255,.06)}
.planet-card:hover{transform:translateY(-8px);border-color:rgba(201,167,255,.62);box-shadow:0 20px 46px rgba(157,123,255,.4),0 0 0 1px rgba(201,167,255,.28),inset 0 0 42px rgba(157,123,255,.22)}
.planet-card:hover::before{opacity:.9;transform:scale(1.12)}
.planet-card .planet-icon{position:relative;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:23px;color:#fff;margin-bottom:12px;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.92),var(--pc,#9d7bff) 46%,rgba(58,33,105,.96) 100%);box-shadow:0 0 20px var(--pc,rgba(157,123,255,.7)),inset -6px -8px 15px rgba(35,18,70,.55)}
.planet-card .planet-icon::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px dashed rgba(201,167,255,.4);animation:orbitSpin 16s linear infinite}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
.planet-card h3{font-family:'ZCOOL KuaiLe';font-size:16.5px;line-height:1.45;color:#fff;margin-bottom:6px;position:relative;z-index:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.planet-card .desc{font-size:12.5px;line-height:1.65;color:rgba(233,222,255,.74);min-height:40px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;position:relative;z-index:1}
.planet-card .planet-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);font-size:11.5px;color:rgba(233,222,255,.62);position:relative;z-index:1}
.planet-card .planet-meta .owner{display:inline-flex;align-items:center;gap:5px;color:rgba(233,222,255,.8);transition:color .2s}
.planet-card .planet-meta .owner:hover{color:#ffd9ec}
.planet-card .badge-count{background:rgba(157,123,255,.3);color:#e9d9ff;border-radius:999px;padding:1px 8px;font-size:11px}
.planet-card .planet-meta > span:last-child.badge-count{margin-left:auto}
/* P0-③ 文章详情三栏 */
.post-layout{display:grid;grid-template-columns:284px minmax(0,1fr) 272px;gap:22px;align-items:start;max-width:1340px;margin:0 auto}
.post-layout #post-meta,.post-layout #post-actions{position:sticky;top:84px;min-width:0}
.post-layout #post-paper{min-width:0}
.post-layout .post-bottom,.post-bottom{grid-column:1/-1;max-width:1340px;margin:28px auto 0;display:flex;flex-direction:column;gap:6px}
.side-card{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);border-radius:18px;padding:16px;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 30px rgba(90,74,110,.16)}
.side-card + .side-card{margin-top:14px}
.side-title{font-family:'ZCOOL KuaiLe';font-size:21px;line-height:1.45;color:var(--ink);margin-bottom:14px;word-break:break-word}
.side-author{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px;border-radius:14px;transition:background .22s}
.side-author:hover{background:rgba(255,158,205,.14)}
.side-author-main{min-width:0}
.side-author-name{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-author-sub{font-size:11.5px;color:var(--ink-light)}
.side-meta-list{margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-light)}
.side-meta-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px;transition:background .2s}
.side-meta-row i{color:var(--purple);width:15px;text-align:center;flex:none}
.side-meta-row[data-act]{cursor:pointer}
.side-meta-row[data-act]:hover{background:rgba(157,123,255,.12);color:var(--pink-deep)}
.side-edit{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.side-actions{display:flex;flex-direction:column;gap:8px}
.side-act-title{font-family:'ZCOOL KuaiLe';font-size:17px;color:var(--ink);margin-bottom:4px;display:flex;align-items:center;gap:7px}
.side-act{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:14px;border:1.5px solid rgba(157,123,255,.18);background:rgba(255,255,255,.5);color:var(--ink);font-family:inherit;font-size:13.5px;cursor:pointer;text-align:left;transition:transform .22s,background .22s,border-color .22s,box-shadow .22s}
.side-act:hover{transform:translateX(3px);border-color:rgba(157,123,255,.45);background:#fff;box-shadow:0 8px 20px rgba(157,123,255,.2)}
.side-act i{width:16px;text-align:center;flex:none;color:var(--purple)}
.side-act b{margin-left:auto;font-size:12px;color:var(--ink-light);font-weight:600}
.side-act.on{background:linear-gradient(135deg,rgba(255,158,205,.3),rgba(201,167,255,.3));border-color:rgba(255,111,181,.5);color:var(--pink-deep)}
.side-act.on i{color:var(--pink-deep)}
.side-react{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:10px;border-top:1px dashed rgba(157,123,255,.22)}
.side-react .react-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:999px;border:1.5px solid rgba(157,123,255,.18);background:rgba(255,255,255,.5);cursor:pointer;font-family:inherit;transition:transform .2s,border-color .2s,background .2s}
.side-react .react-btn:hover{transform:translateY(-2px);border-color:rgba(157,123,255,.45)}
.side-react .react-btn.on{background:linear-gradient(135deg,rgba(255,158,205,.3),rgba(201,167,255,.3));border-color:rgba(255,111,181,.5)}
.side-react .react-count{font-size:11px;color:var(--ink-light)}
#post-paper .paper{padding:30px 34px}
.related-card{padding:13px 15px;margin-bottom:10px}
.related-card h3{font-size:13.5px;color:var(--ink);margin-bottom:6px;line-height:1.5}
.related-card .post-meta{font-size:11.5px}
@media (max-width:1120px){
.post-layout{grid-template-columns:minmax(0,1fr) 258px}
.post-layout #post-meta{grid-column:1/-1;position:static;order:-1}
}
@media (max-width:880px){
.post-layout{grid-template-columns:minmax(0,1fr);gap:16px}
.post-layout #post-actions,.post-layout #post-meta{position:static}
#post-paper .paper{padding:22px 18px}
.home-split,.home-grid{grid-template-columns:minmax(0,1fr)}
}
/* P1-⑨ 搜索分类 + 热门搜索 */
.search-cats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:660px;margin:0 auto 12px}
.chip{border:1.5px solid rgba(157,123,255,.22);background:rgba(255,255,255,.5);color:var(--ink);font-family:inherit;font-size:12.5px;padding:7px 14px;border-radius:999px;cursor:pointer;transition:transform .2s,background .2s,color .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:6px}
.chip:hover{transform:translateY(-2px);background:#fff;box-shadow:0 8px 18px rgba(157,123,255,.2)}
.chip.active{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(255,111,181,.35)}
.hot-search{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;max-width:660px;margin:0 auto 14px}
.hot-search-title{font-size:12.5px;color:var(--ink-light);display:inline-flex;align-items:center;gap:5px;margin-right:2px}
.hot-tag{border:1.5px dashed rgba(157,123,255,.35);background:rgba(255,255,255,.42);color:var(--ink-light);font-family:inherit;font-size:12px;padding:5px 12px;border-radius:999px;cursor:pointer;transition:all .2s}
.hot-tag:hover{color:#fff;background:linear-gradient(135deg,var(--pink),var(--purple));border-color:transparent;transform:translateY(-2px)}
/* P2-⑦ 等级体系（星尘进度） */
.lv-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,rgba(255,158,205,.26),rgba(157,123,255,.28));border:1px solid rgba(157,123,255,.35);color:#6a4fb0;white-space:nowrap}
.lv-badge i{font-size:10px;color:#ffb84d}
.lv-progress{margin-top:4px}
.lv-progress-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.lv-next{font-size:11.5px;color:var(--ink-light)}
.lv-bar{height:9px;border-radius:999px;background:rgba(157,123,255,.16);overflow:hidden;box-shadow:inset 0 1px 3px rgba(90,74,110,.14)}
.lv-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--purple));box-shadow:0 0 10px rgba(157,123,255,.6);transition:width .7s cubic-bezier(.2,.7,.3,1)}
.lv-tip{margin-top:6px;font-size:11.5px;color:var(--ink-light)}
.lv-tip i{color:#ffb84d}
.lv-compact .lv-next,.lv-compact .lv-tip{display:none}
.lb-lv{margin-left:10px;flex:none}
/* P2-⑧ 个人主页卡片化 */
.user-page-card{position:relative;overflow:hidden}
.user-hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.user-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px;margin-top:18px}
.user-stat{text-align:center;padding:11px 8px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.62);transition:transform .22s,box-shadow .22s}
.user-stat:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(157,123,255,.2)}
.user-stat b{display:block;font-family:'ZCOOL KuaiLe';font-size:19px;color:var(--ink);line-height:1.3}
.user-stat span{font-size:11.5px;color:var(--ink-light)}
.user-lv-box{margin-top:14px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(255,158,205,.16),rgba(157,123,255,.16));border:1px solid rgba(255,255,255,.55)}
/* P1-⑥ 人机验证闸门美化 */
#human-gate{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;background:radial-gradient(62% 52% at 50% 38%,rgba(48,28,84,.88),rgba(11,6,24,.97));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .5s ease,visibility .5s ease}
#human-gate.hide{opacity:0;visibility:hidden;pointer-events:none}
.gate-card{position:relative;width:min(400px,calc(100% - 40px));padding:32px 26px 26px;border-radius:26px;text-align:center;background:linear-gradient(165deg,rgba(48,31,86,.95),rgba(23,14,46,.97));border:1px solid rgba(201,167,255,.34);box-shadow:0 28px 72px rgba(0,0,0,.56),inset 0 0 62px rgba(157,123,255,.14);overflow:hidden;color:#f2ebff}
.gate-orb{position:absolute;border-radius:50%;filter:blur(24px);opacity:.55;pointer-events:none}
.gate-orb.g1{width:170px;height:170px;left:-58px;top:-66px;background:radial-gradient(circle,rgba(255,111,181,.85),transparent 70%)}
.gate-orb.g2{width:190px;height:190px;right:-66px;bottom:-84px;background:radial-gradient(circle,rgba(123,196,255,.8),transparent 70%)}
.gate-paw{position:relative;display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;margin-bottom:8px;border-radius:50%;font-size:28px;color:#fff;background:radial-gradient(circle at 32% 28%,#ffe6f4,var(--pink) 42%,var(--purple) 86%);box-shadow:0 0 28px rgba(255,158,205,.6),inset -6px -8px 16px rgba(90,60,140,.35);animation:gatePulse 3.2s ease-in-out infinite}
@keyframes gatePulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.04)}}
#gate-title{font-family:'ZCOOL KuaiLe';font-size:24px;margin:4px 0 8px;background:linear-gradient(90deg,#ff9ecd,#c9a7ff,#7bc4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#gate-desc{font-size:13px;color:rgba(238,228,255,.76);margin-bottom:20px;position:relative;z-index:1}
.gate-btn{position:relative;overflow:hidden;width:100%;justify-content:center;padding:14px 20px}
.gate-btn .gate-ring{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,rgba(255,255,255,.38),rgba(255,255,255,.14));pointer-events:none}
.gate-btn.holding .gate-ring{width:100%;transition:width 1.2s linear}
#gate-hint{margin-top:12px;font-size:12.5px;min-height:18px;position:relative;z-index:1}
#gate-hint.err{color:#ffb4c8}
#gate-hint.ok{color:#9be8c0}
/* 深色主题适配 */
html[data-theme="dark"] .home-panel,html[data-theme="dark"] .side-card,html[data-theme="dark"] .mini-item,html[data-theme="dark"] .creator-chip,html[data-theme="dark"] .user-stat,html[data-theme="dark"] .user-lv-box,html[data-theme="dark"] .side-act,html[data-theme="dark"] .chip,html[data-theme="dark"] .hot-tag{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
html[data-theme="dark"] .mini-item:hover,html[data-theme="dark"] .creator-chip:hover,html[data-theme="dark"] .side-act:hover,html[data-theme="dark"] .chip:hover{background:rgba(255,255,255,.16)}
html[data-theme="dark"] .mini-title,html[data-theme="dark"] .side-title,html[data-theme="dark"] .side-act,html[data-theme="dark"] .side-author-name,html[data-theme="dark"] .user-stat b,html[data-theme="dark"] .chip,html[data-theme="dark"] .creator-chip b,html[data-theme="dark"] .related-card h3{color:#f0e9ff}
html[data-theme="dark"] .lv-badge{color:#e6d8ff;background:rgba(157,123,255,.28)}
html[data-theme="dark"] .lv-bar{background:rgba(255,255,255,.12)}
html[data-theme="dark"] .user-stat,html[data-theme="dark"] .mini-item{box-shadow:none}
/* 低性能 / 减少动效偏好 */
@media (prefers-reduced-motion:reduce){
.planet-card .planet-icon::after,.gate-paw{animation:none}
.planet-card,.side-act,.mini-item,.chip,.creator-chip,.hot-tag,.user-stat{transition:none}
}
.home-grid .home-sec,.home-grid .home-panel{margin-top:0}
/* ===== UI REFACTOR 2026-09 END ===== */
/* ===== 改进：按钮层级（创建星球=主 CTA，探索=次级） ===== */
.btn-secondary { background:rgba(255,255,255,.15); border:1.5px solid rgba(255,255,255,.25); color:var(--ink); }
.btn-secondary:hover { background:rgba(255,255,255,.25); box-shadow:var(--shadow); }
/* ===== 改进：星球卡片脚注（热度 · 更新时间 · 标签） ===== */
.planet-card .planet-extra { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px dashed rgba(255,255,255,.12); font-size:11.5px; color:rgba(233,222,255,.62); position:relative; z-index:1; }
.planet-card .planet-extra .heat { color:#ffb84d; font-weight:700; }
.planet-card .planet-extra .tag-chip { font-size:10.5px; padding:1px 8px; }
/* 星球卡片 CTA：整卡可点之外再给一个显式进入按钮（data-stop 防双重跳转） */
.planet-card .planet-enter { margin-top:10px; width:100%; padding:8px 0; border-radius:999px; border:1.5px solid rgba(201,167,255,.45); background:rgba(157,123,255,.18); color:#efe7ff; font-family:inherit; font-size:13px; cursor:pointer; transition:background .25s,transform .25s; position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:6px; }
.planet-card .planet-enter:hover { background:rgba(157,123,255,.38); transform:translateY(-1px); }
/* ===== 发文目标星球选择器 ===== */
#post-planet { width:100%; padding:10px 14px; border-radius:12px; border:1.5px solid rgba(157,123,255,.22); outline:none; font-size:14px; background:rgba(255,255,255,.45); color:var(--ink); font-family:inherit; }
#post-planet:focus { border-color:var(--pink); }
#post-planet-locked { font-size:13px; color:var(--ink-light); background:rgba(157,123,255,.1); border:1px dashed rgba(157,123,255,.3); border-radius:10px; padding:8px 14px; margin-top:10px; }
/* ===== 改进：面包屑导航（class 切换显示，避免 !important 与内联样式打架） ===== */
#breadcrumb { display:none; align-items:center; gap:4px; padding:8px 0 12px; font-size:13px; color:var(--ink-light); flex-wrap:wrap; }
#breadcrumb.show { display:flex; }
.bc-link { background:transparent; border:none; font-family:inherit; font-size:13px; color:var(--ink-light); cursor:pointer; padding:2px 6px; border-radius:6px; transition:background .2s; }
.bc-link:hover { background:rgba(157,123,255,.12); color:var(--purple); }
.bc-sep { font-size:10px; color:rgba(157,123,255,.3); }
.bc-current { font-weight:600; color:var(--ink); }
/* ===== 改进：自动保存状态 ===== */
#post-auto-save { display:none !important; }
#post-auto-save.show { display:inline !important; }
/* ===== 改进：图片上传进度 ===== */
.upload-progress { display:flex; align-items:center; gap:8px; font-size:13px; }
.upload-progress-bar { width:90px; height:6px; border-radius:3px; background:rgba(157,123,255,.2); overflow:hidden; }
.upload-progress-bar span { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--pink),var(--purple)); transition:width .15s; }
/* ===== 改进：密码强度指示器 ===== */
.pwd-strength { font-size:12px; margin-top:4px; display:flex; align-items:center; gap:6px; }
.pwd-strength .bar { flex:1; height:4px; border-radius:2px; background:rgba(157,123,255,.15); overflow:hidden; }
.pwd-strength .bar-fill { height:100%; border-radius:2px; transition:width .3s, background .3s; }
.pwd-weak { color:#e5537a; }
.pwd-medium { color:#e5a03e; }
.pwd-strong { color:#22c55e; }
/* ===== 改进：发布前检查 ===== */
#post-publish-check { color:var(--ink-light); font-size:12px; }
#post-publish-check.valid { color:#22c55e; }
#post-publish-check.invalid { color:#e5537a; }
/* 管理员分区显隐统一由 admin.js 的 enterAdmin() 按角色控制（内联 style），
这里不做全局隐藏，避免把"账号管理/小黑屋"这类管理员通用区永久藏住 */
/* ===== 改进：流畅度优化 ===== */
.post-editor-full { max-height:90vh; overflow-y:auto; }
.post-editor-body { padding:20px; }
#post-content { min-height:300px; }
/* 滚动流畅性优化 */
html { scroll-behavior:smooth; }
.view { scroll-behavior:smooth; }
/* 图片上传进度条 */
.img-progress-container { margin:8px 0; }
/* 发布检查提示 */
.publish-check-tip { padding:8px 14px; border-radius:10px; font-size:12px; margin-top:8px; }
.publish-check-tip.ok { background:rgba(34,197,94,.1); color:#22c55e; border:1px solid rgba(34,197,94,.2); }
.publish-check-tip.warn { background:rgba(229,83,122,.1); color:#e5537a; border:1px solid rgba(229,83,122,.2); }
/* 发布前预览卡片：标题 / 星球 / 标签 / 字数 / 摘要 */
.publish-preview { margin-top:8px; padding:10px 14px; border-radius:10px; background:rgba(255,255,255,.6); border:1px solid rgba(157,123,255,.25); color:var(--ink); display:flex; flex-direction:column; gap:4px; }
.publish-preview b { font-size:14px; }
.publish-preview span { font-size:12px; color:var(--ink-light); }
.publish-preview p { font-size:12px; color:var(--ink-light); line-height:1.6; }
/* 短动态卡片：短小轻快，左侧粉色 accent 与长文章区分 */
.moment-card { background:var(--glass); border:1.5px solid var(--glass-border); border-left:4px solid var(--pink); border-radius:18px; padding:16px 20px; margin-bottom:14px; box-shadow:0 4px 14px rgba(157,123,255,.08); animation:fadeUp .5s ease backwards; }
.moment-head { display:flex; align-items:center; gap:10px; }
.moment-head b { font-size:14px; }
.moment-time { font-size:12px; color:var(--ink-light); }
.moment-badge { margin-left:auto; font-size:11px; color:var(--pink-deep); background:rgba(255,158,205,.14); border:1px solid rgba(255,158,205,.4); border-radius:999px; padding:1px 9px; flex:none; }
.moment-text { margin:10px 0 4px 44px; font-size:15px; line-height:1.8; white-space:pre-wrap; word-break:break-word; }
.moment-ops { display:flex; align-items:center; gap:6px; margin:6px 0 0 44px; }
/* 星球公告条 / 创作规则折叠 */
.planet-announce { max-width:640px; margin:14px auto 0; padding:12px 18px 13px; border-radius:16px; font-size:13.5px; background:linear-gradient(135deg,rgba(255,184,77,.18),rgba(255,158,205,.16),rgba(157,123,255,.16)); border:1.5px solid rgba(255,158,205,.6); box-shadow:0 6px 18px rgba(255,158,205,.18); color:var(--ink); }
.planet-announce-title { display:flex; align-items:center; gap:6px; font-weight:700; font-size:13px; letter-spacing:.4px; color:var(--pink-deep); margin-bottom:5px; }
.planet-announce-title i { color:var(--pink-deep); }
.planet-announce p { margin:0; line-height:1.75; }
.planet-rules { max-width:640px; margin:10px auto 0; border-radius:16px; background:var(--glass); border:1.5px solid rgba(157,123,255,.4); box-shadow:0 6px 18px rgba(157,123,255,.12); font-size:13px; }
.planet-rules summary { cursor:pointer; padding:10px 18px; color:var(--ink); font-weight:700; list-style:none; display:flex; align-items:center; gap:6px; }
.planet-rules summary i { color:var(--purple); }
.planet-rules summary::-webkit-details-marker { display:none; }
.planet-rules summary::before { content:'\25B6'; font-size:10px; color:var(--purple); }
.planet-rules[open] summary::before { content:'\25BC'; }
.planet-rules .rules-hint { margin-left:auto; font-weight:400; font-size:11.5px; color:var(--ink-light); }
.planet-rules div { padding:0 18px 12px; white-space:pre-wrap; line-height:1.8; color:var(--ink); border-top:1px dashed rgba(157,123,255,.3); padding-top:10px; margin:0 18px 12px; padding-left:0; padding-right:0; }