/* ========== 积分排行榜 ========== */

.ranking-row {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 14px;

  border-radius: 10px;

  background: var(--surface-2, #1a1d33);

  margin-bottom: 8px;

}

.ranking-row:nth-child(odd) { background: var(--surface-3, #20243f); }

.ranking-rank { font-size: 20px; min-width: 36px; text-align: center; }

.ranking-name { flex: 1; font-weight: 600; }

.ranking-credits { color: var(--primary); font-weight: 700; }

.ranking-list .loading, .ranking-list .empty {

  padding: 18px; text-align: center; opacity: 0.7;

}

/* 主页帮助微文档切换 */

.help-tabs {

  display: flex;

  gap: 8px;

  margin: 18px 0 12px;

  flex-wrap: wrap;

}

.help-tab {

  padding: 8px 16px;

  border: 1px solid var(--outline);

  border-radius: 999px;

  background: var(--surface-2, #1a1d33);

  color: var(--on-surface);

  font-size: 14px;

  cursor: pointer;

  transition: background 0.15s, color 0.15s, border-color 0.15s;

}

.help-tab:hover {

  border-color: var(--primary);

  color: var(--primary);

}

.help-tab.active {

  background: var(--primary);

  border-color: var(--primary);

  color: var(--on-primary);

}

.help-panel {

  display: none;

  padding: 16px 18px;

  border-radius: 12px;

  background: var(--surface-2, #1a1d33);

  border-left: 3px solid var(--primary);

}

.chk {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  font-size: 0.82rem;

  color: var(--on-surface);

  cursor: pointer;

  user-select: none;

}

.help-panel.active {

  display: block;

}

.help-panel h3 {

  margin: 0 0 8px;

  color: var(--primary);

}

.help-panel ul {

  margin: 8px 0 0;

  padding-left: 20px;

}

.help-panel li {

  margin-bottom: 4px;

}

/* 马卡龙预设色板：连接的圆角长条色条，每段一个按钮，两头圆 */

.swatches {

  display: flex;

  width: 100%;

  gap: 0;

  margin: 8px 0 2px;

  border-radius: 999px;

  overflow: hidden;

  border: 1px solid var(--outline, #2a2d4a);

}

/* 马卡龙预设色板：连接的圆角长条色条，每段一个按钮，两头圆 */

.swatches {

  display: flex;

  width: 100%;

  gap: 0;

  margin: 8px 0 2px;

  border-radius: 999px;

  overflow: hidden;

  border: 1px solid var(--outline, #2a2d4a);

}

.swatch {

  flex: 1 1 0;

  min-width: 0;

  height: 26px;

  border: none;

  cursor: pointer;

  padding: 0;

  transition: filter 0.12s, transform 0.12s;

}

.swatch:hover {

  filter: brightness(1.12);

}

.swatch.active {

  box-shadow: inset 0 0 0 3px var(--on-surface);

}

/* 侧栏主题工具容器：颜色选择 + 操作按钮并排，色板独立一行 */

.theme-tools {

  display: flex;

  flex-direction: column;

  gap: 10px;

  align-items: stretch;

}

.theme-row {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 10px;

}

/* 背景切换 / Stars 彩蛋 按钮并排 */

.footer-actions {

  display: flex;

  gap: 8px;

}

.footer-actions .icon-btn {

  flex: 1 1 0;

  width: auto;

  justify-content: center;

}

.btn-text {

  margin-left: 4px;

  font-size: 12px;

}

/* 背景切换激活时，让主布局容器半透明，透出 body 背景 */

body.bg-custom .app-layout,

body.bg-custom .main-content,

body.bg-custom .content-area,

body.bg-custom .sidebar,

body:not(.theme-arco).bg-spotlight .app-layout,

body:not(.theme-arco).bg-spotlight .main-content,

body:not(.theme-arco).bg-spotlight .content-area,

body:not(.theme-arco).bg-spotlight .sidebar {

  /* 聚光灯模式：上层容器完全透明，让 body 的聚光渐变完整透出，不被灰色遮挡 */

  background: transparent !important;

  backdrop-filter: none;

}

/* 顶栏必须保持不透明磨砂底，否则下滑时内容会穿透并与标题重叠 */

body.bg-custom .top-bar,

body:not(.theme-arco).bg-spotlight .top-bar {

  background: color-mix(in srgb, var(--primary) 10%, var(--surface)) !important;

  backdrop-filter: blur(8px);

}

/* 侧面聚光灯：以自选主色为光束颜色，左侧打光 + 斜向光束轨迹 */

body:not(.theme-arco).bg-spotlight {

  background:

    /* 光束起点：左上角高亮 */

    radial-gradient(40% 38% at 12% 8%,

      color-mix(in srgb, var(--primary) 70%, transparent) 0%,

      transparent 60%),

    /* 光束轨迹：从左上斜射到底部中点 */

    linear-gradient(135deg,

      color-mix(in srgb, var(--primary) 38%, transparent) 0%,

      color-mix(in srgb, var(--primary) 12%, transparent) 30%,

      transparent 62%),

    /* 质心椭圆光斑：位于页面底部中点 */

    radial-gradient(ellipse 55% 42% at 50% 86%,

      color-mix(in srgb, var(--primary) 42%, transparent) 0%,

      transparent 72%),

    conic-gradient(from 225deg at 50% 86%,

      color-mix(in srgb, var(--primary) 22%, transparent) 0deg,

      transparent 40deg,

      color-mix(in srgb, var(--primary) 12%, transparent) 90deg,

      transparent 160deg),

    #0F0E17;

  background-attachment: fixed;

}


/* ---- 骞冲彴鍏憡锛堥椤碉紱鍐呭鏉ヨ嚜 admin 鍚庡彴鍙戝竷鐨勫叕鍛婏級---- */
.announce-box {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.announce-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.announce-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.announce-list > li {
  padding: 10px 0;
  border-top: 1px dashed color-mix(in srgb, var(--primary) 25%, transparent);
}
.announce-list > li:first-child {
  border-top: none;
  padding-top: 0;
}
.announce-title {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.announce-body {
  margin-top: 4px;
  white-space: pre-wrap;
  line-height: 1.6;
  opacity: 0.92;
}
.announce-time {
  margin-top: 4px;
  font-size: 0.78rem;
  opacity: 0.6;
}
.announce-pin {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
}

/* ---- 平台公告（独立页 /page-announce）---- */
.announce-empty {
  padding: 16px 0;
  text-align: center;
  opacity: 0.6;
}