/* ==========================================================================
   PrismQML 文档站定制样式
   风格参考：Kaleidos frontend（纸面浅灰底 + 墨色文字 + 蓝色点缀 +
   细边框圆角卡片）。色板与 Kaleidos src/server-rust/crates/api/static
   frontend/styles.css 的 :root 变量对齐：
   --paper #f6f8fb / --ink #15222b / --blue #2e83c2 / --line #dbe3e7
   深色模式对应 Kaleidos 管理后台的 #131518 底色。
   ========================================================================== */

:root > *,
[data-md-color-scheme="default"] {
  /* Kaleidos 主色板 */
  --md-primary-fg-color: #15222b;
  --md-primary-bg-color: #f6f8fb;
  --md-accent-fg-color: #2e83c2;
  --md-typeset-a-color: #2e83c2;

  /* 正文与背景 */
  --md-default-bg-color: #f6f8fb;
  --md-typeset-color: #2a3944;
  --md-default-fg-color--light: #65747e;
  --md-default-fg-color--lightest: #93a0a8;

  /* 细线边框与柔和阴影（Kaleidos 卡片手感） */
  --md-border-color: #dbe3e7;
  --md-shadow-z1: 0 4px 18px rgba(32, 55, 73, 0.07);
  --md-shadow-z2: 0 24px 70px rgba(32, 55, 73, 0.11);

  /* 圆角：Kaleidos 的 --radius:18px 收敛到文档更合适的 12px */
  --md-border-radius: 12px;

  /* 代码块 */
  --md-code-bg-color: #eef2f6;
  --md-code-fg-color: #2a3944;

  /* 字体：与 Kaleidos 一致的中文字栈 */
  --md-text-font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC",
    system-ui, -apple-system, sans-serif;
  --md-code-font-family: "JetBrains Mono", "Cascadia Code", Consolas,
    "Microsoft YaHei", monospace;
}

/* ---- 深色模式：对应 Kaleidos 管理后台 #131518 底色 ---- */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #131518;
  --md-primary-bg-color: #131518;
  --md-default-bg-color: #16191d;
  --md-typeset-color: #d7dee3;
  --md-default-fg-color--light: #9aa7b0;
  --md-default-fg-color--lightest: #6b7880;
  --md-accent-fg-color: #6cc4d2;
  --md-typeset-a-color: #6cc4d2;
  --md-border-color: #2a2f35;
  --md-code-bg-color: #1d2126;
  --md-code-fg-color: #d7dee3;
  --md-shadow-z1: 0 4px 18px rgba(0, 0, 0, 0.3);
  --md-shadow-z2: 0 24px 70px rgba(0, 0, 0, 0.45);
}

/* ---- 头部导航：Kaleidos 毛玻璃 sticky header + 棱镜品牌标识 ---- */
.md-header {
  background: rgba(246, 248, 251, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--md-border-color);
  box-shadow: none;
  color: #15222b;
}

/* 品牌区：抬高 + 字重，官方 Logo（theme.logo → docs/assets/prism-logo.svg） */
.md-header__inner {
  min-height: 64px;
}

.md-header__topic:first-child a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* header 内官方三棱环标，稍放大 */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.7rem;
  fill: currentcolor;
}

/* 头部动作图标（主题切换 / 翻译）：弱化为墨灰，hover 变墨色 */
.md-header .md-icon,
.md-header .md-search__icon {
  color: #65747e;
  transition: color 0.2s ease;
}

.md-header .md-icon:hover,
.md-header .md-search__icon:hover {
  color: #15222b;
}

