:root {
  --ngcrm-surface-1: #f4f7f8;
  --ngcrm-surface-2: #e7eef0;
  --ngcrm-edge: #d0dde2;
  --ngcrm-emphasis: #005f73;
  --ngcrm-accent: #ee9b00;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #0b6e6e;
  --md-primary-fg-color--light: #2d8a8a;
  --md-primary-fg-color--dark: #064f50;
  --md-accent-fg-color: var(--ngcrm-accent);
  --md-default-bg-color: #f8fbfc;
  --md-default-fg-color--light: #4a5a61;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1e8f8f;
  --md-primary-fg-color--light: #43a7a7;
  --md-primary-fg-color--dark: #126767;
  --md-accent-fg-color: #d9a441;
  --md-default-bg-color: #162126;
}

.md-typeset {
  font-family: "Segoe UI Variable", "Noto Sans", "Ubuntu", "Helvetica Neue", sans-serif;
  line-height: 1.68;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  letter-spacing: 0.01em;
}

/* 顶部色带：青 → 深青蓝，收在同一个色系里（原先末尾的棕色和主体不搭） */
.md-header {
  background: linear-gradient(120deg, #0e7c7b 0%, #0b5c74 55%, #0a4b63 100%);
  box-shadow: 0 6px 24px rgba(5, 35, 45, 0.25);
}

.md-tabs {
  background: linear-gradient(90deg, rgba(11, 79, 108, 0.96), rgba(12, 96, 96, 0.96));
}

.md-nav__title {
  font-weight: 700;
}

.md-nav__link--active,
.md-tabs__link--active {
  color: var(--ngcrm-accent);
}

.md-typeset table:not([class]) {
  border: 1px solid var(--ngcrm-edge);
  border-radius: 12px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background: var(--ngcrm-surface-2);
}

.md-typeset code,
.md-typeset pre code {
  font-family: "Cascadia Code", "Consolas", "Liberation Mono", monospace;
}

.md-top {
  border-radius: 999px;
}

/* ============================================================
   内容区视觉增强
   ============================================================ */

/* 暗色模式下重新定义浅色系变量，避免浅底浅字看不清 */
[data-md-color-scheme="slate"] {
  --ngcrm-surface-2: #23313a;
  --ngcrm-edge: #2b3b45;
}

/* 图片：圆角 + 轻阴影，大尺寸截图不再压迫版面 */
.md-typeset img {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(5, 35, 45, 0.08);
  cursor: zoom-in;
}

/* 二级标题的左侧色条做淡：用边框灰而不是主色，亮/暗色都协调 */
.md-typeset h2 {
  border-left: 3px solid var(--ngcrm-edge);
  padding-left: 0.6rem;
}

/* 三级标题不再染彩色：亮色下发闷、暗色下几乎看不清，只靠字重区分层级 */
.md-typeset h3 {
  font-weight: 600;
}

/* 代码块圆角 */
.md-typeset pre > code {
  border-radius: 10px;
}

/* 行内代码：只保留圆角与内边距，底色交回主题默认
   （自定义底色会让整段文字显花，影响正文观感） */
.md-typeset :not(pre) > code {
  border-radius: 4px;
  padding: 0.1em 0.32em;
}

/* 表格行悬停高亮，长表格更好读 */
.md-typeset table:not([class]) tbody tr:hover {
  background: rgba(11, 110, 110, 0.06);
}

/* 提示框统一圆角 */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
}

/* 搜索框圆角 */
.md-search__form {
  border-radius: 999px;
}

/* 返回顶部按钮跟随主色 */
.md-top {
  background-color: var(--md-primary-fg-color);
  color: #fff;
}

/* 侧边栏当前项加粗 */
.md-nav__link--active {
  font-weight: 700;
}

/* ============================================================
   首页（门户页）样式
   ============================================================ */

/* ---- Hero 区：标题 + 一句话定位 + 按钮 + 数据一览 ---- */
/* 背景用站内那幅画（images/hero-art.jpg），上面压一层半透明的径向遮罩：
   中间（文字所在处）最实、越往四角越透，这样字看得清、画面也留得住。
   想调浓淡就改下面 radial-gradient 里的 0.94 / 0.88 / 0.72 三个值
   （数字越小画面越清楚，赋给文字的对比度越低）。 */
.md-typeset .hero-box {
  margin: 0 0 1.8rem;
  padding: 3rem 1.6rem 2.2rem;
  border-radius: 18px;
  border: 1px solid var(--ngcrm-edge);
  background-color: var(--ngcrm-surface-1);
  background-image:
    radial-gradient(ellipse at center,
      rgba(250, 252, 252, 0.94) 0%,
      rgba(250, 252, 252, 0.88) 48%,
      rgba(250, 252, 252, 0.72) 100%),
    url("../images/hero-art.jpg");
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  text-align: center;
}

.md-typeset .hero-box h1 {
  margin: 0 0 0.4rem;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.md-typeset .hero-box > p {
  margin: 0 auto 1.2rem;
  max-width: 34rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hero-box .md-button {
  margin: 0.25rem 0.2rem 0;
}

/* ---- Hero 下方的数据一览：把第一屏的空当填成可读信息 ---- */
.md-typeset .hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 2.6rem;
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(11, 110, 110, 0.16);
}

.md-typeset .hero-stats strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--md-primary-fg-color);
}

.md-typeset .hero-stats span {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--md-default-fg-color--light);
}

