/* ============================================================
 * 折腾笔记 · 极客风自定义样式（参考 liushen.fun）
 * 主题：Material-Design 代码编辑器美学
 * 加载：fluid_config.yml.custom_css
 * ============================================================ */

/* ---------- 全局背景图（极客风深色 + 青绿光晕 + 网格 + 噪点）---------- */
body {
  background-color: #0a1018;
  background-image: url('/img/bg.svg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
}
[data-user-color-scheme="dark"] body {
  background-color: #0a1018;
  background-image: url('/img/bg.svg');
}

/* 让 body 看起来有层次：加一层微弱的颜色遮罩 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,
      rgba(62, 220, 200, 0.05),
      transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 50%,
      rgba(33, 133, 208, 0.04),
      transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 60%,
      rgba(90, 156, 248, 0.04),
      transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ---------- 全局变量（自定义色板）---------- */
:root {
  --custom-primary: #2185d0;
  --custom-accent: #3edcc8;        /* 强调色：青绿 */
  --custom-radius: 10px;
  --custom-radius-sm: 6px;
  --custom-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --custom-shadow-hover: 0 8px 28px rgba(33, 133, 208, 0.15);
  --custom-font-mono: "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;
  --custom-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

[data-user-color-scheme="dark"] {
  --custom-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --custom-shadow-hover: 0 8px 28px rgba(62, 220, 200, 0.2);
}

/* ---------- 全局细节 ---------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--custom-font-sans);
  font-feature-settings: "tnum" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

::selection {
  background: rgba(33, 133, 208, 0.2);
  color: inherit;
}
::-moz-selection {
  background: rgba(33, 133, 208, 0.2);
  color: inherit;
}

a {
  transition: color 0.18s ease, opacity 0.18s ease;
}

/* ============================================================
 * NAVBAR · Terminal 极客风（深色半透明 + 背詓透出背景图）
 * ============================================================ */
.navbar {
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  background-color: rgba(10, 16, 24, 0.65) !important;
  border-bottom: 1px solid rgba(62, 220, 200, 0.18) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
}
[data-user-color-scheme="dark"] .navbar {
  background-color: rgba(10, 16, 24, 0.75) !important;
  border-bottom-color: rgba(62, 220, 200, 0.22) !important;
}

.navbar .nav-link,
.navbar-brand strong,
.navbar-brand {
  color: rgba(255, 255, 255, 0.92) !important;
}
.navbar .nav-link:hover {
  color: var(--custom-accent) !important;
}

.navbar-brand strong {
  font-family: var(--custom-font-mono) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
/* 在 strong 前面加 $ 提示符 */
.navbar-brand strong::before {
  content: "~$";
  color: var(--custom-accent);
  font-weight: 600;
  user-select: none;
  letter-spacing: 0;
}
/* 在 strong 后面加 /blog 后缀 */
.navbar-brand strong::after {
  content: " /blog";
  color: var(--custom-primary);
  font-weight: 600;
  font-size: 0.85em;
  opacity: 0.7;
  margin-left: 0.2em;
}

.navbar-nav .nav-link {
  font-family: var(--custom-font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
  padding: 0.4em 0.7em !important;
  border-radius: var(--custom-radius-sm);
  transition: all 0.18s ease;
}
.navbar-nav .nav-link:hover {
  background: rgba(33, 133, 208, 0.08);
  color: var(--custom-primary) !important;
}
[data-user-color-scheme="dark"] .navbar-nav .nav-link:hover {
  background: rgba(62, 220, 200, 0.1);
  color: var(--custom-accent) !important;
}

/* ============================================================
 * BANNER · 渐变流光 + 极简（背景透出 + 不再是纯黑大块）
 * ============================================================ */
#banner.banner {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,
      rgba(62, 220, 200, 0.15),
      transparent 70%),
    linear-gradient(180deg,
      rgba(15, 20, 25, 0.55) 0%,
      rgba(19, 27, 38, 0.4) 50%,
      rgba(10, 16, 24, 0.2) 100%) !important;
  background-size: cover !important;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(62, 220, 200, 0.18);
  min-height: 30vh !important;
}

/* Banner 顶部加 terminal 风格的 prompt 行 */
#banner.banner::before {
  content: "$ cat /blog/intro.txt";
  position: absolute;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--custom-font-mono);
  font-size: 0.85rem;
  color: var(--custom-accent);
  opacity: 0.65;
  z-index: 2;
  user-select: none;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* Banner 文字 - 渐变流光 */
.banner-text {
  text-align: center;
  position: relative;
  z-index: 1;
}
.banner-text .h1,
.banner-text h1,
.banner-text .h2,
.banner-text h2,
.banner-text .h3 {
  font-family: var(--custom-font-mono) !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg,
    #3edcc8 0%,
    #ffffff 25%,
    #5a9cf8 50%,
    #ffffff 75%,
    #3edcc8 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: banner-shimmer 6s ease-in-out infinite;
}
.banner-text .h2,
.banner-text h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
  margin-top: 0.4em;
}
.banner-text .h1,
.banner-text h1 {
  font-size: clamp(2.5rem, 6vw, 4rem) !important;
  margin: 0;
}

