@charset "UTF-8";
/* ==========================================================================
   views-patch.css —— 视图层微调补丁
   --------------------------------------------------------------------------
   只包含对 views.css 中少量布局细节的补充与修正，避免直接改动原文件。
   载入顺序：tokens → components → views → views-patch → responsive
   ========================================================================== */

/* 审核卡片头部：改为可换行的行内排列，避免标题被两端对齐挤压 */
.review-card-head{
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
}
.review-card-head strong{
  flex:1 1 auto;
  min-width:0;
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--c-text);
  overflow-wrap:anywhere;
}

/* 拖动验证：提示文字应落在滑轨内，而非覆盖整块拼图 */
.slider-track{position:relative}
.slider-verify>.slider-hint{
  position:static;
  display:block;
  margin-top:var(--sp-2);
  padding:0 var(--sp-1);
  text-align:center;
  line-height:1.5;
}

/* 认证页左侧宣传区在中等屏幕以下隐藏（避免挤压表单） */
@media (max-width:860px){
  .auth-shell.has-side{grid-template-columns:minmax(0,1fr)}
  .auth-side{display:none}
}

/* 表格里的用户单元格：头像 + 昵称 + 账号三行紧凑排列 */
.table .cell-user{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-width:0;
}
.table .cell-user .cell-user-text{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.table .cell-user .cell-user-name{
  font-weight:var(--fw-semi);
  color:var(--c-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:12em;
}
.table .cell-user .cell-user-id{
  font-size:var(--fs-2xs);
  color:var(--c-muted);
  font-family:var(--font-mono);
}

/* 表格操作列：按钮自动换行不撑破单元格 */
.table-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-1);
}

/* 日志表格的文字列限制宽度，避免长 UA 把表格撑开 */
.table .cell-long{
  max-width:34ch;
  overflow-wrap:anywhere;
  color:var(--c-muted);
  font-size:var(--fs-2xs);
}

/* 首页折叠面板内的空状态边距 */
.accordion-body .empty{margin-bottom:0}

/* 排行榜头部说明行 */
.rank-list>.muted:first-child{margin:0 0 var(--sp-2)}

/* 排行榜当前的统计口径说明 */
.rank-scope{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);
  margin-bottom:var(--sp-3);
  border:1px solid var(--c-primary-100);
  border-radius:var(--r-lg);
  background:linear-gradient(100deg,var(--c-primary-50),var(--c-surface) 70%);
}
.rank-scope-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.rank-scope-title{
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--c-primary-700);
  overflow-wrap:anywhere;
}
.rank-scope-sub{font-size:var(--fs-2xs);color:var(--c-muted)}

/* 弹窗内的长文本（例如临时密码） */
.modal .code{
  display:block;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  background:var(--c-surface-2);
  border:1px dashed var(--c-primary-200);
  color:var(--c-primary-700);
  font-family:var(--font-mono);
  word-break:break-all;
}

/* 个人中心头像选择器尺寸对齐 */
.profile-card .avatar-picker .avatar-xl{display:flex}

/* 移动端：后台侧栏胶囊条内隐藏分组标题 */
@media (max-width:860px){
  .review-card-head{justify-content:flex-start}
}

/* ==========================================================================
   图形验证码控件（填写式，替代原滑块验证）
   ========================================================================== */
