/* =========================================================
   博客园完整自定义 CSS：DeepDrink Card Theme
   ---------------------------------------------------------
   使用场景：
   1. 已勾选“禁用模板默认 CSS”
   2. 页面定制 CSS 代码中直接粘贴本文件
   3. 不需要 JS
   4. 不依赖外部字体、外部图片、外部 CDN

   适配目标：
   - 博客园顶部公共导航
   - 博客标题区
   - 博客导航
   - 首页文章列表
   - 文章详情页
   - 侧边栏公告 / 日历 / 搜索 / 分类
   - 评论区
   - highlight.js 代码块
   - 行号代码块
   - 移动端

   注意：
   1. 这份是“禁用模板默认 CSS”后使用的完整 CSS。
   2. 不要和其他完整主题 CSS 混用。
   3. 不要同时粘贴我前面给你的那些 CSS。
   ========================================================= */


/* =========================================================
   0. 主题变量区
   ---------------------------------------------------------
   你之后想改颜色、宽度、圆角、阴影，优先改这里。
   ========================================================= */

:root {
  /* 页面最大宽度 */
  --dd-site-width: 1240px;

  /* 侧边栏宽度 */
  --dd-sidebar-width: 310px;

  /* 主内容和侧边栏间距 */
  --dd-gap: 26px;

  /* 主色 */
  --dd-primary: #2563eb;

  /* 主色 hover */
  --dd-primary-hover: #1d4ed8;

  /* 主色浅背景 */
  --dd-primary-soft: #eff6ff;

  /* 辅助色 */
  --dd-accent: #06b6d4;

  /* 页面背景 */
  --dd-bg: #f4f7fb;

  /* 页面柔和背景 */
  --dd-bg-soft: #eef2f7;

  /* 卡片背景 */
  --dd-card: #ffffff;

  /* 卡片浅背景 */
  --dd-card-soft: #f8fafc;

  /* 正文主文字 */
  --dd-text: #0f172a;

  /* 正文次级文字 */
  --dd-text-soft: #334155;

  /* 弱文字 */
  --dd-muted: #64748b;

  /* 更弱文字 */
  --dd-muted-light: #94a3b8;

  /* 边框 */
  --dd-border: #e5e7eb;

  /* 浅边框 */
  --dd-border-soft: #f1f5f9;

  /* 代码块背景 */
  --dd-code-bg: #0f172a;

  /* 代码块文字 */
  --dd-code-text: #e5e7eb;

  /* 行内代码背景 */
  --dd-inline-code-bg: #f1f5f9;

  /* 行内代码文字 */
  --dd-inline-code-text: #e11d48;

  /* 小圆角 */
  --dd-radius-sm: 8px;

  /* 中圆角 */
  --dd-radius-md: 12px;

  /* 大圆角 */
  --dd-radius-lg: 18px;

  /* 超大圆角 */
  --dd-radius-xl: 26px;

  /* 胶囊圆角 */
  --dd-radius-full: 999px;

  /* 卡片阴影 */
  --dd-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

  /* 悬浮阴影 */
  --dd-shadow-hover: 0 18px 45px rgba(15, 23, 42, 0.14);

  /* 顶部导航阴影 */
  --dd-shadow-nav: 0 8px 26px rgba(15, 23, 42, 0.08);

  /* 主字体 */
  --dd-font:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Microsoft YaHei",
    "PingFang SC",
    "Helvetica Neue",
    Arial,
    sans-serif;

  /* 代码字体 */
  --dd-code-font:
    "SF Mono",
    Consolas,
    Menlo,
    Monaco,
    "Courier New",
    monospace;

  /* 动画速度 */
  --dd-transition: 0.22s ease;
}


