/* ═══════════════════════════════════════
   KNOWLEDGE BASE STYLES
   ═══════════════════════════════════════ */

/* KB Hero */
.kb-hero{background:linear-gradient(145deg,#0e0124 0%,#250a5e 50%,#4a22c8 100%);padding:var(--s16) var(--s8) var(--s12);text-align:center;color:white}
.kb-hero h1{color:white;font-size:clamp(1.8rem,3.5vw,2.8rem);margin-bottom:var(--s4)}
.kb-hero p{color:rgba(255,255,255,.65);font-size:1rem;margin-bottom:var(--s8)}

/* KB search */
.kb-search-box{display:flex;background:white;border-radius:var(--r-xl);overflow:hidden;max-width:600px;margin:0 auto;box-shadow:var(--shadow-xl)}
.kb-search-box input{flex:1;border:none;outline:none;padding:.85rem 1.25rem;font-size:.975rem;color:var(--text)}
.kb-search-box button{background:var(--brand);color:white;border:none;padding:0 1.5rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:var(--s2);white-space:nowrap;font-size:.88rem}
.kb-search-box button:hover{background:var(--brand-dark)}
.kb-search-box button svg{width:15px;height:15px}

/* Search results dropdown */
.kb-search-results{background:white;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);overflow:hidden;max-width:600px;margin:.5rem auto 0;display:none}
.kb-search-results.visible{display:block}
.kb-search-result-item{display:flex;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--border-soft);transition:background var(--t-fast);text-decoration:none;color:var(--text)}
.kb-search-result-item:last-child{border-bottom:none}
.kb-search-result-item:hover{background:var(--brand-light)}
.kb-search-result-icon{width:32px;height:32px;background:var(--icon-bg);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--icon-color);flex-shrink:0}
.kb-search-result-icon svg{width:14px;height:14px;stroke-width:1.8}
.kb-result-title{font-size:.88rem;font-weight:600;margin-bottom:.15rem}
.kb-result-cat{font-size:.74rem;color:var(--text-muted)}
.kb-no-results{padding:var(--s5);text-align:center;font-size:.88rem;color:var(--text-muted)}

/* Popular topics */
.kb-topics{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s5)}
.kb-topic-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:white;padding:.28rem .8rem;border-radius:var(--r-full);font-size:.75rem;font-weight:500;cursor:pointer;transition:background var(--t-fast);text-decoration:none}
.kb-topic-chip:hover{background:rgba(255,255,255,.22);color:white}

/* Category grid */
.kb-categories{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s5)}
.kb-category-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);text-decoration:none;color:var(--text);transition:transform var(--t-slow),box-shadow var(--t-slow),border-color var(--t-slow);display:block}
.kb-category-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.kb-cat-icon{width:44px;height:44px;background:var(--icon-bg);color:var(--icon-color);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s4);transition:background var(--t-base),color var(--t-base)}
.kb-cat-icon svg{width:21px;height:21px;stroke-width:1.8}
.kb-category-card:hover .kb-cat-icon{background:var(--brand);color:white}
.kb-cat-title{font-size:1rem;font-weight:700;margin-bottom:var(--s2)}
.kb-cat-desc{font-size:.82rem;color:var(--text-muted);margin-bottom:var(--s4);line-height:1.55}
.kb-article-count{font-size:.75rem;color:var(--brand);font-weight:600;display:flex;align-items:center;gap:var(--s1)}

/* Article list */
.kb-article-list{display:flex;flex-direction:column;gap:0}
.kb-article-link{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--border-soft);text-decoration:none;color:var(--text);transition:background var(--t-fast),color var(--t-fast)}
.kb-article-link:last-child{border-bottom:none}
.kb-article-link:hover{background:var(--brand-light);color:var(--brand)}
.kb-article-link svg{width:14px;height:14px;color:var(--text-soft);flex-shrink:0;transition:color var(--t-fast),transform var(--t-base)}
.kb-article-link:hover svg{color:var(--brand);transform:translateX(3px)}
.kb-article-link-title{flex:1;font-size:.88rem;font-weight:500}
.kb-article-link-time{font-size:.73rem;color:var(--text-soft);white-space:nowrap}

