:root {
    --help-blue: #2672ff;
    --help-text: #202124;
    --help-muted: #777b83;
    --help-surface: #f5f6f8;
}

html { background: #fff; }
body.help-page { height: 100vh; color: var(--help-text); background: #fff; overflow: hidden; }
body.help-page .header-inner{width: 100%; padding: 0 20px;}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.help-shell { display: flex; width: 100%; height: 100%; padding-top: 64px; background: #fff; }
.help-sidebar { width: 320px; min-height: 0; max-height: calc(100vh - 64px); padding: 28px 34px 44px 38px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c1c1c1 transparent; background: #fff; }
.help-sidebar::-webkit-scrollbar { width: 6px; }
.help-sidebar::-webkit-scrollbar-thumb { border-radius: 20px; background: #c1c1c1; }
.help-sidebar::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
.help-sidebar::-webkit-scrollbar-track { background: transparent; }
.help-sidebar.is-loading { visibility: hidden; }
.sidebar-home { display: block; margin-bottom: 26px; color: #333; font-size: 17px; font-weight: 700; }
.sidebar-group + .sidebar-group { margin-top: 16px; }
.sidebar-heading { display: flex; align-items: center; width: 100%; padding: 0; border: 0; background: none; color: #333; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer; }
.sidebar-group.is-active .sidebar-heading { color: var(--help-blue); }
.sidebar-caret { width: 8px; height: 8px; margin-right: 11px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.sidebar-group.is-collapsed .sidebar-caret { transform: rotate(-45deg); }
.sidebar-list { overflow: hidden; margin: 12px 0 0 21px; list-style: none; }
.sidebar-group.is-collapsed .sidebar-list { display: none; }
.sidebar-list li + li { margin-top: 16px; }
.sidebar-list a { color: #55595f; font-size: 15px;}
.sidebar-list a:hover { color: var(--help-blue); }
.sidebar-list .sidebar-submenu { margin-top: 16px; }
.sidebar-submenu-heading { display: flex; width: 100%; align-items: center; padding: 0; border: 0; color: #55595f; background: transparent; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.sidebar-submenu-heading:hover { color: var(--help-blue); }
.sidebar-submenu-caret { width: 7px; height: 7px; margin-right: 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.sidebar-submenu.is-collapsed .sidebar-submenu-caret { transform: rotate(-45deg); }
.sidebar-submenu-list { margin: 13px 0 0 17px; list-style: none; }
.sidebar-submenu.is-collapsed .sidebar-submenu-list { display: none; }
.sidebar-submenu-list li + li { margin-top: 14px; }
.sidebar-submenu-list a { color: #55595f; font-size: 15px; }
.sidebar-submenu-list a:hover, .sidebar-submenu-list a.is-current { color: var(--help-blue); }
.sidebar-more::before { display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); content: ''; }

.help-main { min-width: 0; flex: 1; overflow-y: auto; scrollbar-gutter: stable; background: var(--help-surface); }
@supports not (scrollbar-gutter: stable) {
    .help-main { overflow-y: scroll; }
}
.help-main::-webkit-scrollbar{width: 6px; height: 6px;}
.help-main::-webkit-scrollbar-thumb{background: #c1c1c1; border-radius: 20px;}
.help-main::-webkit-scrollbar-track-piece{background: #fafafa}
.help-hero { position: relative; }
.help-hero-background { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #ebf2ff 0%, #edf3ff 70%, #f5f6f8 100%); }
.help-hero-background::before, .help-hero-background::after { position: absolute; content: ''; pointer-events: none; }
.help-hero-background::before { top: -155px; right: -55px; width: 960px; height: 390px; border-radius: 50%; background: rgba(255, 255, 255, .2); transform: rotate(8deg); }
.help-hero-background::after { top: 64px; left: 60px; width: 990px; height: 335px; border-radius: 50%; background: rgba(255, 255, 255, .22); transform: rotate(15deg); }
.hero-inner { position: relative; z-index: 1; width: 1200px; margin: 0 auto; padding-top: 56px; }
.help-title { color: var(--help-blue); font-size: 26px; font-weight: 700; line-height: 1.4; text-align: center; }
.help-search { display: flex; justify-content: center; gap: 12px; margin-top: 34px; }
.search-box { position: relative; width: 540px; }
.search-box input { display: block; width: 100%; height: 54px; padding: 0 52px 0 18px; border: 1px solid #fff; border-radius: 100px; background: #fff; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .05); color: #3b3d42; font-size: 16px; }
.search-box input::placeholder { color: #96999f; }
.search-button { position: absolute; top: 0; right: 5px; display: grid; width: 54px; height: 54px; place-items: center; border: 0; background: transparent; cursor: pointer; }
.search-button img { width: 20px; height: 20px; object-fit: contain; }
.clear-search { position: absolute; top: 50%; right: 56px; display: none; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; transform: translateY(-50%); background: #b9bdc4; cursor: pointer; }
.clear-search.is-visible { display: block; }
.clear-search::before, .clear-search::after { position: absolute; top: 7px; left: 4px; width: 8px; height: 1px; background: #fff; content: ''; }
.clear-search::before { transform: rotate(45deg); }
.clear-search::after { transform: rotate(-45deg); }
.ai-button { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 54px; border-radius: 100px; color: #fff; background: linear-gradient(90deg, #39b9ec, #3573ff); box-shadow: 0 8px 18px rgba(38, 111, 255, .13); font-size: 16px; font-weight: 700; }

.entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 82px; }
.entry-card { display: flex; align-items: center; height: 134px; padding: 16px 28px 16px 30px; border: 1px solid rgba(255, 255, 255, .92); border-radius: 13px; background: rgba(255, 255, 255, .88); color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.entry-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(42, 84, 150, .09); }
.entry-card img { flex: 0 0 auto; width: 86px; height: 86px; margin-right: 27px; object-fit: contain; }
.entry-title { display: flex; align-items: center; color: #111318; font-size: 17px; font-weight: 700; white-space: nowrap; }
.entry-title::after { width: 8px; height: 8px; margin: 1px 0 0 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); content: ''; }
.entry-desc { display: block; margin-top: 11px; color: #55595f; font-size: 13px; line-height: 1.65; }

.faq-wrap { width: 1200px; margin: 0 auto; padding: 50px 0; }
.faq-tabs { display: grid; grid-template-columns: repeat(6, 1fr); height: 40px; border-bottom: 1px solid #e4e7ec; }
.faq-tab { position: relative; border: 0; background: none; color: #111318; font-size: 16px; font-weight: 700; cursor: pointer; }
.faq-tab:hover, .faq-tab.is-active { color: var(--help-blue); }
.faq-tab.is-active::after { position: absolute; right: 25%; bottom: -1px; left: 25%; height: 2px; border-radius: 2px; background: var(--help-blue); content: ''; }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 28px; margin-top: 18px; }
.faq-card { display: flex; flex-direction: column; min-height: 184px; padding: 24px 27px 20px; border-radius: 12px; background: #fff; }
.faq-card[hidden] { display: none; }
.faq-card h3 { color: #34363b; font-size: 17px; line-height: 1.5; }
.faq-card p { margin-top: 21px; color: var(--help-muted); font-size: 13px; line-height: 1.6; }
.faq-card a { display: inline-block; margin-top: auto; padding-top: 33px; color: var(--help-blue); font-size: 13px; }
.faq-card-coming-soon { grid-column: 1 / -1; align-items: center; justify-content: center; min-height: 240px; text-align: center; }
.faq-card-coming-soon p { margin-top: 10px; }
.faq-empty { display: none; grid-column: 1 / -1; padding: 56px 20px; border-radius: 12px; background: #fff; color: #8a8e95; text-align: center; }
.faq-grid.is-empty .faq-empty { display: block; }

.search-results { display: none; width: 1200px; min-height: calc(100vh - 330px); margin: 0 auto 50px; padding: 26px 34px; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(30, 42, 62, .08); }
.search-result-item { display: block; padding: 14px 0 32px; color: inherit; }
.search-result-item + .search-result-item { padding-top: 34px; border-top: 1px solid #edf0f4; }
.search-result-item h3 { color: #25272c; font-size: 18px; line-height: 1.5; }
.search-result-item p { display: -webkit-box; overflow: hidden; margin-top: 14px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #5f656e; font-size: 15px; line-height: 1.75; }
.search-result-item time { display: block; margin-top: 8px; color: #afb3ba; font-size: 14px; }
.search-result-empty { padding: 80px 20px; color: #9ba0a8; text-align: center; }
.help-page.is-searching .help-hero { min-height: 268px; }
.help-page.is-searching .entry-grid, .help-page.is-searching .faq-wrap { display: none; }
.help-page.is-searching .search-results { display: block; }

.help-article-view[hidden] { display: none; }
.help-article-route .help-hero,
.help-article-route .search-results,
.help-article-route .faq-wrap { display: none; }
.help-article-route .help-main::before { display: block; padding: 48px; color: #8a9099; font-size: 15px; content: '正在加载文章…'; }
.help-page.is-article-view .help-hero,
.help-page.is-article-view .search-results,
.help-page.is-article-view .faq-wrap { display: none; }
.help-article-view { min-height: 100%; background: var(--help-surface); }
.help-article-view .article-container { padding-top: 48px; }
.sidebar-home.is-current { color: var(--help-blue); }

.service-dock { position: fixed; z-index: 50; top: 67.3vh; right: 0; width: 56px; overflow: hidden; border: 1px solid #e8eaf0; border-radius: 6px; background: #fff; box-shadow: 0 2px 10px rgba(30, 42, 62, .06); }
.service-item { display: flex; align-items: center; flex-direction: column; justify-content: center; height: 52px; color: #14161a; font-size: 10px; }
.service-item:hover { color: var(--help-blue); background: #f7faff; }
.service-icon { display: grid; width: 22px; height: 23px; margin-bottom: 1px; place-items: center; color: var(--help-blue); font-size: 18px; font-weight: 700; line-height: 1; }
.service-icon.ai { width: 20px; height: 17px; margin: 2px 0 5px; border-radius: 3px; color: #fff; background: var(--help-blue); font-size: 9px; }
.service-icon.mobile { width: 11px; height: 17px; margin: 1px 0 4px; border: 2px solid var(--help-blue); border-radius: 2px; }
.service-icon.mobile::after { width: 3px; height: 1px; margin-top: 11px; background: var(--help-blue); content: ''; }
