/* 烛心站点 · CSS 合并包（不含字体） */

/* ========== style.css ========== */
/* ============================================================
   烛心 · 多板块站点样式
   ============================================================ */
:root {
  --accent: #e8a33d;
  --bg: #0d0f12;
  --card: #161a20;
  --text: #e8eaed;
  --muted: #8b939e;
  --line: rgba(255,255,255,.08);
  --radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap { width: min(1080px, 92vw); margin: 0 auto; }

/* ================= 顶部栏 ================= */
.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex; align-items: center; height: 68px; gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--text);
}
.brand-avatar {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-size: 19px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text b { font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.brand-text i { font-size: 12px; color: var(--muted); font-style: normal; }

.menu-btn {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); color: var(--text);
  font-size: 17px; padding: 5px 13px; border-radius: 9px; cursor: pointer;
}

/* ================= 标签导航 ================= */
.tabs-wrap { border-top: 1px solid var(--line); position: relative; }
.tabs {
  display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none; padding: 0;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 7px;
  padding: 15px 18px; font-size: 14.5px; color: var(--muted);
  text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.tab .ti { font-size: 15px; opacity: .85; }
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--text); font-weight: 600;
}
.tab.active .ti { opacity: 1; }

/* ================= 页面标题 ================= */
main { flex: 1; padding-bottom: 90px; }
.page-head {
  padding: 52px 0 34px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.page-head h1 {
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 800; letter-spacing: -1px; margin-bottom: 8px;
}
.page-head p { color: var(--muted); font-size: 15.5px; }

/* 页面切换动画 */
#blocks { animation: fade .38s ease both; }
@keyframes fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ================= 通用区块 ================= */
.block { margin-bottom: 46px; }
.block-title {
  font-size: 18px; font-weight: 700; margin-bottom: 20px;
  display: flex; align-items: center; gap: 11px;
}
.block-title::before {
  content: ''; width: 3px; height: 18px; border-radius: 2px;
  background: var(--accent);
}
.block-text p { color: var(--muted); font-size: 16px; margin-bottom: 13px; }
.block-text p:last-child { margin-bottom: 0; }

/* ---------- 数据条 ---------- */
.stats {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
}
.stat b {
  display: block; font-size: 28px; font-weight: 800;
  color: var(--accent); line-height: 1.2;
}
.stat span { color: var(--muted); font-size: 13.5px; }

/* ---------- 时间线 ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1.5px; background: var(--line);
}
.tl-item { position: relative; padding-bottom: 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -26px; top: 8px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.tl-time {
  font-size: 12.5px; font-weight: 700; color: var(--accent);
  letter-spacing: 1px; margin-bottom: 4px;
}
.tl-item h4 { font-size: 16px; margin-bottom: 4px; font-weight: 700; }
.tl-item p { color: var(--muted); font-size: 14.5px; }

/* ---------- 卡片网格 ---------- */
.cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cards[data-cols="2"] { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cards[data-cols="4"] { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.acard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
  text-decoration: none; color: inherit; display: block;
  transition: transform .25s, border-color .25s, background .25s;
}
a.acard:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--card) 88%, var(--accent));
}
.acard .ic { font-size: 25px; display: block; margin-bottom: 13px; }
.acard h3 { font-size: 17px; margin-bottom: 7px; font-weight: 700; }
.acard p { color: var(--muted); font-size: 14.5px; }
.tag {
  display: inline-block; font-size: 11.5px; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 999px; padding: 2px 10px; margin-bottom: 11px;
}

/* ---------- 列表 ---------- */
.list { display: grid; gap: 13px; }
.li {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
  transition: transform .22s, border-color .22s;
}
a.li:hover {
  transform: translateX(4px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.li-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.li-head h4 { font-size: 16.5px; font-weight: 700; }
.li p { color: var(--muted); font-size: 14.5px; }
.li-meta { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.chip {
  font-size: 11.5px; color: var(--muted);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 6px; padding: 2px 9px;
}

/* ---------- 技能条 ---------- */
.bars { display: grid; gap: 17px; }
.bar-row { display: grid; gap: 7px; }
.bar-top { display: flex; justify-content: space-between; font-size: 14.5px; }
.bar-top span:last-child { color: var(--muted); font-size: 13px; }
.bar-track {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.bar-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
  transition: width 1s cubic-bezier(.22,1,.36,1);
}

/* ---------- 标签云 ---------- */
.tagcloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tagcloud span {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 16px; font-size: 14px;
  transition: border-color .2s, color .2s, transform .2s;
}
.tagcloud span:hover {
  border-color: var(--accent); color: var(--accent); transform: translateY(-2px);
}

/* ---------- 图集 ---------- */
.gallery {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gitem {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
  transition: transform .25s, border-color .25s;
}
.gitem:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.gitem img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.gitem .ph {
  width: 100%; aspect-ratio: 16/10;
  display: grid; place-items: center; font-size: 30px;
  color: var(--muted);
  background: repeating-linear-gradient(45deg,
      transparent, transparent 11px,
      color-mix(in srgb, var(--text) 3%, transparent) 11px,
      color-mix(in srgb, var(--text) 3%, transparent) 22px);
}
.gcap { padding: 13px 16px; font-size: 13.5px; color: var(--muted); }

/* ---------- 联系卡片 ---------- */
.links {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.litem {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
  text-decoration: none; color: inherit;
  display: flex; align-items: center; gap: 14px;
  transition: transform .22s, border-color .22s;
}
.litem:hover { transform: translateY(-3px); border-color: var(--accent); }
.litem .ic { font-size: 22px; }
.litem .k { display: block; font-size: 11.5px; color: var(--muted); letter-spacing: 1.4px; }
.litem .v { font-weight: 600; font-size: 14.5px; }

/* ================= 页脚 ================= */
.footer {
  border-top: 1px solid var(--line);
  padding: 30px 0; text-align: center;
  color: var(--muted); font-size: 13.5px;
}

/* ================= 移动端 ================= */
@media (max-width: 700px) {
  .topbar-inner { height: 60px; }
  .brand-text i { display: none; }
  .menu-btn { display: none; }
  .tab { padding: 13px 14px; font-size: 13.5px; }
  .page-head { padding: 34px 0 26px; margin-bottom: 30px; }
  .block { margin-bottom: 36px; }
  main { padding-bottom: 60px; }
}

/* ============================================================
   积分系统（points）
   ============================================================ */
.pts-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0 6px;
}

.pts-overview .mon-v.up  { color: #4ade80; }
.pts-overview .mon-v.down { color: #ff5d5d; }
.pts-overview .mon-v {
  color: var(--accent);
}

.pts-sec {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px 18px 12px;
  overflow: hidden;
}

.pts-sec-title {
  font-size: 16px;
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.pts-note {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.pts-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 420px;
}

.pts-table th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.pts-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.pts-table tbody tr:last-child td {
  border-bottom: none;
}

.pts-table tbody tr {
  transition: background 0.18s ease;
}

.pts-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.pts-table tr.top3 td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.c-rank {
  width: 56px;
  font-size: 15px;
  white-space: nowrap;
}

.c-user {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pts-name {
  font-weight: 600;
  color: var(--text);
}

.pts-uid {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}

.c-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

th.c-num, th.c-date {
  text-align: right;
}

.pts-gold {
  color: var(--accent);
  font-weight: 700;
}

.pts-red {
  color: #ff5d5d;
  font-weight: 600;
}

.c-fish {
  color: var(--text);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-date {
  text-align: right;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.pts-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 6px 2px 10px;
}

.pts-error {
  margin-top: 18px;
  background: rgba(127, 29, 29, 0.18);
  border: 1px solid rgba(255, 93, 93, 0.35);
  border-radius: 14px;
  padding: 26px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pts-error-ic {
  font-size: 30px;
}

.pts-error b {
  font-size: 15px;
}

.pts-error p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  word-break: break-all;
}

.pts-asset-sub {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px;
}

@media (max-width: 560px) {
  .pts-overview { grid-template-columns: repeat(2, 1fr); }
  .pts-sec { padding: 14px 12px 8px; }
}

/* ============================================================
   视频嵌入（videobox）
   ============================================================ */
.videobox {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.videobox iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.videobox-desc {
  color: var(--muted);
  font-size: 13px;
  margin: 10px 2px 0;
}

/* ============================================================
   积分系统（points）
   ============================================================ */
.pts-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0 6px;
}

.pts-overview .mon-v.up  { color: #4ade80; }
.pts-overview .mon-v.down { color: #ff5d5d; }
.pts-overview .mon-v {
  color: var(--accent);
}

.pts-sec {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px 18px 12px;
  overflow: hidden;
}

.pts-sec-title {
  font-size: 16px;
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.pts-note {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.pts-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 420px;
}

.pts-table th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.pts-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.pts-table tbody tr:last-child td {
  border-bottom: none;
}

.pts-table tbody tr {
  transition: background 0.18s ease;
}

.pts-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.pts-table tr.top3 td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.c-rank {
  width: 56px;
  font-size: 15px;
  white-space: nowrap;
}

.c-user {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pts-name {
  font-weight: 600;
  color: var(--text);
}

.pts-uid {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}

.c-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

th.c-num, th.c-date {
  text-align: right;
}

.pts-gold {
  color: var(--accent);
  font-weight: 700;
}

.pts-red {
  color: #ff5d5d;
  font-weight: 600;
}

.c-fish {
  color: var(--text);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-date {
  text-align: right;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.pts-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 6px 2px 10px;
}

.pts-error {
  margin-top: 18px;
  background: rgba(127, 29, 29, 0.18);
  border: 1px solid rgba(255, 93, 93, 0.35);
  border-radius: 14px;
  padding: 26px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pts-error-ic {
  font-size: 30px;
}

.pts-error b {
  font-size: 15px;
}

.pts-error p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  word-break: break-all;
}

.pts-asset-sub {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px;
}

@media (max-width: 560px) {
  .pts-overview { grid-template-columns: repeat(2, 1fr); }
  .pts-sec { padding: 14px 12px 8px; }
}

/* 修仙榜补充样式 */
.pts-realm {
  display: block;
  font-weight: 700;
  color: var(--text);
}

.pts-cult {
  display: block;
  font-variant-numeric: tabular-nums;
}

.pts-mini-bar {
  display: block;
  height: 4px;
  margin-top: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.pts-mini-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
  transition: width 0.6s ease;
}

/* ============================================================
   一键清理按钮（服务器页）
   ============================================================ */
.mon-clean {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.clean-msg {
  font-size: 13px;
  color: var(--muted);
}

.clean-msg b {
  color: #4ade80;
}

/* ============================================================
   积分系统（points）
   ============================================================ */
.pts-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0 6px;
}

.pts-overview .mon-v.up  { color: #4ade80; }
.pts-overview .mon-v.down { color: #ff5d5d; }
.pts-overview .mon-v {
  color: var(--accent);
}

.pts-sec {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 18px 18px 12px;
  overflow: hidden;
}

.pts-sec-title {
  font-size: 16px;
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.pts-note {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.pts-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 420px;
}

.pts-table th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.pts-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.pts-table tbody tr:last-child td {
  border-bottom: none;
}

.pts-table tbody tr {
  transition: background 0.18s ease;
}

.pts-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.pts-table tr.top3 td {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.c-rank {
  width: 56px;
  font-size: 15px;
  white-space: nowrap;
}

.c-user {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pts-name {
  font-weight: 600;
  color: var(--text);
}

.pts-uid {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}

.c-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

th.c-num, th.c-date {
  text-align: right;
}

.pts-gold {
  color: var(--accent);
  font-weight: 700;
}

.pts-red {
  color: #ff5d5d;
  font-weight: 600;
}

.c-fish {
  color: var(--text);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-date {
  text-align: right;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.pts-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 6px 2px 10px;
}

.pts-error {
  margin-top: 18px;
  background: rgba(127, 29, 29, 0.18);
  border: 1px solid rgba(255, 93, 93, 0.35);
  border-radius: 14px;
  padding: 26px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pts-error-ic {
  font-size: 30px;
}

.pts-error b {
  font-size: 15px;
}

.pts-error p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  word-break: break-all;
}

.pts-asset-sub {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px;
}

@media (max-width: 560px) {
  .pts-overview { grid-template-columns: repeat(2, 1fr); }
  .pts-sec { padding: 14px 12px 8px; }
}

/* 修仙榜补充样式 */
.pts-realm {
  display: block;
  font-weight: 700;
  color: var(--text);
}

.pts-cult {
  display: block;
  font-variant-numeric: tabular-nums;
}

.pts-mini-bar {
  display: block;
  height: 4px;
  margin-top: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.pts-mini-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
  transition: width 0.6s ease;
}

/* ============================================================
   官方 QQ 群
   ============================================================ */
.qqg {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 20px;
}

.qqg-qr {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  padding: 6px;
}

.qqg-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

.qqg-info { flex: 1; min-width: 200px; }

.qqg-name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
}

.qqg-no {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.qqg-no span {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  font-family: ui-monospace, monospace;
  letter-spacing: 1px;
  user-select: all;
  -webkit-user-select: all;
}

.qqg-copy {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .2s;
}

.qqg-copy:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.qqg-copy:active { transform: scale(.97); }

.qqg-desc {
  color: var(--text);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 8px;
}

.qqg-tip { color: var(--muted); font-size: 12px; }

@media (max-width: 560px) {
  .qqg { flex-direction: column; align-items: flex-start; gap: 14px; }
  .qqg-qr { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; }
  .qqg-qr img { height: 100%; }
}

/* ============================================================
   顶栏官方群入口 + 二维码弹窗
   ============================================================ */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.groupbtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, transform .15s;
  animation: groupPulse 2.6s ease-in-out infinite;
}

.groupbtn:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.groupbtn:active { transform: scale(.96); }
.groupbtn .gb-ic { font-size: 15px; }

@keyframes groupPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}

@media (max-width: 420px) {
  .groupbtn .gb-txt { display: none; }
  .groupbtn { padding: 9px 11px; }
}

/* ---- 弹窗 ---- */
.gmodal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
}
.gmodal.on { display: block; }

.gmodal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
  animation: gFade .2s ease;
}

@keyframes gFade { from { opacity: 0 } to { opacity: 1 } }

.gmodal-box {
  position: relative;
  z-index: 1;
  width: min(92vw, 360px);
  margin: 8vh auto 0;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.gmodal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
}

.gmodal-x:hover { color: var(--text); }

.gmodal-title { font-size: 19px; margin-bottom: 4px; }
.gmodal-sub {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  margin-bottom: 16px;
}

.gmodal-qr {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  background: transparent;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}

.gmodal-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  -webkit-user-drag: element;
}

.gmodal-tip {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  margin: 14px 0 16px;
}

.gmodal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.gmodal-btn {
  flex: 1;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 8px;
  border-radius: 11px;
  cursor: pointer;
  transition: background .2s, transform .15s;
}

.gmodal-btn:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.gmodal-btn:active { transform: scale(.97); }
.gmodal-btn.ghost {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
}
.gmodal-btn.ghost:hover { background: rgba(255, 255, 255, .09); }

/* ============================================================
   AI 中转站额度（quota）
   ============================================================ */
.qt-hero {
  display: flex;
  gap: 14px;
  margin-bottom: 6px;
}

.qt-bal {
  flex: 1;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 16%, transparent),
    color-mix(in srgb, var(--accent) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qt-bal-k {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
}

.qt-bal-v {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.qt-bal-sub {
  font-size: 12px;
  color: var(--muted);
}

.qt-sec-title {
  font-size: 13px;
  color: var(--muted);
  margin: 18px 0 10px;
  letter-spacing: .04em;
}

.qt-grid {
  margin-top: 0 !important;
}

.qt-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8;
  margin-top: 12px;
}

@media (max-width: 560px) {
  .qt-bal-v { font-size: 26px; }
}

/* ---- 缓存命中率栏 ---- */
.qt-cache-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qt-cache-card .mon-v {
  color: #4ade80;
}

.qt-cache-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}

.qt-cache-bar {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  margin-top: 2px;
}

.qt-cache-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg,
    color-mix(in srgb, #4ade80 55%, transparent), #4ade80);
  transition: width .6s ease;
}

/* ---- Token 单位切换 ---- */
.qt-unit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}

.qt-unit-label {
  font-size: 12px;
  color: var(--muted);
  margin-right: 2px;
}

.qt-unit button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}

.qt-unit button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .08);
}

.qt-unit button.on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ---- Token 单位切换 ---- */
.qt-unit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}

.qt-unit-label {
  font-size: 12px;
  color: var(--muted);
  margin-right: 2px;
}

.qt-unit button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s;
}

.qt-unit button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .08);
}

.qt-unit button.on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* 昨日用量日期标注 */
.qt-sec-date {
  font-size: 11px;
  color: var(--accent);
  margin-left: 4px;
  font-family: ui-monospace, monospace;
}

/* ---- 每日用量：日期切换 ---- */
.qt-days {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.qt-days button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}

.qt-days button:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .08);
}

.qt-days button.on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ============================================================
   立即刷新按钮
   ============================================================ */
.mon-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.refresh-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, transform .15s;
}

.refresh-btn.small {
  font-size: 12px;
  padding: 5px 10px;
}

.refresh-btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.refresh-btn:active { transform: scale(.96); }
.refresh-btn:disabled { opacity: .6; cursor: not-allowed; }
/* ============================================================
   顶栏登录按钮（本期新增）· 追加到 style.css 末尾
   ============================================================ */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.loginbtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 92%, #fff 8%),
    color-mix(in srgb, var(--accent) 78%, #b8730a 22%));
  color: #1a1206;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 99px;
  white-space: nowrap;
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--accent) 65%, transparent);
  transition: transform .15s, filter .2s, box-shadow .2s;
}
.loginbtn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 7px 22px -5px color-mix(in srgb, var(--accent) 80%, transparent);
}
.loginbtn:active { transform: scale(.96); }
.loginbtn .lb-ic { font-size: 15px; }
.loginbtn.is-logged {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: none;
}

@media (max-width: 480px) {
  .loginbtn .lb-txt { display: none; }
  .loginbtn { padding: 9px 12px; }
}
/* ============================================================
   首页醒目登录横幅
   ============================================================ */
.login-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 20px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 16%, transparent),
    color-mix(in srgb, var(--accent) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: 0 10px 34px -18px color-mix(in srgb, var(--accent) 70%, transparent);
}
.lb-left { display: flex; align-items: center; gap: 14px; }
.lb-emoji {
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--accent) 60%, transparent));
}
.lb-left b { display: block; font-size: 16px; color: var(--text); }
.lb-left span { font-size: 13px; color: var(--muted); }
.lb-btn {
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 800;
  color: #1a1206;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 94%, #fff 6%),
    color-mix(in srgb, var(--accent) 76%, #b8730a 24%));
  box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .15s, filter .2s;
  white-space: nowrap;
}
.lb-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.lb-btn:active { transform: scale(.97); }

@media (max-width: 480px) {
  .login-banner { padding: 15px 16px; }
  .lb-btn { width: 100%; text-align: center; }
}

/* 横幅右侧动作区 + 签到快捷入口 */
.lb-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.lb-sign {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur, .45s) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
              box-shadow var(--dur, .45s),
              border-color var(--dur-fast, .22s),
              filter var(--dur-fast, .22s);
}
.lb-sign .lbs-ic {
  font-size: 15px;
  display: inline-block;
  transition: transform var(--dur, .45s) var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.lb-sign .lbs-txt { display: flex; flex-direction: column; line-height: 1.25; }
.lb-sign .lbs-txt em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  opacity: .78;
}

/* 待签到：可点击，带呼吸光晕 */
.lb-sign.go {
  color: #1a1206;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 92%, #fff 8%),
    color-mix(in srgb, var(--accent) 72%, #b8730a 28%));
  box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 72%, transparent);
  animation: lbSignPulse 2.6s var(--ease-soft, cubic-bezier(.4,0,.2,1)) infinite;
}
@keyframes lbSignPulse {
  0%, 100% { box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 72%, transparent); }
  50%      { box-shadow: 0 6px 28px -4px color-mix(in srgb, var(--accent) 96%, transparent); }
}
.lb-sign.go:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.07);
}
.lb-sign.go:hover .lbs-ic { transform: scale(1.22) rotate(-10deg); }
.lb-sign.go:active { transform: scale(.96); }

/* 已签到：静态徽标 */
.lb-sign.done {
  cursor: default;
  color: #6ee7a0;
  background: color-mix(in srgb, #4ade80 11%, transparent);
  border: 1px solid color-mix(in srgb, #4ade80 34%, transparent);
}
.lb-sign.done:hover { transform: translateY(-1px); }

@media (max-width: 480px) {
  .lb-actions { width: 100%; }
  .lb-sign { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   积分页 · 每日签到卡片
   ============================================================ */
.pts-sign {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 24px;
  margin-bottom: 22px;
  border-radius: var(--radius, 16px);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 15%, var(--card)),
      color-mix(in srgb, var(--accent) 4%, var(--card)) 62%);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: 0 14px 40px -22px color-mix(in srgb, var(--accent) 65%, transparent);
}
/* 卡片内缓慢流动的高光 */
.pts-sign::before {
  content: '';
  position: absolute;
  top: -70%;
  right: -14%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 32%, transparent), transparent 68%);
  filter: blur(34px);
  animation: ptsSignGlow 8s var(--ease-soft, cubic-bezier(.4,0,.2,1)) infinite alternate;
}
@keyframes ptsSignGlow {
  from { transform: translate(0, 0) scale(1); opacity: .65; }
  to   { transform: translate(-30px, 26px) scale(1.2); opacity: 1; }
}

.pts-sign-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  flex: 1 1 260px;
  min-width: 0;
}
.pts-sign-ic {
  font-size: 32px;
  line-height: 1.1;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--accent) 60%, transparent));
  animation: ptsSignBounce 3.4s var(--ease-soft, cubic-bezier(.4,0,.2,1)) infinite;
}
@keyframes ptsSignBounce {
  0%, 72%, 100% { transform: translateY(0) rotate(0deg); }
  80%           { transform: translateY(-7px) rotate(-9deg); }
  88%           { transform: translateY(0) rotate(6deg); }
  94%           { transform: translateY(-3px) rotate(-3deg); }
}
.pts-sign-txt { min-width: 0; }
.pts-sign-txt h4 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 5px;
  color: var(--text);
}
.pts-sign-txt p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 11px;
}
.pts-sign-txt p b { color: var(--accent); }

.pts-sign-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pts-sign-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 99px;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  transition: transform var(--dur-fast, .22s) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
              border-color var(--dur-fast, .22s);
}
.pts-sign-stats span:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.pts-sign-stats i { font-style: normal; }
.pts-sign-stats b {
  color: var(--accent);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 签到按钮：带流光扫过 */
.pts-sign-btn {
  position: relative;
  z-index: 1;
  overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border: none;
  border-radius: 99px;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  color: #1a1206;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 94%, #fff 6%),
    color-mix(in srgb, var(--accent) 74%, #b8730a 26%));
  box-shadow: 0 8px 26px -8px color-mix(in srgb, var(--accent) 72%, transparent);
  transition: transform var(--dur, .45s) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
              box-shadow var(--dur, .45s),
              filter var(--dur-fast, .22s);
}
.pts-sign-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 28%, rgba(255,255,255,.62) 50%, transparent 72%);
  transform: translateX(-130%);
  animation: ptsBtnSheen 3.6s var(--ease-soft, cubic-bezier(.4,0,.2,1)) infinite;
}
@keyframes ptsBtnSheen {
  0%   { transform: translateX(-130%); }
  46%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}
