@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import './ds/fig-tokens.css';

/* ============================================================
   INSCALE DOCS — base layer built on the corporate foundation
   Brand: Vela Sans (web-fallback Manrope) · brand blue #1194ff
   ============================================================ */

:root{
  --font-sans: "Vela Sans","Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono","Red Hat Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* docs layout metrics */
  --header-h: 64px;
  --sidebar-w: 296px;
  --toc-w: 248px;
  --content-max: 768px;
  --reading: 1.72;

  /* doc surface = warm/clean reading column. We keep foundation tokens
     but expose a couple of doc-scoped aliases for clarity */
  --doc-bg: var(--background-base);
  --doc-surface: var(--color-basic-white);
  --doc-border: var(--color-gray-200);
  --doc-code-bg: var(--color-gray-900);
  --doc-inline-code-bg: var(--color-gray-100);

  --shadow-sm: 0 1px 2px rgba(8,15,33,.04), 0 1px 3px rgba(8,15,33,.06);
  --shadow-md: 0 4px 12px rgba(8,15,33,.06), 0 2px 6px rgba(8,15,33,.05);
  --shadow-lg: 0 18px 48px rgba(8,15,33,.16), 0 6px 18px rgba(8,15,33,.10);
  --shadow-pop: 0 24px 64px rgba(8,15,33,.22), 0 2px 8px rgba(8,15,33,.12);
}