/* 搜索框：白底细边胶囊（header 内形态），宽一点更像 Kaleidos 导航 */
.md-search__form {
  background: #fff;
  border: 1px solid var(--md-border-color);
  border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.md-search__form:hover {
  background: #fff;
  border-color: #b8ccd4;
  box-shadow: 0 2px 8px rgba(32, 55, 73, 0.06);
}

.md-search__input::placeholder {
  color: #93a0a8;
}

[data-md-color-scheme="slate"] .md-header {
  background: rgba(19, 21, 24, 0.88);
  color: #d7dee3;
}

[data-md-color-scheme="slate"] .md-header__topic:first-child a {
  color: #e8eef2;
}

[data-md-color-scheme="slate"] .md-header .md-icon,
[data-md-color-scheme="slate"] .md-header .md-search__icon {
  color: #9aa7b0;
}

[data-md-color-scheme="slate"] .md-header .md-icon:hover,
[data-md-color-scheme="slate"] .md-header .md-search__icon:hover {
  color: #e8eef2;
}

[data-md-color-scheme="slate"] .md-search__form,
[data-md-color-scheme="slate"] .md-search__form:hover {
  background: #1b1f24;
  border-color: #2a2f35;
}

[data-md-color-scheme="slate"] .md-search__form:hover {
  border-color: #3a424a;
}

/* ---- 顶部标签页：Kaleidos .nav-link 手感（蓝色下划线滑入） ----
   注意：Material 对 .md-tabs__link 自带 opacity:.7，且 hover/active
   规则是 color:inherit，必须显式压回 opacity:1 并覆盖颜色。 */
.md-tabs {
  background: transparent;
  border-bottom: 1px solid var(--md-border-color);
}

.md-tabs__link {
  position: relative;
  color: #4a5a64;
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 4px;
  padding-bottom: 8px;
  opacity: 1;
}

.md-tabs__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: #2e83c2;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.md-tabs__link:focus,
.md-tabs__link:hover {
  color: #15222b;
  opacity: 1;
}

.md-tabs__link:hover::after,
.md-tabs__link:focus::after {
  transform: scaleX(1);
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  color: #15222b;
  opacity: 1;
}

.md-tabs__item--active .md-tabs__link::after,
.md-tabs__link--active::after {
  transform: scaleX(1);
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: #9aa7b0;
}

[data-md-color-scheme="slate"] .md-tabs__link:focus,
[data-md-color-scheme="slate"] .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link,
[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: #e8eef2;
}

/* ---- 纵向侧边导航：QFluentWidgets 风格 ----
   对齐要点：分组标题正常字号加粗墨色；行距宽松；
   当前项蓝字 + 左侧圆点；无大写、无竖条。
   Material 的 .md-nav__link 自带 opacity，需压回 1。 */
.md-sidebar--primary {
  border-right: 1px solid var(--md-border-color);
}

.md-sidebar--primary .md-sidebar__scrollwrap {
  padding-top: 20px;
}

/* 分组标题（快速入门/指南/组件等）：正常字号 + 加粗墨色 */
.md-nav__item--section > .md-nav__link,
.md-nav__item--nested > .md-nav__link {
  color: #15222b;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}

/* 分组之间的留白（QFW 分组带明显间隔） */
.md-nav__item--section {
  margin-top: 1.6em;
}

.md-nav__item--section:first-child {
  margin-top: 0;
}

/* 普通项：宽松行距（QFW 每行约 40px） */
.md-nav__link {
  color: #4a5a64;
  opacity: 1;
}

.md-sidebar--primary .md-nav__link {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* 当前项：蓝字 + 左侧圆点（QFW active 手感） */
.md-nav__item .md-nav__link--active {
  color: #2e83c2;
  font-weight: 600;
  opacity: 1;
}

.md-nav__item .md-nav__link--active::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2e83c2;
}

.md-nav__item .md-nav__link--active {
  position: relative;
  padding-left: 16px;
}

.md-nav__link:hover {
  color: #15222b;
  opacity: 1;
}

[data-md-color-scheme="slate"] .md-nav__item--section > .md-nav__link,
[data-md-color-scheme="slate"] .md-nav__item--nested > .md-nav__link {
  color: #e8eef2;
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: #9aa7b0;
}

[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  color: #6cc4d2;
}

[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active::before {
  background: #6cc4d2;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #e8eef2;
}

/* 抽屉/窄屏侧栏品牌位：官方 Logo 尺寸适配 */
.md-nav__title .md-nav__button.md-logo img,
.md-nav__title .md-nav__button.md-logo svg {
  height: 2rem;
}

/* ---- 标题：墨色 + 一级标题细分隔线（Kaleidos .hero-rule 手感） ---- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: #15222b;
  letter-spacing: 0;
  font-weight: 750;
}

.md-typeset h1 {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--md-border-color);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  color: #e8eef2;
}

/* ---- 正文图片：细边框圆角卡片 ---- */
.md-typeset img {
  border: 1px solid var(--md-border-color);
  border-radius: var(--md-border-radius);
}

/* ---- 表格：细线行分隔 + 圆角 ---- */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-border-color);
  border-radius: var(--md-border-radius);
  overflow: hidden;
  box-shadow: var(--md-shadow-z1);
  font-size: 0.72rem;
}

.md-typeset table:not([class]) th {
  background: #eef2f6;
  color: #15222b;
  font-weight: 700;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--md-border-color);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: #1d2126;
  color: #e8eef2;
}

