@charset "UTF-8";
/* ==========================================================================
views.css —— 页面级布局与视图专属样式
--------------------------------------------------------------------------
覆盖：认证页 / 应用外壳 / 首页 / 活动 / 投票 / 通知与模组 / 排行榜 /
个人中心 / 后台 / 反馈 / 审核 / 后台设置 / 公告详情 / 弹窗内表单行。
结构说明：
- 第 1-15 节为「契约视图层」，类名与前端 JS 输出的结构一一对应；
- 第 16 节是「历史结构兼容层」，专门处理 index.html 头部历史样式块
与新令牌的衔接（同优先级下历史规则在后，需用 body 前缀提升优先级），
并把历史样式里写死的 #fff 容器换成随主题变化的令牌。
本文件不 @import；颜色全部走 tokens.css 的 --c-* 变量。
========================================================================== */
/* --------------------------------------------------------------------------
1. 认证页
-------------------------------------------------------------------------- */
#authView{
position:relative;
min-height:100vh;
min-height:100dvh;
display:flex;
align-items:center;
justify-content:center;
padding:var(--sp-6);
overflow:hidden;
background:
radial-gradient(1100px 620px at 6% -14%,var(--c-primary-100),transparent 62%),
radial-gradient(820px 520px at 104% 112%,var(--c-primary-50),transparent 60%),
linear-gradient(160deg,var(--c-bg),var(--c-surface) 45%,var(--c-bg));
}
/* 装饰光斑：两层柔和光晕缓慢漂浮 */
#authView::before,
#authView::after{
content:"";
position:absolute;
border-radius:50%;
filter:blur(70px);
opacity:.55;
pointer-events:none;
}
#authView::before{
width:min(46vw,520px);aspect-ratio:1;
top:-14%;left:-10%;
background:radial-gradient(circle,var(--c-sky-300),transparent 66%);
animation:blob-float 18s var(--ease) infinite alternate;
}
#authView::after{
width:min(40vw,440px);aspect-ratio:1;
right:-12%;bottom:-16%;
background:radial-gradient(circle,var(--c-sky-400),transparent 68%);
opacity:.32;
animation:blob-float 22s var(--ease) infinite alternate-reverse;
}
@keyframes blob-float{
from{transform:translate3d(0,0,0) scale(1)}
to{transform:translate3d(3%,4%,0) scale(1.12)}
}
/* 1.1 认证外壳：大屏左右分栏，小屏只留表单卡 */
.auth-shell{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1fr);
width:100%;
max-width:460px;
margin:auto;
}
.auth-shell.has-side{
max-width:1010px;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:var(--sp-8);
align-items:center;
}
/* 左侧品牌宣传区 */
.auth-side{
position:relative;
display:flex;
flex-direction:column;
gap:var(--sp-5);
padding:var(--sp-8);
border-radius:var(--r-3xl);
background:var(--g-official);
color:#fff;
overflow:hidden;
box-shadow:var(--sh-xl);
}
.auth-side::after{
content:"";
position:absolute;
inset:auto -30% -50% auto;
width:420px;aspect-ratio:1;
border-radius:50%;
background:radial-gradient(circle,rgba(125,211,252,.45),transparent 62%);
pointer-events:none;
}
.auth-side .h1,.auth-side .h2,.auth-side .h3{color:#fff}
.auth-side p{color:rgba(255,255,255,.82);font-size:var(--fs-sm);line-height:var(--lh-base)}
.auth-side-list{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-2)}
.auth-side-item{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-sm);color:rgba(255,255,255,.9)}
.auth-side-item::before{
content:"";
flex:0 0 auto;
width:9px;height:9px;
margin-top:6px;
border-radius:2px;
background:var(--c-sky-300);
transform:rotate(45deg);
}
/* 1.2 表单卡：玻璃拟态 */
.auth-card{
position:relative;
width:100%;
max-width:460px;
margin:0 auto;
padding:var(--sp-8) var(--sp-7) var(--sp-6);
background:var(--c-glass-strong);
border:1px solid var(--c-primary-100);
border-radius:var(--r-3xl);
box-shadow:var(--sh-xl),var(--sh-inset);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
}
.auth-shell.has-side .auth-card{margin:0}
/* 1.3 品牌区 */
.auth-brand{
display:flex;
flex-direction:column;
align-items:center;
gap:var(--sp-2);
margin-bottom:var(--sp-6);
text-align:center;
}
.auth-brand .brand-logo,
.auth-brand .brand-logo-sm{
width:58px;height:58px;
border-radius:var(--r-xl);
font-size:15px;
}
.auth-brand .brand-name,
.auth-brand h1{
font-size:var(--fs-xl);
font-weight:var(--fw-black);
letter-spacing:-.01em;
color:var(--c-text);
}
.auth-brand p,
.auth-brand .auth-brand-sub{
font-size:var(--fs-xs);
color:var(--c-muted);
letter-spacing:.16em;
text-transform:uppercase;
}
/* 1.4 登录/注册/找回 切换（契约类名 + 历史类名同款外观） */
.auth-tabs{
display:flex;
gap:var(--sp-1);
padding:4px;
margin-bottom:var(--sp-5);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
background:var(--c-surface-2);
}
.auth-tabs .auth-tab,
.auth-tabs .segmented-item{
flex:1 1 0;
padding:8px 0;
border:0;
border-radius:var(--r-sm);
background:none;
color:var(--c-muted);
font-size:var(--fs-sm);
font-weight:var(--fw-semi);
cursor:pointer;
transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.auth-tabs .auth-tab:hover,
.auth-tabs .segmented-item:hover{color:var(--c-primary-700)}
.auth-tabs .auth-tab.active,
.auth-tabs .segmented-item.active{
background:var(--c-surface);
color:var(--c-primary-700);
font-weight:var(--fw-bold);
box-shadow:var(--sh-sm);
}
/* 认证页内的表单元素稍微加大，便于手机单手输入 */
.auth-panel{display:none}
.auth-panel.active{display:block;animation:panel-in var(--dur-3) var(--ease-out) both}
.auth-panel .field>label{font-size:var(--fs-xs)}
.auth-panel .field input{min-height:44px;padding:11px 14px;font-size:var(--fs-md)}
.auth-panel .btn-block{margin-top:var(--sp-2)}
/* 1.5 提示信息与页脚 */
.auth-msg{
min-height:20px;
margin-top:var(--sp-3);
font-size:var(--fs-xs);
line-height:var(--lh-base);
font-weight:var(--fw-semi);
color:var(--c-muted);
text-align:center;
}
.auth-msg.error{color:var(--c-danger)}
.auth-msg.ok{color:var(--c-success-strong)}
.auth-msg:empty{min-height:0}
.auth-foot{
margin-top:var(--sp-6);
padding-top:var(--sp-4);
border-top:1px solid var(--c-border);
font-size:var(--fs-2xs);
color:var(--c-muted-2);
text-align:center;
line-height:var(--lh-base);
}
.auth-foot a{color:var(--c-primary-600);font-weight:var(--fw-semi)}
.back-row{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:var(--sp-2);
margin-top:var(--sp-4);
font-size:var(--fs-xs);
color:var(--c-muted-2);
}
.panel-tip{
margin-bottom:var(--sp-4);
padding:var(--sp-3) var(--sp-4);
border-radius:var(--r-lg);
background:var(--c-primary-50);
border-left:3px solid var(--c-primary);
font-size:var(--fs-xs);
line-height:var(--lh-base);
color:var(--c-text-2);
}
/* --------------------------------------------------------------------------
2. 应用外壳
-------------------------------------------------------------------------- */
#appView{display:block;min-height:100vh}
.page{
max-width:var(--page-max);
margin:0 auto;
padding:var(--sp-6) var(--sp-5) var(--sp-16);
}
.view{display:none}
.view.active{display:block;animation:view-in var(--dur-4) var(--ease-out) both}
@keyframes view-in{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:none}
}
/* 视图内的直接子块统一垂直节奏 */
.view>.card+.card,
.view>section+section,
.view>.event-grid+.event-grid{margin-top:var(--sp-5)}
/* --------------------------------------------------------------------------
3. 首页
-------------------------------------------------------------------------- */
.hero{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp-6);
flex-wrap:wrap;
padding:var(--sp-7) var(--sp-7);
margin-bottom:var(--sp-6);
border:1px solid var(--c-primary-100);
border-radius:var(--r-3xl);
background:var(--g-primary-soft);
overflow:hidden;
box-shadow:var(--sh-md),var(--sh-inset);
}
.hero::after{
content:"";
position:absolute;
right:-80px;top:-90px;
width:320px;aspect-ratio:1;
border-radius:50%;
background:radial-gradient(circle,var(--c-primary-100),transparent 62%);
pointer-events:none;
}
.hero-main{
position:relative;
z-index:1;
min-width:0;
flex:1 1 320px;
}
.hero h2,
.hero-main h2{
font-size:clamp(1.25rem,1.08rem + 1vw,1.75rem);
font-weight:var(--fw-black);
letter-spacing:-.02em;
line-height:var(--lh-tight);
margin-bottom:var(--sp-2);
}
.hero-sub{
font-size:var(--fs-sm);
color:var(--c-muted);
line-height:var(--lh-base);
max-width:52ch;
}
.hero-actions{
display:flex;
align-items:center;
gap:var(--sp-2);
flex-wrap:wrap;
margin-top:var(--sp-4);
}
/* CM币展示块：玻璃卡 + 大号数字 */
.hero-coin{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:flex-end;
gap:2px;
padding:var(--sp-4) var(--sp-6);
border:1px solid var(--c-primary-100);
border-radius:var(--r-2xl);
background:var(--c-glass-strong);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:var(--sh-lg);
text-align:right;
flex:0 0 auto;
}
.hero-coin::before{
content:"CM";
position:absolute;
top:-9px;left:var(--sp-4);
padding:2px 9px;
border-radius:var(--r-pill);
background:var(--g-primary);
color:#fff;
font-size:10px;
font-weight:var(--fw-black);
letter-spacing:.1em;
box-shadow:var(--sh-primary);
}
.hero-coin strong{
font-size:clamp(1.5rem,1.2rem + 1.4vw,2.15rem);
font-weight:var(--fw-black);
line-height:1.05;
color:var(--c-primary-600);
font-variant-numeric:tabular-nums;
letter-spacing:-.02em;
}
.coin-label{
display:block;
font-size:var(--fs-2xs);
font-weight:var(--fw-semi);
color:var(--c-muted);
letter-spacing:.02em;
}
/* 首页分区折叠卡（历史结构 .section，与新 .accordion 同源外观） */
.section{
margin-bottom:var(--sp-4);
border:1px solid var(--c-border);
border-radius:var(--r-card);
background:var(--c-surface);
box-shadow:var(--sh-xs);
overflow:hidden;
transition:border-color var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease);
}
.section:hover{border-color:var(--c-primary-200)}
.section.important{
border-color:var(--c-warn);
box-shadow:0 8px 24px -18px rgba(245,158,11,.75);
}
.section-head{
display:flex;
align-items:center;
gap:var(--sp-3);
padding:var(--sp-4) var(--sp-5);
cursor:pointer;
user-select:none;
transition:background-color var(--dur-2) var(--ease);
}
.section-head:hover{background:var(--c-primary-50)}
.section-head:focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px}
.section-title{flex:1 1 auto}
.section-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:22px;height:20px;
padding:0 8px;
flex:0 0 auto;
border-radius:var(--r-pill);
background:var(--c-primary-100);
color:var(--c-primary-700);
font-size:var(--fs-2xs);
font-weight:var(--fw-black);
line-height:1;
font-variant-numeric:tabular-nums;
}
.section-badge.important{background:var(--g-warn);color:#fff}
.section-badge.empty{background:var(--c-surface-3);color:var(--c-muted-2)}
.section-arrow{
display:flex;
align-items:center;
justify-content:center;
width:26px;height:26px;
flex:0 0 auto;
border-radius:var(--r-sm);
background:var(--c-primary-50);
color:var(--c-primary-600);
font-size:11px;
font-weight:var(--fw-black);
transition:transform var(--dur-3) var(--ease-out),background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.section-head:hover .section-arrow{background:var(--c-primary-100)}
.section.open .section-arrow{transform:rotate(90deg);background:var(--c-primary-600);color:#fff}
.section-body{
max-height:0;
overflow:hidden;
padding:0 var(--sp-5);
transition:max-height var(--dur-4) var(--ease),padding var(--dur-3) var(--ease);
}
.section.open .section-body{max-height:none;padding:0 var(--sp-5) var(--sp-5)}
.section-body-inner{padding-top:var(--sp-1)}
/* 首页小列表项（历史结构 .mini-item） */
.mini-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.mini-item{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp-3);
padding:var(--sp-3) var(--sp-4);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
background:var(--c-surface-2);
font-size:var(--fs-sm);
transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.mini-item:hover{background:var(--c-surface);border-color:var(--c-primary-200);box-shadow:var(--sh-sm)}
.mini-item .t{font-weight:var(--fw-semi);color:var(--c-text)}
.mini-item .d{margin-top:2px;font-size:var(--fs-2xs);color:var(--c-muted)}
/* --------------------------------------------------------------------------
4. 活动与报名
-------------------------------------------------------------------------- */
.event-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
gap:var(--sp-4);
}
.event-card{
display:flex;
flex-direction:column;
gap:var(--sp-3);
padding:var(--sp-5);
border:1px solid var(--c-border);
border-radius:var(--r-card);
background:var(--c-surface);
box-shadow:var(--sh-sm);
transition:transform var(--dur-3) var(--ease-out),box-shadow var(--dur-3) var(--ease),border-color var(--dur-3) var(--ease);
}
.event-card:hover{transform:translateY(-2px);border-color:var(--c-primary-200);box-shadow:var(--sh-lg)}
.event-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--sp-3);
}
.event-head h3{
font-size:var(--fs-md);
font-weight:var(--fw-bold);
line-height:var(--lh-snug);
min-width:0;
overflow-wrap:anywhere;
}
.event-meta{
display:flex;
flex-direction:column;
gap:var(--sp-1);
font-size:var(--fs-xs);
color:var(--c-muted);
}
.event-meta>span,
.event-meta>div{display:flex;align-items:flex-start;gap:var(--sp-2)}
/* 时间段列表 */
.slot-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-1)}
.slot{
display:flex;
align-items:center;
gap:var(--sp-3);
padding:var(--sp-3) var(--sp-4);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
background:var(--c-surface-2);
font-size:var(--fs-sm);
transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.slot:hover{background:var(--c-primary-50);border-color:var(--c-primary-200)}
.slot-info{flex:1 1 auto;min-width:0}
.slot-info b{
display:block;
font-size:var(--fs-sm);
font-weight:var(--fw-bold);
color:var(--c-text);
font-variant-numeric:tabular-nums;
}
.slot-info span{
display:block;
margin-top:2px;
font-size:var(--fs-2xs);
color:var(--c-muted);
}
/* 阶段标识：开始 / 结束 */
.s-start,.s-end{font-size:var(--fs-2xs);font-weight:var(--fw-black);letter-spacing:.04em}
.s-start{color:var(--c-primary-600)}
.s-end{color:var(--c-muted-2)}
.s-quota{
flex:0 0 auto;
padding:2px 9px;
border-radius:var(--r-pill);
background:var(--c-surface-3);
color:var(--c-muted);
font-size:var(--fs-2xs);
font-weight:var(--fw-bold);
font-variant-numeric:tabular-nums;
}
/* 已满 / 可报名状态标记 */
.tag-open{background:var(--c-success-100);color:var(--c-success-strong)}
.tag-full{background:var(--c-danger-100);color:var(--c-danger-strong)}
.tag-pending{background:var(--c-warn-100);color:var(--c-warn-strong)}
.tag-rejected{background:var(--c-danger-100);color:var(--c-danger-strong)}
/* --------------------------------------------------------------------------
5. 投票
-------------------------------------------------------------------------- */
.poll-item{
padding:var(--sp-5);
margin-bottom:var(--sp-3);
border:1px solid var(--c-border);
border-radius:var(--r-card);
background:var(--c-surface);
box-shadow:var(--sh-xs);
transition:border-color var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease);
}
.poll-item:last-child{margin-bottom:0}
.poll-item:hover{border-color:var(--c-primary-200);box-shadow:var(--sh-md)}
.poll-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--sp-3);
margin-bottom:var(--sp-1);
}
.poll-head h4{
display:flex;
align-items:center;
gap:var(--sp-2);
flex-wrap:wrap;
font-size:var(--fs-md);
font-weight:var(--fw-bold);
line-height:var(--lh-snug);
min-width:0;
overflow-wrap:anywhere;
}
.poll-meta{
display:flex;
align-items:center;
gap:var(--sp-3);
flex-wrap:wrap;
margin-bottom:var(--sp-4);
font-size:var(--fs-2xs);
color:var(--c-muted);
font-variant-numeric:tabular-nums;
}
/* 多选标记 */
.poll-multi-tag{
display:inline-flex;
align-items:center;
padding:2px 8px;
border-radius:var(--r-pill);
background:linear-gradient(135deg,#a78bfa,#7c3aed);
color:#fff;
font-size:10px;
font-weight:var(--fw-black);
letter-spacing:.04em;
white-space:nowrap;
}
/* 状态胶囊 */
.poll-status{
flex:0 0 auto;
padding:3px 10px;
border-radius:var(--r-pill);
font-size:var(--fs-2xs);
font-weight:var(--fw-bold);
white-space:nowrap;
}
.poll-status.open{background:var(--c-success-100);color:var(--c-success-strong)}
.poll-status.open::before{content:"● ";font-size:8px;vertical-align:1px}
.poll-status.closed{background:var(--c-surface-3);color:var(--c-muted)}
.poll-status.closed::before{content:"○ ";font-size:8px;vertical-align:1px}
/* 选项：底部长条填充表示占比 */
.opt{
position:relative;
padding:var(--sp-3) var(--sp-4);
margin-bottom:var(--sp-2);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
background:var(--c-surface);
cursor:pointer;
user-select:none;
overflow:hidden;
transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);
}
.opt:last-child{margin-bottom:0}
.opt:hover{border-color:var(--c-primary-300);background:var(--c-primary-50)}
.opt:active{transform:scale(.995)}
.opt.selected{
border-color:var(--c-primary);
background:var(--c-primary-50);
box-shadow:0 0 0 2px var(--c-primary-100);
}
.opt.disabled{cursor:not-allowed;opacity:.9}
.opt.disabled:hover{border-color:var(--c-border);background:var(--c-surface)}
.opt-bar{
position:absolute;
top:0;left:0;bottom:0;
width:0;
z-index:0;
border-radius:inherit;
background:linear-gradient(90deg,var(--c-primary-100),var(--c-primary-200));
transition:width var(--dur-5) var(--ease-out);
}
.opt.selected .opt-bar{background:linear-gradient(90deg,var(--c-primary-200),var(--c-sky-300))}
.opt-content{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp-3);
}
.opt-text{
font-size:var(--fs-sm);
font-weight:var(--fw-semi);
color:var(--c-text);
overflow-wrap:anywhere;
min-width:0;
}
.opt.selected .opt-text{color:var(--c-primary-700);font-weight:var(--fw-bold)}
.opt-num{
flex:0 0 auto;
font-size:var(--fs-xs);
font-weight:var(--fw-bold);
color:var(--c-muted);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
/* 投票选项输入行（弹窗内编辑） */
.opt-input,.ep-opt-input,.pa-opt-input{
width:100%;
padding:8px 11px;
border:1px solid var(--c-border);
border-radius:var(--r-sm);
background:var(--c-surface);
color:var(--c-text);
font-size:var(--fs-sm);
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.opt-input:focus,.ep-opt-input:focus,.pa-opt-input:focus{
border-color:var(--c-primary);
box-shadow:var(--sh-focus-ring);
}
/* --------------------------------------------------------------------------
6. 通知公告与模组更新
-------------------------------------------------------------------------- */
.notice-item{
position:relative;
padding:var(--sp-4) var(--sp-5);
margin-bottom:var(--sp-3);
border:1px solid var(--c-border);
border-radius:var(--r-card);
background:var(--c-surface);
cursor:pointer;
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out);
}
.notice-item:last-child{margin-bottom:0}
.notice-item:hover{
transform:translateY(-1px);
border-color:var(--c-primary-200);
box-shadow:var(--sh-md);
}
.notice-item.unread{background:var(--c-primary-50);border-color:var(--c-primary-200)}
.notice-item.unread::before{
content:"";
position:absolute;
top:var(--sp-4);bottom:var(--sp-4);left:0;
width:3px;
border-radius:0 var(--r-pill) var(--r-pill) 0;
background:var(--g-primary);
}
.notice-item.important{
border-color:var(--c-warn);
background:linear-gradient(135deg,var(--c-warn-100),var(--c-surface) 68%);
}
.notice-item.important.unread{
background:linear-gradient(135deg,var(--c-warn-100),var(--c-primary-50));
border-color:var(--c-warn);
}
.notice-head{
display:flex;
align-items:center;
gap:var(--sp-2);
margin-bottom:var(--sp-2);
padding-right:var(--sp-5);
}
.notice-head h4{
flex:1 1 auto;
min-width:0;
font-size:var(--fs-md);
font-weight:var(--fw-bold);
line-height:var(--lh-snug);
overflow-wrap:anywhere;
}
.notice-flag{
display:inline-flex;
align-items:center;
gap:4px;
flex:0 0 auto;
padding:3px 9px;
border-radius:var(--r-pill);
background:var(--g-warn);
color:#fff;
font-size:10px;
font-weight:var(--fw-black);
letter-spacing:.06em;
box-shadow:0 6px 14px -8px rgba(245,158,11,.9);
}
.notice-body{
font-size:var(--fs-sm);
line-height:var(--lh-loose);
color:var(--c-text-2);
white-space:pre-wrap;
word-break:break-word;
overflow-wrap:anywhere;
}
.notice-body.is-clamped{
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
}
.notice-meta{
display:flex;
align-items:center;
gap:var(--sp-3);
flex-wrap:wrap;
margin-top:var(--sp-3);
font-size:var(--fs-2xs);
color:var(--c-muted-2);
font-variant-numeric:tabular-nums;
}
.notice-meta .read-tag,
.notice-meta .unread-tag{
padding:2px 8px;
border-radius:var(--r-pill);
font-size:10px;
font-weight:var(--fw-bold);
}
.notice-meta .read-tag{background:var(--c-surface-3);color:var(--c-muted)}
.notice-meta .unread-tag{background:var(--c-danger-100);color:var(--c-danger-strong)}
/* 未读脉冲点 */
.notice-unread-dot{
position:absolute;
top:var(--sp-4);right:var(--sp-4);
width:9px;height:9px;
border-radius:50%;
background:var(--c-danger);
box-shadow:0 0 0 3px var(--c-danger-100);
}
.notice-unread-dot::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
background:var(--c-danger);
animation:dot-pulse 2s var(--ease) infinite;
}
/* 模组更新条目 */
.mod-item{
padding:var(--sp-4) var(--sp-5);
margin-bottom:var(--sp-3);
border:1px solid var(--c-border);
border-radius:var(--r-card);
background:var(--c-surface);
transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.mod-item:last-child{margin-bottom:0}
.mod-item:hover{border-color:var(--c-primary-200);box-shadow:var(--sh-sm)}
.mod-head{
display:flex;
align-items:center;
gap:var(--sp-3);
flex-wrap:wrap;
margin-bottom:var(--sp-3);
}
.mod-head h4{font-size:var(--fs-md);font-weight:var(--fw-bold);min-width:0;overflow-wrap:anywhere}
.ver-tag{
display:inline-flex;
align-items:center;
padding:2px 9px;
border-radius:var(--r-pill);
background:var(--c-primary-100);
color:var(--c-primary-700);
font-family:var(--font-mono);
font-size:var(--fs-2xs);
font-weight:var(--fw-black);
letter-spacing:.02em;
}
.mod-item-line{
display:flex;
align-items:flex-start;
gap:var(--sp-3);
padding:var(--sp-2) var(--sp-3);
margin-bottom:var(--sp-2);
border-radius:var(--r-md);
background:var(--c-surface-2);
font-size:var(--fs-sm);
transition:background-color var(--dur-2) var(--ease);
}
.mod-item-line:last-child{margin-bottom:0}
.mod-item-line:hover{background:var(--c-primary-50)}
.mod-item-text{
flex:1 1 auto;
min-width:0;
line-height:var(--lh-base);
color:var(--c-text-2);
white-space:pre-wrap;
word-break:break-word;
overflow-wrap:anywhere;
}
/* 重要度标签 */
.imp-tag{
display:inline-flex;
align-items:center;
flex:0 0 auto;
padding:3px 9px;
border-radius:var(--r-pill);
font-size:10px;
font-weight:var(--fw-black);
letter-spacing:.04em;
white-space:nowrap;
}
.imp-critical{background:var(--g-danger);color:#fff;box-shadow:0 6px 14px -8px rgba(239,68,68,.9)}
.imp-high{background:var(--g-warn);color:#fff;box-shadow:0 6px 14px -8px rgba(245,158,11,.9)}
.imp-normal{background:var(--c-primary-100);color:var(--c-primary-700)}
.imp-low{background:var(--c-surface-3);color:var(--c-muted-2)}
.mi-imp{
flex:0 0 auto;
font-size:var(--fs-2xs);
font-weight:var(--fw-black);
color:var(--c-muted);
}
.mi-text{flex:1 1 auto;min-width:0;font-size:var(--fs-sm);color:var(--c-text-2)}
/* 模组条目编辑器 */
.mod-items-editor{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.mod-item-row{
display:grid;
grid-template-columns:118px minmax(0,1fr) 36px;
gap:var(--sp-2);
align-items:center;
}
.mod-item-row select,
.mod-item-row input{
width:100%;
padding:8px 11px;
border:1px solid var(--c-border);
border-radius:var(--r-sm);
background:var(--c-surface);
color:var(--c-text);
font-size:var(--fs-sm);
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.mod-item-row select:focus,
.mod-item-row input:focus{border-color:var(--c-primary);box-shadow:var(--sh-focus-ring)}
/* --------------------------------------------------------------------------
7. 排行榜
-------------------------------------------------------------------------- */
.season-bar{
display:flex;
gap:var(--sp-2);
flex-wrap:wrap;
margin-bottom:var(--sp-4);
}
.season-pill{
padding:7px 16px;
border:1px solid transparent;
border-radius:var(--r-pill);
background:var(--c-surface-2);
color:var(--c-primary-700);
font-size:var(--fs-sm);
font-weight:var(--fw-bold);
cursor:pointer;
transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.season-pill:hover{background:var(--c-primary-100)}
.season-pill.active{
background:var(--g-primary);
color:#fff;
box-shadow:var(--sh-primary);
}
.season-pill:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.period-bar{
display:flex;
gap:var(--sp-2);
flex-wrap:wrap;
margin-bottom:var(--sp-5);
padding:var(--sp-3) var(--sp-4);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
background:var(--c-surface-2);
}
.period-pill{
padding:5px 13px;
border:1px solid var(--c-border);
border-radius:var(--r-sm);
background:var(--c-surface);
color:var(--c-muted);
font-size:var(--fs-xs);
font-weight:var(--fw-bold);
cursor:pointer;
font-variant-numeric:tabular-nums;
transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.period-pill:hover{border-color:var(--c-primary-300);color:var(--c-primary-700)}
.period-pill.active{background:var(--c-primary-600);color:#fff;border-color:var(--c-primary-600)}
/* 累计总和：金色强调 */
.period-pill.total-pill{
background:linear-gradient(135deg,#fef3c7,#fde68a);
color:#92400e;
border-color:#fcd34d;
}
.period-pill.total-pill.active{
background:linear-gradient(135deg,#f59e0b,#d97706);
color:#fff;
border-color:#d97706;
}
.rank-list{display:flex;flex-direction:column;gap:var(--sp-2)}
/* 用户详情弹窗内的赛季列表 */
.ud-user{
padding:var(--sp-4) 0 var(--sp-5);
margin-bottom:var(--sp-4);
border-bottom:1px solid var(--c-border);
text-align:center;
}
.ud-user-name{
font-size:var(--fs-xl);
font-weight:var(--fw-black);
letter-spacing:-.01em;
margin-bottom:2px;
}
.ud-user-sub{
font-family:var(--font-mono);
font-size:var(--fs-xs);
color:var(--c-muted);
}
.ud-body{max-height:min(52vh,460px);overflow-y:auto;padding-right:var(--sp-1)}
.ud-season{
padding:var(--sp-3) var(--sp-4);
margin-bottom:var(--sp-3);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
background:var(--c-surface-2);
}
.ud-season:last-child{margin-bottom:0}
.ud-season-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp-2);
flex-wrap:wrap;
padding-bottom:var(--sp-2);
margin-bottom:var(--sp-2);
border-bottom:1px dashed var(--c-border-strong);
}
.ud-season-name{font-size:var(--fs-sm);font-weight:var(--fw-black);color:var(--c-primary-700)}
.ud-season-total{
padding:2px 10px;
border-radius:var(--r-pill);
background:var(--c-surface);
color:var(--c-primary-600);
font-size:var(--fs-2xs);
font-weight:var(--fw-bold);
font-variant-numeric:tabular-nums;
}
.ud-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp-2);
padding:7px 11px;
margin-bottom:5px;
border-radius:var(--r-sm);
background:var(--c-surface);
font-size:var(--fs-sm);
}
.ud-row:last-child{margin-bottom:0}
.ud-period{font-weight:var(--fw-semi);color:var(--c-text-2)}
.ud-coin{font-weight:var(--fw-black);color:var(--c-primary-600);font-variant-numeric:tabular-nums}
.ud-role{
padding:2px 9px;
border-radius:var(--r-pill);
background:linear-gradient(135deg,#e0e7ff,#c7d2fe);
color:#3730a3;
font-size:var(--fs-2xs);
font-weight:var(--fw-bold);
}
/* --------------------------------------------------------------------------
8. 个人中心
-------------------------------------------------------------------------- */
.profile-grid{
display:grid;
grid-template-columns:minmax(260px,300px) minmax(0,1fr);
gap:var(--sp-5);
align-items:start;
}
.profile-card{text-align:center}
.profile-card h3{font-size:var(--fs-lg);font-weight:var(--fw-black);margin-bottom:2px}
.profile-stats{
display:flex;
justify-content:center;
gap:var(--sp-8);
margin-top:var(--sp-4);
padding-top:var(--sp-4);
border-top:1px solid var(--c-border);
}
.profile-stats>div{display:flex;flex-direction:column;gap:2px}
.profile-stats span{font-size:var(--fs-2xs);color:var(--c-muted)}
.profile-stats strong{
font-size:var(--fs-xl);
font-weight:var(--fw-black);
color:var(--c-primary-600);
font-variant-numeric:tabular-nums;
}
.profile-actions{
display:flex;
flex-direction:column;
gap:var(--sp-2);
margin-top:var(--sp-4);
padding-top:var(--sp-4);
border-top:1px solid var(--c-border);
}
.profile-top{
display:flex;
align-items:center;
gap:var(--sp-4);
padding-bottom:var(--sp-4);
margin-bottom:var(--sp-5);
border-bottom:1px solid var(--c-border);
}
.profile-top-info{flex:1 1 auto;min-width:0}
.profile-top-info h3{font-size:var(--fs-md);font-weight:var(--fw-bold);margin-bottom:2px}
.profile-top-info .email{
font-size:var(--fs-xs);
color:var(--c-muted);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.profile-top-stats{display:flex;gap:var(--sp-6);flex:0 0 auto}
.profile-top-stats>div{text-align:center}
.profile-top-stats span{display:block;font-size:var(--fs-2xs);color:var(--c-muted);margin-bottom:2px}
.profile-top-stats strong{
font-size:var(--fs-lg);
font-weight:var(--fw-black);
color:var(--c-primary-600);
font-variant-numeric:tabular-nums;
}
/* 个人中心内的分段面板（历史结构 .p-tabs/.p-panel） */
.p-tabs{
display:inline-flex;
gap:var(--sp-1);
padding:4px;
margin-bottom:var(--sp-5);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
background:var(--c-surface-2);
width:fit-content;
}
.p-tab{
padding:7px 20px;
border:0;
border-radius:var(--r-sm);
background:none;
color:var(--c-muted);
font-size:var(--fs-sm);
font-weight:var(--fw-semi);
cursor:pointer;
transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.p-tab:hover{color:var(--c-primary-700)}
.p-tab.active{background:var(--c-surface);color:var(--c-primary-700);font-weight:var(--fw-bold);box-shadow:var(--sh-sm)}
.p-panel{display:none}
.p-panel.active{display:block;animation:panel-in var(--dur-3) var(--ease-out) both}
/* --------------------------------------------------------------------------
9. 后台管理
-------------------------------------------------------------------------- */
.admin-layout{
display:grid;
grid-template-columns:var(--sidebar-w) minmax(0,1fr);
gap:var(--sp-5);
align-items:start;
}
.admin-sidebar{
position:sticky;
top:calc(var(--nav-h) + var(--sp-4));
display:flex;
flex-direction:column;
gap:var(--sp-2);
max-height:calc(100vh - var(--nav-h) - var(--sp-8));
overflow-y:auto;
padding:var(--sp-3);
border:1px solid var(--c-border);
border-radius:var(--r-card);
background:var(--c-surface);
box-shadow:var(--sh-sm);
}
.admin-group{margin-bottom:var(--sp-1)}
.admin-group:last-child{margin-bottom:0}
.admin-group-title{
display:flex;
align-items:center;
gap:var(--sp-2);
padding:8px 11px;
border-radius:var(--r-sm);
font-size:var(--fs-xs);
font-weight:var(--fw-black);
color:var(--c-text);
letter-spacing:.02em;
cursor:pointer;
user-select:none;
transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.admin-group-title:hover{background:var(--c-primary-50);color:var(--c-primary-700)}
.admin-group-title .arrow{
margin-left:auto;
color:var(--c-muted-2);
font-size:9px;
transition:transform var(--dur-3) var(--ease-out);
}
.admin-group.open .admin-group-title .arrow{transform:rotate(90deg)}
.admin-group-items{display:none;margin-top:2px;padding-left:var(--sp-1)}
.admin-group.open .admin-group-items{display:block}
.admin-group-item{
display:flex;
align-items:center;
gap:var(--sp-1);
width:100%;
padding:7px 11px;
border:1px solid transparent;
border-radius:var(--r-sm);
background:none;
color:var(--c-muted);
font-size:var(--fs-sm);
font-weight:var(--fw-semi);
text-align:left;
cursor:pointer;
transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.admin-group-item:hover{background:var(--c-primary-50);color:var(--c-primary-700)}
.admin-group-item.active{
background:var(--g-primary);
color:#fff;
font-weight:var(--fw-bold);
box-shadow:var(--sh-primary);
}
.admin-group-item .count-badge{margin-left:auto}
.admin-group-item.active .count-badge{background:rgba(255,255,255,.28);color:#fff}
.admin-main{min-width:0}
.admin-main .tab-panel{display:none}
.admin-main .tab-panel.active{display:block;animation:panel-in var(--dur-3) var(--ease-out) both}
.admin-main>h2:first-child{margin-bottom:2px}
/* 后台搜索行 */
.admin-search{
display:flex;
align-items:center;
gap:var(--sp-2);
max-width:460px;
margin-bottom:var(--sp-4);
}
.admin-search input{
flex:1 1 auto;
min-width:0;
padding:9px 14px;
border:1px solid var(--c-border);
border-radius:var(--r-md);
background:var(--c-surface);
color:var(--c-text);
font-size:var(--fs-sm);
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.admin-search input:focus{border-color:var(--c-primary);box-shadow:var(--sh-focus-ring)}
.admin-search .clear{
flex:0 0 auto;
padding:9px 14px;
border:1px solid var(--c-border);
border-radius:var(--r-md);
background:var(--c-surface-2);
color:var(--c-primary-700);
font-size:var(--fs-xs);
font-weight:var(--fw-semi);
cursor:pointer;
transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.admin-search .clear:hover{background:var(--c-primary-100);border-color:var(--c-primary-200)}
/* 成员行 */
.member-row{
display:grid;
grid-template-columns:minmax(0,1fr) 132px 92px;
gap:var(--sp-3);
align-items:center;
padding:var(--sp-3);
margin-bottom:var(--sp-2);
border:1px solid var(--c-border);
border-radius:var(--r-lg);
background:var(--c-surface-2);
transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.member-row:hover{background:var(--c-primary-50);border-color:var(--c-primary-200)}
.member-row .m-name{
min-width:0;
font-size:var(--fs-sm);
font-weight:var(--fw-semi);
color:var(--c-text);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.member-row .m-nick{margin-left:var(--sp-1);font-size:var(--fs-2xs);color:var(--c-muted)}
.member-row .m-role{font-size:var(--fs-2xs);color:var(--c-muted)}
.member-row select{
width:100%;
padding:6px 9px;
border:1px solid var(--c-border);
border-radius:var(--r-sm);
background:var(--c-surface);
color:var(--c-text);
font-size:var(--fs-xs);
cursor:pointer;
}
.member-row input{
width:100%;
padding:6px 10px;
border:1px solid var(--c-border);
border-radius:var(--r-sm);
background:var(--c-surface);
color:var(--c-text);
font-size:var(--fs-sm);
text-align:center;
}
.member-row select:focus,.member-row input:focus{border-color:var(--c-primary);box-shadow:var(--sh-focus-ring)}
/* 9.1 官方头像设置卡 */
.official-avatar-card{
display:flex;
align-items:center;
gap:var(--sp-4);
padding:var(--sp-4);
margin-bottom:var(--sp-5);
border:1px solid var(--c-primary-100);
border-radius:var(--r-card);
background:linear-gradient(135deg,var(--c-primary-50),var(--c-surface) 62%);
box-shadow:var(--sh-sm);
}
.official-avatar-card .avatar-official{
box-shadow:inset 0 0 0 1px rgba(125,211,252,.5),var(--sh-md);
}
.official-avatar-card-info{flex:1 1 auto;min-width:0}
.official-avatar-card-info h4{font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:2px}
.official-avatar-card-info p{font-size:var(--fs-2xs);color:var(--c-muted);line-height:var(--lh-base)}
.official-avatar-card .row,
.official-avatar-card-actions{
display:flex;
align-items:center;
gap:var(--sp-2);
flex-wrap:wrap;
margin-top:var(--sp-3);
}
/* 9.2 主题色板 */
.theme-swatches{
display:flex;
align-items:center;
gap:var(--sp-3);
flex-wrap:wrap;
}
.theme-swatch{
position:relative;
width:34px;height:34px;
flex:0 0 auto;
padding:0;
border:2px solid var(--c-surface);
border-radius:50%;
background:var(--g-primary);
cursor:pointer;
box-shadow:0 0 0 1px var(--c-border),var(--sh-xs);
transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease);
}
.theme-swatch:hover{transform:scale(1.1)}
.theme-swatch.active,
.theme-swatch[aria-pressed="true"]{
box-shadow:0 0 0 2px var(--c-surface),0 0 0 4px var(--c-primary);
}
/* 选中态对勾 */
.theme-swatch.active::after,
.theme-swatch[aria-pressed="true"]::after{
content:"";
position:absolute;
left:11px;top:8px;
width:7px;height:12px;
border:2px solid #fff;
border-top:0;
border-left:0;
transform:rotate(42deg);
filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.theme-swatch-label{
display:block;
margin-top:var(--sp-2);
font-size:var(--fs-2xs);
color:var(--c-muted);
text-align:center;
}
/* --------------------------------------------------------------------------
10. 反馈
-------------------------------------------------------------------------- */
.fb-item{
padding:var(--sp-4) var(--sp-5);
margin-bottom:var(--sp-3);
border:1px solid var(--c-border);
border-radius:var(--r-card);
background:var(--c-surface);
box-shadow:var(--sh-xs);
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.fb-item:last-child{margin-bottom:0}
.fb-item:hover{border-color:var(--c-primary-200);box-shadow:var(--sh-sm)}
.fb-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--sp-3);
margin-bottom:var(--sp-2);
}
.fb-head h4{font-size:var(--fs-md);font-weight:var(--fw-bold);min-width:0;overflow-wrap:anywhere}
.fb-type{
flex:0 0 auto;
display:inline-block;
padding:3px 10px;
border-radius:var(--r-pill);
font-size:10px;
font-weight:var(--fw-black);
letter-spacing:.04em;
line-height:1.5;
vertical-align:middle;
white-space:nowrap;
}
.fb-type.bug{background:var(--c-danger-100);color:var(--c-danger-strong)}
.fb-type.suggest{background:var(--c-primary-100);color:var(--c-primary-700)}
.fb-body{
font-size:var(--fs-sm);
line-height:var(--lh-loose);
color:var(--c-text-2);
/* 换行由 escLines() 转成
输出，
这里必须用 normal，否则
与 pre-wrap 叠加会出现双倍行距 */
white-space:normal;
overflow-wrap:anywhere;
}
.fb-reply{
margin-top:var(--sp-3);
padding:var(--sp-3) var(--sp-4);
border-left:3px solid var(--c-primary);
border-radius:0 var(--r-lg) var(--r-lg) 0;
background:var(--c-primary-50);
font-size:var(--fs-sm);
line-height:var(--lh-base);
color:var(--c-text-2);
}
.fb-reply b{color:var(--c-primary-700)}
/**
* 管理员回复的「采纳 / 未采纳」用**左侧粗竖线**区分：
* 采纳 = 绿色竖线，未采纳 = 红色竖线。
* 按需求，文字与背景**不跟着变色**，只有竖线带颜色。
*/
.fb-reply-accepted{border-left-color:var(--c-success)}
.fb-reply-rejected{border-left-color:var(--c-danger)}
.fb-reply-pending{border-left-color:var(--c-warn)}
/* 回复头部：左侧「管理员回复」，右侧「回复者 · 时间」 */
.fb-reply-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:var(--sp-2);
flex-wrap:wrap;
margin-bottom:4px;
}
.fb-reply-head .muted{font-size:var(--fs-2xs)}
.fb-reply-body{white-space:normal;overflow-wrap:anywhere}
/**
* 新回复默认只显示 2 行，超出部分省略；
* 点击回复框展开全部内容（再次点击收起）。
* 用 em 作为行高单位，长内容不会因为
换行导致高度算出偏差。
*/
.fb-reply-body.clamped{
display:-webkit-box;
-webkit-line-clamp:2;
line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height:calc(1.7em * 2);
}
.fb-reply{position:relative}
/* 可展开的回复：整块可点击，并给出提示 */
.fb-reply-expandable{cursor:pointer}
.fb-reply-expandable:hover{border-left-width:5px}
.fb-reply-toggle{
display:inline-block;
margin-top:6px;
font-size:var(--fs-2xs);
font-weight:var(--fw-semi);
color:var(--c-primary-700);
background:none;
border:0;
padding:0;
cursor:pointer;
text-decoration:underline;
}
.fb-reply-toggle:hover{color:var(--c-primary)}
/**
* 后台表格里的回复：**不染色**（避免整片表格出现红绿块），
* 只作为普通引用块展示，同样只显示 2 行、点击查看全部。
*/
.fb-reply-plain{
border-left-color:var(--c-border);
background:var(--c-surface-2);
padding:var(--sp-2) var(--sp-3);
margin-top:0;
}
.fb-reply-plain .fb-reply-body{font-size:var(--fs-2xs)}
/**
* 后台列表里的正文 / 回复：默认只显示 2 行，点击查看完整内容。
* 用 -webkit-line-clamp 做截断，配合 cursor 提示可点击。
*/
.fb-clamp{
display:-webkit-box;
-webkit-line-clamp:2;
line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
overflow-wrap:anywhere;
cursor:pointer;
}
.fb-clamp:hover{color:var(--c-primary-700);text-decoration:underline}
/* --------------------------------------------------------------------------
11. 审核
-------------------------------------------------------------------------- */
.apply-status{
padding:var(--sp-3) var(--sp-4);
border:1px solid var(--c-border);
border-left-width:3px;
border-radius:var(--r-lg);
font-size:var(--fs-sm);
line-height:var(--lh-base);
text-align:left;
background:var(--c-surface-2);
color:var(--c-text-2);
}
.apply-status+.apply-status{margin-top:var(--sp-2)}
.apply-status.pending{background:var(--c-warn-100);border-color:var(--c-warn);color:var(--c-warn-strong)}
.apply-status.approved{background:var(--c-success-100);border-color:var(--c-success);color:var(--c-success-strong)}
.apply-status.rejected{background:var(--c-danger-100);border-color:var(--c-danger);color:var(--c-danger-strong)}
.review-card{
padding:var(--sp-4) var(--sp-5);
margin-bottom:var(--sp-3);
border:1px solid var(--c-border);
border-radius:var(--r-card);
background:var(--c-surface);
box-shadow:var(--sh-xs);
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.review-card:hover{border-color:var(--c-primary-200);box-shadow:var(--sh-sm)}
.review-card-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--sp-3);
margin-bottom:var(--sp-3);
}
.review-card-body{font-size:var(--fs-sm);color:var(--c-text-2);line-height:var(--lh-base)}
/* --------------------------------------------------------------------------
12. 公告详情弹窗
-------------------------------------------------------------------------- */
.notice-modal{max-width:580px}
.notice-modal .nm-flag{
display:inline-flex;
align-items:center;
gap:var(--sp-2);
margin-bottom:var(--sp-4);
padding:4px 12px;
border-radius:var(--r-pill);
background:var(--g-warn);
color:#fff;
font-size:var(--fs-xs);
font-weight:var(--fw-black);
letter-spacing:.06em;
box-shadow:0 8px 18px -10px rgba(245,158,11,.9);
}
.notice-modal .nm-title{
margin-bottom:var(--sp-4);
font-size:clamp(1.1rem,1rem + .5vw,1.35rem);
font-weight:var(--fw-black);
line-height:var(--lh-snug);
letter-spacing:-.01em;
color:var(--c-text);
}
.notice-modal .nm-content{
max-height:min(46vh,340px);
overflow-y:auto;
padding:var(--sp-4) var(--sp-5);
border:1px solid var(--c-primary-100);
border-radius:var(--r-lg);
background:var(--c-primary-50);
color:var(--c-text-2);
font-size:var(--fs-sm);
line-height:var(--lh-loose);
white-space:pre-wrap;
word-break:break-word;
overflow-wrap:anywhere;
}
.notice-modal .nm-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp-3);
flex-wrap:wrap;
margin-top:var(--sp-4);
font-size:var(--fs-2xs);
color:var(--c-muted);
font-variant-numeric:tabular-nums;
}
/* --------------------------------------------------------------------------
13. 弹窗内表单行（活动时段 / 投票选项 / 图标按钮）
-------------------------------------------------------------------------- */
.slot-row{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr) 88px 36px;
gap:var(--sp-2);
align-items:center;
margin-bottom:var(--sp-2);
}
.slot-row input{
width:100%;
padding:8px 11px;
border:1px solid var(--c-border);
border-radius:var(--r-sm);
background:var(--c-surface);
color:var(--c-text);
font-size:var(--fs-sm);
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.slot-row input:focus{border-color:var(--c-primary);box-shadow:var(--sh-focus-ring)}
.opt-row{
display:grid;
grid-template-columns:minmax(0,1fr) 36px;
gap:var(--sp-2);
align-items:center;
margin-bottom:var(--sp-2);
}
.opt-row input{
width:100%;
padding:8px 11px;
border:1px solid var(--c-border);
border-radius:var(--r-sm);
background:var(--c-surface);
color:var(--c-text);
font-size:var(--fs-sm);
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.opt-row input:focus{border-color:var(--c-primary);box-shadow:var(--sh-focus-ring)}
/* 小图标操作按钮：默认危险色（删除），可加 .icon-btn-ghost 反色 */
.icon-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;height:36px;
flex:0 0 auto;
border:1px solid transparent;
border-radius:var(--r-sm);
background:var(--c-danger-100);
color:var(--c-danger-strong);
font-size:var(--fs-md);
font-weight:var(--fw-black);
line-height:1;
cursor:pointer;
transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease);
}
.icon-btn:hover{background:var(--c-danger);color:#fff;transform:translateY(-1px)}
.icon-btn:active{transform:translateY(0) scale(.96)}
.icon-btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:1px}
.icon-btn-ghost{background:var(--c-surface-2);color:var(--c-muted)}
.icon-btn-ghost:hover{background:var(--c-primary-100);color:var(--c-primary-700);transform:none}
/* 通用删除行按钮（结构上常与 .del-row 同时出现） */
.del-row{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;height:36px;
flex:0 0 auto;
border-radius:var(--r-sm);
background:var(--c-danger-100);
color:var(--c-danger-strong);
font-size:var(--fs-md);
cursor:pointer;
transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.del-row:hover{background:var(--c-danger);color:#fff}
/* 活动/投票编辑弹窗中的小标题与行容器 */
.admin-main h2,
.admin-main h3{letter-spacing:-.01em}
.admin-main>.page-title+.page-sub{margin-bottom:var(--sp-5)}
/* --------------------------------------------------------------------------
14. 认证页 / 应用外壳切换时的过渡
-------------------------------------------------------------------------- */
#authView.is-leaving{animation:view-out var(--dur-3) var(--ease) both}
@keyframes view-out{
from{opacity:1;transform:none}
to{opacity:0;transform:scale(.99)}
}
#appView.is-entering{animation:view-in var(--dur-4) var(--ease-out) both}
/* --------------------------------------------------------------------------
15. 滚动条与长内容容器
-------------------------------------------------------------------------- */
.ud-body::-webkit-scrollbar,.notice-modal .nm-content::-webkit-scrollbar,
.admin-sidebar::-webkit-scrollbar{width:8px}
.ud-body,.notice-modal .nm-content,.admin-sidebar{scrollbar-width:thin}
/* ==========================================================================
16. 历史结构兼容层
--------------------------------------------------------------------------
index.html 头部的历史样式块排在四个 之后：同优先级时它胜出。
这一节用 body 前缀把优先级提到 (0,2,0)，安全覆盖需要更新的属性；
不需要修改的属性（例如仅在历史里定义的 --nav-h）保持不动。
目的不是"推翻历史"，而是让历史结构吃上新的令牌、深色模式与圆角阴影体系。
========================================================================== */
/* 16.1 顶部导航：历史用 .navbar/.nav-inner，本设计用 .topbar/.topbar-inner */
body .navbar{
background:var(--c-nav-bg);
border-bottom:1px solid var(--c-nav-border);
box-shadow:0 1px 0 rgba(15,23,42,.03),0 10px 30px -24px rgba(2,132,199,.6);
}
body .nav-inner{
max-width:var(--page-max);
padding:0 var(--sp-5);
gap:var(--sp-5);
}
body .nav-brand{gap:var(--sp-2);font-weight:var(--fw-black);color:var(--c-primary-700)}
body .brand-logo.small{
width:32px;height:32px;
margin:0;
border-radius:var(--r-sm);
font-size:10px;
letter-spacing:0;
box-shadow:0 6px 14px -8px rgba(3,105,161,.9),inset 0 0 0 1px rgba(125,211,252,.4);
}
body .nav-links{gap:var(--sp-1)}
body .nav-right{gap:var(--sp-2)}
body .user-chip{border:1px solid var(--c-border);background:var(--c-surface-2)}
body .nav-dot{box-shadow:0 0 0 2px var(--c-surface)}
/* 16.2 页面容器与标题 */
body .page{max-width:var(--page-max);padding:var(--sp-6) var(--sp-5) var(--sp-16)}
body .page-title{margin-bottom:var(--sp-2)}
body .page-sub{margin-bottom:var(--sp-5)}
body .card-title{font-size:var(--fs-md)}
body .hero{padding:var(--sp-7);border-radius:var(--r-3xl)}
body .hero-coin{border:1px solid var(--c-primary-100);background:var(--c-glass-strong)}
body .hero-sub{max-width:52ch}
/* 16.3 历史样式里写死 #fff / #0f172a 的容器：换成随主题变化的令牌 */
body .section{background:var(--c-surface);border-color:var(--c-border);box-shadow:var(--sh-xs)}
body .card{background:var(--c-surface);border-color:var(--c-border);box-shadow:var(--sh-sm)}
body .stat-card{background:var(--c-surface);border-color:var(--c-border)}
body .event-card{background:var(--c-surface);border-color:var(--c-border)}
body .notice-item{background:var(--c-surface);border-color:var(--c-border)}
body .notice-item.unread{background:var(--c-primary-50);border-color:var(--c-primary-200)}
body .notice-item.important{
background:linear-gradient(135deg,var(--c-warn-100),var(--c-surface) 68%);
border-color:var(--c-warn);
}
body .notice-item.important.unread{
background:linear-gradient(135deg,var(--c-warn-100),var(--c-primary-50));
border-color:var(--c-warn);
}
body .poll-item{background:var(--c-surface);border-color:var(--c-border)}
body .mod-item{background:var(--c-surface);border-color:var(--c-border)}
body .mod-item-line{background:var(--c-surface-2)}
body .mod-item-row select,
body .mod-item-row input{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border)}
body .rank-item{background:var(--c-surface);border-color:var(--c-border)}
body .rank-item.top1{background:linear-gradient(100deg,var(--c-warn-100),var(--c-surface) 62%)}
body .rank-item.top2{background:linear-gradient(100deg,var(--c-surface-3),var(--c-surface) 62%)}
body .rank-item.top3{background:linear-gradient(100deg,#ffedd5,var(--c-surface) 62%)}
body .rank-item.me{background:linear-gradient(100deg,var(--c-primary-50),var(--c-surface) 70%);border-color:var(--c-primary)}
body .slot{background:var(--c-surface-2);border-color:var(--c-border)}
body .opt{background:var(--c-surface);border-color:var(--c-border)}
body .opt-bar{background:linear-gradient(90deg,var(--c-primary-100),var(--c-primary-200))}
body .period-pill{background:var(--c-surface);border-color:var(--c-border)}
body .period-pill.active{background:var(--c-primary-600);border-color:var(--c-primary-600)}
body .period-pill.total-pill{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#fcd34d}
body .period-pill.total-pill.active{background:linear-gradient(135deg,#f59e0b,#d97706);border-color:#d97706}
body .season-pill{background:var(--c-surface-2)}
body .season-pill.active{background:var(--g-primary)}
body .mini-item{background:var(--c-surface-2);border-color:var(--c-border)}
body .ud-season{background:var(--c-surface-2);border-color:var(--c-border)}
body .ud-season-name{color:var(--c-primary-700)}
body .ud-season-total{background:var(--c-surface);color:var(--c-primary-600)}
body .ud-row{background:var(--c-surface)}
body .ud-role{background:linear-gradient(135deg,#e0e7ff,#c7d2fe);color:#3730a3}
body .admin-sidebar{background:var(--c-surface);border-color:var(--c-border)}
body .admin-group-item{background:none;color:var(--c-muted)}
body .admin-group-item.active{background:var(--g-primary);color:#fff}
body .admin-search input{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border)}
body .admin-search .clear{background:var(--c-surface-2);border-color:var(--c-border)}
body .member-row{background:var(--c-surface-2);border-color:var(--c-border)}
body .member-row select,
body .member-row input{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border)}
body .apply-status.pending{background:var(--c-warn-100);border-color:var(--c-warn);color:var(--c-warn-strong)}
body .apply-status.approved{background:var(--c-success-100);border-color:var(--c-success);color:var(--c-success-strong)}
body .apply-status.rejected{background:var(--c-danger-100);border-color:var(--c-danger);color:var(--c-danger-strong)}
body .notice-modal .nm-content{background:var(--c-primary-50);border-color:var(--c-primary-100);color:var(--c-text-2)}
body .modal-mask{background:var(--c-mask)}
body .auth-card{background:var(--c-glass-strong);border-color:var(--c-primary-100)}
body .auth-tab.active{background:var(--c-surface);color:var(--c-primary-700)}
body .p-tab.active{background:var(--c-surface);color:var(--c-primary-700)}
body .mini-item .t{color:var(--c-text)}
body .empty{background:var(--c-surface-2);border-color:var(--c-border)}
/* 16.4 徽章 / 标签：历史用 .badge.super .badge.banned .badge.pending .badge.ok，
新契约用 .badge-super .badge-danger .badge-warn .badge-ok，两者都给上 */
body .badge{background:var(--c-primary-100);color:var(--c-primary-700);border-color:transparent}
body .badge.super{
background:var(--g-official);
color:#fff;
box-shadow:0 4px 12px -5px rgba(3,105,161,.85);
}
body .badge.banned{background:var(--c-danger-100);color:var(--c-danger-strong)}
body .badge.pending{background:var(--c-warn-100);color:var(--c-warn-strong)}
body .badge.ok{background:var(--c-success-100);color:var(--c-success-strong)}
body .badge.admin{background:var(--g-primary);color:#fff}
body .badge.user{background:var(--c-surface-3);color:var(--c-muted)}
body .part-role,
body .m-role{color:var(--c-muted)}
/* 16.5 表格：历史 .table 自带白底与圆角，这里统一到卡片容器上 */
body .table{background:var(--c-surface);font-size:var(--fs-sm)}
body .table th{background:var(--c-surface-2);color:var(--c-primary-700)}
body .table td{border-top-color:var(--c-border)}
body .table-wrap{background:var(--c-surface);border-color:var(--c-border);border-radius:var(--r-card)}
body .table-wrap .table{border-radius:0}
/* 16.6 弹窗与提示 */
body .modal{background:var(--c-surface);border-color:var(--c-border);border-radius:var(--r-modal)}
body .modal h3{font-size:var(--fs-lg);font-weight:var(--fw-black)}
body .toast{border:1px solid rgba(255,255,255,.14)}
/* 16.7 分类标签（历史 .tag-open/.tag-full/...）在深色下的可读性 */
body .tag-open{background:var(--c-success-100);color:var(--c-success-strong)}
body .tag-full,body .tag-rejected{background:var(--c-danger-100);color:var(--c-danger-strong)}
body .tag-pending{background:var(--c-warn-100);color:var(--c-warn-strong)}
/* 16.8 头像：历史 .avatar 只有 26px 圆形的定义，profile-top 内的 .avatar-md
被历史规则写成 52px 圆角矩形。这里统一到新的尺寸体系（圆形 + 渐变环）。 */
body .profile-top .avatar-md{
width:52px;height:52px;
border-radius:var(--r-avatar);
background:var(--g-primary);
color:#fff;
box-shadow:0 10px 24px -12px rgba(14,165,233,.9),inset 0 0 0 1px rgba(255,255,255,.28);
}
body .avatar-lg{
border-radius:var(--r-avatar);
background:var(--g-primary);
color:#fff;
margin:0 auto var(--sp-3);
box-shadow:0 14px 30px -14px rgba(14,165,233,.9),inset 0 0 0 1px rgba(255,255,255,.28);
}
body .avatar-official.avatar-sm{letter-spacing:0}
body .avatar-official.avatar-xl{font-size:32px}
/* 官方头像在浅/深色下都保持高对比：外部再套一层浅色描边 */
body .avatar-official{box-shadow:inset 0 0 0 1.5px rgba(125,211,252,.55),0 4px 12px -4px rgba(3,105,161,.75)}
/* 16.9 深色模式补充：历史样式里硬编码的浅色值需要显式覆盖 */
@media (prefers-color-scheme: dark){
body .navbar{background:var(--c-nav-bg)}
body .section-title .dot{background:var(--g-primary)}
body .avatar-picker-mask{background:rgba(2,10,22,.68)}
/* "CM" 角标在深色下依然是白字蓝底，保持与主按钮一致的高对比 */
body .hero-coin::before{color:#fff}
body .rank-item.top3{background:linear-gradient(100deg,rgba(251,146,60,.16),var(--c-surface) 62%)}
body .period-pill.total-pill{background:linear-gradient(135deg,#78350f,#b45309);color:#fde68a;border-color:#92400e}
body .period-pill.total-pill.active{background:linear-gradient(135deg,#f59e0b,#d97706);color:#1f1300;border-color:#f59e0b}
body .ud-role{background:linear-gradient(135deg,#312e81,#4338ca);color:#e0e7ff}
body .poll-multi-tag{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
body .icon-btn{background:rgba(239,68,68,.16)}
body .del-row{background:rgba(239,68,68,.16)}
body .theme-swatch{border-color:var(--c-surface)}
body .slider-handle{background:var(--c-surface)}
body .switch .slider::after{background:#e2e8f0}
body .toast{color:#f8fafc}
body .toast-ok{background:var(--c-success-strong)}
body .toast-err{background:var(--c-danger-strong)}
body .toast-warn{background:var(--c-warn-strong);color:#1f1300}
body .empty-icon{background:var(--c-surface-2)}
body .empty-icon::before{background:var(--c-surface-2)}
}