:root[data-theme="dark"]{
  --doc-bg: var(--color-basic-black);
  --doc-surface: #0c1426;
  --doc-border: var(--color-gray-700);
  --doc-code-bg: #060b18;
  --doc-inline-code-bg: rgba(255,255,255,.06);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.6);
  --shadow-pop: 0 24px 64px rgba(0,0,0,.7);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--doc-bg);
  color:var(--text-primary);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv01";
}
::selection{ background:var(--transparents-brand-20); color:var(--text-primary); }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* thin custom scrollbars in chrome panels */
.thin-scroll{ scrollbar-width:thin; scrollbar-color:var(--color-gray-300) transparent; }
.thin-scroll::-webkit-scrollbar{ width:8px; height:8px; }
.thin-scroll::-webkit-scrollbar-thumb{ background:var(--color-gray-300); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
:root[data-theme="dark"] .thin-scroll::-webkit-scrollbar-thumb{ background:var(--color-gray-700); background-clip:content-box; }
.thin-scroll::-webkit-scrollbar-thumb:hover{ background:var(--color-gray-400); background-clip:content-box; }

/* ===== App frame ===== */
#root{ min-height:100vh; }
.app{ min-height:100vh; }

/* ---------- Top header (authoritative dark bar) ---------- */
.hdr{
  position:sticky; top:0; z-index:60;
  height:var(--header-h);
  display:flex; align-items:center; gap:20px;
  padding:0 20px 0 24px;
  background:var(--color-basic-black);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;
}
.hdr-brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.hdr-mark{ height:22px; width:auto; color:#fff; display:block; }
.hdr-word{ height:15px; width:auto; color:#fff; display:block; opacity:.96; }
.hdr-docs-tag{
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--color-brand-400);
  padding:3px 8px; border-radius:6px;
  background:rgba(17,148,255,.14);
  border:1px solid rgba(17,148,255,.22);
}
.hdr-sep{ width:1px; height:24px; background:rgba(255,255,255,.12); }
.hdr-nav{ display:flex; align-items:center; gap:2px; }
.hdr-link{
  font-size:14px; font-weight:500; color:rgba(255,255,255,.72);
  padding:7px 11px; border-radius:8px; transition:.14s;
}
.hdr-link:hover{ color:#fff; background:rgba(255,255,255,.07); }
.hdr-link.is-active{ color:#fff; background:rgba(255,255,255,.10); }
.hdr-spacer{ flex:1; }
.hdr-actions{ display:flex; align-items:center; gap:8px; }
.hdr-search{
  display:flex; align-items:center; gap:10px;
  width:240px; height:38px; padding:0 10px 0 12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px; color:rgba(255,255,255,.55);
  font-size:13.5px; transition:.14s;
}
.hdr-search:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); }
.hdr-search .kbd{ margin-left:auto; }
.icon-btn{
  width:38px; height:38px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  border-radius:10px; color:rgba(255,255,255,.78); transition:.14s;
}
.icon-btn:hover{ background:rgba(255,255,255,.12); color:#fff; }
.btn-ghost-light{
  height:38px; padding:0 16px; border-radius:10px;
  background:var(--color-brand-600); color:#fff; border:1px solid var(--color-brand-600);
  font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:7px; transition:.14s;
}
.btn-ghost-light:hover{ background:var(--color-brand-700); border-color:var(--color-brand-700); }
.kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:20px; padding:0 5px; font-family:var(--font-sans);
  font-size:11px; font-weight:600; line-height:1;
  border-radius:5px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.7);
}

/* ---------- Layout grid ---------- */
.shell{
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  align-items:start;
}
.sidebar{
  position:sticky; top:var(--header-h);
  height:calc(100vh - var(--header-h));
  overflow-y:auto;
  border-right:1px solid var(--doc-border);
  background:var(--doc-bg);
  padding:18px 14px 64px;
}
.main-wrap{ min-width:0; }

/* ---------- Sidebar nav ---------- */
.side-search-mini{ display:none; }
.nav-group{ margin-bottom:4px; }
.nav-group-label{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-tertiary);
  padding:14px 12px 7px;
}
.nav-group-label .gi{ color:var(--color-brand-600); }
.nav-item{
  display:flex; align-items:center; gap:9px;
  padding:7px 12px; margin:1px 0;
  font-size:14px; font-weight:500; color:var(--text-secondary);
  border-radius:9px; transition:.13s; position:relative; line-height:1.35;
}
.nav-item:hover{ background:var(--state-hover-background-secondary); color:var(--text-primary); }
.nav-item.is-active{
  background:var(--transparents-brand-8); color:var(--link-primary); font-weight:600;
}
.nav-item.is-active::before{
  content:""; position:absolute; left:4px; top:50%; transform:translateY(-50%);
  width:3px; height:17px; border-radius:99px; background:var(--color-brand-600);
}
.nav-item .ni-icon{ color:var(--icon-tertiary); flex-shrink:0; }
.nav-item:hover .ni-icon{ color:var(--icon-secondary); }
.nav-item.is-active .ni-icon{ color:var(--color-brand-600); }
.nav-badge{
  margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:2px 6px; border-radius:5px; line-height:1.2;
}
.nav-badge.new{ background:var(--support-success-light); color:var(--support-success); }
.nav-badge.soon{ background:var(--color-gray-100); color:var(--text-tertiary); }
.nav-badge.done{ background:#1d9e75; color:#fff; padding:1px 5px; border-radius:50%; font-size:11px; }
.doc-figure{ margin:20px 0; }
.doc-figure img{ display:block; max-width:100%; height:auto; border:1px solid var(--border-base); border-radius:10px; cursor:zoom-in; transition:filter .12s, box-shadow .12s; }
.doc-figure img:hover{ box-shadow:0 6px 24px rgba(0,0,0,.16); }
.doc-figure figcaption{ margin-top:8px; font-size:13px; color:var(--text-tertiary); }

/* Lightbox (увеличение скриншотов по клику) */
.lightbox{ position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; overflow:auto; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.lightbox-img{ max-width:92vw; max-height:90vh; width:auto; height:auto; object-fit:contain; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.55); cursor:zoom-in; }
.lightbox-img.zoomed{ max-width:none; max-height:none; width:auto; min-width:135vw; height:auto; border-radius:0; cursor:zoom-out; }
.lightbox-close{ position:fixed; top:16px; right:20px; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:42px; text-align:center; cursor:pointer; z-index:1001; padding:0; }
.lightbox-close:hover{ background:rgba(255,255,255,.26); }
.lightbox-hint{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:12px; z-index:1001; pointer-events:none; }

/* ---------- Content column ---------- */
.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--toc-w);
  gap:56px;
  max-width:1180px;
  margin:0 auto;
  padding:40px 48px 120px;
}
.article{ min-width:0; max-width:var(--content-max); }

.breadcrumb{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-tertiary); margin-bottom:22px; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--link-primary); }
.breadcrumb .sep{ color:var(--color-gray-300); }

