/* ============================================
ClickPatrol Knowledge Base - HitProbe Inspired
Dark theme with #04394d background
============================================ */

:root {
/* Primary Colors - Dark Theme */
--cp-bg-primary: #04394d;
--cp-bg-secondary: #0a4d63;
--cp-bg-tertiary: #115c77;

/* CTA & Accent */
--cp-accent: #00aeef;
--cp-accent-hover: #0098d4;
--cp-accent-light: rgba(0, 174, 239, 0.1);

/* Accessible links & muted text (WCAG AA 4.5:1 on --cp-bg-secondary) */
--cp-link: #8adcf9;
--cp-link-hover: #c5ecff;
--cp-code-fg: #9de4ff;

/* Text Colors - Dark Theme */
--cp-text-primary: #ffffff;
--cp-text-secondary: #b8d4dd;
--cp-text-muted: #a8c0cb;
--cp-text-inverse: #04394d;

/* Borders & Dividers */
--cp-border: rgba(184, 212, 221, 0.2);

/* Shadows */
--cp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
--cp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);

/* Spacing & Layout */
--cp-radius: 8px;
--cp-radius-lg: 12px;
--cp-sidebar-width: 420px;
--cp-toc-width: 240px;
--cp-header-height: 64px;

/* Typography */
--cp-font-base: 16px;
--cp-line-height: 1.6;
}

/* Light Theme */
[data-theme="light"] {
--cp-bg-primary: #f3f7f9;
--cp-bg-secondary: #ffffff;
--cp-bg-tertiary: #e8eef1;

--cp-link: #005a75;
--cp-link-hover: #003f54;
--cp-code-fg: #005a75;

--cp-text-primary: #1a1a1a;
--cp-text-secondary: #3d4f57;
--cp-text-muted: #4d616b;
--cp-text-inverse: #ffffff;

--cp-border: rgba(91, 104, 109, 0.2);

--cp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--cp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ============================================
Base Styles
============================================ */

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
font-size: var(--cp-font-base);
scroll-behavior: smooth;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
background: var(--cp-bg-primary);
color: var(--cp-text-primary);
line-height: var(--cp-line-height);
min-height: 100vh;
scrollbar-gutter: stable;
}

/* Custom selection color */
::selection {
background: var(--cp-accent);
color: var(--cp-text-inverse);
}

::-moz-selection {
background: var(--cp-accent);
color: var(--cp-text-inverse);
}

/* Focus outline styling */
*:focus-visible {
outline: 2px solid var(--cp-link);
outline-offset: 2px;
}

/* Utility text helpers */
.text-muted {
color: var(--cp-text-muted);
}

.small {
font-size: 0.875rem;
}

/* ============================================
Navbar / Header
============================================ */

.navbar {
position: sticky;
top: 0;
z-index: 100;
background: var(--cp-bg-secondary);
border-bottom: 1px solid var(--cp-border);
box-shadow: var(--cp-shadow-sm);
height: var(--cp-header-height);
}

.navbar__inner {
max-width: 1600px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
}

.navbar__brand {
display: flex;
align-items: center;
text-decoration: none;
color: var(--cp-text-primary);
font-weight: 600;
font-size: 1.1rem;
transition: opacity 0.2s;
}

.navbar__brand:hover {
opacity: 0.8;
}

.navbar__brand img {
height: 28px;
width: auto;
transition: opacity 0.2s;
}

.navbar__search {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 0.35rem;
position: relative;
min-width: 200px;
max-width: 420px;
}

.kb-search-submit {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.65rem;
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius);
background: var(--cp-bg-primary);
color: var(--cp-link);
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
transition: background 0.2s, border-color 0.2s;
}

.kb-search-submit:hover {
background: var(--cp-accent-light);
border-color: var(--cp-link);
}

.kb-search-submit:focus-visible {
outline: 2px solid var(--cp-accent);
outline-offset: 2px;
}

.kb-search-results {
list-style: none;
margin: 0;
padding: 0;
}

.kb-search-results__item {
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--cp-border);
}

.kb-search-results__item:last-child {
border-bottom: none;
}

.kb-search-results__item a {
font-weight: 600;
color: var(--cp-link);
text-decoration: none;
}

.kb-search-results__item a:hover {
text-decoration: underline;
}

.kb-search-results__cat {
display: block;
font-size: 0.8125rem;
color: var(--cp-text-muted);
margin-top: 0.25rem;
}

.kb-search-results__summary {
font-size: 0.875rem;
color: var(--cp-text-secondary);
margin-top: 0.35rem;
line-height: 1.5;
}

.navbar__actions {
display: flex;
align-items: center;
gap: 0.75rem;
}

