/* Siberson Docs — professional 3-column docs layout on the site's design tokens */
body.docs{background:var(--bg,#fff); color:var(--body,#48546A); margin:0}

/* ---- top bar: the site header (cloned) + a slim docs subbar ---- */
.docs-top{position:sticky; top:0; z-index:60; background:#fff}
.docs-top .site-header{position:static; background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:none}
.docs-badge{display:inline-flex; align-items:center; margin-left:12px; padding:4px 9px; font-family:"Sora",sans-serif; font-weight:800; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand,#1664fe); background:var(--brand-050,#EAF1FF); border-radius:7px; text-decoration:none; position:relative}
.docs-badge::before{content:""; position:absolute; left:-12px; top:4px; bottom:4px; width:1px; background:var(--line,#E6EBF2)}
.docs-badge:hover{background:var(--brand,#1664fe); color:#fff}
.docs-subbar{background:#fff; border-top:1px solid var(--line-2,#EEF2F8); border-bottom:1px solid var(--line,#E6EBF2)}
.docs-subbar-in{max-width:1320px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:8px 24px}
.docs-subbar-home{display:inline-flex; align-items:center; gap:9px; font-family:"Sora",sans-serif; font-weight:700; font-size:13px; letter-spacing:.01em; color:var(--ink-2,#1D2637); text-decoration:none}
.docs-subbar-home:hover{color:var(--brand,#1664fe)}
.docs-subbar-dot{width:7px; height:7px; border-radius:50%; background:var(--brand,#1664fe); box-shadow:0 0 0 3px var(--brand-050,#EAF1FF)}
.docs-search-wrap{position:relative; margin-left:auto; width:340px; max-width:44vw}
.docs-search{width:100%; height:38px; border:1px solid var(--line,#E6EBF2); border-radius:10px; padding:0 14px; font-size:14px; font-family:"Inter",sans-serif; background:var(--bg-soft,#F5F8FD)}
.docs-search:focus{outline:2px solid var(--brand,#1664fe); outline-offset:-1px; background:#fff}
.docs-menu-btn{display:none; width:40px; height:38px; border:1px solid var(--line,#E6EBF2); border-radius:10px; background:#fff; cursor:pointer; position:relative; flex:none}
.docs-menu-btn i,.docs-menu-btn i::before,.docs-menu-btn i::after{position:absolute; left:9px; width:20px; height:2px; background:var(--ink,#0A1020); content:""}
.docs-menu-btn i{top:18px}.docs-menu-btn i::before{top:-6px}.docs-menu-btn i::after{top:6px}

/* ---- layout ---- */
.docs-wrap{max-width:1440px; margin:0 auto; display:grid; grid-template-columns:320px minmax(0,1fr) 210px; gap:38px; padding:26px 26px 70px; align-items:start}
.docs-wrap.notoc{grid-template-columns:320px minmax(0,1fr)}       /* landing/hub: no TOC -> wider content */
.docs-wrap.notoc .docs-toc{display:none}
.docs-main{min-width:0}

/* ---- left sidebar (section tree) ---- */
.docs-side{position:sticky; top:70px; max-height:calc(100vh - 88px); overflow-y:auto; padding-right:6px; font-size:14px}
.docs-side-h{font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted,#66738A); margin:2px 0 8px}
.docs-side-prod{display:block; font-size:14.5px; font-weight:500; color:var(--ink-2,#1D2637); padding:7px 11px; border-radius:9px; text-decoration:none}
.docs-side-prod:hover{background:var(--bg-soft,#F5F8FD)}
.docs-side-prod.active{background:var(--brand-050,#EAF1FF); color:var(--brand,#1664fe); font-weight:600}
.docs-side-sec{margin-top:16px; border-top:1px solid var(--line-2,#EEF2F8); padding-top:14px}
.docs-side-cat{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#66738A); margin:16px 0 5px}
.docs-side-cat:first-child{margin-top:0}
.docs-side-page{display:block; font-size:13.5px; line-height:1.35; color:var(--body,#48546A); padding:5px 11px; border-radius:8px; text-decoration:none; border-left:2px solid transparent}
.docs-side-page:hover{background:var(--bg-soft,#F5F8FD); color:var(--ink-2,#1D2637)}
.docs-side-page.active{color:var(--brand,#1664fe); background:var(--brand-050,#EAF1FF); border-left-color:var(--brand,#1664fe); font-weight:600}

/* ---- breadcrumb ---- */
.docs-crumbs{font-size:13px; color:var(--muted,#66738A); margin-bottom:16px}
.docs-crumbs a{color:var(--muted,#66738A); text-decoration:none}
.docs-crumbs a:hover{color:var(--brand,#1664fe)}
.docs-crumbs span{color:var(--ink-2,#1D2637)}

/* ---- article ---- */
.docs-article{max-width:780px}
.docs-article h1{font-family:"Sora",sans-serif; font-weight:800; font-size:clamp(27px,3.4vw,37px); color:var(--ink,#0A1020); line-height:1.18; margin:0 0 14px; scroll-margin-top:76px}
.docs-article h2{font-family:"Sora",sans-serif; font-weight:800; font-size:22px; color:var(--ink,#0A1020); margin:38px 0 12px; padding-top:6px; scroll-margin-top:76px}
.docs-article h3{font-family:"Sora",sans-serif; font-weight:700; font-size:17.5px; color:var(--ink-2,#1D2637); margin:26px 0 10px; scroll-margin-top:76px}
.docs-article h2 + p,.docs-article h3 + p{margin-top:0}
.docs-article p{font-size:16px; line-height:1.75; margin:0 0 15px}
.docs-article ul,.docs-article ol{padding-left:22px; margin:0 0 15px}
.docs-article li{font-size:16px; line-height:1.7; margin:5px 0}
.docs-article a{color:var(--brand,#1664fe); text-decoration:none}
.docs-article a:hover{text-decoration:none; color:var(--brand-600,#0f4fd6)}
.docs-article strong{color:var(--ink-2,#1D2637); font-weight:600}
.docs-article code{font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace; font-size:13.5px; background:var(--brand-050,#EAF1FF); color:var(--brand-600,#0f4fd6); padding:2px 6px; border-radius:6px}
.docs-article pre{background:#0d1424; color:#e7ecf7; padding:15px 18px; border-radius:12px; overflow:auto; font-size:13.5px; line-height:1.6; margin:0 0 16px}
.docs-article pre code{background:transparent; color:#e7ecf7; padding:0; font-size:13.5px}
.docs-article blockquote{border-left:3px solid var(--brand,#1664fe); margin:0 0 16px; padding:10px 16px; background:var(--bg-soft,#F5F8FD); border-radius:0 10px 10px 0; color:var(--ink-2,#1D2637)}
.docs-article blockquote p:last-child{margin-bottom:0}
.docs-article table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14.5px}
.docs-article th,.docs-article td{border:1px solid var(--line,#E6EBF2); padding:10px 13px; text-align:left; vertical-align:top}
.docs-article thead th{background:var(--bg-soft,#F5F8FD); font-family:"Sora",sans-serif; font-weight:700; color:var(--ink,#0A1020)}
.docs-article tbody tr:nth-child(even){background:#FBFCFE}
.docs-article img{max-width:100%; height:auto; border:1px solid var(--line,#E6EBF2); border-radius:12px; margin:6px 0 16px}
.docs-article hr{border:0; border-top:1px solid var(--line-2,#EEF2F8); margin:26px 0}
.doc-updated{font-size:13px; color:var(--muted,#66738A); border-top:1px solid var(--line-2,#EEF2F8); margin-top:34px; padding-top:14px}

/* ---- tag chips ---- */
.docs-tags{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 22px}
.docs-chip{font-size:12px; font-weight:500; color:var(--ink-2,#1D2637); background:var(--bg-soft,#F5F8FD); border:1px solid var(--line,#E6EBF2); padding:4px 11px; border-radius:20px; cursor:pointer; font-family:"Inter"}
.docs-chip:hover{border-color:var(--brand-2,#4d93ff); color:var(--brand,#1664fe); background:var(--brand-050,#EAF1FF)}

/* ---- right TOC ---- */
.docs-toc{position:sticky; top:70px; align-self:start; font-size:13px}
.docs-toc-in{border-left:1px solid var(--line-2,#EEF2F8); padding-left:16px}
.docs-toc-h{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#66738A); margin:0 0 9px}
.docs-toc a{display:block; color:var(--muted,#66738A); text-decoration:none; padding:4px 0; line-height:1.35; border-left:2px solid transparent; margin-left:-16px; padding-left:14px}
.docs-toc a:hover{color:var(--ink-2,#1D2637)}
.docs-toc a.toc-h3{padding-left:26px; font-size:12.5px}
.docs-toc a.active{color:var(--brand,#1664fe); border-left-color:var(--brand,#1664fe); font-weight:500}

/* ---- hub / landing ---- */
.docs-lead{font-size:18px; color:var(--body,#48546A); margin:0 0 26px !important; line-height:1.6}
.docs-hero{margin:0 0 26px}
.docs-hero-ey{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--brand,#1664fe); margin-bottom:6px}
.docs-hero h1{margin:0 0 12px}
.docs-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.docs-card{position:relative; display:flex; flex-direction:column; padding:24px 22px 18px; border:1px solid var(--line,#E6EBF2); border-radius:18px; background:#fff; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; box-shadow:var(--shadow-sm,0 1px 2px rgba(13,30,70,.06))}
.docs-card:hover{border-color:var(--brand-2,#4d93ff); transform:translateY(-3px); box-shadow:var(--shadow-md,0 16px 38px rgba(15,45,120,.13))}
.docs-card-ic{display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:13px; color:#fff; font-family:"Sora",sans-serif; font-weight:800; font-size:16px; letter-spacing:.02em; margin-bottom:15px; box-shadow:0 6px 16px rgba(15,45,120,.18)}
.docs-card h3{font-family:"Sora",sans-serif; font-weight:800; font-size:15.5px; letter-spacing:-.01em; color:var(--ink,#0A1020); margin:0 0 6px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.docs-card p{font-size:14px; color:var(--muted,#66738A); margin:0 0 12px; line-height:1.5}
.docs-card-meta{margin:0 0 16px}
.docs-card-cats{font-size:12px; color:var(--muted,#66738A); line-height:1.5}
.docs-card-foot{display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line-2,#EEF2F8); padding-top:14px; margin-top:auto}
.docs-card-count{font-size:12.5px; font-weight:600; color:var(--ink-2,#1D2637); background:var(--bg-soft,#F5F8FD); padding:4px 11px; border-radius:20px}
.docs-card-go{font-size:13.5px; font-weight:600; color:var(--brand,#1664fe); transition:transform .16s ease}
.docs-card:hover .docs-card-go{transform:translateX(4px)}
.docs-cat{margin:0 0 24px}
.docs-cat h2{font-size:16px; font-family:"Sora",sans-serif; font-weight:800; color:var(--ink,#0A1020); margin:0 0 10px; padding:0 0 8px 12px; border-bottom:1px solid var(--line-2,#EEF2F8); position:relative}
.docs-cat h2::before{content:""; position:absolute; left:0; top:2px; width:4px; height:16px; border-radius:3px; background:var(--brand,#1664fe)}
.docs-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1px}
.docs-list li a{display:block; padding:8px 11px; border-radius:8px; font-size:14.5px; color:var(--ink-2,#1D2637); text-decoration:none}
.docs-list li a:hover{background:var(--bg-soft,#F5F8FD); color:var(--brand,#1664fe)}

/* ---- search dropdown ---- */
.docs-search-results{position:absolute; top:calc(100% + 8px); right:0; width:440px; max-width:92vw; max-height:72vh; overflow:auto; background:#fff; border:1px solid var(--line,#E6EBF2); border-radius:14px; box-shadow:var(--shadow-lg,0 28px 64px rgba(15,45,120,.15)); z-index:40; padding:8px}
.docs-search-results a{display:block; padding:9px 12px; border-radius:9px; text-decoration:none; color:var(--ink-2,#1D2637)}
.docs-search-results a:hover,.docs-search-results a.sel{background:var(--bg-soft,#F5F8FD)}
.docs-search-results .sr-t{font-size:14.5px; font-weight:500}
.docs-search-results .sr-m{font-size:12px; color:var(--muted,#66738A)}
.docs-search-empty{padding:14px; font-size:14px; color:var(--muted,#66738A)}

/* ---- footer + back to top ---- */
.docs-foot{border-top:1px solid var(--line,#E6EBF2); background:var(--bg-soft,#F5F8FD)}
.docs-foot-in{max-width:1320px; margin:0 auto; display:flex; justify-content:space-between; gap:16px; padding:20px 24px; font-size:13px; color:var(--muted,#66738A)}
.docs-foot a{color:var(--brand,#1664fe); text-decoration:none}
.docs-totop{position:fixed; left:22px; bottom:22px; width:42px; height:42px; border-radius:11px; background:var(--brand,#1664fe); color:#fff; display:none; align-items:center; justify-content:center; text-decoration:none; font-size:19px; box-shadow:var(--shadow-md,0 10px 30px rgba(15,45,120,.2)); z-index:25}
.docs-totop.show{display:flex}

/* ---- responsive ---- */
@media(max-width:1180px){
  .docs-wrap{grid-template-columns:300px minmax(0,1fr); gap:32px}
  .docs-toc{display:none}
}
@media(max-width:820px){
  .docs-menu-btn{display:block}
  .docs-search-wrap{width:auto; max-width:none; flex:1 1 auto; min-width:0}
  .docs-cards{grid-template-columns:1fr}
  .docs-wrap,.docs-wrap.notoc{grid-template-columns:minmax(0,1fr); padding-top:18px}
  .docs-side{position:fixed; top:0; left:0; bottom:0; width:280px; max-width:86vw; max-height:none; background:#fff; z-index:50; transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow-lg,0 28px 64px rgba(15,45,120,.15)); padding:70px 18px 24px}
  .docs-side.open{transform:none}
  .docs-foot-in{flex-direction:column; gap:6px}
}