@keyframes banner-shimmer {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* Banner subtitle */
#subtitle {
  font-family: var(--custom-font-mono) !important;
  font-size: clamp(0.9rem, 2vw, 1.1rem) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Banner 装饰光斑 */
#banner.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.2px 1.2px at 90% 50%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.3));
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ============================================================
 * HOMEPAGE H1 · 把 SEO 隐藏的 H1 做成 Hero 大标题
 * fluid 1.9.9 在 index.ejs 里 <h1 style="display: none"> 隐藏了站点名
 * 重新让它显示，并加上 hero 视觉
 * ============================================================ */
#board > h1[style*="display: none"] {
  display: block !important;
  font-family: var(--custom-font-mono) !important;
  font-weight: 800 !important;
  font-size: clamp(2.8rem, 8vw, 5.5rem) !important;
  letter-spacing: 0.06em;
  margin: 1.5rem auto 0.5rem !important;
  padding: 0 !important;
  text-align: center;
  background: linear-gradient(135deg,
    #3edcc8 0%,
    #ffffff 25%,
    #5a9cf8 50%,
    #ffffff 75%,
    #3edcc8 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: banner-shimmer 6s ease-in-out infinite;
  filter: drop-shadow(0 4px 20px rgba(62, 220, 200, 0.25));
}

/* ============================================================
 * POST META-TOP · Banner 里的日期/字数/阅读时长 chip
 * fluid 1.9.9 meta-top.ejs 用 .mt-3 / .mt-1 两行包
 * ============================================================ */
header .banner .mt-3,
header .banner .mt-1 {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin: 0.5em 0.4em 0 !important;
  padding: 0.5em 1em !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(62, 220, 200, 0.25) !important;
  border-radius: 6px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--custom-font-mono) !important;
  font-size: 0.78rem !important;
  color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

header .banner .post-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.78rem !important;
}
header .banner .post-meta + .post-meta::before {
  content: "│";
  color: var(--custom-accent);
  margin: 0 0.5em;
  font-weight: 300;
  opacity: 0.6;
}
header .banner .post-meta time {
  font-family: var(--custom-font-mono);
  font-size: inherit;
  color: rgba(255, 255, 255, 0.95);
}
header .banner .post-meta .iconfont {
  color: var(--custom-accent) !important;
  font-size: 0.95em !important;
  opacity: 0.95;
}

/* ============================================================
 * INDEX · 文章列表 · 紧凑卡片（让首页布局不右侧留白）
 * ============================================================ */
#board .container,
#board > .container {
  max-width: 1280px !important;
}
#board {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 1.5rem 1.5rem !important;
  /* 关键：让 body 背景图透出来，不再是大白板 */
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
#board .row > div[class*="col-"] {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

/* header 区域也透明，让 body 背景在 banner 下层显示 */
header,
.header-inner,
#banner {
  background: transparent !important;
}
/* 但 navbar 要保持深色半透明效果（已上面设置）*/
#navbar {
  background-color: rgba(10, 16, 24, 0.75) !important;
}
.index-card.card {
  border-radius: var(--custom-radius);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(20, 24, 32, 0.55) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  padding: 1.2rem 1.4rem !important;
  transition: all 0.22s ease;
  position: relative;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.85) !important;
}
[data-user-color-scheme="dark"] .index-card.card {
  border-color: rgba(62, 220, 200, 0.15) !important;
  background: rgba(20, 24, 32, 0.6) !important;
}