/* ---- 代码块：细边框圆角 ---- */
.md-typeset pre {
  border: 1px solid var(--md-border-color);
  border-radius: var(--md-border-radius);
}

.md-typeset pre > code {
  border-radius: calc(var(--md-border-radius) - 1px);
}

.md-typeset code {
  border-radius: 5px;
}

/* ==========================================================================
   首页组件
   ========================================================================== */

/* ---- Hero：居中标题 + 副标题 + 操作按钮 ---- */
.md-typeset .prismqml-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 24px 40px;
  margin: 0 0 40px;
  text-align: center;
  border: 1px solid var(--md-border-color);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--md-shadow-z2);
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-hero {
  background: #1b1f24;
}

.md-typeset .prismqml-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 6px 14px;
  border: 1px solid #cfe3ee;
  border-radius: 999px;
  color: #2e83c2;
  background: #eaf4f8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.md-typeset .prismqml-hero .hero-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #159d9b;
  box-shadow: 0 0 0 5px rgba(21, 157, 155, 0.12);
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-hero .hero-eyebrow {
  border-color: #2a3a44;
  color: #6cc4d2;
  background: #16222b;
}

.md-typeset .prismqml-hero h1 {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
}

.md-typeset .prismqml-hero h1 em {
  color: #2e83c2;
  font-style: normal;
}

.md-typeset .prismqml-hero .hero-sub {
  max-width: 560px;
  margin: 0 0 26px;
  color: #65747e;
  font-size: 16px;
  line-height: 1.85;
}