.pts-sign-btn .psb-ic {
  font-size: 16px;
  display: inline-block;
  transition: transform var(--dur, .45s) var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.pts-sign-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 34px -8px color-mix(in srgb, var(--accent) 78%, transparent);
}
.pts-sign-btn:hover .psb-ic { transform: scale(1.2) rotate(-8deg); }
.pts-sign-btn:active { transform: scale(.96); }

@media (max-width: 700px) {
  .pts-sign { padding: 18px 18px; gap: 16px; }
  .pts-sign-btn { width: 100%; justify-content: center; }
  .pts-sign-ic { font-size: 27px; }
  .pts-sign-txt h4 { font-size: 15.5px; }
}


/* ========== anim.css ========== */
/* ============================================================
   烛心 · 动画层
   所有入场/交互动效集中在这里，方便单独调或整层禁用
   关闭全部动画：给 <html> 加 class="no-anim"
   ============================================================ */

/* ---------- 缓动变量 ---------- */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .22s;
  --dur: .45s;
  --dur-slow: .8s;
}

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
html.no-anim *, html.no-anim *::before, html.no-anim *::after {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   1. 背景：缓慢流动的光晕 + 细网格
   ============================================================ */
.bg-layer {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.bg-layer .orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .5;
  will-change: transform;
}
.bg-layer .orb.o1 {
  width: 46vw; height: 46vw; top: -14vw; left: -8vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);
  animation: drift1 26s var(--ease-soft) infinite alternate;
}
.bg-layer .orb.o2 {
  width: 38vw; height: 38vw; bottom: -12vw; right: -6vw;
  background: radial-gradient(circle, color-mix(in srgb, #4a8cff 26%, transparent), transparent 70%);
  animation: drift2 32s var(--ease-soft) infinite alternate;
}
@keyframes drift1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(9vw, 7vh) scale(1.16); }
  100% { transform: translate(4vw, 15vh) scale(.94); }
}
@keyframes drift2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-11vw, -6vh) scale(1.12); }
  100% { transform: translate(-5vw, -13vh) scale(1.04); }
}
/* 细网格，随光晕缓慢平移 */
/* 网格线已移除（改用星空背景） */
.bg-layer .grid { display: none !important; }
@keyframes gridMove {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(46px, 46px, 0); }
}
/* 顶层内容需要盖住背景层 */
.topbar, main, .footer { position: relative; z-index: 1; }

/* ============================================================
   2. 顶部栏 + 标签：下划线滑动、图标微动
   ============================================================ */
.topbar {
}

.brand-avatar {
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur);
}
.brand:hover .brand-avatar {
  transform: rotate(-8deg) scale(1.1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* 标签：依次浮现 */
.tab {
  position: relative;
  transition: color var(--dur-fast) var(--ease-soft);
}
.tab:nth-child(1) { animation-delay: .06s; }
.tab:nth-child(2) { animation-delay: .11s; }
.tab:nth-child(3) { animation-delay: .16s; }
.tab:nth-child(4) { animation-delay: .21s; }
.tab:nth-child(5) { animation-delay: .26s; }
.tab:nth-child(6) { animation-delay: .31s; }
.tab:nth-child(7) { animation-delay: .36s; }
.tab:nth-child(8) { animation-delay: .41s; }

/* 滑动下划线（独立元素，在标签之间平滑移动） */
/* 下划线：定位相对 .tabs-wrap（它本身不滚动），
   不放在滚动容器 .tabs 里，横向滚动时就不会跟着飘 */
.tab-underline {
  position: absolute; height: 2px; z-index: 60;
  left: 0; top: 0;               /* 用 translate 定位，不用 bottom */
  background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 10px var(--accent);
  transition: transform var(--dur) var(--ease-out),
              width var(--dur) var(--ease-out),
              opacity .2s var(--ease-soft);
  will-change: transform, width;
  pointer-events: none;
}
.tab-underline.hide { opacity: 0; }
.tab .ti { display: inline-block; transition: transform var(--dur) var(--ease-spring); }
.tab:hover .ti { transform: translateY(-2px) scale(1.14); }
.tab.active .ti { animation: iconPop .5s var(--ease-spring); }

/* ============================================================
   3. 页面切换：整块上浮 + 子元素级联浮现
   ============================================================ */
.page-head h1, .page-head p { animation: headIn .62s var(--ease-out) both; }
.page-head h1 { animation-delay: .04s; }
.page-head p  { animation-delay: .12s; }

/* 区块级联：每个 .block 依次进入 */
#blocks > .block {
}
#blocks > .block:nth-child(1) { animation-delay: .10s; }
#blocks > .block:nth-child(2) { animation-delay: .20s; }
#blocks > .block:nth-child(3) { animation-delay: .30s; }
#blocks > .block:nth-child(4) { animation-delay: .40s; }
#blocks > .block:nth-child(5) { animation-delay: .50s; }
#blocks > .block:nth-child(6) { animation-delay: .60s; }
#blocks > .block:nth-child(7) { animation-delay: .70s; }
#blocks > .block:nth-child(8) { animation-delay: .80s; }

/* ============================================================
   4. 卡片：进场 + 鼠标跟随光泽 + 悬停抬升
   ============================================================ */
.acard, .li, .stat, .litem, .gitem {
  position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-soft),
              background var(--dur) var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft);
}
/* 鼠标位置光泽（--mx/--my 由 JS 写入） */
.acard::after, .li::after, .litem::after, .gitem::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%);
  transition: opacity var(--dur) var(--ease-soft);
}
.acard:hover::after, .li:hover::after,
.litem:hover::after, .gitem:hover::after { opacity: 1; }

a.acard:hover, a.li:hover { box-shadow: 0 16px 40px -14px rgba(0,0,0,.6); }
.litem:hover { box-shadow: 0 14px 32px -14px rgba(0,0,0,.55); }
.gitem:hover { box-shadow: 0 16px 40px -14px rgba(0,0,0,.6); }

/* 卡片进场：交错 */
.cards .acard, .list .li, .stats .stat, .links .litem, .gallery .gitem {
}

.cards .acard:nth-child(1), .list .li:nth-child(1), .stats .stat:nth-child(1),
.links .litem:nth-child(1), .gallery .gitem:nth-child(1) { animation-delay: .30s; }
.cards .acard:nth-child(2), .list .li:nth-child(2), .stats .stat:nth-child(2),
.links .litem:nth-child(2), .gallery .gitem:nth-child(2) { animation-delay: .37s; }
.cards .acard:nth-child(3), .list .li:nth-child(3), .stats .stat:nth-child(3),
.links .litem:nth-child(3), .gallery .gitem:nth-child(3) { animation-delay: .44s; }
.cards .acard:nth-child(4), .list .li:nth-child(4), .stats .stat:nth-child(4),
.links .litem:nth-child(4), .gallery .gitem:nth-child(4) { animation-delay: .51s; }
.cards .acard:nth-child(5), .list .li:nth-child(5), .stats .stat:nth-child(5),
.links .litem:nth-child(5), .gallery .gitem:nth-child(5) { animation-delay: .58s; }
.cards .acard:nth-child(6), .list .li:nth-child(6), .stats .stat:nth-child(6),
.links .litem:nth-child(6), .gallery .gitem:nth-child(6) { animation-delay: .65s; }
.cards .acard:nth-child(7), .list .li:nth-child(7) { animation-delay: .72s; }
.cards .acard:nth-child(8), .list .li:nth-child(8) { animation-delay: .79s; }

/* 卡片图标 */
.acard .ic { transition: transform var(--dur) var(--ease-spring); }
a.acard:hover .ic { transform: translateY(-3px) scale(1.2) rotate(-5deg); }
.litem .ic { transition: transform var(--dur) var(--ease-spring); }
.litem:hover .ic { transform: scale(1.2) rotate(8deg); }

/* ============================================================
   5. 数字滚动 / 进度条 / 时间线
   ============================================================ */
.stat b {
  display: inline-block;
  transition: transform var(--dur) var(--ease-spring);
}
.stat:hover b { transform: scale(1.1); color: var(--accent); }
.stat { transition: transform var(--dur) var(--ease-out), border-color var(--dur); }
.stat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.bar-track { position: relative; overflow: hidden; }
.bar-fill {
  position: relative; overflow: hidden;
  transition: width 1.15s var(--ease-out);
}
/* 进度条上的流光 */
.bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.4s var(--ease-soft) infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* 时间线：节点依次点亮 + 线生长 */
.timeline::before {
  transform-origin: top;
  animation-delay: .32s;
}

.tl-item { animation: tlIn .6s var(--ease-out) both; }
.tl-item:nth-child(1) { animation-delay: .42s; }
.tl-item:nth-child(2) { animation-delay: .54s; }
.tl-item:nth-child(3) { animation-delay: .66s; }
.tl-item:nth-child(4) { animation-delay: .78s; }
.tl-item:nth-child(5) { animation-delay: .90s; }

.tl-item::before {
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur);
}
.tl-item:hover::before {
  transform: scale(1.35);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 24%, transparent),
              0 0 16px var(--accent);
}
.tl-item:hover h4 { color: var(--accent); }
.tl-item h4 { transition: color var(--dur-fast) var(--ease-soft); }

/* ============================================================
   6. 标签云 / 小标签
   ============================================================ */
.tagcloud span {
  transition: transform var(--dur) var(--ease-spring),
              border-color var(--dur-fast), color var(--dur-fast),
              background var(--dur-fast);
}

.tagcloud span:nth-child(1) { animation-delay: .30s; }
.tagcloud span:nth-child(2) { animation-delay: .34s; }
.tagcloud span:nth-child(3) { animation-delay: .38s; }
.tagcloud span:nth-child(4) { animation-delay: .42s; }
.tagcloud span:nth-child(5) { animation-delay: .46s; }
.tagcloud span:nth-child(6) { animation-delay: .50s; }
.tagcloud span:nth-child(7) { animation-delay: .54s; }
.tagcloud span:nth-child(8) { animation-delay: .58s; }
.tagcloud span:nth-child(9) { animation-delay: .62s; }
.tagcloud span:nth-child(10) { animation-delay: .66s; }
.tagcloud span:nth-child(11) { animation-delay: .70s; }
.tagcloud span:nth-child(12) { animation-delay: .74s; }
.tagcloud span:nth-child(n+13) { animation-delay: .78s; }
.tagcloud span:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  transform: translateY(-3px) scale(1.06);
}
.tag { transition: background var(--dur-fast), color var(--dur-fast); }
.acard:hover .tag, .li:hover .tag {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

/* ============================================================
   7. 滚动进场（IntersectionObserver 驱动）
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   8. 页面切换时的整体淡出遮罩
   ============================================================ */
.page-fade {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg); pointer-events: none;
  opacity: 0; transition: opacity .18s var(--ease-soft);
}
.page-fade.on { opacity: 1; }

/* ============================================================
   9. 回到顶部按钮
   ============================================================ */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); cursor: pointer;
  opacity: 0; transform: translateY(16px) scale(.85);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-spring),
              border-color var(--dur-fast), color var(--dur-fast),
              box-shadow var(--dur-fast);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover {
  border-color: var(--accent); color: var(--accent);
  box-shadow: 0 8px 26px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.to-top:active { transform: scale(.92); }

/* ============================================================
   10. 滚动进度条（顶部细线）
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 70;
  height: 2px; width: 0;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 50%, transparent), var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: width .12s linear;
}

/* ============================================================
   11. 点击反馈（局部水波 + 按压回弹）
   ============================================================ */
/* 涟漪：固定小尺寸的局部水波，不铺满整块卡片 */
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
      color-mix(in srgb, var(--accent) 50%, transparent) 0%,
      color-mix(in srgb, var(--accent) 22%, transparent) 42%,
      transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: .85;
  will-change: transform, opacity;
  animation: rippleOut .48s var(--ease-out) forwards;
}
@keyframes rippleOut {
  0%   { transform: translate(-50%, -50%) scale(.25); opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}

/* 按下去时轻微内缩，松手弹回 */
.tap-press {
  transform: scale(.985) !important;
  transition: transform .09s var(--ease-soft) !important;
}
.tap-release {
  transition: transform .34s var(--ease-spring) !important;
}

/* ============================================================
   12. 加载态：骨架微光
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--text) 5%, transparent) 25%,
      color-mix(in srgb, var(--text) 10%, transparent) 37%,
      color-mix(in srgb, var(--text) 5%, transparent) 63%);
  background-size: 400% 100%;
  border-radius: 10px; height: 16px;
}

/* ============================================================
   13. 服务器监控面板
   ============================================================ */
.mon-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 22px; flex-wrap: wrap;
}
.mon-live {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted);
  background: var(--card); border: 1px solid var(--line);
  padding: 6px 14px; border-radius: 999px;
  flex: 0 1 auto; min-width: 0;
}
.mon-live #monTime {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mon-live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 8px #4ade80;
  animation: pulse 2s var(--ease-soft) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.82); }
}

/* 概览卡 */
.mon-grid {
  display: grid; gap: 14px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.mon-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 7px;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur);
}
.mon-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.mon-k { font-size: 12px; color: var(--muted); letter-spacing: .5px; }
.mon-v {
  font-size: 21px; font-weight: 700; line-height: 1.15;
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
}
.mon-v i {
  font-style: normal; font-size: 11.5px;
  color: var(--muted); font-weight: 400;
}

/* 进度条组 */
.mon-bars { display: grid; gap: 20px; margin-bottom: 26px; }
.mon-bar-row { display: grid; gap: 8px; }
.mon-bar-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14.5px; gap: 12px;
}
.mon-bar-label { white-space: nowrap; }
.mon-bar-right {
  display: flex; align-items: baseline; gap: 10px;
  min-width: 0; justify-content: flex-end; flex-wrap: wrap;
}
.mon-sub { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.mon-bar-track {
  height: 9px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.mon-bar-fill {
  height: 100%; border-radius: 999px; position: relative;
  transition: width .8s var(--ease-out), background .5s;
}
.mon-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.6s var(--ease-soft) infinite;
}
.mon-pct {
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 磁盘 */
.mon-disk {
  display: grid; gap: 16px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.mon-disk-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 9px;
}
.mon-disk-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.mon-mount {
  font-size: 15px; font-weight: 700; font-family: ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mon-disk-sub { font-size: 12.5px; color: var(--muted); }

/* 服务 / 容器 */
.mon-svc { display: grid; gap: 14px; }
.mon-svc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mon-svc-label {
  font-size: 13px; color: var(--muted); min-width: 76px;
}
.mon-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.mon-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; padding: 5px 13px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.mon-pill:hover { transform: translateY(-2px); }
.mon-pill .pd {
  width: 6px; height: 6px; border-radius: 50%;
}
.mon-pill.ok  { border-color: color-mix(in srgb, #4ade80 32%, transparent); }
.mon-pill.ok .pd  { background: #4ade80; box-shadow: 0 0 7px #4ade80; }
.mon-pill.bad { border-color: color-mix(in srgb, #ff5d5d 32%, transparent); }
.mon-pill.bad .pd { background: #ff5d5d; box-shadow: 0 0 7px #ff5d5d; }

/* ============================================================
   14. 推广横幅
   ============================================================ */
.adban {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 26px;
  padding: 30px 34px; border-radius: 20px;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 12%, var(--card)),
      var(--card) 55%);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.adban-glow {
  position: absolute; top: -60%; right: -12%;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle,
      color-mix(in srgb, var(--accent) 34%, transparent), transparent 68%);
  filter: blur(30px); pointer-events: none;
  animation: adGlow 7s var(--ease-soft) infinite alternate;
}
@keyframes adGlow {
  from { transform: translate(0, 0) scale(1); opacity: .7; }
  to   { transform: translate(-26px, 22px) scale(1.18); opacity: 1; }
}
.adban-body { flex: 1; position: relative; z-index: 1; min-width: 0; }
.adban-top { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.adban-ic { font-size: 23px; }

/* 中转站 logo（图片版） */
.adban-logo {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 10px rgba(59, 130, 246, .3));
}
@media (max-width: 560px) {
  .adban-logo { height: 38px; max-width: 120px; }
}

/* 品牌 logo 在顶栏（可选） */
.brand-logo {
  height: 26px; width: auto; display: block;
}
.adban-body h3 { font-size: 19px; font-weight: 700; }
.adban-body p { color: var(--muted); font-size: 14.5px; margin-bottom: 8px; }
.adban-sub {
  font-size: 12.5px; color: var(--accent);
  letter-spacing: .4px; font-family: ui-monospace, monospace;
}
.adban-btn {
  position: relative; z-index: 1; flex: 0 0 auto;
  padding: 12px 26px; border-radius: 999px;
  background: var(--accent); color: #16100a;
  text-decoration: none; font-weight: 700; font-size: 14.5px;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur);
}
.adban-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--accent) 65%, transparent);
}
.adban-btn:active { transform: scale(.97); }

@media (max-width: 700px) {
  .adban { flex-direction: column; align-items: stretch; padding: 24px 22px; gap: 18px; }
  .adban-btn { text-align: center; }
  .mon-grid { grid-template-columns: repeat(2, 1fr); }
  .mon-v { font-size: 18px; }
  .mon-svc-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  /* 窄屏：负载信息换行显示，避免和百分比挤在一起 */
  .mon-bar-top { flex-direction: column; align-items: flex-start; gap: 3px; }
  .mon-bar-right { justify-content: flex-start; width: 100%; }
  .mon-head { align-items: flex-start; }
  .mon-live { max-width: 100%; }
}



/* ========== anim2.css ========== */
/* ============================================================
   烛心 · 动画增强层 v2.0（丝滑版）
   ------------------------------------------------------------
   设计原则：
   1. 全部动效走 transform / opacity（GPU 合成，不触发重排）
   2. 统一缓动曲线体系（弹簧 / 缓出 / 标准 / 强调）
   3. 交错入场用 CSS 变量驱动，JS 只负责设延迟
   4. 尊重 prefers-reduced-motion
   ============================================================ */

/* ---------- 统一缓动与时长体系 ---------- */
:root {
  /* 缓动 */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);        /* 主缓出，收尾柔和 */
  --ease-soft:   cubic-bezier(.4, 0, .2, 1);          /* 标准 */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);     /* 回弹 */
  --ease-spring-soft: cubic-bezier(.2, 1.1, .35, 1);  /* 轻回弹，更克制 */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);        /* 对称 */
  --ease-expo:   cubic-bezier(.16, 1, .3, 1);         /* 强烈缓出，适合大位移 */

  /* 时长 */
  --dur-instant: .12s;
  --dur-fast:    .2s;
  --dur:         .38s;
  --dur-slow:    .6s;
  --dur-slower:  .9s;

  /* 交错步长 */
  --stagger: 55ms;
}

/* ---------- 全局平滑：让所有过渡走 GPU ---------- */
.acard, .li, .stat, .litem, .gitem,
.tab, .brand-avatar, .adban, .gbtn, .pbtn, .atab, .chip,
.pcard-copy, .dnav-item, .btn {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* 动画结束后释放 will-change，避免长期占用显存 */
.acard.in, .li.in, .stat.in, .litem.in, .gitem.in {
  will-change: auto;
}

/* ============================================================
   2. 卡片：悬停抬起 + 光泽扫过 + 边框点亮
   ============================================================ */
.acard, .li, .litem, .gitem {
  transition:
    transform var(--dur) var(--ease-spring-soft),
    border-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur) var(--ease-out),
    background var(--dur-fast) var(--ease-soft);
}
.acard:hover, .li:hover, .litem:hover, .gitem:hover {
  transform: translate3d(0, -5px, 0) scale(1.012);
  box-shadow:
    0 18px 40px -18px rgba(0, 0, 0, .6),
    0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.acard:active, .li:active, .litem:active, .gitem:active {
  transform: translate3d(0, -2px, 0) scale(.995);
  transition-duration: var(--dur-fast);
}

/* 图标弹跳（保留原有手感，加快回弹） */
.acard .ic, .litem .ic, .gitem .ic {
  transition: transform var(--dur) var(--ease-spring);
}
.acard:hover .ic { transform: translateY(-2px) scale(1.16) rotate(-4deg); }

/* ============================================================
   3. 页面切换：更顺滑的交叉淡入
   ============================================================ */
#blocks {
}

/* 页面标题逐字上浮 */
.page-head h1 {
}
.page-head > p {
}

/* ============================================================
   4. 区块标题：下划线生长
   ============================================================ */
.block-title::before {
  transform-origin: center;
  animation: barGrowIn var(--dur-slow) var(--ease-spring-soft) both;
}
@keyframes barGrowIn {
  from { transform: scaleY(.2); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ============================================================
   5. 数字滚动：更细腻的弹性
   ============================================================ */
.stat b {
  transition: color var(--dur) var(--ease-soft);
}

/* ============================================================
   6. 导航标签：滑动指示条 + 图标上浮
   ============================================================ */
.tab-underline {
  transition:
    transform var(--dur) var(--ease-expo),
    width var(--dur) var(--ease-expo),
    opacity var(--dur-fast) var(--ease-soft);
}
.tab .ti {
  transition: transform var(--dur) var(--ease-spring);
}
.tab:hover .ti {
  transform: translateY(-2px) scale(1.15);
}

/* ============================================================
   7. 抽屉菜单：丝滑滑入 + 列表项逐条浮现
   ============================================================ */
.drawer {
  transition: transform .42s var(--ease-expo);
}
.drawer-mask {
  transition: opacity var(--dur-slow) var(--ease-soft),
              visibility var(--dur-slow);
}
.drawer-open .dnav-sec {
}

/* 逐条延迟 */
.drawer-open .dnav-sec:nth-child(1) { animation-delay: .04s; }
.drawer-open .dnav-item:nth-child(2) { animation-delay: .07s; }
.drawer-open .dnav-item:nth-child(3) { animation-delay: .10s; }
.drawer-open .dnav-item:nth-child(4) { animation-delay: .13s; }
.drawer-open .dnav-item:nth-child(5) { animation-delay: .16s; }
.drawer-open .dnav-item:nth-child(6) { animation-delay: .19s; }
.drawer-open .dnav-item:nth-child(7) { animation-delay: .22s; }
.drawer-open .dnav-item:nth-child(8) { animation-delay: .25s; }
.drawer-open .dnav-item:nth-child(9) { animation-delay: .28s; }
.drawer-open .dnav-item:nth-child(10) { animation-delay: .31s; }
.drawer-open .dnav-item:nth-child(11) { animation-delay: .34s; }
.drawer-open .dnav-item:nth-child(12) { animation-delay: .37s; }

/* 抽屉里的板块图标：展开时轻微弹入 */

/* ============================================================
   8. 弹窗：更自然的弹出
   ------------------------------------------------------------
   ⚠️ 两套动画不能混用：
   - .gmodal-box  → position:relative + margin:auto 居中 ⇒ 只能纯 scale
   - .rm-box      → 保持 readme.css 里自己的 rmIn 动画（不动它）
   ============================================================ */
.gmodal-box {
}

.gmodal-mask, .rm-mask {
}

/* ============================================================
   9. 顶栏：滚动时收缩 + 阴影加深
   ============================================================ */
.topbar {
  transition:
    box-shadow var(--dur) var(--ease-out),
    background var(--dur) var(--ease-soft),
    height var(--dur) var(--ease-expo);
}
html.scrolled .topbar {
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .8);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

/* ============================================================
   10. 滚动进度条：平滑跟随
   ============================================================ */
.scroll-progress {
  will-change: width;
  transition: width .1s linear;
}

/* ============================================================
   11. 按钮：统一的按下反馈
   ============================================================ */
button, .btn, .tab, .dnav-item, a.acard {
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled):active,
.gbtn:active, .pbtn:active, .atab:active,
.pcard-copy:active, .chip:active {
  transform: scale(.96);
  transition-duration: var(--dur-instant);
}

/* ============================================================
   12. 加载骨架：更柔的呼吸
   ============================================================ */
@keyframes skelPulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: .8; }
}
.skel, .skeleton {
  animation: skelPulse 1.6s var(--ease-in-out) infinite;
}

