/* 全站界面优化（Modules/Common/SiteUI/SiteUI.php 加载）。颜色用额外CSS里的变量，黑夜模式自动适配 */

/* ---------- 1. 手机顶部导航：菜单行被写死 22px 高 + overflow:hidden，图标和文字被裁掉一半 ---------- */
@media (max-width: 768px) {
  .site-header .header-banner-left,
  .site-header .header-banner-left .ym-menu {
    height: auto !important;
    overflow: visible !important;
  }
  .site-header .header-banner-left .ym-menu ul.menu {
    display: flex !important;
    gap: 2px;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .site-header .header-banner-left .ym-menu ul.menu::-webkit-scrollbar { display: none; }
  .site-header .header-banner-left .ym-menu ul.menu > li { flex: none; padding-bottom: 8px !important; }
  /* 菜单行变高后，固定 64px 高、居中换行的容器会把右侧图标挤出顶部；改成从顶部排、高度自动 */
  .site-header .header-banner-content { height: auto !important; min-height: 64px; align-content: flex-start !important; }
}

/* ---------- 2. 手机页脚：内容贴着屏幕边缘 ---------- */
@media (max-width: 768px) {
  #colophon .site-footer-nav .wrapper,
  #colophon .footer-bottom .wrapper,
  #colophon > .wrapper { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
}

/* ---------- 3. 看板娘：小屏缩小（滚到页脚时保持原样，不缩小也不隐藏） ---------- */
.rana-wrap.rana-fixed { transform-origin: left bottom; }
@media (max-width: 1600px) { .rana-wrap.rana-fixed { scale: .8; } }
@media (max-width: 1366px) { .rana-wrap.rana-fixed { scale: .66; } }

/* ---------- 4. 悬浮音乐播放器：已换成 ytea-player（毛玻璃胶囊），手机上的避让规则也在 ytea-player.css ---------- */

/* ---------- 5. 首页横幅：保持原图高度（810px，整屏大图）；优化标题文字 ---------- */
/* 图片上加一层很淡的暗角：中间文字区域稍暗、四周不动，文字压在亮处也看得清 */
#html-box-abc .image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 34% at 50% 50%, rgba(6, 14, 32, .42) 0%, rgba(6, 14, 32, .16) 60%, rgba(6, 14, 32, 0) 100%),
    linear-gradient(to bottom, rgba(6, 14, 32, .25) 0%, rgba(6, 14, 32, 0) 22%);
}
#html-box-abc .image-container .centered-text { z-index: 2; text-align: center; }

/* 标题：字号随屏幕变化，字距拉开，柔和的蓝色光晕（额外CSS把阴影设成了 none，这里要 !important） */
#html-box-abc .image-container .centered-text h2 {
  margin: 0 !important;
  font-size: clamp(34px, 4.4vw, 64px) !important;
  letter-spacing: .28em !important;
  padding-left: .28em; /* 字距只加在字后面，补回左边让整体居中 */
  color: #fff !important;
  white-space: nowrap;
  text-shadow:
    0 2px 4px rgba(4, 10, 24, .55),
    0 6px 24px rgba(4, 10, 24, .45),
    0 0 36px rgba(95, 168, 220, .55) !important;
}
/* 标题与副标题之间的细分隔线：中间实、两头渐隐 */
#html-box-abc .image-container .centered-text h3 {
  position: relative;
  margin: 18px 0 0 !important;
  padding-top: 16px;
  font-size: clamp(16px, 1.55vw, 22px) !important;
  letter-spacing: .32em !important;
  padding-left: .32em;
  white-space: nowrap;
}
#html-box-abc .image-container .centered-text h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(220px, 60%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
}
#html-box-abc .image-container .centered-text h3 span {
  color: rgba(255, 246, 228, .95) !important;
  text-shadow: 0 1px 2px rgba(4, 10, 24, .7), 0 4px 16px rgba(4, 10, 24, .55) !important;
}

/* 横幅底部波浪：原来 4 层同一种浅灰，压在深色图上发灰。
   改成多层配色：后面三层用半透明的主题蓝（浅→深），最前一层与页面背景同色，自然过渡到内容区 */
