:root {
  --blue: #2943a2;
  --blue-dark: #22378b;
  --blue-soft: #eaf0ff;
  --gold: #f0b642;
  --gold-dark: #bd8420;
  --page: #f4f7fc;
  --white: #fff;
  --ink: #172033;
  --muted: #667085;
  --soft: #98a2b3;
  --line: #e4e9f2;
  --shadow: 0 8px 28px rgba(34, 57, 117, .08);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.lightbox-open, body.docs-nav-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.shell { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 50; color: #fff; background: var(--blue); box-shadow: 0 4px 18px rgba(25, 46, 120, .16); }
.header-inner { height: 76px; display: grid; grid-template-columns: minmax(230px, 1fr) minmax(300px, 420px) minmax(90px, 1fr); align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; justify-self: start; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; color: #fff; background: var(--gold); border-radius: 10px; box-shadow: inset 0 -2px 0 rgba(123, 76, 0, .15); }
.brand-mark svg { width: 22px; transform: rotate(-35deg); }
.brand-copy { display: grid; line-height: 1.18; }
.brand-copy strong { font-size: 16px; letter-spacing: .01em; }
.brand-copy small { margin-top: 4px; color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: .08em; }
.global-search { height: 40px; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 13px; color: #526070; background: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; box-shadow: 0 4px 12px rgba(18, 34, 94, .12); }
.global-search > svg { width: 16px; flex: none; color: #8d99aa; }
.global-search input { min-width: 0; flex: 1; padding: 6px 2px; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 14px; }
.global-search input::placeholder { color: #9ba6b5; }
.global-search button { width: 32px; height: 30px; display: grid; place-items: center; flex: none; color: #fff; background: var(--blue); border: 0; border-radius: 6px; }
.global-search button svg { width: 15px; }
.site-nav { justify-self: end; }
.site-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; color: rgba(255,255,255,.9); border-radius: 7px; font-size: 14px; font-weight: 650; }
.site-nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.site-nav svg { width: 16px; }

.help-hero { color: #fff; background: linear-gradient(128deg, var(--blue-dark), var(--blue) 68%, #3552b6); }
.help-hero > .shell { min-height: 270px; display: flex; align-items: center; flex-direction: column; justify-content: center; padding-block: 48px; text-align: center; }
.help-hero span { color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .22em; }
.help-hero h1 { max-width: 880px; margin: 13px 0 12px; font-size: clamp(30px, 4vw, 46px); line-height: 1.3; letter-spacing: -.025em; }
.help-hero p { max-width: 720px; margin: 0; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.8; }
.categories-section { padding-block: 52px 78px; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.section-title span { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.section-title h2 { margin: 5px 0 0; font-size: 25px; }
.section-title > p { margin: 0; color: var(--muted); font-size: 14px; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.category-card { position: relative; min-height: 225px; display: flex; flex-direction: column; padding: 25px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 3px 15px rgba(39, 61, 123, .045); transition: transform .2s, box-shadow .2s, border-color .2s; }
.category-card:hover { transform: translateY(-4px); border-color: #cbd6f1; box-shadow: var(--shadow); }
.category-icon { width: 43px; height: 43px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border-radius: 10px; }
.category-count { position: absolute; top: 26px; right: 24px; padding: 4px 8px; color: #6a7892; background: #f3f5f8; border-radius: 999px; font-size: 12px; }
.category-card h3 { margin: 18px 0 7px; font-size: 18px; }
.category-card > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.category-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 19px; color: var(--blue); border-top: 1px solid #edf0f5; font-size: 13px; font-weight: 700; }
.category-footer svg { width: 16px; transition: transform .2s; }
.category-card:hover .category-footer svg { transform: translateX(3px); }

.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: #7d899d; font-size: 14px; }
.breadcrumbs a { color: var(--blue); }
.breadcrumbs b { max-width: 420px; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.category-page, .search-page { min-height: 650px; padding-block: 36px 76px; }
.category-heading, .search-heading { position: relative; padding: 28px 30px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 18px rgba(37, 58, 119, .05); }
.category-heading > span, .search-heading > span { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.category-heading h1, .search-heading h1 { margin: 7px 0 6px; font-size: 31px; }
.category-heading p, .search-heading p { max-width: 700px; margin: 0; color: var(--muted); font-size: 15px; }
.category-heading small { position: absolute; top: 28px; right: 30px; padding: 5px 9px; color: var(--blue); background: var(--blue-soft); border-radius: 999px; font-size: 12px; }
.category-article-list, .search-result-list { margin-top: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 18px rgba(37, 58, 119, .045); }
.category-article-row { min-height: 74px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 22px; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid #edf0f5; transition: background .15s; }
.category-article-row:last-child { border-bottom: 0; }
.category-article-row:hover { background: #f8faff; }
.article-row-number { color: var(--blue); font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.article-row-copy { min-width: 0; display: grid; }
.article-row-copy strong { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.article-row-copy small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.category-article-row > svg { width: 16px; color: var(--blue); transition: transform .2s; }
.category-article-row:hover > svg { transform: translateX(3px); }
.search-result-row { position: relative; display: grid; padding: 18px 52px 18px 22px; border-bottom: 1px solid #edf0f5; }
.search-result-row:last-child { border-bottom: 0; }
.search-result-row:hover { background: #f8faff; }
.search-result-row > span { width: max-content; padding: 3px 7px; color: var(--blue); background: var(--blue-soft); border-radius: 999px; font-size: 12px; }
.search-result-row strong { margin-top: 7px; font-size: 15px; }
.search-result-row p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.search-result-row > svg { position: absolute; top: 50%; right: 22px; width: 16px; color: var(--blue); transform: translateY(-50%); }
.empty-state { padding: 70px 24px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.empty-state h2 { margin: 0; font-size: 20px; }
.empty-state p { color: var(--muted); font-size: 14px; }
.button { display: inline-flex; margin-top: 10px; padding: 9px 15px; color: #fff; background: var(--blue); border-radius: 7px; font-size: 13px; font-weight: 700; }

.mobile-docs-toggle { display: none; }
.docs-overlay { display: none; }
.docs-layout { min-height: 760px; display: grid; grid-template-columns: 250px minmax(0, 820px); justify-content: center; gap: 30px; align-items: start; padding-block: 34px 76px; }
.docs-sidebar { position: sticky; top: 110px; overflow: hidden; max-height: calc(100vh - 135px); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 18px rgba(37,58,119,.045); }
.docs-sidebar-close { display: none; }
.docs-sidebar-title { display: flex; align-items: center; gap: 9px; padding: 15px 16px; color: #fff; background: var(--blue); }
.docs-sidebar-title span { display: grid; place-items: center; }
.docs-sidebar-title svg { width: 16px; }
.docs-sidebar-title strong { font-size: 14px; }
.docs-sidebar > nav { max-height: calc(100vh - 185px); padding: 8px; overflow-y: auto; }
.docs-category { margin-bottom: 3px; }
.docs-category summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 7px; padding: 9px 8px; color: #465268; border-radius: 6px; cursor: pointer; list-style: none; }
.docs-category summary::-webkit-details-marker { display: none; }
.docs-category summary:hover { background: #f3f6fc; }
.docs-category summary > span { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.docs-category summary small { color: #9aa5b6; font-size: 11px; }
.docs-category summary svg { width: 12px; transform: rotate(0deg); transition: transform .18s; }
.docs-category[open] summary { color: var(--blue); background: var(--blue-soft); }
.docs-category[open] summary svg { transform: rotate(90deg); }
.docs-category > div { display: grid; padding: 4px 0 4px 10px; }
.docs-category > div a { padding: 7px 9px; overflow: hidden; color: #69758a; border-left: 2px solid #e3e8f2; font-size: 13px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.docs-category > div a:hover { color: var(--blue); background: #fafbff; }
.docs-category > div a.active { color: var(--blue); background: #f4f7ff; border-left-color: var(--gold); font-weight: 750; }
.docs-content { min-width: 0; padding: 34px 38px 40px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 5px 22px rgba(37,58,119,.055); }
.article-back { display: inline-flex; color: #66758e; font-size: 14px; }
.article-back:hover { color: var(--blue); }
.article-header { margin-top: 20px; padding-bottom: 25px; border-bottom: 1px solid #e9edf4; }
.article-header > span { display: inline-flex; padding: 4px 9px; color: var(--blue); background: var(--blue-soft); border-radius: 999px; font-size: 12px; font-weight: 750; }
.article-header h1 { margin: 12px 0 9px; color: var(--ink); font-size: clamp(28px, 4vw, 39px); line-height: 1.35; letter-spacing: -.02em; }
.article-header p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.article-content { min-width: 0; padding-block: 28px 18px; color: #273149; font-size: 16px; line-height: 1.86; overflow-wrap: anywhere; word-break: break-word; }
.article-content * { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.article-content h2, .article-content h3, .article-content h4 { scroll-margin-top: 95px; color: #172033; line-height: 1.45; }
.article-content h2 { margin: 24px 0 13px; padding-bottom: 9px; border-bottom: 1px solid #e8ecf3; font-size: 25px; }
.article-content h2:first-child { margin-top: 0; }
.article-content h3 { margin: 20px 0 9px; font-size: 20px; }
.article-content h4 { margin: 18px 0 8px; font-size: 17px; }
.article-content p { margin: 0 0 19px; white-space: normal; }
.article-content p:empty, .article-content p:has(> br:only-child) { display: none; margin: 0; }
.article-content h2 + h2, .article-content h3 + h3, .article-content h4 + h4 { margin-top: 12px; }
.article-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; word-break: break-all; }
.article-content img { max-width: 100%; height: auto; margin: 23px auto; border: 1px solid #e3e7ef; border-radius: 7px; cursor: zoom-in; box-shadow: 0 6px 20px rgba(29, 45, 98, .08); }
.article-content blockquote { margin: 22px 0; padding: 16px 19px; color: #3f4c64; background: #f5f7fc; border-left: 4px solid var(--blue); }
.article-content pre { padding: 18px; overflow: auto; color: #edf1ff; background: #1e2a4b; border-radius: 7px; }
.article-content table { width: 100%; margin: 22px 0; border-collapse: collapse; font-size: 14px; }
.article-content th, .article-content td { padding: 10px; border: 1px solid #e1e6ef; text-align: left; }
.article-content th { background: #f3f6fb; }
.article-content .ql-size-small { font-size: .75em; }
.article-content .ql-size-large { font-size: 1.5em; }
.article-content .ql-size-huge { font-size: 2.5em; }
.article-content .ql-font-serif { font-family: Georgia, "Songti SC", "SimSun", serif; }
.article-content .ql-font-monospace { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.article-content .ql-align-center { text-align: center; }
.article-content .ql-align-right { text-align: right; }
.article-content .ql-align-justify { text-align: justify; }
.article-content .ql-direction-rtl { direction: rtl; text-align: inherit; }
.article-content .ql-indent-1 { margin-left: 3em; }
.article-content .ql-indent-2 { margin-left: 6em; }
.article-content .ql-indent-3 { margin-left: 9em; }
.article-content .ql-indent-4 { margin-left: 12em; }
.article-content .ql-indent-5 { margin-left: 15em; }
.article-content .ql-indent-6 { margin-left: 18em; }
.article-content .ql-indent-7 { margin-left: 21em; }
.article-content .ql-indent-8 { margin-left: 24em; }
.article-content ol:has(> li[data-list]) { padding-left: 1.7em; counter-reset: quill-list; }
.article-content li[data-list] { position: relative; list-style: none; }
.article-content li[data-list]::before { position: absolute; right: calc(100% + .45em); min-width: 1.25em; text-align: right; }
.article-content li[data-list="bullet"]::before { content: "•"; }
.article-content li[data-list="ordered"] { counter-increment: quill-list; }
.article-content li[data-list="ordered"]::before { content: counter(quill-list) "."; }
.article-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; padding-top: 23px; border-top: 1px solid #e9edf4; }
.article-pagination a { display: grid; min-height: 78px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; transition: border-color .2s, background .2s; }
.article-pagination a:hover { background: #f8faff; border-color: #bfcbed; }
.article-pagination a.next { text-align: right; }
.article-pagination small { color: #8a96a8; font-size: 12px; }
.article-pagination strong { margin-top: 4px; color: #34425c; font-size: 14px; line-height: 1.5; }
.preview-banner { padding: 8px; color: #4b3607; background: #ffd979; text-align: center; font-size: 13px; font-weight: 700; }

.image-lightbox[hidden] { display: none; }
.image-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 45px; background: rgba(10, 17, 37, .92); cursor: zoom-out; }
.image-lightbox img { max-width: min(94vw, 1500px); max-height: 90vh; object-fit: contain; cursor: default; box-shadow: 0 20px 70px rgba(0,0,0,.4); }
.image-lightbox button { position: fixed; top: 17px; right: 21px; width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; font-size: 26px; line-height: 1; }
.not-found { min-height: 650px; padding: 90px 24px; text-align: center; }
.not-found-code { color: #dfe5f1; font-size: clamp(100px, 18vw, 210px); font-weight: 800; line-height: .85; }
.not-found h1 { margin: 20px 0 8px; font-size: 30px; }
.not-found p { color: var(--muted); font-size: 14px; }
.site-footer { color: #dbe2f5; background: #1d2f75; }
.footer-inner { min-height: 110px; display: flex; align-items: center; justify-content: flex-start; }
.footer-inner strong { color: #fff; font-size: 14px; }
.footer-inner p { margin: 5px 0 0; color: rgba(255,255,255,.55); font-size: 12px; }

@media (max-width: 940px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .docs-layout { grid-template-columns: 225px minmax(0, 1fr); gap: 20px; }
  .docs-content { padding-inline: 28px; }
}
@media (max-width: 720px) {
  .shell { width: min(100% - 28px, 620px); }
  .header-inner { height: 118px; grid-template-columns: 1fr auto; grid-template-rows: 58px 44px; gap: 4px 12px; padding-block: 8px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 9px; }
  .brand-copy strong { font-size: 14px; }
  .global-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .site-nav { grid-column: 2; grid-row: 1; }
  .site-nav a { padding-inline: 7px; }
  .site-nav a span { display: none; }
  .help-hero > .shell { min-height: 230px; padding-block: 38px; }
  .help-hero h1 { font-size: 29px; }
  .help-hero p { font-size: 14px; }
  .categories-section { padding-block: 38px 58px; }
  .section-title { align-items: start; flex-direction: column; gap: 6px; }
  .category-grid { grid-template-columns: 1fr; gap: 13px; }
  .category-card { min-height: 205px; }
  .category-page, .search-page { padding-block: 24px 55px; }
  .category-heading, .search-heading { padding: 22px; }
  .category-heading h1, .search-heading h1 { font-size: 26px; }
  .category-heading small { position: static; display: inline-flex; margin-top: 12px; }
  .category-article-row { grid-template-columns: 33px minmax(0, 1fr) 18px; padding-inline: 14px; }
  .article-row-number { font-size: 19px; }
  .article-row-copy small { white-space: normal; }
  .mobile-docs-toggle { width: calc(100% - 28px); height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px auto 0; color: var(--blue); background: #fff; border: 1px solid #cad4ed; border-radius: 8px; font-size: 13px; font-weight: 750; }
  .docs-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(16,27,60,.45); }
  .docs-nav-open .docs-overlay { display: block; }
  .docs-layout { display: block; min-height: 620px; padding-block: 16px 55px; }
  .docs-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 80; width: min(310px, 86vw); max-height: none; border: 0; border-radius: 0; transform: translateX(-100%); transition: transform .22s; }
  .docs-nav-open .docs-sidebar { transform: translateX(0); }
  .docs-sidebar-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; font-size: 21px; }
  .docs-sidebar-title { min-height: 56px; padding-right: 48px; }
  .docs-sidebar > nav { max-height: calc(100vh - 56px); }
  .docs-content { padding: 25px 20px 30px; border-radius: 10px; }
  .article-header h1 { font-size: 29px; }
  .article-content { font-size: 15px; }
  .article-content h2 { font-size: 22px; }
  .article-pagination { grid-template-columns: 1fr; }
  .image-lightbox { padding: 38px 10px; }
  .footer-inner { min-height: 130px; align-items: start; flex-direction: column; justify-content: center; gap: 18px; }
}