/* ============================================================
   13. 背景光晕：更缓慢的漂浮（降低性能开销）
   ============================================================ */
.bg-layer .orb {
  will-change: transform;
  animation-timing-function: var(--ease-in-out);
}
.bg-layer .grid {
  animation-timing-function: linear;
}

/* ============================================================
   14. 列表项：悬停时左侧指示条生长
   ============================================================ */
.li, .litem {
  position: relative;
  overflow: hidden;
}
.li::before, .litem::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
  transition: height var(--dur) var(--ease-spring-soft);
}
.li:hover::before, .litem:hover::before {
  height: 62%;
}

/* ============================================================
   15. 媒体光标（鼠标跟随光晕）：更跟手
   ============================================================ */
.glow-dot, .cursor-glow {
  transition: transform .18s var(--ease-out),
              opacity var(--dur) var(--ease-soft);
}

/* ============================================================
   16. 小游戏 / 街机厅交互反馈
   ============================================================ */
.gslot {
  transition: transform var(--dur) var(--ease-spring),
              border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.gslot.win { animation: slotWin .62s var(--ease-spring) both; }
@keyframes slotWin {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) rotate(-3deg); }
  70%  { transform: scale(.96) rotate(2deg); }
  100% { transform: scale(1); }
}
.scard {
  transition: transform var(--dur) var(--ease-spring-soft),
              box-shadow var(--dur) var(--ease-out);
}
.scard:hover {
  transform: translate3d(0, -4px, 0) scale(1.02);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .6);
}

/* 转盘 / 骰子滚动 */
.dice-box.roll { animation: rollA .7s var(--ease-spring) both; }

/* ============================================================
   17. 数字变化：轻微脉冲
   ============================================================ */
.num-bump {
  animation: numBump .5s var(--ease-spring) both;
}
@keyframes numBump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ============================================================
   18. 无动画模式（无障碍）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}
html.no-anim *, html.no-anim *::before, html.no-anim *::after {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   19. 【最终版】滚动进场
   ------------------------------------------------------------
   必须用 !important：
   因为 .acard / .li 等元素自带 transition（特异性更高），
   会覆盖 .reveal 的 transition，导致 opacity:0 不生效。
   ============================================================ */
.reveal {
  opacity: 0 !important;
  transform: translate3d(0, 26px, 0) scale(.97) !important;
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    transform .8s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms) !important;
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  will-change: auto;
}

/* 卡片类进场稍慢一点，更有层次 */
.cards .acard.reveal,
.gallery .gitem.reveal {
  transform: translate3d(0, 30px, 0) scale(.95) !important;
}
.cards .acard.reveal.in,
.gallery .gitem.reveal.in {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* 无动画模式 / 减少动效 */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
html.no-anim .reveal,
html.no-anim .reveal.in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
/* ============================================================
   入场动画补全（卡片 / 时间线 / 技能条 / 统计数据 / 区块标题）
   目标：所有内容都有统一的、有节奏的淡入上浮
   ============================================================ */

/* ---------- 通用入场关键帧 ---------- */

/* ---------- 1. 卡片（.acard / .card） ---------- */
.cards .acard:nth-child(1) { animation-delay: .04s; }
.cards .acard:nth-child(2) { animation-delay: .10s; }
.cards .acard:nth-child(3) { animation-delay: .16s; }
.cards .acard:nth-child(4) { animation-delay: .22s; }
.cards .acard:nth-child(5) { animation-delay: .28s; }
.cards .acard:nth-child(6) { animation-delay: .34s; }
.cards .acard:nth-child(7) { animation-delay: .40s; }
.cards .acard:nth-child(8) { animation-delay: .46s; }
.cards .acard:nth-child(9) { animation-delay: .52s; }
.cards .acard:nth-child(n+10) { animation-delay: .58s; }

/* ---------- 2. 时间线 ---------- */
.tl-item:nth-child(1) { animation-delay: .06s; }
.tl-item:nth-child(2) { animation-delay: .15s; }
.tl-item:nth-child(3) { animation-delay: .24s; }
.tl-item:nth-child(4) { animation-delay: .33s; }
.tl-item:nth-child(5) { animation-delay: .42s; }
.tl-item:nth-child(n+6) { animation-delay: .5s; }

/* 时间线的竖线生长 */
.timeline::before {
  transform-origin: top;
}

/* 时间线圆点弹入 */

/* ---------- 3. 技能条 ---------- */
.bar-item:nth-child(1), .bars .bar:nth-child(1) { animation-delay: .05s; }
.bar-item:nth-child(2), .bars .bar:nth-child(2) { animation-delay: .12s; }
.bar-item:nth-child(3), .bars .bar:nth-child(3) { animation-delay: .19s; }
.bar-item:nth-child(4), .bars .bar:nth-child(4) { animation-delay: .26s; }
.bar-item:nth-child(5), .bars .bar:nth-child(5) { animation-delay: .33s; }
.bar-item:nth-child(6), .bars .bar:nth-child(6) { animation-delay: .40s; }
.bar-item:nth-child(n+7), .bars .bar:nth-child(n+7) { animation-delay: .47s; }

/* 进度条填充从左展开 */
.bar i,
.bar-fill {
  transform-origin: left;
}

/* ---------- 4. 统计数据 ---------- */
.stat-item:nth-child(1), .stats .stat:nth-child(1) { animation-delay: .05s; }
.stat-item:nth-child(2), .stats .stat:nth-child(2) { animation-delay: .12s; }
.stat-item:nth-child(3), .stats .stat:nth-child(3) { animation-delay: .19s; }
.stat-item:nth-child(4), .stats .stat:nth-child(4) { animation-delay: .26s; }
.stat-item:nth-child(n+5), .stats .stat:nth-child(n+5) { animation-delay: .33s; }

/* 数字滚动时轻微放大 */

/* ---------- 5. 区块标题 ---------- */

/* 标题左侧金条生长 */
.block-title::before,
.block > h3::before {
  transform-origin: top;
}

/* ---------- 6. 标签 / chips ---------- */
.tag:nth-child(1), .chip:nth-child(1) { animation-delay: .05s; }
.tag:nth-child(2), .chip:nth-child(2) { animation-delay: .10s; }
.tag:nth-child(3), .chip:nth-child(3) { animation-delay: .15s; }
.tag:nth-child(4), .chip:nth-child(4) { animation-delay: .20s; }
.tag:nth-child(5), .chip:nth-child(5) { animation-delay: .25s; }
.tag:nth-child(6), .chip:nth-child(6) { animation-delay: .30s; }
.tag:nth-child(n+7), .chip:nth-child(n+7) { animation-delay: .35s; }

/* ---------- 7. 页面整体淡入 ---------- */
#blocks > * {
}
#blocks > *:nth-child(1) { animation-delay: .02s; }
#blocks > *:nth-child(2) { animation-delay: .08s; }
#blocks > *:nth-child(3) { animation-delay: .14s; }
#blocks > *:nth-child(4) { animation-delay: .20s; }
#blocks > *:nth-child(5) { animation-delay: .26s; }
#blocks > *:nth-child(6) { animation-delay: .32s; }
#blocks > *:nth-child(n+7) { animation-delay: .38s; }

/* ---------- 8. 技能栈 / 标签页整体 ---------- */

/* ---------- 可访问性 ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal.acard, .acard.reveal, .cards .acard,
  .timeline .tl-item, .tl-item.reveal,
  .bar-item, .bars .bar, .bar i, .bar-fill,
  .stat-item, .stats .stat, .stat-item b, .stats .stat b,
  .block-title, .block > h3, .block > h2,
  .tag, .chip, .tl-tag,
  #blocks > *,
  .bars, .tags, .timeline, .cards, .stats {
    animation: none !important;
  }
}


/* ========== site-addon.css ========== */
/* ============================================================
   左上角抽屉菜单 + 网页小游戏（v1.0.0）
   ============================================================ */

/* ---------------- 汉堡按钮 ---------------- */
.navbtn {
  appearance: none; flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border-radius: 11px; cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.navbtn:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.navbtn:active { transform: scale(.94); }
.navbtn .nb-line {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: var(--text);
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.drawer-open .navbtn .nb-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.drawer-open .navbtn .nb-line:nth-child(2) { opacity: 0; }
.drawer-open .navbtn .nb-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------- 遮罩 ---------------- */
.drawer-mask {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.58); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.drawer-open .drawer-mask { opacity: 1; visibility: visible; }

/* ---------------- 抽屉 ---------------- */
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 301;
  width: min(312px, 84vw);
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--card) 96%, #000);
  border-right: 1px solid var(--line);
  box-shadow: 18px 0 48px rgba(0,0,0,.45);
  transform: translateX(-102%);
  transition: transform .32s cubic-bezier(.32,.72,0,1);
}
.drawer-open .drawer { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.drawer-head .brand-avatar {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 21px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.drawer-head-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.drawer-head-txt b { font-size: 15.5px; font-weight: 700; }
.drawer-head-txt i {
  font-style: normal; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.drawer-nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 16px; -webkit-overflow-scrolling: touch; }
.drawer-nav::-webkit-scrollbar { width: 5px; }
.drawer-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 3px; }
.dnav-sec {
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); opacity: .7; padding: 14px 12px 7px;
}
.dnav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 2px; border-radius: 10px;
  color: var(--muted); text-decoration: none; font-size: 14.5px;
  position: relative; transition: background .18s, color .18s, transform .18s;
}
.dnav-item:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); }
.dnav-item:active { transform: scale(.985); }
.dnav-item.active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-weight: 600; }
.dnav-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.dnav-ic { flex: 0 0 auto; width: 24px; text-align: center; font-size: 16px; }
.dnav-lb { flex: 1 1 auto; }
.dnav-ext { flex: 0 0 auto; font-size: 11px; opacity: .5; }
.dnav-hot {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 6px; border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}

.drawer-foot { flex: 0 0 auto; padding: 14px 16px 18px; border-top: 1px solid var(--line); }
.drawer-group {
  appearance: none; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); font-size: 13.5px; font-weight: 700;
  transition: background .2s, transform .15s;
}
.drawer-group:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.drawer-group:active { transform: scale(.97); }
.drawer-version { text-align: center; font-size: 11px; color: var(--muted); opacity: .55; margin-top: 12px; }

body.drawer-open { overflow: hidden; }

@media (max-width: 420px) {
  .drawer { width: 86vw; }
  .navbtn { width: 37px; height: 37px; }
}

/* ============================================================
   网页小游戏
   ============================================================ */
.arcade-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.arcade-wallet {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 99px; font-size: 13px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent); font-weight: 700; white-space: nowrap;
}
.arcade-wallet em { font-style: normal; color: var(--muted); font-weight: 500; font-size: 12px; }

.arcade-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 18px; scrollbar-width: none; }
.arcade-tabs::-webkit-scrollbar { display: none; }
.atab {
  appearance: none; flex: 0 0 auto; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  background: var(--card); color: var(--muted); border: 1px solid var(--line);
  transition: all .2s;
}
.atab:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.atab.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

.game-pane { display: none; }
.game-pane.on { display: block; animation: gaIn .32s ease both; }
@keyframes gaIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.gcard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px;
}
.gcard + .gcard { margin-top: 16px; }
.gcard h3 { font-size: 17px; margin-bottom: 6px; display: flex; align-items: center; gap: 9px; }
.gcard .gsub { color: var(--muted); font-size: 13px; line-height: 1.7; margin-bottom: 18px; }

/* --- 通用控件 --- */
.grow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ginput {
  width: 110px; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, #000);
  color: var(--text); font-size: 15px; outline: none; font-family: inherit;
}
.ginput:focus { border-color: var(--accent); }
.ginput.wide { width: 100%; }
.gbtn {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 11px 20px; border-radius: 10px; font-size: 14px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  transition: background .2s, transform .15s, opacity .2s;
}
.gbtn:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.gbtn:active { transform: scale(.96); }
.gbtn:disabled { opacity: .45; cursor: not-allowed; }
.gbtn.ghost {
  border-color: var(--line); background: transparent; color: var(--muted);
}
.gbtn.ghost:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.gbtn.big { padding: 14px 26px; font-size: 15px; }

.chip {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 8px 14px; border-radius: 99px; font-size: 13px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: all .18s;
}
.chip:hover { color: var(--text); }
.chip.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 700; }

