/* ============================================================
   lucky学习笔记分享 - 前台样式(极简归档风)
   ============================================================ */
:root {
  --fg: #24292f;
  --muted: #6b7280;
  --faint: #9ca3af;
  --border: #e5e7eb;
  --bg: #fff;
  --code-bg: #f6f8fa;
  --accent: #0969da;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 页脚贴底:内容不足一屏时页脚固定在视口底部 */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent); }
.container { max-width: 720px; margin: 0 auto; padding: 0 20px; }
main.container { flex: 1 0 auto; width: 100%; padding-bottom: 48px; }

/* ---------- 头部 ---------- */
.site-header { border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.logo { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; display: block; }
.nav { display: flex; gap: 18px; font-size: 14px; color: var(--muted); }
.nav a.on { color: var(--fg); font-weight: 600; }

/* ---------- 简介 / 首页 hero(卡片式 + 弹性 3D 入场) ---------- */
.intro { margin: 26px 0 2px; color: var(--muted); font-size: 14px; }
.intro p { margin: 0; }

/* 弹性入场:轻微 3D 翻落 + 回弹(Q弹),纯 CSS,不依赖 JS */
@keyframes heroPop {
  0%   { opacity: 0; transform: perspective(700px) translateY(16px) rotateX(8deg) scale(.94); }
  55%  { opacity: 1; transform: perspective(700px) translateY(-4px) rotateX(-1.5deg) scale(1.03); }
  78%  { opacity: 1; transform: perspective(700px) translateY(1px) rotateX(.5deg) scale(.99); }
  100% { opacity: 1; transform: perspective(700px) translateY(0) rotateX(0deg) scale(1); }
}

/* 主卡片:站名 + 简介 */
.hero {
  margin: 34px 0 6px; padding: 26px 26px 24px;
  border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(150deg, #f7fbff 0%, #ffffff 55%, #fcfdff 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(23, 43, 77, .04),
    0 12px 30px -16px rgba(9, 105, 218, .14);
  transform-origin: 50% 20%;
  animation: heroPop .7s cubic-bezier(.34, 1.56, .4, 1) both;
}
.hero-title { font-size: 26px; line-height: 1.35; margin: 0 0 8px; letter-spacing: .3px; }
.hero-desc { margin: 0; color: var(--muted); font-size: 14px; }

/* 统计小卡片 */
.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 16px;
}
.hero-stats .stat {
  padding: 11px 14px; text-align: center; color: var(--muted); font-size: 13px;
  border: 1px solid var(--border); border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(23, 43, 77, .05),
    0 7px 14px -9px rgba(23, 43, 77, .18);
  animation: heroPop .6s cubic-bezier(.34, 1.75, .42, 1) both;
  transition: transform .42s cubic-bezier(.3, 1.9, .38, 1), box-shadow .42s ease, border-color .25s ease;
}
.hero-stats .stat:nth-child(1) { animation-delay: .16s; }
.hero-stats .stat:nth-child(2) { animation-delay: .26s; }
.hero-stats .stat:nth-child(3) { animation-delay: .36s; }
.hero-stats .stat b {
  display: inline-block; color: var(--fg); font-size: 17px; font-weight: 700; margin-right: 2px;
  font-variant-numeric: tabular-nums;
  transition: transform .45s cubic-bezier(.3, 2.3, .4, 1), color .2s;
}
.hero-stats .stat:hover {
  transform: perspective(650px) translateY(-4px) rotateX(5deg) scale(1.045);
  border-color: #cfe1fb;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 4px rgba(23, 43, 77, .05),
    0 16px 26px -12px rgba(9, 105, 218, .28);
}
.hero-stats .stat:hover b { transform: scale(1.16); color: var(--accent); }

.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 13px; border: 1px solid var(--border); border-radius: 99px;
  font-size: 13px; color: var(--muted); background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  box-shadow: 0 1px 2px rgba(23, 43, 77, .04), 0 4px 10px -6px rgba(23, 43, 77, .14);
  animation: heroPop .55s cubic-bezier(.34, 1.8, .42, 1) both;
  transition: transform .38s cubic-bezier(.3, 2, .4, 1), box-shadow .38s ease, border-color .2s, color .2s, background-color .2s;
}
.cat-chips .chip:nth-child(2) { animation-delay: .44s; }
.cat-chips .chip:nth-child(3) { animation-delay: .50s; }
.cat-chips .chip:nth-child(4) { animation-delay: .56s; }
.cat-chips .chip:nth-child(5) { animation-delay: .62s; }
.cat-chips .chip:nth-child(6) { animation-delay: .68s; }
.cat-chips .chip:nth-child(7) { animation-delay: .74s; }
.cat-chips .chip:nth-child(8) { animation-delay: .80s; }
.chip i { font-style: normal; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.chip:hover { transform: translateY(-3px) scale(1.08); border-color: var(--accent); color: var(--accent); }
.chip:active { transform: translateY(-1px) scale(.94); transition-duration: .12s; }
.chip.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 2px 5px -1px rgba(9, 105, 218, .38), 0 8px 16px -8px rgba(9, 105, 218, .45);
}
.chip.on:hover { color: #fff; }
.chip.on i { color: rgba(255, 255, 255, .82); }

@media (max-width: 560px) {
  .hero { padding: 20px 16px 18px; border-radius: 16px; }
  .hero-title { font-size: 22px; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-stats .stat:nth-child(3) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .hero-stats .stat, .hero-stats .stat b, .cat-chips .chip {
    animation: none !important; transition: none !important;
  }
}

/* ---------- 归档列表 ---------- */
.year { font-size: 18px; font-weight: 700; margin: 30px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.year .year-count { font-size: 12px; font-weight: 400; color: var(--faint); margin-left: 8px; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-item { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; }
.post-item .date { color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; flex: 0 0 auto; width: 80px; white-space: nowrap; }
.post-item .title { font-size: 15px; }
.post-item .cat { color: var(--faint); font-size: 12px; border: 1px solid var(--border); border-radius: 99px; padding: 0 8px; line-height: 20px; white-space: nowrap; }
.post-item .cat:hover { color: var(--accent); border-color: var(--accent); }
.empty { color: var(--muted); padding: 60px 0; text-align: center; }

/* 文章列表 Q 弹入场(纯 CSS,交错延迟;悬停时轻微上浮) */
@keyframes rowIn {
  0%   { opacity: 0; transform: translateY(10px) scale(.984); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.year { animation: rowIn .5s cubic-bezier(.34, 1.56, .5, 1) both; }
.post-item {
  animation: rowIn .5s cubic-bezier(.34, 1.56, .5, 1) both;
  transform-origin: 0 60%;
  transition: transform .3s cubic-bezier(.3, 1.6, .4, 1);
}
.post-item:hover { transform: translateX(3px); }
h2.year:nth-of-type(1) { animation-delay: .10s; }
h2.year:nth-of-type(2) { animation-delay: .14s; }
h2.year:nth-of-type(3) { animation-delay: .18s; }
.post-item:nth-child(1)  { animation-delay: .16s; }
.post-item:nth-child(2)  { animation-delay: .21s; }
.post-item:nth-child(3)  { animation-delay: .26s; }
.post-item:nth-child(4)  { animation-delay: .31s; }
.post-item:nth-child(5)  { animation-delay: .36s; }
.post-item:nth-child(6)  { animation-delay: .41s; }
.post-item:nth-child(7)  { animation-delay: .46s; }
.post-item:nth-child(8)  { animation-delay: .51s; }
.post-item:nth-child(9)  { animation-delay: .56s; }
.post-item:nth-child(10) { animation-delay: .61s; }
.post-item:nth-child(11) { animation-delay: .66s; }
.post-item:nth-child(12) { animation-delay: .71s; }
.post-item:nth-child(n+13) { animation-delay: .76s; }

/* ---------- 文章页 ---------- */
.post-header { margin: 36px 0 0; }
.post-header h1 { font-size: 26px; line-height: 1.4; margin: 0 0 10px; }
.post-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  color: var(--muted); font-size: 13px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 26px;
  align-items: center;
}
.post-meta .tag { color: var(--accent); background: #ddf4ff; border-radius: 99px; padding: 0 10px; line-height: 22px; font-size: 12px; }
.post-meta .cat { color: var(--muted); border: 1px solid var(--border); border-radius: 99px; padding: 0 10px; line-height: 20px; font-size: 12px; }
.post-meta .cat:hover { color: var(--accent); border-color: var(--accent); }
.post-meta .badge-draft { color: #92400e; background: #fef3c7; border-radius: 99px; padding: 0 10px; line-height: 22px; font-size: 12px; }

.article { word-break: break-word; }
.article h1, .article h2, .article h3, .article h4 { line-height: 1.4; margin: 30px 0 12px; font-weight: 700; }
.article h2 { font-size: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.article h3 { font-size: 17px; }
.article h4 { font-size: 15px; }
.article p { margin: 14px 0; }
.article ul, .article ol { margin: 12px 0; padding-left: 26px; }
.article li { margin: 4px 0; }
.article img { max-width: 100%; height: auto; border-radius: 8px; }
.article blockquote {
  margin: 16px 0; padding: 4px 16px;
  color: var(--muted); border-left: 3px solid var(--border);
  background: #fafafa; border-radius: 0 6px 6px 0;
}
.article blockquote p { margin: 8px 0; }
.article code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, Menlo, monospace; }
.article pre {
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; overflow: auto; font-size: 13px; line-height: 1.6;
}
.article pre code { background: none; border: none; padding: 0; font-size: inherit; }
.article :not(pre) > code {
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; font-size: .88em;
}
.article table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; display: block; overflow-x: auto; }
.article th, .article td { border: 1px solid var(--border); padding: 7px 12px; text-align: left; }
.article th { background: #f9fafb; font-weight: 600; }
.article hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }
.article a { color: var(--accent); }
.article del { color: var(--faint); }

.post-nav {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 14px;
}
.post-nav a { color: var(--muted); }
.post-nav a:hover { color: var(--accent); }
.backlink { display: inline-block; margin: 30px 0 0; color: var(--muted); font-size: 14px; }
.backlink:hover { color: var(--accent); }

/* ---------- 关于页(玻璃渐变卡片 + 回弹入场) ---------- */
.about { margin-top: 36px; }
.about .avatar { width: 72px; height: 72px; border-radius: 18px; display: block; object-fit: contain; }
.about h1 { font-size: 22px; margin: 16px 0 6px; }
.about .muted { color: var(--muted); font-size: 14px; }

/* Hero 卡片:与首页 hero 同款的玻璃渐变 + Q 弹入场 */
.about-hero {
  text-align: center; padding: 34px 26px 30px; margin: 8px 0 26px;
  border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(150deg, #f7fbff 0%, #ffffff 55%, #fcfdff 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(23, 43, 77, .04),
    0 12px 30px -16px rgba(9, 105, 218, .14);
  position: relative; overflow: hidden;
  animation: heroPop .65s cubic-bezier(.34, 1.56, .64, 1) both;
}
/* 角落光晕装饰 */
.about-hero::before, .about-hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.about-hero::before {
  width: 300px; height: 300px; top: -170px; left: -90px;
  background: radial-gradient(circle, rgba(9, 105, 218, .10), transparent 70%);
}
.about-hero::after {
  width: 260px; height: 260px; bottom: -150px; right: -70px;
  background: radial-gradient(circle, rgba(124, 58, 237, .08), transparent 70%);
}
.about-hero .avatar {
  margin: 0 auto; width: 92px; height: 92px; border-radius: 24px;
  border: 3px solid #fff; outline: 1px solid var(--border);
  box-shadow: 0 10px 24px -10px rgba(9, 105, 218, .35);
  animation: aboutBounce 3.2s ease-in-out 1s infinite;
}
@keyframes aboutBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.about-hero h1 {
  font-size: 26px; margin: 18px 0 8px; letter-spacing: .5px;
  background: linear-gradient(120deg, #0969da, #7c3aed 60%, #0969da);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.about-hero .muted { max-width: 520px; margin: 0 auto; }

/* 内容卡片:渐变底 + 悬浮上浮 + 逐张入场 */
.about-card {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 22px; margin: 20px 0; font-size: 14px;
  background: linear-gradient(160deg, #fdfeff 0%, #ffffff 60%, #fbfcff 100%);
  box-shadow: 0 1px 2px rgba(23, 43, 77, .03), 0 8px 22px -14px rgba(9, 105, 218, .10);
  position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, border-color .25s;
  animation: aboutFadeUp .5s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: .12s;
}
.about-card:nth-of-type(2) { animation-delay: .2s; }
.about-card:nth-of-type(3) { animation-delay: .28s; }
.about-card:nth-of-type(4) { animation-delay: .36s; }
.about-card:nth-of-type(5) { animation-delay: .44s; }
.about-card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #0969da, #7c3aed);
  opacity: .55;
}
.about-card:hover {
  transform: translateY(-3px);
  border-color: rgba(9, 105, 218, .35);
  box-shadow: 0 2px 4px rgba(23, 43, 77, .04), 0 16px 34px -16px rgba(9, 105, 218, .22);
}
.about-card h2 {
  font-size: 15px; margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px dashed var(--border); position: relative;
}
.about-card p { margin: 8px 0; line-height: 1.85; }
.about-card p:last-child { margin-bottom: 0; }
.about-card strong { color: #0969da; }
.about-card code {
  background: var(--code-bg); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px; font-size: 13px;
}
.about-icp p { color: var(--muted); }
@keyframes aboutFadeUp {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero, .about-card, .about-hero .avatar { animation: none; }
}
@media (max-width: 640px) {
  .about { margin-top: 24px; }
  .about-hero { padding: 26px 18px 24px; border-radius: 14px; }
  .about-hero h1 { font-size: 22px; }
  .about-hero .avatar { width: 78px; height: 78px; border-radius: 20px; }
  .about-card { padding: 16px 16px 14px; border-radius: 12px; }
}

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  margin-top: auto;
  padding: 20px 0 34px;
  text-align: center; color: var(--muted); font-size: 13px;
}
.site-footer p { margin: 4px 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }
.site-footer .beian { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
.site-footer .sep { margin: 0 8px; color: var(--border); }

/* ---------- 移动端 ---------- */
@media (max-width: 560px) {
  .post-item { flex-wrap: wrap; gap: 4px 10px; }
  .post-item .date { width: auto; }
  .post-header h1 { font-size: 22px; }
  .article table { font-size: 13px; }
  .site-footer { font-size: 12px; padding: 16px 0 28px; }
  .site-footer .sep { margin: 0 6px; }
  .site-footer .beian a { word-break: break-all; padding: 1px 0; }
}

/* ============================================================
   Markdown 全语法元素(目录 / 任务列表 / 脚注 / 高亮 / 上下标 / kbd)
   ============================================================ */
.article .md-toc {
  background: #f9fafb; border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 16px; margin: 18px 0; font-size: 14px;
}
.article .md-toc-title { font-weight: 700; margin-bottom: 6px; }
.article .md-toc ul { margin: 0; padding-left: 0; list-style: none; }
.article .md-toc li { margin: 3px 0; }
.article .md-toc a { color: var(--accent); }
.article ul.md-task-list { padding-left: 22px; list-style: none; }
.article ul.md-task-list li, .article li.md-task-item { list-style: none; }
.article .md-task { margin-right: 6px; vertical-align: -1px; }
.article .md-footnotes {
  margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--muted);
}
.article .md-fn-title { font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.article .md-footnotes ol { padding-left: 22px; }
.article .md-fn-ref a { text-decoration: none; font-size: .82em; }
.article .md-fn-back { text-decoration: none; color: var(--accent); }
.article mark { background: #fff3ad; border-radius: 3px; padding: 0 2px; }
.article kbd {
  background: var(--code-bg); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 5px; font-size: .85em;
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
}
.article .md-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.article sup, .article sub { font-size: .78em; }

/* ============================================================
   弹幕背景板(背景层,浮于页面内容之后)
   ============================================================ */
/* 让页面主体浮在弹幕之上 */
.site-header, main.container, .site-footer { position: relative; z-index: 1; }

.dm-layer {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;                 /* 整层不挡点击,仅单条弹幕可点 */
  contain: strict;
}
@keyframes dmFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100vw - 105%)); }
}
.dm-item {
  position: absolute; left: 100%; top: 0;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; will-change: transform;
  padding: 1px 9px; border-radius: 99px;
  font-size: 15px; line-height: 1.35; color: var(--fg);
  background: rgba(255, 255, 255, .58);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  opacity: var(--dm-op, .75);
  pointer-events: auto; cursor: pointer;
  transition: opacity .2s ease, color .2s ease;
}
.dm-item:hover { opacity: 1; color: var(--accent); }
.dm-item .dm-txt { display: inline-block; }
.dm-item .dm-img {                       /* 图片与文字等高,不影响观感 */
  height: 1.1em; width: auto; max-width: 8em; object-fit: contain;
  border-radius: 3px; display: block;
}
/* 渐变文字(用户自选渐变时的效果) */
.dm-item .dm-txt.dm-grad {
  background-clip: text; -webkit-background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* 毛玻璃弹幕:磨砂底 + 模糊 */
.dm-item.dm-frost {
  background: rgba(255, 255, 255, .40);
  border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(7px) saturate(1.5);
  backdrop-filter: blur(7px) saturate(1.5);
  box-shadow: 0 2px 10px -4px rgba(23, 43, 77, .35);
  text-shadow: none;
}

/* 归档首页:弹幕仍绘在内容之后,但让内容留白处的点击穿透到弹幕层,
   这样在页面空旷处也能点到弹幕查看发送人(链接/分类块仍可正常点击) */
body.dm-bg-click main.container { pointer-events: none; }
body.dm-bg-click main.container > * { pointer-events: auto; }
body.dm-bg-click main.container > section.hero { pointer-events: none; }   /* hero 无链接,整块放行 */
body.dm-bg-click main.container .hero-stats .stat,
body.dm-bg-click main.container .cat-chips .chip { pointer-events: auto; } /* 统计卡与分类块保持可点 */

/* 发送弹幕按钮 */
.dm-send-btn {
  position: fixed; right: 22px; bottom: 24px; z-index: 7;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border: 0; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #2f8bff 0%, #0969da 100%);
  box-shadow: 0 2px 5px rgba(9, 105, 218, .32), 0 12px 26px -10px rgba(9, 105, 218, .62);
  transition: transform .34s cubic-bezier(.3, 1.9, .4, 1), box-shadow .3s ease;
}
.dm-send-btn svg { width: 17px; height: 17px; fill: currentColor; }
.dm-send-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 3px 7px rgba(9,105,218,.34), 0 18px 30px -12px rgba(9,105,218,.7); }
.dm-send-btn:active { transform: translateY(-1px) scale(.95); transition-duration: .12s; }

/* 点击弹幕显示发送人 */
.dm-tip {
  position: fixed; z-index: 30; left: 0; top: 0;
  padding: 6px 12px; border-radius: 9px;
  background: rgba(17, 24, 39, .93); color: #fff;
  font-size: 12.5px; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .65);
  pointer-events: none; opacity: 0; transform: translateY(5px);
  transition: opacity .2s ease, transform .2s ease;
}
.dm-tip.on { opacity: 1; transform: translateY(0); }

/* 发送弹幕弹窗 */
.dm-dialog {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(15, 23, 42, .46);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.dm-dialog[hidden] { display: none; }
.dm-card {
  width: 100%; max-width: 440px; max-height: 92vh; overflow: auto;
  background: #fff; border-radius: 16px; padding: 22px 22px 18px;
  box-shadow: 0 28px 64px -22px rgba(15, 23, 42, .55);
  animation: dmCardIn .42s cubic-bezier(.34, 1.56, .5, 1) both;
}
@keyframes dmCardIn { 0% { opacity: 0; transform: translateY(14px) scale(.95); } 100% { opacity: 1; transform: none; } }
.dm-card h3 { margin: 0 0 4px; font-size: 17px; }
.dm-hint { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; }
.dm-msg { margin: 0 0 12px; font-size: 13px; min-height: 1.1em; }
.dm-msg.err { color: #d1242f; }
.dm-msg.ok { color: #1a7f37; }
.dm-row { display: flex; gap: 12px; }
.dm-row .dm-field { flex: 1 1 0; min-width: 0; }
.dm-field { margin-bottom: 12px; }
.dm-field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.dm-field input[type=text], .dm-field input[type=password], .dm-field textarea {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--fg);
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.dm-field textarea { min-height: 74px; resize: vertical; }
.dm-field input:focus, .dm-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(9, 105, 218, .14); }
.dm-file-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.dm-file-row input[type=file] { font-size: 12px; max-width: 100%; }

/* 颜色色板 + 效果预览 */
.dm-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dm-sw {
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--muted);
  transition: transform .22s cubic-bezier(.3, 1.8, .4, 1), box-shadow .22s ease;
}
.dm-sw:first-child { width: auto; padding: 0 11px; border-radius: 99px; }
.dm-sw:hover { transform: translateY(-2px); }
.dm-sw.on { transform: scale(1.14); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.dm-swatches input[type=color] {
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; cursor: pointer;
}
.dm-preview {
  margin-top: 10px; padding: 11px 12px; text-align: center;
  border: 1px dashed var(--border); border-radius: 10px;
  background: linear-gradient(160deg, #fbfdff, #f1f7ff);
}
.dm-pv { font-size: 15px; font-weight: 600; color: var(--fg); display: inline-block; padding: 0 8px; }
.dm-pv.dm-frost {
  background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 99px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dm-pv.dm-grad { background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.dm-check { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--fg); font-size: 13.5px; }
.dm-check input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }
.dm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.dm-btn {
  padding: 9px 18px; font: inherit; font-size: 14px; cursor: pointer;
  background: #fff; color: var(--fg); border: 1px solid var(--border); border-radius: 10px;
  transition: transform .25s cubic-bezier(.3, 1.8, .4, 1), background .2s, border-color .2s;
}
.dm-btn:hover { background: #f6f8fa; transform: translateY(-1px); }
.dm-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.dm-btn.primary:hover { background: #0860c2; }
.dm-btn:disabled { opacity: .55; cursor: default; transform: none; }

/* ============================================================
   弹幕纯享版(烟花背景 + 全屏弹幕)
   ============================================================ */
#dm-fw { position: fixed; inset: 0; z-index: 4; display: none; pointer-events: none; }
body.dm-party {
  background:
    radial-gradient(1100px 700px at 72% -12%, rgba(64, 96, 255, .20), transparent 62%),
    radial-gradient(900px 620px at 12% 112%, rgba(168, 85, 247, .16), transparent 60%),
    radial-gradient(760px 520px at 50% 52%, rgba(14, 165, 233, .07), transparent 70%),
    #05060b;
  overflow: hidden;
}
body.dm-party main.container, body.dm-party .site-footer { display: none; }
/* 纯享版:只留一枚悬浮 logo 作为退出入口(点它再滑回即可退出) */
body.dm-party .site-header {
  display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 12;
  border-bottom: 0; background: transparent;
}
body.dm-party .site-header .header-inner { height: 52px; }
body.dm-party .site-header .site-name, body.dm-party .site-header .nav { display: none; }
body.dm-party .site-header .logo { filter: drop-shadow(0 0 10px rgba(130, 180, 255, .75)); }
body.dm-party #dm-fw { display: block; }

/* 纯享版装饰:入场标题 + 底部提示 */
.dm-party-badge {
  position: fixed; top: 64px; left: 50%; z-index: 12;
  padding: 7px 20px; border-radius: 99px; white-space: nowrap;
  color: #eaf3ff; font-size: 14px; letter-spacing: 5px; text-indent: 5px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(160, 200, 255, .28);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-shadow: 0 0 18px rgba(140, 190, 255, .85);
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity .9s ease, transform .9s ease;
}
.dm-party-badge.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.dm-party-hint {
  position: fixed; bottom: 26px; left: 0; right: 0; z-index: 12;
  text-align: center; color: rgba(206, 226, 255, .5);
  font-size: 12.5px; letter-spacing: 1px;
  opacity: 0; pointer-events: none; transition: opacity 1s ease;
}
body.dm-party .dm-party-hint { opacity: 1; }
/* 提示条整体不拦截点击(方便点屏幕放烟花),仅声音开关可交互 */
.dm-party-hint #dm-party-sound { pointer-events: auto; }
body.dm-party .dm-layer { z-index: 10; }
body.dm-party .dm-send-btn { display: none; }
body.dm-party .dm-item {
  font-size: 24px; padding: 2px 12px; color: #fff;
  background: rgba(255, 255, 255, .1); opacity: var(--dm-op, .95);
  text-shadow: 0 0 16px rgba(130, 180, 255, .6), 0 2px 6px rgba(0, 0, 0, .55);
}
body.dm-party .dm-item:hover { color: #a8d4ff; }
body.dm-party .dm-item.dm-frost {
  background: rgba(255, 255, 255, .13); border-color: rgba(190, 220, 255, .35);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
body.dm-party .dm-item .dm-txt.dm-grad { text-shadow: none; }

/* ============================================================
   彩蛋:logo 滑动条(毛边 + SVG 冲刺动画)
   ============================================================ */
.dm-egg {
  position: fixed; left: 50%; top: 50%; z-index: 60;
  transform: translate(-50%, -50%) scale(.88);
  opacity: 0; visibility: hidden;
  transition: opacity .32s ease, transform .46s cubic-bezier(.34, 1.56, .5, 1), visibility .32s;
}
.dm-egg.on { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.dm-egg-inner {
  padding: 22px 26px 18px; border-radius: 20px;
  background: linear-gradient(160deg, #fbfdff 0%, #eef5ff 100%);
  box-shadow: 0 26px 60px -22px rgba(9, 105, 218, .55), 0 2px 6px rgba(9, 105, 218, .16);
  filter: url(#dmrough);              /* 毛边(见页面内 SVG 滤镜) */
}
.dm-egg-title { margin: 0 0 14px; text-align: center; font-size: 13px; color: var(--muted); letter-spacing: .4px; }
.dm-track {
  position: relative; width: 234px; height: 54px; border-radius: 99px;
  background: #e6effb; box-shadow: inset 0 2px 7px rgba(9, 105, 218, .18);
  overflow: hidden;
}
.dm-track-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, #8ec5ff 0%, #0969da 100%);
  opacity: .85; transition: width .12s linear;
}
.dm-track-hint {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; color: #5b76a0; letter-spacing: .5px; user-select: none;
}
.dm-knob {
  position: absolute; left: 4px; top: 4px; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none;
  background: linear-gradient(180deg, #ffffff 0%, #e9f2ff 100%);
  box-shadow: 0 5px 14px rgba(9, 105, 218, .36), inset 0 0 0 1px rgba(9, 105, 218, .22);
  transition: box-shadow .3s ease;
}
.dm-knob:active { cursor: grabbing; }
.dm-knob:focus { outline: none; box-shadow: 0 0 0 3px rgba(9, 105, 218, .28), 0 5px 14px rgba(9, 105, 218, .36); }
.dm-sprint { display: block; overflow: visible; animation: spBob .62s ease-in-out infinite; }
.dm-sprint circle { fill: var(--accent); }
.dm-sprint path { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dm-sprint g { transform-box: view-box; }
.dm-sprint .sp-legA { transform-origin: 17.5px 16px; animation: spLegA .62s ease-in-out infinite; }
.dm-sprint .sp-legB { transform-origin: 17.5px 16px; animation: spLegB .62s ease-in-out infinite; }
.dm-sprint .sp-armA { transform-origin: 21.5px 9.5px; animation: spLegB .62s ease-in-out infinite; }
.dm-sprint .sp-armB { transform-origin: 21.5px 9.5px; animation: spLegA .62s ease-in-out infinite; }
.dm-egg.dragging .dm-sprint, .dm-egg.dragging .dm-sprint g { animation-duration: .3s; }
@keyframes spLegA { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(-27deg); } }
@keyframes spLegB { 0%, 100% { transform: rotate(-27deg); } 50% { transform: rotate(26deg); } }
@keyframes spBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }

@media (max-width: 560px) {
  .dm-item { font-size: 13px; }
  .dm-send-btn { right: 14px; bottom: 16px; padding: 9px 15px; font-size: 13px; }
  body.dm-party .dm-item { font-size: 19px; }
  .dm-row { flex-direction: column; gap: 0; }
  .dm-party-badge { top: 58px; font-size: 12.5px; letter-spacing: 3px; text-indent: 3px; padding: 6px 15px; }
  .dm-party-hint { bottom: 18px; font-size: 11.5px; padding: 0 14px; }
  .dm-swatches { gap: 7px; }
  .dm-sw { width: 24px; height: 24px; }
  .dm-pv { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .year, .post-item, .dm-card { animation: none !important; }
  .dm-item { transition: none !important; }
  .dm-send-btn:hover, .dm-send-btn:active, .post-item:hover { transform: none; }
}