/* ---- 卡片网格：悬停抬起 + 主色描边 ---- */
.md-typeset .grid.cards > ul > li {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.md-typeset .grid.cards > ul > li:hover {
  transform: translateY(-3px);
  border-color: var(--md-primary-fg-color);
  box-shadow: 0 10px 26px rgba(5, 35, 45, 0.13);
}

/* 卡片首行的 emoji 图标放大一点，更醒目 */
.md-typeset .grid.cards > ul > li > p:first-child {
  font-size: 1.5rem;
  line-height: 1.35;
  margin-bottom: 0.4rem;
}

/* 卡片里的"进入"链接弱化成次要色，hover 再亮起来 */
.md-typeset .grid.cards > ul > li > p:last-child a {
  font-weight: 600;
}

/* 三步使用说明的卡片：图标行不需要放那么大 */
.md-typeset .grid.cards > ul > li > p:first-child .twemoji,
.md-typeset .grid.cards > ul > li > p:first-child svg {
  vertical-align: -0.1em;
}

/* 暗色模式：同一幅画压在深色遮罩下，保证浅色文字仍然可读 */
[data-md-color-scheme="slate"] .md-typeset .hero-box {
  background-color: #1b262c;
  background-image:
    radial-gradient(ellipse at center,
      rgba(20, 30, 35, 0.95) 0%,
      rgba(20, 30, 35, 0.89) 48%,
      rgba(20, 30, 35, 0.74) 100%),
    url("../images/hero-art.jpg");
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
  border-color: #2b3b45;
}

[data-md-color-scheme="slate"] .md-typeset .hero-stats {
  border-top-color: rgba(67, 167, 167, 0.22);
}

/* ============================================================
   图片放大（点击正文图片铺满全屏）
   ============================================================ */

body.lb-locked {
  overflow: hidden;
}

.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 18, 0.93);
}

.lb-overlay.is-open {
  display: flex;
}

.lb-overlay .lb-image {
  max-width: 94vw;
  max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  cursor: zoom-out;
}

.lb-overlay .lb-btn {
  position: absolute;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease;
}

.lb-overlay .lb-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lb-overlay .lb-close {
  top: 1.2rem;
  right: 1.4rem;
  font-size: 1.9rem;
}

.lb-overlay .lb-prev,
.lb-overlay .lb-next {
  top: 50%;
  transform: translateY(-50%);
}

.lb-overlay .lb-prev {
  left: 1.4rem;
}

.lb-overlay .lb-next {
  right: 1.4rem;
}

.lb-overlay .lb-counter {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

/* 手机上按钮收小一点，别挡住图 */
@media screen and (max-width: 44.9375em) {
  .lb-overlay .lb-btn {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.3rem;
  }

  .lb-overlay .lb-prev {
    left: 0.6rem;
  }

  .lb-overlay .lb-next {
    right: 0.6rem;
  }
}

/* ============================================================
   今日人设：小装饰紧跟在页头站点标题（Ryan Wiki）后面。
   集中到页头的好处是全站每页都看得到。纯 CSS 背景实现，
   不引 JS、不影响正文内容。
   6 张缩略图排成一排：6 × 22px + 5 × 5px 间距 = 157px。

   这里必须用绝对定位：`.md-header__title` 里的 `.md-header__ellipsis`
   是占满整行的块级元素，早先的 inline-block 写法会被它挤到第二行，
   溢出到下方的导航选项卡上（正好压住「部署与运维」）。
   ============================================================ */
.md-header__title {
  position: relative;        /* 作为下面装饰的定位参照 */
}

.md-header__title::after {
  content: "";
  position: absolute;
  top: 50%;
  /* 站点名 "Ryan Wiki" 实测约 4.3rem 宽，这里取 4.8rem 留出间距；
     以后改了 site_name，这个值要跟着调。 */
  left: 4.8rem;
  transform: translateY(-50%);
  width: 157px;
  height: 22px;
  background-image:
    url("../images/persona/chibupang.jpg"),
    url("../images/persona/buchiyali.jpg"),
    url("../images/persona/fengkaobiguo.jpg"),
    url("../images/persona/shengzhijiaxin.jpg"),
    url("../images/persona/youyanbujin.jpg"),
    url("../images/persona/yiyebaofu.jpg");
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position:
    0 center, 27px center, 54px center,
    81px center, 108px center, 135px center;
  opacity: 0.9;
  pointer-events: none;      /* 纯装饰，别挡住鼠标点击 */
}

/* 页头滚起来后，Material 会把标题位换成当前页面标题（加这个类），
   这时收掉装饰，免得压在标题文字上 */
.md-header__title--active::after {
  display: none;
}

/* 窄屏：页头空间不够，收掉这排装饰 */
@media screen and (max-width: 44.9375em) {
  .md-header__title::after {
    display: none;
  }
}

/* ============================================================
   宽屏两侧留白装饰
   内容区是居中定宽的（61rem），屏幕一宽两侧就空成两条。
   这里把首页那幅画（images/hero-art.jpg）淡化后贴在两翼：
   靠屏幕外侧实一些、越往内容区越淡，纯装饰、不吃点击，
   宽度按「两侧空白实际宽度」算，不会侵入正文。
   ============================================================ */
@media screen and (min-width: 76.25em) {
  .md-main::before,
  .md-main::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(22rem, calc((100vw - 61rem) / 2));
    background-image: url("../images/hero-art.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    pointer-events: none;
  }

  .md-main::before {
    left: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
  }

  .md-main::after {
    right: 0;
    -webkit-mask-image: linear-gradient(270deg, #000 35%, transparent 100%);
    mask-image: linear-gradient(270deg, #000 35%, transparent 100%);
  }
}

/* 页脚压在最底层，别被两翼装饰盖住 */
.md-footer {
  position: relative;
  z-index: 1;
}

/* 暗色模式下画面本身偏亮，略压一点 */
[data-md-color-scheme="slate"] .md-main::before,
[data-md-color-scheme="slate"] .md-main::after {
  opacity: 0.18;
}