.gmsg {
  margin-top: 16px; padding: 13px 16px; border-radius: 11px; font-size: 13.5px;
  line-height: 1.75; white-space: pre-wrap; word-break: break-word;
  background: color-mix(in srgb, var(--bg) 70%, #000);
  border: 1px solid var(--line); display: none;
}
.gmsg.on { display: block; }
.gmsg.ok { border-color: color-mix(in srgb, #4ade80 45%, transparent); }
.gmsg.bad { border-color: color-mix(in srgb, #ff5d5d 45%, transparent); }

/* --- 猜数字 --- */
.guess-slots { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 6px 0 18px; }
.gslot {
  width: 68px; height: 78px; border-radius: 14px;
  display: grid; place-items: center; font-size: 30px; font-weight: 800;
  background: color-mix(in srgb, var(--bg) 70%, #000);
  border: 1px solid var(--line); color: var(--text);
  transition: all .25s;
}
.gslot.hi { border-color: #ff5d5d; color: #ff5d5d; animation: shake .4s; }
.gslot.lo { border-color: #60a5fa; color: #60a5fa; }
.gslot.win { border-color: #4ade80; color: #4ade80; animation: pop .5s; }
.gslot.empty { color: var(--muted); opacity: .35; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
@keyframes pop { 0%{transform:scale(1)} 45%{transform:scale(1.2)} 100%{transform:scale(1)} }
.guess-inputs { display: flex; gap: 10px; justify-content: center; margin-bottom: 16px; }
.gdigit {
  width: 58px; height: 68px; text-align: center; font-size: 26px; font-weight: 800;
  border-radius: 13px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, #000);
  color: var(--text); outline: none; font-family: ui-monospace, monospace;
}
.gdigit:focus { border-color: var(--accent); }
.guess-log { margin-top: 16px; }
.guess-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 13px;
  border-radius: 9px; background: color-mix(in srgb, var(--bg) 55%, #000);
  margin-bottom: 7px; font-size: 13.5px;
  border-left: 3px solid var(--muted);
}
.guess-row.win { border-left-color: #4ade80; }

/* --- 大小单双 --- */
.dice-box {
  width: 96px; height: 96px; margin: 8px auto 18px;
  border-radius: 20px; display: grid; place-items: center;
  font-size: 52px;
  background: color-mix(in srgb, var(--bg) 60%, #000);
  border: 1px solid var(--line);
  transition: transform .3s;
}
.dice-box.roll { animation: rollA .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes rollA {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(200deg) scale(1.22); }
  100% { transform: rotate(360deg) scale(1); }
}
.bet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; margin-bottom: 16px; }
.bet-card {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 16px 8px; border-radius: 13px; text-align: center;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, #000);
  color: var(--text); transition: all .2s;
}
.bet-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); }
.bet-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.bet-card b { display: block; font-size: 16px; margin-bottom: 4px; }
.bet-card span { font-size: 11.5px; color: var(--muted); }
.bet-card.on span { color: color-mix(in srgb, var(--accent) 80%, var(--muted)); }

.stat-row { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--muted); }
.stat-row b { color: var(--text); font-size: 16px; margin-left: 5px; }
.stat-row .up { color: #4ade80; }
.stat-row .down { color: #ff5d5d; }

/* --- 刮刮乐 --- */
.scratch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin: 6px 0 18px; }
.scard {
  position: relative; aspect-ratio: 1.6; border-radius: 13px;
  border: 1px solid var(--line); overflow: hidden; cursor: pointer;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, #1a1a1a), color-mix(in srgb, var(--accent) 6%, #0d0d0d));
  display: grid; place-items: center; user-select: none;
  transition: transform .2s;
}
.scard:hover { transform: translateY(-3px); }
.scard .scover { font-size: 30px; opacity: .9; transition: opacity .3s; }
.scard .sface {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: 8px; font-weight: 800; font-size: 18px;
  background: color-mix(in srgb, var(--card) 92%, #000);
  opacity: 0; transform: scale(.85); transition: all .32s cubic-bezier(.3,1.5,.5,1);
}
.scard.open .scover { opacity: 0; }
.scard.open .sface { opacity: 1; transform: scale(1); }
.scard.win { border-color: #4ade80; box-shadow: 0 0 0 1px #4ade80 inset; }
.scard.win .sface { color: #4ade80; }
.scard.lose .sface { color: var(--muted); }

/* --- 图鉴：全服热点 --- */
.dex-bar { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.dex-prog {
  flex: 1 1 260px; padding: 15px 17px; border-radius: 13px;
  background: color-mix(in srgb, var(--bg) 55%, #000); border: 1px solid var(--line);
}
.dex-prog h4 { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 9px; }
.dex-prog .num { font-size: 25px; font-weight: 800; color: var(--accent); }
.dex-prog .num small { font-size: 13px; color: var(--muted); font-weight: 500; }
.dex-track { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); margin-top: 10px; overflow: hidden; }
.dex-track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); transition: width .8s cubic-bezier(.3,.8,.3,1); }
.dex-groups { display: flex; flex-direction: column; gap: 10px; }
.dex-g {
  border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
  background: color-mix(in srgb, var(--bg) 45%, #000);
}
.dex-gh {
  display: flex; align-items: center; gap: 11px; padding: 13px 16px; cursor: pointer;
  user-select: none;
}
.dex-gh:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.dex-gh b { font-size: 14.5px; }
.dex-gh .cnt { font-size: 12.5px; color: var(--muted); }
.dex-gh .sp { flex: 1 1 auto; }
.dex-gh .arw { color: var(--muted); font-size: 12px; transition: transform .25s; }
.dex-g.open .dex-gh .arw { transform: rotate(90deg); }
.dex-body { display: none; padding: 0 14px 14px; }
.dex-g.open .dex-body { display: block; }
.dex-fish { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 10px; }
.dexf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 8px; font-size: 12.5px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 80%, #000);
  color: var(--text);
}
.dexf.locked { color: var(--muted); opacity: .38; border-style: dashed; }
.dexf .p { color: var(--accent); font-size: 11px; }
.dexf .w { font-size: 10.5px; color: var(--muted); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dexf.shiny { border-color: color-mix(in srgb, #fbbf24 60%, transparent); }

@media (max-width: 560px) {
  .gcard { padding: 17px 15px; }
  .gslot { width: 56px; height: 66px; font-size: 25px; }
  .gdigit { width: 48px; height: 58px; font-size: 22px; }
  .bet-grid { grid-template-columns: repeat(2, 1fr); }
  .scratch-grid { grid-template-columns: repeat(2, 1fr); }
  .dex-prog { flex: 1 1 100%; }
}


/* ========== addon2.css ========== */
/* ============================================================
   漂流瓶 + 疫情地图 样式（v1.0.0）
   ============================================================ */

/* ---------------- 通用文本域 ---------------- */
.gtarea {
  width: 100%; min-height: 120px; resize: vertical;
  padding: 14px 15px; border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, #000);
  color: var(--text); font-size: 14.5px; line-height: 1.75;
  font-family: inherit; outline: none; margin-bottom: 14px;
}
.gtarea:focus { border-color: var(--accent); }
.gtarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }

/* ============================================================
   漂流瓶
   ============================================================ */
.bottle-float { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-float {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 99px; font-size: 12.5px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 80%, #000);
  color: var(--text);
  animation: btFloat 4.5s ease-in-out infinite;
}
.bt-float em { font-style: normal; opacity: .75; font-size: 11px; }
.bt-float.replied { border-color: color-mix(in srgb, #4ade80 45%, transparent); }
.bt-float.sunk { opacity: .5; }
@keyframes btFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* 捞到的纸条 */
.bottle-note {
  margin-top: 18px; padding: 20px;
  border-radius: 14px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 13%, transparent),
    color-mix(in srgb, var(--card) 92%, #000));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  animation: noteIn .4s cubic-bezier(.3,1.4,.5,1) both;
}
@keyframes noteIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.bt-note-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.bt-note-whale { font-weight: 700; font-size: 15px; color: var(--accent); }
.bt-note-meta { font-size: 11.5px; color: var(--muted); }
.bt-note-body {
  font-size: 15.5px; line-height: 1.95;
  padding: 14px 0; white-space: pre-wrap; word-break: break-word;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 25%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 25%, transparent);
}
.bt-note-tag { font-size: 11.5px; color: var(--muted); margin-top: 12px; }

/* 列表（我的瓶 / 收件箱） */
.bt-list { display: flex; flex-direction: column; gap: 11px; }
.bt-item {
  padding: 15px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 55%, #000);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
}
.bt-item.replied { border-left-color: #4ade80; }
.bt-item.floating { border-left-color: var(--accent); }
.bt-item.sunk, .bt-item.expired { opacity: .58; }
.bt-item.inbox { border-left-color: #60a5fa; }
.bt-item.inbox.unread { border-left-color: #fbbf24; background: color-mix(in srgb, #fbbf24 6%, var(--bg)); }

.bt-item-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 9px; flex-wrap: wrap; }
.bt-ano { font-size: 13px; font-weight: 700; color: var(--accent); }
.bt-st { font-size: 11px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.bt-st.replied { color: #4ade80; border-color: color-mix(in srgb, #4ade80 40%, transparent); }
.bt-st.floating { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.bt-time { font-size: 11.5px; color: var(--muted); }
.bt-item-body { font-size: 14px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
.bt-quote {
  font-size: 12.5px; color: var(--muted); line-height: 1.7;
  padding: 8px 11px; margin-bottom: 9px;
  border-left: 2px solid var(--line); border-radius: 0 7px 7px 0;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  white-space: pre-wrap; word-break: break-word;
}
.bt-item-foot {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 10px; font-size: 11.5px; color: var(--muted);
}

/* ============================================================
   疫情地图
   ============================================================ */
.plague-event {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 17px 19px; margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(120deg,
    color-mix(in srgb, #ef4444 15%, transparent),
    color-mix(in srgb, var(--card) 92%, #000));
  border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
}
.pg-ev-icon { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.pg-ev-title { font-size: 11.5px; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 5px; }
.pg-ev-text { font-size: 15px; font-weight: 700; line-height: 1.6; }
.pg-ev-sub { font-size: 12px; color: #fbbf24; margin-top: 7px; }

.pg-summary { margin-bottom: 20px; }
.pg-summary span { font-size: 13px; }
.pg-summary b { font-size: 17px; margin-left: 6px; }

.pg-legend { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.pg-lg {
  font-size: 11.5px; padding: 3px 11px; border-radius: 99px;
  border: 1px solid var(--line);
}
.pg-lg.severe { color: #ef4444; border-color: color-mix(in srgb, #ef4444 45%, transparent); background: color-mix(in srgb, #ef4444 10%, transparent); }
.pg-lg.infected { color: #eab308; border-color: color-mix(in srgb, #eab308 45%, transparent); background: color-mix(in srgb, #eab308 10%, transparent); }
.pg-lg.healthy { color: #4ade80; border-color: color-mix(in srgb, #4ade80 45%, transparent); background: color-mix(in srgb, #4ade80 10%, transparent); }
.pg-lg.cured { color: #60a5fa; border-color: color-mix(in srgb, #60a5fa 45%, transparent); background: color-mix(in srgb, #60a5fa 10%, transparent); }

.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px; }
.pg-card {
  padding: 14px 15px; border-radius: 13px;
  background: color-mix(in srgb, var(--bg) 58%, #000);
  border: 1px solid var(--line);
  border-top: 3px solid var(--muted);
  transition: transform .2s, border-color .2s;
}
.pg-card:hover { transform: translateY(-2px); }
.pg-card.severe { border-top-color: #ef4444; }
.pg-card.infected { border-top-color: #eab308; }
.pg-card.healthy { border-top-color: #4ade80; }
.pg-card.cured { border-top-color: #60a5fa; }

.pg-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.pg-st { font-size: 12px; font-weight: 700; }
.pg-card.severe .pg-st { color: #ef4444; }
.pg-card.infected .pg-st { color: #eab308; }
.pg-card.healthy .pg-st { color: #4ade80; }
.pg-card.cured .pg-st { color: #60a5fa; }
.pg-hp { font-size: 15px; font-weight: 800; }
.pg-hp small { font-size: 10px; color: var(--muted); font-weight: 500; }
.pg-name {
  font-size: 13.5px; font-weight: 600; margin-bottom: 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-track { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.pg-track i { display: block; height: 100%; border-radius: 3px; transition: width .7s cubic-bezier(.3,.8,.3,1); }
.pg-card.severe .pg-track i { background: #ef4444; }
.pg-card.infected .pg-track i { background: #eab308; }
.pg-card.healthy .pg-track i { background: #4ade80; }
.pg-card.cured .pg-track i { background: #60a5fa; }

.pg-prog-row {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--muted); margin: 11px 0 5px;
}
.pg-track.pg-antidote i { background: linear-gradient(90deg, #22d3ee, #60a5fa); }

.pg-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.pg-tag {
  font-size: 10.5px; padding: 2px 8px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, #fbbf24 40%, transparent);
  color: #fbbf24; font-style: normal;
}
.pg-tag.imm { color: #60a5fa; border-color: color-mix(in srgb, #60a5fa 40%, transparent); }
.pg-tag.fake { color: var(--muted); border-color: var(--line); }
.pg-tag.out { color: var(--muted); border-color: var(--line); }
.pg-act { font-size: 10.5px; color: var(--muted); margin-left: auto; }

/* 感染链 */
.pg-chain { display: flex; flex-direction: column; gap: 7px; }
.pg-chain-row {
  display: grid;
  grid-template-columns: 76px 1fr 26px 1fr auto;
  align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 55%, #000);
  border: 1px solid var(--line);
  border-left: 3px solid color-mix(in srgb, #ef4444 55%, transparent);
  font-size: 13px;
}
.pg-c-time { font-size: 11px; color: var(--muted); }
.pg-c-from { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-c-arrow { color: #ef4444; text-align: center; font-weight: 700; }
.pg-c-to { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-c-who { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* 排行榜 */
.pg-rank { display: flex; flex-direction: column; gap: 6px; }
.pg-rank-row {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 52%, #000);
  border: 1px solid var(--line);
  font-size: 13.5px;
}
.pg-rank-row:nth-child(1) { border-color: color-mix(in srgb, #fbbf24 40%, transparent); }
.pg-rk { width: 26px; text-align: center; font-weight: 800; flex: 0 0 auto; }
.pg-rname { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-rval { color: var(--accent); font-weight: 700; flex: 0 0 auto; font-size: 13px; }

@media (max-width: 640px) {
  .pg-grid { grid-template-columns: 1fr; }
  .pg-chain-row { grid-template-columns: 62px 1fr 22px 1fr; row-gap: 4px; }
  .pg-c-who { grid-column: 2 / -1; font-size: 11px; }
  .pg-summary span { font-size: 12px; }
}

/* ============================================================
   图鉴：搜索 + 筛选 + 分页（v2）
   ============================================================ */
.dex-toolbar {
  margin-bottom: 18px;
  padding: 15px 17px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg) 55%, #000);
  border: 1px solid var(--line);
}
.dex-search { position: relative; display: flex; align-items: center; margin-bottom: 12px; }
.dex-sic { position: absolute; left: 14px; font-size: 13px; opacity: .55; pointer-events: none; }
.dex-sinput {
  width: 100%; padding: 11px 38px 11px 38px;
  border-radius: 10px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 70%, #000);
  color: var(--text); font-size: 14px; font-family: inherit;
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .2s;
}
.dex-sinput:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.dex-sinput::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }
.dex-sinput::-webkit-search-cancel-button { display: none; }
.dex-sclear {
  position: absolute; right: 10px;
  appearance: none; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: color-mix(in srgb, var(--muted) 20%, transparent);
  color: var(--muted); font-size: 11px;
  display: grid; place-items: center;
}
.dex-sclear:hover { background: color-mix(in srgb, var(--muted) 35%, transparent); }

.dex-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dex-chip {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 7px 13px; border-radius: 99px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  transition: all .18s;
}
.dex-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.dex-chip.on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* 分页按钮 */
.dex-more { padding: 14px 0 4px; text-align: center; }
.dex-more-btn {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 10px 22px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent); font-size: 13px; font-weight: 700;
  transition: all .18s;
}
.dex-more-btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.dex-more-btn:active { transform: scale(.97); }

.dex-empty {
  padding: 30px 10px;
  text-align: center;
  color: var(--muted); font-size: 13.5px;
}

/* 鱼种数量大时限制单档高度 */
.dex-body .dex-fish { max-height: none; }


/* ========== readme.css ========== */
/* ============================================================
   插件 README 弹窗 + 插件卡片样式（v1.0.0）
   ============================================================ */

/* ---------------- 插件卡片（可点开 README）---------------- */
.acard-repo {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.acard-repo:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
}
.acard-repo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.acard-repo .pcard-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.acard-repo .pcard-star {
  margin-left: auto; font-size: 11.5px; color: #fbbf24; font-weight: 700;
}
.acard-repo h3 { margin-bottom: 8px; }
.acard-repo p { flex: 1 1 auto; }

.pcard-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.pcard-open {
  font-size: 12.5px; color: var(--accent); font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.acard-repo:hover .pcard-open { text-decoration: underline; }
.pcard-copy {
  appearance: none; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 8px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 80%, #000);
  color: var(--muted);
  transition: all .18s;
  white-space: nowrap;
}
.pcard-copy:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.pcard-copy:active { transform: scale(.95); }

/* ---------------- README 弹窗 ---------------- */
body.rm-open { overflow: hidden; }

.rm-modal {
  position: fixed; inset: 0; z-index: 900;
  display: none;
}
.rm-modal.on { display: block; }

.rm-mask {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .64);
  backdrop-filter: blur(4px);
  animation: rmFade .22s ease both;
}
@keyframes rmFade { from { opacity: 0; } to { opacity: 1; } }

.rm-box {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 94vw);
  height: min(86vh, 900px);
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--card) 97%, #000);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  overflow: hidden;
  animation: rmIn .3s cubic-bezier(.3, 1.2, .4, 1) both;
}
@keyframes rmIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.rm-head {
  flex: 0 0 auto;
  padding: 18px 22px 15px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.rm-head-top {
  display: flex; align-items: flex-start; gap: 12px;
}
.rm-head-txt { flex: 1 1 auto; min-width: 0; }
.rm-title {
  font-size: 17.5px; font-weight: 700; margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.rm-repo {
  font-size: 12px; color: var(--muted);
  font-family: ui-monospace, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-x {
  appearance: none; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 15px; cursor: pointer;
  transition: all .18s;
}
.rm-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }

.rm-acts {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px;
}
.rm-btn {
  appearance: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent);
  text-decoration: none;
  transition: all .18s;
}
.rm-btn:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.rm-btn:active { transform: scale(.96); }
.rm-btn:disabled { opacity: .5; cursor: not-allowed; }
.rm-btn.ghost {
  border-color: var(--line); background: transparent; color: var(--muted);
}
.rm-btn.ghost:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }

.rm-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 24px 26px 40px;
  -webkit-overflow-scrolling: touch;
}
.rm-body::-webkit-scrollbar { width: 8px; }
.rm-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 4px;
}

.rm-loading {
  padding: 40px 20px; text-align: center;
  color: var(--muted); font-size: 14px; line-height: 2;
  white-space: pre-wrap;
}

.rm-meta {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
  font-size: 11.5px; color: var(--muted);
}
.rm-badge {
  padding: 3px 10px; border-radius: 99px;
  border: 1px solid var(--line); font-weight: 600;
}
.rm-badge.fresh {
  color: #4ade80; border-color: color-mix(in srgb, #4ade80 45%, transparent);
  background: color-mix(in srgb, #4ade80 10%, transparent);
}

/* ---------------- Markdown 渲染 ---------------- */
.rm-md { font-size: 14.5px; line-height: 1.85; color: var(--text); }
.rm-md > *:first-child { margin-top: 0; }

.rm-md h1 {
  font-size: 23px; font-weight: 800; margin: 8px 0 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
  letter-spacing: -.4px;
}
.rm-md h2 {
  font-size: 19px; font-weight: 700; margin: 30px 0 13px;
  padding-left: 11px; position: relative;
}
.rm-md h2::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 2px; background: var(--accent);
}
.rm-md h3 { font-size: 16.5px; font-weight: 700; margin: 24px 0 10px; color: color-mix(in srgb, var(--accent) 75%, var(--text)); }
.rm-md h4, .rm-md h5, .rm-md h6 { font-size: 15px; font-weight: 700; margin: 18px 0 8px; }
.rm-md p { margin: 0 0 13px; }
.rm-md a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.rm-md a:hover { border-bottom-color: var(--accent); }
.rm-md strong { color: color-mix(in srgb, var(--text) 100%, transparent); font-weight: 700; }
.rm-md em { font-style: italic; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.rm-md del { opacity: .55; }
.rm-md hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; }

.rm-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.8px;
  padding: 2px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, var(--text));
  word-break: break-word;
}
.rm-md pre.cb {
  position: relative;
  margin: 0 0 16px; padding: 15px 17px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 75%, #000);
  border: 1px solid var(--line);
  overflow-x: auto;
}
.rm-md pre.cb code {
  background: none; padding: 0; color: var(--text);
  font-size: 12.8px; line-height: 1.75; white-space: pre;
}
.rm-md .cblang {
  position: absolute; right: 12px; top: 9px;
  font-size: 10.5px; color: var(--muted); opacity: .7;
  letter-spacing: .6px; text-transform: uppercase;
}

.rm-md ul, .rm-md ol { margin: 0 0 14px; padding-left: 24px; }
.rm-md li { margin-bottom: 6px; }
.rm-md li.sub { list-style: circle; margin-left: 16px; font-size: 14px; }
.rm-md li.task { list-style: none; margin-left: -20px; display: flex; gap: 8px; }
.rm-md li.task .cb2 { color: var(--accent); flex: 0 0 auto; }
.rm-md li.task.done { opacity: .6; }

.rm-md blockquote {
  margin: 0 0 15px; padding: 11px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 9px 9px 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.rm-md blockquote p { margin: 0 0 6px; }
.rm-md blockquote p:last-child { margin-bottom: 0; }

.rm-tablewrap { overflow-x: auto; margin: 0 0 16px; }
.rm-md table {
  border-collapse: collapse; width: 100%;
  font-size: 13px; min-width: 320px;
}
.rm-md th, .rm-md td {
  padding: 9px 12px; text-align: left;
  border: 1px solid var(--line);
  vertical-align: top;
}
.rm-md th {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-weight: 700; white-space: nowrap;
}
.rm-md tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.rm-md img {
  max-width: 100%; height: auto; border-radius: 10px;
  margin: 6px 0; border: 1px solid var(--line);
}

/* ---------------- Toast ---------------- */
.rm-toast {
  position: fixed; left: 50%; bottom: 42px;
  transform: translate(-50%, 20px);
  z-index: 950;
  max-width: 88vw;
  padding: 11px 19px; border-radius: 11px;
  background: color-mix(in srgb, var(--card) 96%, #000);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--text); font-size: 13px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden;
  transition: all .26s cubic-bezier(.3, 1.2, .4, 1);
  word-break: break-all;
}
.rm-toast.on {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
}

/* ---------------- 手动复制兜底条 ---------------- */
.rm-manual {
  position: fixed; left: 50%; bottom: -200px;
  transform: translateX(-50%);
  z-index: 960;
  width: min(560px, 92vw);
  opacity: 0; visibility: hidden;
  transition: all .3s cubic-bezier(.3,1.2,.4,1);
}
.rm-manual.on { bottom: 24px; opacity: 1; visibility: visible; }
.rm-manual-in {
  padding: 16px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 97%, #000);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 16px 44px rgba(0,0,0,.5);
}
.rm-manual-tip { font-size: 12.5px; color: var(--accent); margin-bottom: 10px; font-weight: 600; }
.rm-manual-input {
  width: 100%; padding: 11px 13px;
  border-radius: 9px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 75%, #000);
  color: var(--text); font-size: 13px;
  font-family: ui-monospace, monospace;
  outline: none; margin-bottom: 10px;
  user-select: all; -webkit-user-select: all;
}
.rm-manual-x {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 7px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 12.5px;
}
.rm-manual-x:hover { color: var(--text); }

/* ---------------- 移动端 ---------------- */
@media (max-width: 700px) {
  .rm-box {
    width: 100vw; height: 100vh;
    max-width: none; max-height: none;
    border-radius: 0; border: none;
    left: 0; top: 0; transform: none;
  }
  @keyframes rmIn {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
  .rm-box { animation-name: rmIn; }
  .rm-head { padding: 15px 16px 13px; }
  .rm-title { font-size: 16px; }
  .rm-body { padding: 18px 16px 60px; }
  .rm-md { font-size: 14px; }
  .rm-md h1 { font-size: 20px; }
  .rm-md h2 { font-size: 17px; }
  .pcard-foot { flex-wrap: wrap; }
}


/* ========== plugin-filter.css ========== */
/* ============================================================
   插件板块 · 搜索 + 筛选（v1.0.0）
   ============================================================ */

.pf-bar {
  margin-bottom: 26px;
  padding: 18px 20px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--card) 82%, #000);
  border: 1px solid var(--line);
}

/* ---- 搜索框 ---- */
.pf-search {
  position: relative;
  display: flex; align-items: center;
  margin-bottom: 15px;
}
.pf-ic {
  position: absolute; left: 15px;
  font-size: 14px; opacity: .55; pointer-events: none;
}
.pf-input {
  width: 100%;
  padding: 13px 42px 13px 42px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 72%, #000);
  color: var(--text);
  font-size: 14.5px; font-family: inherit;
  outline: none;
  transition: border-color .2s, background .2s;
  -webkit-appearance: none;
  appearance: none;
}
.pf-input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.pf-input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--bg) 80%, #000);
}
.pf-input::-webkit-search-cancel-button { display: none; }

.pf-clear {
  position: absolute; right: 11px;
  appearance: none; cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%;
  border: none; background: color-mix(in srgb, var(--muted) 20%, transparent);
  color: var(--muted); font-size: 12px;
  display: grid; place-items: center;
  transition: all .18s;
}
.pf-clear:hover { background: color-mix(in srgb, var(--muted) 35%, transparent); color: var(--text); }

/* ---- 标签按钮 ---- */
.pf-tags {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.pf-tag {
  appearance: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  transition: all .18s;
  white-space: nowrap;
}
.pf-tag:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.pf-tag.on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.pf-tag em {
  font-style: normal; font-size: 11px;
  opacity: .65; font-weight: 500;
}
.pf-tag.on em { opacity: .85; }

/* ---- 结果计数 ---- */
.pf-info {
  margin-top: 13px; padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--muted);
}
.pf-info b { color: var(--accent); font-size: 14px; }

/* ---- 空状态 ---- */
.pf-empty {
  padding: 54px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 15px; line-height: 2;
  border: 1px dashed var(--line);
  border-radius: 15px;
}
.pf-empty b { color: var(--accent); }
.pf-empty span { font-size: 13px; opacity: .75; }

/* ---- 隐藏的卡片 ---- */
.acard.pf-hide { display: none !important; }

/* ---- 移动端 ---- */
@media (max-width: 560px) {
  .pf-bar { padding: 15px 15px; margin-bottom: 20px; }
  .pf-input { padding: 12px 40px 12px 39px; font-size: 14px; }
  .pf-tags { gap: 7px; }
  .pf-tag { padding: 7px 12px; font-size: 12.5px; }
}


/* ========== secret-entry.css ========== */
/* ============================================================
   隐蔽管理员入口 · 样式（v1.0.0）
   ============================================================ */

/* 页脚热区：视觉与普通文字完全一致，只是可点 */
.secret-hot {
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  user-select: text;
}

/* 验证条：底部浮出，低调不抢眼 */
.secret-bar {
  position: fixed;
  left: 50%;
  bottom: -90px;
  transform: translateX(-50%);
  z-index: 880;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 96%, #000);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transition: all .3s cubic-bezier(.3, 1.2, .4, 1);
  white-space: nowrap;
}
.secret-bar.on {
  bottom: 28px;
  opacity: 1;
  visibility: visible;
}

.secret-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  animation: secretPulse 1.6s ease-in-out infinite;
}
@keyframes secretPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  50%      { opacity: .65; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.secret-txt {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .3px;
}

.secret-go {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 15px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  transition: background .18s, transform .15s;
}
.secret-go:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.secret-go:active { transform: scale(.95); }

.secret-x {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  width: 24px; height: 24px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  display: grid; place-items: center;
  transition: color .18s, background .18s;
}
.secret-x:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

@media (max-width: 420px) {
  .secret-bar { gap: 9px; padding: 10px 13px; }
  .secret-txt { font-size: 12px; }
  .secret-go { padding: 6px 12px; font-size: 12px; }
}


/* ========== fishing.css ========== */
/* ============================================================
   钓鱼玩法面板 · 样式 v2
   ============================================================ */

.fg-refresh {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: all .18s;
}
.fg-refresh:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.fg-refresh:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- 状态总览 ---------------- */
.fg-stats { margin-bottom: 16px; }
.fg-loading, .fg-nologin {
  padding: 26px 10px; text-align: center;
  color: var(--muted); font-size: 13.5px; line-height: 1.9;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.fg-nologin a { color: var(--accent); }

.fg-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.fg-stat {
  padding: 13px 15px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
}
.fg-stat span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.fg-stat b { display: block; font-size: 18px; color: var(--accent); }
.fg-stat b small { font-size: 12px; color: var(--muted); }
.fg-stat i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 3px; }

/* 鱼竿可视化 */
.fg-rods {
  padding: 14px 16px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
}
.fg-rods-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 11px;
  font-size: 12.5px; font-weight: 600;
}
.fg-rods-legend { font-size: 11px; color: var(--muted); font-weight: 400; display: flex; align-items: center; gap: 6px; }
.fg-rods-legend i {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-left: 6px; font-style: normal;
}
.fg-rods-legend i.on { background: #4ade80; }
.fg-rods-legend i.idle { background: #6b7280; }
.fg-rods-legend i.broken { background: #ef4444; }

.fg-rod-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-rod {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  font-size: 17px; cursor: default;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 60%, #000);
  transition: transform .18s;
}
.fg-rod:hover { transform: translateY(-2px); }
.fg-rod.on { border-color: color-mix(in srgb, #4ade80 50%, transparent); background: color-mix(in srgb, #4ade80 10%, transparent); }
.fg-rod.idle { opacity: .55; }
.fg-rod.broken { border-color: color-mix(in srgb, #ef4444 55%, transparent); background: color-mix(in srgb, #ef4444 10%, transparent); }
.fg-rod-none { color: var(--muted); font-size: 12.5px; }

/* ---------------- 快捷操作 ---------------- */
.fg-quick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
}
.fg-qbtn {
  appearance: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px 16px; border-radius: 12px; text-align: left;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, #000);
  color: var(--text);
  transition: all .18s;
}
.fg-qbtn b { font-size: 14.5px; font-weight: 700; }
.fg-qbtn em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.fg-qbtn:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 8px 22px -12px rgba(0,0,0,.6);
}
.fg-qbtn:active { transform: scale(.97); }
.fg-qbtn.primary {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent) 6%, transparent));
}
.fg-qbtn.primary b { color: var(--accent); }

/* ---------------- 全部玩法 ---------------- */
.fg-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.fg-cat {
  appearance: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 13px; font-weight: 600;
  transition: all .18s;
}
.fg-cat:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.fg-cat.on {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.fg-cat em { font-style: normal; font-size: 11px; opacity: .65; }

.fg-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.fg-abtn {
  appearance: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 13px 15px; border-radius: 11px; text-align: left;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, #000);
  color: var(--text);
  transition: all .18s;
}
.fg-abtn b { font-size: 14px; font-weight: 700; }
.fg-abtn em {
  font-style: normal; font-size: 11.5px; color: var(--muted);
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fg-abtn:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-2px);
}
.fg-abtn:active { transform: scale(.97); }

/* ---------------- 执行结果 ---------------- */
.fg-out {
  margin: 0; padding: 15px 17px; border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 72%, #000);
  border: 1px solid var(--line);
  font-size: 13px; line-height: 1.85;
  white-space: pre-wrap; word-break: break-word;
  max-height: 420px; overflow-y: auto;
  font-family: inherit;
  color: var(--text);
}

/* ---------------- 播报 ---------------- */
.fg-bc { display: flex; flex-direction: column; gap: 12px; }
.fg-bc-empty {
  padding: 26px 10px; text-align: center;
  color: var(--muted); font-size: 13px;
  border: 1px dashed var(--line); border-radius: 11px;
}
.fg-bc-group {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, #000);
}
.fg-bc-ghead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 15px;
  font-size: 12.5px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-bottom: 1px solid var(--line);
  color: var(--accent);
}
.fg-bc-ghead span { font-size: 11px; color: var(--muted); font-weight: 500; }
.fg-bc-lines { padding: 8px 0; }
.fg-bc-line {
  padding: 8px 16px;
  font-size: 13px; line-height: 1.7;
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
  animation: fgBcIn .35s ease both;
}
.fg-bc-line:last-child { border-bottom: none; }
@keyframes fgBcIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- 移动端 ---------------- */
@media (max-width: 700px) {
  .fg-quick { grid-template-columns: 1fr 1fr; }
  .fg-acts { grid-template-columns: 1fr 1fr; }
  .fg-qbtn { padding: 12px 13px; }
  .fg-qbtn b { font-size: 13.5px; }
  .fg-abtn { padding: 11px 12px; }
  .fg-abtn b { font-size: 13px; }
  .fg-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .fg-rod { width: 36px; height: 36px; font-size: 15px; }
}

/* ============================================================
   播报图（群里发的那张）
   ============================================================ */
.fg-bcimg {
  border-radius: 13px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg) 60%, #000);
  border: 1px solid var(--line);
  min-height: 90px;
  display: grid;
  place-items: center;
}
.fg-bcimg img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  animation: fgImgIn .4s ease both;
}
@keyframes fgImgIn {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}
.fg-bcimg .fg-bc-empty {
  border: none;
  width: 100%;
  padding: 30px 14px;
}

/* 展开文字版按钮 */
.fg-bctoggle { margin-top: 12px; text-align: center; }
.fg-bctoggle button {
  appearance: none; cursor: pointer; font-family: inherit;
  padding: 9px 18px; border-radius: 10px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  transition: all .18s;
}
.fg-bctoggle button:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* 文字版容器（展开后出现） */
#fgBc { margin-top: 12px; }


/* ========== xiuxian.css ========== */
/* ============================================================
   修仙玩法面板 · 样式
   ============================================================ */

.xx-stats { margin-bottom: 16px; }

/* ---------------- 境界总览 ---------------- */
.xx-realm {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 14px; margin-bottom: 12px;
  background: linear-gradient(135deg,
    color-mix(in srgb, #a78bfa 14%, transparent),
    color-mix(in srgb, var(--card) 94%, #000));
  border: 1px solid color-mix(in srgb, #a78bfa 32%, transparent);
}
.xx-realm-name {
  font-size: 26px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(120deg, #c4b5fd, #a78bfa, #818cf8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.xx-realm-name small { font-size: 15px; font-weight: 600; margin-left: 6px; }
.xx-realm-sub { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.xx-realm-sub b { color: var(--accent); }
.xx-realm-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.xx-tag {
  font-size: 11.5px; padding: 4px 11px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--muted);
}
.xx-tag.buff {
  color: #4ade80;
  border-color: color-mix(in srgb, #4ade80 45%, transparent);
  background: color-mix(in srgb, #4ade80 10%, transparent);
}

/* 修为进度 */
.xx-cult {
  padding: 15px 18px; border-radius: 12px; margin-bottom: 12px;
  background: var(--card); border: 1px solid var(--line);
}
.xx-cult-head {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 9px;
  flex-wrap: wrap;
}
.xx-cult-head b { color: var(--accent); font-size: 14px; }
.xx-cult-track {
  height: 9px; border-radius: 5px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}
.xx-cult-track i {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #818cf8, #a78bfa, #c4b5fd);
  transition: width .8s cubic-bezier(.3,.8,.3,1);
  box-shadow: 0 0 12px rgba(167,139,250,.5);
}
.xx-cd { font-size: 12px; color: #fbbf24; margin-top: 9px; }

/* 最近动态 */
.xx-recs {
  padding: 14px 18px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
}
.xx-recs-head { font-size: 12.5px; font-weight: 700; margin-bottom: 10px; }
.xx-rec {
  display: flex; gap: 12px; align-items: baseline;
  padding: 6px 0; font-size: 12.5px;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent);
}
.xx-rec:last-child { border-bottom: none; }
.xx-rec-t { color: var(--muted); font-size: 11.5px; flex: 0 0 auto; min-width: 74px; }
.xx-rec-d { color: var(--text); flex: 1 1 auto; }

/* ---------------- 模块列表 ---------------- */
.xx-mods { display: flex; flex-direction: column; gap: 10px; }
.xx-mod {
  border-radius: 13px; overflow: hidden;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 55%, #000);
  transition: border-color .2s;
}
.xx-mod.open { border-color: color-mix(in srgb, #a78bfa 40%, transparent); }
.xx-mod-h {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 17px; cursor: pointer;
  transition: background .18s;
}
.xx-mod-h:hover { background: color-mix(in srgb, #a78bfa 7%, transparent); }
.xx-mod-icon { font-size: 21px; flex: 0 0 auto; }
.xx-mod-txt { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xx-mod-txt b { font-size: 14.5px; font-weight: 700; }
.xx-mod-txt em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.xx-mod-arw {
  flex: 0 0 auto; font-size: 11px; color: var(--muted);
  transition: transform .25s;
}
.xx-mod.open .xx-mod-arw { transform: rotate(90deg); }

.xx-mod-body { display: none; padding: 0 15px 15px; }
.xx-mod.open .xx-mod-body { display: block; }
.xx-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 9px; }
.xx-sub {
  appearance: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 14px; border-radius: 10px; text-align: left;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 70%, #000);
  color: var(--text);
  transition: all .18s;
}
.xx-sub b { font-size: 13.5px; font-weight: 700; }
.xx-sub em { font-style: normal; font-size: 11px; color: var(--muted); }
.xx-sub:hover {
  border-color: color-mix(in srgb, #a78bfa 50%, transparent);
  background: color-mix(in srgb, #a78bfa 10%, transparent);
  transform: translateY(-2px);
}
.xx-sub:active { transform: scale(.97); }

/* ---------------- 移动端 ---------------- */
@media (max-width: 700px) {
  .xx-realm { padding: 15px 16px; }
  .xx-realm-name { font-size: 22px; }
  .xx-subs { grid-template-columns: 1fr 1fr; }
  .xx-sub { padding: 10px 11px; }
  .xx-sub b { font-size: 12.5px; }
  .xx-rec-t { min-width: 62px; font-size: 11px; }
}


/* ========== starfield.css ========== */
/* ============================================================
   烛心站点 · 动态星空 v17（重写版）
   ------------------------------------------------------------
   本次重写解决的核心问题：
   1) 手机端星空「下边不显示」
      旧版 .stars-layer { inset: -50% } 让元素左上角偏移 -50% 视口，
      而 JS 生成的星星坐标范围只覆盖到 1.36 倍视口高，
      导致视口底部约 14% 完全没有星星（所有手机都如此）。
      新版：星星坐标按「视口 + 视差余量」精确铺满，四边都不留空。
   2) 手机端点击/触摸会把星空「搞动」
      旧版 JS 绑定了 touchmove 做视差，点一下屏幕星星就跟着跑。
      新版：手机端只保留陀螺仪（deviceorientation），
      触摸/点击完全不产生视差。
   3) 手机端性能
      按设备能力自动降星数、降模糊、降动画层数。
   ============================================================ */

/* ---------- 深空底色 ---------- */
html {
  background: #05060a !important;
  background-image: none !important;
  min-height: 100%;
}
body {
  background: transparent !important;
  background-image: none !important;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.deep-space {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 130% 85% at 50% -12%, #131b33 0%, #0a0e18 46%, #05060a 100%);
}

/* ---------- 星空容器 ----------
   关键：inset:0（不再用 -50%）
   星星坐标由 JS 按视口算好，并带上视差余量。
   视差通过 translate3d 实现，余量保证移动时四边依然有星星。

   ⚠️ 关于 transition：
   JS 里已经有逐帧缓动（EASE）在平滑位移，这里【不能再加 transition】。
   两者叠加会让鼠标停下后仍在慢慢滑动，产生「黏滞、拖不动」的手感，
   也就是之前反馈的「鼠标滑动没有滑动效果」。
   这里保持 transform 由 JS 独占驱动。 */
.stars-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  /* 视差移动时，边缘可能露白 —— 用略大的缩放兜住 */
  scale: 1.14;
}

/* 星星本体：单点 + box-shadow 复制出大量星星 */
.stars-layer i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: transparent;
  transform: translateZ(0);
}

/* 四层星星：尺寸/亮度/速度递进 */
.stars-d { width: 1px; height: 1px; }
.stars-a { width: 1px; height: 1px; }
.stars-b { width: 2px; height: 2px; }
.stars-c { width: 2.5px; height: 2.5px; }

/* 闪烁 */
@keyframes twinkleD {
  0%, 100% { opacity: .40; }
  50%      { opacity: .70; }
}
@keyframes twinkleA {
  0%, 100% { opacity: .55; }
  25%      { opacity: .86; }
  50%      { opacity: .62; }
  75%      { opacity: .96; }
}
@keyframes twinkleB {
  0%, 100% { opacity: .68; }
  25%      { opacity: 1; }
  50%      { opacity: .78; }
  75%      { opacity: .95; }
}
@keyframes twinkleC {
  0%, 100% { opacity: .85; transform: scale(1); }
  25%      { opacity: 1;   transform: scale(1.16); }
  50%      { opacity: .9;  transform: scale(1.04); }
  75%      { opacity: 1;   transform: scale(1.12); }
}

/* 缓慢漂移（制造纵深：越近越快） */
@keyframes driftA {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-80px, 55px, 0); }
}
@keyframes driftB {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-140px, 95px, 0); }
}
@keyframes driftC {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-210px, 150px, 0); }
}

.stars-d { animation: twinkleD 12s ease-in-out infinite; }
.stars-a { animation: twinkleA 9s ease-in-out infinite, driftA 90s linear infinite; }
.stars-b { animation: twinkleB 7.5s ease-in-out infinite, driftB 55s linear infinite; }
.stars-c { animation: twinkleC 6s ease-in-out infinite, driftC 34s linear infinite; }

/* ---------- 顶部星云 ----------
   注意：自身漂移动画与「鼠标视差」都要用 transform，
   而 CSS 动画优先级高于 inline style。
   若各写各的 transform，后写的会被覆盖
   —— 这正是之前「星云完全不跟鼠标动」的原因。
   解决办法：鼠标视差写进 CSS 变量 --mx/--my，
   在关键帧里和自身漂移一起 translate，两者就能同时生效。 */
.star-nebula {
  position: fixed;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 30% at 26% 12%, rgba(88, 118, 214, .17), transparent 64%),
    radial-gradient(ellipse 40% 26% at 76% 20%, rgba(146, 92, 210, .13), transparent 66%),
    radial-gradient(ellipse 70% 40% at 50% -6%, rgba(26, 40, 90, .55), transparent 72%);
  animation: nebulaDrift 48s ease-in-out infinite;
}
@keyframes nebulaDrift {
  0%   { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1); }
  100% { transform: translate3d(calc(var(--mx, 0px) - 1.4%), calc(var(--my, 0px) + 1%), 0) scale(1.05); }
}

/* ---------- 底部极光 ----------
   注意：这里刻意【不使用 skew / rotate】。
   早先的 auroraFlow 里带 skewX(±2.5deg)，
   在视觉上就是「背景跟着在转」，已全部移除。
   现在只做纯位移 + 极缓慢的纵向呼吸，保持平稳。 */
.aurora {
  position: fixed;
  left: -12%; right: -12%;
  bottom: -16%;
  height: 50vh;
  z-index: 2;
  pointer-events: none;
  filter: blur(48px);
  opacity: .45;
  background:
    radial-gradient(ellipse 55% 60% at 24% 100%, rgba(56, 189, 248, .28), transparent 68%),
    radial-gradient(ellipse 48% 55% at 54% 108%, rgba(168, 85, 247, .22), transparent 70%),
    radial-gradient(ellipse 58% 52% at 82% 96%, rgba(232, 163, 61, .20), transparent 72%);
  animation: auroraFlow 26s ease-in-out infinite;
}
@keyframes auroraFlow {
  0%   { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); opacity: .34; }
  50%  { transform: translate3d(calc(var(--mx, 0px) + 1%), calc(var(--my, 0px) - 2%), 0); opacity: .52; }
  100% { transform: translate3d(calc(var(--mx, 0px) + 3%), var(--my, 0px), 0); opacity: .42; }
}

/* ---------- 颗粒质感 ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* 流星画布（JS 绘制） */
#meteorCanvas {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* 旧方案退役 */
.bg-layer { display: none !important; }
#starCanvas { display: none !important; }

/* ---------- 内容层级 ----------
   ⚠️ 层级设计说明（重要，别随手改）
   ------------------------------------------------------------
   背景装饰层（星空/星云/极光/颗粒/流星）必须【低于内容】，
   否则像 ai.html 这种「自带样式、内容容器没有 z-index」的独立页面
   会被背景整片盖住，表现为「只显示背景、内容看不见」。

   所以：
     背景装饰层 = 1 ~ 3      （在内容之下，只是衬托）
     内容层     = 20         （.wrap / main / #blocks）
     顶栏       = 50
     拖尾画布   = 60 ★       （唯一在内容之上的装饰层）

   为什么拖尾可以单独抬高？
     它是 pointer-events:none 的纯发光叠加层，
     抬到内容之上不会挡住任何交互，
     而且只有这样鼠标拖尾才看得见。
     在 ai.html 上拖尾同样浮于其上，但因为是稀疏的发光粒子，
     不会影响阅读（实测内容可读性不受影响）。
   ------------------------------------------------------------ */
.stars-layer  { z-index: 1; }
.star-nebula  { z-index: 1; }
.aurora       { z-index: 2; }
#meteorCanvas { z-index: 2; }
.grain        { z-index: 3; }
#trailCanvas  { z-index: 60; }

.topbar, header.topbar { position: relative; z-index: 50; }
.wrap, main, #blocks, .page-fade { position: relative; z-index: 20; }
footer { position: relative; z-index: 20; }
.drawer, .drawer-mask { z-index: 300; }
.gmodal, .rm-modal { z-index: 900; }

/* ============================================================
   鼠标拖尾星轨（动态模糊拖影）
   —— 由 starfield.js 的 canvas 实现在此配置尺寸/层级
   ============================================================ */
#trailCanvas {
  position: fixed;
  inset: 0;
  /* 唯一允许浮在内容之上的装饰层（见上方「内容层级」说明） */
  z-index: 60;
  pointer-events: none;
}

/* ============================================================
   手机端适配（核心修复）
   ------------------------------------------------------------
   ⚠️ 媒体查询口径很重要：
   早先用 (hover: none) and (pointer: coarse) 判「手机」，
   但 Windows 触屏笔记本也会命中这个组合，
   于是那些机器上鼠标拖尾被 display:none 直接隐藏了。
   现在统一改成「窄屏」为唯一条件 —— 手机上屏幕一定窄，
   而触屏笔记本屏幕是宽的，这样就不会误伤。
   ============================================================ */
@media (max-width: 768px) {
  /* 手机保留全部星空层，但降模糊/降密度以省电 */
  .aurora {
    height: 38vh;
    filter: blur(36px);
    opacity: .40;
    /* iOS 上大范围 blur 很吃性能，限制合成层 */
    will-change: opacity;
  }
  .star-nebula { animation-duration: 70s; }
  .stars-c { opacity: .82; }
  .grain { opacity: .028; }
  /* 手机端视差幅度由 JS 控制，这里不做任何 transform 过渡 */
  .stars-layer {
    scale: 1.1;
  }
  /* 手机端不显示鼠标拖尾 */
  #trailCanvas { display: none !important; }
}

/* 纯触屏小屏（真手机）不显示鼠标拖尾。
   注意这里必须同时满足「窄屏」和「无精确指针」，
   否则会误伤有触摸屏的笔记本。 */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  #trailCanvas { display: none !important; }
}

/* ---------- 减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .stars-d, .stars-a, .stars-b, .stars-c,
  .aurora, .star-nebula { animation: none !important; }
  #trailCanvas, #meteorCanvas { display: none !important; }
  .stars-layer { transition: none !important; transform: none !important; }
}

/* 动画全关兜底 */
html.no-anim .stars-d, html.no-anim .stars-a,
html.no-anim .stars-b, html.no-anim .stars-c,
html.no-anim .aurora, html.no-anim .star-nebula {
  animation: none !important;
}
html.no-anim #trailCanvas,
html.no-anim #meteorCanvas { display: none !important; }

/* ============================================================
   兜底层级保护：装饰层绝不撑高文档
   ============================================================ */
.deep-space,
.stars-layer,
.star-nebula,
.aurora,
.grain,
#meteorCanvas,
#trailCanvas,
.bg-layer {
  position: fixed !important;
  pointer-events: none;
}


/* ========== navsmooth.css ========== */
/* ============================================================
   烛心站点 · 导航菜单丝滑渲染 v1
   包含：
     · 标签按钮：弹性悬停 + 光晕 + 图标微动 + 玻璃底衬
     · 下划线：缓动跟随 + 发光
     · 汉堡按钮：旋转 + 线条变形
     · 官方群/登录按钮：光泽掠过 + 抬升
     · 抽屉导航项：逐条滑入
   ============================================================ */

/* ---------- 1. 标签按钮本体 ---------- */
.tabs .tab {
  position: relative;
  border-radius: 12px;
  padding: 14px 18px;
  transition:
    color .28s cubic-bezier(.4, 0, .2, 1),
    background .28s cubic-bezier(.4, 0, .2, 1),
    transform .32s cubic-bezier(.34, 1.4, .64, 1),
    box-shadow .32s ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

/* 玻璃底衬（悬停浮现） */
.tabs .tab::before {
  content: '';
  position: absolute;
  inset: 6px 6px 6px 6px;
  border-radius: 10px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .055),
    rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .06);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .3s ease, transform .32s cubic-bezier(.34, 1.4, .64, 1);
  pointer-events: none;
  z-index: -1;
}

/* 光泽掠过 */
.tabs .tab::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  background: linear-gradient(115deg,
    transparent 20%,
    rgba(232, 163, 61, .18) 46%,
    rgba(255, 226, 168, .13) 52%,
    transparent 78%);
  opacity: 0;
  transform: translateX(-120%);
  transition: opacity .2s ease;
  pointer-events: none;
  overflow: hidden;
}

.tabs .tab:hover {
  color: var(--text);
  transform: translateY(-2px);
}
.tabs .tab:hover::before {
  opacity: 1;
  transform: scale(1);
}
.tabs .tab:hover::after {
  animation: tabSheen .85s cubic-bezier(.3, 0, .2, 1);
}
@keyframes tabSheen {
  0%   { opacity: .95; transform: translateX(-120%); }
  100% { opacity: 0;   transform: translateX(120%); }
}

/* 图标微动 */
.tabs .tab .ti {
  display: inline-block;
  transition: transform .34s cubic-bezier(.34, 1.5, .64, 1), filter .3s ease;
}
.tabs .tab:hover .ti {
  transform: translateY(-1px) scale(1.14) rotate(-3deg);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent));
}

/* 按下反馈 */
.tabs .tab:active {
  transform: translateY(0) scale(.965);
  transition-duration: .09s;
}

/* 激活态：金色 + 柔光 */
.tabs .tab.active {
  color: var(--accent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 42%, transparent);
}
.tabs .tab.active .ti {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 72%, transparent));
}

/* 外部跳转标签的小箭头 */
.tabs .tab.tab-ext::marker { content: ''; }

/* ---------- 2. 下划线（缓动 + 发光） ---------- */
.tab-underline {
  transition:
    transform .46s cubic-bezier(.34, 1.32, .64, 1),
    width .46s cubic-bezier(.34, 1.32, .64, 1),
    opacity .3s ease,
    box-shadow .3s ease !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 65%, transparent),
              0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}

/* ---------- 3. 汉堡按钮 ---------- */
.navbtn {
  transition: background .26s ease, transform .3s cubic-bezier(.34, 1.4, .64, 1) !important;
}
.navbtn:hover {
  background: rgba(255, 255, 255, .07);
  transform: scale(1.06);
}
.navbtn:active { transform: scale(.94); }
.navbtn .nb-line {
  transition:
    transform .38s cubic-bezier(.34, 1.4, .64, 1),
    opacity .26s ease,
    width .34s cubic-bezier(.34, 1.4, .64, 1) !important;
}
.navbtn[aria-expanded="true"] .nb-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.navbtn[aria-expanded="true"] .nb-line:nth-child(2) {
  opacity: 0; transform: scaleX(.3);
}
.navbtn[aria-expanded="true"] .nb-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ---------- 4. 官方群 / 登录按钮 ---------- */
.groupbtn, .loginbtn {
  position: relative;
  overflow: hidden;
  transition:
    background .28s ease,
    transform .3s cubic-bezier(.34, 1.4, .64, 1),
    box-shadow .3s ease,
    filter .25s ease !important;
}
.groupbtn::after, .loginbtn::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 42%; height: 100%;
  background: linear-gradient(100deg,
    transparent,
    rgba(255, 255, 255, .42),
    transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.groupbtn:hover::after, .loginbtn:hover::after {
  animation: btnSheen .78s cubic-bezier(.3, 0, .2, 1);
}
@keyframes btnSheen {
  0%   { left: -60%; }
  100% { left: 130%; }
}
.loginbtn:hover { transform: translateY(-2px) scale(1.015); }
.groupbtn:hover { transform: translateY(-2px); }

/* ---------- 5. 抽屉导航项 ---------- */
.drawer a, .drawer .ditem, .drawer-item {
  transition:
    background .26s ease,
    color .26s ease,
    padding-left .3s cubic-bezier(.34, 1.4, .64, 1),
    transform .3s cubic-bezier(.34, 1.4, .64, 1) !important;
}
.drawer a:hover, .drawer .ditem:hover, .drawer-item:hover {
  padding-left: 6px;
  transform: translateX(2px);
}

/* 抽屉打开时逐条滑入 */
.drawer.open a, .drawer.open .ditem, .drawer.open .drawer-item {
  animation: drawerIn .42s cubic-bezier(.22, 1.3, .36, 1) backwards;
}
.drawer.open a:nth-child(1) { animation-delay: .02s; }
.drawer.open a:nth-child(2) { animation-delay: .05s; }
.drawer.open a:nth-child(3) { animation-delay: .08s; }
.drawer.open a:nth-child(4) { animation-delay: .11s; }
.drawer.open a:nth-child(5) { animation-delay: .14s; }
.drawer.open a:nth-child(6) { animation-delay: .17s; }
.drawer.open a:nth-child(7) { animation-delay: .20s; }
.drawer.open a:nth-child(8) { animation-delay: .23s; }
@keyframes drawerIn {
  0%   { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ---------- 6. 通用：所有卡片/按钮统一缓动 ---------- */
.acard, .card, button, .pcat, .pbtn, .lb-btn, .refresh-btn {
  transition:
    transform .3s cubic-bezier(.34, 1.4, .64, 1),
    box-shadow .3s ease,
    border-color .26s ease,
    background .26s ease;
}
.acard:hover, .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .9),
              0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

/* ---------- 7. 可访问性 ---------- */
@media (prefers-reduced-motion: reduce) {
  .tabs .tab, .tabs .tab::before, .tabs .tab::after,
  .navbtn .nb-line, .groupbtn, .loginbtn,
  .acard, .card, button {
    transition: color .15s ease, background .15s ease !important;
    animation: none !important;
  }
  .tabs .tab:hover { transform: none; }
  .acard:hover, .card:hover { transform: none; }
}

/* 移动端：减少重绘 */
@media (max-width: 768px) {
  .tabs .tab::after { display: none; }        /* 光泽动效省电 */
  .tabs .tab:hover { transform: none; }
}

/* ===== STAR-ZFIX：确保星空可见（不被 .bg-layer 遮挡） ===== */
.bg-layer {
  z-index: -1 !important;
  background: transparent !important;
  pointer-events: none;
}
/* 星空层级（由 starfield.css 统一管理，这里不再覆盖） */

/* 星空之下的 bg-layer orb 保持可见但不遮挡 */
.bg-layer .orb { opacity: .5; }
/* ============================================================
   抽屉导航丝滑动效（补齐遗漏的元素）
   覆盖：.dnav-item / .dnav-ic / .dnav-hot / .dnav-ext / .dnav-sec
        .drawer-group / .drawer-version / .drawer-foot
        .rm-btn / .gmodal-btn / .to-top / .refresh-btn
   ============================================================ */

/* ---------- 抽屉导航项 ---------- */
.drawer-nav .dnav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  margin: 2px 0;
  border-radius: 11px;
  color: var(--muted);
  text-decoration: none;
  overflow: hidden;
  transition:
    background .28s cubic-bezier(.4, 0, .2, 1),
    color .28s cubic-bezier(.4, 0, .2, 1),
    transform .32s cubic-bezier(.34, 1.4, .64, 1),
    box-shadow .3s ease,
    padding-left .3s cubic-bezier(.34, 1.4, .64, 1);
  -webkit-tap-highlight-color: transparent;
}

/* 左侧高亮竖条（悬停时展开） */
.drawer-nav .dnav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 90%, transparent),
    color-mix(in srgb, var(--accent) 45%, transparent));
  transform: translateY(-50%);
  transition: height .3s cubic-bezier(.34, 1.4, .64, 1);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* 光泽掠过 */
.drawer-nav .dnav-item::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg,
    transparent,
    rgba(255, 255, 255, .07),
    transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

.drawer-nav .dnav-item:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--text);
  transform: translateX(4px);
  padding-left: 19px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}
.drawer-nav .dnav-item:hover::before { height: 62%; }
.drawer-nav .dnav-item:hover::after {
  animation: dnavSheen .7s cubic-bezier(.3, 0, .2, 1);
}
@keyframes dnavSheen {
  0%   { left: -70%; }
  100% { left: 130%; }
}
.drawer-nav .dnav-item:active {
  transform: translateX(4px) scale(.975);
  transition-duration: .09s;
}

/* 图标微动 */
.drawer-nav .dnav-ic {
  display: inline-block;
  font-size: 16px;
  transition: transform .34s cubic-bezier(.34, 1.5, .64, 1), filter .3s ease;
}
.drawer-nav .dnav-item:hover .dnav-ic {
  transform: scale(1.2) rotate(-5deg);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 70%, transparent));
}

/* 激活项 */
.drawer-nav .dnav-item.active,
.drawer-nav .dnav-item[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.drawer-nav .dnav-item.active::before,
.drawer-nav .dnav-item[aria-current="page"]::before {
  height: 62%;
}

/* 外部跳转小箭头 */
.drawer-nav .dnav-ext {
  margin-left: auto;
  font-size: 12px;
  opacity: .5;
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), opacity .25s ease;
}
.drawer-nav .dnav-item:hover .dnav-ext {
  opacity: 1;
  transform: translate(3px, -3px);
}

/* "新"角标 */
.drawer-nav .dnav-hot {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  color: #1a1206;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 95%, #fff 5%),
    color-mix(in srgb, var(--accent) 75%, #b8730a 25%));
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 70%, transparent);
  animation: hotPulse 2.2s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34, 1.5, .64, 1);
}
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 70%, transparent); }
  50%      { box-shadow: 0 2px 14px -1px color-mix(in srgb, var(--accent) 95%, transparent); }
}
.drawer-nav .dnav-item:hover .dnav-hot {
  transform: scale(1.12) rotate(-4deg);
}

/* 分组标题 */
.drawer-nav .dnav-sec {
  padding: 12px 14px 6px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--muted);
  opacity: .65;
  text-transform: uppercase;
  transition: color .3s ease, letter-spacing .3s ease;
}
.drawer-nav .dnav-sec:hover {
  color: var(--accent);
  letter-spacing: 2.2px;
}

/* ---------- 抽屉底部 ---------- */
.drawer-group {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background .28s ease,
    transform .3s cubic-bezier(.34, 1.4, .64, 1),
    box-shadow .3s ease;
}
.drawer-group::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: skewX(-18deg);
}
.drawer-group:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.drawer-group:hover::after { animation: dnavSheen .75s cubic-bezier(.3, 0, .2, 1); }
.drawer-group:active { transform: scale(.97); }

.drawer-version {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  opacity: .55;
  margin-top: 10px;
  transition: opacity .3s ease, color .3s ease;
}
.drawer-version:hover { opacity: .9; color: var(--accent); }

/* ---------- 弹窗按钮 ---------- */
.rm-btn, .gmodal-btn {
  position: relative;
  overflow: hidden;
  transition:
    background .28s ease,
    transform .3s cubic-bezier(.34, 1.4, .64, 1),
    box-shadow .3s ease,
    border-color .26s ease !important;
}
.rm-btn::after, .gmodal-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.rm-btn:hover, .gmodal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .9);
}
.rm-btn:hover::after, .gmodal-btn:hover::after {
  animation: dnavSheen .72s cubic-bezier(.3, 0, .2, 1);
}
.rm-btn:active, .gmodal-btn:active { transform: scale(.97); }

/* ---------- 回到顶部按钮 ---------- */
.to-top {
  transition:
    opacity .34s ease,
    transform .34s cubic-bezier(.34, 1.4, .64, 1),
    background .28s ease,
    box-shadow .3s ease !important;
}
.to-top:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.to-top:active { transform: scale(.94); }

/* ---------- 刷新按钮 ---------- */
.refresh-btn {
  transition:
    transform .3s cubic-bezier(.34, 1.4, .64, 1),
    background .26s ease,
    border-color .26s ease !important;
}
.refresh-btn:hover {
  transform: rotate(-14deg) scale(1.08);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.refresh-btn:active { transform: rotate(0) scale(.92); }

/* ---------- 主题标签 / 单位切换等小按钮 ---------- */
.qt-unit button,
.ttl,
.mon-head button,
.pts-overview button {
  transition:
    transform .28s cubic-bezier(.34, 1.4, .64, 1),
    background .24s ease,
    color .24s ease,
    border-color .24s ease !important;
}
.qt-unit button:hover {
  transform: translateY(-2px);
}
.qt-unit button:active {
  transform: translateY(0) scale(.94);
}

/* ---------- 可访问性 ---------- */
@media (prefers-reduced-motion: reduce) {
  .drawer-nav .dnav-item,
  .drawer-nav .dnav-item::before,
  .drawer-nav .dnav-item::after,
  .drawer-group,
  .rm-btn,
  .gmodal-btn,
  .to-top,
  .refresh-btn {
    transition: background .15s ease, color .15s ease !important;
    animation: none !important;
  }
  .drawer-nav .dnav-item:hover { transform: none; padding-left: 14px; }
  .to-top:hover { transform: none; }
}
/* ============================================================
   补齐漏掉的按钮动效
   覆盖：.brand（Logo）/ 日期切换按钮 / .qqg-copy（复制群号）/ .rm-x（关闭）
   ============================================================ */

/* ---------- 1. Logo / 品牌 ---------- */
a.brand, .brand {
  position: relative;
  transition:
    transform .34s cubic-bezier(.34, 1.4, .64, 1),
    filter .3s ease;
  -webkit-tap-highlight-color: transparent;
}
a.brand:hover, .brand:hover {
  transform: translateY(-1px);
  filter: brightness(1.12);
}
a.brand:active, .brand:active {
  transform: scale(.97);
}
/* Logo 图标悬停放大旋转
   ------------------------------------------------------------
   ⚠️ 修复记录：
   原版这里写了 display: inline-block，覆盖掉 style.css 中
   .brand-avatar 的 display: grid + place-items: center，
   导致 🕯️ 字形退回按行盒(line-height 33.25px)顶部对齐，
   在 38px 高的框里向下偏约 2.4px —— 看起来就是「蜡烛错位」。
   这里不再覆盖 display，只保留悬停动画所需的 transition。 */
.brand-avatar {
  transition: transform .38s cubic-bezier(.34, 1.5, .64, 1), filter .3s ease;
}
a.brand:hover .brand-avatar,
.brand:hover .brand-avatar {
  transform: scale(1.14) rotate(-8deg);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 75%, transparent));
}
.brand-text b, .brand-text i {
  transition: color .28s ease, text-shadow .3s ease;
}
.brand:hover .brand-text b {
  color: var(--accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- 2. 日期切换按钮（额度） ---------- */
.mon-days button,
.qt-days button,
[data-date] button,
button[data-day] {
  position: relative;
  overflow: hidden;
  transition:
    transform .28s cubic-bezier(.34, 1.4, .64, 1),
    background .24s ease,
    color .24s ease,
    border-color .24s ease,
    box-shadow .28s ease !important;
}
.mon-days button:hover,
.qt-days button:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.mon-days button:active,
.qt-days button:active {
  transform: translateY(0) scale(.94);
}

/* 通用兜底：任何小圆角按钮都加基础动效 */
button:not([disabled]) {
  transition:
    transform .28s cubic-bezier(.34, 1.4, .64, 1),
    background .24s ease,
    color .24s ease,
    border-color .24s ease,
    box-shadow .28s ease,
    filter .24s ease;
}
button:not([disabled]):hover {
  filter: brightness(1.08);
}
button:not([disabled]):active {
  transform: scale(.96);
}

/* ---------- 3. 复制群号按钮 ---------- */
.qqg-copy {
  position: relative;
  overflow: hidden;
  transition:
    transform .3s cubic-bezier(.34, 1.4, .64, 1),
    background .26s ease,
    box-shadow .3s ease,
    border-color .26s ease !important;
}
.qqg-copy::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.qqg-copy:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.qqg-copy:hover::after {
  animation: btnShineOnce .72s cubic-bezier(.3, 0, .2, 1);
}
.qqg-copy:active { transform: scale(.96); }

@keyframes btnShineOnce {
  0%   { left: -70%; }
  100% { left: 130%; }
}

/* 复制成功后的反馈动效 */
.qqg-copy.copied,
.qqg-copy.ok {
  animation: copiedPop .5s cubic-bezier(.34, 1.5, .64, 1);
}
@keyframes copiedPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ---------- 4. 弹窗关闭按钮 ---------- */
.rm-x {
  transition:
    transform .32s cubic-bezier(.34, 1.5, .64, 1),
    background .26s ease,
    color .26s ease,
    box-shadow .28s ease !important;
}
.rm-x:hover {
  transform: rotate(90deg) scale(1.16);
  background: rgba(255, 93, 93, .16);
  color: #ff8a8a;
  box-shadow: 0 0 18px -4px rgba(255, 93, 93, .6);
}
.rm-x:active {
  transform: rotate(90deg) scale(.94);
}

/* 其他关闭类按钮通用 */
.modal-x, .gmodal-x, .close-btn, [aria-label*="关闭"] {
  transition:
    transform .32s cubic-bezier(.34, 1.5, .64, 1),
    background .26s ease,
    color .26s ease !important;
}
.modal-x:hover, .gmodal-x:hover, .close-btn:hover, [aria-label*="关闭"]:hover {
  transform: rotate(90deg) scale(1.14);
}

/* ---------- 5. 输入框聚焦动效 ---------- */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent),
              0 0 20px -6px color-mix(in srgb, var(--accent) 50%, transparent) !important;
  transition: border-color .24s ease, box-shadow .3s ease;
}

/* ---------- 6. 可访问性 ---------- */
@media (prefers-reduced-motion: reduce) {
  a.brand, .brand, .brand-avatar,
  button, .qqg-copy, .rm-x, .modal-x, .gmodal-x {
    transition: background .15s ease, color .15s ease !important;
    animation: none !important;
  }
  a.brand:hover, .brand:hover,
  .brand:hover .brand-avatar,
  button:hover, .qqg-copy:hover, .rm-x:hover {
    transform: none !important;
  }
}

/* ============================================================
   动画全关后的兜底：reveal 元素直接可见（保留悬停）
   ------------------------------------------------------------
   ⚠️ 修复记录：
   原版这段规则写在【顶层】，没有限定条件，于是无条件生效，
   把 .reveal 的滚动进场和 .acard/.li/.stat/.tag/.chip 的入场
   动画全部用 !important 干掉了 —— 这正是「动画不够丝滑」的根因。
   现在正确限定为两种场景：
     1) html.no-anim        站点主动关闭动画
     2) 系统偏好「减少动效」
   ============================================================ */
html.no-anim .reveal,
html.no-anim .reveal.in,
html.no-anim .stat, html.no-anim .tl-item, html.no-anim .acard,
html.no-anim .li, html.no-anim .block-title, html.no-anim .bar-item,
html.no-anim .tag, html.no-anim .chip {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  animation-delay: 0s !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    animation-delay: 0s !important;
    filter: none !important;
  }
  .stat, .tl-item, .acard, .li, .block-title, .bar-item, .tag, .chip {
    opacity: 1 !important;
    animation: none !important;
    animation-delay: 0s !important;
  }
}


/* ========== anim3.css ========== */
/* ============================================================
   烛心 · 动画层 v3（丝滑统合版）
   ------------------------------------------------------------
   目标：
   1. 全站所有可动画元素统一缓动体系，手感一致
   2. 卡片/列表/标签等交错入场「自动适配任意数量」
      —— 用 CSS 变量 --i（由 JS 写入序号）驱动延迟，
         新增卡片无需改任何 CSS
   3. 兜底：没有 JS 写入序号时，用 nth-child 前 12 个兜底
   4. 全程只动 transform / opacity（GPU 合成，不重排）
   5. 尊重 prefers-reduced-motion 与 html.no-anim
   ============================================================ */

/* ---------- 缓动与时长体系（全站唯一来源） ---------- */
:root {
  --ease-out:      cubic-bezier(.22, 1, .36, 1);
  --ease-soft:     cubic-bezier(.4, 0, .2, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --ease-spring-2: cubic-bezier(.2, 1.1, .35, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --ease-expo:     cubic-bezier(.16, 1, .3, 1);

  --dur-instant: .12s;
  --dur-fast:    .2s;
  --dur:         .38s;
  --dur-slow:    .6s;
  --dur-slower:  .9s;

  --stagger: 55ms;

  /* 交错入场：优先用 JS 写的序号，缺失时回退 0 */
  --i: 0;
  --stagger-delay: calc(var(--i) * var(--stagger));
}

/* ============================================================
   1. 交错延迟：自动适配任意数量卡片
   ------------------------------------------------------------
   原理：JS 给容器内每个子元素写 style="--i:N"。
   这里统一用 --stagger-delay 作为动画/过渡延迟。
   新增卡片时 JS 自动重算序号，CSS 一行都不用改。
   ============================================================ */
.stagger > * {
  animation-delay: var(--stagger-delay, 0ms);
}
/* 兜底：没有 JS 时用 nth-child 覆盖前 12 个 */
.stagger > *:nth-child(1)  { --i: 0; }
.stagger > *:nth-child(2)  { --i: 1; }
.stagger > *:nth-child(3)  { --i: 2; }
.stagger > *:nth-child(4)  { --i: 3; }
.stagger > *:nth-child(5)  { --i: 4; }
.stagger > *:nth-child(6)  { --i: 5; }
.stagger > *:nth-child(7)  { --i: 6; }
.stagger > *:nth-child(8)  { --i: 7; }
.stagger > *:nth-child(9)  { --i: 8; }
.stagger > *:nth-child(10) { --i: 9; }
.stagger > *:nth-child(11) { --i: 10; }
.stagger > *:nth-child(12) { --i: 11; }

/* ============================================================
   2. 通用入场关键帧
   ============================================================ */
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.98); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(.86); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* ★ 文字从下往上淡入（本次重点补做） */
@keyframes textRise {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}
/* ★ 逐字/逐行上浮（更细腻的段落入场） */
@keyframes lineRise {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes barGrow {
  from { opacity: 0; transform: scaleY(.15); }
  to   { opacity: 1; transform: scaleY(1); }
}
@keyframes barFillX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes iconPop {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.3) rotate(-8deg); }
  70%  { transform: scale(.94) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
@keyframes floatY {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -7px, 0); }
}
@keyframes sheen {
  0%   { transform: translateX(-130%); }
  52%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   2.1 ★ 页面级入场：每次切换标签页都会重新播放
   ------------------------------------------------------------
   原理：renderPage() 重建 #blocks 的 DOM，
   新元素插入时 keyframes 动画自动从头播放。
   因此这里用 animation 而不是 transition —— transition 在
   元素一出现就带 .in 类时会被「瞬间完成」，看不到效果。
   ============================================================ */

/* 区块容器：整体上浮淡入 */
#blocks > .block,
#blocks > .login-banner {
  animation: riseIn .62s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* ★ 文字段落：从下往上淡入（带轻微模糊，更有质感）
   ------------------------------------------------------------
   注意 .block-text 是容器、.block-text p 是真正的段落。
   两者都做，但延迟错开：容器先动，文字随后逐段浮现。 */
.block-text,
.block p,
.block-text .txt {
  animation: textRise .8s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms + 110ms);
  will-change: opacity, transform;
}
.block-text p {
  animation: textRise .72s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms + 210ms);
}

/* 区块内标题稍晚一点，形成层次 */
.block-title,
.block > h3,
.block > h2 {
  animation: slideInLeft .6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms + 60ms);
}
.block-title::before,
.block > h3::before {
  transform-origin: top;
  animation: barGrow .6s var(--ease-spring-2) both;
  animation-delay: calc(var(--i, 0) * 70ms + 160ms);
}

/* 页面大标题：略微慢一点，突出层次 */
.page-head h1 {
  animation: textRise .7s var(--ease-out) both;
}
.page-head > p,
.page-head .sub {
  animation: textRise .7s var(--ease-out) both;
  animation-delay: .09s;
}

/* 统计卡片 */
.stat, .stat-item {
  animation: riseIn .66s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}

/* 时间线：每条从下往上，逐条出现 */
.tl-item {
  animation: lineRise .7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 80ms + 140ms);
}

/* 卡片列表 */
.acard, .li, .litem, .gitem, .scard {
  animation: riseIn .66s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* 技能条 */
.bar-item, .bars .bar {
  animation: lineRise .66s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}

/* 标签 */
.tag, .chip, .tl-tag {
  animation: popIn .5s var(--ease-spring-2) both;
  animation-delay: calc(var(--i, 0) * 35ms + 100ms);
}

/* 列表项（动态活动、榜单等） */
#actList li, #rankList li, .rank li, .acts li {
  animation: slideInLeft .55s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

/* 积分区块 */
.pts-sec {
  animation: riseIn .6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* .reveal 的入场也改用 animation，保证切页时重播。
   注意：只对「真正的文字元素」用 textRise；
   .stat / .tl-item / .acard 等有自己动画的元素不要被覆盖，
   否则会丢掉各自的交错延迟与上浮曲线。 */
.reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}
.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.reveal.in:not(.stat):not(.stat-item):not(.tl-item):not(.acard):not(.li):not(.litem):not(.gitem):not(.scard):not(.bar-item):not(.mon-card):not(.pts-sec) {
  animation: textRise .75s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms + 80ms);
}

/* ============================================================
   3. 性能：GPU 合成提示
   ============================================================ */
.acard, .li, .stat, .litem, .gitem, .bar, .bar-item, .tl-item,
.tab, .brand-avatar, .adban, .gbtn, .pbtn, .atab, .chip,
.pcard-copy, .dnav-item, .btn, .mon-card, .mon-pill, .scard,
.mon-bar-fill, .pts-sec, .tag {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* 只给真正会动的元素加 will-change，避免显存浪费 */
.acard, .li, .litem, .gitem, .adban, .scard, .mon-card {
  will-change: transform;
}

/* ============================================================
   4. 卡片：悬停抬升 + 光泽 + 边框点亮
   ============================================================ */
.acard, .li, .litem, .gitem, .scard, .mon-card {
  transition:
    transform var(--dur) var(--ease-spring-2),
    border-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur) var(--ease-out),
    background var(--dur-fast) var(--ease-soft);
}
.acard:hover, .li:hover, .litem:hover, .gitem:hover,
.scard:hover, .mon-card:hover {
  transform: translate3d(0, -5px, 0) scale(1.012);
  box-shadow:
    0 18px 40px -18px rgba(0, 0, 0, .62),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.acard:active, .li:active, .litem:active, .gitem:active,
.scard:active, .mon-card:active {
  transform: translate3d(0, -2px, 0) scale(.995);
  transition-duration: var(--dur-fast);
}

/* 卡片图标 */
.acard .ic, .litem .ic, .gitem .ic, .li .ic {
  display: inline-block;
  transition: transform var(--dur) var(--ease-spring);
}
.acard:hover .ic, .gitem:hover .ic { transform: translateY(-2px) scale(1.16) rotate(-4deg); }
.litem:hover .ic, .li:hover .ic    { transform: scale(1.18) rotate(7deg); }

/* ============================================================
   5. 按钮：统一按下回弹
   ------------------------------------------------------------
   注意：navsmooth.css 里 .refresh-btn / .gmodal-btn 等用了
   !important 定义自己的手感（如刷新按钮旋转），
   这里只统一「没有特殊定义」的通用按钮，避免相互打架。
   ============================================================ */
button, .btn, .tab, .dnav-item, a.acard, a.li, a.litem, a.gitem {
  -webkit-tap-highlight-color: transparent;
}
.btn, .gbtn, .pbtn, .atab, .pcard-copy, .chip,
.rm-btn, .adban-btn, .to-top, .pts-sign-btn, .lb-btn {
  transition:
    transform var(--dur) var(--ease-spring-2),
    background var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur) var(--ease-out),
    filter var(--dur-fast) var(--ease-soft);
}
.btn:hover, .gbtn:hover, .atab:hover, .rm-btn:hover {
  transform: translate3d(0, -2px, 0);
}
.btn:not(:disabled):active,
.gbtn:active, .pbtn:active, .atab:active,
.pcard-copy:active, .chip:active,
.rm-btn:active, .adban-btn:active, .to-top:active {
  transform: scale(.955);
  transition-duration: var(--dur-instant);
}
button:disabled { cursor: not-allowed; }

/* 图标按钮按下时图标缩一下 */
.gbtn .gb-ic { display: inline-block; transition: transform var(--dur) var(--ease-spring); }
.gbtn:hover .gb-ic { transform: scale(1.18) rotate(-6deg); }

/* ============================================================
   6. 列表 / 时间线 / 标签：交错入场
   ============================================================ */
.tl-item {
  animation: lineRise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 80ms + 140ms);
}
.tl-item::before {
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur);
}
.tl-item:hover::before {
  transform: scale(1.38);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 24%, transparent),
              0 0 16px var(--accent);
}
.tl-item h4 { transition: color var(--dur-fast) var(--ease-soft); }
.tl-item:hover h4 { color: var(--accent); }

/* 时间线竖线生长 */
.timeline::before {
  transform-origin: top;
  animation: barGrow var(--dur-slower) var(--ease-out) both;
  animation-delay: .1s;
}

/* 列表项左侧指示条 */
.li, .litem { position: relative; overflow: hidden; }
.li::before, .litem::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
  transition: height var(--dur) var(--ease-spring-2);
}
.li:hover::before, .litem:hover::before { height: 62%; }

/* 标签 */
.tag, .chip, .tl-tag {
  transition:
    transform var(--dur) var(--ease-spring),
    background var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft);
}
.tag:hover, .chip:hover, .tl-tag:hover {
  transform: translate3d(0, -3px, 0) scale(1.06);
}

/* ============================================================
   7. 技能条 / 统计
   ============================================================ */
.bar-item, .bars .bar {
  animation: lineRise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms + 80ms);
}
.bar i, .bar-fill {
  transform-origin: left;
  transition: width 1.15s var(--ease-expo);
}
/* 进度条流光 */
.bar-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%);
  animation: sheen 2.4s var(--ease-soft) infinite;
}
.bar-fill { position: relative; overflow: hidden; }

.stat, .stat-item {
  animation: riseIn var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms + 120ms);
  transition: transform var(--dur) var(--ease-spring-2),
              border-color var(--dur) var(--ease-soft);
}
.stat:hover, .stat-item:hover {
  transform: translate3d(0, -3px, 0);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}
.stat b, .stat-item b {
  display: inline-block;
  transition: transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-soft);
}
.stat:hover b, .stat-item:hover b {
  transform: scale(1.1);
  color: var(--accent);
}

/* ============================================================
   8. 区块标题：金条生长 + 文字上浮
   ------------------------------------------------------------
   注意：这里与第 2.1 节保持一致的 delay 计算，
   否则后面的声明会覆盖前面的，交错效果会丢失。
   ============================================================ */
.block-title, .block > h3, .block > h2 {
  animation: slideInLeft var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms + 60ms);
}
.block-title::before,
.block > h3::before {
  transform-origin: top;
  animation: barGrow var(--dur-slow) var(--ease-spring-2) both;
  animation-delay: calc(var(--i, 0) * 70ms + 160ms);
}

/* ============================================================
   9. 顶部栏 / 滚动进度
   ============================================================ */
.topbar {
  transition:
    box-shadow var(--dur) var(--ease-out),
    background var(--dur) var(--ease-soft),
    height var(--dur) var(--ease-expo);
}
html.scrolled .topbar {
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .82);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.scroll-progress {
  will-change: width;
  transition: width .1s linear;
}

/* 标签下划线 */
.tab-underline {
  transition:
    transform var(--dur) var(--ease-expo),
    width var(--dur) var(--ease-expo),
    opacity var(--dur-fast) var(--ease-soft);
}
.tab { transition: color var(--dur-fast) var(--ease-soft); }
.tab .ti { display: inline-block; transition: transform var(--dur) var(--ease-spring); }
.tab:hover .ti { transform: translateY(-2px) scale(1.15); }
.tab.active .ti { animation: iconPop .5s var(--ease-spring); }

/* ============================================================
   10. 抽屉菜单
   ============================================================ */
.drawer { transition: transform .42s var(--ease-expo); }
.drawer-mask {
  transition: opacity var(--dur-slow) var(--ease-soft),
              visibility var(--dur-slow);
}
.dnav-item {
  animation: slideInLeft var(--dur) var(--ease-out) both;
  animation-delay: var(--stagger-delay, 0ms);
}

/* ============================================================
   11. 弹窗
   ============================================================ */
.gmodal-box { animation: popIn .4s var(--ease-spring-2) both; }
.gmodal-mask, .rm-mask {
  transition: opacity var(--dur) var(--ease-soft), visibility var(--dur);
}

/* ============================================================
   12. 监控面板 / 表格
   ============================================================ */
.mon-bar-fill {
  position: relative;
  overflow: hidden;
  transition: width .8s var(--ease-out), background .5s;
}
.mon-bar-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-100%);
  animation: sheen 2.6s var(--ease-soft) infinite;
}
.mon-pill { transition: transform var(--dur-fast) var(--ease-spring); }
.mon-pill:hover { transform: translateY(-2px); }
.mon-live .dot { animation: pulseGlow 2s var(--ease-soft) infinite; }

.pts-sec { animation: riseIn var(--dur-slow) var(--ease-out) both; }
.pts-table tbody tr {
  transition: background var(--dur-fast) var(--ease-soft);
}
.pts-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ============================================================
   13. 加载骨架
   ============================================================ */
.skel, .skeleton { animation: pulseGlow 1.6s var(--ease-in-out) infinite; }

/* ============================================================
   14. 回到顶部
   ============================================================ */
.to-top {
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-spring),
    border-color var(--dur-fast), color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.to-top:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 8px 26px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ============================================================
   15. 点击涟漪 / 按压反馈（JS 配合）
   ============================================================ */
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 50%, transparent) 0%,
    color-mix(in srgb, var(--accent) 22%, transparent) 42%,
    transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: .85;
  will-change: transform, opacity;
  animation: rippleOut .48s var(--ease-out) forwards;
}
@keyframes rippleOut {
  0%   { transform: translate(-50%, -50%) scale(.25); opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}
.tap-press {
  transform: scale(.985) !important;
  transition: transform .09s var(--ease-soft) !important;
}
.tap-release {
  transition: transform .34s var(--ease-spring) !important;
}

/* 数字脉冲 */
.num-bump { animation: numBump .5s var(--ease-spring) both; }
@keyframes numBump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* 小游戏 */
.gslot {
  transition: transform var(--dur) var(--ease-spring),
              border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.gslot.win { animation: slotWin .62s var(--ease-spring) both; }
@keyframes slotWin {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) rotate(-3deg); }
  70%  { transform: scale(.96) rotate(2deg); }
  100% { transform: scale(1); }
}
.dice-box.roll { animation: rollA .7s var(--ease-spring) both; }
@keyframes rollA {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(200deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ============================================================
   16. 外部页面（player / muyu / ai）通用增强
   ============================================================ */
.card, .box, .kv {
  transition:
    transform var(--dur) var(--ease-spring-2),
    border-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur) var(--ease-out);
}
.card:hover, .box:hover, .kv:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
.mine .box:hover, .kv:hover { transform: translate3d(0, -3px, 0); }

/* 榜单行 */
.rank li, #actList li, #rankList li {
  transition: background var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-out);
}
.rank li:hover, #actList li:hover, #rankList li:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateX(3px);
}

/* 玩法按钮 */
.pcat, .pbtn {
  transition:
    transform var(--dur) var(--ease-spring-2),
    background var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft);
}
.pcat:hover, .pbtn:hover { transform: translate3d(0, -2px, 0); }
.pcat:active, .pbtn:active { transform: scale(.955); }

/* 输入框聚焦 */
input, textarea, select {
  transition: border-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur-fast) var(--ease-soft);
}
input:focus, textarea:focus, select:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* 木鱼 / 通用可点元素 */
[data-press] { transition: transform var(--dur-fast) var(--ease-spring); }
[data-press]:active { transform: scale(.94); }

/* ============================================================
   17. 无障碍 / 全局关闭
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
html.no-anim *, html.no-anim *::before, html.no-anim *::after {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* ========== no-select.css ========== */
/* ============================================================
   烛心站点 · 防选中 / 防拖拽增强
   ------------------------------------------------------------
   目标：
     · 文字默认不可选中（避免误拖出蓝色选区，观感更「像 App」）
     · 图片不可拖拽、不可长按弹出菜单
     · 但以下内容必须保持【可选中】，否则影响使用：
         - 输入框 / 文本域 / 可编辑区域
         - 代码块、命令、仓库地址等需要复制的文本
         - 玩家中心、管理后台等后台类页面（要抄数据）
     实现上把「要可选中」的规则写在后面，靠 !important 收口。
   ============================================================ */

/* ---------- 全局：禁止选中与拖拽 ---------- */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;          /* iOS 长按不弹菜单 */
  -webkit-tap-highlight-color: transparent;
}

/* 整站禁止拖拽（图片、链接等） */
img, a, svg, canvas, picture, video {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* 选中高亮统一成主题色（万一有漏网的） */
::selection {
  background: color-mix(in srgb, var(--accent, #e8a33d) 32%, transparent);
  color: inherit;
}
::-moz-selection {
  background: color-mix(in srgb, var(--accent, #e8a33d) 32%, transparent);
  color: inherit;
}

/* ---------- 例外：这些必须能选中 / 能编辑 ---------- */
input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""],
.is-selectable,
pre,
code,
kbd,
samp,
.qqg-num,
.rm-code,
.qt-num,
.mon-num,
.cmd-line,
.copyable {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default;
}

/* 代码块与命令再宽一点，方便整段复制 */
pre, code, .qqg-num, .rm-code, .copyable {
  -webkit-user-select: all;
  user-select: all;
}

/* 后台类页面：整体允许选中（管理/玩家中心要复制数据） */
body.admin-page,
body.player-page,
.admin-page,
.player-page {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* 输入框内仍然禁掉拖拽，避免拖动光标 */
input, textarea {
  -webkit-user-drag: none;
  user-drag: none;
}


/* ========== blog.css ========== */
/* ============================================================
   烛心 · 博客皮肤 v1
   叠加在 style.css 之上的「杂志/个人博客」视觉层
   不破坏原有 RENDERERS 结构，只重绘外观
   ============================================================ */

/* ---------- 1. 变量扩展 ---------- */
:root{
  --paper:transparent;          /* 透明 → 让站点原有星空背景透出 */
  --paper-solid:#0b0d11;        /* 需要实底时用这个 */
  --paper-2:rgba(16,19,25,.72);
  --ink:#e9ebef;
  --ink-2:#a8afbc;
  --ink-3:#7b8391;
  --gold:#e8a33d;
  --gold-lt:#ffd68a;
  --gold-dk:#a66a12;
  --hair:rgba(255,255,255,.075);
  --hair-gold:rgba(232,163,61,.22);
  --shadow:0 20px 50px -22px rgba(0,0,0,.85);
  --shadow-gold:0 18px 46px -20px rgba(232,163,61,.35);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,"Times New Roman",serif,
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Cascadia Code","Courier New",monospace;
  --ease:cubic-bezier(.22,.75,.28,1);
}

/* ---------- 2. 全局质感 ---------- */
html{scroll-behavior:smooth}

body{
  background:var(--paper);
  font-family:var(--sans);
  letter-spacing:.006em;
}

/* 纸张噪点 —— 已停用（避免遮挡站点原有星空） */

::selection{background:rgba(232,163,61,.3);color:#fff}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(232,163,61,.35),rgba(232,163,61,.15));
  border-radius:99px;border:2px solid var(--paper-solid);
}
::-webkit-scrollbar-thumb:hover{background:rgba(232,163,61,.55)}

/* ---------- 3. 顶栏：杂志刊头 ---------- */
.topbar{
  background:color-mix(in srgb, var(--paper-solid) 78%, transparent);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--hair);
}
.topbar-inner{height:74px}

/* 品牌：加一道刊头竖线 */
.brand{position:relative;padding-left:16px}
.brand::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2.5px;height:34px;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold),transparent);
  box-shadow:0 0 12px rgba(232,163,61,.5);
}
.brand-avatar{
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,214,138,.28), rgba(232,163,61,.1));
  border:1px solid var(--hair-gold);
  box-shadow:0 0 16px -2px rgba(232,163,61,.4), inset 0 0 12px -4px rgba(255,214,138,.5);
  transition:transform .4s var(--ease), box-shadow .4s;
}
.brand:hover .brand-avatar{transform:rotate(-8deg) scale(1.06);box-shadow:0 0 24px 0 rgba(232,163,61,.6)}
.brand-text b{font-size:17px;font-weight:800;letter-spacing:.06em;
  color:var(--gold-lt);
  text-shadow:0 0 14px rgba(232,163,61,.45)}