.navbar__search input[type="search"] {
background: var(--cp-bg-primary);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius);
color: var(--cp-text-primary);
padding: 0.5rem 1rem;
font-size: 0.95rem;
width: 100%;
min-width: 0;
transition: border-color 0.2s, background 0.2s;
}

.navbar__search input[type="search"]:focus {
outline: none;
border-color: var(--cp-link);
background: var(--cp-bg-secondary);
}

.navbar__search input[type="search"]::placeholder {
color: var(--cp-text-muted);
}

.navbar__theme-toggle {
margin-left: 1rem;
background: var(--cp-bg-primary);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
color: var(--cp-text-secondary);
}

.navbar__theme-toggle:hover {
background: var(--cp-bg-tertiary);
border-color: var(--cp-link);
color: var(--cp-link);
}

/* Scroll Progress Bar */
.scroll-progress {
position: fixed;
top: var(--cp-header-height);
left: 0;
width: 0%;
height: 3px;
background: var(--cp-accent);
z-index: 99;
transition: width 0.1s ease-out;
}

/* ============================================
Breadcrumb Navigation
============================================ */

.breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--cp-text-muted);
margin-bottom: 1.5rem;
flex-wrap: wrap;
}

.breadcrumb a {
color: var(--cp-link);
text-decoration: none;
transition: color 0.2s;
}

.breadcrumb a:hover {
color: var(--cp-link-hover);
text-decoration: underline;
}

.breadcrumb-separator {
color: var(--cp-text-muted);
user-select: none;
}

.breadcrumb-current {
color: var(--cp-text-secondary);
}

/* ============================================
Main Layout
============================================ */

.kb-root {
max-width: 1600px;
margin: 0 auto;
display: grid;
grid-template-columns: var(--cp-sidebar-width) 1fr var(--cp-toc-width);
gap: 2rem;
padding: 2rem;
align-items: start;
}

.kb-root--no-toc {
grid-template-columns: var(--cp-sidebar-width) 1fr;
}

/* ============================================
Sidebar Navigation
============================================ */

.kb-sidebar {
position: sticky;
top: calc(var(--cp-header-height) + 2rem);
background: var(--cp-bg-secondary);
border-radius: var(--cp-radius-lg);
padding: 1.15rem 1rem 1.25rem;
box-shadow: var(--cp-shadow-sm);
border: 1px solid var(--cp-border);
max-height: calc(100vh - var(--cp-header-height) - 4rem);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(127, 155, 168, 0.45) transparent;
}

.kb-sidebar::-webkit-scrollbar {
width: 5px;
}

.kb-sidebar::-webkit-scrollbar-track {
background: transparent;
}

.kb-sidebar::-webkit-scrollbar-thumb {
background: rgba(127, 155, 168, 0.35);
border-radius: 999px;
}

.kb-sidebar::-webkit-scrollbar-thumb:hover {
background: rgba(127, 155, 168, 0.55);
}

/* ============================================
Main Content Area
============================================ */

.kb-main {
min-width: 0;
padding: 2rem;
background: var(--cp-bg-secondary);
border-radius: var(--cp-radius-lg);
box-shadow: var(--cp-shadow-sm);
border: 1px solid var(--cp-border);
}

/* ============================================
Table of Contents (TOC)
============================================ */

.kb-toc {
position: sticky;
top: calc(var(--cp-header-height) + 2rem);
padding: 1.5rem;
max-height: calc(100vh - var(--cp-header-height) - 4rem);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--cp-accent) transparent;
}

.kb-toc::-webkit-scrollbar {
width: 6px;
}

.kb-toc::-webkit-scrollbar-track {
background: transparent;
}

.kb-toc::-webkit-scrollbar-thumb {
background: var(--cp-accent);
border-radius: 3px;
}

/* ============================================
Sidebar Navigation
============================================ */

.kb-nav-cat {
margin-bottom: 0.15rem;
}

.kb-nav-cat:last-child {
margin-bottom: 0;
}

/* Level 1: section (Getting started, Channel Guide) */
.kb-nav-section {
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.6rem 0.5rem;
border-radius: 8px;
cursor: pointer;
user-select: none;
}

.kb-nav-section:hover {
background: var(--cp-accent-light);
}

.kb-nav-section__chevron {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.45rem;
height: 1.45rem;
padding: 0;
border: none;
background: transparent;
color: var(--cp-text-secondary);
cursor: pointer;
font-size: 0.8rem;
line-height: 1;
}

.kb-nav-section__chevron i {
transition: transform 0.2s ease;
}

.kb-nav-cat.is-open > .kb-nav-section .kb-nav-section__chevron i {
transform: rotate(90deg);
}