/* Fluid 主题实际用的是 .row.mx-auto.index-card + article.index-info */
.row.mx-auto.index-card {
  border-radius: var(--custom-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(20, 24, 32, 0.55) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  padding: 1.2rem 1.4rem !important;
  margin: 1rem 0 !important;
  transition: all 0.22s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
[data-user-color-scheme="dark"] .row.mx-auto.index-card {
  border-color: rgba(62, 220, 200, 0.18) !important;
  background: rgba(20, 24, 32, 0.6) !important;
}
.row.mx-auto.index-card:hover {
  border-color: rgba(62, 220, 200, 0.4) !important;
  background: rgba(30, 36, 46, 0.65) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(62, 220, 200, 0.15);
}
.row.mx-auto.index-card .index-info {
  color: rgba(255, 255, 255, 0.92) !important;
}
.index-card.card::before,
.row.mx-auto.index-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--custom-accent), var(--custom-primary));
  opacity: 0;
  transition: opacity 0.22s ease;
}
.index-card.card:hover,
.row.mx-auto.index-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--custom-shadow-hover);
  border-color: rgba(33, 133, 208, 0.2) !important;
}
.index-card.card:hover::before,
.row.mx-auto.index-card:hover::before {
  opacity: 1;
}

.index-header {
  font-family: var(--custom-font-sans) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  margin: 0 0 0.5em !important;
}
.index-header a {
  color: rgba(255, 255, 255, 0.95) !important;
  transition: color 0.18s ease;
}
.index-card.card:hover .index-header a,
.row.mx-auto.index-card:hover .index-header a {
  color: var(--custom-accent) !important;
}
[data-user-color-scheme="dark"] .index-card.card:hover .index-header a,
[data-user-color-scheme="dark"] .row.mx-auto.index-card:hover .index-header a {
  color: var(--custom-accent) !important;
}

.post-metas {
  font-family: var(--custom-font-mono);
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0.02em;
  gap: 0.8em !important;
}
[data-user-color-scheme="dark"] .post-metas {
  color: rgba(255, 255, 255, 0.55) !important;
}
.post-metas .iconfont {
  color: var(--custom-accent);
  margin-right: 0.2em;
  font-size: 0.95em;
}
[data-user-color-scheme="dark"] .post-metas .iconfont {
  color: var(--custom-accent);
}
.post-metas a {
  color: inherit;
  transition: color 0.18s ease;
}
.post-metas a:hover {
  color: var(--custom-accent) !important;
}
[data-user-color-scheme="dark"] .post-metas a:hover {
  color: var(--custom-accent) !important;
}

.index-excerpt {
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-top: 0.4em;
}
[data-user-color-scheme="dark"] .index-excerpt {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================================
 * 滚动条（细 + 主题色）
 * ============================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(33, 133, 208, 0.4);
  border-radius: 4px;
  transition: background 0.18s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--custom-primary);
}

.mode-toggle {
  transition: transform 0.2s ease, color 0.2s ease;
  color: var(--custom-primary);
}
.mode-toggle:hover {
  transform: scale(1.15) rotate(15deg);
  color: var(--custom-accent);
}

/* ============================================================
 * 文章详情页 · 极客排版
 * ============================================================ */
.post-content {
  font-size: 0.95rem;
  line-height: 1.85;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6,
#seo-header {
  /* 关键：强制浅色，不受 prefers-color-scheme 干扰 */
  color: rgba(255, 255, 255, 0.95) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  font-family: var(--custom-font-sans);
  font-weight: 700;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  letter-spacing: 0.01em;
}
.post-content h1,
.markdown-body h1,
#seo-header {
  font-size: 1.8rem;
  border-bottom: 2px solid var(--custom-accent);
  padding-bottom: 0.3em;
}
.post-content h2,
.markdown-body h2 {
  font-size: 1.45rem;
  border-bottom: 1px solid rgba(62, 220, 200, 0.25);
  padding-bottom: 0.3em;
}
.post-content h3,
.markdown-body h3 {
  font-size: 1.2rem;
  color: var(--custom-accent) !important;
  -webkit-text-fill-color: var(--custom-accent) !important;
}
.post-content h4,
.markdown-body h4 {
  font-size: 1.05rem;
  color: var(--custom-primary) !important;
  -webkit-text-fill-color: var(--custom-primary) !important;
}
.post-content h2 .headerlink,
.post-content h3 .headerlink,
.post-content h1 .headerlink,
.markdown-body h1 .headerlink,
.markdown-body h2 .headerlink,
.markdown-body h3 .headerlink {
  opacity: 0;
  transition: opacity 0.18s ease;
  margin-left: 0.4em;
  color: var(--custom-accent) !important;
  -webkit-text-fill-color: var(--custom-accent) !important;
}
.post-content h2:hover .headerlink,
.post-content h3:hover .headerlink,
.post-content h1:hover .headerlink {
  opacity: 1;
}