.brand-text i{font-size:11.5px;letter-spacing:.1em;color:var(--ink-3)}

/* ---------- 4. 标签导航：细排版 ---------- */
.tabs-wrap{border-top:none;border-bottom:1px solid var(--hair)}
.tabs{gap:2px}
.tab{
  position:relative;padding:13px 15px;font-size:13.5px;font-weight:500;
  color:var(--ink-3);transition:color .3s var(--ease);border-radius:0;
}
.tab .ti{font-size:14px;opacity:.8;transition:transform .35s var(--ease)}
.tab:hover{color:var(--ink)}
.tab:hover .ti{transform:translateY(-2px) scale(1.12)}
.tab.active{color:var(--gold-lt);font-weight:700}
.tab::after{
  content:"";position:absolute;left:15px;right:15px;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transition:transform .38s var(--ease);
}
.tab.active::after,.tab:hover::after{transform:scaleX(1)}
.tab-underline{display:none!important}  /* 用 CSS 下划线替代 JS 定位线 */

/* ---------- 5. 页头：大标题排版 ---------- */
.page-head{
  padding:64px 0 40px;position:relative;
  border-bottom:1px solid var(--hair);margin-bottom:52px;
}
.page-head::before{
  content:"";position:absolute;left:0;bottom:-1px;width:88px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  box-shadow:0 0 14px rgba(232,163,61,.6);
}
/* 刊头小标 */
.page-head::after{
  content:attr(data-kicker);
  position:absolute;top:34px;left:0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;
  color:rgba(232,163,61,.62);text-transform:uppercase;
}
#pageTitle{
  font-size:clamp(32px,6vw,50px);font-weight:800;
  letter-spacing:.01em;line-height:1.18;margin:14px 0;
  color:#ffd68a;
  text-shadow:0 0 22px rgba(232,163,61,.35), 0 2px 16px rgba(0,0,0,.5);
}
#pageSubtitle{
  font-size:15px;color:var(--ink-2);max-width:680px;line-height:1.85;
}