.captcha-verify{width:100%}
.captcha-verify .captcha-box{
  display:flex;
  align-items:stretch;
  gap:var(--sp-2);
  flex-wrap:wrap;
}
.captcha-verify .captcha-img-wrap{
  position:relative;
  display:block;
  padding:0;
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  background:var(--c-surface-2);
  cursor:pointer;
  overflow:hidden;
  line-height:0;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.captcha-verify .captcha-img-wrap:hover{
  border-color:var(--c-primary-200);
  box-shadow:var(--sh-sm);
}
.captcha-verify .captcha-img{
  display:block;
  /* 尺寸与服务端 config.human.captchaWidth / captchaHeight 保持一致 */
  width:176px;
  height:56px;
  border-radius:calc(var(--r-md) - 1px);
  background:var(--c-surface-2);
}
/* 图片右下角的「点击换一张」提示：平时淡出，悬停/聚焦时显现 */
.captcha-verify .captcha-img-hint{
  position:absolute;
  right:3px;
  bottom:3px;
  padding:1px 6px;
  border-radius:var(--r-pill);
  background:rgba(15,23,42,.62);
  color:#fff;
  font-size:9px;
  font-weight:var(--fw-semi);
  letter-spacing:.02em;
  line-height:1.5;
  opacity:0;
  transform:translateY(2px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
  pointer-events:none;
  white-space:nowrap;
}
.captcha-verify .captcha-img-wrap:hover .captcha-img-hint,
.captcha-verify .captcha-img-wrap:focus-visible .captcha-img-hint{
  opacity:1;
  transform:none;
}
/* 加载态：图片未到位时显示转圈 */
.captcha-verify .captcha-loading{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:none;
}
.captcha-verify .captcha-img-wrap.loading .captcha-loading{display:block}
.captcha-verify .captcha-img-wrap.loading .captcha-img{opacity:.35}

.captcha-verify .captcha-side{
  display:flex;
  flex:1 1 150px;
  min-width:130px;
  gap:var(--sp-2);
  align-items:stretch;
}
.captcha-verify .captcha-input{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--c-border);
  border-radius:var(--r-field);
  background:var(--c-surface);
  color:var(--c-text);
  font-size:var(--fs-md);
  letter-spacing:.18em;
  text-transform:uppercase;
  outline:none;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.captcha-verify .captcha-input:focus{
  border-color:var(--c-primary);
  box-shadow:var(--sh-focus-ring);
}
.captcha-verify .captcha-input::placeholder{
  color:var(--c-muted-2);
  letter-spacing:normal;
}
/* 通过后整块轻微高亮，给出即时反馈 */
.captcha-verify.verified .captcha-img-wrap{
  border-color:var(--c-success);
  box-shadow:0 0 0 3px var(--c-success-100);
}
.captcha-verify.verified .captcha-input{
  border-color:var(--c-success);
  color:var(--c-success-strong);
}

/* ==========================================================================
   独立的「审核」界面（管理员专用）
   - 筛选栏：全部 / 活动 / 投票 / 管理员申请 / 反馈
   - 大方框里只显示标题，点击后弹出详情处理
   ========================================================================== */
.audit-filters{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-wrap:wrap;
  margin-bottom:var(--sp-4);
}
.audit-filter{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 18px;
  border:1px solid var(--c-border);
  border-radius:var(--r-pill);
  background:var(--c-surface);
  color:var(--c-text-2);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semi);
  cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.audit-filter:hover{border-color:var(--c-primary-300);color:var(--c-primary-700)}
.audit-filter.active{
  background:var(--c-primary-600, var(--c-primary));
  border-color:var(--c-primary-600, var(--c-primary));
  color:#fff;
}
.audit-filter.active .count-badge{background:rgba(255,255,255,.25);color:#fff}

/* 大方框网格：只显示标题 */
.audit-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:var(--sp-3);
}
/* 空状态要横跨整行，否则会被挤成一个窄方块 */
.audit-grid > .empty{
  grid-column:1 / -1;
}
/* 审核界面可以更宽一些（限制在 --page-max-wide 内，避免超宽屏拉太散） */
#view-audit{
  width:100%;
  max-width:var(--page-max-wide);
  margin-left:auto;
  margin-right:auto;
}
/* 审核界面在外层 .page 容器里，容器本身默认 1180px 会把它卡住，
   这里在只显示审核界面时把容器放宽 */
.page:has(#view-audit.active){
  max-width:var(--page-max-wide);
}
.audit-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:18px 20px;
  min-height:104px;
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  background:var(--c-surface);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.audit-card:hover{
  border-color:var(--c-primary-300);
  box-shadow:var(--sh-sm);
  transform:translateY(-1px);
}
.audit-card:focus-visible{outline:2px solid var(--c-primary-400);outline-offset:2px}
.audit-card-type{
  font-size:var(--fs-2xs);
  font-weight:var(--fw-bold);
  color:var(--c-primary-700);
  background:var(--c-primary-50);
  border-radius:var(--r-sm);
  padding:2px 8px;
}
.audit-card-title{
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  color:var(--c-text-1);
  line-height:1.5;
  /* 标题最多两行，超出省略，保持方框整齐 */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.audit-card-meta{
  margin-top:auto;
  font-size:var(--fs-2xs);
  color:var(--c-muted);
}

/* 详情弹窗里的字段表 */
.detail-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.detail-list>div{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:var(--sp-3);
  align-items:start;
  font-size:var(--fs-sm);
  line-height:var(--lh-base);
}
.detail-list>b,
.detail-list>div>b{
  color:var(--c-muted);
  font-weight:var(--fw-semi);
}
.detail-list>div>span{color:var(--c-text-2);overflow-wrap:anywhere}
.detail-pre{white-space:normal;overflow-wrap:anywhere}
.detail-ul{margin:0;padding-left:18px}
.detail-ul li{margin:2px 0}

@media (max-width:640px){
  .audit-grid{grid-template-columns:1fr}
  .audit-card{min-height:88px;padding:14px 16px}
  .detail-list>div{grid-template-columns:1fr;gap:2px}
}

/* ==========================================================================
   反馈处理结果：采纳 = 绿色，未采纳 = 红色
   ⚠️ 这里的尺寸/行高必须与旁边的 .fb-type 保持一致（同 padding、同 line-height、
      同 display 类型），否则用 inline-flex 会与行内元素产生 1~2px 的基线差，
      视觉上看起来就像「没有显示在一行里」。
   ========================================================================== */
.fb-state{
  display:inline-block;
  padding:3px 10px;
  border:0;
  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-state-accepted{
  background:var(--c-success-100);
  color:var(--c-success-strong);
}
.fb-state-rejected{
  background:var(--c-danger-100);
  color:var(--c-danger-strong);
}
.fb-state-pending{
  background:var(--c-warn-100);
  color:var(--c-warn-strong);
}
/* 深色模式下同样是绿 / 红，只是底色跟着主题换 */
body .fb-state-accepted{background:var(--c-success-100);color:var(--c-success-strong)}
body .fb-state-rejected{background:var(--c-danger-100);color:var(--c-danger-strong)}
/* 后台表格里也保持一致 */
.table .fb-state{margin:2px 0}

/* 弹窗中的验证码：图片与输入框纵向排列，方便小屏操作 */
.modal .captcha-verify .captcha-box{flex-direction:column}
.modal .captcha-verify .captcha-img{width:100%;height:56px;object-fit:cover}
.modal .captcha-verify .captcha-side{flex:1 1 auto;width:100%}

@media (max-width:420px){
  .captcha-verify .captcha-img{width:132px;height:42px}
  .captcha-verify .captcha-side{min-width:110px}
}

/* ==========================================================================
   活动时段：报名截止状态
   ========================================================================== */
/* 已过报名截止的时段整行淡化，并给按钮区一致的视觉提示 */
.slot.slot-expired{opacity:.72}
.slot.slot-expired .s-start,.slot.slot-expired .s-end{color:var(--c-muted)}
.slot-deadline{
  display:block;
  margin-top:2px;
  font-size:var(--fs-2xs);
  color:var(--c-muted);
}
/* 「报名已截止」标签 */
.tag-closed{background:var(--c-neutral-100, #e2e8f0);color:var(--c-muted)}

/* 验证码因过期被自动换掉时，给图片一个短暂的提示动画 */
@keyframes captcha-expired-flash{
  0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}
  50%{box-shadow:0 0 0 3px rgba(220,38,38,.45)}
}
.captcha-verify.expired-flash .captcha-box,
.captcha-box.expired-flash{
  animation:captcha-expired-flash .6s ease-in-out 2;
  border-radius:var(--r-sm);
}

/* ==========================================================================
   面板内页签（审核 / 管理）
   侧边栏点「活动管理」「投票管理」后，页面顶部出现这两个页签
   ========================================================================== */
.sub-tabs{
  display:flex;
  align-items:center;
  gap:var(--sp-1);
  margin-bottom:var(--sp-4);
  padding:4px;
  border:1px solid var(--c-border);
  border-radius:var(--r-pill);
  background:var(--c-surface-2);
  width:fit-content;
  max-width:100%;
  overflow-x:auto;
}
.sub-tab{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 18px;
  border:0;
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--c-muted);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semi);
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.sub-tab:hover{color:var(--c-text-2)}
.sub-tab.active{
  background:var(--c-surface);
  color:var(--c-primary-700);
  box-shadow:var(--sh-xs, 0 1px 2px rgba(15,23,42,.08));
}
.sub-panel{display:none}
.sub-panel.active{display:block}

/* ==========================================================================
   后台侧栏大类：倒三角展开 + 大类红点
   - 收起/展开由 .sidebar-group.open 控制
   - 小类有未处理项时大类标题也显示红点（即使收起）
   ========================================================================== */
.admin-sidebar .sidebar-group-title{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  user-select:none;
  border-radius:var(--r-sm);
  transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.admin-sidebar .sidebar-group-title:hover{background:var(--c-surface-2);color:var(--c-text-2)}
.admin-sidebar .sidebar-group-title:focus-visible{
  outline:2px solid var(--c-primary-400);
  outline-offset:1px;
}
/* 倒三角：收起时指向右侧，展开时指向下方 */
.sidebar-group-caret{
  flex:0 0 auto;
  width:0;
  height:0;
  margin-right:2px;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:6px solid currentColor;
  transition:transform var(--dur-2) var(--ease);
  opacity:.75;
}
.sidebar-group.open .sidebar-group-caret{transform:rotate(90deg)}
.sidebar-group-label{flex:1 1 auto;min-width:0}
/* 大类红点：始终停在标题右侧 */
.admin-sidebar .sidebar-group-dot{
  /**
   * ⚠️ 这里必须是 relative，不能是 static。
   * .nav-dot::after 用 inset:0 + scale(2.6) 做脉冲扩散，
   * 一旦父元素不是定位元素，这个伪元素就会相对最近的定位祖先（整个侧栏）铺开，
   * 缩放后变成一大块红色盖住整条选择栏——就是「后台有消息时整栏变红」的原因。
   */
  position:relative;
  flex:0 0 auto;
  margin-left:auto;
}
/* 收起时隐藏子项 */
.admin-sidebar .sidebar-group:not(.open) .sidebar-group-items{display:none}
/**
 * 有未处理项的大类标题**不做任何变色**（保持与其他大类一致）。
 * 之前这里加了 color 强调，看起来像整条选择栏变红，已按要求去掉；
 * 提示只保留标题右侧那个小红点。
 */

/* ==========================================================================
   页面标题行：左侧标题说明 + 右侧操作按钮（如「查看审核」/「申请创建投票」）

   约定：
   - 宽屏：按钮与说明**同一排**，按钮靠右
   - 窄屏（手机上）：按钮换行到说明**下方**，占满整行
   注意不能对整行使用 flex-wrap 而不限制文字宽度，
   否则文字块会把按钮挤到下一行，连宽屏也变成上下排列。
   ========================================================================== */
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-4);
  margin-bottom:var(--sp-4);
}
/* 说明块允许收缩，按钮才不会被挤下去 */
.page-head>div:first-child{
  flex:1 1 auto;
  min-width:0;
}
.page-head .page-title,.page-head .page-sub{margin-bottom:0}
.page-head .page-sub{max-width:none}
.page-head-actions{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex:0 0 auto;
  /* 宽屏时固定在右侧；窄屏换行后换成靠左（见下方 640px 断点） */
  margin-left:auto;
}
.page-head-actions.hidden{display:none}

/* 手机：按钮换行到说明下方并占满整行，点击区域更大 */
@media (max-width:640px){
  .page-head{flex-wrap:wrap}
  .page-head>div:first-child{flex:1 1 100%}
  .page-head-actions{margin-left:0;width:100%}
  .page-head-actions .btn{width:100%}
}

/* 审核状态卡片里「修改后重新申请」那一行 */
.review-card-actions{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  flex-wrap:wrap;
  margin-top:var(--sp-3);
  padding-top:var(--sp-3);
  border-top:1px dashed var(--c-border);
}
.review-card-actions .muted{font-size:var(--fs-2xs)}

/* ==========================================================================
   认证卡底部：右下角「没有账号？去注册」
   ========================================================================== */
.auth-foot{
  display:flex;
  align-items:center;
  gap:var(--sp-1);
  flex-wrap:wrap;
}
/* 版权信息推到左侧，注册引导固定在右下角 */
.auth-foot-copy{
  margin-right:auto;
  order:-1;
  font-size:var(--fs-2xs);
  color:var(--c-muted-2);
}
.auth-foot .link{
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--c-primary-600);
  padding:2px 4px;
  border-radius:var(--r-xs);
  transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.auth-foot .link:hover{background:var(--c-primary-50);text-decoration:none}
/* 切换到对应面板后，这行提示自动隐藏，避免重复引导 */
.auth-foot-text.hidden,.auth-foot .link.hidden{display:none}

/* ==========================================================================
   头像裁剪：选择显示区域
   ========================================================================== */
.crop-modal{max-width:420px}
.crop-modal .modal-body{padding-top:0}

.crop-stage{
  position:relative;
  width:288px;
  height:288px;
  max-width:100%;
  margin:0 auto var(--sp-4);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:
    repeating-conic-gradient(var(--c-surface-2) 0% 25%, var(--c-surface) 0% 50%) 50% / 18px 18px;
  border:1px solid var(--c-border);
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.crop-stage.dragging{cursor:grabbing}
.crop-canvas{display:block;width:100%;height:100%}

/* 圆形遮罩：只保留圆心一块可见，虚线提示头像的圆形边界 */
.crop-mask{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--c-primary-100);
  background:radial-gradient(circle at 50% 50%,
    transparent 0 49%,
    rgba(15,23,42,.08) 49.5% 55%,
    rgba(15,23,42,.42) 55% 100%);
}
.crop-mask::after{
  content:"";
  position:absolute;
  top:5%;left:5%;
  width:90%;height:90%;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(2,132,199,.45);
}
.crop-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--c-surface-2);
}
.crop-loading.hidden{display:none}