/* 高度保持主题原样（站长要求不加高），只改颜色 */
#html-box-abc .image-container svg.waves { margin-bottom: -1px; /* 盖住缩放时可能露出的 1px 缝 */ }
#html-box-abc .image-container svg.waves .parallax > use { animation-timing-function: cubic-bezier(.55, .5, .45, .5) !important; }
#html-box-abc .image-container svg.waves .parallax > use:nth-child(1) { fill: rgba(95, 168, 220, .32) !important; }
#html-box-abc .image-container svg.waves .parallax > use:nth-child(2) { fill: rgba(228, 239, 250, .38) !important; }
#html-box-abc .image-container svg.waves .parallax > use:nth-child(3) { fill: rgba(29, 78, 137, .30) !important; }
#html-box-abc .image-container svg.waves .parallax > use:nth-child(4) { fill: var(--paper, #f2f7fc) !important; }
html.yt-dark #html-box-abc .image-container svg.waves .parallax > use:nth-child(1) { fill: rgba(95, 168, 220, .22) !important; }
html.yt-dark #html-box-abc .image-container svg.waves .parallax > use:nth-child(2) { fill: rgba(124, 183, 255, .14) !important; }
html.yt-dark #html-box-abc .image-container svg.waves .parallax > use:nth-child(3) { fill: rgba(20, 58, 104, .55) !important; }
@media (prefers-reduced-motion: reduce) { #html-box-abc .image-container svg.waves .parallax > use { animation: none !important; } }

/* 向下滚动提示：第一屏只有大图时，告诉访客下面还有内容（点击滚到文章列表，ytea-site.js） */
/* 样式：毛玻璃圆形按钮 + 上下浮动的双箭头，外圈呼吸光环；文字只在悬停时以小气泡显示 */
.ytea-hero-down {
  position: absolute;
  left: 50%;
  bottom: 84px; /* 在波浪上方 */
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(4, 10, 24, .35);
  color: #fff;
  cursor: pointer;
  transform: translateX(-50%);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
/* 双箭头（两个 chevron 叠放），整体上下浮动 */
.ytea-hero-down i {
  position: relative;
  display: block;
  width: 14px;
  height: 18px;
  animation: ytea-down-float 1.8s ease-in-out infinite;
}
.ytea-hero-down i::before,
.ytea-hero-down i::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.ytea-hero-down i::before { top: 0; opacity: .45; }
.ytea-hero-down i::after { top: 6px; }
/* 外圈呼吸光环 */
.ytea-hero-down::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  animation: ytea-down-ring 2.4s ease-out infinite;
  pointer-events: none;
}
/* 悬停文字气泡 */
.ytea-hero-down span {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .15em;
  white-space: nowrap;
  color: #fff;
  background: rgba(4, 10, 24, .55);
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.ytea-hero-down:hover,
.ytea-hero-down:focus-visible {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .6);
  box-shadow: 0 8px 26px rgba(4, 10, 24, .45), 0 0 0 4px rgba(95, 168, 220, .25);
  outline: none;
}
.ytea-hero-down:hover span,
.ytea-hero-down:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
@keyframes ytea-down-float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes ytea-down-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ytea-hero-down i, .ytea-hero-down::before { animation: none; } }

@media (max-width: 768px) {
  #html-box-abc .image-container .centered-text h2 { letter-spacing: .16em !important; padding-left: .16em; }
  #html-box-abc .image-container .centered-text h3 { margin-top: 10px !important; padding-top: 10px; letter-spacing: .18em !important; padding-left: .18em; }
  .ytea-hero-down { display: none; } /* 手机上横幅本来就不高 */
}

/* ---------- 7. 侧边栏 ---------- */
/* 作者简介：只有一个「作者简介」标签的标签栏，看起来像上方空了一块；换成渐变封面条 */
#custom_html-4 .nav.nav-pills { display: none !important; }
#custom_html-4.widget { overflow: hidden; padding-top: 0 !important; }
#custom_html-4 .tab-content { position: relative; }
#custom_html-4 .tab-content::before {
  content: "";
  display: block;
  height: 64px;
  margin: 0 -20px;
  background:
    radial-gradient(circle at 85% 30%, rgba(255, 255, 255, .18) 0 26px, transparent 27px),
    linear-gradient(135deg, #143a68 0%, #1d4e89 55%, #5fa8dc 100%);
}
#custom_html-4 .author-overview-container { margin-top: -50px; padding-top: 0 !important; }
#custom_html-4 .author-image { width: 84px !important; height: 84px !important; border: 4px solid var(--card, #fff); box-shadow: 0 4px 14px rgba(29, 78, 137, .18) !important; }

