.docs-top { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(8px); }
.docs-top-inner { max-width: 1240px; margin: 0 auto; height: 58px; padding: 0 24px; display: flex; align-items: center; gap: 12px; }
.docs-top .brand { padding: 0; text-decoration: none; }
.docs-top .brand .name, .docs-top .brand .sub { display: block; }
.docs { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; padding: 0 24px; }
.toc { position: sticky; top: 58px; align-self: start; max-height: calc(100dvh - 58px); overflow: auto; padding: 20px 0 40px; display: grid; gap: 1px; }
.toc a { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 13.5px; }
.toc a:hover { background: var(--hover); color: var(--text-strong); }
.toc a[aria-current] { background: var(--active); color: var(--text-strong); font-weight: 550; }
.toc .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); }
.dot.get { background: var(--green); } .dot.post { background: var(--blue); } .dot.patch { background: var(--yellow); } .dot.delete { background: var(--red); }

.doc { min-width: 0; max-width: 860px; padding: 40px 0 140px; }
.hero { padding: 24px 0 8px; }
.hero h1 { font-size: 46px; font-weight: 400; color: var(--text-strong); margin: 0 0 14px; }
.hero .lead { font-size: 16.5px; color: var(--muted); margin: 0 0 22px; max-width: 640px; }
.base { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
[dir="rtl"] .base { padding: 6px 14px 6px 6px; }
.base code { background: none; padding: 0; font-size: 13px; }
.doc-sec { padding-top: 48px; scroll-margin-top: 70px; }
.doc-sec > p { max-width: 720px; }
.doc h2 { font-size: 28px; font-weight: 400; color: var(--text-strong); margin: 0 0 14px; }
.doc p { margin: 0 0 14px; }
.doc .label { margin: 18px 0 8px; }
.doc .card { margin-bottom: 4px; }
.group-title { margin: 64px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
html[lang="fa"] .group-title { letter-spacing: 0; font-size: 13px; }

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.step { padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.step .num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.step b { display: block; color: var(--text-strong); margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); font-size: 13.5px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }

.ep-card { padding: 28px 0; border-bottom: 1px solid var(--border); scroll-margin-top: 70px; }
.ep-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep-path { font-size: 14px; font-weight: 600; background: none; padding: 0; }
.ep-card h3 { margin: 12px 0 6px; font-size: 18px; color: var(--text-strong); }
.ep-card .badge { text-transform: none; letter-spacing: 0; }

.m { display: inline-block; min-width: 58px; text-align: center; padding: 1px 6px; border-radius: 4px; font: 600 11px/20px "SF Mono", "Cascadia Code", Consolas, monospace; letter-spacing: 0.04em; direction: ltr; margin-inline-end: 4px; }
.m.get { background: var(--green-bg); color: var(--green); }
.m.post { background: var(--blue-bg); color: var(--blue); }
.m.patch { background: var(--yellow-bg); color: var(--yellow); }
.m.delete { background: var(--red-bg); color: var(--red); }

.codewrap { position: relative; }
.codewrap .copybtn { position: absolute; top: 6px; right: 6px; background: var(--surface); }
.sample-tabs { margin-bottom: 8px; direction: ltr; }
.samples pre { max-height: 360px; }

.console .ok { color: var(--green); font-weight: 600; }
.console .bad { color: var(--red); font-weight: 600; }
.console .row .field { margin-bottom: 14px; }

@media (max-width: 960px) {
  .docs { grid-template-columns: 1fr; gap: 0; padding: 0 16px; }
  .toc { position: fixed; top: 58px; bottom: 0; inset-inline-start: 0; width: 280px; z-index: 30; padding: 16px; background: var(--surface); border-inline-end: 1px solid var(--border); transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); max-height: none; }
  [dir="rtl"] .toc { transform: translateX(100%); }
  .toc-open .toc { transform: none; }
  .doc { padding-top: 20px; }
  .hero h1 { font-size: 34px; }
  .steps-grid, .two { grid-template-columns: 1fr; }
  .docs-top-inner { padding: 0 12px; }
  .hide-sm { display: none; }
}