.kb-nav-section__label {
flex: 1;
min-width: 0;
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--cp-text-primary);
text-decoration: none;
}

.kb-nav-section__label:hover {
color: var(--cp-link-hover);
}

.kb-nav-section__label.is-active {
color: var(--cp-link);
}

/* Level 2+: nested tree */
.kb-nav-cat-content {
display: none;
margin: 0.1rem 0 0.65rem 0.7rem;
padding: 0.2rem 0 0.25rem 0.75rem;
border-left: 2px solid var(--cp-border);
}

.kb-nav-cat-content.is-open {
display: block;
}

.kb-nav-tree {
display: flex;
flex-direction: column;
gap: 0.15rem;
}

.kb-nav-sub {
display: flex;
flex-direction: column;
gap: 0.1rem;
margin-top: 0.85rem;
padding-top: 0.55rem;
border-top: 1px solid var(--cp-border);
}

.kb-nav-sub:first-child {
margin-top: 0.2rem;
padding-top: 0;
border-top: 0;
}

.kb-nav-link {
display: block;
padding: 0.45rem 0.6rem;
border-radius: 6px;
font-size: 1.0625rem;
line-height: 1.4;
color: var(--cp-text-secondary);
text-decoration: none;
transition: background 0.15s, color 0.15s;
overflow-wrap: break-word;
}

.kb-nav-link:hover {
background: var(--cp-accent-light);
color: var(--cp-link-hover);
}

.kb-nav-link.is-active {
background: var(--cp-accent-light);
color: var(--cp-link);
font-weight: 600;
}

.kb-nav-link--top {
font-size: 1.0625rem;
font-weight: 500;
padding: 0.5rem 0.6rem;
}

/* Articles directly under a section (e.g. Getting started) */
.kb-nav-link--direct {
font-weight: 400;
}

/* Level 2: channel / subcategory (Meta, Google Ads) */
.kb-nav-link--group {
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
color: var(--cp-text-muted);
padding: 0.2rem 0.6rem 0.35rem;
line-height: 1.35;
}

.kb-nav-link--group.is-active {
color: var(--cp-link);
background: transparent;
}

.kb-nav-link--group:hover {
color: var(--cp-link-hover);
background: transparent;
}

/* Level 3: articles under a subcategory */
.kb-nav-sub .kb-nav-link--page {
padding-left: 0.75rem;
font-size: 1.0625rem;
font-weight: 400;
}

/* ============================================
Article Content Typography
============================================ */

.kb-main h1 {
font-size: 2.5rem;
font-weight: 700;
color: var(--cp-text-primary);
margin: 0 0 0.5rem 0;
line-height: 1.2;
}

.kb-meta {
color: var(--cp-text-muted);
font-size: 0.9rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--cp-border);
}

.kb-meta__relative {
color: var(--cp-text-muted);
margin-left: 0.5rem;
}

.kb-content h2 {
font-size: 1.75rem;
font-weight: 600;
color: var(--cp-text-primary);
margin: 2.5rem 0 1rem 0;
padding-top: 0.5rem;
scroll-margin-top: calc(var(--cp-header-height) + 2rem);
line-height: 1.3;
}

.kb-content h3 {
font-size: 1.35rem;
font-weight: 600;
color: var(--cp-text-primary);
margin: 2rem 0 0.75rem 0;
scroll-margin-top: calc(var(--cp-header-height) + 2rem);
line-height: 1.4;
}

.kb-content h4 {
font-size: 1.15rem;
font-weight: 600;
color: var(--cp-text-secondary);
margin: 1.5rem 0 0.5rem 0;
scroll-margin-top: calc(var(--cp-header-height) + 2rem);
}

.kb-content p {
margin-bottom: 1.25rem;
color: var(--cp-text-secondary);
line-height: 1.7;
}

.kb-content ul,
.kb-content ol {
margin: 1rem 0 1.5rem 1.5rem;
color: var(--cp-text-secondary);
line-height: 1.7;
}

.kb-content li {
margin-bottom: 0.5rem;
padding-left: 0.25rem;
}

.kb-content li strong,
.kb-content li b {
  color: var(--cp-text-primary);
}

.kb-content strong,
.kb-content b {
  color: var(--cp-text-primary);
  font-weight: 600;
}


.kb-content a {
color: var(--cp-link);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.2s;
}

.kb-content a:hover {
color: var(--cp-link-hover);
border-bottom-color: var(--cp-link-hover);
}

