/*=========================================================
   全局变量层 (:root) — 统一调整整站风格
   以下变量主题默认已定义，这里覆盖即可全局生效。
   想改哪个，取消该行注释并改值。
   /* =========================================================  */
/* :root { */
  /* —— 背景与文字 —— */
  /* --global-bg: #ffffff;       整站背景色 */
  /* --font-color: #1F2D3D;      正文默认文字颜色 */
  /* --text-highlight-color: #1F2D3D;  标题/高亮文字颜色 */

  /* —— 卡片 —— */
  /* --card-bg: #ffffff;         所有卡片背景色 */
  /* --card-meta: #858585;       卡片元信息(日期/分类)文字色 */
  /* --card-box-shadow: 0 3px 8px 6px rgba(7,17,27,.05);   卡片默认阴影 */
  /* --card-hover-box-shadow: 0 3px 8px 6px rgba(7,17,27,.09);  卡片悬停阴影 */

  /* —— 主题色 / 按钮 —— */
  /* --default-bg-color: #3b70fc;   主题主色 */
  /* --btn-bg: #3b70fc;             按钮背景色 */
  /* --btn-color: #fff;             按钮文字色 */
  /* --btn-hover-color: #ff7242;    按钮悬停色 */

  /* —— 侧边栏 —— */
  /* --sidebar-bg: #f6f8fa;         侧边栏背景色 */
  /* --sidebar-menu-bg: #ffffff;    侧边栏菜单背景 */

  /* —— 正文排版 —— */
  /* --text-bg-hover: rgba(27,31,35,.05);   正文选中/背景 */
  /* --blockquote-color: #6a737d;   引用文字色 */
  /* --blockquote-bg: rgba(73,177,245,.1);  引用背景色 */
  /* --line-height: 2;              正文行高 */
  /* --global-font-size: 15px;      全局字号 */

  /* —— 其它 —— */
  /* --hr-border: #A4D8FA;          分割线颜色 */
  /* --scrollbar-color: #3b70fc;    滚动条颜色 */
  /* --toc-link-color: #666261;     目录链接颜色 */
  /* --pseudo-hover: #ff7242;       伪元素悬停色 */
  /* --light-grey: #EEEEEE;         浅灰 */
  /* --dark-grey: #cacaca;          深灰 */
  /* --headline-presudo: #a0a0a0;   标题装饰点颜色 */
/* } */

/* 深色模式下的全局变量覆盖 */
/* [data-theme="dark"] { */
  /* --global-bg: #0d0d0d;      深色整站背景 */
  /* --font-color: #dcdcdc;     深色正文文字 */
  /* --text-highlight-color: #dcdcdc;  深色标题文字 */
  /* --card-bg: #1f1f1f;        深色卡片背景 */
  /* --card-meta: #a0a0a0;      深色卡片元信息 */
  /* --card-box-shadow: 0 3px 8px 6px rgba(0,0,0,.2);  深色卡片阴影 */
  /* --card-hover-box-shadow: 0 3px 8px 6px rgba(0,0,0,.3); */
  /* --sidebar-bg: #1b1b1b;     深色侧边栏背景 */
  /* --blockquote-bg: rgba(73,177,245,.15); */
/* } */

/* =========================================================
   页眉与页脚
   ========================================================= */
#footer,
#page-header,
#footer::before,
#page-header::before {
  background: transparent !important;
}

/* =========================================================
   页脚运行时间
   ========================================================= */

#workboard {
  width: 100%;
  overflow: hidden;
  text-align: center;
}

#runtime {
  display: inline-block;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  margin-top: 14px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(59, 112, 252, 0.75),
    rgba(0, 196, 182, 0.65)
  );
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#runtime::before {
  content: "\23F1";
  margin-right: 8px;
}

#runtime:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(0, 196, 182, 0.45);
}

[data-theme="dark"] #runtime {
  border-color: rgba(255, 255, 255, 0.25);
  background: linear-gradient(
    135deg,
    rgba(30, 64, 175, 0.8),
    rgba(15, 118, 110, 0.8)
  );
}

/* =========================================================
   减少动画
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #runtime {
    transition: none;
  }

  #runtime:hover {
    transform: none;
  }
}

/* =========================================================
   自定义字体
   ========================================================= */

@font-face {
  font-family: "YouSheHaoShenTi";
  src: url("/font/YouSheHaoShenTi/YSHaoShenTi-2.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ===== 作者卡片渐变背景 ===== */
/* 卡片整体 */
#aside-content .card-info {
  background-image:
    linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%),
    linear-gradient(135deg, #141e30 0%, #243b55 100%) !important;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 0% 0%, 100% 100%;
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
  transition: background-size 1s ease;
}

/* 作者名 */
#aside-content .card-info .author-info-name {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* 作者签名 */
#aside-content .card-info .author-info-description {
  color: rgba(255,255,255,.9);
}
/* 站点数据（文章/标签/分类计数） */
#aside-content .card-info .site-data .headline,
#aside-content .card-info .site-data .length-num {
  color: #fff;
}
/* 社交图标 */
#aside-content .card-info .card-info-social-icons .social-icon {
  color: rgba(255,255,255,.9);
}
#aside-content .card-info .card-info-social-icons .social-icon:hover {
  color: #fff;
}
/* Follow Me 按钮 */
#aside-content .card-info #card-info-btn {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35);
}
#aside-content .card-info #card-info-btn:hover {
  background: rgba(255,255,255,.92) !important;
  color: #667eea !important;
}
/* 头像 */
#aside-content .card-info .avatar-img img {
  border: 3px solid rgba(255,255,255,.85);
}
/* ===== 作者卡片 - 深色模式微调 ===== */
[data-theme="dark"] #aside-content .card-info {
  background-size: 100% 100%, 100% 100% !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