/* =========================================================
   1. 全局重置
   ---------------------------------------------------------
   禁用模板默认 CSS 后，页面会回到浏览器原始样式。
   这里先把默认 margin、box-sizing、字体等统一掉。
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--dd-text);
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.16), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(6, 182, 212, 0.14), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, var(--dd-bg) 420px, var(--dd-bg) 100%);
  font-family: var(--dd-font);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
input,
button,
textarea,
select {
  font-family: var(--dd-font);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--dd-primary);
  text-decoration: none;
  transition:
    color var(--dd-transition),
    background var(--dd-transition),
    border-color var(--dd-transition),
    box-shadow var(--dd-transition),
    transform var(--dd-transition);
}

a:hover {
  color: var(--dd-primary-hover);
}

::selection {
  color: #ffffff;
  background: var(--dd-primary);
}


/* =========================================================
   2. 滚动条美化
   ---------------------------------------------------------
   只在支持 WebKit 滚动条的浏览器中生效。
   不支持也不会影响页面。
   ========================================================= */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--dd-bg-soft);
}

::-webkit-scrollbar-thumb {
  border-radius: var(--dd-radius-full);
  background: rgba(100, 116, 139, 0.45);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.7);
}


/* =========================================================
   3. 博客园顶部公共导航
   ---------------------------------------------------------
   对应页面最上方“博客园、会员、周边、新闻、博问...”那一栏。
   注意：
   这一栏博客园公共样式可能还会加载，所以这里只做轻量接管。
   ========================================================= */

#top_nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 52px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--dd-shadow-nav);
  backdrop-filter: blur(14px);
}

/* 顶部导航内的链接 */
#top_nav a {
  color: var(--dd-text-soft);
  font-size: 14px;
  font-weight: 600;
}

#top_nav a:hover {
  color: var(--dd-primary);
}

/* 顶部导航里的搜索框 */
#top_nav input[type="text"],
#top_nav input[type="search"] {
  min-height: 32px;
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-full);
  color: var(--dd-text);
  background: #ffffff;
  outline: none;
}

#top_nav input[type="text"]:focus,
#top_nav input[type="search"]:focus {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* =========================================================
   4. 博客整体容器
   ---------------------------------------------------------
   #home 是博客主体大容器。
   禁用模板 CSS 后，必须给它重新设置宽度和居中。
   ========================================================= */

#home {
  width: min(var(--dd-site-width), calc(100% - 32px));
  margin: 0 auto;
  padding: 26px 0 34px;
}


/* =========================================================
   5. 博客标题区
   ---------------------------------------------------------
   对应：
   - 博客标题 deepdrink
   - 博客子标题
   ========================================================= */

#header {
  margin: 0;
  padding: 0;
}

#blogTitle {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
  padding: 42px 38px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--dd-radius-xl);
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(6, 182, 212, 0.9)),
    var(--dd-primary);
  box-shadow: 0 22px 55px rgba(37, 99, 235, 0.25);
}

/* 标题区装饰光斑 */
#blogTitle::before {
  content: "";
  position: absolute;
  right: -72px;
  top: -82px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

#blogTitle::after {
  content: "";
  position: absolute;
  left: 42%;
  bottom: -110px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

/* 标题文字放在装饰层上面 */
#blogTitle h1,
#blogTitle h2 {
  position: relative;
  z-index: 1;
  margin: 0;
}

/* 博客主标题 */
#blogTitle h1 {
  color: #ffffff;
  font-size: 38px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: 0.4px;
}

/* 博客主标题链接 */
#blogTitle h1 a,
#Header1_HeaderTitle {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* 博客副标题 */
#blogTitle h2 {
  max-width: 760px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}

/* 没有副标题时隐藏空白 */
#blogTitle h2:empty {
  display: none;
}


/* =========================================================
   6. 博客导航栏
   ---------------------------------------------------------
   对应：
   首页、新随笔、联系、订阅、管理
   ========================================================= */

#navigator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 24px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--dd-radius-lg);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--dd-shadow);
  backdrop-filter: blur(10px);
}

