/* =====================================================================
   Juzi 主题 · 文章详情页 Hero 头图 + 作者栏关注按钮
   1:1 复刻 dmyblog.cn（云语主题）文章顶部结构，颜色全部走 Juzi 变量体系
   （--theme / --main / --routine / --minor / --classC / --background）
   ===================================================================== */

/* ---------- Hero 容器 ---------- */
.art-hero { margin-bottom: 15px; }
.art-cover {
  position: relative;
  width: 100%;
  height: clamp(280px, 44vw, 460px);
  overflow: hidden;
  border-radius: var(--radius-wrap, 10px);
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  box-shadow: 0 18px 40px -22px rgba(99, 179, 237, .38);
  animation: jzArtCoverReveal .9s ease backwards;
}
@keyframes jzArtCoverReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.art-cover-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 6s ease;
}
.art-hero:hover .art-cover-img { transform: scale(1.06); }

.art-cover::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15,23,42,0) 24%, rgba(15,23,42,.3) 60%, rgba(15,23,42,.78));
}

/* ---------- 装饰光斑 ---------- */
.art-cover-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transition: transform 1.2s ease;
}
.art-cover-orb--1 {
  top: -50px; right: -40px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(99,179,237,.28), transparent 70%);
  filter: blur(32px);
}
.art-cover-orb--2 {
  bottom: -30px; left: 12%; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(251,182,206,.24), transparent 70%);
  filter: blur(28px);
}
.art-hero:hover .art-cover-orb--1 { transform: translate(-12px, 10px); }
.art-hero:hover .art-cover-orb--2 { transform: translate(10px, -8px); }

/* ---------- 面包屑胶囊（高度收紧约一半） ---------- */
.art-crumb {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 3;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  max-width: calc(100% - 2rem);
  padding: 4px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 8px 20px rgba(30,41,59,.18);
  color: var(--routine, #606266);
  font-size: .76rem;
  animation: jzArtFadeIn .6s ease .4s backwards;
}
@keyframes jzArtFadeIn { from { opacity: 0; } to { opacity: 1; } }
.art-crumb a { color: inherit; text-decoration: none; }
.art-crumb a:hover { color: var(--theme, #409eff); }
.art-crumb i { font-size: .74rem; opacity: .55; }
.art-crumb-current {
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--main, #303133);
  font-weight: 600;
}

/* ---------- 标题文字层 ---------- */
.art-cover-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 2rem 2.2rem 2.2rem;
  animation: jzArtRise .8s ease .22s backwards;
}
@keyframes jzArtRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.art-cover-text .a-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 4px 14px rgba(30,41,59,.18);
  color: rgb(var(--tag-rgb, 99, 179, 237));
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .3s var(--nav-ease, ease), box-shadow .3s var(--nav-ease, ease), background .3s var(--nav-ease, ease);
}
.art-cover-text a.a-tag:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(30,41,59,.24);
}
@media (hover: hover) {
  .art-cover-text a.a-tag:hover {
    --jelly-lift: -2px;
    --jelly-amp: 1.3;
    animation: site-jelly .6s ease-in-out;
    transform-origin: 50% 100%;
  }
}
@keyframes site-jelly {
  0% { transform: translateY(var(--jelly-lift, 0)) scale(1); }
  25% { transform: translateY(calc(var(--jelly-lift, 0) * .4)) scale(1.06, .94); }
  50% { transform: translateY(calc(var(--jelly-lift, 0) * -.2)) scale(.96, 1.04); }
  75% { transform: translateY(calc(var(--jelly-lift, 0) * .1)) scale(1.02, .98); }
  100% { transform: translateY(var(--jelly-lift, 0)) scale(1); }
}