.kb-content code {
background: var(--cp-bg-primary);
color: var(--cp-code-fg);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-size: 0.9em;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.kb-content pre {
background: var(--cp-bg-primary);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius);
padding: 1rem;
overflow-x: auto;
max-width: 100%;
margin: 1.5rem 0;
scrollbar-width: thin;
}

.kb-content pre code {
background: none;
padding: 0;
color: var(--cp-text-secondary);
}

.kb-content blockquote {
margin: 1.5rem 0;
padding: 1rem 1.5rem;
border-left: 4px solid var(--cp-accent);
background: var(--cp-bg-primary);
color: var(--cp-text-secondary);
font-style: italic;
}

.kb-content blockquote p:last-child {
margin-bottom: 0;
}

.kb-content table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.95rem;
}

.kb-content table th,
.kb-content table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--cp-border);
}

.kb-content table th {
background: var(--cp-bg-primary);
color: var(--cp-text-primary);
font-weight: 600;
}

.kb-content table tr:hover {
background: var(--cp-bg-primary);
}

.kb-content img {
max-width: 100%;
height: auto;
border-radius: var(--cp-radius);
margin: 1.5rem 0;
}

.kb-content hr {
border: none;
border-top: 1px solid var(--cp-border);
margin: 2rem 0;
}

/* ============================================
Callout / Admonition Blocks
============================================ */

.kb-content .callout {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border-radius: var(--cp-radius);
border-left: 4px solid;
background: var(--cp-bg-primary);
}

.kb-content .callout__title {
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.kb-content .callout__title i {
font-size: 1.2em;
}

.kb-content .callout p:last-child {
margin-bottom: 0;
}

/* Tip - Blue/Cyan */
.kb-content .callout--tip {
border-left-color: var(--cp-link);
background: rgba(0, 174, 239, 0.08);
}

.kb-content .callout--tip .callout__title {
color: var(--cp-link);
}

/* Info - Blue/Grey */
.kb-content .callout--info {
border-left-color: #3b82f6;
background: rgba(59, 130, 246, 0.08);
}

.kb-content .callout--info .callout__title {
color: #3b82f6;
}

/* Warning - Orange/Yellow */
.kb-content .callout--warning {
border-left-color: #f59e0b;
background: rgba(245, 158, 11, 0.08);
}

.kb-content .callout--warning .callout__title {
color: #f59e0b;
}

/* Danger - Red */
.kb-content .callout--danger {
border-left-color: #ef4444;
background: rgba(239, 68, 68, 0.08);
}

.kb-content .callout--danger .callout__title {
color: #ef4444;
}

/* Success - Green */
.kb-content .callout--success {
border-left-color: #10b981;
background: rgba(16, 185, 129, 0.08);
}

.kb-content .callout--success .callout__title {
color: #10b981;
}

/* Anchor links in headings */
.kb-content h2 .header-anchor,
.kb-content h3 .header-anchor {
opacity: 0;
margin-left: 0.5rem;
color: var(--cp-link);
text-decoration: none;
font-size: 0.8em;
transition: opacity 0.2s;
}

.kb-content h2:hover .header-anchor,
.kb-content h3:hover .header-anchor {
opacity: 1;
}

/* Copy code button */
.code-block-wrapper {
position: relative;
}

.copy-code-button {
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: var(--cp-bg-secondary);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius);
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
color: var(--cp-text-secondary);
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 0.4rem;
}

.copy-code-button:hover {
background: var(--cp-accent);
color: var(--cp-text-inverse);
border-color: var(--cp-link);
}

.copy-code-button.copied {
background: #00f092;
color: var(--cp-text-inverse);
border-color: #00f092;
}

/* ============================================
Table of Contents (TOC) Styles
============================================ */

.kb-toc-title {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--cp-text-muted);
margin-bottom: 1rem;
}

.kb-toc-list {
list-style: none;
margin: 0;
padding: 0;
}

.kb-toc-list li {
margin-bottom: 0.5rem;
}

.kb-toc-list li.lvl-3 {
padding-left: 1rem;
margin-top: 0.15rem;
margin-bottom: 0.25rem;
}

.kb-toc-list li.lvl-group {
margin-top: 0.85rem;
margin-bottom: 0.2rem;
}

.kb-toc-list li.lvl-group:first-child {
margin-top: 0;
}

.kb-toc-list li.lvl-group a {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--cp-text-muted);
padding-top: 0.15rem;
padding-bottom: 0.2rem;
}

.kb-toc-list a {
display: block;
color: var(--cp-text-secondary);
text-decoration: none;
font-size: 0.9rem;
line-height: 1.4;
padding: 0.25rem 0;
border-left: 2px solid transparent;
padding-left: 0.75rem;
transition: all 0.2s;
}