/* 有些模板会出现“导航”标题，顶部导航里不需要它 */
#navigator h3 {
  display: none;
}

/* 导航列表 */
#navList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#navList li {
  margin: 0;
  padding: 0;
}

/* 导航链接 */
#navList a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border-radius: var(--dd-radius-full);
  color: var(--dd-text-soft);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* 导航 hover */
#navList a:hover {
  color: var(--dd-primary);
  background: var(--dd-primary-soft);
}

/* 随笔数、阅读数等统计 */
.blogStats {
  color: var(--dd-muted);
  font-size: 13px;
  white-space: nowrap;
}


/* =========================================================
   7. 主体布局
   ---------------------------------------------------------
   禁用模板默认 CSS 后，主内容和侧边栏会变成上下排列。
   这里重新设置成左正文、右侧边栏。
   ========================================================= */

#main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--dd-sidebar-width);
  gap: var(--dd-gap);
  align-items: start;
}

/* 主内容区域 */
#mainContent {
  min-width: 0;
}

/* 博客园常见主内容内层 */
.forFlow {
  min-width: 0;
}

/* 侧边栏区域 */
#sideBar {
  min-width: 0;
}


/* =========================================================
   8. 通用卡片样式
   ---------------------------------------------------------
   下面很多区域都会用到类似卡片效果。
   ========================================================= */

.day,
.entrylistItem,
#topics,
#blog-comments-placeholder,
#comment_form,
#sideBarMain > div,
.newsItem,
.catList,
#blog-calendar,
#sidebar_search,
#sidebar_shortcut,
#sidebar_categories,
#sidebar_recentposts,
#sidebar_topviews,
#sidebar_topdiggedposts,
#sidebar_topcommentedposts {
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--dd-shadow);
}


/* =========================================================
   9. 首页文章列表
   ---------------------------------------------------------
   对应首页文章摘要卡片。
   ========================================================= */

.day,
.entrylistItem {
  position: relative;
  margin-bottom: 22px;
  padding: 24px;
  transition:
    transform var(--dd-transition),
    box-shadow var(--dd-transition),
    border-color var(--dd-transition);
}

/* 卡片 hover */
.day:hover,
.entrylistItem:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.26);
  box-shadow: var(--dd-shadow-hover);
}

/* 首页日期 */
.dayTitle {
  margin: 0 0 14px;
  color: var(--dd-muted);
  font-size: 14px;
  font-weight: 700;
}

/* 日期链接做成小标签 */
.dayTitle a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--dd-radius-full);
  color: var(--dd-primary);
  background: var(--dd-primary-soft);
  font-size: 13px;
  text-decoration: none;
}

/* 首页文章标题 */
.postTitle,
.entrylistPosttitle {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 900;
}

/* 首页文章标题链接 */
.postTitle a,
.postTitle2,
.entrylistPosttitle a {
  color: var(--dd-text) !important;
  text-decoration: none !important;
}

.postTitle a:hover,
.postTitle2:hover,
.entrylistPosttitle a:hover {
  color: var(--dd-primary) !important;
}

/* 首页摘要 */
.postCon,
.c_b_p_desc,
.entrylistPostSummary {
  color: var(--dd-text-soft);
  font-size: 15.5px;
  line-height: 1.9;
}

/* 摘要段落 */
.postCon p,
.c_b_p_desc p,
.entrylistPostSummary p {
  margin: 0 0 0.8em;
}

/* 阅读全文 */
.c_b_p_desc_readmore,
a.c_b_p_desc_readmore {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 10px;
  padding: 0 12px;
  border-radius: var(--dd-radius-full);
  color: #ffffff !important;
  background: var(--dd-primary);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}

.c_b_p_desc_readmore:hover,
a.c_b_p_desc_readmore:hover {
  color: #ffffff !important;
  background: var(--dd-primary-hover);
  transform: translateY(-1px);
}