.article h1{
  font-size:40px; font-weight:800; letter-spacing:-.022em; line-height:1.1;
  margin:0 0 16px; color:var(--text-primary);
}
.article .lead{
  font-size:19px; line-height:1.6; color:var(--text-secondary); font-weight:400;
  margin:0 0 14px; text-wrap:pretty;
}
.article h2{
  font-size:26px; font-weight:700; letter-spacing:-.014em; line-height:1.25;
  margin:52px 0 14px; padding-top:8px; color:var(--text-primary); scroll-margin-top:88px;
  position:relative;
}
.article h3{
  font-size:19px; font-weight:700; letter-spacing:-.008em;
  margin:34px 0 10px; color:var(--text-primary); scroll-margin-top:88px;
}
.article h2 .anchor, .article h3 .anchor{
  opacity:0; margin-left:8px; color:var(--text-tertiary); font-weight:500; transition:.12s; font-size:.7em;
}
.article h2:hover .anchor, .article h3:hover .anchor{ opacity:1; }
.article p{ font-size:16px; line-height:var(--reading); color:var(--text-secondary); margin:0 0 18px; text-wrap:pretty; }
.article a.lnk{ color:var(--link-primary); font-weight:500; border-bottom:1px solid var(--transparents-brand-28); transition:.12s; }
.article a.lnk:hover{ color:var(--state-hover-link-primary); border-bottom-color:var(--color-brand-600); }
.article strong{ color:var(--text-primary); font-weight:700; }
.article ul, .article ol{ margin:0 0 20px; padding-left:24px; }
.article li{ font-size:16px; line-height:var(--reading); color:var(--text-secondary); margin:7px 0; }
.article li::marker{ color:var(--color-gray-400); }
.article hr{ border:none; border-top:1px solid var(--doc-border); margin:44px 0; }

/* inline code */
.article code:not(pre code){
  font-family:var(--font-mono); font-size:.86em; font-weight:500;
  background:var(--doc-inline-code-bg); color:var(--link-danger);
  padding:.14em .42em; border-radius:6px; border:1px solid var(--transparents-black-6);
  white-space:nowrap;
}
:root[data-theme="dark"] .article code:not(pre code){ color:var(--color-red-300); border-color:rgba(255,255,255,.08); }

/* divider section label */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-brand-600); margin-bottom:14px;
}
.kicker .dot{ width:6px; height:6px; border-radius:99px; background:var(--color-brand-600); }

