/* ============ 波普艺术 (Pop Art) 风格 ============ */
/* 高饱和撞色 · 粗黑描边 · 本代圆点 · 漫画贴花 */

/* --- 全局背景：明亮本代圆点 + 撞色 --- */
body {
  background: #ffd400;
  font-family: "Arial Black", "Microsoft YaHei", sans-serif;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,45,85,0.55) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(0,229,255,0.5) 0%, transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(255,45,85,0.5) 0%, transparent 45%),
    radial-gradient(circle at 20% 85%, rgba(0,229,255,0.5) 0%, transparent 40%),
    linear-gradient(135deg, #ffd400 0%, #ffd400 100%);
}
/* 本代圆点 (Ben-Day dots) 叠加层 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(rgba(255,45,85,0.5) 1.5px, transparent 1.6px),
    radial-gradient(rgba(0,45,130,0.45) 1.5px, transparent 1.6px),
    radial-gradient(rgba(255,255,255,0.6) 1.5px, transparent 1.6px);
  background-size: 12px 12px, 12px 12px, 12px 12px;
  background-position: 0 0, 6px 6px, 3px 3px;
}
#web_bg { background: transparent !important; }

/* --- 滚动条 --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #ffd400; }
::-webkit-scrollbar-thumb {
  background: #ff2d55;
  border: 2px solid #000;
  border-radius: 6px;
}

/* --- 文字选中 --- */
::selection { background: #00e5ff; color: #000; }

/* --- 卡片：纯白 + 粗黑描边 + 硬阴影 --- */
.card-widget,
.recent-post-item,
#article-container,
.layout > div:not(.aside-content) .card-widget,
#aside-content .card-widget {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0px !important;
  border: 4px solid #000 !important;
  box-shadow: 8px 8px 0 #000 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  position: relative;
  overflow: hidden;
}
.card-widget:hover,
.recent-post-item:hover {
  transform: translate(-4px,-4px) !important;
  box-shadow: 12px 12px 0 #ff2d55 !important;
}

/* --- 文章标题：撞色 + 叠影 --- */
.recent-post-item .post-title {
  font-weight: 900;
  letter-spacing: 1px;
  color: #ff2d55;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #000;
  text-shadow: 2px 2px 0 #00e5ff, 4px 4px 0 #000;
}
.recent-post-item .post-time {
  color: #000;
  font-weight: 700;
}

/* --- 站点标题：漫画大字 --- */
#site-title {
  font-weight: 900;
  letter-spacing: 3px;
  color: #ff2d55;
  text-transform: uppercase;
  -webkit-text-stroke: 2px #000;
  text-shadow: 4px 4px 0 #00e5ff, 8px 8px 0 #000;
  animation: popTitle 2.5s ease-in-out infinite;
}
@keyframes popTitle {
  0%, 100% { transform: scale(1) rotate(-1deg); }
  50% { transform: scale(1.03) rotate(1deg); }
}
#site-subtitle {
  color: #000;
  font-weight: 900;
  letter-spacing: 2px;
  -webkit-text-stroke: 0.5px #000;
  text-shadow: 2px 2px 0 #ffd400;
}

/* --- 导航栏：亮黄 + 黑边 --- */
#nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #ffd400 !important;
  border-bottom: 4px solid #000 !important;
  box-shadow: 0 4px 0 #ff2d55 !important;
}
#nav .menus_items .menus_item .site-page {
  position: relative;
  font-weight: 900;
  text-transform: uppercase;
  color: #000;
  transition: all 0.2s;
}
#nav .menus_items .menus_item .site-page:hover {
  color: #ff2d55;
  -webkit-text-stroke: 0.5px #000;
}
#nav .menus_items .menus_item .site-page::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  width: 0; height: 4px;
  background: #00e5ff;
  border: 1px solid #000;
  transition: all 0.2s ease;
  transform: translateX(-50%);
}
#nav .menus_items .menus_item .site-page:hover::after { width: 100%; }

/* --- 头像：撞色圆圈 + 黑描边 --- */
#aside-content .card-avatar img {
  border: 4px solid #000 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 6px #ff2d55, 0 0 0 10px #00e5ff, 6px 6px 0 #000 !important;
  transition: transform 0.2s ease;
}
#aside-content .card-avatar img:hover {
  transform: scale(1.1) rotate(8deg);
}