/* KB Layout (category/article page) */
.kb-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--s8);align-items:start}
.kb-sidebar{position:sticky;top:calc(var(--nav-h) + var(--s5))}
.kb-sidebar-section{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:var(--s5);margin-bottom:var(--s4)}
.kb-sidebar-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--border-soft)}
.kb-sidebar-link{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s3);border-radius:var(--r-md);font-size:.83rem;font-weight:500;color:var(--gray-600);text-decoration:none;transition:background var(--t-fast),color var(--t-fast);margin-bottom:2px}
.kb-sidebar-link:hover,.kb-sidebar-link.active{background:var(--brand-light);color:var(--brand)}
.kb-sidebar-link svg{width:13px;height:13px;flex-shrink:0}

/* KB Article content */
.kb-article{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:var(--s8)}
.kb-breadcrumb{display:flex;align-items:center;gap:var(--s2);font-size:.78rem;color:var(--text-muted);margin-bottom:var(--s6)}
.kb-breadcrumb a{color:var(--brand);text-decoration:none}
.kb-breadcrumb a:hover{text-decoration:underline}
.kb-breadcrumb span{color:var(--text-soft)}
.kb-article-header{margin-bottom:var(--s8);padding-bottom:var(--s6);border-bottom:1px solid var(--border)}
.kb-article-title{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800;margin-bottom:var(--s3)}
.kb-article-meta{display:flex;align-items:center;gap:var(--s4);font-size:.78rem;color:var(--text-muted)}
.kb-article-meta svg{width:13px;height:13px}

/* Steps */
.kb-steps{display:flex;flex-direction:column;gap:var(--s5);margin:var(--s6) 0}
.kb-step{display:flex;gap:var(--s4)}
.kb-step-num{width:28px;height:28px;background:var(--brand);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;flex-shrink:0;margin-top:.1rem}
.kb-step-content h4{font-size:.92rem;font-weight:700;margin-bottom:.35rem;color:var(--text)}
.kb-step-content p{font-size:.88rem;line-height:1.65;color:var(--text-muted)}

/* Code block */
.kb-code{background:var(--gray-900);color:#e2e8f0;padding:var(--s4) var(--s5);border-radius:var(--r-lg);font-family:'Fira Code',monospace,monospace;font-size:.82rem;line-height:1.6;overflow-x:auto;margin:var(--s4) 0;position:relative}
.kb-code-label{font-size:.7rem;color:var(--gray-500);margin-bottom:var(--s2);display:block;font-family:inherit}

/* Tips box */
.kb-tips{background:var(--brand-light);border:1px solid var(--brand-mid);border-radius:var(--r-lg);padding:var(--s5);margin:var(--s6) 0}
.kb-tips-title{font-size:.8rem;font-weight:700;color:var(--brand);margin-bottom:var(--s3);display:flex;align-items:center;gap:var(--s2);text-transform:uppercase;letter-spacing:.05em}
.kb-tips ul{display:flex;flex-direction:column;gap:var(--s2)}
.kb-tips li{font-size:.85rem;color:var(--gray-700);display:flex;gap:var(--s2);align-items:flex-start}
.kb-tips li::before{content:'→';color:var(--brand);flex-shrink:0;font-weight:700}

/* Article section heading */
.kb-section-heading{font-size:1.1rem;font-weight:800;margin:var(--s8) 0 var(--s4);padding-top:var(--s6);border-top:1px solid var(--border)}
.kb-intro{font-size:.975rem;line-height:1.75;color:var(--text-muted);margin-bottom:var(--s6);padding:var(--s5);background:var(--gray-50);border-left:3px solid var(--brand);border-radius:0 var(--r-lg) var(--r-lg) 0}

/* FAQ in article */
.kb-faq{margin-top:var(--s6)}
.kb-faq-item{border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:var(--s3);overflow:hidden}
.kb-faq-q{width:100%;text-align:left;padding:var(--s4) var(--s5);background:none;border:none;cursor:pointer;font-size:.88rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);color:var(--text);transition:background var(--t-fast)}
.kb-faq-q:hover{background:var(--gray-50)}
.kb-faq-q svg{flex-shrink:0;transition:transform .3s var(--ease);color:var(--text-soft)}
.kb-faq-item.open .kb-faq-q{background:var(--brand-light)}
.kb-faq-item.open .kb-faq-q svg{transform:rotate(180deg);color:var(--brand)}
.kb-faq-a{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s var(--ease),opacity .25s}
.kb-faq-a p{padding:var(--s4) var(--s5);font-size:.875rem;line-height:1.65;color:var(--text-muted);border-top:1px solid var(--border-soft)}