/* 首页文章底部信息 */
.postDesc,
.entrylistItemPostDesc {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--dd-border-soft);
  color: var(--dd-muted);
  font-size: 13px;
  line-height: 1.7;
}

.postDesc a,
.entrylistItemPostDesc a {
  color: var(--dd-primary);
  font-weight: 700;
}


/* =========================================================
   10. 分页
   ---------------------------------------------------------
   首页底部分页、列表页分页等。
   ========================================================= */

#homepage_top_pager,
#homepage_bottom_pager,
.pager,
.Pager,
.topicListFooter {
  margin: 18px 0;
  text-align: center;
}

#homepage_top_pager a,
#homepage_bottom_pager a,
.pager a,
.Pager a,
.topicListFooter a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  margin: 3px;
  padding: 0 10px;
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-full);
  color: var(--dd-text-soft);
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

#homepage_top_pager a:hover,
#homepage_bottom_pager a:hover,
.pager a:hover,
.Pager a:hover,
.topicListFooter a:hover {
  color: #ffffff;
  border-color: var(--dd-primary);
  background: var(--dd-primary);
}


/* =========================================================
   11. 文章详情页容器
   ---------------------------------------------------------
   #topics 是文章页主体容器。
   ========================================================= */

#topics {
  margin-bottom: 22px;
  padding: 30px;
}

/* 避免文章页内部 .post 再被做成卡片 */
#topics .post {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* 文章页标题 */
#topics .postTitle {
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dd-border);
  font-size: 30px;
  line-height: 1.35;
}

/* 文章页标题链接 */
#topics .postTitle a {
  color: var(--dd-text) !important;
}


/* =========================================================
   12. 文章正文基础
   ---------------------------------------------------------
   #cnblogs_post_body 是博客园文章正文核心区域。
   这里决定阅读体验。
   ========================================================= */

#cnblogs_post_body {
  color: var(--dd-text-soft);
  font-size: 16px;
  line-height: 1.95;
  word-break: break-word;
}

/* 正文段落 */
#cnblogs_post_body p {
  margin: 0 0 1.05em;
}

/* 正文强文本 */
#cnblogs_post_body strong,
#cnblogs_post_body b {
  color: var(--dd-text);
  font-weight: 800;
}

/* 正文斜体 */
#cnblogs_post_body em,
#cnblogs_post_body i {
  color: var(--dd-text-soft);
}

/* 正文链接 */
#cnblogs_post_body a {
  color: var(--dd-primary);
  border-bottom: 1px dashed rgba(37, 99, 235, 0.45);
  text-decoration: none;
}

#cnblogs_post_body a:hover {
  color: var(--dd-primary-hover);
  border-bottom-color: var(--dd-primary-hover);
}


/* =========================================================
   13. 正文标题
   ========================================================= */

#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5,
#cnblogs_post_body h6 {
  color: var(--dd-text);
  line-height: 1.45;
  font-weight: 900;
  scroll-margin-top: 82px;
}

/* 一级标题 */
#cnblogs_post_body h1 {
  margin: 1.55em 0 0.75em;
  font-size: 30px;
}

/* 二级标题 */
#cnblogs_post_body h2 {
  position: relative;
  margin: 1.65em 0 0.8em;
  padding-left: 15px;
  font-size: 25px;
}

/* 二级标题左侧渐变线 */
#cnblogs_post_body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.24em;
  width: 5px;
  height: 1.28em;
  border-radius: var(--dd-radius-full);
  background: linear-gradient(180deg, var(--dd-primary), var(--dd-accent));
}

/* 三级标题 */
#cnblogs_post_body h3 {
  margin: 1.45em 0 0.75em;
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--dd-border);
  font-size: 21px;
}

/* 四级标题 */
#cnblogs_post_body h4 {
  margin: 1.25em 0 0.65em;
  font-size: 18px;
}

/* 五级、六级标题 */
#cnblogs_post_body h5,
#cnblogs_post_body h6 {
  margin: 1.15em 0 0.55em;
  font-size: 16px;
}