.kb-toc-list a:hover {
color: var(--cp-link-hover);
border-left-color: var(--cp-link);
}

.kb-toc-list a.active {
color: var(--cp-link);
font-weight: 600;
border-left-color: var(--cp-link);
}

/* ============================================
Previous/Next Navigation
============================================ */

.pagination-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--cp-border);
}

.pagination-nav__link {
display: flex;
flex-direction: column;
padding: 1rem;
background: var(--cp-bg-primary);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius);
text-decoration: none;
transition: all 0.2s;
}

.pagination-nav__link:hover {
border-color: var(--cp-link);
transform: translateY(-2px);
box-shadow: var(--cp-shadow-sm);
}

.pagination-nav__link--prev {
text-align: left;
}

.pagination-nav__link--next {
text-align: right;
grid-column: 2;
}

.pagination-nav__sublabel {
font-size: 0.85rem;
color: var(--cp-text-muted);
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.pagination-nav__label {
color: var(--cp-link);
font-weight: 600;
font-size: 1rem;
}

/* ============================================
Feedback Section
============================================ */

.article-feedback {
margin-top: 3rem;
padding: 2rem;
background: var(--cp-bg-primary);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-lg);
text-align: center;
}

.article-feedback__title {
font-size: 1.25rem;
font-weight: 600;
color: var(--cp-text-primary);
margin-bottom: 0.5rem;
}

.article-feedback__subtitle {
color: var(--cp-text-muted);
font-size: 0.95rem;
margin-bottom: 1.5rem;
}

.article-feedback__buttons {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
}

.article-feedback__button {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
background: var(--cp-bg-secondary);
border: 2px solid var(--cp-border);
border-radius: var(--cp-radius);
cursor: pointer;
transition: all 0.2s;
color: var(--cp-text-secondary);
font-weight: 500;
}

.article-feedback__button:hover {
border-color: var(--cp-link);
background: var(--cp-accent-light);
color: var(--cp-link);
transform: translateY(-2px);
}

.article-feedback__button i {
font-size: 2rem;
}

.article-feedback__button--yes:hover {
border-color: #10b981;
color: #10b981;
}

.article-feedback__button--no:hover {
border-color: #ef4444;
color: #ef4444;
}

.article-feedback__button.selected--yes {
border-color: #10b981;
background: rgba(16, 185, 129, 0.1);
color: #10b981;
}

.article-feedback__button.selected--no {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}

.article-feedback__thanks {
display: none;
color: var(--cp-text-primary);
font-size: 1.1rem;
font-weight: 600;
padding: 1rem;
}

.article-feedback__thanks i {
color: #10b981;
margin-right: 0.5rem;
}

.article-feedback__thanks.show {
display: block;
}

/* ============================================
Related Articles
============================================ */

.related-articles {
margin-top: 3rem;
padding: 1.5rem;
background: var(--cp-bg-primary);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-lg);
}

.related-articles__title {
font-size: 1.1rem;
font-weight: 600;
color: var(--cp-text-primary);
margin-bottom: 1rem;
}

.related-articles__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.75rem;
}

.related-articles__item a {
display: block;
padding: 0.75rem 1rem;
background: var(--cp-bg-secondary);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius);
color: var(--cp-text-secondary);
text-decoration: none;
transition: all 0.2s;
}

.related-articles__item a:hover {
border-color: var(--cp-link);
color: var(--cp-link);
transform: translateX(4px);
}

.related-articles__item i {
margin-right: 0.5rem;
font-size: 0.85em;
}

/* ============================================
Support Section
============================================ */

.support-section {
margin-top: 3rem;
padding: 2rem;
background: var(--cp-bg-primary);
border: 2px solid var(--cp-accent);
border-radius: var(--cp-radius-lg);
text-align: center;
}

.support-section__icon {
font-size: 2.5rem;
color: var(--cp-link);
margin-bottom: 1rem;
}

.support-section__title {
font-size: 1.35rem;
font-weight: 600;
line-height: 1.3;
color: var(--cp-text-primary);
margin: 0 0 0.75rem;
}

.support-section__text {
color: var(--cp-text-secondary);
margin-bottom: 1.5rem;
font-size: 1rem;
line-height: 1.6;
}

.support-section__button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--cp-accent);
color: var(--cp-text-inverse);
padding: 0.875rem 2rem;
border-radius: var(--cp-radius);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(0, 174, 239, 0.25);
}

.support-section__button:hover {
background: var(--cp-accent-hover);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 174, 239, 0.35);
}

.support-section__button i {
font-size: 1.1em;
}

/* ============================================
Sidebar Controls
============================================ */