/* --- 社交图标 --- */
.social-icon { transition: all 0.2s cubic-bezier(0.22,1,0.36,1); }
.social-icon:hover {
  transform: translateY(-4px) rotate(15deg) scale(1.25);
  color: #ff2d55 !important;
}

/* --- 按钮：撞色 + 黑边 + 硬阴影 --- */
.btn-beautify, a.btn-beautify, button {
  background: #00e5ff !important;
  border: 3px solid #000 !important;
  border-radius: 0px !important;
  color: #000 !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 4px 4px 0 #000 !important;
  transition: all 0.15s ease !important;
}
.btn-beautify:hover, a.btn-beautify:hover, button:hover {
  background: #ff2d55 !important;
  color: #fff !important;
  transform: translate(-2px,-2px) !important;
  box-shadow: 6px 6px 0 #000 !important;
}

/* --- 代码块 --- */
.highlight, pre, figure.highlight {
  border-radius: 0px !important;
  border: 3px solid #000 !important;
  box-shadow: 6px 6px 0 #ff2d55 !important;
}
figure.highlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, #ff2d55 0 20px, #ffd400 20px 40px, #00e5ff 40px 60px);
  border-bottom: 2px solid #000;
}

/* --- 表格 --- */
#article-container table {
  border-radius: 0px; overflow: hidden;
  border: 3px solid #000;
}
#article-container table thead tr { background: #ff2d55; }
#article-container table thead th { color: #fff !important; font-weight: 900; border: 2px solid #000; }
#article-container table td { border: 2px solid #000; }

/* --- 分页 --- */
.pagination .page-number, .pagination .extend {
  border-radius: 0px !important;
  border: 2px solid #000 !important;
  font-weight: 900;
  transition: all 0.15s ease !important;
}
.pagination .page-number:hover, .pagination .extend:hover {
  transform: translate(-2px,-2px);
  box-shadow: 3px 3px 0 #000;
}
.pagination .page-number.current {
  background: #ff2d55 !important;
  color: #fff !important;
  box-shadow: 3px 3px 0 #000;
}

/* --- 打字机 --- */
#subtitle {
  border-right: 0.1em solid #000;
  color: #000;
  font-weight: 900;
}

/* --- 版权卡片 --- */
.post-copyright {
  border-left: 8px solid #ff2d55 !important;
  background: #ffd400 !important;
  backdrop-filter: none !important;
  border-radius: 0px !important;
  border: 2px solid #000;
}

/* --- 引用块：漫画对话气泡 --- */
#article-container blockquote {
  border: 3px solid #000 !important;
  border-left: 12px solid #ff2d55 !important;
  background: #00e5ff !important;
  border-radius: 0px !important;
  padding: 16px 24px;
  position: relative;
  box-shadow: 4px 4px 0 #000;
}
#article-container blockquote::before {
  content: 'HEY!';
  position: absolute;
  top: -12px; left: 12px;
  font-size: 18px;
  color: #000;
  background: #ffd400;
  border: 2px solid #000;
  padding: 0 6px;
  font-weight: 900;
  font-family: "Arial Black", sans-serif;
}

/* --- 链接：波普下划线 --- */
#article-container a:not(.btn-beautify):not(.social-icon) {
  color: #ff2d55;
  text-decoration: none;
  font-weight: 700;
  border-bottom: 3px solid #00e5ff;
  transition: all 0.2s;
}
#article-container a:not(.btn-beautify):not(.social-icon):hover {
  color: #000;
  background: #ffd400;
  border-bottom: 3px solid #ff2d55;
}

/* --- 标题装饰：彩色粗条 --- */
#article-container h1, #article-container h2, #article-container h3 {
  position: relative;
  padding-left: 20px;
  font-weight: 900;
  color: #000;
}
#article-container h1::before, #article-container h2::before, #article-container h3::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 75%;
  border: 2px solid #000;
  background: #ff2d55;
}