/* 作者元信息条（博客感核心） */
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:22px;font-size:12.5px;color:var(--ink-3);
  font-family:var(--mono);letter-spacing:.05em;
}
.post-meta .pm-item{display:inline-flex;align-items:center;gap:7px}
.post-meta .pm-item svg{opacity:.6}
.post-meta .pm-dot{width:3px;height:3px;border-radius:50%;background:var(--hair-gold);flex:0 0 auto}
.post-meta .pm-tag{
  font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  color:var(--gold);border:1px solid var(--hair-gold);border-radius:99px;
  padding:2.5px 10px;background:rgba(232,163,61,.055);
  transition:background .3s, border-color .3s;
}
.post-meta .pm-tag:hover{background:rgba(232,163,61,.14);border-color:var(--gold)}

/* ---------- 6. 区块标题：章节感 ---------- */
.block-title{
  font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:.02em;
  margin:0 0 24px;color:var(--ink);position:relative;
  display:flex;align-items:center;gap:13px;
}
.block-title::before{
  content:"";width:4px;height:20px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk));
  box-shadow:0 0 12px rgba(232,163,61,.5);
}
.block{margin-bottom:64px}

/* ---------- 7. 正文文字：博客排版 ---------- */
.block-text p{
  font-size:16px;line-height:2.05;color:var(--ink-2);
  margin-bottom:20px;max-width:72ch;
}
.block-text p:first-of-type{
  font-size:17px;color:var(--ink);
}
/* 首字下沉（仅正文第一段） */
.page-head + #blocks .block-text:first-child p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-size:3.4em;line-height:.82;
  padding:6px 12px 0 0;font-weight:800;
  color:var(--gold);text-shadow:0 2px 18px rgba(232,163,61,.5);
}