.sidebar-controls {
display: flex;
gap: 0.9rem;
margin-bottom: 0.95rem;
padding-bottom: 0.85rem;
border-bottom: 1px solid var(--cp-border);
justify-content: flex-end;
}

.sidebar-control-btn {
background: none;
border: none;
padding: 0;
font-size: 0.9375rem;
color: var(--cp-text-muted);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.15s;
}

.sidebar-control-btn:hover {
color: var(--cp-link);
background: none;
border: none;
}

/* ============================================
Mobile Menu Toggle
============================================ */

.mobile-menu-toggle {
display: none;
background: var(--cp-bg-primary);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius);
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
color: var(--cp-text-secondary);
margin-right: 1rem;
}

.mobile-menu-toggle:hover {
background: var(--cp-bg-tertiary);
border-color: var(--cp-link);
color: var(--cp-link);
}

.mobile-sidebar-overlay {
display: none;
position: fixed;
top: var(--cp-header-height);
left: 0;
width: 100%;
height: calc(100vh - var(--cp-header-height));
background: rgba(0, 0, 0, 0.5);
z-index: 98;
}

.mobile-sidebar-overlay.active {
display: block;
}

.kb-sidebar.mobile-open {
position: fixed;
top: var(--cp-header-height);
left: 0;
height: calc(100vh - var(--cp-header-height));
z-index: 99;
transform: translateX(0);
}

/* ============================================
Footer
============================================ */

.kb-footer {
text-align: center;
color: var(--cp-text-muted);
font-size: 0.9rem;
padding: 2rem;
margin-top: 4rem;
}

.kb-footer a {
color: var(--cp-link);
text-decoration: none;
}

.kb-footer a:hover {
color: var(--cp-link-hover);
text-decoration: underline;
}

/* ============================================
Utility Classes
============================================ */

.btn-primary {
display: inline-block;
background: var(--cp-accent);
color: var(--cp-text-inverse);
border: none;
border-radius: var(--cp-radius);
padding: 0.75rem 1.5rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
box-shadow: 0 2px 4px rgba(0, 174, 239, 0.2);
}

.btn-primary:hover {
background: var(--cp-accent-hover);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 174, 239, 0.3);
}

/* ============================================
Responsive Design
============================================ */

@media (max-width: 1200px) {
.kb-root {
 grid-template-columns: minmax(300px, var(--cp-sidebar-width)) 1fr 220px;
 gap: 1.5rem;
}
.kb-root--no-toc {
 grid-template-columns: minmax(300px, var(--cp-sidebar-width)) 1fr;
}
}

@media (max-width: 992px) {
.kb-root {
 grid-template-columns: 1fr;
 padding: 1rem;
}

.navbar__inner {
 padding: 0 1rem;
}

.navbar {
 height: auto;
 min-height: var(--cp-header-height);
}

.navbar__inner {
 flex-wrap: wrap;
 row-gap: 0.5rem;
 padding-top: 0.5rem;
 padding-bottom: 0.5rem;
}

.navbar__search {
 flex: 1 1 100%;
 max-width: none;
 min-width: 0;
 order: 3;
}

.navbar__search input[type="search"],
.navbar__search input[type="search"]:focus {
 width: 100%;
}

.mobile-menu-toggle {
 display: flex;
}

.kb-sidebar {
 display: none;
 transform: translateX(-100%);
 transition: transform 0.3s ease-out;
}

.kb-sidebar.mobile-open {
 display: block;
}

.kb-toc {
 position: static;
 max-height: none;
}

.kb-main {
 padding: 1.5rem;
}

.pagination-nav {
 grid-template-columns: 1fr;
}

.pagination-nav__link--next {
 grid-column: 1;
}
}

@media (max-width: 768px) {
.navbar__inner {
 padding: 0 1rem;
}

.navbar__brand img {
 height: 24px;
}

.navbar__search {
 flex: 1 1 100%;
 max-width: none;
}

.kb-main h1 {
 font-size: 2rem;
}

.kb-content h2 {
 font-size: 1.5rem;
}

.kb-content h3 {
 font-size: 1.25rem;
}

.kb-main {
 padding: 1rem;
}
}

/* Release notes */
.kb-nav-releasenotes {
margin: 0 0 0.75rem;
padding: 0 0 0.75rem;
border-bottom: 1px solid var(--cp-border);
}

.kb-nav-empty {
display: block;
padding: 0.45rem 0.6rem;
font-size: 1rem;
color: var(--cp-text-muted);
font-style: italic;
}

.kb-nav-link--release {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
padding: 0.45rem 0.55rem;
}

.kb-nav-link__version {
font-size: 1.0625rem;
font-weight: 500;
color: var(--cp-text-primary);
line-height: 1.3;
}

