/* ================= 基础与变量 ================= */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

:root{
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --shadow-1: 0 2px 10px rgba(0,0,0,.06);
  --shadow-2: 0 10px 30px rgba(0,0,0,.08);
  --shadow-3: 0 18px 50px rgba(0,0,0,.12);
  --glass: saturate(160%) blur(10px);
  --sidebar-bg: var(--bs-tertiary-bg);
  --sidebar-pill-active: rgba(var(--bs-primary-rgb), .14);
  --sidebar-hover: rgba(var(--bs-primary-rgb), .08);
}
@media (prefers-color-scheme: dark){
  :root{
    --shadow-1: 0 2px 10px rgba(0,0,0,.35);
    --shadow-2: 0 10px 30px rgba(0,0,0,.45);
    --shadow-3: 0 18px 50px rgba(0,0,0,.55);
    --sidebar-pill-active: rgba(var(--bs-primary-rgb), .22);
    --sidebar-hover: rgba(var(--bs-primary-rgb), .16);
  }
}

.container{ max-width: 1120px; }

:where(a, button, [role="button"], summary, .doc-item):focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .25);
  border-radius: var(--radius-md);
}

/* ================= 顶部导航（无阴影） ================= */
#siteHeader{
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  transition: transform .32s ease, background-color .32s ease;
  background-color: color-mix(in srgb, var(--bs-body-bg) 90%, transparent);
  box-shadow: none !important;
}
#siteHeader.header--hide{ transform: translateY(-100%); }
#siteHeader .navbar{ min-height: 56px; }

/* 手机端：品牌与汉堡按钮远离屏幕边缘（含安全区） */
@media (max-width: 576px){
  #siteHeader nav.navbar{
    padding-left:  max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  #sidebarOffcanvas .offcanvas-header{
    padding-left:  max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .navbar-toggler{ padding: .45rem .6rem; border-radius: 12px; }
}

/* ================= 左侧目录（初始无阴影） ================= */
.doc-sidebar{
  background: var(--sidebar-bg);
  padding: .5rem;
  border-radius: var(--radius-lg);
  box-shadow: none;
  position: sticky;
  top: calc(56px + 1rem);
  transition: box-shadow .25s ease;
}
.doc-sidebar:hover{ box-shadow: none; }
.doc-sidebar .doc-item{
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem .8rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--bs-body-color);
  transition: background-color .18s ease, transform .12s ease, color .18s ease;
}
.doc-sidebar .doc-item:hover{ background: var(--sidebar-hover); transform: translateY(-1px); text-decoration: none; }
.doc-sidebar .doc-item.active{ background: var(--sidebar-pill-active); color: var(--bs-primary); font-weight: 600; }
.offcanvas .doc-sidebar{ box-shadow: none; position: static; top: auto; }

/* ================= 卡片与内容（初始无阴影） ================= */
.card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--bs-border-color);
  box-shadow: none;
  transition: box-shadow .25s ease, transform .15s ease;
}
.card:hover{ box-shadow: none; }
.card-body{ padding: 1.25rem 1.25rem; }

#content h1, #content .h1,
#content h2, #content .h2,
#content h3, #content .h3{
  letter-spacing: .01em;
  margin-top: .5rem;
  scroll-margin-top: 90px;
}
#content p{ color: var(--bs-secondary-color); }

/* 图片动效 */
#content img{
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--bs-border-color);
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .25s ease;
}
#content img:hover{ transform: translateY(-1px); box-shadow: none; }

/* 步骤块卡片化 */
#content ol.vstack > li{
  background: var(--bs-body-bg);
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--radius-md);
  transition: background-color .25s ease, border-color .25s ease, transform .16s ease, box-shadow .25s ease;
}
#content ol.vstack > li:hover{
  background: color-mix(in srgb, var(--bs-body-bg) 85%, var(--bs-primary) 15% / 4%);
  border-color: color-mix(in srgb, var(--bs-border-color) 70%, var(--bs-primary) 30%);
  transform: translateY(-1px);
  box-shadow: none;
}
#content .badge{ border-radius: 10px; }

/* ================= Accordion（初始无阴影） ================= */
.accordion-item{
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  border: 1px solid var(--bs-border-color) !important;
  box-shadow: none;
  transition: box-shadow .25s ease;
}
.accordion-item:hover{ box-shadow: none; }
.accordion-button{ padding: .95rem 1.1rem; }
.accordion-button:not(.collapsed){
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .06);
  box-shadow: inset 0 -1px 0 var(--bs-border-color);
}
.accordion-button:focus{ box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .15); }
#content #faqAccordion .accordion-item + .accordion-item{ margin-top: 12px; }
#content #faqAccordion .accordion-body{ padding: .95rem 1.1rem; }

/* ================= Alert（初始无阴影） ================= */
.alert{
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: box-shadow .25s ease;
}
.alert:hover{ box-shadow: none; }
.alert svg{ flex: 0 0 auto; opacity: .9; }
.alert .text-secondary{ color: var(--bs-body-color) !important; }

/* ================= 模态框 / Offcanvas ================= */
#imgModal .modal-content{ border-radius: var(--radius-lg); box-shadow: var(--shadow-3); }
#imgModalImg{ max-height: 85vh; object-fit: contain; }
.offcanvas{ border-radius: 0 var(--radius-lg) var(--radius-lg) 0; box-shadow: var(--shadow-2); }

/* ================= 骨架屏 ================= */
.skeleton{
  height:1.25rem;
  background:linear-gradient(90deg,#eee,#f7f7f7,#eee);
  background-size:200% 100%;
  animation:sk 1.2s linear infinite;
  border-radius:8px
}
@keyframes sk{ to{ background-position:-200% 0 } }

/* ================= 上一页 / 下一页（初始无阴影） ================= */
.prev-next-card { box-shadow: none; border-radius: var(--radius-lg); transition: box-shadow .25s ease; }
.prev-next-card:hover{ box-shadow: none; }
.prev-next-card .card-body { padding: .8rem; }
.prev-next-card .btn {
  display:flex; align-items:center; gap:.5rem; height: 3rem;
  border-radius: 12px; white-space: nowrap;
}
.prev-next-card .title {
  flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (min-width: 768px){
  .prev-next-card .grid { display:grid; grid-template-columns: 1fr 1fr; gap:.5rem; }
}

/* ================= 回到顶部按钮 ================= */
.back-top-btn{
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 1061;
  border-radius: 999px;
  box-shadow: none;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}
.back-top-btn.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-top-btn:hover{ box-shadow: none; }

/* ================= Mobile 适配 ================= */
@media (max-width: 768px){
  #content :is(h1,.h1,h2,.h2,h3,.h3){ scroll-margin-top: 72px; }
  .card-body{ padding: 1rem; }
  #content .accordion .accordion-item{ margin-bottom: .9rem; }
  #content .accordion .accordion-button{ padding-block: 1rem; }
  #content ol.vstack > li{ padding: .75rem; }
  #content img{ max-height: 48vh; object-fit: contain; }
  .prev-next-card .btn{ height: 2.75rem; }
  .doc-sidebar{ position: static; top: auto; }
  .back-top-btn{ 
    right: 12px; 
    bottom: calc(14px + env(safe-area-inset-bottom)); 
  }
}

/* 更小屏再微调 */
@media (max-width: 576px){
  #content h1,.h1{ font-size: 1.35rem; }
  #content h2,.h2{ font-size: 1.125rem; }
  #content h3,.h3{ font-size: 1rem; }
  main.container{ padding-left: .75rem; padding-right: .75rem; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* 页脚 */
footer small{ opacity: .7; }