/* --- 标签徽章 --- */
.tag-cloud-tags a {
  transition: all 0.15s ease;
  border-radius: 0px !important;
  padding: 4px 16px !important;
  border: 2px solid #000 !important;
  background: #00e5ff !important;
  font-weight: 900;
  color: #000 !important;
}
.tag-cloud-tags a:hover {
  background: #ff2d55 !important;
  color: #fff !important;
  transform: translate(-2px,-2px);
  box-shadow: 3px 3px 0 #000;
}

/* --- 图片 --- */
#article-container img {
  border-radius: 0px;
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #00e5ff;
  transition: all 0.2s ease;
}
#article-container img:hover {
  transform: scale(1.02) rotate(-1deg);
  box-shadow: 6px 6px 0 #ff2d55;
}

/* --- 归档时间轴 --- */
#archive-timeline .timeline-item::before {
  content: '';
  position: absolute;
  left: -8px; top: 8px;
  width: 16px; height: 16px;
  border-radius: 0px;
  border: 2px solid #000;
  background: #ff2d55;
  box-shadow: 2px 2px 0 #000;
}

/* --- 右下工具栏 --- */
#rightside > div > button,
#rightside > div > a {
  background: #ffd400 !important;
  border: 2px solid #000 !important;
  border-radius: 0px !important;
  box-shadow: 3px 3px 0 #000;
  transition: all 0.15s ease;
}
#rightside > div > button:hover,
#rightside > div > a:hover {
  background: #ff2d55 !important;
  color: #fff !important;
  transform: translate(-2px,-2px);
  box-shadow: 4px 4px 0 #000;
}

/* --- 页脚 --- */
#footer-wrap {
  position: relative;
  color: #000;
  font-weight: 700;
}
#footer-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 6px;
  background: repeating-linear-gradient(90deg, #ff2d55 0 20px, #00e5ff 20px 40px, #ffd400 40px 60px);
  border: 2px solid #000;
}

/* --- 文章元信息 --- */
.post-meta__categories a, .post-meta__tags a {
  font-weight: 700;
}
.post-meta__categories a:hover, .post-meta__tags a:hover {
  color: #ff2d55 !important;
  -webkit-text-stroke: 0.5px #000;
}

/* --- 搜索按钮 --- */
#search-button { transition: all 0.2s ease; }
#search-button:hover { color: #ff2d55 !important; transform: scale(1.2) rotate(-15deg); }

/* --- 分类列表 --- */
.category-lists .category-list-item { transition: all 0.15s ease; font-weight: 700; }
.category-lists .category-list-item:hover { transform: translateX(10px); color: #ff2d55; }

/* --- 首页 banner --- */
#page-header.post-bg,
#page-header #post-info { backdrop-filter: none !important; }

/* --- 手机端 --- */
@media (max-width: 768px) {
  .card-widget, .recent-post-item {
    box-shadow: 5px 5px 0 #000 !important;
  }
  .card-widget:hover, .recent-post-item:hover {
    box-shadow: 8px 8px 0 #ff2d55 !important;
  }
}

/* --- 流星：漫画速度线 --- */
.shooting-star {
  position: fixed;
  width: 3px; height: 90px;
  background: linear-gradient(180deg, transparent 0%, #000 60%, #ff2d55 100%);
  border-radius: 0;
  pointer-events: none;
  z-index: 9997;
  transform: rotate(-35deg);
  animation: shootStar 1.2s linear forwards;
}
@keyframes shootStar {
  0% { opacity: 0; transform: rotate(-35deg) translateX(0) translateY(0) scale(1); }
  5% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { opacity: 0; transform: rotate(-35deg) translateX(-500px) translateY(400px) scale(0.2); }
}

/* --- 闪烁星光 --- */
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  50% { opacity: 0.9; transform: scale(1); }
}
.twinkle-dot {
  animation: twinkle var(--td, 3s) ease-in-out infinite;
  animation-delay: var(--tdl, 0s);
}

/* --- 浮动撞色块 --- */
.floating-light {
  position: fixed;
  pointer-events: none;
  z-index: -1;
  filter: none;
  animation: floatLight var(--fd, 14s) ease-in-out infinite;
  animation-delay: var(--fdl, 0s);
}
@keyframes floatLight {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(20px, -30px) rotate(10deg); }
  66% { transform: translate(-15px, -60px) rotate(-10deg); }
}

/* --- 卡片倾斜 --- */
.card-tilt { transform-style: preserve-3d; }