:root{
--bg:#0a0d14;--bg-2:#0f1420;--card:#121826;--line:#1f2937;
--text:#e5e7eb;--muted:#94a3b8;--primary:#3b82f6;--primary-2:#60a5fa;
--accent:#8b5cf6;--danger:#ef4444;--success:#22c55e;--warn:#eab308;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.6;min-height:100vh}
a{color:var(--primary-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1240px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;font-weight:600;border:none;cursor:pointer;font-size:0.95rem;transition:all .2s;text-decoration:none}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 8px 24px rgba(59,130,246,.3)}
.btn-primary:hover{box-shadow:0 12px 32px rgba(59,130,246,.45)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-lg{padding:16px 32px;font-size:1.05rem}
.topnav{position:sticky;top:0;z-index:100;backdrop-filter:blur(16px);background:rgba(10,13,20,.85);border-bottom:1px solid var(--line)}
.topnav .container{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-links{display:flex;gap:8px;align-items:center}
.nav-links a{padding:8px 16px;border-radius:8px;color:var(--muted);font-weight:500;transition:all .2s}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.06);color:var(--text);text-decoration:none}
.hero{position:relative;padding:120px 0 100px;overflow:hidden;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(59,130,246,.18),transparent 60%),radial-gradient(circle at 80% 60%,rgba(139,92,246,.15),transparent 50%);pointer-events:none}
.hero h1{font-size:clamp(2rem,5vw,3.6rem);margin:0 0 16px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(135deg,#fff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p.sub{color:var(--muted);font-size:1.15rem;max-width:640px;margin:0 auto 32px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3);color:var(--primary-2);font-size:0.85rem;font-weight:600;margin-bottom:24px}
.section{padding:80px 0}
.section-head{text-align:center;margin-bottom:48px}
.section-head .tag{color:var(--primary-2);font-weight:600;font-size:0.9rem;letter-spacing:.08em;text-transform:uppercase}
.section-head h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:8px 0 12px;font-weight:800}
.section-head p{color:var(--muted);max-width:560px;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
.stat{padding:28px;background:var(--card);border:1px solid var(--line);border-radius:16px;text-align:center;transition:all .3s}
.stat:hover{transform:translateY(-4px);border-color:rgba(59,130,246,.4)}
.stat .num{font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat .lbl{color:var(--muted);font-size:0.9rem;margin-top:4px}
.dept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.dept-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;transition:all .3s;display:block;color:inherit}
.dept-card:hover{transform:translateY(-6px);border-color:rgba(59,130,246,.5);box-shadow:0 12px 40px rgba(59,130,246,.12);text-decoration:none}
.dept-card .ico{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(139,92,246,.2));color:var(--primary-2);margin-bottom:16px}
.dept-card h3{margin:0 0 8px;font-size:1.15rem;color:var(--text)}
.dept-card p{color:var(--muted);font-size:0.92rem;margin:0 0 16px;min-height:44px}
.dept-meta{display:flex;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:0.85rem}
.dept-meta strong{color:var(--text)}
.news-list{display:flex;flex-direction:column;gap:12px}
.news-item{display:flex;gap:16px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:12px;transition:all .2s;color:inherit}
.news-item:hover{border-color:rgba(59,130,246,.4);background:var(--bg-2);text-decoration:none}
.news-item .badge{padding:4px 10px;border-radius:6px;background:rgba(59,130,246,.15);color:var(--primary-2);font-size:0.75rem;font-weight:600;height:fit-content}
.news-item .info{flex:1;min-width:0}
.news-item h4{margin:0 0 4px;font-size:1.05rem}
.news-item .meta{color:var(--muted);font-size:0.85rem}
@media(max-width:768px){.section{padding:60px 0}}
.badge-v{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;color:#fff;font-size:11px;flex-shrink:0;font-weight:700;vertical-align:middle}
.v-red{background:linear-gradient(135deg,#ff4d4f,#d9363e);box-shadow:0 0 8px rgba(255,77,79,.5)}
.v-blue{background:linear-gradient(135deg,#4dabf7,#1971c2);box-shadow:0 0 8px rgba(77,171,247,.5)}
.v-yellow{background:linear-gradient(135deg,#ffd43b,#f59f00);box-shadow:0 0 8px rgba(255,212,59,.5)}
.role-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:0.7rem;font-weight:700;letter-spacing:.03em;vertical-align:middle}
.role-admin{background:linear-gradient(135deg,#ff6b6b,#c92a2a);color:#fff}
.role-mod{background:linear-gradient(135deg,#845ef7,#5f3dc4);color:#fff}
.role-user{background:rgba(148,163,184,.15);color:var(--muted)}
.v-label{display:inline-block;padding:1px 8px;border-radius:6px;
font-size:0.7rem;font-weight:600;margin-left:4px;vertical-align:middle;
background:rgba(148,163,184,.12);color:var(--muted);}
.v-label.red{background:rgba(255,77,79,.12);color:#ff8586;border:1px solid rgba(255,77,79,.3)}
.v-label.blue{background:rgba(77,171,247,.12);color:#78c0f8;border:1px solid rgba(77,171,247,.3)}
.v-label.yellow{background:rgba(255,212,59,.12);color:#ffd93b;border:1px solid rgba(255,212,59,.3)}
/* ===== 认证徽章 v2.4 — 精致美化 ===== */
.badge-v{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:18px !important;
height:18px !important;
border-radius:50% !important;
color:#fff !important;
font-size:11px !important;
font-weight:800 !important;
vertical-align:middle;
position:relative;
flex-shrink:0;
transition:transform .2s, box-shadow .2s;
text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.badge-v:hover{transform:scale(1.15);}
/* 红V — 个人认证（玫瑰金渐变） */
.v-red{
background:radial-gradient(circle at 30% 30%, #ff8787, #ef4444 40%, #b91c1c 100%) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.2) inset,
0 2px 8px rgba(239,68,68,.6),
0 0 12px rgba(239,68,68,.35) !important;
}
.v-red::after{
content:"";position:absolute;inset:2px;border-radius:50%;
background:linear-gradient(135deg,rgba(255,255,255,.4),transparent 60%);
pointer-events:none;
}
/* 蓝V — 企业认证（深海蓝钻石渐变） */
.v-blue{
background:radial-gradient(circle at 30% 30%, #93c5fd, #3b82f6 40%, #1e40af 100%) !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.2) inset,
0 2px 8px rgba(59,130,246,.6),
0 0 12px rgba(59,130,246,.35) !important;
}
.v-blue::after{
content:"";position:absolute;inset:2px;border-radius:50%;
background:linear-gradient(135deg,rgba(255,255,255,.4),transparent 60%);
pointer-events:none;
}
/* 黄V — 官方认证（黄金渐变） */
.v-yellow{
background:radial-gradient(circle at 30% 30%, #fde68a, #f59e0b 40%, #b45309 100%) !important;
color:#000 !important;
box-shadow:
0 0 0 1px rgba(255,255,255,.3) inset,
0 2px 8px rgba(245,158,11,.6),
0 0 14px rgba(245,158,11,.45) !important;
}
.v-yellow::after{
content:"";position:absolute;inset:2px;border-radius:50%;
background:linear-gradient(135deg,rgba(255,255,255,.6),transparent 60%);
pointer-events:none;
}
/* 大号徽章（个人主页用） */
.badge-v.lg{
width:22px !important;
height:22px !important;
font-size:13px !important;
}
/* 认证说明标签（重做） */
.v-label{
display:inline-flex !important;
align-items:center;
gap:4px;
padding:2px 10px !important;
border-radius:8px !important;
font-size:0.72rem !important;
font-weight:700 !important;
letter-spacing:0.02em;
vertical-align:middle;
border:1px solid transparent;
position:relative;
overflow:hidden;
}
.v-label::before{
content:"";position:absolute;left:0;top:0;height:100%;width:3px;
background:currentColor;opacity:.9;
}
.v-label.red{
background:linear-gradient(90deg,rgba(239,68,68,.18),rgba(239,68,68,.05)) !important;
color:#ff9c9c !important;
border-color:rgba(239,68,68,.35) !important;
}
.v-label.blue{
background:linear-gradient(90deg,rgba(59,130,246,.18),rgba(59,130,246,.05)) !important;
color:#93c5fd !important;
border-color:rgba(59,130,246,.35) !important;
}
.v-label.yellow{
background:linear-gradient(90deg,rgba(245,158,11,.18),rgba(245,158,11,.05)) !important;
color:#fcd34d !important;
border-color:rgba(245,158,11,.35) !important;
}
/* ===== v2.5 认证 V 徽章 — QQ 风格 ===== */
.badge-v{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:18px !important;
height:18px !important;
border-radius:50% !important;
font-size:0 !important;
vertical-align:middle;
position:relative;
flex-shrink:0;
transition:transform .2s;
color:#fff;
text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.badge-v::before{
content:'V';
font-size:12px;
line-height:1;
font-family:Georgia, "Times New Roman", "Songti SC", serif;
font-style:italic;
font-weight:900;
transform:scaleX(1.15);
display:block;
}
.badge-v:hover{ transform:scale(1.15); }
.badge-v.lg{
width:24px !important;
height:24px !important;
}
.badge-v.lg::before{ font-size:16px; }
/* 红 V — 个人认证 */
.v-red{
background:radial-gradient(circle at 30% 25%, #ff9d9d 0%, #ef4444 45%, #991b1b 100%) !important;
box-shadow:
inset 0 -2px 4px rgba(0,0,0,.3),
inset 0 2px 3px rgba(255,255,255,.45),
0 2px 8px rgba(239,68,68,.6),
0 0 10px rgba(239,68,68,.35) !important;
}
/* 蓝 V — 企业认证 */
.v-blue{
background:radial-gradient(circle at 30% 25%, #93c5fd 0%, #3b82f6 45%, #1e40af 100%) !important;
box-shadow:
inset 0 -2px 4px rgba(0,0,0,.3),
inset 0 2px 3px rgba(255,255,255,.45),
0 2px 8px rgba(59,130,246,.65),
0 0 10px rgba(59,130,246,.4) !important;
}
/* 黄 V — 官方认证 */
.v-yellow{
background:radial-gradient(circle at 30% 25%, #fef08a 0%, #f59e0b 45%, #92400e 100%) !important;
color:#3d2400 !important;
text-shadow:0 1px 1px rgba(255,255,255,.35) !important;
box-shadow:
inset 0 -2px 4px rgba(0,0,0,.25),
inset 0 2px 3px rgba(255,255,255,.65),
0 2px 8px rgba(245,158,11,.7),
0 0 12px rgba(245,158,11,.5) !important;
}
/* ===== v2.5 通知数字气泡 ===== */
.notif-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:18px;
height:18px;
padding:0 6px;
margin-left:6px;
border-radius:10px;
background:linear-gradient(135deg,#ef4444,#dc2626);
color:#fff !important;
font-size:0.7rem !important;
font-weight:800 !important;
line-height:1;
letter-spacing:0 !important;
box-shadow:
0 0 0 2px rgba(15,20,25,.9),
0 2px 6px rgba(239,68,68,.5);
animation:notifPulse 2s ease-in-out infinite;
text-shadow:0 1px 1px rgba(0,0,0,.3);
}
@keyframes notifPulse{
0%,100%{ transform:scale(1); }
50%{
transform:scale(1.1);
box-shadow:
0 0 0 2px rgba(15,20,25,.9),
0 4px 12px rgba(239,68,68,.75);
}
}
/* ===== v2.6 认证 V 徽章 — 六边形星形盾 ===== */
.badge-v{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:20px !important;
height:20px !important;
flex-shrink:0;
vertical-align:middle;
position:relative;
font-size:0 !important;
transition:transform .2s;
border:none !important;
background:transparent !important;
box-shadow:none !important;
border-radius:0 !important;
}
.badge-v:hover{ transform:scale(1.18); }
/* 六边形本体 */
.badge-v::before{
content:'';
position:absolute;
inset:0;
clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
background: var(--badge-grad, #888);
filter: drop-shadow(0 2px 5px var(--badge-glow, rgba(0,0,0,.4)));
}
/* 内部白色对勾 */
.badge-v::after{
content:'✓';
position:relative;
z-index:1;
color:#fff;
font-size:11px !important;
font-weight:900;
line-height:1;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
font-family: Arial, sans-serif;
}
/* 大尺寸版本（个人主页） */
.badge-v.lg{
width:28px !important;
height:28px !important;
}
.badge-v.lg::after{
font-size:17px !important;
}
/* 红 V — 个人认证 */
.v-red{
--badge-grad: linear-gradient(135deg, #ff8a8a 0%, #ef4444 45%, #b91c1c 100%);
--badge-glow: rgba(239,68,68,.7);
}
/* 蓝 V — 企业认证 */
.v-blue{
--badge-grad: linear-gradient(135deg, #7dd3fc 0%, #3b82f6 45%, #1e40af 100%);
--badge-glow: rgba(59,130,246,.75);
}
/* 黄 V — 官方认证 */
.v-yellow{
--badge-grad: linear-gradient(135deg, #fef08a 0%, #f59e0b 45%, #92400e 100%);
--badge-glow: rgba(245,158,11,.8);
}
.v-yellow::after{
color:#3d2400 !important;
text-shadow: 0 1px 1px rgba(255,255,255,.4) !important;
}
/* ===== v2.7 认证 V 徽章 — 盾牌形状 ===== */
.badge-v{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:20px !important;
height:22px !important;
flex-shrink:0;
vertical-align:middle;
position:relative;
font-size:0 !important;
transition:transform .2s;
border:none !important;
background:transparent !important;
box-shadow:none !important;
border-radius:0 !important;
}
.badge-v:hover{ transform:scale(1.18); }
/* 盾牌本体：顶部略圆，两侧垂直，底部尖角 */
.badge-v::before{
content:'';
position:absolute;
inset:0;
clip-path: polygon(
50% 0%,
100% 10%,
100% 65%,
50% 100%,
0% 65%,
0% 10%
);
background: var(--badge-grad, #888);
filter: drop-shadow(0 2px 5px var(--badge-glow, rgba(0,0,0,.4)));
}
/* 盾牌顶部高光条 */
.badge-v > i{
display:none;
}
/* 内部白色对勾 */
.badge-v::after{
content:'✓';
position:relative;
z-index:1;
color:#fff;
font-size:11px !important;
font-weight:900;
line-height:1;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
font-family: Arial, sans-serif;
transform: translateY(-1px);
}
/* 大尺寸版本（个人主页） */
.badge-v.lg{
width:30px !important;
height:33px !important;
}
.badge-v.lg::after{
font-size:18px !important;
}
/* 红 V — 个人认证 */
.v-red{
--badge-grad: linear-gradient(160deg, #ff9a9a 0%, #ef4444 40%, #991b1b 100%);
--badge-glow: rgba(239,68,68,.7);
}
/* 蓝 V — 企业认证 */
.v-blue{
--badge-grad: linear-gradient(160deg, #93c5fd 0%, #3b82f6 40%, #1e3a8a 100%);
--badge-glow: rgba(59,130,246,.75);
}
/* 黄 V — 官方认证 */
.v-yellow{
--badge-grad: linear-gradient(160deg, #fef08a 0%, #f59e0b 40%, #78350f 100%);
--badge-glow: rgba(245,158,11,.8);
}
.v-yellow::after{
color:#3d2400 !important;
text-shadow: 0 1px 1px rgba(255,255,255,.5) !important;
}
/* ===== v2.8 认证徽章 — 简洁精致圆勾 ===== */
.badge-v{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:18px !important;
height:18px !important;
border-radius:50% !important;
flex-shrink:0;
vertical-align:middle;
position:relative;
font-size:0 !important;
transition: transform .2s, box-shadow .2s;
border:none !important;
background:transparent !important;
box-shadow:none !important;
}
.badge-v:hover{ transform: scale(1.15); }
/* 勾勾符号 */
.badge-v::after{
content:''; position:absolute;
width:5px; height:9px;
border:solid #fff;
border-width:0 2px 2px 0;
transform: rotate(45deg) translate(-1px, -1px);
z-index:2;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
/* 圆形底 + 立体感 */
.badge-v::before{
content:''; position:absolute; inset:0;
border-radius:50%;
background: var(--g);
box-shadow:
inset 0 -2px 3px rgba(0,0,0,.25),
inset 0 2px 3px rgba(255,255,255,.45),
0 2px 6px var(--glow),
0 0 10px var(--glow);
}
/* 大号（个人主页） */
.badge-v.lg{
width:26px !important;
height:26px !important;
}
.badge-v.lg::after{
width:7px; height:13px;
border-width:0 3px 3px 0;
transform: rotate(45deg) translate(-1px, -2px);
}
/* 红 V */
.v-red{
--g: linear-gradient(140deg, #ff8a8a 0%, #ef4444 45%, #b91c1c 100%);
--glow: rgba(239,68,68,.55);
}
/* 蓝 V */
.v-blue{
--g: linear-gradient(140deg, #7dd3fc 0%, #3b82f6 45%, #1e40af 100%);
--glow: rgba(59,130,246,.6);
}
/* 黄 V */
.v-yellow{
--g: linear-gradient(140deg, #fde68a 0%, #f59e0b 45%, #b45309 100%);
--glow: rgba(245,158,11,.65);
}
/* ===== v2.9 认证徽章 — Bootstrap patch-check-fill ===== */
.badge-v{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:20px !important;
height:20px !important;
flex-shrink:0;
vertical-align:middle;
position:relative;
font-size:16px !important;
line-height:1;
transition:transform .18s;
border:none !important;
background:transparent !important;
box-shadow:none !important;
}
.badge-v:hover{ transform: scale(1.15); }
/* 用 ::before 渲染 bi-patch-check-fill 图标 */
.badge-v::before{
content:''; position:absolute; inset:0;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
background: var(--c, #888);
filter: drop-shadow(0 1px 3px var(--glow, rgba(0,0,0,.4)));
}
/* 大号（个人主页） */
.badge-v.lg{
width:28px !important;
height:28px !important;
font-size:22px !important;
}
.badge-v.lg::before{
filter: drop-shadow(0 2px 5px var(--glow, rgba(0,0,0,.5)));
}
/* 红 V */
.v-red{
--c: linear-gradient(140deg, #ff8a8a 0%, #ef4444 50%, #b91c1c 100%);
--glow: rgba(239,68,68,.6);
}
/* 蓝 V */
.v-blue{
--c: linear-gradient(140deg, #7dd3fc 0%, #3b82f6 50%, #1e40af 100%);
--glow: rgba(59,130,246,.65);
}
/* 黄 V */
.v-yellow{
--c: linear-gradient(140deg, #fde68a 0%, #f59e0b 50%, #b45309 100%);
--glow: rgba(245,158,11,.7);
}
/* ===== 自定义角色：跟 mod 标签统一风格 ===== */
.role-tag.role-custom,
.role-custom{
display:inline-flex !important;
align-items:center;
gap:4px;
padding:2px 8px !important;
border-radius:4px !important;
font-size:0.7rem !important;
font-weight:700 !important;
letter-spacing:.03em;
line-height:1.3;
border:1px solid rgba(255,255,255,.08);
}
.role-custom i{
font-size:0.85em;
line-height:1;
}
/* ===== v3.0 认证徽章 — patch 形状 + V ===== */
.badge-v{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:20px !important;
height:20px !important;
flex-shrink:0;
vertical-align:middle;
position:relative;
transition:transform .18s;
border:none !important;
background:transparent !important;
box-shadow:none !important;
}
.badge-v:hover{ transform:scale(1.15); }
/* patch 外形（Bootstrap patch-check-fill 去掉内部勾的轮廓） */
.badge-v::before{
content:''; position:absolute; inset:0;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
background: var(--c, #888);
filter: drop-shadow(0 1px 3px var(--glow, rgba(0,0,0,.4)));
}
/* 中间的 V 字符 */
.badge-v::after{
content:'V';
position:relative;
z-index:1;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 900;
font-size: 11px;
line-height: 1;
color:#fff;
transform: translateY(-1px);
text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
/* 大号 */
.badge-v.lg{
width:30px !important;
height:30px !important;
}
.badge-v.lg::after{
font-size:17px;
transform: translateY(-2px);
}
/* 颜色 */
.v-red{
--c: linear-gradient(140deg, #ff8a8a 0%, #ef4444 50%, #b91c1c 100%);
--glow: rgba(239,68,68,.6);
}
.v-blue{
--c: linear-gradient(140deg, #7dd3fc 0%, #3b82f6 50%, #1e40af 100%);
--glow: rgba(59,130,246,.65);
}
.v-yellow{
--c: linear-gradient(140deg, #fde68a 0%, #f59e0b 50%, #b45309 100%);
--glow: rgba(245,158,11,.7);
}
.v-yellow::after{
color:#3d2400;
text-shadow: 0 1px 1px rgba(255,255,255,.4);
}
/* ===== 称号标签（跟 MOD/ADMIN 同风格） ===== */
.role-tag,
.role-custom{
display:inline-flex !important;
align-items:center;
gap:4px;
padding:2px 8px !important;
border-radius:4px !important;
font-size:0.7rem !important;
font-weight:700 !important;
letter-spacing:.03em;
line-height:1.35;
vertical-align:middle;
border:1px solid rgba(255,255,255,.08);
}
.role-custom i{
font-size:0.85em;
line-height:1;
}
/* ===== v3.1 认证徽章 — 微博风格（V圆 + 药丸标签） ===== */
.badge-v{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:20px !important;
height:20px !important;
border-radius:50% !important;
flex-shrink:0;
vertical-align:middle;
position:relative;
transition:transform .18s;
border:none !important;
background:transparent !important;
box-shadow:none !important;
}
.badge-v:hover{ transform:scale(1.15); }
/* 圆形底色 */
.badge-v::before{
content:''; position:absolute; inset:0;
border-radius:50%;
background: var(--grad, #888);
box-shadow:
inset 0 -2px 3px rgba(0,0,0,.25),
inset 0 2px 2px rgba(255,255,255,.45),
0 2px 5px var(--glow, rgba(0,0,0,.3));
}
/* 白色 V */
.badge-v::after{
content:'V';
position:relative;
z-index:1;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 900;
font-size: 11px;
line-height: 1;
color: #fff;
transform: translateY(-1px);
text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
/* 大号（个人主页） */
.badge-v.lg{
width:26px !important;
height:26px !important;
}
.badge-v.lg::after{
font-size:15px;
transform: translateY(-1px);
}
/* 认证说明标签 — 微博药丸风格 */
.v-label{
display:inline-flex !important;
align-items:center;
padding: 3px 12px !important;
border-radius: 9999px !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
vertical-align:middle;
border: 1.5px solid var(--b) !important;
background: var(--bg) !important;
color: var(--c) !important;
margin-left: 5px;
line-height: 1.4;
text-shadow: none !important;
}
.v-label::before{
display: none !important;
}
/* 红 V */
.v-red{
--grad: linear-gradient(140deg, #ff8a8a 0%, #ef4444 50%, #b91c1c 100%);
--glow: rgba(239,68,68,.55);
}
.v-label.red{
--b: rgba(239,68,68,.65);
--bg: rgba(239,68,68,.12);
--c: #ff9c9c;
}
/* 蓝 V */
.v-blue{
--grad: linear-gradient(140deg, #7dd3fc 0%, #3b82f6 50%, #1e40af 100%);
--glow: rgba(59,130,246,.6);
}
.v-label.blue{
--b: rgba(59,130,246,.65);
--bg: rgba(59,130,246,.12);
--c: #93c5fd;
}
/* 黄 V — 跟新浪认证一致的橙色 */
.v-yellow{
--grad: linear-gradient(140deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
--glow: rgba(245,158,11,.7);
}
.v-label.yellow{
--b: rgba(245,158,11,.7);
--bg: rgba(245,158,11,.12);
--c: #fcd34d;
}
.v-yellow::after{
color: #fff;
text-shadow: 0 1px 2px rgba(120,53,15,.6);
}
/* ===== v3.2 修复：药丸不换行、不挤压 ===== */
.badge-v{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:20px !important;
height:20px !important;
min-width:20px !important;
min-height:20px !important;
border-radius:50% !important;
flex: 0 0 auto !important;
flex-shrink: 0 !important;
vertical-align:middle;
position:relative;
transition:transform .18s;
border:none !important;
background:transparent !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
}
.badge-v:hover{ transform:scale(1.15); }
.badge-v::before{
content:''; position:absolute; inset:0;
border-radius:50%;
background: var(--grad, #888);
box-shadow:
inset 0 -2px 3px rgba(0,0,0,.25),
inset 0 2px 2px rgba(255,255,255,.45),
0 2px 5px var(--glow, rgba(0,0,0,.3));
}
.badge-v::after{
content:'V';
position:relative;
z-index:1;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 900;
font-size: 11px;
line-height: 1;
color: #fff;
transform: translateY(-1px);
text-shadow: 0 1px 1px rgba(0,0,0,.35);
display:block;
}
.badge-v.lg{
width:26px !important;
height:26px !important;
min-width:26px !important;
min-height:26px !important;
}
.badge-v.lg::after{
font-size:15px;
}
/* 药丸标签 — 关键修复 */
.v-label{
display:inline-flex !important;
align-items:center;
justify-content:center;
padding: 3px 12px !important;
border-radius: 9999px !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
vertical-align:middle;
border: 1.5px solid var(--b) !important;
background: var(--bg) !important;
color: var(--c) !important;
margin-left: 6px !important;
line-height: 1.4 !important;
text-shadow: none !important;
/* ⭐关键三行：不换行、不压缩、不拆字 */
white-space: nowrap !important;
flex-shrink: 0 !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
writing-mode: horizontal-tb !important;
}
.v-label::before{ display: none !important; }
/* 红 V */
.v-red{ --grad: linear-gradient(140deg, #ff8a8a 0%, #ef4444 50%, #b91c1c 100%); --glow: rgba(239,68,68,.55); }
.v-label.red{ --b: rgba(239,68,68,.65); --bg: rgba(239,68,68,.12); --c: #ff9c9c; }
/* 蓝 V */
.v-blue{ --grad: linear-gradient(140deg, #7dd3fc 0%, #3b82f6 50%, #1e40af 100%); --glow: rgba(59,130,246,.6); }
.v-label.blue{ --b: rgba(59,130,246,.65); --bg: rgba(59,130,246,.12); --c: #93c5fd; }
/* 黄 V */
.v-yellow{ --grad: linear-gradient(140deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%); --glow: rgba(245,158,11,.7); }
.v-label.yellow{ --b: rgba(245,158,11,.7); --bg: rgba(245,158,11,.12); --c: #fcd34d; }
.v-yellow::after{ color:#fff; text-shadow: 0 1px 2px rgba(120,53,15,.6); }
/* 让 V 徽章 + 药丸 + 角色标签 一排整齐 */
.profile-name-row,
.p-info > div:first-child{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
}
/* ===== v3.3 简洁圆 V 徽章 ===== */
.badge-v{
display:inline-flex !important;
align-items:center;
justify-content:center;
width:18px !important;
height:18px !important;
min-width:18px !important;
border-radius:50% !important;
flex-shrink:0 !important;
vertical-align:middle;
position:relative;
transition:transform .15s;
border:none !important;
box-shadow:none !important;
padding:0 !important;
margin:0 !important;
background: var(--grad, #3b82f6);
}
.badge-v:hover{ transform:scale(1.15); }
/* V 字母 */
.badge-v::before{
content:'V';
color:#fff;
font-family: -apple-system, "Segoe UI", Arial, sans-serif;
font-weight: 900;
font-size: 11px;
line-height: 1;
display:block;
letter-spacing: 0;
transform: translateY(-0.5px);
}
/* 大号 */
.badge-v.lg{
width:24px !important;
height:24px !important;
min-width:24px !important;
}
.badge-v.lg::before{ font-size:15px; }
/* 红 */
.v-red{ --grad: #ef4444; }
/* 蓝 */
.v-blue{ --grad: #3b82f6; }
/* 黄 */
.v-yellow{ --grad: #f59e0b; }
.v-yellow::before{ color:#fff; }
/* ===== 极简认证文字标签 ===== */
.v-label{
display:inline-flex !important;
align-items:center;
padding: 0 !important;
border: none !important;
background: transparent !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
margin-left: 6px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
vertical-align: middle;
line-height: 1.4 !important;
text-shadow: none !important;
}
.v-label::before{ display:none !important; }
.v-label.red{ color: #ff9c9c !important; }
.v-label.blue{ color: #93c5fd !important; }
.v-label.yellow{ color: #fcd34d !important; }
/* ===== v3.4 认证标签 — 单胶囊整体 ===== */
.v-badge{
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 2px 10px 2px 2px !important;
border-radius: 9999px !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
vertical-align: middle !important;
margin-left: 6px !important;
line-height: 1.5 !important;
border: 1px solid !important;
transition: transform .15s, box-shadow .15s;
text-shadow: none !important;
}
.v-badge:hover{ transform: translateY(-1px); }
/* 内部 V 圆 */
.v-badge .v-icon{
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
font-size: 11px !important;
font-weight: 900 !important;
color: #fff !important;
flex-shrink: 0 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-style: italic !important;
line-height: 1 !important;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
box-shadow: inset 0 -2px 3px rgba(0,0,0,.2), inset 0 2px 3px rgba(255,255,255,.35);
}
.v-badge .v-text{
display: inline-block !important;
white-space: nowrap !important;
color: inherit !important;
}
/* 红 V — 个人认证 */
.v-badge.red{
background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,.04)) !important;
border-color: rgba(239,68,68,.4) !important;
color: #ff9c9c !important;
}
.v-badge.red .v-icon{
background: linear-gradient(135deg, #ff7070, #b91c1c) !important;
box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.4), 0 2px 5px rgba(239,68,68,.5);
}
/* 蓝 V — 企业认证 */
.v-badge.blue{
background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(59,130,246,.04)) !important;
border-color: rgba(59,130,246,.4) !important;
color: #93c5fd !important;
}
.v-badge.blue .v-icon{
background: linear-gradient(135deg, #60a5fa, #1e40af) !important;
box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.4), 0 2px 5px rgba(59,130,246,.5);
}
/* 黄 V — 官方认证 */
.v-badge.yellow{
background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.04)) !important;
border-color: rgba(245,158,11,.4) !important;
color: #fcd34d !important;
}
.v-badge.yellow .v-icon{
background: linear-gradient(135deg, #fbbf24, #b45309) !important;
color: #3d2400 !important;
box-shadow: inset 0 -2px 3px rgba(0,0,0,.2), inset 0 2px 3px rgba(255,255,255,.5), 0 2px 5px rgba(245,158,11,.5);
}
/* 大号 */
.v-badge.lg{ font-size: 0.82rem !important; padding: 3px 12px 3px 3px !important; }
.v-badge.lg .v-icon{ width: 22px !important; height: 22px !important; font-size: 14px !important; }
/* 兼容旧 class（防止遗漏调用） */
.badge-v, .v-label{ display: none !important; }
/* ===== v3.5 认证徽章 — 小巧精致版 ===== */
.v-badge{
display:inline-flex !important;
align-items:center !important;
gap:4px !important;
padding:1px 8px 1px 1px !important;
border-radius:9999px !important;
font-size:0.68rem !important;
font-weight:700 !important;
white-space:nowrap !important;
flex-shrink:0 !important;
vertical-align:middle !important;
margin-left:4px !important;
line-height:1.5 !important;
border:1px solid !important;
transition:transform .15s;
text-shadow:none !important;
}
.v-badge:hover{ transform:translateY(-1px); }
.v-badge .v-icon{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:15px !important;
height:15px !important;
min-width:15px !important;
border-radius:50% !important;
font-size:9px !important;
font-weight:900 !important;
color:#fff !important;
flex-shrink:0 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-style:italic !important;
line-height:1 !important;
box-shadow:
inset 0 -1px 2px rgba(0,0,0,.2),
inset 0 1px 2px rgba(255,255,255,.35);
}
.v-badge .v-text{
display:inline-block !important;
white-space:nowrap !important;
color:inherit !important;
}
/* 红 V */
.v-badge.red{
background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.03)) !important;
border-color: rgba(239,68,68,.35) !important;
color: #ff9c9c !important;
}
.v-badge.red .v-icon{
background: linear-gradient(135deg, #ff7070, #b91c1c) !important;
}
/* 蓝 V */
.v-badge.blue{
background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(59,130,246,.03)) !important;
border-color: rgba(59,130,246,.35) !important;
color: #93c5fd !important;
}
.v-badge.blue .v-icon{
background: linear-gradient(135deg, #60a5fa, #1e40af) !important;
}
/* 黄 V */
.v-badge.yellow{
background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.03)) !important;
border-color: rgba(245,158,11,.35) !important;
color: #fcd34d !important;
}
.v-badge.yellow .v-icon{
background: linear-gradient(135deg, #fbbf24, #b45309) !important;
color: #3d2400 !important;
}
/* 大号（个人主页） */
.v-badge.lg{
font-size:0.75rem !important;
padding:2px 10px 2px 2px !important;
}
.v-badge.lg .v-icon{
width:18px !important;
height:18px !important;
min-width:18px !important;
font-size:11px !important;
}
/* ===== v3.5 称号胶囊 — 跟认证徽章同风格，但纯文字 ===== */
.title-badge,
.role-custom{
display:inline-flex !important;
align-items:center;
gap:3px;
padding:1px 8px !important;
border-radius:9999px !important;
font-size:0.68rem !important;
font-weight:700 !important;
white-space:nowrap !important;
flex-shrink:0 !important;
vertical-align:middle !important;
margin-left:0 !important;
line-height:1.5 !important;
border:1px solid !important;
transition:transform .15s;
letter-spacing:0 !important;
text-shadow:none !important;
}
.title-badge:hover,
.role-custom:hover{ transform:translateY(-1px); }
.title-badge i,
.role-custom i{
font-size:0.75rem;
line-height:1;
}
/* 兼容旧 ADMIN/MOD 标签 */
.role-tag{
display:inline-flex !important;
align-items:center;
padding:1px 8px !important;
border-radius:9999px !important;
font-size:0.68rem !important;
font-weight:800 !important;
white-space:nowrap !important;
letter-spacing:.03em;
line-height:1.5 !important;
vertical-align:middle;
}
.role-admin{
background:linear-gradient(135deg, #ff7070, #b91c1c) !important;
color:#fff !important;
border:1px solid rgba(255,112,112,.5) !important;
}
.role-mod{
background:linear-gradient(135deg, #a78bfa, #6d28d9) !important;
color:#fff !important;
border:1px solid rgba(167,139,250,.5) !important;
}
/* 隐藏旧徽章 */
.badge-v, .v-label{ display:none !important; }
/* ===== v3.6 强制显示 v-text ===== */
.v-badge .v-text{
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
white-space: nowrap !important;
color: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
}
.v-badge{
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* 称号胶囊 - 保证可见 */
.title-badge{
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
white-space: nowrap !important;
}
/* 隐藏旧类 */
.badge-v,
.v-label{
display: none !important;
}
/* ===== v3.8 认证徽章 — 前台统一金色 ===== */
.v-badge{
display:inline-flex !important;
align-items:center !important;
gap:4px !important;
padding:1px 8px 1px 1px !important;
border-radius:9999px !important;
font-size:0.68rem !important;
font-weight:700 !important;
white-space:nowrap !important;
flex-shrink:0 !important;
vertical-align:middle !important;
margin-left:4px !important;
line-height:1.5 !important;
/* ⭐统一金色：前台不区分类型 */
background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.03)) !important;
border: 1px solid rgba(245,158,11,.35) !important;
color: #fcd34d !important;
transition: transform .15s;
text-shadow:none !important;
}
.v-badge:hover{ transform:translateY(-1px); }
.v-badge .v-icon{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:14px !important;
height:14px !important;
min-width:14px !important;
border-radius:50% !important;
font-size:9px !important;
font-weight:900 !important;
color:#3d2400 !important;
flex-shrink:0 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-style:italic !important;
line-height:1 !important;
background: linear-gradient(135deg, #fbbf24, #b45309) !important;
box-shadow:
inset 0 -1px 2px rgba(0,0,0,.2),
inset 0 1px 2px rgba(255,255,255,.35);
}
/* 只有 V 无文字：正方形 */
.v-badge:not(:has(.v-text)){
padding: 1px !important;
width: 18px !important;
justify-content: center !important;
}
.v-badge:not(:has(.v-text)) .v-icon{
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
font-size: 10px !important;
}
.v-badge .v-text{
display:inline-block !important;
white-space:nowrap !important;
color:inherit !important;
}
/* 大号（个人主页） */
.v-badge.lg{
font-size:0.75rem !important;
padding:2px 10px 2px 2px !important;
}
.v-badge.lg .v-icon{
width:18px !important; height:18px !important; min-width:18px !important;
font-size:11px !important;
}
/* ===== 申请页专用：4 色 V 说明 ===== */
.v-demo{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:24px !important;
height:24px !important;
min-width:24px !important;
border-radius:50% !important;
font-size:13px !important;
font-weight:900 !important;
color:#fff !important;
font-family: Georgia, "Times New Roman", serif !important;
font-style:italic !important;
line-height:1 !important;
flex-shrink:0 !important;
}
.v-demo.gray{ background: linear-gradient(135deg, #9ca3af, #374151) !important; }
.v-demo.red{ background: linear-gradient(135deg, #ff7070, #b91c1c) !important; }
.v-demo.blue{ background: linear-gradient(135deg, #60a5fa, #1e40af) !important; }
.v-demo.yellow{ background: linear-gradient(135deg, #fbbf24, #b45309) !important; color:#3d2400 !important; }
/* 兼容旧类隐藏 */
.badge-v, .v-label{ display:none !important; }
/* 旧颜色类统一失效，不再区分 */
.v-badge.red, .v-badge.blue, .v-badge.green, .v-badge.yellow, .v-badge.gray{
background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.03)) !important;
border-color: rgba(245,158,11,.35) !important;
color: #fcd34d !important;
}
.v-badge.red .v-icon, .v-badge.blue .v-icon, .v-badge.green .v-icon,
.v-badge.yellow .v-icon, .v-badge.gray .v-icon{
background: linear-gradient(135deg, #fbbf24, #b45309) !important;
color: #3d2400 !important;
}
/* ===== v3.9 认证徽章 — 4 色区分（只显示名称） ===== */
.v-badge{
display:inline-flex !important;
align-items:center !important;
gap:4px !important;
padding:1px 8px 1px 1px !important;
border-radius:9999px !important;
font-size:0.68rem !important;
font-weight:700 !important;
white-space:nowrap !important;
flex-shrink:0 !important;
vertical-align:middle !important;
margin-left:4px !important;
line-height:1.5 !important;
border:1px solid !important;
transition:transform .15s;
text-shadow:none !important;
}
.v-badge:hover{ transform:translateY(-1px); }
.v-badge .v-icon{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:14px !important;
height:14px !important;
min-width:14px !important;
border-radius:50% !important;
font-size:9px !important;
font-weight:900 !important;
color:#fff !important;
flex-shrink:0 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-style:italic !important;
line-height:1 !important;
box-shadow:
inset 0 -1px 2px rgba(0,0,0,.2),
inset 0 1px 2px rgba(255,255,255,.35);
}
.v-badge:not(:has(.v-text)){
padding: 1px !important;
width: 18px !important;
justify-content: center !important;
}
.v-badge:not(:has(.v-text)) .v-icon{
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
font-size: 10px !important;
}
.v-badge .v-text{
display:inline-block !important;
white-space:nowrap !important;
color:inherit !important;
}
.v-badge.lg{
font-size:0.75rem !important;
padding:2px 10px 2px 2px !important;
}
.v-badge.lg .v-icon{
width:18px !important; height:18px !important; min-width:18px !important;
font-size:11px !important;
}
/* ⚪ 灰 V — 个人认证 */
.v-badge.gray{
background: linear-gradient(135deg, rgba(156,163,175,.12), rgba(156,163,175,.03)) !important;
border-color: rgba(156,163,175,.35) !important;
color: #d1d5db !important;
}
.v-badge.gray .v-icon{
background: linear-gradient(135deg, #9ca3af, #374151) !important;
color: #fff !important;
}
/* 🔴 红 V — 企业认证 */
.v-badge.red{
background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.03)) !important;
border-color: rgba(239,68,68,.35) !important;
color: #ff9c9c !important;
}
.v-badge.red .v-icon{
background: linear-gradient(135deg, #ff7070, #b91c1c) !important;
color: #fff !important;
}
/* 🔵 蓝 V — 机构认证 */
.v-badge.blue{
background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(59,130,246,.03)) !important;
border-color: rgba(59,130,246,.35) !important;
color: #93c5fd !important;
}
.v-badge.blue .v-icon{
background: linear-gradient(135deg, #60a5fa, #1e40af) !important;
color: #fff !important;
}
/* 🟡 金 V — 管理认证 */
.v-badge.yellow{
background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.03)) !important;
border-color: rgba(245,158,11,.35) !important;
color: #fcd34d !important;
}
.v-badge.yellow .v-icon{
background: linear-gradient(135deg, #fbbf24, #b45309) !important;
color: #3d2400 !important;
}
/* 没有颜色 class 时（默认）也给金色 */
.v-badge:not(.gray):not(.red):not(.blue):not(.yellow){
background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.03)) !important;
border-color: rgba(245,158,11,.35) !important;
color: #fcd34d !important;
}
.v-badge:not(.gray):not(.red):not(.blue):not(.yellow) .v-icon{
background: linear-gradient(135deg, #fbbf24, #b45309) !important;
color: #3d2400 !important;
}
/* 申请页 4 色圆 */
.v-demo{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:24px !important;
height:24px !important;
min-width:24px !important;
border-radius:50% !important;
font-size:13px !important;
font-weight:900 !important;
color:#fff !important;
font-family: Georgia, "Times New Roman", serif !important;
font-style:italic !important;
line-height:1 !important;
flex-shrink:0 !important;
}
.v-demo.gray{ background: linear-gradient(135deg, #9ca3af, #374151) !important; }
.v-demo.red{ background: linear-gradient(135deg, #ff7070, #b91c1c) !important; }
.v-demo.blue{ background: linear-gradient(135deg, #60a5fa, #1e40af) !important; }
.v-demo.yellow{ background: linear-gradient(135deg, #fbbf24, #b45309) !important; color:#3d2400 !important; }
/* 隐藏旧类 */
.badge-v, .v-label{ display:none !important; }
/* ===== v4.1 头像角落 V 徽章 ===== */
.avatar { position: relative !important; }
.avatar .av-v {
position: absolute;
bottom: -1px;
right: -1px;
width: 12px;
height: 12px;
min-width: 12px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-weight: 900;
font-size: 7px;
color: #fff;
line-height: 1;
border: 1.5px solid var(--bg, #0f1419);
box-shadow: 0 1px 3px rgba(0,0,0,.5);
z-index: 2;
}
.avatar.sm .av-v { width: 10px; height: 10px; min-width: 10px; font-size: 6px; border-width: 1.5px; }
.avatar.lg .av-v { width: 24px; height: 24px; min-width: 24px; font-size: 14px; border-width: 3px; }
.avatar.xl .av-v { width: 30px; height: 30px; min-width: 30px; font-size: 17px; border-width: 3px; }
/* 颜色 */
.av-v.gray { background: linear-gradient(135deg, #9ca3af, #374151); }
.av-v.red { background: linear-gradient(135deg, #ff7070, #b91c1c); }
.av-v.blue { background: linear-gradient(135deg, #60a5fa, #1e40af); }
.av-v.yellow { background: linear-gradient(135deg, #fbbf24, #b45309); color: #3d2400; }
/* 名字后面的认证名称文字（只显示名称） */
.v-text-pill {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: 9999px;
font-size: 0.68rem;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
margin-left: 4px;
line-height: 1.5;
border: 1px solid;
}
.v-text-pill.gray { background: rgba(156,163,175,.12); border-color: rgba(156,163,175,.3); color: #d1d5db; }
.v-text-pill.red { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #ff9c9c; }
.v-text-pill.blue { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #93c5fd; }
.v-text-pill.yellow { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); color: #fcd34d; }
/* 隐藏行内 V（已移到头像） */
.v-badge { display: none !important; }
/* ===== v4.2 头像角落 V（Bilibili 风格） ===== */
/* 头像容器：允许 V 溢出 */
.avatar,
.p-avatar{
position: relative !important;
overflow: visible !important;
}
/* 头像图片：单独做圆形裁剪 */
.avatar > img,
.p-avatar > img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
}
/* 头像容器本身圆形（文字头像） */
.avatar,
.p-avatar{
border-radius: 50%;
}
/* V 徽章 —— 紧贴头像右下角 */
.av-v{
position: absolute !important;
bottom: -2px !important;
right: -2px !important;
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
max-width: 14px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: Georgia, "Times New Roman", serif !important;
font-style: italic !important;
font-weight: 900 !important;
font-size: 8px !important;
color: #fff !important;
line-height: 1 !important;
border: 2px solid var(--bg, #0f1419) !important;
box-shadow: 0 2px 6px rgba(0,0,0,.5) !important;
z-index: 10 !important;
padding: 0 !important;
margin: 0 !important;
text-shadow: none !important;
}
/* 尺寸适配 */
.avatar.sm .av-v{
width: 12px !important; height: 12px !important; min-width: 12px !important; max-width: 12px !important;
font-size: 7px !important; border-width: 1.5px !important;
bottom: -1px !important; right: -1px !important;
}
.avatar.lg .av-v,
.p-avatar .av-v{
width: 26px !important; height: 26px !important; min-width: 26px !important; max-width: 26px !important;
font-size: 14px !important; border-width: 3px !important;
bottom: -2px !important; right: -2px !important;
}
/* 颜色 */
.av-v.gray { background: linear-gradient(135deg, #9ca3af, #374151) !important; }
.av-v.red { background: linear-gradient(135deg, #ff7070, #b91c1c) !important; }
.av-v.blue { background: linear-gradient(135deg, #60a5fa, #1e40af) !important; }
.av-v.yellow { background: linear-gradient(135deg, #fbbf24, #b45309) !important; color: #3d2400 !important; }
/* 论坛列表头像放大到 36px（否则 V 看不清） */
.post .avatar.sm,
.post-head .avatar.sm{
width: 36px !important;
height: 36px !important;
font-size: 0.9rem !important;
}
/* 名字后面的认证名称文字 */
.v-text-pill{
display: inline-flex !important;
align-items: center !important;
padding: 1px 8px !important;
border-radius: 9999px !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
margin-left: 4px !important;
line-height: 1.5 !important;
border: 1px solid !important;
}
.v-text-pill.gray { background: rgba(156,163,175,.12) !important; border-color: rgba(156,163,175,.3) !important; color: #d1d5db !important; }
.v-text-pill.red { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.3) !important; color: #ff9c9c !important; }
.v-text-pill.blue { background: rgba(59,130,246,.12) !important; border-color: rgba(59,130,246,.3) !important; color: #93c5fd !important; }
.v-text-pill.yellow { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.3) !important; color: #fcd34d !important; }
/* 隐藏行内旧 V（已移到头像） */
.v-badge { display: none !important; }
/* ===== v4.3 认证显示（只名称，无前缀） ===== */
.v-text-pill{
display:inline-flex !important;
align-items:center !important;
padding:1px 8px !important;
border-radius:9999px !important;
font-size:0.68rem !important;
font-weight:700 !important;
white-space:nowrap !important;
flex-shrink:0 !important;
margin-left:4px !important;
line-height:1.5 !important;
border:1px solid !important;
}
.v-text-pill.gray { background: rgba(156,163,175,.12) !important; border-color: rgba(156,163,175,.3) !important; color: #d1d5db !important; }
.v-text-pill.red { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.3) !important; color: #ff9c9c !important; }
.v-text-pill.blue { background: rgba(59,130,246,.12) !important; border-color: rgba(59,130,246,.3) !important; color: #93c5fd !important; }
.v-text-pill.yellow { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.3) !important; color: #fcd34d !important; }
/* 论坛列表头像放大 + V 角标 */
.post .avatar.sm,
.post-head .avatar.sm{
width: 36px !important;
height: 36px !important;
font-size: 0.9rem !important;
overflow: visible !important;
}
.avatar{
position: relative !important;
overflow: visible !important;
}
.avatar img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
border-radius:50% !important;
display:block !important;
}
.av-v{
position: absolute !important;
bottom: -2px !important;
right: -2px !important;
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: Georgia, "Times New Roman", serif !important;
font-style: italic !important;
font-weight: 900 !important;
font-size: 8px !important;
color: #fff !important;
line-height: 1 !important;
border: 2px solid var(--bg, #0f1419) !important;
box-shadow: 0 2px 6px rgba(0,0,0,.5) !important;
z-index: 10 !important;
}
.avatar.sm .av-v{ width:12px !important; height:12px !important; min-width:12px !important; font-size:7px !important; border-width:1.5px !important; }
.av-v.gray { background: linear-gradient(135deg, #9ca3af, #374151) !important; }
.av-v.red { background: linear-gradient(135deg, #ff7070, #b91c1c) !important; }
.av-v.blue { background: linear-gradient(135deg, #60a5fa, #1e40af) !important; }
.av-v.yellow { background: linear-gradient(135deg, #fbbf24, #b45309) !important; color: #3d2400 !important; }
/* 隐藏行内 V */
.v-badge{ display:none !important; }
/* ===== 管理后台用户管理认证列 ===== */
.admin-verify-cell{
display:inline-flex;
align-items:center;
gap:6px;
font-size:0.82rem;
}
.admin-verify-cell .av-v-static{
display:inline-flex;
align-items:center;
justify-content:center;
width:16px;
height:16px;
min-width:16px;
border-radius:50%;
font-family: Georgia, serif;
font-style:italic;
font-weight:900;
font-size:10px;
color:#fff;
}
.admin-verify-cell .av-v-static.gray { background: linear-gradient(135deg, #9ca3af, #374151); }
.admin-verify-cell .av-v-static.red { background: linear-gradient(135deg, #ff7070, #b91c1c); }
.admin-verify-cell .av-v-static.blue { background: linear-gradient(135deg, #60a5fa, #1e40af); }
.admin-verify-cell .av-v-static.yellow { background: linear-gradient(135deg, #fbbf24, #b45309); color:#3d2400; }
/* title-badge 保底 */
.title-badge{
display:inline-flex !important;
align-items:center !important;
gap:3px !important;
padding:1px 8px !important;
border-radius:9999px !important;
font-size:0.68rem !important;
font-weight:700 !important;
white-space:nowrap !important;
vertical-align:middle !important;
line-height:1.5 !important;
flex-shrink:0 !important;
}
.title-badge i{ font-size:0.75rem; line-height:1; }
/* ===== v6.0 头像 V 只显示在头像内 ===== */
/* 默认隐藏所有 .av-v，只有头像容器内的才显示 */
.av-v { display: none !important; }
.avatar .av-v,
.pf-avatar .av-v { display: flex !important; }
/* 头像 V 放大到 60px */
.avatar .av-v,
.pf-avatar .av-v{
position: absolute !important;
bottom: -2px !important;
right: -2px !important;
top: auto !important;
left: auto !important;
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
font-size: 32px !important;
font-weight: 900 !important;
font-family: Georgia, "Times New Roman", serif !important;
font-style: italic !important;
color: #fff !important;
border: 4px solid var(--bg, #0f1419) !important;
border-radius: 50% !important;
box-shadow: 0 6px 20px rgba(0,0,0,.75) !important;
margin: 0 !important;
z-index: 10 !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
padding: 0 !important;
}
/* 小尺寸头像里的 V 也要小 */
.avatar.sm .av-v{
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
font-size: 10px !important;
border-width: 2px !important;
}
.avatar .av-v:not(.lg){ /* 默认尺寸的头像 44px 用 20px V */ }
/* 颜色 */
.av-v.gray { background: linear-gradient(135deg, #9ca3af, #374151) !important; }
.av-v.red { background: linear-gradient(135deg, #ff7070, #b91c1c) !important; }
.av-v.blue { background: linear-gradient(135deg, #60a5fa, #1e40af) !important; }
.av-v.yellow { background: linear-gradient(135deg, #fbbf24, #b45309) !important; color: #3d2400 !important; }
/* ===== v6.3 头像 V 最终样式 ===== */
/* 默认隐藏所有 av-v */
.av-v { display: none !important; }
/* 头像容器定位基准 */
.avatar, .pf-avatar, .lb-avatar {
position: relative !important;
overflow: visible !important;
}
/* V 通用基础样式 */
.avatar .av-v,
.pf-avatar .av-v,
.lb-avatar .av-v {
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: absolute !important;
border-radius: 50% !important;
font-family: Georgia, "Times New Roman", serif !important;
font-style: italic !important;
font-weight: 900 !important;
color: #fff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
border: 2px solid var(--bg, #0f1419) !important;
box-shadow: 0 2px 6px rgba(0,0,0,.6) !important;
line-height: 1 !important;
padding: 0 !important;
margin: 0 !important;
z-index: 10 !important;
box-sizing: border-box !important;
}
/* 默认尺寸（帖子详情作者、评论、个人主页小号等）：18px */
.avatar .av-v {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
font-size: 10px !important;
bottom: -2px !important;
right: -2px !important;
top: auto !important;
left: auto !important;
border-width: 2px !important;
}
/* 小尺寸（列表、评论）：12px */
.avatar.sm .av-v,
.avatar.sm.avatar .av-v {
width: 12px !important;
height: 12px !important;
min-width: 12px !important;
max-width: 12px !important;
font-size: 7px !important;
bottom: -1px !important;
right: -1px !important;
border-width: 1.5px !important;
}
/* 大尺寸（个人主页 pf-avatar）：60px */
.pf-avatar .av-v {
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
font-size: 34px !important;
bottom: -2px !important;
right: -2px !important;
top: auto !important;
left: auto !important;
border-width: 4px !important;
box-shadow: 0 6px 20px rgba(0,0,0,.75) !important;
}
/* 排行榜头像：16px */
.lb-avatar .av-v {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
max-width: 16px !important;
font-size: 9px !important;
bottom: -2px !important;
right: -2px !important;
top: auto !important;
left: auto !important;
border-width: 2px !important;
}
/* 颜色（V 字体全部白色） */
.av-v.gray { background: linear-gradient(135deg, #9ca3af, #374151) !important; color: #fff !important; }
.av-v.red { background: linear-gradient(135deg, #ff7070, #b91c1c) !important; color: #fff !important; }
.av-v.blue { background: linear-gradient(135deg, #60a5fa, #1e40af) !important; color: #fff !important; }
.av-v.yellow { background: linear-gradient(135deg, #fbbf24, #d97706) !important; color: #fff !important; }
/* ===== v6.5 头像 V 50px ===== */
.pf-avatar .av-v{
width: 50px !important;
height: 50px !important;
min-width: 50px !important;
max-width: 50px !important;
font-size: 28px !important;
bottom: -2px !important;
right: -2px !important;
top: auto !important;
left: auto !important;
border-width: 3.5px !important;
box-shadow: 0 5px 16px rgba(0,0,0,.7) !important;
color: #fff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.4) !important;
font-family: Georgia, "Times New Roman", serif !important;
font-style: italic !important;
font-weight: 900 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
position: absolute !important;
z-index: 10 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ===== v7.1 只显示头像内的 V ===== */
/* 先全部隐藏 */
.av-v{ display: none !important; }
/* 再恢复头像容器内的 V */
.avatar .av-v,
.avatar > .av-v,
.pf-avatar .av-v,
.pf-avatar > .av-v,
.lb-avatar .av-v,
.lb-avatar > .av-v{
display: flex !important;
}
/* 描述行里的 V（pf-v-icon）不受影响，保留显示 */
.pf-v-icon{
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ===== 美化 ADMIN / MOD 标签 ===== */
.role-tag{
display:inline-flex !important;
align-items:center;
gap:3px;
padding:1px 7px !important;
border-radius:4px !important;
font-size:0.62rem !important;
font-weight:800 !important;
letter-spacing:0.06em !important;
line-height:1.5 !important;
vertical-align:middle !important;
text-transform:uppercase;
white-space:nowrap;
flex-shrink:0;
position:relative;
margin-left:4px;
text-shadow:none !important;
font-family:-apple-system, "Segoe UI", Roboto, sans-serif !important;
}
/* ADMIN — 深红渐变 + 微光 */
.role-tag.role-admin{
background:linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.15) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.2),
0 1px 3px rgba(220,38,38,.4) !important;
}
.role-tag.role-admin::before{
content:'';
width:4px;
height:4px;
border-radius:50%;
background:#fff;
opacity:.8;
margin-right:3px;
box-shadow:0 0 4px #fff;
}
/* MOD — 紫色渐变 */
.role-tag.role-mod{
background:linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.15) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.2),
0 1px 3px rgba(139,92,246,.4) !important;
}
.role-tag.role-mod::before{
content:'';
width:4px;
height:4px;
border-radius:50%;
background:#fff;
opacity:.8;
margin-right:3px;
box-shadow:0 0 4px #fff;
}
/* 自定义称号标签也顺便美化（小一点） */
.title-badge{
padding:1px 7px !important;
font-size:0.62rem !important;
font-weight:700 !important;
border-radius:4px !important;
line-height:1.5 !important;
}
.title-badge i{
font-size:0.68rem !important;
}
/* ===== 商务 Hero 信息条 ===== */
.hero-badge{
display:inline-flex;
align-items:center;
gap:10px;
padding:6px 16px;
border-radius:999px;
background:rgba(56,189,248,.1);
border:1px solid rgba(56,189,248,.3);
color:#60a5fa;
font-size:0.82rem;
font-weight:600;
letter-spacing:.02em;
margin-bottom:28px;
}
.hero-badge .dot{
width:6px;
height:6px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 8px #22c55e;
animation:heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse{
50%{ opacity:.4; }
}
.hero-info{
margin-top:44px;
display:inline-flex;
align-items:center;
gap:0;
padding:16px 28px;
background:rgba(20,30,55,.6);
border:1px solid rgba(56,189,248,.15);
border-radius:14px;
backdrop-filter:blur(10px);
flex-wrap:wrap;
justify-content:center;
}
.hero-info-item{
display:flex;
flex-direction:column;
gap:4px;
padding:0 24px;
min-width:120px;
}
.hero-info-item .lbl{
color:rgba(148,163,184,.7);
font-size:0.72rem;
text-transform:uppercase;
letter-spacing:.08em;
}
.hero-info-item code{
color:#60a5fa;
font-size:0.92rem;
font-family:"SF Mono", "Courier New", monospace;
background:transparent;
padding:0;
}
.hero-info-item .val{
color:#e5e7eb;
font-size:0.95rem;
font-weight:700;
display:flex;
align-items:center;
gap:6px;
}
.hero-info-item .val em{
font-style:normal;
color:rgba(148,163,184,.7);
font-weight:500;
font-size:0.85rem;
}
.hero-info-sep{
width:1px;
height:32px;
background:rgba(148,163,184,.15);
}
.status-online{
color:#4ade80 !important;
}
.status-online .dot{
width:8px;
height:8px;
border-radius:50%;
background:#4ade80;
box-shadow:0 0 8px #4ade80;
display:inline-block;
}
@media (max-width:768px){
.hero-info-item{ padding:8px 12px; min-width:0; }
.hero-info-sep{ display:none; }
}
/* ===== 本地测试中状态 ===== */
.status-testing{
color:#fbbf24 !important;
}
.status-testing .dot{
width:8px;
height:8px;
border-radius:50%;
background:#fbbf24;
box-shadow:0 0 8px #fbbf24;
display:inline-block;
animation:testingPulse 2s ease-in-out infinite;
}
@keyframes testingPulse{
0%,100%{ opacity:1; }
50%{ opacity:.4; }
}
/* ===== 品牌名自适应 ===== */
.sidebar .brand .nav-text,
.topnav .logo span{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:180px;
display:inline-block;
vertical-align:middle;
}
.right-footer > div{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
line-height:1.5;
}
/* ===== 加入社群卡片 ===== */
.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:20px;
max-width:1000px;
margin:0 auto;
}
.contact-card{
position:relative;
display:block;
padding:32px 28px;
border-radius:20px;
background:var(--card);
border:1px solid var(--line);
text-decoration:none;
color:inherit;
transition:all .3s;
overflow:hidden;
}
.contact-card:hover{
transform:translateY(-4px);
border-color:rgba(56,189,248,.4);
box-shadow:0 12px 32px rgba(56,189,248,.15);
text-decoration:none;
color:inherit;
}
.contact-icon{
width:60px;
height:60px;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.8rem;
margin-bottom:20px;
transition:transform .3s;
}
.contact-card:hover .contact-icon{ transform:scale(1.08); }
.contact-icon.qq{
background:linear-gradient(135deg, rgba(18,183,245,.2), rgba(18,183,245,.06));
color:#12b7f5;
border:1px solid rgba(18,183,245,.3);
}
.contact-icon.kook{
background:linear-gradient(135deg, rgba(124,58,237,.2), rgba(124,58,237,.06));
color:#a78bfa;
border:1px solid rgba(124,58,237,.3);
}
.contact-icon.mail{
background:linear-gradient(135deg, rgba(245,158,11,.2), rgba(245,158,11,.06));
color:#fbbf24;
border:1px solid rgba(245,158,11,.3);
}
.contact-card h3{
margin:0 0 6px;
font-size:1.15rem;
font-weight:800;
color:var(--text);
}
.contact-card p{
margin:0;
color:var(--muted);
font-size:0.9rem;
line-height:1.5;
}
.contact-arrow{
position:absolute;
right:24px;
top:32px;
color:var(--muted);
font-size:1.1rem;
transition:all .3s;
opacity:.4;
}
.contact-card:hover .contact-arrow{
color:#60a5fa;
opacity:1;
transform:translateX(4px);
}
/* ===== 门户 Logo 重做 ===== */
.topnav .logo{
display:flex !important;
align-items:center !important;
gap:12px !important;
text-decoration:none !important;
color:var(--text) !important;
}
.topnav .logo:hover{
text-decoration:none !important;
}
.topnav .logo-mark{
width:42px !important;
height:42px !important;
min-width:42px !important;
border-radius:11px !important;
background:linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:1.3rem !important;
color:#fff !important;
box-shadow:0 6px 16px rgba(59,130,246,.35) !important;
transition:transform .2s !important;
}
.topnav .logo:hover .logo-mark{
transform:scale(1.05) !important;
}
.topnav .logo-text{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
line-height:1.15 !important;
}
.topnav .logo-title{
font-size:1.05rem !important;
font-weight:800 !important;
color:var(--text) !important;
letter-spacing:.08em !important;
}
.topnav .logo-sub{
font-size:0.68rem !important;
font-weight:500 !important;
color:rgba(148,163,184,.75) !important;
letter-spacing:.02em !important;
white-space:nowrap !important;
}
/* 移动端：隐藏副标题 */
@media (max-width:900px){
.topnav .logo-sub{ display:none !important; }
}
@media (max-width:640px){
.topnav .logo-text{ display:none !important; }
}
/* ===== 门户页脚（专业版） ===== */
.site-footer{
margin-top:100px;
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 100%);
border-top:1px solid rgba(255,255,255,.06);
padding:60px 0 0;
}
.site-footer .container{
max-width:1240px;
margin:0 auto;
padding:0 32px;
}
/* 上半部分：四栏 */
.footer-main{
display:grid;
grid-template-columns:2.2fr 1fr 1fr 1.4fr;
gap:48px;
padding-bottom:48px;
border-bottom:1px solid rgba(255,255,255,.06);
}
@media (max-width:900px){
.footer-main{
grid-template-columns:1fr 1fr;
gap:36px;
}
}
@media (max-width:560px){
.footer-main{
grid-template-columns:1fr;
gap:32px;
}
}
/* 品牌栏 */
.footer-brand{
max-width:360px;
}
.footer-logo{
display:flex;
align-items:center;
gap:12px;
margin-bottom:16px;
}
.footer-logo-mark{
width:44px;
height:44px;
min-width:44px;
border-radius:12px;
background:linear-gradient(135deg, #3b82f6, #8b5cf6);
display:flex;
align-items:center;
justify-content:center;
font-size:1.35rem;
color:#fff;
box-shadow:0 6px 18px rgba(59,130,246,.3);
}
.footer-logo-text{
display:flex;
flex-direction:column;
gap:1px;
}
.footer-logo-title{
font-size:1.15rem;
font-weight:800;
color:var(--text);
letter-spacing:.08em;
line-height:1.2;
}
.footer-logo-sub{
font-size:0.7rem;
font-weight:500;
color:rgba(148,163,184,.7);
letter-spacing:.02em;
line-height:1.2;
}
.footer-desc{
color:var(--muted);
font-size:0.85rem;
line-height:1.75;
margin:0;
}
/* 各列 */
.footer-col h4{
font-size:0.88rem;
font-weight:700;
color:var(--text);
margin:0 0 18px;
letter-spacing:.06em;
position:relative;
padding-bottom:10px;
}
.footer-col h4::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:24px;
height:2px;
background:linear-gradient(90deg, #3b82f6, #8b5cf6);
border-radius:1px;
}
.footer-col a{
display:flex;
align-items:center;
gap:8px;
color:var(--muted);
font-size:0.85rem;
padding:7px 0;
text-decoration:none;
transition:all .2s;
}
.footer-col a i{
font-size:0.9rem;
color:rgba(148,163,184,.5);
transition:all .2s;
width:14px;
}
.footer-col a:hover{
color:var(--text);
text-decoration:none;
padding-left:4px;
}
.footer-col a:hover i{
color:#60a5fa;
}
/* 服务器信息行 */
.footer-info-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:7px 0;
font-size:0.85rem;
gap:8px;
}
.footer-info-row .lbl{
color:var(--muted);
flex-shrink:0;
}
.footer-info-row code{
color:#60a5fa;
font-family:"SF Mono", "Courier New", monospace;
font-size:0.78rem;
background:transparent;
padding:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:160px;
}
.footer-info-row .val{
color:var(--text);
font-weight:600;
}
.footer-info-row .status-testing{
color:#fbbf24;
display:flex;
align-items:center;
gap:6px;
}
.footer-info-row .status-testing .dot{
width:7px;
height:7px;
border-radius:50%;
background:#fbbf24;
box-shadow:0 0 8px #fbbf24;
animation:testingPulse 2s ease-in-out infinite;
}
@keyframes testingPulse{
0%,100%{ opacity:1; }
50%{ opacity:.4; }
}
/* 下半部分：版权 */
.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
padding:24px 0;
gap:16px;
flex-wrap:wrap;
}
.footer-copyright{
color:rgba(148,163,184,.7);
font-size:0.8rem;
letter-spacing:.01em;
}
.footer-tech{
color:rgba(148,163,184,.55);
font-size:0.78rem;
letter-spacing:.01em;
}
@media (max-width:768px){
.footer-bottom{
flex-direction:column;
text-align:center;
gap:8px;
}
}
/* ============================================================
v8.0 移动端适配 - 门户
============================================================ */
@media (max-width: 768px) {
input, textarea, select {
font-size: 16px !important;
}
.container {
padding: 0 16px !important;
}
/* ---------- 顶部导航 ---------- */
.topnav .container {
height: 60px !important;
padding: 0 16px !important;
}
.topnav .logo-text .logo-sub {
display: none !important;
}
.topnav .logo-title {
font-size: 0.95rem !important;
}
.topnav .logo-mark {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
font-size: 1.1rem !important;
}
.nav-links {
gap: 4px !important;
}
.nav-links a {
padding: 6px 8px !important;
font-size: 0.82rem !important;
}
.nav-links .btn {
padding: 6px 12px !important;
font-size: 0.82rem !important;
}
/* ---------- Hero 区 ---------- */
.hero {
padding: 50px 0 40px !important;
}
.hero-badge {
font-size: 0.72rem !important;
padding: 4px 12px !important;
margin-bottom: 16px !important;
}
.hero h1 {
font-size: 1.9rem !important;
letter-spacing: -0.01em !important;
margin-bottom: 12px !important;
}
.hero h1 span {
font-size: 0.75em !important;
letter-spacing: 0.1em !important;
margin-top: 8px !important;
}
.hero p.sub {
font-size: 0.9rem !important;
padding: 0 8px !important;
line-height: 1.65 !important;
}
.hero p.sub span {
font-size: 0.85em !important;
margin-top: 8px !important;
}
.hero-actions {
flex-direction: column !important;
align-items: stretch !important;
padding: 0 16px !important;
gap: 10px !important;
margin-top: 24px !important;
}
.hero-actions .btn {
width: 100% !important;
justify-content: center !important;
}
.btn-lg {
padding: 13px 24px !important;
font-size: 0.95rem !important;
}
.hero-info {
flex-direction: column !important;
gap: 4px !important;
padding: 14px 16px !important;
margin-top: 28px !important;
width: 100% !important;
}
.hero-info-sep {
display: none !important;
}
.hero-info-item {
padding: 6px 0 !important;
min-width: 0 !important;
text-align: center !important;
border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.hero-info-item:last-child {
border-bottom: none !important;
}
.hero-info-item code {
font-size: 0.82rem !important;
}
/* ---------- Section ---------- */
.section {
padding: 44px 0 !important;
}
.section-head {
margin-bottom: 28px !important;
}
.section-head h2 {
font-size: 1.4rem !important;
}
.section-head p {
font-size: 0.9rem !important;
}
/* ---------- 统计区 ---------- */
.stats {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.stat {
padding: 20px 14px !important;
}
.stat .num {
font-size: 1.7rem !important;
}
.stat .lbl {
font-size: 0.8rem !important;
}
/* ---------- 部门卡片 ---------- */
.dept-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.dept-card {
padding: 22px !important;
}
.dept-card h3 {
font-size: 1.05rem !important;
}
.dept-card p {
font-size: 0.88rem !important;
}
/* ---------- 最新动态 ---------- */
.news-item {
padding: 14px !important;
gap: 12px !important;
}
.news-item h4 {
font-size: 0.95rem !important;
}
/* ---------- 加入社群 ---------- */
.contact-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.contact-card {
padding: 24px 22px !important;
}
.contact-card h3 {
font-size: 1.05rem !important;
}
.contact-icon {
width: 52px !important;
height: 52px !important;
font-size: 1.5rem !important;
}
/* ---------- 页脚 ---------- */
.footer-main {
grid-template-columns: 1fr !important;
gap: 32px !important;
padding-bottom: 32px !important;
}
.site-footer {
padding: 40px 0 0 !important;
margin-top: 60px !important;
}
.footer-logo {
margin-bottom: 12px !important;
}
.footer-logo-mark {
width: 40px !important;
height: 40px !important;
font-size: 1.2rem !important;
}
.footer-logo-title {
font-size: 1rem !important;
}
.footer-col h4 {
font-size: 0.9rem !important;
margin-bottom: 12px !important;
}
.footer-col a {
font-size: 0.85rem !important;
padding: 6px 0 !important;
}
.footer-bottom {
flex-direction: column !important;
text-align: center !important;
gap: 6px !important;
padding: 20px 0 !important;
font-size: 0.72rem !important;
}
/* ---------- 关于页 ---------- */
.about-hero {
padding: 60px 0 40px !important;
}
.about-hero h1 {
font-size: 1.5rem !important;
}
.about-hero-sub {
font-size: 0.95rem !important;
}
.about-block h2 {
font-size: 1.15rem !important;
}
.about-block p {
font-size: 0.92rem !important;
}
.about-features,
.about-join-steps {
grid-template-columns: 1fr !important;
}
.about-contact {
padding: 24px 16px !important;
}
.about-contact h3 {
font-size: 1.15rem !important;
}
.about-contact-links {
flex-direction: column !important;
}
.about-contact-item {
width: 100% !important;
justify-content: center !important;
}
/* ---------- 部门详情页 ---------- */
.dept-hero {
flex-direction: column !important;
align-items: flex-start !important;
padding: 24px !important;
gap: 16px !important;
}
.dept-hero-icon {
width: 64px !important;
height: 64px !important;
font-size: 1.8rem !important;
}
.dept-hero-info h1 {
font-size: 1.35rem !important;
}
.dept-block {
padding: 20px !important;
}
.dept-detail-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
/* ---------- 登录/注册页 ---------- */
body > div[style*="max-width:440px"],
body > div[style*="max-width:420px"] {
margin: 30px auto !important;
padding: 0 18px !important;
}
}
@media (max-width: 400px) {
.hero h1 {
font-size: 1.6rem !important;
}
.stats {
grid-template-columns: 1fr 1fr !important;
}
.stat .num {
font-size: 1.5rem !important;
}
}
/* ============================================================
v8.1 移动端页脚美化
============================================================ */
@media (max-width: 768px) {
/* ========== 页脚整体 ========== */
.site-footer {
margin-top: 40px !important;
padding: 32px 0 0 !important;
background: linear-gradient(180deg, rgba(10,13,20,0) 0%, rgba(15,20,30,.6) 100%) !important;
border-top: 1px solid rgba(255,255,255,.06) !important;
}
.site-footer .container {
padding: 0 20px !important;
}
/* ========== 品牌区居中 ========== */
.footer-main {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
.footer-brand {
text-align: center !important;
max-width: 100% !important;
padding-bottom: 24px !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
margin-bottom: 24px !important;
}
.footer-logo {
justify-content: center !important;
margin-bottom: 12px !important;
}
.footer-logo-mark {
width: 42px !important;
height: 42px !important;
font-size: 1.25rem !important;
}
.footer-logo-title {
font-size: 1rem !important;
letter-spacing: .06em !important;
}
.footer-logo-sub {
font-size: 0.68rem !important;
}
.footer-desc {
font-size: 0.82rem !important;
line-height: 1.7 !important;
color: rgba(148,163,184,.65) !important;
}
/* ========== 快速导航：2x2 网格卡片 ========== */
.footer-col {
padding-bottom: 24px !important;
margin-bottom: 24px !important;
border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.footer-col:last-of-type {
border-bottom: none !important;
margin-bottom: 0 !important;
}
.footer-col h4 {
font-size: 0.82rem !important;
margin-bottom: 14px !important;
padding-bottom: 8px !important;
color: #cbd5e1 !important;
}
.footer-col h4::after {
width: 18px !important;
height: 2px !important;
}
/* 快速导航用网格 */
.footer-col:nth-of-type(1) {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.footer-col:nth-of-type(1) h4 {
grid-column: 1 / -1 !important;
}
.footer-col:nth-of-type(1) a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 12px 10px !important;
border-radius: 10px !important;
background: rgba(56,189,248,.05) !important;
border: 1px solid rgba(56,189,248,.12) !important;
font-size: 0.85rem !important;
color: #cbd5e1 !important;
transition: all .2s !important;
}
.footer-col:nth-of-type(1) a:active {
background: rgba(56,189,248,.15) !important;
transform: scale(.98) !important;
}
.footer-col:nth-of-type(1) a i {
color: #60a5fa !important;
font-size: 1rem !important;
}
/* ========== 联系方式：横向图标栏 ========== */
.footer-col:nth-of-type(2) {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px !important;
}
.footer-col:nth-of-type(2) h4 {
flex-basis: 100% !important;
text-align: center !important;
}
.footer-col:nth-of-type(2) h4::after {
left: 50% !important;
transform: translateX(-50%) !important;
}
.footer-col:nth-of-type(2) a {
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
width: 80px !important;
height: 80px !important;
padding: 8px !important;
border-radius: 14px !important;
background: rgba(255,255,255,.03) !important;
border: 1px solid rgba(255,255,255,.06) !important;
font-size: 0.72rem !important;
color: #cbd5e1 !important;
text-align: center !important;
transition: all .2s !important;
}
.footer-col:nth-of-type(2) a:active {
background: rgba(56,189,248,.12) !important;
border-color: rgba(56,189,248,.4) !important;
transform: scale(.95) !important;
}
.footer-col:nth-of-type(2) a i {
font-size: 1.4rem !important;
width: auto !important;
color: #60a5fa !important;
}
/* ========== 服务器信息：紧凑列表 ========== */
.footer-col:nth-of-type(3) {
background: rgba(56,189,248,.03) !important;
border: 1px solid rgba(56,189,248,.1) !important;
border-radius: 14px !important;
padding: 16px !important;
margin-bottom: 0 !important;
border-bottom: 1px solid rgba(56,189,248,.1) !important;
}
.footer-col:nth-of-type(3) h4 {
text-align: center !important;
}
.footer-col:nth-of-type(3) h4::after {
left: 50% !important;
transform: translateX(-50%) !important;
}
.footer-info-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 10px 0 !important;
border-bottom: 1px dashed rgba(255,255,255,.06) !important;
font-size: 0.85rem !important;
}
.footer-info-row:last-child {
border-bottom: none !important;
}
.footer-info-row .lbl {
color: rgba(148,163,184,.7) !important;
font-size: 0.82rem !important;
}
.footer-info-row .val {
font-weight: 700 !important;
color: #e5e7eb !important;
}
.footer-info-row code {
max-width: 200px !important;
font-size: 0.8rem !important;
}
/* ========== 底部版权 ========== */
.footer-bottom {
flex-direction: column !important;
text-align: center !important;
padding: 20px 0 24px !important;
gap: 6px !important;
font-size: 0.72rem !important;
color: rgba(148,163,184,.5) !important;
border-top: 1px solid rgba(255,255,255,.05) !important;
}
.footer-copyright,
.footer-tech {
font-size: 0.72rem !important;
line-height: 1.6 !important;
}
.footer-copyright {
color: rgba(148,163,184,.7) !important;
}
.footer-tech {
color: rgba(148,163,184,.5) !important;
}
}
@media (max-width: 400px) {
.footer-col:nth-of-type(2) a {
width: 70px !important;
height: 70px !important;
font-size: 0.68rem !important;
}
.footer-col:nth-of-type(2) a i {
font-size: 1.25rem !important;
}
.footer-col:nth-of-type(1) a {
font-size: 0.8rem !important;
padding: 10px 8px !important;
}
}