.topbar-help-button {
  margin-left: 8px;
  background: #0d6efd;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.topbar-help-button:hover { background: #0b5ed7; }


#knowledge-center-host { display: contents; }


body.knowledge-center-route-active .dashboard { display: none; }
body.knowledge-center-route-help-center #knowledge-center-host > #help-center,
body.knowledge-center-route-help-article #knowledge-center-host > #help-article,
body.knowledge-center-route-active #knowledge-center-host > .knowledge-center-failure {
  display: block;
}
body.knowledge-center-route-help-center #knowledge-center-host > #help-article,
body.knowledge-center-route-help-article #knowledge-center-host > #help-center {
  display: none;
}


.help-screen {
  width: min(100%, 1060px);
  margin-inline: auto;
  box-sizing: border-box;
}
.help-screen > * { box-sizing: border-box; }
.help-screen .help-searchbar,
.help-screen > #helpHome,
.help-screen > #helpResults,
.help-screen > .help-status,
.help-screen > .help-article-body {
  padding-left: 16px;
  padding-right: 16px;
}
.help-screen .screen-header,
.help-screen .help-searchbar,
.help-screen .help-modules,
.help-screen .help-columns,
.help-screen .help-status,
.help-screen .help-article-body {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.help-screen:target { display: block; }
.screen-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.help-nav-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.help-screen .screen-header { padding-right: 18px; }
.help-screen .screen-header .help-nav-actions .exit-button {
  position: relative;
  top: auto;
  right: auto;
}

.help-searchbar { display: flex; gap: 10px; margin: 6px 0 16px; flex-wrap: wrap; }
.help-search-input {
  flex: 1 1 320px;
  padding: 10px 12px;
  border: 1px solid #bcc5d2;
  border-radius: 8px;
  font-size: 15px;
}
.help-sort-select { padding: 8px 10px; border: 1px solid #bcc5d2; border-radius: 8px; }

.help-status { margin: 6px 0; color: #b02a37; }
.help-status.info { color: #4a5568; }

.help-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.help-module-chip {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #1f2d3d;
}
.help-module-chip:hover { background: #eef2f7; }
.help-module-chip.active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.help-module-chip .help-module-count { opacity: .7; margin-left: 6px; }

.help-columns { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.help-main-col { flex: 1 1 480px; min-width: 300px; }
.help-side-col { flex: 0 0 260px; }
@media (max-width: 780px) { .help-side-col { flex: 1 1 100%; } }

.help-list { display: flex; flex-direction: column; gap: 10px; }
.help-card {
  border: 1px solid #d7dee7;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  background: #fff;
  transition: box-shadow .15s, border-color .15s;
}
.help-card:hover { border-color: #0d6efd; box-shadow: 0 2px 8px rgba(13,110,253,.12); }
.help-card-title { font-weight: 600; font-size: 15px; margin: 0 0 4px; color: #10233b; }
.help-card-meta { font-size: 12px; color: #64748b; display: flex; gap: 10px; flex-wrap: wrap; }
.help-card-badge {
  display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: #eef2f7; color: #334155;
}
.help-card-badge.draft { background: #fde68a; color: #7c5e00; }

.help-pager { display: flex; align-items: center; gap: 12px; margin: 16px 0 18px; }
.help-pager span { font-size: 13px; color: #475569; }

.help-faq-list { display: grid; gap: 8px; }
.help-faq-item {
  border: 1px solid #d7dee7;
  border-radius: 9px;
  background: #ffffff;
  overflow: hidden;
}
.help-faq-item summary {
  padding: 11px 14px;
  color: #10233b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.help-faq-item summary::-webkit-details-marker { display: none; }
.help-faq-item summary::before { content: "+"; display: inline-block; width: 20px; color: #0d6efd; }
.help-faq-item[open] summary::before { content: "−"; }
.help-faq-answer { padding: 0 14px 13px 34px; color: #334155; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.help-faq-section h2 { font-size: 13px; }
.help-faq-warning { margin-top: 8px; color: #9f1239; font-weight: 600; }
.help-faq-related { margin-top: 9px; }
.help-faq-related button { border: 0; background: none; color: #0d6efd; padding: 0; cursor: pointer; text-decoration: underline; }
.help-global-faqs { display: grid; gap: 20px; padding-bottom: 18px; }
.help-global-faqs[hidden],
.help-list[hidden],
.help-module-faqs[hidden] { display: none !important; }
.help-module-faqs { margin-top: 22px; padding-bottom: 18px; }
.help-module-faqs > .section-title { margin: 0 0 10px; font-size: 15px; }
.help-global-faq-module h3 { margin: 0 0 9px; color: #103f52; }


.help-side-block { margin-bottom: 20px; }
.help-side-list { display: flex; flex-direction: column; gap: 6px; }
.help-side-link {
  text-align: left; background: none; border: none; padding: 6px 8px; cursor: pointer;
  border-radius: 6px; color: #0d6efd; font-size: 13px;
}
.help-side-link:hover { background: #eef2f7; }
.help-empty { color: #64748b; font-size: 13px; padding: 8px 0; }


.help-article-body { max-width: 820px; }
.help-article-section { margin-bottom: 22px; }
.help-article-section h2 {
  font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
  color: #0d6efd; margin: 0 0 8px; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px;
}
.help-article-section .help-article-text { white-space: pre-wrap; line-height: 1.55; color: #1f2d3d; }
.help-article-shots { display: flex; flex-wrap: wrap; gap: 14px; }
.help-article-shot { width: 100%; max-width: 820px; margin: 0; }
.help-article-shot-link { display: block; width: 100%; }
.help-article-shot img {
  width: 100%; height: auto; border: 1px solid #d7dee7; border-radius: 8px; display: block; cursor: zoom-in;
}
.help-article-shot figcaption { font-size: 12px; color: #64748b; margin-top: 6px; }
.help-related-link {
  display: inline-block; margin: 2px 8px 2px 0; color: #0d6efd; cursor: pointer;
  text-decoration: underline; background: none; border: none; font-size: 14px;
}


.help-editor-panel { max-width: 760px; width: min(96vw, 760px); max-height: 90vh; overflow: auto; }
.help-editor-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.help-editor-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.help-editor-form input,
.help-editor-form textarea,
.help-editor-form select {
  font-weight: 400; padding: 8px 10px; border: 1px solid #bcc5d2; border-radius: 6px; font-size: 14px; font-family: inherit;
  background: #ffffff;
  color: #1f2d3d;
  color-scheme: light;
}
.help-editor-row { display: flex; gap: 12px; flex-wrap: wrap; }
.help-editor-row label { flex: 1 1 160px; }
.help-editor-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.small-button.primary { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.small-button.danger { background: #dc3545; color: #fff; border-color: #dc3545; }
.help-shot-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.help-shot-thumb { position: relative; }
.help-shot-thumb img { width: 110px; height: 80px; object-fit: cover; border: 1px solid #d7dee7; border-radius: 6px; }
.help-shot-thumb button {
  position: absolute; top: -6px; right: -6px; background: #dc3545; color: #fff; border: none;
  border-radius: 999px; width: 20px; height: 20px; cursor: pointer; line-height: 1; font-size: 12px;
}
.help-shot-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }




.help-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin: 6px 0 26px;
}
.help-cat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 16px;
  border: 1px solid #d7dee7;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f4f7fb);
  cursor: pointer;
  text-align: left;
  transition: transform .12s, box-shadow .15s, border-color .15s;
  min-height: 104px;
}
.help-cat-card:hover {
  transform: translateY(-2px);
  border-color: #0d6efd;
  box-shadow: 0 6px 16px rgba(13,110,253,.15);
}
.help-cat-icon { font-size: 26px; line-height: 1; }
.help-cat-name { font-weight: 700; font-size: 15px; color: #10233b; }
.help-cat-count { font-size: 12px; color: #64748b; }
.help-cat-search { background: linear-gradient(180deg, #eef5ff, #dfeaff); }

.help-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.help-results-head .section-title { margin: 0; }


.help-videos { display: flex; flex-wrap: wrap; gap: 14px; }
.help-video-card {
  flex: 0 0 320px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #d7dee7;
  cursor: pointer;
  background: #0f172a;
}
.help-video-card iframe { width: 100%; height: 100%; border: 0; display: block; }
.help-video-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 15px;
  background: radial-gradient(circle at center, #1e293b, #0f172a);
}
.help-video-link { display: inline-block; margin: 4px 0; color: #0d6efd; }


.help-att-links { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.help-att-link {
  color: #0d6efd; text-decoration: none; padding: 6px 10px;
  border: 1px solid #d7dee7; border-radius: 8px; background: #f8fafc;
}
.help-att-link:hover { background: #eef2f7; }
.help-att-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.help-att-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 4px 8px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px;
}
.help-att-row button {
  background: #dc3545; color: #fff; border: none; border-radius: 999px;
  width: 20px; height: 20px; cursor: pointer; line-height: 1;
}


.help-article-section.help-warn h2 { color: #b02a37; }
.help-article-section.help-best h2 { color: #1a7f37; }
.help-article-section.help-rules h2 { color: #8a5a00; }


@media print {

  body:has(#help-article:target) * { visibility: hidden !important; }
  body:has(#help-article:target) #help-article,
  body:has(#help-article:target) #help-article * { visibility: visible !important; }
  body:has(#help-article:target) #help-article {
    position: absolute; left: 0; top: 0; width: 100%;
    display: block !important;
  }
  body:has(#help-article:target) .help-nav-actions { display: none !important; }
  #help-article .help-video-card, #help-article .help-article-shot img { break-inside: avoid; }
}