/* =========================================================
   14. 正文列表
   ========================================================= */

#cnblogs_post_body ul,
#cnblogs_post_body ol {
  margin: 0.7em 0 1.1em;
  padding-left: 1.65em;
}

#cnblogs_post_body li {
  margin: 0.28em 0;
}

#cnblogs_post_body li::marker {
  color: var(--dd-primary);
  font-weight: 800;
}


/* =========================================================
   15. 引用块
   ========================================================= */

#cnblogs_post_body blockquote {
  position: relative;
  margin: 20px 0;
  padding: 16px 18px 16px 20px;
  border-left: 5px solid var(--dd-primary);
  border-radius: var(--dd-radius-md);
  color: var(--dd-text-soft);
  background: linear-gradient(90deg, var(--dd-primary-soft), #ffffff);
}

#cnblogs_post_body blockquote p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   16. 分割线
   ========================================================= */

#cnblogs_post_body hr {
  height: 1px;
  margin: 30px 0;
  border: none;
  background: linear-gradient(90deg, transparent, var(--dd-border), transparent);
}


/* =========================================================
   17. 正文图片
   ========================================================= */

#cnblogs_post_body img {
  display: block;
  max-width: 100%;
  margin: 18px auto;
  border-radius: var(--dd-radius-md);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}

/* 图片 hover 轻微浮起 */
#cnblogs_post_body img:hover {
  transform: translateY(-1px);
  transition: transform var(--dd-transition);
}


/* =========================================================
   18. 正文表格
   ---------------------------------------------------------
   注意：
   这里是普通正文表格样式。
   代码行号表格会在后面单独排除。
   ========================================================= */

#cnblogs_post_body table:not(.hljs-ln) {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  border-radius: var(--dd-radius-md);
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--dd-border);
}

#cnblogs_post_body table:not(.hljs-ln) th,
#cnblogs_post_body table:not(.hljs-ln) td {
  padding: 10px 12px;
  border: 1px solid var(--dd-border);
  text-align: left;
}

#cnblogs_post_body table:not(.hljs-ln) th {
  color: var(--dd-text);
  background: var(--dd-card-soft);
  font-weight: 800;
}

#cnblogs_post_body table:not(.hljs-ln) tr:nth-child(even) td {
  background: rgba(148, 163, 184, 0.06);
}


/* =========================================================
   19. 代码块：基础样式
   ---------------------------------------------------------
   兼容：
   - highlight.js
   - 博客园旧 cnblogs_code
   - 普通 pre code
   - 行号表格
   ========================================================= */

/* 行内代码 */
#cnblogs_post_body code {
  margin: 0 2px;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--dd-inline-code-text);
  background: var(--dd-inline-code-bg);
  font-family: var(--dd-code-font);
  font-size: 0.92em;
}

/* 多行代码外层 */
#cnblogs_post_body pre,
#cnblogs_post_body .cnblogs_code {
  max-width: 100%;
  margin: 20px 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--dd-radius-md);
  color: var(--dd-code-text);
  background: var(--dd-code-bg);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
  overflow-x: auto;
}

/* highlight.js 主体 */
#cnblogs_post_body .hljs,
#cnblogs_post_body code.hljs {
  color: var(--dd-code-text);
  background: transparent;
}

/* pre 里的 code 不再使用行内代码样式 */
#cnblogs_post_body pre code,
#cnblogs_post_body .cnblogs_code code {
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font-family: var(--dd-code-font);
  font-size: 14px;
  line-height: 1.8;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
}

/* 旧版 cnblogs_code 里的 pre */
#cnblogs_post_body .cnblogs_code pre {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}


/* =========================================================
   20. 代码块：行号兼容
   ---------------------------------------------------------
   博客园开启“显示行号”后，highlight.js 常见结构：
   table.hljs-ln
   td.hljs-ln-numbers
   td.hljs-ln-code

   这里防止行号表格继承普通表格样式导致炸宽。
   ========================================================= */

