/* Searchable Help Center */
.kb-page { --kb-bg:var(--color-bg-dark); --kb-surface:var(--color-surface-dark); --kb-text:var(--color-text-dark); --kb-muted:var(--color-text-muted); --kb-border:var(--color-border-dark); --kb-orange:var(--color-primary); overflow-x:hidden; }
.kb-page .container { max-width:1320px; padding-inline:clamp(20px,4vw,58px); }
.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; }
.kb-nav { padding:12px 0; background:color-mix(in srgb,var(--kb-bg) 90%,transparent); backdrop-filter:blur(18px); }
.kb-nav .nav-logo { font-family:var(--font-display); font-size:1.4rem; }
.kb-nav .nav-logo img,.kb-footer .nav-logo img { width:38px; height:38px; border-radius:10px; }
.kb-nav .nav-links { gap:27px; }
.kb-nav .nav-links a:not(.btn) { color:var(--kb-muted); font-size:.85rem; }
.kb-nav .nav-links a[aria-current="page"] { color:var(--kb-orange); }
.kb-nav .theme-toggle { width:38px; height:38px; padding:0; overflow:hidden; color:transparent; border-radius:50%; position:relative; }
.kb-nav .theme-toggle::after { content:"◐"; position:absolute; inset:0; display:grid; place-items:center; color:var(--kb-muted); }