.art-title {
  margin: 0;
  color: #fff !important;
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

/* ---------- 作者栏关注 / 私信按钮 ---------- */
.art-author-inline-follow,
.art-author-inline-msg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .25s ease;
}
.art-author-inline-follow {
  background: rgba(243,104,160,.10);
  color: #e0508a;
}
.art-author-inline-follow:hover {
  background: rgba(243,104,160,.18);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(243,104,160,.2);
}
.art-author-inline-follow.is-followed {
  background: rgba(64,158,255,.12);
  color: var(--theme, #409eff);
}
.art-author-inline-follow.is-followed:hover {
  background: rgba(64,158,255,.2);
  box-shadow: 0 6px 16px rgba(64,158,255,.2);
}
.art-author-inline-follow i { font-size: .95rem; }
.art-author-inline-msg {
  background: rgba(99,179,237,.12);
  color: var(--theme, #409eff);
}
.art-author-inline-msg:hover {
  background: rgba(99,179,237,.2);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99,179,237,.2);
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .art-cover { height: clamp(200px, 55vw, 300px); }
  .art-cover::after { background: linear-gradient(180deg, rgba(15,23,42,0) 10%, rgba(15,23,42,.42) 52%, rgba(15,23,42,.85)); }
  .art-cover-orb { display: none; }
  .art-cover-text { padding: 1.2rem 1.2rem 1.4rem; }
  .art-title { font-size: clamp(1.15rem, 4vw, 1.6rem) !important; }
  .art-crumb { top: .8rem; left: .8rem; max-width: calc(100% - 1.6rem); padding: 6px 14px; }
  .art-crumb-current { max-width: 18ch; }
}

/* ---------- 深色模式 ---------- */
html[data-night='night'] .art-crumb {
  border-color: rgba(255,255,255,.12);
  background: rgba(35,35,35,.66);
  color: var(--routine, #888);
}
html[data-night='night'] .art-crumb-current { color: var(--main, #999); }
html[data-night='night'] .art-cover-text .a-tag {
  background: rgba(41,41,41,.85);
  color: var(--theme, #54b5db);
}
html[data-night='night'] .art-cover-text a.a-tag:hover { background: #292929; }

/* ---------- 轻提示 ---------- */
.jz-follow-toast {
  position: fixed;
  left: 50%; top: 22%;
  z-index: 99999;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--theme, #409eff);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(64,158,255,.35);
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity .26s ease, transform .26s ease;
  pointer-events: none;
  max-width: 80vw;
  text-align: center;
}
.jz-follow-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.jz-follow-toast.is-err { background: #f56c6c; box-shadow: 0 12px 30px rgba(245,108,108,.35); }

@media (prefers-reduced-motion: reduce) {
  .art-cover, .art-cover-img, .art-cover-orb, .art-crumb, .art-cover-text { animation: none !important; transition: none !important; }
}

/* =====================================================================
   作者栏 art-author-inline · 1:1 复刻 dmyblog.cn 文章页内联作者栏
   ===================================================================== */
.art-author-inline {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1.4rem;
  animation: artFadeIn .5s var(--nav-ease, ease) .4s backwards;
}
.art-author-inline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  /* 不再依赖 mask：用平铺渐变画虚线，保证全宽完整显示不被截断 */
  background-image: linear-gradient(90deg, rgba(99,179,237,.52) 0 10px, transparent 10px 18px);
  background-size: 18px 2px;
  background-repeat: repeat-x;
  -webkit-mask: none;
  mask: none;
}
.art-author-inline-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #a1c4fd, #fbc2eb);
  box-shadow: 0 2px 8px rgba(99,179,237,.25);
}
.art-author-inline-avatar img { width: 100%; height: 100%; object-fit: cover; }
.art-author-inline-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.art-author-inline-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-main, #303133);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.5;
}
.art-author-inline-name a { color: inherit; text-decoration: none; }
.art-author-inline-name a:hover { color: var(--theme, #409eff); }
.art-author-inline-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-sub, #98a3b9);
  font-size: .78rem;
}
.art-author-inline-meta i { font-size: .78rem; opacity: .85; }
.art-author-inline-meta .sep { opacity: .45; }
.art-author-inline-actions {
  display: flex;
  flex-shrink: 0;
  gap: .5rem;
  /* 关注/私信固定推到作者行最右侧 */
  margin-left: auto;
}

/* 博主认证徽章（verified-badge） */
.verified-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--vb-color, #f368a0) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--vb-color, #f368a0) 14%, transparent);
  color: var(--vb-color, #f368a0);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
.verified-badge i { flex: none; font-size: .66rem; }
.verified-badge--mini { gap: 3px; padding: 2px 6px; }

/* 文章页作者 meta 内分类 tag */
.art-author-inline-meta .tag,
.jz-am-cat {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(var(--tag-rgb, 99, 179, 237), .1);
  color: rgb(var(--tag-rgb, 99, 179, 237));
  font-size: .72rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s ease;
}
.art-author-inline-meta .tag:hover,
.jz-am-cat:hover { background: rgba(var(--tag-rgb, 99, 179, 237), .2); }

@keyframes artFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 作者栏响应式 ---------- */
@media (max-width: 768px) {
  .art-author-inline { gap: .6rem; }
  .art-author-inline-actions { flex-direction: column; gap: 6px; }
  .art-author-inline-actions .art-author-inline-follow,
  .art-author-inline-actions .art-author-inline-msg { padding: 8px 14px; font-size: .74rem; }
}

/* ---------- 作者栏深色模式 ---------- */
html[data-night='night'] .art-author-inline-name { color: var(--main, #bbb); }
html[data-night='night'] .art-author-inline-meta { color: var(--routine, #888); }
html[data-night='night'] .art-author-inline-avatar { border-color: rgba(255,255,255,.14); }
html[data-night='night'] .art-author-inline::after { background: rgba(99,179,237,.35); }

/* =====================================================================
   文章页右侧侧边栏（dmyblog.cn 复刻）· 本页目录 / 最新评论 / 标签云
   注：dmy-lists.css 中同名规则作用域为 .home-page，文章页无此类，故在此补充
   ===================================================================== */
.art-side .wg-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.art-side .wg-slot { display: block; }
.art-side .wg-widget {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 1.25rem 1.15rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-night='night'] .art-side .wg-widget {
  background: rgba(30,30,40,.6);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.art-side .wg-widget-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 800; letter-spacing: .3px;
  color: var(--text-main, #303133);
  margin: 0 0 1rem 0;
}
html[data-night='night'] .art-side .wg-widget-title { color: var(--main, #e5e7eb); }
.art-side .wg-widget-title .wg-ico { font-size: 1rem; line-height: 1; color: var(--theme, #63b3ed); }

/* 本页目录 */
.art-side .wg-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; max-height: 50vh; overflow-y: auto; }
.art-side .wg-toc-list::-webkit-scrollbar { width: 4px; }
.art-side .wg-toc-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }
.art-side .wg-toc-item a {
  display: block; padding: 7px 12px; border-left: 2px solid transparent;
  border-radius: 8px; color: var(--text-sub, #98a3b9);
  font-size: .85rem; line-height: 1.45; text-decoration: none;
  transition: all .25s ease;
}
.art-side .wg-toc-item a:hover { background: rgba(99,179,237,.12); border-left-color: var(--theme, #63b3ed); color: var(--theme, #63b3ed); }
.art-side .wg-toc-item.wg-toc-3 a { padding-left: 1.7rem; font-size: .78rem; }
.art-side .wg-toc-empty { color: var(--text-sub, #98a3b9); font-size: .8rem; padding: .3rem 0; }

/* 最新评论 */
.art-side .wg-cm { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.art-side .wg-cm-item { padding-bottom: .8rem; border-bottom: 1px dashed rgba(0,0,0,.08); }
.art-side .wg-cm-item:last-child { border-bottom: none; padding-bottom: 0; }
.art-side .wg-cm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.art-side .wg-cm-avatar img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.art-side .wg-cm-name { font-weight: 600; font-size: .82rem; color: var(--text-main, #303133); }
.art-side .wg-cm-head time { margin-left: auto; font-size: .7rem; color: var(--text-sub, #98a3b9); }
.art-side .wg-cm-text { font-size: .78rem; color: var(--text-sub, #666); margin: 0 0 4px 0; line-height: 1.5; }
.art-side .wg-cm-article { font-size: .74rem; color: var(--theme, #63b3ed); text-decoration: none; }
.art-side .wg-cm-article:hover { text-decoration: underline; }

/* 标签云 */
.art-side .wg-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.art-side .wg-tagcloud a {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: rgba(99,179,237,.1); color: rgb(var(--tag-rgb, 99,179,237));
  font-size: .76rem; text-decoration: none; transition: all .2s ease;
  border: 1px solid rgba(var(--tag-rgb, 99,179,237), .25);
}
.art-side .wg-tagcloud a:hover { background: rgb(var(--tag-rgb, 99,179,237)); color: #fff; transform: translateY(-1px); }