#cnblogs_post_body table.hljs-ln {
  width: max-content;
  min-width: 100%;
  margin: 0;
  border: none;
  border-collapse: collapse;
  background: transparent;
  box-shadow: none;
}

#cnblogs_post_body table.hljs-ln tr,
#cnblogs_post_body table.hljs-ln td,
#cnblogs_post_body table.hljs-ln th {
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 1.8;
}

/* 行号列 */
#cnblogs_post_body .hljs-ln-line.hljs-ln-numbers {
  width: 3.4em;
  min-width: 3.4em;
  padding-right: 12px !important;
  color: #94a3b8 !important;
  text-align: right;
  white-space: nowrap;
  user-select: none;
  vertical-align: top;
}

/* 代码列 */
#cnblogs_post_body .hljs-ln-line.hljs-ln-code {
  padding-left: 12px !important;
  white-space: pre !important;
  vertical-align: top;
}


/* =========================================================
   21. 文章底部信息
   ---------------------------------------------------------
   分类、标签、上一篇下一篇等。
   ========================================================= */

#BlogPostCategory,
#EntryTag,
#post_next_prev,
#green_channel,
#author_profile,
#div_digg {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-md);
  color: var(--dd-muted);
  background: var(--dd-card-soft);
  font-size: 14px;
}

#BlogPostCategory a,
#EntryTag a,
#post_next_prev a,
#green_channel a,
#author_profile a,
#div_digg a {
  color: var(--dd-primary);
  font-weight: 700;
}


/* =========================================================
   22. 侧边栏整体
   ---------------------------------------------------------
   右侧公告、日历、搜索、分类、排行等。
   ========================================================= */

#sideBar {
  color: var(--dd-text-soft);
  font-size: 14px;
}

#sideBarMain {
  display: grid;
  gap: 18px;
}

/* 侧边栏模块 */
#sideBarMain > div,
.newsItem,
.catList,
#blog-calendar,
#sidebar_search,
#sidebar_shortcut,
#sidebar_categories,
#sidebar_recentposts,
#sidebar_topviews,
#sidebar_topdiggedposts,
#sidebar_topcommentedposts {
  margin: 0;
  padding: 18px;
}

/* 侧边栏标题 */
#sideBar h3,
#sideBarMain h3,
.catListTitle {
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--dd-border);
  color: var(--dd-text);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 900;
}

/* 侧边栏链接 */
#sideBar a {
  color: var(--dd-text-soft);
  text-decoration: none;
}

#sideBar a:hover {
  color: var(--dd-primary);
}

/* 侧边栏列表 */
#sideBar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sideBar li {
  margin: 7px 0;
  color: var(--dd-muted);
}

/* 侧边栏列表链接 hover 背景 */
#sideBar li a {
  display: inline-block;
  max-width: 100%;
  border-radius: 6px;
}

#sideBar li a:hover {
  color: var(--dd-primary);
}


/* =========================================================
   23. 公告 / 个人信息
   ---------------------------------------------------------
   对应侧边栏公告区域。
   ========================================================= */

#profile_block,
#sidebar_news_content {
  color: var(--dd-text-soft);
  line-height: 1.85;
}

#profile_block a,
#sidebar_news_content a {
  color: var(--dd-primary);
  font-weight: 700;
}


/* =========================================================
   24. 日历
   ---------------------------------------------------------
   对应博客园日历模块。
   ========================================================= */

#blog-calendar,
#calendar {
  text-align: center;
}

#blog-calendar table,
#calendar table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#blog-calendar th,
#blog-calendar td,
#calendar th,
#calendar td {
  padding: 5px 2px;
  color: var(--dd-text-soft);
  text-align: center;
  font-size: 13px;
}