.md-typeset .prismqml-hero .hero-sub code {
  color: #2e83c2;
  background: #eaf4f8;
  padding: 2px 8px;
  border-radius: 6px;
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-hero .hero-sub {
  color: #9aa7b0;
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-hero .hero-sub code {
  color: #6cc4d2;
  background: #16222b;
}

.md-typeset .prismqml-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.md-typeset .prismqml-hero .hero-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 7px;
  color: #fff;
  background: #15222b;
  box-shadow: 0 9px 20px rgba(21, 34, 43, 0.16);
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease,
    box-shadow 0.2s ease, border-color 0.2s ease;
}

.md-typeset .prismqml-hero .hero-actions a:hover {
  color: #fff;
  background: #1e5f93;
  box-shadow: 0 12px 26px rgba(30, 95, 147, 0.2);
  transform: translateY(-2px);
}

.md-typeset .prismqml-hero .hero-actions a.hero-btn-ghost {
  color: #15222b;
  background: transparent;
  border: 1px solid #dbe3e7;
  box-shadow: none;
}

.md-typeset .prismqml-hero .hero-actions a.hero-btn-ghost:hover {
  color: #15222b;
  border-color: #15222b;
  transform: translateY(-2px);
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-hero .hero-actions a {
  background: #2e83c2;
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-hero .hero-actions a:hover {
  background: #3f97d6;
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-hero .hero-actions a.hero-btn-ghost {
  color: #d7dee3;
  border-color: #2a2f35;
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-hero .hero-actions a.hero-btn-ghost:hover {
  color: #d7dee3;
  border-color: #6cc4d2;
}

/* ---- 特性卡片网格：Kaleidos .feature-card ---- */
.md-typeset .prismqml-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 0 0 36px;
}

.md-typeset .prismqml-card {
  padding: 24px 26px;
  border: 1px solid var(--md-border-color);
  border-radius: var(--md-border-radius);
  background: #fff;
  transition: transform 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.md-typeset .prismqml-card:hover {
  border-color: #b8ccd4;
  box-shadow: var(--md-shadow-z2);
  transform: translateY(-4px);
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-card {
  background: #1b1f24;
}

.md-typeset .prismqml-card .card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 12px;
  font-size: 22px;
  font-style: normal;
}

.md-typeset .prismqml-card .icon-blue {
  color: #2e83c2;
  background: #d9edf5;
}

.md-typeset .prismqml-card .icon-teal {
  color: #159d9b;
  background: #dcf2ee;
}

.md-typeset .prismqml-card .icon-orange {
  color: #e58b3d;
  background: #f8e6d5;
}

.md-typeset .prismqml-card .icon-purple {
  color: #7569c7;
  background: #e7e4f6;
}

.md-typeset .prismqml-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
}

.md-typeset .prismqml-card p {
  margin: 0;
  color: #65747e;
  font-size: 13.5px;
  line-height: 1.8;
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-card p {
  color: #9aa7b0;
}

.md-typeset .prismqml-card .card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.md-typeset .prismqml-card .card-meta span {
  padding: 5px 9px;
  border-radius: 5px;
  color: #65747e;
  background: #f6f8fb;
  font-size: 11px;
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-card .card-meta span {
  color: #9aa7b0;
  background: #16191d;
}

/* ---- 皮肤四色卡片 ---- */
.md-typeset .prismqml-skins {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 0 0 36px;
}

.md-typeset .prismqml-skin-card {
  padding: 22px 20px;
  border: 1px solid var(--md-border-color);
  border-radius: var(--md-border-radius);
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.md-typeset .prismqml-skin-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--md-shadow-z2);
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-skin-card {
  background: #1b1f24;
}

.md-typeset .prismqml-skin-card .skin-dot {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 14px;
  border-radius: 8px;
  border: 1px solid rgba(21, 34, 43, 0.12);
}

.md-typeset .prismqml-skin-card .skin-fluent .skin-dot {
  background: #2e83c2;
}

.md-typeset .prismqml-skin-card .skin-neobrutalism .skin-dot {
  background: #e58b3d;
  border: 2px solid #15222b;
  border-radius: 0;
  box-shadow: 3px 3px 0 #15222b;
}

.md-typeset .prismqml-skin-card .skin-vintage .skin-dot {
  background: #a86b2d;
  border-radius: 2px;
}

.md-typeset .prismqml-skin-card .skin-neumorphism .skin-dot {
  background: #eef2f6;
  box-shadow: -3px -3px 6px rgba(255, 255, 255, 0.9),
    3px 3px 6px rgba(101, 116, 126, 0.35);
}

.md-typeset .prismqml-skin-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.md-typeset .prismqml-skin-card p {
  margin: 0;
  color: #65747e;
  font-size: 12.5px;
  line-height: 1.75;
}

[data-md-color-scheme="slate"] .md-typeset .prismqml-skin-card p {
  color: #9aa7b0;
}

/* ---- 页脚 ---- */
.md-footer {
  border-top: 1px solid var(--md-border-color);
}

/* ---- 响应式 ---- */
@media screen and (max-width: 960px) and (min-width: 721px) {
  .md-typeset .prismqml-skins {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 720px) {
  .md-typeset .prismqml-grid,
  .md-typeset .prismqml-skins {
    grid-template-columns: 1fr;
  }

  .md-typeset .prismqml-hero {
    padding: 36px 18px 32px;
  }
}