/* 热门文章：只有前 3 条有 TOP 标识，第 4 条起补上序号 */
.b2-widget-hot ul { counter-reset: ytea-hot; }
.b2-widget-hot li.widget-post { counter-increment: ytea-hot; position: relative; }
.b2-widget-hot li.widget-post:not(:has(.b2-widget-post-order))::before {
  content: counter(ytea-hot);
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: rgba(29, 78, 137, .75);
}

/* ---------- 9. 懒加载占位：图片加载出来之前显示闪烁骨架，而不是一块死灰 ---------- */
img.lazy:not(.loaded):not(.error) {
  object-position: -99999px 0; /* 不画灰色占位图，只露出下面的背景 */
  background: linear-gradient(100deg, var(--sky-soft, #e4effa) 30%, var(--paper, #f2f7fc) 50%, var(--sky-soft, #e4effa) 70%) 0 0 / 300% 100%;
  animation: ytea-shimmer 1.4s ease-in-out infinite;
}
@keyframes ytea-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { img.lazy:not(.loaded):not(.error) { animation: none; } }

/* ---------- 10. 404 页（404.php）---------- */
/* 主题的 404 卡片没有内边距，内容变多后插画顶到卡片上沿、列表贴着下沿 */
.error-404.not-found { box-sizing: border-box; padding: 48px 20px 40px !important; margin-top: 16px; border-radius: 18px !important; }
@media (max-width: 768px) { .error-404.not-found { padding: 32px 16px !important; } }
.error-404 .page-content { width: min(520px, 100%) !important; }
.error-404 .page-content > img { display: block; width: min(300px, 80%); height: auto; margin: 0 auto 8px; }
.error-404 .ytea-404-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 6px; }
.error-404 .ytea-404-actions a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  color: var(--deep, #1d4e89) !important;
  border: 1px solid var(--line, #dce7f2);
  background: var(--card, #fff);
}
.error-404 .ytea-404-actions a.is-primary { color: #fff !important; border-color: var(--deep, #1d4e89); background: var(--deep, #1d4e89); }
.error-404 .ytea-404-search { display: flex; gap: 8px; max-width: 420px; margin: 18px auto 0; }
.error-404 .ytea-404-search input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line, #dce7f2);
  border-radius: 999px;
  background: var(--paper, #f2f7fc);
  color: var(--ink, #1c2b3a);
  font-size: 14px;
}
.error-404 .ytea-404-search input:focus { outline: none; border-color: var(--sky, #5fa8dc); box-shadow: 0 0 0 3px rgba(95, 168, 220, .18); }
.error-404 .ytea-404-search button {
  flex: none;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--deep, #1d4e89);
  cursor: pointer;
}
.error-404 .ytea-404-hot { max-width: 520px; margin: 26px auto 0; text-align: left; }
.error-404 .ytea-404-hot h2 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--ink, #1c2b3a); }
.error-404 .ytea-404-hot ol { margin: 0; padding: 0; list-style: none; counter-reset: h404; }
.error-404 .ytea-404-hot li { counter-increment: h404; border-top: 1px dashed var(--line, #dce7f2); }
.error-404 .ytea-404-hot li a { display: flex; gap: 10px; padding: 9px 4px; font-size: 14px; color: var(--ink, #1c2b3a) !important; text-decoration: none !important; }
.error-404 .ytea-404-hot li a::before { content: counter(h404); flex: none; width: 20px; font-weight: 700; color: var(--sky, #5fa8dc); }
.error-404 .ytea-404-hot li a:hover { color: var(--deep, #1d4e89) !important; }
html.yt-dark .error-404 .page-content img { filter: invert(.88) hue-rotate(180deg); } /* 黑色熊猫插画在深色背景上看不见 */

/* ---------- 11. 黑夜模式：标签云里的数量几乎看不见 ---------- */
html.yt-dark .widget_tag_cloud .tag-link-count,
html.yt-dark .tagcloud .tag-link-count { color: var(--ink-muted, #9aabc0) !important; opacity: 1 !important; }

/* ---------- 黑夜模式：A2 的 AJAX 翻页按钮（作者页、分类页等）原来是白底 ---------- */
html.yt-dark .ajax-pager .button,
html.yt-dark .ajax-pager button {
  color: var(--ink, #e3e9f2) !important;
  background: var(--paper, #0e1622) !important;
  border-color: var(--line, #263449) !important;
}
html.yt-dark .ajax-pager .button.selected,
html.yt-dark .ajax-pager button.selected { color: #fff !important; background: var(--deep, #7cb7ff) !important; border-color: var(--deep, #7cb7ff) !important; }
html.yt-dark .ajax-pager button:disabled:not(.selected) { opacity: .45; }

/* ---------- 灯笼（后台「夜语茶缘设置」开启时由 footer.html 生成） ----------
   一左一右挂在内容区两侧的空白里，从导航栏下沿垂下来；绝对定位在页面顶部，往下滚就离开视野，不挡正文。
   位置和大小由 footer.html 的 place() 按实际版面算：量内容区左右边缘，避开右侧固定工具栏和文章页左侧的点赞 / 分享按钮，
   两只离内容区边缘距离相同（左右对称），放不下就不显示。--ls 是灯笼宽度（64~92px） */
.ytea-lantern { --ls: 84px; position: absolute; left: 0; right: 0; top: 58px; height: 0; z-index: 8; pointer-events: none; }   /* 高于两侧背景的星座装饰；在内容区外，不会盖住导航下拉菜单 */
.ytea-lantern.is-off { display: none; }
.ytea-lantern-item {
  position: absolute; top: 0; width: var(--ls);
  transform-origin: 50% 0; animation: ytea-lantern-swing 4.4s ease-in-out infinite alternate;
  opacity: 0; translate: 0 -40px; transition: opacity .9s ease, translate 1.1s cubic-bezier(.25, 1.4, .4, 1);
}
.ytea-lantern.is-in .ytea-lantern-item { opacity: 1; translate: 0 0; }
.ytea-lantern-item.is-left { --rope: 36px; }
.ytea-lantern-item.is-right { --rope: 50px; animation-delay: -2.2s; animation-duration: 5s; transition-delay: .25s; }   /* 绳子长短略错开，更自然 */
/* 挂绳：两股金线绞在一起 */
.ytea-lantern-rope { display: block; width: 3px; height: var(--rope); margin: 0 auto -1px;
  background: repeating-linear-gradient(170deg, #f2c35a 0 3px, #9c6418 3px 5px); border-radius: 2px; }
/* 外圈光晕：柔和呼吸 */
.ytea-lantern-glow { position: absolute; left: 50%; top: calc(var(--rope) + var(--ls) * .24); width: calc(var(--ls) * 1.8); height: calc(var(--ls) * 1.8); margin-left: calc(var(--ls) * -.9);
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 140, 50, .42), rgba(255, 90, 30, .14) 45%, transparent 70%);
  animation: ytea-lantern-breathe 3.2s ease-in-out infinite alternate; }
.ytea-lantern-svg { position: relative; display: block; width: var(--ls); height: auto; overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(120, 10, 0, .28)); }
.ytea-lantern-char { font-family: inherit; font-size: 33px; font-weight: 700; fill: #ffe08a; paint-order: stroke; stroke: rgba(110, 15, 0, .45); stroke-width: 2.4px; }
.ytea-lantern-core { animation: ytea-lantern-flicker 2.3s ease-in-out infinite; }
.ytea-lantern-item.is-right .ytea-lantern-core { animation-delay: -1.1s; }
/* 穗子比灯身晚半拍，看起来是被带着晃 */
.ytea-lantern-tassel { transform-box: fill-box; transform-origin: 50% 0; animation: ytea-lantern-tassel 4.4s ease-in-out infinite alternate; animation-delay: -.6s; }
.ytea-lantern-item.is-right .ytea-lantern-tassel { animation-duration: 5s; animation-delay: -2.9s; }
@keyframes ytea-lantern-swing { from { rotate: -4.5deg; } to { rotate: 4.5deg; } }
@keyframes ytea-lantern-tassel { from { rotate: 9deg; } to { rotate: -9deg; } }
@keyframes ytea-lantern-breathe { from { opacity: .65; scale: .92; } to { opacity: 1; scale: 1.06; } }
@keyframes ytea-lantern-flicker { 0%, 100% { opacity: .8; } 30% { opacity: 1; } 55% { opacity: .7; } 75% { opacity: .95; } }
html.yt-dark .ytea-lantern-glow { background: radial-gradient(circle, rgba(255, 140, 50, .6), rgba(255, 90, 30, .22) 45%, transparent 70%); }
@media (max-width: 1199px) { .ytea-lantern { display: none; } }   /* 手机和窄屏：内容区占满，两侧没有空白 */
@media (prefers-reduced-motion: reduce) { .ytea-lantern-item, .ytea-lantern-tassel, .ytea-lantern-glow, .ytea-lantern-core { animation: none; } .ytea-lantern-item { transition: none; } }