.kb-nav-link__date {
font-size: 0.875rem;
color: var(--cp-text-muted);
line-height: 1.2;
}

.kb-nav-link--release.is-active .kb-nav-link__version {
color: var(--cp-link);
font-weight: 600;
}

.release-notes {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0;
border-left: 2px solid var(--cp-border);
padding-left: 1.25rem;
}

.release-note {
position: relative;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--cp-border);
scroll-margin-top: calc(var(--cp-header-height) + 1.5rem);
}

.release-note::before {
content: '';
position: absolute;
left: calc(-1.25rem - 5px);
top: 0.45rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cp-link);
box-shadow: 0 0 0 3px var(--cp-bg-secondary);
}

.release-note:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

.release-note__header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.85rem;
}

.release-note__badge {
display: inline-block;
margin: 0;
padding: 0.2rem 0.65rem;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.3;
color: var(--cp-link);
background: var(--cp-accent-light);
border: 1px solid var(--cp-border);
}

.release-note__date {
font-size: 0.8125rem;
color: var(--cp-text-muted);
}

.release-note__body {
margin-top: 0;
}

.kb-meta--releasenotes {
color: var(--cp-text-secondary);
}

.kb-meta--category {
color: var(--cp-text-secondary);
}

.kb-content--category .kb-category-desc {
margin-bottom: 1.5rem;
line-height: 1.65;
}

.kb-category-subheading {
font-size: 1.125rem;
margin: 1.25rem 0 0.75rem;
color: var(--cp-text-primary);
}

.kb-category-sublist {
list-style: none;
margin: 0;
padding: 0;
}

.kb-category-sublist li {
margin-bottom: 0.75rem;
padding-left: 0;
}

.kb-category-sublist a {
font-weight: 600;
color: var(--cp-link);
text-decoration: none;
}

.kb-category-sublist a:hover,
.kb-category-article-list a:hover {
color: var(--cp-link-hover);
text-decoration: underline;
}

.kb-category-sublist__desc {
display: block;
font-size: 0.875rem;
color: var(--cp-text-secondary);
font-weight: 400;
margin-top: 0.25rem;
}

.kb-category-setup-lead {
margin: 0 0 0.75rem;
font-size: 0.95rem;
line-height: 1.55;
color: var(--cp-text-secondary);
}

.kb-category-article-list {
list-style: none;
margin: 0;
padding: 0;
}

.kb-category-article-list li {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--cp-border);
}

.kb-category-article-list li:last-child {
border-bottom: none;
}

.kb-category-article-list a {
font-weight: 600;
color: var(--cp-link);
text-decoration: none;
}

.kb-category-article-list__summary {
font-size: 0.875rem;
color: var(--cp-text-secondary);
margin-top: 0.35rem;
line-height: 1.5;
}

.skip-link {
position: absolute;
left: 1rem;
top: -3rem;
z-index: 200;
padding: 0.5rem 0.85rem;
background: var(--cp-accent);
color: var(--cp-text-inverse);
border-radius: var(--cp-radius);
font-weight: 600;
text-decoration: none;
}

.skip-link:focus {
top: 0.75rem;
}

.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

.kb-search-suggest {
position: absolute;
top: calc(100% + 0.35rem);
left: 0;
right: 0;
z-index: 120;
background: var(--cp-bg-secondary);
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius);
box-shadow: var(--cp-shadow-md);
max-height: 22rem;
overflow-y: auto;
}

.kb-search-suggest__list {
list-style: none;
margin: 0;
padding: 0.35rem 0;
}

.kb-search-suggest__item {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.55rem 0.85rem;
text-decoration: none;
color: var(--cp-text-primary);
}

.kb-search-suggest__item:hover,
.kb-search-suggest__item.is-active {
background: var(--cp-accent-light);
}

.kb-search-suggest__title {
font-weight: 600;
}

.kb-search-suggest__cat {
font-size: 0.75rem;
color: var(--cp-text-muted);
}

.kb-search-results mark,
.kb-search-suggest mark {
background: rgba(0, 174, 239, 0.25);
color: inherit;
padding: 0 0.1em;
}

.kb-404-search {
display: flex;
gap: 0.5rem;
margin: 1.25rem 0;
max-width: 36rem;
}

.kb-404-search input[type="search"] {
flex: 1;
min-width: 0;
padding: 0.65rem 1rem;
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius);
background: var(--cp-bg-primary);
color: var(--cp-text-primary);
}

.kb-404-links {
margin-top: 1rem;
}

.kb-walkthrough {
margin: 0 0 2.25rem;
max-width: 46rem;
}