/* ---------- Code block ---------- */
.codeblock{ margin:0 0 22px; border-radius:14px; overflow:hidden; border:1px solid var(--color-gray-800); background:var(--doc-code-bg); box-shadow:var(--shadow-md); }
.codeblock-head{
  display:flex; align-items:center; gap:10px; height:42px; padding:0 10px 0 16px;
  background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.07);
}
.cb-dot{ width:11px; height:11px; border-radius:99px; }
.codeblock-name{ font-family:var(--font-mono); font-size:12.5px; color:rgba(255,255,255,.62); font-weight:500; }
.codeblock-lang{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.06em; }
.cb-copy{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px;
  color:rgba(255,255,255,.7); font-size:12px; font-weight:600; transition:.14s;
}
.cb-copy:hover{ background:rgba(255,255,255,.12); color:#fff; }
.cb-copy.copied{ background:var(--transparents-emerald-20); border-color:transparent; color:var(--color-emerald-300); }
.codeblock pre{ margin:0; padding:18px 18px; overflow-x:auto; }
.codeblock code{ font-family:var(--font-mono); font-size:13.5px; line-height:1.7; color:#e6ecf7; display:block; white-space:pre; }
.codeblock .ln{ color:rgba(255,255,255,.22); user-select:none; display:inline-block; width:2ch; margin-right:18px; text-align:right; }
/* token colors */
.tk-kw{ color:#7ab2ff; } .tk-str{ color:#84e1bc; } .tk-num{ color:#fbbf6f; }
.tk-com{ color:rgba(255,255,255,.34); font-style:italic; } .tk-fn{ color:#d0abf9; }
.tk-pr{ color:#9aa4bf; } .tk-var{ color:#f9a8a8; } .tk-op{ color:#9aa4bf; }
.tk-cmd{ color:#84e1bc; font-weight:600; } .tk-flag{ color:#fbbf6f; } .tk-path{ color:#e6ecf7; }

/* ---------- Admonition / callout ---------- */
.adm{
  display:flex; gap:14px; padding:16px 18px; margin:0 0 22px;
  border-radius:12px; border:1px solid; background:var(--doc-surface);
  position:relative;
}
.adm-ic{ flex-shrink:0; width:22px; height:22px; display:grid; place-items:center; margin-top:1px; }
.adm-body{ min-width:0; }
.adm-title{ font-size:14.5px; font-weight:700; margin:0 0 3px; letter-spacing:-.005em; }
.adm-body p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--text-secondary); }
.adm-body p+p{ margin-top:8px; }
.adm-body code:not(pre code){ font-size:.85em; }
.adm.note{ border-color:var(--transparents-brand-20); background:var(--transparents-brand-4); }
.adm.note .adm-ic,.adm.note .adm-title{ color:var(--support-info); }
.adm.tip{ border-color:var(--transparents-emerald-20); background:var(--transparents-emerald-4); }
.adm.tip .adm-ic,.adm.tip .adm-title{ color:var(--support-success); }
.adm.warn{ border-color:var(--transparents-orange-20); background:var(--transparents-orange-4); }
.adm.warn .adm-ic,.adm.warn .adm-title{ color:var(--support-warning); }
.adm.danger{ border-color:var(--transparents-red-20); background:var(--transparents-red-4); }
.adm.danger .adm-ic,.adm.danger .adm-title{ color:var(--support-error); }

/* ---------- Steps ---------- */
.steps{ margin:0 0 22px; padding:0; counter-reset:step; list-style:none; }
.steps li{ position:relative; padding:2px 0 22px 44px; margin:0; border-left:1.5px solid var(--doc-border); }
.steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; left:-15px; top:-3px;
  width:29px; height:29px; border-radius:99px;
  background:var(--doc-surface); border:1.5px solid var(--color-brand-600); color:var(--color-brand-600);
  font-size:13px; font-weight:700; display:grid; place-items:center;
}
.steps li h3{ margin:0 0 6px; font-size:16.5px; }
.steps li > *:first-child{ margin-top:-2px; }

/* ---------- Tabs ---------- */
.tabs{ margin:0 0 22px; }
.tabs-bar{ display:flex; gap:4px; border-bottom:1px solid var(--doc-border); margin-bottom:0; }
.tab{
  padding:9px 14px; font-size:14px; font-weight:600; color:var(--text-tertiary);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:.13s; display:flex; align-items:center; gap:7px;
}
.tab:hover{ color:var(--text-primary); }
.tab.is-active{ color:var(--link-primary); border-bottom-color:var(--color-brand-600); }
.tab-panel{ padding-top:18px; }

/* ---------- Table ---------- */
.tbl-wrap{ margin:0 0 22px; border:1px solid var(--doc-border); border-radius:12px; overflow:hidden; }
table.doc{ width:100%; border-collapse:collapse; font-size:14px; }
table.doc th{
  text-align:left; font-weight:700; color:var(--text-primary); background:var(--background-base);
  padding:11px 16px; border-bottom:1px solid var(--doc-border); font-size:12.5px; letter-spacing:.02em; text-transform:uppercase;
}
table.doc td{ padding:12px 16px; border-bottom:1px solid var(--doc-border); color:var(--text-secondary); vertical-align:top; line-height:1.5; }
table.doc tr:last-child td{ border-bottom:none; }
table.doc tr:hover td{ background:var(--state-hover-table-row); }
table.doc td code{ white-space:nowrap; }

/* ---------- Cards grid (landing) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:0 0 26px; }
.card-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.dcard{
  display:block; padding:20px; border:1px solid var(--doc-border); border-radius:14px;
  background:var(--doc-surface); transition:.16s; position:relative; overflow:hidden;
}
.dcard:hover{ border-color:var(--transparents-brand-40); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.dcard-ic{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:14px;
  background:var(--transparents-brand-8); color:var(--color-brand-600);
}
.dcard h3{ margin:0 0 5px; font-size:16px; font-weight:700; color:var(--text-primary); }
.dcard p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--text-tertiary); }
.dcard .arrow{ position:absolute; top:20px; right:18px; color:var(--color-gray-300); transition:.16s; }
.dcard:hover .arrow{ color:var(--color-brand-600); transform:translate(2px,-2px); }

/* hero on landing */
.doc-hero{ margin-bottom:8px; }
.doc-hero .eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.ver-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:4px 10px; border-radius:99px; background:var(--transparents-brand-8);
  color:var(--link-primary); border:1px solid var(--transparents-brand-16);
}
.fstec-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  padding:4px 10px; border-radius:99px; background:var(--support-success-light);
  color:var(--support-success); border:1px solid var(--transparents-emerald-16);
}

/* ---------- Pagination ---------- */
.pager{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px; padding-top:32px; border-top:1px solid var(--doc-border); }
.pager-card{
  display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1px solid var(--doc-border);
  border-radius:12px; transition:.15s; background:var(--doc-surface);
}
.pager-card:hover{ border-color:var(--transparents-brand-40); box-shadow:var(--shadow-sm); }
.pager-card.next{ text-align:right; align-items:flex-end; }
.pager-dir{ font-size:12px; font-weight:600; color:var(--text-tertiary); display:flex; align-items:center; gap:6px; }
.pager-ttl{ font-size:15px; font-weight:700; color:var(--link-primary); }

/* feedback row */
.feedback{ display:flex; align-items:center; gap:14px; margin-top:40px; padding:18px 0; flex-wrap:wrap; }
.feedback span{ font-size:14px; color:var(--text-secondary); font-weight:500; }
.fb-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:9px; border:1px solid var(--doc-border); background:var(--doc-surface); color:var(--text-secondary); font-size:13.5px; font-weight:600; transition:.14s; }
.fb-btn:hover{ border-color:var(--transparents-brand-40); color:var(--link-primary); }
.edit-link{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--text-tertiary); font-weight:500; }
.edit-link:hover{ color:var(--link-primary); }

