/* ============================================================
   kb.css — Knowledge Base (Landing + Article)
   Trade Lab Learn — /learn  &  /learn/{category}/{slug}
   ============================================================ */

/* ── Shell ───────────────────────────────────────────────── */
.kb-shell {
    display: flex;
    min-height: calc(100vh - 62px);
}

/* ── Left sidebar ─────────────────────────────────────────── */
.kb-sidebar {
    width: 270px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #dbeafe;
    position: sticky;
    top: 62px;           /* below sticky nav */
    height: calc(100vh - 62px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #dbeafe #fff;
}
.kb-sidebar::-webkit-scrollbar       { width: 4px; }
.kb-sidebar::-webkit-scrollbar-track { background: #fff; }
.kb-sidebar::-webkit-scrollbar-thumb { background: #dbeafe; border-radius: 4px; }

/* Search inside sidebar */
.kb-sidebar-search {
    padding: 1rem;
    border-bottom: 1px solid #f1f5f9;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}
.kb-sidebar-search-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f8faff;
    border: 1.5px solid #dbeafe;
    border-radius: 8px;
    padding: .5rem .75rem;
    transition: border-color .2s;
}
.kb-sidebar-search-wrap:focus-within { border-color: #2563eb; }
.kb-sidebar-search-wrap input {
    border: none;
    background: none;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    font-size: .825rem;
    color: #0f172a;
    width: 100%;
}
.kb-sidebar-search-wrap input::placeholder { color: #94a3b8; }
.kb-sidebar-search-wrap svg { color: #94a3b8; flex-shrink: 0; }

/* Category group */
.kb-nav-group { border-bottom: 1px solid #f1f5f9; }
.kb-nav-group-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
    transition: color .15s;
}
.kb-nav-group-btn:hover { color: #1e3a8a; }
.kb-nav-group-btn svg { transition: transform .2s; flex-shrink: 0; }
.kb-nav-group.open .kb-nav-group-btn svg { transform: rotate(180deg); }
.kb-nav-group-btn .kb-cat-icon {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Sub links */
.kb-nav-links {
    display: none;
    flex-direction: column;
    padding: 0 .5rem .625rem;
}
.kb-nav-group.open .kb-nav-links { display: flex; }
.kb-nav-links a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    border-radius: 7px;
    font-size: .825rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kb-nav-links a:hover  { background: #eff6ff; color: #1e3a8a; }
.kb-nav-links a.active { background: #dbeafe; color: #2563eb; font-weight: 600; }
.kb-nav-links a .kb-link-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: .5;
}

/* ── Right content area ──────────────────────────────────── */
.kb-content {
    flex: 1;
    min-width: 0;
    background: #f8faff;
}

/* ══════════════════════════════════════════════════════════
   LANDING PAGE
   ══════════════════════════════════════════════════════════ */

.kb-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    padding: 3.5rem 3rem 3rem;
    color: #fff;
}
.kb-hero h1 {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 .5rem;
    letter-spacing: -.02em;
}
.kb-hero p { font-size: .95rem; color: rgba(255,255,255,.75); margin: 0 0 1.5rem; }

.kb-hero-search {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border-radius: 10px;
    padding: .75rem 1.125rem;
    max-width: 520px;
    box-shadow: 0 4px 24px rgba(0,0,0,.15);
}
.kb-hero-search input {
    border: none;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    font-size: .95rem;
    color: #0f172a;
    flex: 1;
    background: transparent;
}
.kb-hero-search input::placeholder { color: #94a3b8; }
.kb-hero-search svg { color: #94a3b8; flex-shrink: 0; }

.kb-stats-strip {
    display: flex;
    gap: 2rem;
    margin-top: 1.75rem;
    flex-wrap: wrap;
}
.kb-stat-item { text-align: left; }
.kb-stat-num {
    font-family: 'Syne', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    display: block;
}
.kb-stat-label { font-size: .75rem; color: rgba(255,255,255,.6); }

/* Category grid */
.kb-landing-body { padding: 2rem 3rem; }
.kb-landing-body h2 {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0 0 1.25rem;
}

.kb-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.kb-cat-card {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 1.25rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kb-cat-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 4px 20px rgba(37,99,235,.08);
    transform: translateY(-2px);
}
.kb-cat-card-top { display: flex; align-items: center; gap: .75rem; }
.kb-cat-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}
.kb-cat-card-icon.blue   { background: #dbeafe; }
.kb-cat-card-icon.green  { background: #dcfce7; }
.kb-cat-card-icon.purple { background: #ede9fe; }
.kb-cat-card-icon.amber  { background: #fef9c3; }
.kb-cat-card-icon.red    { background: #fee2e2; }
.kb-cat-card-icon.teal   { background: #ccfbf1; }
.kb-cat-card-icon.orange { background: #ffedd5; }
.kb-cat-card-icon.slate  { background: #f1f5f9; }

.kb-cat-card-name {
    font-family: 'Syne', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: #1e3a8a;
}
.kb-cat-card-count { font-size: .75rem; color: #94a3b8; }
.kb-cat-card-desc  { font-size: .8rem; color: #64748b; line-height: 1.5; }
.kb-cat-card-tags  { display: flex; flex-wrap: wrap; gap: .375rem; }
.kb-cat-tag {
    font-size: .68rem;
    background: #f1f5f9;
    color: #64748b;
    padding: .15rem .45rem;
    border-radius: 4px;
}

/* Popular articles */
.kb-popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .75rem;
}
.kb-popular-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    padding: .75rem 1rem;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 500;
    color: #1e3a8a;
    transition: background .15s, border-color .15s;
}
.kb-popular-item:hover { background: #eff6ff; border-color: #93c5fd; }
.kb-popular-item svg { color: #2563eb; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   ARTICLE PAGE
   ══════════════════════════════════════════════════════════ */

.kb-article-wrap {
    max-width: 820px;
    padding: 2.5rem 3rem;
}

/* Breadcrumb */
.kb-breadcrumb {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .78rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.kb-breadcrumb a { color: #2563eb; text-decoration: none; font-weight: 500; }
.kb-breadcrumb a:hover { text-decoration: underline; }
.kb-breadcrumb span { color: #94a3b8; }
.kb-breadcrumb svg  { color: #cbd5e1; }

/* Article header */
.kb-article-header { margin-bottom: 1.75rem; }
.kb-article-cat {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #2563eb;
    background: #dbeafe;
    padding: .2rem .625rem;
    border-radius: 4px;
    margin-bottom: .75rem;
}
.kb-article-title {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #1e3a8a;
    margin: 0 0 .75rem;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.kb-article-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .78rem;
    color: #94a3b8;
    flex-wrap: wrap;
}
.kb-article-meta span { display: flex; align-items: center; gap: .3rem; }

/* Definition box */
.kb-definition {
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    font-size: .95rem;
    color: #1e3a8a;
    line-height: 1.65;
    font-weight: 500;
}

/* Article body */
.kb-article-body { color: #334155; line-height: 1.75; }
.kb-article-body h2 {
    font-family: 'Syne', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e3a8a;
    margin: 2rem 0 .875rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #dbeafe;
}
.kb-article-body h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1e3a8a;
    margin: 1.5rem 0 .5rem;
}
.kb-article-body p  { margin: 0 0 1rem; font-size: .925rem; }
.kb-article-body ul,
.kb-article-body ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.kb-article-body li { font-size: .925rem; margin-bottom: .375rem; }
.kb-article-body strong { color: #1e3a8a; }

/* Formula box */
.kb-formula {
    background: #0d1117;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
    font-family: 'Courier New', monospace;
    font-size: .875rem;
    color: #60a5fa;
    overflow-x: auto;
    line-height: 1.6;
}
.kb-formula .kb-formula-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #475569;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: .5rem;
    display: block;
}

/* Callout boxes */
.kb-callout {
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    font-size: .875rem;
    line-height: 1.6;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}
.kb-callout svg { flex-shrink: 0; margin-top: 2px; }
.kb-callout.tip  { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.kb-callout.warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.kb-callout.info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.kb-callout.tip  svg { color: #16a34a; }
.kb-callout.warn svg { color: #d97706; }
.kb-callout.info svg { color: #2563eb; }

/* Example table */
.kb-table-wrap { overflow-x: auto; margin: 1.25rem 0; border-radius: 10px; border: 1px solid #dbeafe; }
.kb-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.kb-table th {
    background: #f8faff;
    padding: .75rem 1rem;
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    border-bottom: 1px solid #dbeafe;
}
.kb-table td { padding: .75rem 1rem; border-bottom: 1px solid #f1f5f9; color: #334155; }
.kb-table tbody tr:last-child td { border-bottom: none; }
.kb-table tbody tr:hover td { background: #f8faff; }

/* Chart placeholder */
.kb-chart-placeholder {
    background: #f8faff;
    border: 2px dashed #dbeafe;
    border-radius: 12px;
    height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #94a3b8;
    font-size: .84rem;
    margin: 1.25rem 0;
}
.kb-chart-placeholder svg { opacity: .4; }

/* Related terms */
.kb-related {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-top: 2.5rem;
}
.kb-related h3 {
    font-family: 'Syne', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0 0 .875rem;
}
.kb-related-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.kb-related-links a {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    color: #2563eb;
    font-size: .8rem;
    font-weight: 500;
    padding: .35rem .75rem;
    border-radius: 99px;
    text-decoration: none;
    transition: background .15s;
}
.kb-related-links a:hover { background: #dbeafe; }

/* CTA */
.kb-cta {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    border-radius: 14px;
    padding: 1.75rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.kb-cta-text h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .25rem;
}
.kb-cta-text p { font-size: .825rem; color: rgba(255,255,255,.7); margin: 0; }
.kb-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: #1e3a8a;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    font-weight: 700;
    padding: .65rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.kb-cta-btn:hover { background: #f0f7ff; }

/* Prev / Next nav */
.kb-article-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dbeafe;
    flex-wrap: wrap;
}
.kb-nav-btn {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .875rem 1.125rem;
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    text-decoration: none;
    min-width: 160px;
    transition: border-color .15s, box-shadow .15s;
}
.kb-nav-btn:hover { border-color: #93c5fd; box-shadow: 0 2px 12px rgba(37,99,235,.08); }
.kb-nav-btn.next { text-align: right; }
.kb-nav-btn-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.kb-nav-btn-title { font-size: .875rem; font-weight: 600; color: #1e3a8a; }

/* On-page TOC (right sticky) */
.kb-toc {
    width: 200px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    height: fit-content;
    padding: 1.5rem 1.5rem 1.5rem 0;
    display: none;
}
@media (min-width: 1280px) { .kb-toc { display: block; } }
.kb-toc-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: .75rem; }
.kb-toc-links { display: flex; flex-direction: column; gap: .25rem; }
.kb-toc-links a {
    font-size: .78rem;
    color: #64748b;
    text-decoration: none;
    padding: .25rem .5rem;
    border-left: 2px solid #e2e8f0;
    transition: color .15s, border-color .15s;
    line-height: 1.4;
}
.kb-toc-links a:hover  { color: #1e3a8a; border-color: #93c5fd; }
.kb-toc-links a.active { color: #2563eb; border-color: #2563eb; font-weight: 600; }

/* Mobile hamburger for KB sidebar */
.kb-sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 200;
    width: 44px; height: 44px;
    background: #1e3a8a;
    color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(30,58,138,.3);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.kb-sidebar-overlay {
    display: none;
    position: fixed;
    top: 62px; left: 0;
    width: 100%;
    height: calc(100vh - 62px);
    background: rgba(0,0,0,.35);
    z-index: 997;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .kb-article-wrap { padding: 2rem 2rem; }
    .kb-landing-body { padding: 1.5rem 2rem; }
}
@media (max-width: 768px) {
    .kb-sidebar {
        position: fixed;
        top: 62px; left: 0;           /* sit below the sticky navbar */
        height: calc(100vh - 62px);
        z-index: 998;                  /* below nav (1000) but above content */
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 24px rgba(30,58,138,.12);
    }
    .kb-sidebar.open { transform: translateX(0); }
    .kb-sidebar-overlay {
        position: fixed;
        top: 62px; left: 0;
        width: 100%; height: calc(100vh - 62px);
        z-index: 997;
    }
    .kb-sidebar-toggle { display: flex; }
    .kb-sidebar-overlay.open { display: block; }
    .kb-hero { padding: 2rem 1.25rem; }
    .kb-hero h1 { font-size: 1.5rem; }
    .kb-landing-body { padding: 1.25rem; }
    .kb-article-wrap { padding: 1.25rem; }
    .kb-article-title { font-size: 1.4rem; }
    .kb-cta { flex-direction: column; }
}

/* ── Article full-width layout fix ──────────────────────── */
.kb-article-outer {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
}

.kb-article-wrap {
    flex: 1;
    min-width: 0;
    max-width: none;        /* remove 820px cap — fill available space */
    padding: 2.5rem 3rem;
}

.kb-toc {
    width: 210px;
    flex-shrink: 0;
    display: block;         /* always in DOM, hidden via media query */
    padding: 2.5rem 1.5rem 2.5rem 0;
    position: sticky;
    top: 82px;
    align-self: flex-start;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
}

/* Hide TOC on smaller screens */
@media (max-width: 1280px) {
    .kb-toc { display: none; }
}
@media (max-width: 768px) {
    .kb-article-wrap { padding: 1.25rem; }
}

/* ============================================================
   Article layout — added to kb.css
   ============================================================ */

/* ── Article wrapper ─────────────────────────────────────── */
.kb-article-wrap { max-width:1100px; padding:28px 32px 48px; margin:0 auto; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.kb-breadcrumb {
    display:flex; align-items:center; gap:6px;
    font-size:.8rem; color:#94a3b8; margin-bottom:20px; flex-wrap:wrap;
}
.kb-breadcrumb a { color:#64748b; text-decoration:none; }
.kb-breadcrumb a:hover { color:#2563eb; }
.kb-breadcrumb span { color:#cbd5e1; }

/* ── Article header ──────────────────────────────────────── */
.kb-article-header { margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid #f1f5f9; }

.kb-article-meta-row {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;
}
.kb-diff-badge {
    display:inline-block; padding:2px 9px; border-radius:4px;
    font-size:11px; font-weight:700; letter-spacing:.3px;
}
.kb-read-time, .kb-updated {
    display:flex; align-items:center; gap:4px;
    font-size:.8rem; color:#94a3b8;
}
.kb-article-title {
    font-size:1.75rem; font-weight:800; color:#0f172a;
    line-height:1.25; letter-spacing:-.3px; margin:0 0 10px;
}
.kb-article-summary { font-size:1rem; color:#475569; line-height:1.65; margin:0; }

/* Language chips */
.kb-lang-available { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:14px; }
.kb-lang-label { font-size:11px; color:#94a3b8; font-weight:600; }
.kb-lang-chip {
    padding:3px 9px; border:1.5px solid #e2e8f0; border-radius:20px;
    font-size:11px; font-weight:600; color:#64748b; cursor:pointer;
    text-decoration:none; transition:all .12s;
}
.kb-lang-chip:hover { border-color:#2563eb; color:#2563eb; }
.kb-lang-chip.active { background:#2563eb; border-color:#2563eb; color:#fff; }

/* ── Two-column layout ───────────────────────────────────── */
.kb-article-cols {
    display:grid;
    grid-template-columns:1fr 240px;
    gap:40px;
    align-items:start;
}

/* ── Table of Contents ───────────────────────────────────── */
.kb-article-aside { position:sticky; top:82px; }

.kb-toc {
    background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px;
    padding:16px; margin-bottom:16px;
}
.kb-toc-title {
    font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.6px; color:#94a3b8; margin-bottom:10px;
}
.kb-toc-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
.kb-toc-item a {
    display:block; font-size:.8rem; color:#64748b; text-decoration:none;
    padding:3px 0; border-left:2px solid transparent; padding-left:8px;
    transition:color .12s, border-color .12s; line-height:1.4;
}
.kb-toc-item a:hover,
.kb-toc-item a.active { color:#2563eb; border-left-color:#2563eb; }
.kb-toc-h3 a { padding-left:20px; font-size:.77rem; }

/* ── Share ───────────────────────────────────────────────── */
.kb-share {
    background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px;
    padding:16px; margin-bottom:16px;
}
.kb-share-btns { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.kb-share-wa, .kb-share-tw {
    display:flex; align-items:center; gap:7px; padding:7px 12px;
    border-radius:8px; font-size:.8rem; font-weight:600; text-decoration:none;
    transition:opacity .12s;
}
.kb-share-wa { background:#dcfce7; color:#15803d; }
.kb-share-tw { background:#f1f5f9; color:#334155; }
.kb-share-wa:hover, .kb-share-tw:hover { opacity:.8; }

/* ── Aside CTA ───────────────────────────────────────────── */
.kb-aside-cta {
    background:linear-gradient(135deg,#1e3a8a,#2563eb);
    border-radius:12px; padding:18px 16px; text-align:center; color:#fff;
}
.kb-aside-cta-icon { font-size:1.6rem; margin-bottom:6px; }
.kb-aside-cta-text { font-size:.82rem; font-weight:600; opacity:.9; margin-bottom:12px; }
.kb-aside-cta-btn {
    display:inline-block; background:#f97316; color:#fff;
    padding:7px 16px; border-radius:8px; font-size:.8rem; font-weight:700;
    text-decoration:none; transition:background .12s;
}
.kb-aside-cta-btn:hover { background:#ea580c; color:#fff; }

/* ── Related articles ────────────────────────────────────── */
.kb-related { margin-top:40px; padding-top:28px; border-top:1px solid #f1f5f9; }
.kb-related-title { font-size:1rem; font-weight:700; color:#1e293b; margin-bottom:16px; }
.kb-related-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;
}
.kb-related-card {
    background:#fff; border:1.5px solid #e2e8f0; border-radius:12px;
    padding:16px; text-decoration:none; transition:border-color .15s, box-shadow .15s;
    display:flex; flex-direction:column;
}
.kb-related-card:hover { border-color:#2563eb; box-shadow:0 4px 16px rgba(37,99,235,.08); }
.kb-related-card-title { font-size:.875rem; font-weight:700; color:#1e293b; margin-bottom:6px; }
.kb-related-card-summary { font-size:.78rem; color:#64748b; line-height:1.5; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .kb-article-cols { grid-template-columns:1fr; }
    .kb-article-aside { position:static; order:-1; }
    .kb-toc { display:none; } /* hide TOC on small screens */
}
@media (max-width: 600px) {
    .kb-article-wrap { padding:16px 16px 40px; }
    .kb-article-title { font-size:1.35rem; }
    .kb-related-grid { grid-template-columns:1fr; }
}

/* ── Share bar (inline, below article body) ──────────────── */
.kb-share-bar {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
    padding:     16px 0;
    margin:      20px 0 0;
    border-top:  1px solid #f1f5f9;
}
.kb-share-bar-label {
    font-size:   11px;
    font-weight: 700;
    color:       #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-right: 4px;
}
.kb-share-wa,
.kb-share-tw,
.kb-share-tg {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       6px 12px;
    border-radius: 20px;
    font-size:     .8rem;
    font-weight:   600;
    text-decoration: none;
    transition:    opacity .12s;
}
.kb-share-wa  { background: #dcfce7; color: #15803d; }
.kb-share-tw  { background: #f1f5f9; color: #334155; }
.kb-share-tg  { background: #e0f2fe; color: #0369a1; }
.kb-share-wa:hover,
.kb-share-tw:hover,
.kb-share-tg:hover { opacity: .75; }

/* ── Category listing grid ───────────────────────────────── */
.kb-cat-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   14px;
    margin-top:            20px;
}
.kb-cat-card {
    background:    #fff;
    border:        1.5px solid #e2e8f0;
    border-radius: 12px;
    padding:       18px;
    text-decoration: none;
    display:       flex;
    flex-direction: column;
    gap:           6px;
    transition:    border-color .15s, box-shadow .15s;
}
.kb-cat-card:hover {
    border-color: #2563eb;
    box-shadow:   0 4px 16px rgba(37,99,235,.08);
}
.kb-cat-card-top {
    display:     flex;
    align-items: center;
    gap:         6px;
    margin-bottom: 4px;
}
.kb-cat-card-badge {
    font-size:    10px;
    font-weight:  700;
    padding:      2px 7px;
    border-radius: 4px;
}
.kb-cat-card-featured {
    font-size:  10px;
    color:      #f59e0b;
    font-weight: 600;
}
.kb-cat-card-title {
    font-size:   .9rem;
    font-weight: 700;
    color:       #1e293b;
    line-height: 1.35;
}
.kb-cat-card-summary {
    font-size:   .78rem;
    color:       #64748b;
    line-height: 1.5;
}
.kb-cat-card-meta {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   .72rem;
    color:       #94a3b8;
    margin-top:  4px;
}

/* ── Language chip (inside article header) ───────────────── */
.kb-lang-available {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
    margin-top:  12px;
}
.kb-lang-label {
    font-size:  11px;
    color:      #94a3b8;
    font-weight: 600;
}
.kb-lang-chip {
    padding:       3px 9px;
    border:        1.5px solid #e2e8f0;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   600;
    color:         #64748b;
    cursor:        pointer;
    text-decoration: none;
    transition:    all .12s;
}
.kb-lang-chip:hover { border-color: #2563eb; color: #2563eb; }

/* ── TOC sub-heading indent ──────────────────────────────── */
.kb-toc-links a.kb-toc-sub { padding-left: 18px; font-size: .77rem; }

/* ============================================================
   KB Landing Page
   ============================================================ */

.kb-landing-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px 60px; }

/* ── Hero ─────────────────────────────────────────────────── */
.kb-landing-hero {
    text-align:  center;
    padding:     52px 20px 40px;
}
.kb-landing-title {
    font-size:    2rem;
    font-weight:  800;
    color:        #0f172a;
    letter-spacing: -.5px;
    margin-bottom: 10px;
}
.kb-landing-sub {
    font-size:  1rem;
    color:      #64748b;
    max-width:  560px;
    margin:     0 auto 24px;
    line-height: 1.65;
}
.kb-landing-search-wrap {
    display:       flex;
    align-items:   center;
    gap:           10px;
    max-width:     440px;
    margin:        0 auto;
    background:    #fff;
    border:        1.5px solid #e2e8f0;
    border-radius: 10px;
    padding:       10px 16px;
    box-shadow:    0 2px 12px rgba(0,0,0,.06);
}
.kb-landing-search-wrap:focus-within {
    border-color: #2563eb;
    box-shadow:   0 0 0 3px rgba(37,99,235,.08);
}
.kb-landing-search-wrap svg { color: #94a3b8; flex-shrink: 0; }
.kb-landing-search-wrap input {
    border:  none;
    outline: none;
    width:   100%;
    font-size: .9rem;
    color:   #1e293b;
    font-family: inherit;
    background: transparent;
}
.kb-landing-search-wrap input::placeholder { color: #94a3b8; }

/* ── Section label ────────────────────────────────────────── */
.kb-landing-section { margin-bottom: 40px; }
.kb-landing-section-title {
    font-size:    13px;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color:        #94a3b8;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* ── Featured articles grid ───────────────────────────────── */
.kb-landing-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap:                   12px;
}

.kb-land-card {
    background:    #fff;
    border:        1.5px solid #e2e8f0;
    border-radius: 12px;
    padding:       18px;
    text-decoration: none;
    display:       flex;
    flex-direction: column;
    gap:           6px;
    transition:    border-color .15s, box-shadow .15s;
}
.kb-land-card:hover {
    border-color: #2563eb;
    box-shadow:   0 4px 16px rgba(37,99,235,.08);
}
.kb-land-card-badge {
    display:      inline-block;
    padding:      2px 7px;
    border-radius: 4px;
    font-size:    10px;
    font-weight:  700;
    width:        fit-content;
    margin-bottom: 2px;
}
.kb-land-card-title {
    font-size:   .875rem;
    font-weight: 700;
    color:       #1e293b;
    line-height: 1.35;
}
.kb-land-card-summary {
    font-size:  .78rem;
    color:      #64748b;
    line-height: 1.5;
}
.kb-land-card-meta {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   .72rem;
    color:       #94a3b8;
    margin-top:  4px;
}

/* ── Category rows ────────────────────────────────────────── */
.kb-landing-cats { display: flex; flex-direction: column; gap: 8px; }

.kb-landing-cat-card {
    display:       flex;
    align-items:   center;
    gap:           14px;
    background:    #fff;
    border:        1.5px solid #e2e8f0;
    border-radius: 12px;
    padding:       16px 18px;
    text-decoration: none;
    transition:    border-color .15s, box-shadow .15s;
}
.kb-landing-cat-card:hover {
    border-color: #2563eb;
    box-shadow:   0 2px 12px rgba(37,99,235,.07);
}
.kb-landing-cat-icon {
    font-size:   1.6rem;
    flex-shrink: 0;
    width:       40px;
    text-align:  center;
}
.kb-landing-cat-info { flex: 1; min-width: 0; }
.kb-landing-cat-name {
    font-size:   .9rem;
    font-weight: 700;
    color:       #1e293b;
}
.kb-landing-cat-desc {
    font-size:  .78rem;
    color:      #64748b;
    margin-top: 2px;
    line-height: 1.4;
}
.kb-landing-cat-count {
    font-size:  .72rem;
    color:      #94a3b8;
    margin-top: 4px;
}
.kb-landing-cat-arrow { color: #cbd5e1; flex-shrink: 0; }
.kb-landing-cat-card:hover .kb-landing-cat-arrow { color: #2563eb; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .kb-landing-title { font-size: 1.5rem; }
    .kb-landing-grid  { grid-template-columns: 1fr; }
    .kb-landing-wrap  { padding: 0 16px 40px; }
}
/* ── TOC sub-heading indent ──────────────────────────────── */
.kb-toc-links a.kb-toc-sub { padding-left: 18px; font-size: .77rem; }
body.kb-page .tl-navbar .container {
    max-width: 100%;
    padding: 0 1.5rem;
}
body.kb-page .tl-footer .container {
    max-width: 100%;
    padding: 0 1.5rem;
}