.kb-walkthrough h2 {
margin-bottom: 0.75rem;
font-size: 1.375rem;
line-height: 1.3;
}

.kb-walkthrough p {
margin: 0 0 1rem;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--cp-text-secondary);
}

.kb-walkthrough p:last-child {
margin-bottom: 0;
}

.kb-walkthrough a {
color: var(--cp-link);
}

.kb-walkthrough a:hover {
color: var(--cp-link-hover);
}

.kb-walkthrough__frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
margin: 1.25rem 0;
overflow: hidden;
border-radius: var(--cp-radius-lg);
background: #000;
box-shadow: var(--cp-shadow-md);
}

.kb-walkthrough__frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}

.kb-home-hero {
margin-bottom: 2.25rem;
}

.kb-home-hero h1 {
margin-bottom: 0.75rem;
font-size: 2.125rem;
line-height: 1.2;
text-wrap: balance;
}

.kb-home-hero__lead {
font-size: 1.125rem;
line-height: 1.55;
color: var(--cp-text-secondary);
max-width: 42rem;
}

.kb-home-steps {
margin: 0 0 2rem;
}

.kb-home-steps__list {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 1rem 0 0;
padding: 0;
}

.kb-home-steps__list a {
display: flex;
flex-direction: column;
gap: 0.55rem;
height: 100%;
padding: 1.2rem 1.25rem;
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-lg);
background: var(--cp-bg-primary);
text-decoration: none;
color: inherit;
}

.kb-home-steps__list a:hover {
border-color: var(--cp-link);
}

.kb-home-steps__num {
width: 1.75rem;
height: 1.75rem;
border-radius: 999px;
background: var(--cp-accent);
color: var(--cp-text-inverse);
font-weight: 700;
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
}

.kb-home-steps__title {
font-weight: 700;
font-size: 1.0625rem;
line-height: 1.3;
color: var(--cp-text-primary);
text-wrap: balance;
}

.kb-home-steps__text {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--cp-text-secondary);
}

.kb-home-aside-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 0 0 2rem;
}

.kb-home-panel {
padding: 1.2rem 1.25rem;
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius-lg);
background: var(--cp-bg-primary);
}

.kb-home-panel h2 {
font-size: 1.125rem;
margin-bottom: 0.75rem;
}

.kb-home-panel ul {
list-style: none;
margin: 0;
padding: 0;
}

.kb-home-panel li {
margin: 0.55rem 0;
}

.kb-home-panel a {
color: var(--cp-link);
text-decoration: none;
line-height: 1.4;
}

.kb-home-panel a:hover {
color: var(--cp-link-hover);
text-decoration: underline;
}

.kb-home-releases {
display: flex;
flex-direction: column;
gap: 0.15rem;
}

.kb-home-releases li {
margin: 0;
}

.kb-home-releases a {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
padding: 0.45rem 0;
}

.kb-home-releases__version {
font-weight: 600;
line-height: 1.35;
}

.kb-home-releases__date {
font-size: 0.875rem;
color: var(--cp-text-muted);
}

.kb-home-releases__all {
margin: 0.65rem 0 0;
font-size: 0.9375rem;
}

.kb-home-sections {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
margin: 0 0 2rem;
padding: 0;
}

.kb-home-sections a {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.75rem;
padding: 0.95rem 1.1rem;
border: 1px solid var(--cp-border);
border-radius: var(--cp-radius);
background: var(--cp-bg-primary);
text-decoration: none;
color: var(--cp-text-primary);
font-size: 1.0625rem;
font-weight: 600;
}

.kb-home-sections a:hover {
border-color: var(--cp-link);
}

.kb-home-sections__count {
font-size: 0.875rem;
font-weight: 400;
color: var(--cp-text-muted);
white-space: nowrap;
}

.kb-category-sublist__count {
display: inline-block;
margin-left: 0.4rem;
font-size: 0.8rem;
color: var(--cp-text-muted);
font-weight: 400;
}

.kb-category-nested-articles {
list-style: none;
margin: 0.45rem 0 0;
padding: 0 0 0 0.85rem;
border-left: 2px solid var(--cp-border);
}

.kb-category-nested-articles li {
margin: 0.25rem 0;
}

.kb-category-nested-articles a {
font-weight: 500;
font-size: 0.9rem;
}

.release-note__body ul {
margin: 0.6rem 0 0.8rem 1.2rem;
}

@media (max-width: 768px) {
.kb-home-steps__list,
.kb-home-aside-grid,
.kb-home-sections {
 grid-template-columns: 1fr;
}

.kb-404-search {
 flex-direction: column;
}
}