/* Helpful? widget */
.kb-helpful{display:flex;align-items:center;gap:var(--s4);padding:var(--s5);background:var(--gray-50);border-radius:var(--r-lg);margin-top:var(--s8);flex-wrap:wrap}
.kb-helpful p{font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:0}
.kb-helpful-btn{display:flex;align-items:center;gap:var(--s2);padding:.4rem .9rem;border:1.5px solid var(--border);border-radius:var(--r-full);font-size:.82rem;font-weight:600;cursor:pointer;background:white;color:var(--text-muted);transition:all var(--t-fast)}
.kb-helpful-btn:hover,.kb-helpful-btn.selected{border-color:var(--brand);background:var(--brand-light);color:var(--brand)}
.kb-helpful-btn svg{width:14px;height:14px}

/* Related articles */
.kb-related{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--border)}
.kb-related h4{font-size:.95rem;font-weight:700;margin-bottom:var(--s4)}

@media(max-width:900px){
  .kb-layout{grid-template-columns:1fr}
  .kb-sidebar{position:static}
}

.kb-note{display:flex;align-items:flex-start;gap:.5rem;background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:.625rem .875rem;margin-top:.75rem;font-size:.82rem;color:#0369a1;line-height:1.6}
.kb-note svg{flex-shrink:0;margin-top:.1rem;stroke:#0369a1}
.kb-section{margin-bottom:2rem}
.kb-code{background:#1e1e2e;color:#cdd6f4;border-radius:8px;padding:.875rem 1rem;font-family:monospace;font-size:.8rem;overflow-x:auto;margin:.5rem 0;white-space:pre-wrap}

/* ── Markdown article body ── */
.kb-md-body { line-height: 1.8; font-size: .92rem; color: var(--text); }
.kb-md-body h1 { font-size: 1.5rem; font-weight: 800; margin: 1.5rem 0 .5rem; }
.kb-md-body h2 { font-size: 1.2rem; font-weight: 700; margin: 1.25rem 0 .4rem; border-bottom: 1.5px solid var(--border); padding-bottom: .3rem; }
.kb-md-body h3 { font-size: 1rem; font-weight: 700; margin: 1rem 0 .3rem; }
.kb-md-body p  { margin: .6rem 0; }
.kb-md-body ul, .kb-md-body ol { padding-left: 1.5rem; margin: .5rem 0; }
.kb-md-body li { margin: .25rem 0; }
.kb-md-body code { font-family: monospace; font-size: .82rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: .1rem .35rem; }
.kb-md-body pre.kb-code { background: #1e1e2e; color: #cdd6f4; border-radius: 10px; padding: 1rem 1.25rem; overflow-x: auto; margin: .875rem 0; font-size: .82rem; line-height: 1.6; }
.kb-md-body pre.kb-code code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }
.kb-md-body a { color: var(--brand); text-decoration: underline; }
.kb-md-body hr { border: none; border-top: 1.5px solid var(--border); margin: 1.25rem 0; }
.kb-md-body blockquote.kb-note { border-left: 3px solid var(--brand); padding: .5rem 1rem; background: var(--bg); margin: .75rem 0; border-radius: 0 8px 8px 0; font-size: .88rem; }
.kb-md-body strong { font-weight: 700; }
.kb-md-body em { font-style: italic; }