/* ===== 电子钟美化 ===== */
#aside-content .card-clock {
  --clock-bg: linear-gradient(135deg, #f8fbff, #dcecf5);
  --clock-inner-bg: rgba(255, 255, 255, 0.58);
  --clock-text: #243746;
  --clock-muted: #607887;
  --clock-border: rgba(67, 132, 157, 0.25);
  --clock-shadow: 0 8px 24px rgba(67, 111, 130, 0.2);

  overflow: hidden;
  border-radius: 16px;
  background: var(--clock-bg) !important;
  box-shadow: var(--clock-shadow);
  transition: background 0.35s ease, box-shadow 0.35s ease,
    transform 0.3s ease;
}

#aside-content .card-clock:hover {
  transform: translateY(-3px);
}

#aside-content .card-clock .card-background {
  height: auto;
  margin: 12px;
  padding: 4px;
  border-radius: 11px;
  background: var(--clock-inner-bg) !important;
  border: 1px solid var(--clock-border);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.35);
  transition: background 0.35s ease, border-color 0.35s ease;
}

#aside-content .card-clock #hexo_electric_clock {
  padding: 16px 12px 12px;
}

#aside-content .card-clock .clock-row {
  min-height: 28px;
  align-items: center;
  color: var(--clock-text);
  transition: color 0.35s ease;
}

#aside-content .card-clock .card-clock-time {
  margin: 3px 0 5px;
  color: var(--clock-text);
  font-size: 38px;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(73, 164, 190, 0.35);
}

#aside-content .card-clock .card-clock-weather,
#aside-content .card-clock .card-clock-location,
#aside-content .card-clock .card-clock-windDir {
  color: var(--clock-text);
}

#aside-content .card-clock .card-clock-clockdate,
#aside-content .card-clock .card-clock-humidity,
#aside-content .card-clock .card-clock-dackorlight {
  color: var(--clock-muted);
}

[data-theme="dark"] #aside-content .card-clock {
  --clock-bg: linear-gradient(135deg, #101c29, #1e3b4a);
  --clock-inner-bg: rgba(9, 24, 34, 0.58);
  --clock-text: #edfaff;
  --clock-muted: #afd0dc;
  --clock-border: rgba(143, 220, 239, 0.25);
  --clock-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

@media screen and (max-width: 500px) {
  #aside-content .card-clock .card-clock-time {
    font-size: 32px;
  }

  #aside-content .card-clock .card-background {
    margin: 8px;
  }
}

.resource-hub {
  --resource-ink: #183a37;
  --resource-muted: #647875;
  --resource-accent: #e16b3d;
  --resource-line: #dce8e3;
  --resource-surface: #f5faf7;
  --resource-button: #ffffff;
  position: relative;
  padding: 10px 0 28px;
  color: var(--resource-ink);
}

.resource-hub > hr {
  margin: 36px 0 28px;
  border: 0;
  border-top: 1px solid var(--resource-line);
}

.resource-hub h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 38px 0 22px;
  padding: 12px 16px;
  border-left: 5px solid var(--resource-accent);
  border-bottom: 1px solid var(--resource-line);
  background: var(--resource-surface);
  color: var(--resource-ink);
  letter-spacing: 0;
}

.resource-hub h3 {
  margin: 30px 0 10px;
  color: var(--resource-ink);
  font-size: 1.05em;
  letter-spacing: 0;
}

.resource-hub h3::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 9px 3px 1px;
  border-radius: 50%;
  background: var(--resource-accent);
}

.resource-hub > p,
.resource-hub blockquote {
  color: var(--resource-muted);
}

.resource-hub .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 22px;
}

.resource-hub .btns .button {
  min-width: 88px;
  margin: 0;
  padding: 7px 13px;
  border: 1px solid var(--resource-line);
  border-radius: 6px;
  background: var(--resource-button);
  color: var(--resource-ink);
  box-shadow: 0 3px 10px rgba(24, 58, 55, 0.06);
  font-size: 13px;
  transition: transform 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.resource-hub .btns .button:hover {
  transform: translateY(-2px);
  border-color: var(--resource-accent);
  color: var(--resource-accent);
  box-shadow: 0 7px 16px rgba(225, 107, 61, 0.14);
}

.resource-hub .note,
.resource-hub .tip {
  border-radius: 6px;
  box-shadow: none;
}

.resource-hub .toc {
  padding: 16px 20px;
  border: 1px solid var(--resource-line);
  border-radius: 6px;
  background: var(--resource-surface);
}

[data-theme="dark"] .resource-hub {
  --resource-ink: #e1f0eb;
  --resource-muted: #a7bbb5;
  --resource-line: #31504a;
  --resource-surface: #172b28;
  --resource-button: #203a36;
}

@media screen and (max-width: 600px) {
  .resource-hub h2 {
    padding: 10px 12px;
    font-size: 1.15em;
  }

  .resource-hub .btns .button {
    flex: 1 1 110px;
    text-align: center;
  }
}