.crop-controls{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.crop-zoom-btn{
  width:36px;height:36px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  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-lg);
  font-weight:var(--fw-bold);
  line-height:1;
  cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.crop-zoom-btn:hover{background:var(--c-primary-100);border-color:var(--c-primary-200)}
.crop-zoom-btn:disabled{opacity:.5;cursor:not-allowed}
.crop-zoom{
  flex:1 1 auto;
  min-width:0;
  height:24px;
  accent-color:var(--c-primary-600);
  cursor:pointer;
}
.crop-zoom:disabled{opacity:.5;cursor:not-allowed}

.crop-actions-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  flex-wrap:wrap;
}

@media (max-width:420px){
  .crop-stage{width:min(288px, 74vw);height:min(288px, 74vw)}
}

/* ==========================================================================
   后台侧栏：适配组件层的新类名（.sidebar-group / .sidebar-item）
   responsive.css 中的胶囊条样式是针对旧类名 .admin-group / .admin-group-item
   编写的，这里把同一套行为补到新类名上，保证移动端后台侧栏可用。
   ========================================================================== */
@media (max-width:860px){
  .admin-sidebar .sidebar-group{
    display:flex;
    flex:0 0 auto;
    gap:var(--sp-2);
    min-width:0;
  }
  .admin-sidebar .sidebar-group+.sidebar-group{margin-top:0}
  .admin-sidebar .sidebar-group-title{display:none}
  .admin-sidebar .sidebar-group-items{
    display:flex !important;
    flex-direction:row;
    flex-wrap:nowrap !important;
    gap:var(--sp-2);
    margin:0;
    padding:0;
    width:auto;
  }
  .admin-sidebar .sidebar-item{
    display:inline-flex;
    align-items:center;
    gap:var(--sp-1);
    width:auto;
    flex:0 0 auto;
    padding:7px 14px;
    border-radius:var(--r-pill);
    background:var(--c-surface-2);
    color:var(--c-primary-700);
    font-size:var(--fs-xs);
    font-weight:var(--fw-semi);
    white-space:nowrap;
    scroll-snap-align:start;
  }
  .admin-sidebar .sidebar-item.active{
    background:var(--g-primary);
    color:#fff;
    box-shadow:var(--sh-primary);
  }
  .admin-sidebar .sidebar-item .count-badge{margin-left:var(--sp-1)}
  .admin-sidebar .sidebar-item.active .count-badge{background:rgba(255,255,255,.28);color:#fff}
}

/* 顶部导航在窄屏下的溢出保护与收紧 */
@media (max-width:640px){
  .topbar-inner{overflow:hidden;gap:var(--sp-3)}
  .nav-actions{gap:var(--sp-2);flex-shrink:0}
  .nav-actions .btn-sm{padding:6px 10px;font-size:var(--fs-2xs)}
  .brand{gap:var(--sp-2)}
}
@media (max-width:480px){
  /* 极窄屏：隐藏文字品牌名，把空间让给功能按钮 */
  .brand-name{display:none}
  .nav-actions .btn-sm{padding:6px 9px}
}