.kb-hero { padding:100px 0 82px; text-align:center; background:radial-gradient(circle at 50% 20%,rgba(230,97,40,.13),transparent 31%),var(--kb-bg); border-bottom:1px solid var(--kb-border); }
.kb-eyebrow { margin-bottom:18px; color:var(--kb-orange); font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.kb-hero h1 { max-width:900px; margin:0 auto 20px; font-family:var(--font-display); font-size:clamp(3.4rem,7vw,6.6rem); font-weight:500; line-height:.92; letter-spacing:-.04em; }
.kb-hero h1 em { color:var(--kb-orange); font-weight:500; }
.kb-hero>div>p:not(.kb-eyebrow) { color:var(--kb-muted); }
.kb-search-wrap { max-width:720px; display:flex; align-items:center; gap:13px; margin:36px auto 17px; padding:0 17px; background:var(--kb-surface); border:1px solid var(--kb-border); border-radius:17px; box-shadow:0 24px 60px rgba(0,0,0,.25); }
.kb-search-wrap:focus-within { border-color:var(--kb-orange); box-shadow:0 0 0 4px rgba(230,97,40,.08),0 24px 60px rgba(0,0,0,.25); }
.kb-search-wrap svg { width:20px; fill:none; stroke:var(--kb-muted); stroke-width:1.7; }
.kb-search-wrap input { flex:1; min-width:0; padding:19px 0; color:var(--kb-text); background:transparent; border:0; outline:0; font:inherit; font-size:.93rem; }
.kb-search-wrap input::placeholder { color:var(--kb-muted); }
.kb-search-wrap kbd { padding:3px 7px; color:var(--kb-muted); background:var(--kb-bg); border:1px solid var(--kb-border); border-radius:6px; font:inherit; font-size:.65rem; }
.popular-links { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px 16px; font-size:.7rem; }
.popular-links span { color:var(--kb-muted); }
.popular-links a { color:var(--kb-text); border-bottom:1px solid var(--kb-border); }

.kb-start { padding:48px 0 65px; background:var(--kb-surface); border-bottom:1px solid var(--kb-border); }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.quick-card { display:grid; min-height:150px; align-content:start; padding:24px; color:var(--kb-text); background:var(--kb-bg); border:1px solid var(--kb-border); border-radius:18px; }
.quick-card:hover { opacity:1; border-color:var(--kb-orange); transform:translateY(-3px); }
.quick-card>span { color:var(--kb-orange); font-family:var(--font-display); font-size:1.2rem; }
.quick-card strong { margin:17px 0 5px; font-family:var(--font-display); font-size:1.25rem; font-weight:500; }
.quick-card small { color:var(--kb-muted); font-size:.68rem; line-height:1.5; }

.kb-shell { display:grid; grid-template-columns:245px minmax(0,1fr); align-items:start; gap:70px; padding-top:72px; padding-bottom:120px; }
.kb-sidebar { position:sticky; top:90px; min-width:0; }
.sidebar-label { margin-bottom:12px; color:var(--kb-muted); font-size:.62rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.kb-sidebar nav { display:grid; }
.kb-sidebar nav a { padding:8px 0 8px 14px; color:var(--kb-muted); border-left:1px solid var(--kb-border); font-size:.76rem; }
.kb-sidebar nav a:hover,.kb-sidebar nav a.active { color:var(--kb-orange); border-left-color:var(--kb-orange); opacity:1; }
.sidebar-support { margin-top:30px; padding:19px; background:var(--kb-surface); border:1px solid var(--kb-border); border-radius:15px; }
.sidebar-support strong { font-family:var(--font-display); font-size:1.12rem; font-weight:500; }
.sidebar-support p { margin:5px 0 12px; color:var(--kb-muted); font-size:.66rem; line-height:1.5; }
.sidebar-support a { display:block; padding:4px 0; font-size:.68rem; }
.kb-content { min-width:0; }
.kb-section { padding:0 0 94px; scroll-margin-top:100px; }
.kb-section[hidden],.kb-article[hidden] { display:none; }
.kb-section-heading { display:flex; align-items:flex-start; gap:17px; margin-bottom:27px; }
.kb-section-heading>span { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; color:var(--kb-orange); border:1px solid var(--kb-border); border-radius:50%; font-family:var(--font-display); }
.kb-section-heading p { margin-bottom:2px; color:var(--kb-orange); font-size:.61rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.kb-section-heading h2 { margin:0; font-family:var(--font-display); font-size:clamp(2.1rem,4vw,3.4rem); font-weight:500; line-height:1; letter-spacing:-.025em; }
.kb-article { background:var(--kb-surface); border:1px solid var(--kb-border); border-bottom:0; }
.kb-article:first-of-type { border-radius:18px 18px 0 0; }
.kb-article:last-of-type { border-bottom:1px solid var(--kb-border); border-radius:0 0 18px 18px; }
.kb-article:only-of-type { border-bottom:1px solid var(--kb-border); border-radius:18px; }
.kb-article summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:21px 23px; cursor:pointer; list-style:none; }
.kb-article summary::-webkit-details-marker { display:none; }
.kb-article summary>span { position:relative; flex:1; min-width:0; padding-right:26px; color:var(--kb-text); font-family:var(--font-display); font-size:1.22rem; font-weight:500; }
.kb-article summary>span::after { content:"+"; position:absolute; right:0; color:var(--kb-orange); font-family:var(--font-body); font-size:1rem; }
.kb-article[open] summary>span::after { content:"−"; }
.kb-article summary small { flex:0 0 auto; color:var(--kb-muted); font-size:.59rem; letter-spacing:.05em; text-transform:uppercase; }
.kb-article[open] summary { border-bottom:1px solid var(--kb-border); }
.article-body { padding:25px 25px 30px; color:var(--kb-muted); font-size:.83rem; line-height:1.75; }
.article-body p+p { margin-top:15px; }
.article-body b,.article-body strong { color:var(--kb-text); }
.article-body code { padding:2px 6px; color:var(--kb-text); background:var(--kb-bg); border:1px solid var(--kb-border); border-radius:5px; }
.steps { display:grid; gap:18px; margin:8px 0; padding:0; list-style:none; counter-reset:step; }
.steps li { position:relative; padding-left:46px; counter-increment:step; }
.steps li::before { content:counter(step); position:absolute; top:-2px; left:0; display:grid; width:29px; height:29px; place-items:center; line-height:1; color:var(--kb-orange); border:1px solid var(--kb-border); border-radius:50%; font-family:var(--font-display); font-size:.9rem; }
.steps li>strong { display:block; line-height:1.5; }
.steps li>span { display:block; margin-top:3px; }
.definition-list { display:grid; margin:4px 0; padding:0; list-style:none; }
.definition-list li { display:grid; grid-template-columns:170px 1fr; gap:20px; padding:12px 0; border-bottom:1px solid var(--kb-border); }
.definition-list li:last-child { border-bottom:0; }
.tip,.warning { margin-top:22px; padding:16px 18px; background:rgba(230,97,40,.07); border-left:2px solid var(--kb-orange); border-radius:0 10px 10px 0; }
.warning { background:rgba(200,147,67,.08); border-left-color:#c89343; }
.callout-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }
.callout-grid>div { padding:16px; background:var(--kb-bg); border:1px solid var(--kb-border); border-radius:12px; }
.callout-grid strong,.callout-grid span { display:block; }
.callout-grid span { margin-top:5px; font-size:.68rem; line-height:1.45; }
.kb-figure { max-width:350px; margin:26px auto 0; padding:5px; background:#080808; border:1px solid rgba(255,255,255,.13); border-radius:25px; box-shadow:0 25px 60px rgba(0,0,0,.34); }
.kb-figure img { width:100%; display:block; border-radius:19px; }
.kb-figure figcaption,.inline-figure figcaption { padding:12px 8px 5px; color:var(--kb-muted); font-size:.61rem; line-height:1.45; text-align:center; }
.inline-figure { margin:24px 0 0; padding:5px; background:#080808; border:1px solid rgba(255,255,255,.13); border-radius:18px; overflow:hidden; }
.inline-figure img { width:100%; display:block; border-radius:12px; }
.inline-figure.portrait { max-width:390px; margin-inline:auto; border-radius:24px; }
.article-link { display:inline-block; margin-top:18px; font-weight:600; }
.plan-table { display:grid; gap:10px; margin-bottom:19px; }
.plan-table>div { display:grid; grid-template-columns:180px 1fr; gap:20px; padding:17px; background:var(--kb-bg); border:1px solid var(--kb-border); border-radius:12px; }
.plan-table .recommended { border-color:var(--kb-orange); }
.support-actions { display:flex; gap:10px; margin-top:20px; }
.support-actions a { padding:10px 14px; border:1px solid var(--kb-border); border-radius:10px; font-size:.72rem; }
.support-actions a.discord { display:inline-flex; align-items:center; gap:8px; }
.support-actions a.discord svg { width:15px; height:15px; fill:currentColor; }
.support-actions a.discord:hover { color:#fff; background:#5865F2; border-color:#5865F2; opacity:1; }
.kb-no-results { padding:35px; background:var(--kb-surface); border:1px solid var(--kb-border); border-radius:18px; text-align:center; }
.kb-no-results strong { font-family:var(--font-display); font-size:1.5rem; font-weight:500; }
.kb-no-results p { margin-top:6px; color:var(--kb-muted); font-size:.8rem; }

.kb-footer { padding:44px 0; background:var(--kb-surface); border-top:1px solid var(--kb-border); }
.kb-footer .container { display:flex; align-items:center; justify-content:space-between; }
.kb-footer .nav-logo { font-family:var(--font-display); font-size:1.3rem; }
.kb-footer p { margin-top:7px; color:var(--kb-muted); font-size:.68rem; }
.kb-footer nav { display:flex; gap:22px; }
.kb-footer nav a { color:var(--kb-muted); font-size:.7rem; }

@media (max-width:899px) {
  .kb-nav .mobile-menu-toggle { width:40px; height:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1px solid var(--kb-border); border-radius:50%; }
  .kb-nav .mobile-menu-toggle span { width:16px; height:1px; background:var(--kb-text); }
  .kb-nav .nav-links { gap:18px; padding:28px; background:var(--kb-surface); }
  .kb-nav .theme-toggle { width:auto; height:auto; padding:10px 18px; color:var(--kb-text); border-radius:99px; }
  .kb-nav .theme-toggle::after { display:none; }
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .kb-shell { grid-template-columns:1fr; gap:30px; }
  .kb-sidebar { position:static; }
  .kb-sidebar nav { grid-template-columns:repeat(2,1fr); }
  .kb-sidebar nav a { padding:8px 10px; border-left:0; border-bottom:1px solid var(--kb-border); }
  .sidebar-support { display:none; }
}
@media (max-width:620px) {
  .kb-page .container { padding-inline:20px; }
  .kb-hero { padding:75px 0 65px; }
  .kb-hero h1 { font-size:3.55rem; }
  .quick-grid { grid-template-columns:1fr; }
  .quick-card { min-height:120px; }
  .kb-sidebar nav { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; }
  .kb-sidebar nav a { flex:0 0 auto; padding:8px 11px; border:1px solid var(--kb-border); border-radius:99px; scroll-snap-align:start; }
  .kb-section { padding-bottom:75px; }
  .kb-section-heading { align-items:center; }
  .kb-section-heading h2 { font-size:2.35rem; }
  .kb-article summary { align-items:flex-start; padding:19px; }
  .kb-article summary>span { font-size:1.1rem; }
  .kb-article summary small { display:none; }
  .article-body { padding:22px 19px 26px; }
  .definition-list li,.plan-table>div { grid-template-columns:1fr; gap:3px; }
  .callout-grid { grid-template-columns:1fr; }
  .kb-footer .container { display:block; }
  .kb-footer nav { flex-wrap:wrap; margin-top:24px; }
}