/* ---------- 8. 统计卡：横排数据条 ---------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:14px;
  overflow:hidden;
}
.stat{
  background:linear-gradient(165deg,var(--paper-2),var(--paper-solid));
  padding:28px 22px;text-align:center;position:relative;
  transition:background .4s var(--ease);
}
.stat::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;
  background:radial-gradient(circle at 50% 0%, rgba(232,163,61,.14), transparent 70%);
}
.stat:hover::before{opacity:1}
.stat b{
  display:block;
  font-size:clamp(25px,4.5vw,34px);font-weight:800;line-height:1.15;
  color:#ffd68a;
  text-shadow:0 0 18px rgba(232,163,61,.4);
  margin-bottom:8px;
}
.stat span{font-size:12px;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}

/* ---------- 9. 卡片：文章卡 ---------- */
.cards{gap:20px}
.acard{
  border:1px solid var(--hair);border-radius:16px;padding:26px 24px;
  background:linear-gradient(168deg,var(--paper-2) 0%,var(--paper-solid) 100%);
  position:relative;overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.acard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent 65%);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.acard::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(232,163,61,.11), transparent 62%);
}
.acard:hover{
  transform:translateY(-6px);border-color:var(--hair-gold);
  box-shadow:var(--shadow-gold);
}
.acard:hover::before{transform:scaleX(1)}
.acard:hover::after{opacity:1}
.acard .ic{font-size:24px;display:block;margin-bottom:14px;
  filter:drop-shadow(0 0 12px rgba(232,163,61,.4));
  transition:transform .45s var(--ease)}
.acard:hover .ic{transform:translateY(-3px) scale(1.12)}
.acard h3{
  font-family:var(--serif);font-size:17.5px;font-weight:700;
  margin-bottom:9px;color:var(--ink);letter-spacing:.01em;
}
.acard p{font-size:13.5px;line-height:1.85;color:var(--ink-3)}
.acard .tag{
  display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--hair-gold);border-radius:99px;
  padding:3px 10px;background:rgba(232,163,61,.06);
}

/* ---------- 10. 时间轴：博客编年 ---------- */
.timeline{position:relative;padding-left:8px}
.timeline::before{
  content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,var(--gold) 10%,var(--hair-gold) 70%,transparent);
}
.tl-item{
  position:relative;padding:0 0 34px 34px;
}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:0;top:8px;width:13px;height:13px;border-radius:50%;
  background:var(--paper-solid);border:2px solid var(--gold);
  box-shadow:0 0 0 4px rgba(232,163,61,.09), 0 0 16px rgba(232,163,61,.55);
  transition:box-shadow .4s, transform .4s var(--ease);
}
.tl-item:hover::before{
  transform:scale(1.25);
  box-shadow:0 0 0 6px rgba(232,163,61,.14), 0 0 26px rgba(232,163,61,.85);
}
.tl-time{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  color:var(--gold);text-transform:uppercase;margin-bottom:7px;
}
.tl-item h4{
  font-family:var(--serif);font-size:17px;font-weight:700;
  color:var(--ink);margin-bottom:7px;
}
.tl-item p{font-size:14px;line-height:1.9;color:var(--ink-3);max-width:66ch}

/* ---------- 11. 技能条 ---------- */
.bars{gap:20px}
.bar-row .top{margin-bottom:9px}
.bar-row .nm{font-size:13.5px;color:var(--ink-2);font-weight:600;letter-spacing:.02em}
.bar-row .vl{font-family:var(--mono);font-size:11.5px;color:var(--gold)}
.bar-bg{height:5px;border-radius:99px;background:rgba(255,255,255,.055);overflow:hidden}
.bar-fill{
  border-radius:99px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold) 55%,var(--gold-lt));
  box-shadow:0 0 14px rgba(232,163,61,.6);
}

/* ---------- 12. 链接列表 ---------- */
.links{display:grid;gap:12px}
.link-item,.litem{
  display:flex;align-items:center;gap:16px;padding:18px 22px;
  border:1px solid var(--hair);border-radius:14px;
  background:linear-gradient(100deg,var(--paper-2),var(--paper-solid));
  text-decoration:none;color:var(--ink);
  transition:transform .4s var(--ease), border-color .4s, padding-left .4s var(--ease);
}
.link-item:hover,.litem:hover{
  transform:translateX(6px);border-color:var(--hair-gold);padding-left:28px;
}

/* ---------- 13. 页脚 ---------- */
.footer{
  margin-top:80px;padding:52px 0 40px;border-top:1px solid var(--hair);
  position:relative;
}
.footer::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:140px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 16px rgba(232,163,61,.6);
}
.footer p{text-align:center;font-size:12.5px;color:var(--ink-3);letter-spacing:.08em}

/* ---------- 14. 滚动进场 ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- 15. 回到顶部 ---------- */
.to-top{
  border-radius:50%!important;border:1px solid var(--hair-gold);
  background:color-mix(in srgb,var(--paper-solid) 85%,transparent)!important;
  color:var(--gold)!important;backdrop-filter:blur(12px);
  box-shadow:0 8px 30px -10px rgba(232,163,61,.45);
  transition:transform .4s var(--ease), box-shadow .4s;
}
.to-top:hover{transform:translateY(-4px) scale(1.08);box-shadow:0 14px 40px -10px rgba(232,163,61,.7)}

/* ---------- 16. 登录横幅 ---------- */
.login-banner{
  border:1px solid var(--hair-gold);border-radius:18px;
  background:linear-gradient(120deg,rgba(232,163,61,.10),rgba(232,163,61,.02) 60%,transparent);
  position:relative;overflow:hidden;
}
.login-banner::after{
  content:"";position:absolute;top:-50%;right:-10%;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,163,61,.18),transparent 70%);
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.18);opacity:1}}