/* ---------- TOC ---------- */
.toc{ position:sticky; top:calc(var(--header-h) + 40px); align-self:start; max-height:calc(100vh - var(--header-h) - 80px); overflow-y:auto; }
.toc-title{ font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.toc-list{ list-style:none; margin:0; padding:0; border-left:1.5px solid var(--doc-border); }
.toc-link{
  display:block; padding:5px 0 5px 16px; margin-left:-1.5px; border-left:1.5px solid transparent;
  font-size:13.5px; line-height:1.45; color:var(--text-tertiary); font-weight:500; transition:.13s;
}
.toc-link:hover{ color:var(--text-primary); }
.toc-link.sub{ padding-left:30px; font-size:13px; }
.toc-link.is-active{ color:var(--link-primary); border-left-color:var(--color-brand-600); font-weight:600; }

/* ---------- Search modal ---------- */
.modal-scrim{ position:fixed; inset:0; z-index:100; background:var(--overlay-primary); backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; animation:fade .14s ease; }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.search-modal{
  width:min(620px,92vw); background:var(--doc-surface); border:1px solid var(--doc-border);
  border-radius:16px; box-shadow:var(--shadow-pop); overflow:hidden; animation:pop .16s cubic-bezier(.2,.8,.2,1);
}
@keyframes pop{ from{ transform:translateY(-8px) scale(.99); opacity:0; } to{ transform:none; opacity:1; } }
.search-head{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--doc-border); }
.search-input{ flex:1; border:none; outline:none; background:transparent; font-size:16.5px; color:var(--text-primary); font-family:inherit; }
.search-input::placeholder{ color:var(--text-placeholder); }
.search-results{ max-height:54vh; overflow-y:auto; padding:8px; }
.sr-group-label{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-tertiary); padding:10px 12px 6px; }
.sr-item{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; cursor:pointer; }
.sr-item.is-active{ background:var(--transparents-brand-8); }
.sr-ic{ width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:var(--background-base); color:var(--icon-secondary); flex-shrink:0; }
.sr-item.is-active .sr-ic{ background:var(--color-brand-600); color:#fff; }
.sr-txt{ min-width:0; }
.sr-ttl{ font-size:14.5px; font-weight:600; color:var(--text-primary); }
.sr-crumb{ font-size:12px; color:var(--text-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-enter{ margin-left:auto; opacity:0; }
.sr-item.is-active .sr-enter{ opacity:.5; }
.search-empty{ padding:48px 20px; text-align:center; color:var(--text-tertiary); font-size:14.5px; }
.search-foot{ display:flex; align-items:center; gap:18px; padding:10px 16px; border-top:1px solid var(--doc-border); background:var(--background-base); }
.sf-hint{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-tertiary); }
.sf-hint .kbd{ background:var(--doc-surface); border:1px solid var(--doc-border); color:var(--text-secondary); }
mark{ background:var(--transparents-brand-20); color:inherit; border-radius:3px; padding:0 1px; }

/* ---------- Mobile ---------- */
.menu-btn{ display:none; }
.scrim-mobile{ display:none; }
@media (max-width:1180px){
  :root{ --toc-w:0px; }
  .content-grid{ grid-template-columns:minmax(0,1fr); gap:0; padding:36px 40px 100px; }
  .toc{ display:none; }
}
@media (max-width:920px){
  .hdr-nav{ display:none; }
  .hdr-search{ width:auto; }
  .hdr-search .stxt, .hdr-search .kbd{ display:none; }
  .menu-btn{ display:grid; }
  .shell{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; left:0; top:var(--header-h); z-index:55; width:300px;
    transform:translateX(-102%); transition:transform .22s cubic-bezier(.2,.8,.2,1);
    box-shadow:var(--shadow-lg);
  }
  .sidebar.open{ transform:none; }
  .scrim-mobile.show{ display:block; position:fixed; inset:var(--header-h) 0 0 0; z-index:54; background:var(--overlay-secondary); }
  .content-grid{ padding:28px 22px 90px; }
  .article h1{ font-size:32px; }
  .card-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .hdr-docs-tag, .hdr-word{ display:none; }
  .hdr-cta-txt{ display:none; }
}