/* 日历标题 */
.CalTitle,
.CalTitle td {
  color: var(--dd-text) !important;
  font-weight: 900;
}

/* 日历上一月、下一月 */
.CalNextPrev a {
  color: var(--dd-primary) !important;
  font-weight: 800;
}

/* 日历星期 */
.CalDayHeader {
  color: var(--dd-muted) !important;
  font-weight: 800;
}

/* 今天 */
.CalTodayDay {
  border-radius: var(--dd-radius-sm);
  color: #ffffff !important;
  background: var(--dd-primary) !important;
}

/* 有文章的日期 */
.CalOtherMonthDay,
.CalWeekendDay,
.CalTodayDay,
.CalSelector {
  border-radius: var(--dd-radius-sm);
}


/* =========================================================
   25. 搜索框
   ---------------------------------------------------------
   侧边栏搜索。
   ========================================================= */

#sideBar input[type="text"],
#sideBar input[type="search"],
#sideBar input[type="password"],
#sideBar textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-md);
  color: var(--dd-text);
  background: #ffffff;
  outline: none;
}

#sideBar input[type="text"]:focus,
#sideBar input[type="search"]:focus,
#sideBar input[type="password"]:focus,
#sideBar textarea:focus {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

#sideBar input[type="button"],
#sideBar input[type="submit"],
#sideBar button {
  min-height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: var(--dd-radius-full);
  color: #ffffff;
  background: var(--dd-primary);
  font-weight: 800;
  cursor: pointer;
}

#sideBar input[type="button"]:hover,
#sideBar input[type="submit"]:hover,
#sideBar button:hover {
  background: var(--dd-primary-hover);
}


/* =========================================================
   26. 评论区
   ========================================================= */

#blog-comments-placeholder,
#comment_form {
  margin-top: 22px;
  padding: 24px;
}

/* 评论标题 */
#commentform_title,
.feedback_area_title {
  margin: 0 0 14px;
  color: var(--dd-text);
  font-size: 19px;
  font-weight: 900;
}

/* 单条评论 */
.feedbackItem,
.commentbox_main {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-md);
  background: var(--dd-card-soft);
}

/* 评论输入框 */
#comment_form textarea,
#tbCommentBody,
.comment_textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px;
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-md);
  color: var(--dd-text);
  background: #ffffff;
  line-height: 1.75;
  outline: none;
  resize: vertical;
}

#comment_form textarea:focus,
#tbCommentBody:focus,
.comment_textarea:focus {
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* 评论按钮 */
#btn_comment_submit,
#comment_form input[type="button"],
#comment_form input[type="submit"] {
  min-height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: var(--dd-radius-full);
  color: #ffffff;
  background: var(--dd-primary);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}

#btn_comment_submit:hover,
#comment_form input[type="button"]:hover,
#comment_form input[type="submit"]:hover {
  background: var(--dd-primary-hover);
  transform: translateY(-1px);
}


/* =========================================================
   27. 普通表单和按钮
   ---------------------------------------------------------
   兜底处理页面中的普通输入框和按钮。
   ========================================================= */

input[type="text"],
input[type="password"],
input[type="search"],
textarea,
select {
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-md);
  color: var(--dd-text);
  background: #ffffff;
  outline: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

input[type="button"],
input[type="submit"],
button {
  font-family: var(--dd-font);
}


/* =========================================================
   28. 底部 footer
   ========================================================= */

#footer {
  width: min(var(--dd-site-width), calc(100% - 32px));
  margin: 30px auto 0;
  padding: 22px 10px 30px;
  color: var(--dd-muted);
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
}

#footer a {
  color: var(--dd-primary);
  font-weight: 700;
}


/* =========================================================
   29. 其他博客园常见区域
   ========================================================= */

/* 文章列表页标题 */
.entrylistTitle,
.PostListTitle {
  margin: 0 0 18px;
  color: var(--dd-text);
  font-size: 24px;
  font-weight: 900;
}