.post-content blockquote,
.markdown-body blockquote {
  border-left: 3px solid var(--custom-accent);
  background: rgba(62, 220, 200, 0.08);
  padding: 0.8em 1.2em;
  margin: 1.5em 0;
  border-radius: 0 var(--custom-radius) var(--custom-radius) 0;
  color: rgba(255, 255, 255, 0.88) !important;
  font-style: normal;
}

code {
  font-family: var(--custom-font-mono);
  font-size: 0.88em;
  background: rgba(62, 220, 200, 0.15) !important;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--custom-accent) !important;
  -webkit-text-fill-color: var(--custom-accent) !important;
}
[data-user-color-scheme="dark"] code {
  background: rgba(62, 220, 200, 0.18) !important;
  color: var(--custom-accent) !important;
}
pre code {
  background: transparent !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  padding: 0;
  font-size: 0.85em;
}

/* hr 分隔线（深色背景下可见）*/
.post-content hr,
.markdown-body hr {
  border-top: 1px solid rgba(62, 220, 200, 0.3) !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* markdown-body 正文颜色（强制淺色）*/
.markdown-body,
.markdown-body p,
.markdown-body li,
.markdown-body strong,
.markdown-body em,
.markdown-body a {
  color: rgba(255, 255, 255, 0.85) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
}
.markdown-body a {
  color: var(--custom-accent) !important;
  -webkit-text-fill-color: var(--custom-accent) !important;
}

.post-content table,
.markdown-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--custom-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(62, 220, 200, 0.2) !important;
  margin: 1.2em 0;
}
[data-user-color-scheme="dark"] .post-content table {
  border-color: rgba(255, 255, 255, 0.08);
}
.post-content th,
.post-content td,
.markdown-body th,
.markdown-body td {
  padding: 0.65em 1em;
  border-bottom: 1px solid rgba(62, 220, 200, 0.15) !important;
  text-align: left;
  color: rgba(255, 255, 255, 0.88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}
.post-content th,
.markdown-body th {
  background: rgba(62, 220, 200, 0.12) !important;
  font-weight: 600;
  font-family: var(--custom-font-mono);
  font-size: 0.9em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--custom-accent) !important;
  -webkit-text-fill-color: var(--custom-accent) !important;
}
[data-user-color-scheme="dark"] .post-content th {
  background: rgba(62, 220, 200, 0.12) !important;
}

.sidebar,
#toc {
  font-family: var(--custom-font-mono);
  font-size: 0.85rem;
}
.toc-header {
  font-family: var(--custom-font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem !important;
  color: var(--custom-accent) !important;
  -webkit-text-fill-color: var(--custom-accent) !important;
}
[data-user-color-scheme="dark"] .toc-header {
  color: var(--custom-accent) !important;
  -webkit-text-fill-color: var(--custom-accent) !important;
}

/* 侧边栏 TOC 文字 */
.sidebar,
#toc,
.toc-link,
.sidebar a,
#toc a {
  color: rgba(255, 255, 255, 0.8) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
}

.license-box {
  border-radius: var(--custom-radius) !important;
  border: 1px solid rgba(33, 133, 208, 0.15) !important;
  background: rgba(33, 133, 208, 0.03) !important;
}
.license-title {
  font-family: var(--custom-font-mono) !important;
  font-weight: 700 !important;
}
.license-icon {
  color: var(--custom-primary);
}

footer.footer {
  border-top: 1px solid rgba(62, 220, 200, 0.2) !important;
  font-family: var(--custom-font-sans);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
  background: rgba(10, 16, 24, 0.5) !important;
}
footer.footer a {
  color: var(--custom-accent) !important;
  -webkit-text-fill-color: var(--custom-accent) !important;
}
[data-user-color-scheme="dark"] footer.footer {
  border-top-color: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}