/* ===== Safety & Security page (mirrors Description look) ===== */

.safety-page {
  background: #f8d683;
  padding: 20px;
  border-radius: 20px;
}
.safety-page .row.mt-4 { row-gap: 18px; }

/* Title bar */
.safety-page .page-titlebar.sketch{
  background: var(--panel-gray, #dfe6ea);
  border: 3px solid var(--stroke-brown, #b06a3e);
  border-radius: 16px;
  padding: 20px 28px;
  text-align: center;
}
.safety-page .page-titlebar.sketch h1{
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--title-brown, #9a5632);
  line-height: 1.05;
}

/* Left nav */
.safety-page .sketch-nav{
  position: sticky; top: 250px;
  background: var(--panel-gray, #dfe6ea);
  border: 3px solid var(--stroke-brown, #b06a3e);
  border-radius: 16px; padding: 16px; z-index: 2;
}
@media (max-width: 991.98px){ .safety-page .sketch-nav{ position: static; top: auto; } }
.safety-page .sketch-nav .list-group-item{
  background: transparent; border: none; border-radius: 10px;
  padding: 10px 8px; color: #5b3a2a; font-weight: 700; letter-spacing: .02em;
}
.safety-page .sketch-nav .list-group-item.active,
.safety-page .sketch-nav .list-group-item:hover,
.safety-page .sketch-nav .list-group-item:focus{
  background: rgba(240,182,118,.35); color: var(--stroke-brown-dark, #8f4f29);
}

/* Board */
.safety-page .sketch-board{
  background: var(--panel-gray, #dfe6ea);
  border: 3px solid var(--stroke-brown, #b06a3e);
  border-radius: 36px; padding: 28px; min-height: 420px; position: relative;
}
.safety-page .sketch-board::after{
  content:""; position:absolute; inset:-18px -14px; z-index:-1;
  background: var(--bg-light-yellow, #ffeab5); border-radius: 40px;
}

/* Typography */
.safety-page .sketch-board h2{
  color:#714b33; font-size: clamp(20px,2.1vw,28px); margin: 30px 0 30px;
}
.safety-page .sketch-board p{
  color:#3e3a35; line-height: 1.75; font-size: 16.5px; text-align: justify;
}
.safety-page .sketch-board ul{
  margin: 8px 0 14px 18px; padding-left: 6px;
}
.safety-page .sketch-board li{
  color:#3e3a35; line-height: 1.75; font-size: 16.5px; margin-bottom: 6px;
}
.safety-page .sketch-board em{ font-style: italic; }
.safety-page .sketch-board a{
  color:#0b3dff; text-decoration: underline; text-underline-offset: 2px;
}

/* Anchor offset for headings */
@media (min-width: 992px){
  :root{ --sticky-gap:16px; }
  .safety-page .sketch-board h2[id]{ scroll-margin-top: calc(var(--fixed-menu-h,115px) + var(--sticky-gap) + 20px); }
}

/* Mobile padding tweak */
@media (max-width: 991.98px){ .safety-page .sketch-board{ padding: 24px; } }

/* 强制恢复有序列表编号（兼容被全局 reset 掉的情况） */
.safety-page .sketch-board ol {
  list-style-type: decimal;        /* 1,2,3... */
  list-style-position: outside;
  padding-left: 1.5rem;            /* 给数字留出缩进 */
  margin-left: .25rem;
}
.safety-page .sketch-board li {
  display: list-item;              /* 避免被 reset 成 block 后不显示编号 */
}

/* 子级/多级列表的编号样式（与你文稿一致） */
.safety-page .sketch-board ol ol {
  list-style-type: lower-alpha !important;    /* a, b, c... */
}
.safety-page .sketch-board ol ol ol {
  list-style-type: lower-roman !important;    /* i, ii, iii...（如果有第3级） */
}

/* 如果你在 HTML 里写了 <ol type="a">，确保仍按字母显示 */
.safety-page .sketch-board ol[type="a"] { list-style-type: lower-alpha; }
.safety-page .sketch-board ol[type="i"] { list-style-type: lower-roman; }
.safety-page .sketch-board ol[type="1"] { list-style-type: decimal; }

/* 兜底：如果你的全局样式用了 !important 抹掉了编号，可临时加 !important */
.safety-page .sketch-board ol,
.safety-page .sketch-board li {
  list-style: revert !important;   /* 注：仅在上面规则仍被覆盖时再开启 */
}