@import url('/assets/style-r7.css?v=20261007-0745');

/* =========================================================
   R8 — navigation, sidebar hierarchy, search & reading polish
   ========================================================= */
:root{
  --header:60px;
  --sidebar:286px;
  --content:800px;
  --toc:190px;
}

/* Header / navigation */
.top{z-index:80}
.nav a{position:relative;padding:20px 0 18px;line-height:20px}
.nav a::before{content:'';position:absolute;left:50%;right:50%;bottom:0;height:2px;background:var(--brand);border-radius:2px;transition:left .16s ease,right .16s ease}
.nav a:hover::before,.nav a.current::before{left:0;right:0}
.nav a.current{color:var(--brand);font-weight:720}
.nav .external::before{display:none}
.nav .external{padding-top:20px;padding-bottom:18px}
.brand{transition:opacity .16s ease}.brand:hover{opacity:.84}
.brand-logo{border:0;box-shadow:none;background:transparent}
.brand-logo img{width:31px;height:31px}

/* Sidebar: compact, collapsible groups */
.sidebar{padding:18px 10px 70px;background:#fbfbfc}
.sg{padding:3px 0 6px;border-bottom:0}
.sg + .sg{margin-top:4px}
.sg-title{position:relative;display:flex;align-items:center;min-height:32px;padding:7px 28px 7px 11px;border-radius:7px;cursor:pointer;user-select:none;font-size:12.5px;color:#2f343d;transition:.14s ease}
.sg-title:hover{background:#f0f2f5}
.sg-title::after{content:'⌄';position:absolute;right:10px;top:50%;transform:translateY(-52%);font-size:13px;color:#99a1ad;transition:transform .16s ease}
.sg.collapsed .sg-title::after{transform:translateY(-52%) rotate(-90deg)}
.sg a{position:relative;margin:1px 0;padding:5px 10px 5px 18px;font-size:12.9px;border-radius:6px;color:#626b78}
.sg a::before{content:'';position:absolute;left:8px;top:50%;width:3px;height:3px;border-radius:50%;background:#c5cad2;transform:translateY(-50%)}
.sg a:hover{background:#f2f4f7;color:#252a33}
.sg a.active{background:#eaf1ff;color:#2458c2;font-weight:690;box-shadow:none}
.sg a.active::before{width:4px;height:14px;border-radius:3px;background:#3e72e8}
.sg.collapsed a{display:none}
.sg.active-group .sg-title{color:#2458c2;font-weight:760;background:#f5f8ff}
.sidebar-bottom-fade{position:sticky;bottom:-70px;height:44px;margin-top:-44px;pointer-events:none;background:linear-gradient(transparent,#fbfbfc)}

/* Reading layout */
.article-wrap{padding-top:50px;gap:62px}
.article{font-size:15.2px}
.article h1{font-size:40px;margin-bottom:12px}
.article h2{scroll-margin-top:90px}
.article h3{scroll-margin-top:90px}
.article h2::before{width:24px;height:3px;background:linear-gradient(90deg,var(--brand),#a9c0ff);margin-bottom:12px}
.article blockquote{margin:20px 0;padding:10px 16px;border-left:3px solid #cbd7f4;background:#fafbfe;color:#5f6875}
.article hr{border:0;border-top:1px solid #eceef2;margin:38px 0}
.toc{max-height:calc(100vh - 116px);overflow:auto;scrollbar-width:none}
.toc::-webkit-scrollbar{display:none}
.toc a{position:relative;padding-left:0;transition:.14s ease}
.toc a.active{color:var(--brand);font-weight:680}
.toc a.active::before{content:'';position:absolute;left:-19px;top:8px;width:2px;height:14px;border-radius:2px;background:var(--brand)}

/* Code copy */
.article pre{position:relative;padding-top:42px}
.code-copy{position:absolute;right:9px;top:8px;height:26px;padding:0 9px;border:1px solid #303944;border-radius:6px;background:#151b22;color:#aeb8c5;font-size:11.5px;cursor:pointer}
.code-copy:hover{color:#fff;border-color:#536170;background:#1b222b}
.code-copy.copied{color:#9de2b0;border-color:#3e7150}

/* Search */
.search-overlay{padding-top:76px;background:rgba(14,18,26,.38)}
.search-panel{max-width:760px;border-radius:13px;overflow:hidden}
.search-panel input{height:60px;padding:0 20px;font-size:15px}
.results{padding:7px;max-height:min(520px,70vh)}
.results a{position:relative;padding:12px 14px;border-radius:8px}
.results a:hover,.results a.selected{background:#f3f6fb}
.results b{display:block;font-size:14px;color:#252a32;margin-bottom:3px}
.results small{display:block;font-size:12px;line-height:1.55;color:#7b8492;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-path{display:inline-block;margin-top:5px;font-size:10.5px;color:#8d96a4;background:#eef1f5;padding:1px 6px;border-radius:4px}
.search-empty{padding:34px 18px;text-align:center;color:var(--muted);font-size:13px}
.search-hint{display:flex;gap:8px;align-items:center;padding:9px 14px;border-top:1px solid var(--line);font-size:10.5px;color:#929aa7;background:#fafbfc}
.search-hint kbd{font:inherit;border:1px solid #dfe3e8;border-bottom-width:2px;background:#fff;padding:1px 5px;border-radius:4px;color:#737b87}

/* Mobile drawer */
.mobile-scrim{display:none;position:fixed;inset:var(--header) 0 0 0;background:rgba(15,23,42,.28);z-index:48;backdrop-filter:blur(1px)}
body.sidebar-open .mobile-scrim{display:block}
@media(max-width:900px){
  .sidebar{z-index:55;box-shadow:none}
  .sidebar.open{box-shadow:18px 0 50px rgba(15,23,42,.18)}
  body.sidebar-open{overflow:hidden}
  .brand-logo img{width:29px;height:29px}
}

/* Home polish */
.hero{padding-top:76px}
.hero h1{max-width:600px}
.home-brandline img{width:40px;height:40px}
.feature{box-shadow:0 1px 0 rgba(15,23,42,.02)}
.feature:hover{box-shadow:0 12px 30px rgba(31,35,40,.08)}

/* Dark */
[data-theme="dark"] .sg-title:hover{background:#1c2026}
[data-theme="dark"] .sg.active-group .sg-title{background:#182239;color:#8fb1ff}
[data-theme="dark"] .sg a.active{background:#1d2c49;color:#9ab8ff}
[data-theme="dark"] .sidebar-bottom-fade{background:linear-gradient(transparent,#15171b)}
[data-theme="dark"] .results a:hover,[data-theme="dark"] .results a.selected{background:#1a2029}
[data-theme="dark"] .results b{color:#e8eaed}
[data-theme="dark"] .result-path{background:#202630;color:#aab2bf}
[data-theme="dark"] .search-hint{background:#14171c}
[data-theme="dark"] .search-hint kbd{background:#1c2027;border-color:#343a44;color:#b7bec8}
[data-theme="dark"] .article blockquote{background:#151a22;border-left-color:#3d557f;color:#b7bec8}

@media(max-width:1060px){.article-wrap{padding-top:40px}}
@media(max-width:620px){
  .article h1{font-size:32px}
  .brand-title{display:inline!important;max-width:155px;overflow:hidden;text-overflow:ellipsis}
  .searchbtn{width:40px!important;padding:0;text-align:center}
}
/* R9 common global navigation */
.global-nav{gap:24px}.global-nav a{position:relative;font-weight:650}.global-nav a.active{color:var(--brand)}.global-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-20px;height:2px;background:var(--brand);border-radius:2px}.global-nav .external:after{display:none}