/* ---------- 17. 移动端微调 ---------- */
@media(max-width:640px){
  .page-head{padding:44px 0 30px;margin-bottom:38px}
  .block{margin-bottom:48px}
  .block-text p{font-size:15.5px;line-height:1.98}
  .acard{padding:22px 20px}
  .tl-item{padding-left:28px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   ▼▼▼ 个人博客化调整（2026-09-27）▼▼▼
   目标：去掉「营销落地页」感，改成「个人博客」感
   ============================================================ */

/* ---------- 1. 内容区收敛：减少金属光泽 ---------- */
.block-title{
  font-size:19px;font-weight:700;letter-spacing:.02em;
  color:#dfe2e9;margin-bottom:22px;gap:11px;
}
.block-title::before{
  width:3px;height:16px;
  background:linear-gradient(180deg,#ffd68a,#a66a12);
  box-shadow:none;
}
.block-text p{
  font-size:15.5px;line-height:2.15;color:#9aa1ae;
  margin-bottom:18px;max-width:68ch;
}
.page-head + #blocks .block-text:first-child p:first-of-type::first-letter{
  font-size:3em;color:#e8a33d;text-shadow:none;
}

/* ---------- 2. 卡片：去掉金属感 ---------- */
.acard{
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:22px 20px;
  background:rgba(255,255,255,.018);
  box-shadow:none;
  transition:border-color .35s ease, background .35s ease, transform .3s ease;
}
.acard::before{ display:none; }
.acard::after{ display:none; }
.acard:hover{
  border-color:rgba(232,163,61,.22);
  background:rgba(255,255,255,.032);
  transform:translateY(-2px);
  box-shadow:none;
}
.acard .ic{ filter:none; }
.acard:hover .ic{ transform:none; }
.acard h3{ font-size:16px;font-weight:650;color:#dfe2e9; }
.acard p{ font-size:13px;line-height:1.85;color:#7b8391; }
.acard .tag{
  font-size:10px;letter-spacing:.12em;
  color:rgba(232,163,61,.8);
  border-color:rgba(232,163,61,.18);
  background:transparent;
}

/* ---------- 3. 统计数字：收敛 ---------- */
.stat b{ color:#ffd68a;text-shadow:none;font-size:clamp(22px,4vw,30px); }
.stat::before{ display:none; }

/* ---------- 4. 时间轴：更细更安静 ---------- */
.timeline::before{
  background:linear-gradient(180deg,transparent,rgba(232,163,61,.38) 12%,rgba(232,163,61,.1) 78%,transparent);
}
.tl-item::before{ border-width:1.5px;box-shadow:0 0 0 3px rgba(232,163,61,.055); }
.tl-item:hover::before{ transform:scale(1.18);box-shadow:0 0 0 4px rgba(232,163,61,.09); }
.tl-item h4{ font-size:15.5px;font-weight:650;color:#dfe2e9; }
.tl-item p{ font-size:13.5px;line-height:1.95;color:#7b8391; }

/* ---------- 5. 文章流：朴素化 ---------- */
.post-item{ padding:20px 14px 20px 2px; }
.post-item:hover{
  padding-left:14px;
  background:linear-gradient(90deg,rgba(232,163,61,.035),transparent 65%);
}
.post-item::before{ width:1.5px; }
.pi-title{ font-size:16px;font-weight:650; }
.pi-desc{ font-size:13px;color:#7b8391; }
.pi-tag{ background:transparent; }

/* ---------- 6. 顶栏：安静的导航 ---------- */
.topbar{
  background:color-mix(in srgb, #0b0d11 72%, transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.brand::before{
  width:2px;height:28px;
  background:linear-gradient(180deg,rgba(255,214,138,.9),rgba(232,163,61,.2));
  box-shadow:none;
}
.brand-avatar{ box-shadow:none;border-color:rgba(232,163,61,.2); }
.brand:hover .brand-avatar{ transform:none;box-shadow:none; }
.brand-text b{ color:#e0e3ea;text-shadow:none;font-size:16px;letter-spacing:.04em; }
.tab{ color:#6b7280;font-weight:450; }
.tab.active{ color:#ffd68a;font-weight:600; }
.tab::after{ left:16px;right:16px;height:1.5px;background:rgba(232,163,61,.55); }

/* ---------- 7. 滚动进度条：更细 ---------- */
.read-bar{ height:1.5px;box-shadow:none;background:rgba(232,163,61,.5); }

/* ---------- 8. 入场动画：只淡入 + 上移 ---------- */
.reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .75s cubic-bezier(.22,.75,.28,1),
             transform .75s cubic-bezier(.22,.75,.28,1);
  will-change:opacity,transform;
}
.reveal.in{ opacity:1;transform:none; }
.cards .acard.reveal:nth-child(1){transition-delay:0s}
.cards .acard.reveal:nth-child(2){transition-delay:.05s}
.cards .acard.reveal:nth-child(3){transition-delay:.1s}
.cards .acard.reveal:nth-child(4){transition-delay:.15s}
.cards .acard.reveal:nth-child(n+5){transition-delay:.2s}
.timeline .tl-item.reveal:nth-child(1){transition-delay:0s}
.timeline .tl-item.reveal:nth-child(2){transition-delay:.06s}
.timeline .tl-item.reveal:nth-child(3){transition-delay:.12s}
.timeline .tl-item.reveal:nth-child(4){transition-delay:.18s}
.timeline .tl-item.reveal:nth-child(n+5){transition-delay:.24s}
.posts .post-item.reveal:nth-child(1){transition-delay:0s}
.posts .post-item.reveal:nth-child(2){transition-delay:.05s}
.posts .post-item.reveal:nth-child(3){transition-delay:.1s}
.posts .post-item.reveal:nth-child(4){transition-delay:.15s}
.posts .post-item.reveal:nth-child(5){transition-delay:.2s}
.posts .post-item.reveal:nth-child(n+6){transition-delay:.25s}

/* ---------- 9. 去掉区块间的装饰菱形 ---------- */
.block + .block::before{ display:none; }

/* ---------- 10. 页脚安静收尾 ---------- */
.footer{ border-top:1px solid rgba(255,255,255,.055); }
.footer::before{ display:none; }

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}


/* ========== garden.css ========== */
/* ============================================================
   烛心 · 数字花园首页（参考 firefly / 数字花园 布局）
   保留：金色主题 + 站点星空背景
   布局：Hero 双栏（左文右终端）→ 跑马灯 → 状态栏 → 卡片网格
   ============================================================ */

/* ================= 容器 ================= */
.gn{position:relative;z-index:2;width:100%;}
.gn-wrap{width:min(1180px,92vw);margin:0 auto;}

/* ================= Hero 双栏 ================= */
.gn-hero{
  padding:60px 0 64px;
  position:relative;
}
.gn-hero-grid{
  display:grid;
  grid-template-columns:1.15fr .95fr;
  gap:52px;
  align-items:center;
}
@media(max-width:880px){
  .gn-hero-grid{grid-template-columns:1fr;gap:36px}
  .gn-hero{padding:40px 0 44px}
}

/* 左侧 */
.gn-eyebrow{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.2em;
  color:#ffd68a;
  margin-bottom:22px;
  display:flex;align-items:center;gap:12px;
  text-transform:uppercase;
}
.gn-eyebrow::before{
  content:"";width:36px;height:1px;
  background:linear-gradient(90deg,rgba(232,163,61,.8),transparent);
  flex:0 0 auto;
}

.gn-title{
  font-size:clamp(40px,9vw,72px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.02em;
  margin-bottom:22px;
  color:#eef1f8;
}
.gn-title .line{display:block}
.gn-title .accent{
  /* 实色 + 光晕（不用 background-clip） */
  color:#ffd68a;
  text-shadow:
    0 0 1px rgba(255,255,255,.6),
    0 0 24px rgba(232,163,61,.45),
    0 0 60px rgba(232,163,61,.18);
}

/* 打字机 */
.gn-typed{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;
  color:#9aa1ae;
  margin-bottom:34px;
  min-height:1.9em;
  line-height:1.75;
}
.gn-typed .prompt{color:#5ef58f}
.gn-typed .caret{
  display:inline-block;width:7px;height:1.05em;
  margin-left:4px;vertical-align:-.16em;
  background:#e8a33d;
  box-shadow:0 0 10px rgba(232,163,61,.9);
  animation:gnBlink 1s steps(1) infinite;
}
@keyframes gnBlink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* 按钮 */
.gn-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:38px}
.gn-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 26px;border-radius:99px;
  font-size:14px;font-weight:600;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.035);
  color:#eef1f8;
  transition:border-color .3s ease, background .3s ease, transform .25s ease, box-shadow .3s ease;
}
.gn-btn:hover{
  border-color:rgba(232,163,61,.4);
  background:rgba(232,163,61,.08);
  transform:translateY(-2px);
}
.gn-btn .arrow{transition:transform .3s ease}
.gn-btn:hover .arrow{transform:translateX(3px)}
.gn-btn.primary{
  background:linear-gradient(135deg,#ffe9b8,#e8a33d 50%,#d18f1c);
  border-color:transparent;
  color:#241703;
  box-shadow:0 8px 26px -8px rgba(232,163,61,.55);
}
.gn-btn.primary:hover{
  box-shadow:0 14px 34px -10px rgba(232,163,61,.75);
}

/* 数据 */
.gn-stats{display:flex;gap:34px;flex-wrap:wrap}
.gn-stat .num{
  font-size:clamp(24px,4.6vw,34px);
  font-weight:800;
  line-height:1.15;
  color:#ffd68a;
  text-shadow:0 0 18px rgba(232,163,61,.35);
}
.gn-stat .num small{font-size:.5em;font-weight:700;margin-left:1px}
.gn-stat .label{
  font-size:11.5px;letter-spacing:.1em;
  color:#6b7280;margin-top:3px;
}

/* 右侧终端 */
.gn-term{
  border:1px solid rgba(232,163,61,.2);
  border-radius:14px;
  overflow:hidden;
  background:rgba(3,4,9,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 60px -26px rgba(0,0,0,.95);
}
.gn-term-bar{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.gn-term-bar i{width:9px;height:9px;border-radius:50%;display:block}
.gn-term-bar i:nth-child(1){background:#ff5f57}
.gn-term-bar i:nth-child(2){background:#febc2e}
.gn-term-bar i:nth-child(3){background:#28c840}
.gn-term-bar span{
  margin-left:7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:#6b7280;
}
.gn-term-body{
  padding:16px 18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;line-height:1.95;
  max-height:340px;overflow:hidden;
}
.gn-term-body .ln{display:flex;gap:14px;white-space:pre-wrap;word-break:break-word}
.gn-term-body .n{
  color:#3d4452;user-select:none;
  flex:0 0 auto;min-width:1.2em;text-align:right;
}
.gn-term-body .c{color:#5b6270}
.gn-term-body .k{color:#c792ea}
.gn-term-body .s{color:#ffd68a}
.gn-term-body .f{color:#82aaff}
.gn-term-body .p{color:#5ef58f}
.gn-term-body .o{color:#98a0ad}

/* 滚动提示 */
.gn-scroll{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:52px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px;letter-spacing:.3em;
  color:rgba(255,255,255,.18);
  text-transform:uppercase;
}
.gn-scroll .mouse{
  width:20px;height:32px;border-radius:10px;
  border:1px solid rgba(255,255,255,.2);
  position:relative;
}
.gn-scroll .mouse::after{
  content:"";position:absolute;left:50%;top:7px;
  width:2px;height:6px;border-radius:1px;
  background:rgba(232,163,61,.7);
  transform:translateX(-50%);
  animation:gnWheel 1.9s ease-in-out infinite;
}
@keyframes gnWheel{
  0%{opacity:0;transform:translate(-50%,-3px)}
  40%{opacity:1}
  100%{opacity:0;transform:translate(-50%,7px)}
}

/* ================= 跑马灯 ================= */
.gn-marquee{
  position:relative;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
  overflow:hidden;
  background:rgba(255,255,255,.012);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.gn-marquee-track{
  display:flex;gap:40px;
  width:max-content;
  animation:gnScroll 34s linear infinite;
}
.gn-marquee:hover .gn-marquee-track{animation-play-state:paused}
@keyframes gnScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.gn-marquee-item{
  display:flex;align-items:center;gap:40px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:.16em;
  color:#5b6270;text-transform:uppercase;
  white-space:nowrap;
}
.gn-marquee-item::after{
  content:"◆";font-size:7px;color:rgba(232,163,61,.45);
}

/* ================= 状态栏 ================= */
.gn-status{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  overflow:hidden;
  margin:34px 0 6px;
}
.gn-status-item{
  background:rgba(11,13,17,.72);
  padding:16px 14px;
  display:flex;align-items:center;gap:9px;
  font-size:12px;color:#9aa1ae;
}
.gn-status-item .d{
  width:6px;height:6px;border-radius:50%;
  background:#5ef58f;box-shadow:0 0 8px #5ef58f;
  flex:0 0 auto;
  animation:gnPulse 2.4s ease-in-out infinite;
}
@keyframes gnPulse{0%,100%{opacity:1}50%{opacity:.3}}
.gn-status-item b{color:#dfe2e9;font-weight:650}
@media(max-width:640px){
  .gn-status{grid-template-columns:repeat(2,1fr)}
  .gn-status-item{font-size:11px;padding:13px 11px}
}

/* ================= 区块标题 ================= */
.gn-sec{padding:56px 0 8px}
.gn-sec-head{margin-bottom:30px}
.gn-kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;
  color:#ffd68a;
  border:1px solid rgba(232,163,61,.22);
  border-radius:99px;
  padding:5px 13px;
  background:rgba(232,163,61,.055);
  margin-bottom:14px;
}
.gn-kicker::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:#e8a33d;box-shadow:0 0 9px #e8a33d;
  animation:gnPulse 1.8s ease-in-out infinite;
}
.gn-title2{
  font-size:clamp(23px,4.6vw,32px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.2;
  color:#eef1f8;
  margin-bottom:10px;
}
.gn-lead{
  font-size:14.5px;color:#9aa1ae;
  max-width:600px;line-height:1.85;
}

/* ================= 卡片网格 ================= */
.gn-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:15px;
}
.gn-card{
  display:block;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  padding:22px 20px;
  background:rgba(255,255,255,.025);
  text-decoration:none;color:inherit;
  position:relative;overflow:hidden;
  transition:border-color .35s ease, background .35s ease, transform .3s ease;
}
.gn-card:hover{
  border-color:rgba(232,163,61,.24);
  background:rgba(255,255,255,.042);
  transform:translateY(-3px);
}
.gn-card .ci{
  font-size:22px;display:block;margin-bottom:13px;
}
.gn-card h3{
  font-size:16px;font-weight:700;color:#eef1f8;
  margin-bottom:7px;letter-spacing:.01em;
}
.gn-card p{
  font-size:12.5px;line-height:1.85;color:#7b8391;
}
.gn-card .ct{
  display:inline-block;margin-top:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(232,163,61,.75);
  border:1px solid rgba(232,163,61,.18);
  border-radius:99px;
  padding:2.5px 9px;
}
.gn-card .ca{
  position:absolute;top:19px;right:19px;
  font-size:14px;color:#5b6270;
  opacity:0;transform:translateX(-6px);
  transition:opacity .35s ease, transform .35s ease, color .3s;
}
.gn-card:hover .ca{opacity:1;transform:translateX(0);color:#ffd68a}

/* ================= 联系卡 ================= */
.gn-contact{
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  padding:32px 28px;
  background:rgba(255,255,255,.025);
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  margin-top:8px;
}
.gn-contact-info h3{
  font-size:19px;font-weight:750;color:#eef1f8;margin-bottom:7px;
}
.gn-contact-info p{font-size:13px;color:#7b8391;line-height:1.8}
.gn-contact-acts{display:flex;gap:10px;flex-wrap:wrap}

/* ================= 入场动画 ================= */
.gn-anim{
  opacity:1;
  animation:gnUp .85s cubic-bezier(.22,.75,.28,1) forwards;
}
.gn-anim.d1{animation-delay:.05s}
.gn-anim.d2{animation-delay:.13s}
.gn-anim.d3{animation-delay:.21s}
.gn-anim.d4{animation-delay:.29s}
.gn-anim.d5{animation-delay:.37s}
@keyframes gnUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .gn-anim{animation:none!important;opacity:1!important;transform:none!important}
  .gn-marquee-track{animation:none}
  .gn-typed .caret,.gn-scroll .mouse::after,.gn-status-item .d,.gn-kicker::before{animation:none}
}

/* ================= 移动端 ================= */
@media(max-width:640px){
  .gn{width:100%}
  .gn-title{letter-spacing:-.01em}
  .gn-actions{margin-bottom:30px}
  .gn-btn{padding:11px 22px;font-size:13.5px}
  .gn-stats{gap:26px}
  .gn-term-body{font-size:11px;padding:14px;max-height:280px}
  .gn-grid{grid-template-columns:1fr;gap:13px}
  .gn-sec{padding:44px 0 6px}
  .gn-contact{padding:26px 22px}
}

/* ============================================================
   ▼▼▼ 中转站独立区块 + 收纳箱 + 手写体 ▼▼▼
   ============================================================ */

/* ---------- 中转站（首页单独拎出来） ---------- */
.gn-wc{
  position:relative;
  border:1px solid rgba(232,163,61,.22);
  border-radius:20px;
  padding:34px 32px 28px;
  background:
    radial-gradient(circle at 88% 12%, rgba(232,163,61,.1), transparent 46%),
    linear-gradient(180deg, rgba(232,163,61,.055), rgba(232,163,61,.012));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}
/* 顶部金线（呼吸） */
.gn-wc::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(255,214,138,.9),rgba(232,163,61,.4),transparent);
  background-size:200% 100%;
  animation:gnWcLine 4.5s linear infinite;
}
@keyframes gnWcLine{to{background-position:200% 0}}

.gn-wc-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:22px;flex-wrap:wrap;margin-bottom:18px;
}
.gn-wc-txt{min-width:0;flex:1}
.gn-wc-title{
  font-size:clamp(21px,4.2vw,28px);
  font-weight:800;letter-spacing:-.01em;
  color:#f2f3f7;margin:10px 0 8px;
}
.gn-wc-sub{
  font-size:13.5px;color:#8b939e;line-height:1.8;
}
.gn-wc-desc{
  font-size:13.5px;line-height:1.95;color:#9aa1ae;
  margin:14px 0 20px;max-width:70ch;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.055);
}
.gn-wc-quota{
  margin-top:6px;
  border-radius:14px;
  overflow:hidden;
}
/* 让 quota 区块在首页里更紧凑 */
.gn-wc-quota .block{margin:0!important}
.gn-wc-quota .block-title{display:none}
.gn-wc-quota > div, .gn-wc-quota .quota-wrap{
  border:none!important;background:transparent!important;
  padding:0!important;margin:0!important;
}

@media(max-width:640px){
  .gn-wc{padding:26px 22px 22px;border-radius:16px}
  .gn-wc-head{gap:16px}
}

/* ---------- 收纳箱 ---------- */
.gn-box{
  display:flex;flex-direction:column;gap:34px;
}
.gn-group-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:16px;
}
.gn-group-title{
  font-size:15px;font-weight:700;
  color:#dfe2e9;letter-spacing:.06em;
  flex:0 0 auto;
}
.gn-group-title::before{
  content:"";
  display:inline-block;
  width:3px;height:14px;border-radius:2px;
  margin-right:9px;vertical-align:-2px;
  background:linear-gradient(180deg,#ffd68a,#a66a12);
}
.gn-group-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,rgba(232,163,61,.22),transparent);
}
.gn-group-count{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:#5f6774;
  border:1px solid rgba(255,255,255,.07);
  border-radius:99px;
  padding:1px 9px;
  flex:0 0 auto;
}

/* ============================================================
   手写体（标题类）
   —— 优先系统自带手写/圆体，缺失时回退到常规字体
   ============================================================ */
/* 霞鹜文楷（Web 字体，按需分片加载）—— 真正的手写楷体 */
:root{
  --hand:
    "LXGW WenKai",          /* 霞鹜文楷 webfont */
    "LXGW WenKai Lite",
    "Xingkai SC",           /* 系统行楷兜底 */
    "STXingkai",
    "Kaiti SC", "STKaiti",
    "KaiTi", "楷体",
    -apple-system,
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
}

/* 大标题用行楷 */
.gn-title,
.gn-title2,
.gn-wc-title,
.block-title,
h2.title{
  font-family:var(--hand)!important;
  letter-spacing:.03em;
}

/* 站名手写感更强 */
.gn-title{
  letter-spacing:.04em;
}
.gn-title .accent{
  /* 手写体加金色光晕更好看 */
  text-shadow:
    0 0 1px rgba(255,255,255,.55),
    0 0 26px rgba(232,163,61,.5),
    0 0 64px rgba(232,163,61,.2);
}

/* 正文也换成楷体，博客感更强 */
.block-text p,
.gn-lead,
.gn-wc-desc{
  font-family:var(--hand)!important;
  letter-spacing:.02em;
}

/* 卡片标题用行楷 */
.gn-card h3,
.acard h3,
.tl-item h4{
  font-family:var(--hand)!important;
  letter-spacing:.03em;
}

/* 引言 */
.quote p{
  font-family:var(--hand)!important;
  letter-spacing:.06em;
}

/* 顶栏站名 */
.brand-text b{
  font-family:var(--hand)!important;
  letter-spacing:.08em;
  font-size:17px;
}

/* 区块标题的竖线在楷体下调整对齐 */
.block-title::before,
.gn-group-title::before{vertical-align:middle}

/* 抽屉导航也用手写体 */
.drawer-nav a{
  font-family:var(--hand);
  letter-spacing:.04em;
}

/* ============================================================
   ▼▼▼ 移除「回到顶部」按钮 ▼▼▼
   ============================================================ */
.to-top{ display:none !important; }

/* ============================================================
   ▼▼▼ 折叠收纳（可下拉按钮） ▼▼▼
   ============================================================ */
.gn-group{ position:relative; }

.gn-fold-btn{
  width:100%;
  display:flex;align-items:center;gap:12px;
  padding:17px 22px;
  border-radius:14px;
  border:1px solid rgba(232,163,61,.2);
  background:linear-gradient(180deg, rgba(232,163,61,.06), rgba(232,163,61,.015));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#dfe2e9;
  font-size:15px;font-weight:700;
  font-family:var(--hand);
  letter-spacing:.05em;
  text-align:left;
  cursor:pointer;
  transition:border-color .35s ease, background .35s ease, box-shadow .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.gn-fold-btn:hover{
  border-color:rgba(232,163,61,.42);
  background:linear-gradient(180deg, rgba(232,163,61,.1), rgba(232,163,61,.03));
  box-shadow:0 14px 36px -18px rgba(232,163,61,.7);
}
.gn-fold-btn:active{ transform:scale(.995); }

.gn-fold-btn .gfb-ic{
  font-size:18px;
  filter:drop-shadow(0 0 10px rgba(232,163,61,.4));
  transition:transform .4s cubic-bezier(.34,1.4,.64,1);
}
.gn-fold-btn.open .gfb-ic{ transform:rotate(-10deg) scale(1.1); }

.gn-fold-btn .gfb-tx{ flex:1; }

.gn-fold-btn .gfb-num{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;font-weight:500;
  color:rgba(232,163,61,.85);
  border:1px solid rgba(232,163,61,.22);
  border-radius:99px;
  padding:1.5px 9px;
  flex:0 0 auto;
}

.gn-fold-btn .gfb-ar{
  font-size:12px;color:#8b939e;
  transition:transform .38s cubic-bezier(.22,.75,.28,1);
  flex:0 0 auto;
}
.gn-fold-btn.open .gfb-ar{ transform:rotate(180deg); color:#ffd68a; }

/* 展开区 */
.gn-fold-body{
  overflow:hidden;
  max-height:0;
  transition:max-height .48s cubic-bezier(.22,.75,.28,1);
  padding-top:0;
}
.gn-fold-body[hidden]{ display:none; }

.gn-group.open .gn-fold-body{
  padding-top:18px;
}

/* ============================================================
   ▼▼▼ 手写体覆盖（更强，确保生效） ▼▼▼
   ============================================================ */
.gn-fold-btn,
.gn-card h3,
.gn-card p,
.gn-title,
.gn-title2,
.gn-wc-title,
.gn-wc-sub,
.gn-wc-desc,
.gn-lead,
.gn-group-title,
.block-title,
.block-text p,
.tl-item h4,
.tl-item p,
.pi-title,
.pi-desc,
.acard h3,
.acard p,
.brand-text b,
.drawer-nav a,
.quote p,
.stat span,
.tab{
  font-family:var(--hand)!important;
}

/* 正文/说明用常规字重，手写太粗细不均会难读 */
.gn-card p,
.gn-wc-desc,
.block-text p,
.tl-item p,
.pi-desc{
  font-weight:400;
  letter-spacing:.02em;
}

/* ============================================================
   ▼▼▼ 彻底移除登录横幅（防闪） ▼▼▼
   ============================================================ */
.login-banner{ display:none !important; }
/* 注意：顶栏「登录」按钮保留（进玩家中心的唯一入口） */

/* ============================================================
   ▼▼▼ 中转站额度（首页自渲染，紧凑版） ▼▼▼
   ============================================================ */
.gn-wc-quota{ margin-top:4px; }

/* 账户余额 */
.gq-bal{
  display:flex;align-items:baseline;gap:12px;
  padding:0 0 16px;
  border-bottom:1px solid rgba(255,255,255,.055);
  margin-bottom:16px;
}
.gq-bal-l{
  font-size:12px;color:#7b8391;letter-spacing:.06em;
}
.gq-bal-v{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(22px,4.4vw,30px);
  font-weight:800;color:#ffd68a;
  text-shadow:0 0 18px rgba(232,163,61,.35);
  line-height:1.1;
}

/* 两栏数据 */
.gq-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
@media(max-width:560px){
  .gq-grid{grid-template-columns:1fr;gap:14px}
}

.gq-sec-t{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.18em;
  color:rgba(232,163,61,.62);
  text-transform:uppercase;
  margin-bottom:10px;
}

.gq-cells{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.055);
  border-radius:10px;overflow:hidden;
}
.gq-cell{
  background:rgba(11,13,17,.6);
  padding:12px 8px;text-align:center;
}
.gq-cell b{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;font-weight:700;
  color:#e9ebef;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gq-cell span{
  display:block;
  font-size:10px;color:#6b7280;
  margin-top:3px;letter-spacing:.06em;
}

@media(max-width:640px){
  .gq-cell b{font-size:12.5px}
  .gq-cell{padding:10px 6px}
}

/* ============================================================
   ▼▼▼ 首页隐藏旧页头（CSS 层，避免 JS 加载前闪一下） ▼▼▼
   默认隐藏；切到其他页面时由 JS 恢复显示
   ============================================================ */
.page-head{ display:none; }
.page-head.show-head{ display:block; }


/* ============================================================
   ★ 首屏加载遮罩（同步首屏：把杂乱渲染挡在幕后，就绪后揭幕）
   ============================================================ */
#bootLoader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:#0b0d11;
  transition:opacity .5s cubic-bezier(.22,.75,.28,1), visibility .5s;
  will-change:opacity;
}
#bootLoader.bl-done{
  opacity:0; visibility:hidden; pointer-events:none;
}
/* 兜底：万一 JS 全挂，4 秒后自动消失（纯 CSS 动画） */
@keyframes blAutoHide{ to{ opacity:0; visibility:hidden; pointer-events:none } }
#bootLoader{ animation:blAutoHide .6s ease 4s forwards; }

.bl-inner{
  display:flex; flex-direction:column; align-items:center;
  gap:22px; transform:translateY(-6vh);
}
/* 烛火图标 + 呼吸 */
.bl-candle{
  font-size:44px; line-height:1;
  filter:drop-shadow(0 0 18px rgba(232,163,61,.55));
  animation:blBreath 2.4s ease-in-out infinite;
}
@keyframes blBreath{
  0%,100%{ transform:scale(1); opacity:.86 }
  50%    { transform:scale(1.07); opacity:1 }
}
/* 进度条 */
.bl-bar{
  width:168px; height:2px; border-radius:2px;
  background:rgba(232,163,61,.16);
  overflow:hidden; position:relative;
}
.bl-bar i{
  position:absolute; inset:0 auto 0 0;
  width:40%; border-radius:2px;
  background:linear-gradient(90deg, transparent, #e8a33d, #ffd68a, transparent);
  animation:blSlide 1.15s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes blSlide{
  0%  { transform:translateX(-110%) }
  100%{ transform:translateX(320%) }
}
/* 文字 */
.bl-txt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; letter-spacing:.22em;
  color:#7b8391; text-transform:uppercase;
}
.bl-txt b{ color:#ffd68a; font-weight:600 }

@media(prefers-reduced-motion:reduce){
  .bl-candle{ animation:none }
  .bl-bar i{ animation:none; width:100% }
}

/* 揭幕瞬间重播入场动画（保证动画在干净主线程上从头播一遍） */
.gn.gn-replay .gn-anim{
  animation:none;
}
.gn.gn-replay .gn-anim{
  animation:gnUp .7s cubic-bezier(.22,.75,.28,1) forwards;
}