/* 标签页、分类页说明 */
.entrylistDescription,
.category_description {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius-md);
  color: var(--dd-text-soft);
  background: var(--dd-card-soft);
}

/* 隐藏一些空元素 */
.clear {
  clear: both;
}

#under_post_news,
#under_post_kb {
  margin-top: 18px;
}


/* =========================================================
   30. 动画
   ---------------------------------------------------------
   轻微入场效果，不会太花。
   ========================================================= */

.day,
.entrylistItem,
#topics,
#sideBarMain > div,
#blog-comments-placeholder,
#comment_form {
  animation: ddFadeIn 0.32s ease both;
}

@keyframes ddFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   31. 响应式：中等屏幕
   ---------------------------------------------------------
   侧边栏改到正文下方。
   ========================================================= */

@media screen and (max-width: 1024px) {
  #home {
    width: min(100% - 24px, var(--dd-site-width));
    padding-top: 18px;
  }

  #main {
    display: block;
  }

  #sideBar {
    margin-top: 24px;
  }

  #blogTitle {
    padding: 34px 28px;
  }

  #blogTitle h1 {
    font-size: 32px;
  }

  #navigator {
    display: block;
  }

  .blogStats {
    margin-top: 8px;
    white-space: normal;
  }
}


/* =========================================================
   32. 响应式：手机
   ========================================================= */

@media screen and (max-width: 640px) {
  body {
    font-size: 15px;
  }

  #home {
    width: calc(100% - 18px);
    padding-top: 12px;
  }

  #blogTitle {
    padding: 28px 20px;
    border-radius: var(--dd-radius-lg);
  }

  #blogTitle h1 {
    font-size: 28px;
  }

  #blogTitle h2 {
    font-size: 14px;
  }

  #navigator {
    padding: 9px;
    border-radius: var(--dd-radius-md);
  }

  #navList {
    gap: 5px;
  }

  #navList a {
    min-height: 32px;
    padding: 0 10px;
    font-size: 13px;
  }

  .day,
  .entrylistItem,
  #topics,
  #blog-comments-placeholder,
  #comment_form {
    padding: 18px;
    border-radius: var(--dd-radius-md);
  }

  .postTitle,
  .entrylistPosttitle {
    font-size: 21px;
  }

  #topics .postTitle {
    font-size: 24px;
  }

  #cnblogs_post_body {
    font-size: 15.5px;
    line-height: 1.88;
  }

  #cnblogs_post_body h1 {
    font-size: 25px;
  }

  #cnblogs_post_body h2 {
    font-size: 22px;
  }

  #cnblogs_post_body h3 {
    font-size: 19px;
  }

  #cnblogs_post_body pre,
  #cnblogs_post_body .cnblogs_code {
    padding: 14px;
    border-radius: var(--dd-radius-sm);
  }

  #sideBarMain > div,
  .newsItem,
  .catList,
  #blog-calendar,
  #sidebar_search,
  #sidebar_shortcut,
  #sidebar_categories,
  #sidebar_recentposts,
  #sidebar_topviews,
  #sidebar_topdiggedposts,
  #sidebar_topcommentedposts {
    padding: 16px;
    border-radius: var(--dd-radius-md);
  }

  #footer {
    width: calc(100% - 18px);
  }
}


/* =========================================================
   33. 响应式：超小屏
   ========================================================= */

@media screen and (max-width: 420px) {
  #blogTitle {
    padding: 24px 17px;
  }

  #blogTitle h1 {
    font-size: 24px;
  }

  .day,
  .entrylistItem,
  #topics {
    padding: 16px;
  }

  .postTitle,
  .entrylistPosttitle {
    font-size: 20px;
  }

  #topics .postTitle {
    font-size: 22px;
  }

  #cnblogs_post_body h2 {
    padding-left: 12px;
  }

  #cnblogs_post_body h2::before {
    width: 4px;
  }
}