*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #080b12;
  --bg-2:      #0d1117;
  --bg-3:      #111827;
  --surface:   #161d2b;
  --border:    rgba(255,255,255,.07);
  --border-hi: rgba(91,210,255,.2);
  --text:      #e8edf5;
  --text-dim:  #8b96a8;
  --text-mute: #4a5568;
  --cyan:      #5bd2ff;
  --cyan-dim:  rgba(91,210,255,.08);
  --green:     #4ade80;
  --amber:     #fbbf24;
  --purple:    #c3a6ff;
  --red:       #f87171;
  --mono: 'Fira Code', monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --nav-w: 260px;
  --top-h: 58px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ── TOP BAR ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem 0 0;
  background: rgba(8,11,18,.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-left {
  display: flex; align-items: center;
  width: var(--nav-w); flex-shrink: 0;
  padding: 0 1.25rem; gap: .6rem; height: 100%;
  border-right: 1px solid var(--border);
}
.topbar-logo {
  display: flex; align-items: center; gap: .6rem; text-decoration: none;
}
.logo-mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, var(--cyan), #3b9eff);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .7rem; font-weight: 500; color: #080b12;
}
.logo-name { font-size: .9rem; font-weight: 600; }
.logo-name span { color: var(--cyan); }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.topbar-search {
  display: flex; align-items: center; gap: .6rem;
  padding: .35rem .9rem; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--mono); font-size: .75rem; color: var(--text-mute);
  cursor: text; transition: border-color .2s; min-width: 200px;
}
.topbar-search:hover { border-color: var(--border-hi); }
.topbar-version {
  font-family: var(--mono); font-size: .7rem; color: var(--text-mute);
  padding: .2rem .55rem; border: 1px solid var(--border); border-radius: 4px;
}
.topbar-link { font-size: .83rem; color: var(--text-dim); text-decoration: none; transition: color .15s; }
.topbar-link:hover { color: var(--cyan); }
.topbar-btn {
  padding: .38rem 1rem; border-radius: 6px;
  background: var(--cyan); color: #080b12;
  font-size: .83rem; font-weight: 600; text-decoration: none;
}

/* ── LAYOUT ── */
.layout {
  display: flex; margin-top: var(--top-h);
  min-height: calc(100vh - var(--top-h));
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--nav-w); flex-shrink: 0;
  position: fixed; top: var(--top-h); left: 0; bottom: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 1.25rem 0 3rem;
  border-right: 1px solid var(--border);
  background: var(--bg);
  scrollbar-width: thin; scrollbar-color: var(--surface) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 2px; }
.nav-group { margin-bottom: 1.5rem; }
.nav-group-label {
  padding: .25rem 1.25rem;
  font-family: var(--mono); font-size: .65rem; font-weight: 500;
  color: var(--text-mute); letter-spacing: .1em; text-transform: uppercase;
  display: block; margin-bottom: .25rem;
}
.nav-item {
  display: block; padding: .42rem 1.25rem;
  font-size: .84rem; color: var(--text-dim);
  text-decoration: none; border-left: 2px solid transparent;
  transition: all .15s; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item:hover { background: var(--surface); color: var(--text); border-left-color: var(--border-hi); }
.nav-item.active { background: var(--cyan-dim); color: var(--cyan); border-left-color: var(--cyan); }
.nav-sub {
  display: block; padding: .35rem 1.25rem .35rem 2rem;
  font-size: .8rem; color: var(--text-mute);
  text-decoration: none; transition: color .15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-sub:hover { color: var(--cyan); }

/* ── MAIN ── */
.main {
  flex: 1; margin-left: var(--nav-w);
  min-width: 0;
  display: flex;
}
.content {
  flex: 1; min-width: 0;
  padding: 3rem clamp(2rem, 5vw, 4rem) 6rem;
  max-width: 820px;
}
.toc-col {
  width: 220px; flex-shrink: 0;
  position: sticky; top: calc(var(--top-h) + 2rem);
  height: fit-content;
  padding: 1.5rem 1rem 1.5rem 1.5rem;
  display: none;
}
@media (min-width: 1280px) { .toc-col { display: block; } }
.toc-label {
  font-family: var(--mono); font-size: .65rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute);
  display: block; margin-bottom: .75rem;
}
.toc-link {
  display: block; font-size: .8rem; color: var(--text-mute);
  text-decoration: none; padding: .25rem 0;
  border-left: 2px solid var(--border); padding-left: .75rem;
  transition: all .15s;
}
.toc-link:hover { color: var(--cyan); border-left-color: var(--cyan); }
.toc-link.sub { padding-left: 1.25rem; font-size: .75rem; }

/* ── CONTENT STYLES ── */
.breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .72rem; color: var(--text-mute);
  margin-bottom: 2rem;
}
.breadcrumb a { color: var(--text-mute); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb span { color: var(--border-hi); }

.page-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.1; margin-bottom: .75rem;
}
.page-lead {
  font-size: 1.05rem; color: var(--text-dim); line-height: 1.75;
  margin-bottom: 2.5rem; max-width: 600px; font-weight: 300;
}

.doc-section { margin-bottom: 3.5rem; }
.doc-section + .doc-section { padding-top: 3.5rem; border-top: 1px solid var(--border); }

h2.doc-h2 {
  font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em;
  margin-bottom: 1rem; color: var(--text);
  display: flex; align-items: center; gap: .6rem;
}
h2.doc-h2 .anchor {
  font-family: var(--mono); font-size: .75rem; color: var(--text-mute);
  opacity: 0; transition: opacity .15s;
}
.doc-section:hover h2.doc-h2 .anchor { opacity: 1; }

h3.doc-h3 {
  font-size: 1.05rem; font-weight: 500; color: var(--text);
  margin: 1.75rem 0 .75rem; letter-spacing: -.01em;
}

p { font-size: .925rem; color: var(--text-dim); line-height: 1.75; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

ul.doc-list, ol.doc-list {
  margin: .75rem 0 1rem; padding-left: 1.5rem;
  display: flex; flex-direction: column; gap: .4rem;
}
ul.doc-list li, ol.doc-list li {
  font-size: .9rem; color: var(--text-dim); line-height: 1.65;
}

/* code inline */
code {
  font-family: var(--mono); font-size: .82em;
  color: var(--cyan); background: var(--cyan-dim);
  padding: .1em .35em; border-radius: 4px;
  border: 1px solid rgba(91,210,255,.12);
}

/* code block */
.code-block {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; margin: 1.25rem 0;
}
.code-block-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem 1rem; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: .7rem; color: var(--text-mute);
}
.code-dots { display: flex; gap: .35rem; }
.code-dot  { width: 10px; height: 10px; border-radius: 50%; }
.cd-r{background:#ff5f57} .cd-y{background:#febc2e} .cd-g{background:#28c840}
.copy-btn {
  background: none; border: none; color: var(--text-mute);
  font-family: var(--mono); font-size: .7rem; cursor: pointer;
  padding: .15rem .45rem; border-radius: 4px;
  transition: all .15s; display: flex; align-items: center; gap: .3rem;
}
.copy-btn:hover { background: var(--surface); color: var(--cyan); }
pre {
  padding: 1.25rem; font-family: var(--mono); font-size: .8rem;
  color: var(--text-dim); line-height: 1.85; overflow-x: auto;
  white-space: pre; tab-size: 2;
}
.c-comment { color: var(--text-mute); font-style: italic; }
.c-key     { color: var(--cyan); }
.c-str     { color: var(--green); }
.c-fn      { color: var(--purple); }
.c-num     { color: var(--amber); }
.c-op      { color: var(--text-dim); }

/* callout boxes */
.callout {
  display: flex; gap: .75rem; padding: 1rem 1.25rem;
  border-radius: 9px; margin: 1.25rem 0;
  font-size: .875rem; line-height: 1.65;
}
.callout.info { background: rgba(91,210,255,.06); border: 1px solid rgba(91,210,255,.15); }
.callout.warn { background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.15); }
.callout.tip  { background: rgba(74,222,128,.06); border: 1px solid rgba(74,222,128,.15); }
.callout-icon { flex-shrink: 0; font-size: 1rem; margin-top: .05em; }
.callout.info .callout-icon { color: var(--cyan); }
.callout.warn .callout-icon { color: var(--amber); }
.callout.tip  .callout-icon { color: var(--green); }
.callout p { color: inherit; margin: 0; }

/* tables */
.doc-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .875rem; }
.doc-table th {
  text-align: left; padding: .65rem 1rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  color: var(--text-mute); letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.doc-table td {
  padding: .65rem 1rem; color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: top;
  line-height: 1.6;
}
.doc-table td:first-child { font-family: var(--mono); font-size: .8rem; color: var(--cyan); white-space: nowrap; }
.doc-table tr:last-child td { border-bottom: none; }
.doc-table tr:hover td { background: rgba(255,255,255,.02); }

/* method tags */
.method-tag {
  display: inline-block; font-family: var(--mono); font-size: .7rem;
  padding: .15rem .5rem; border-radius: 4px; font-weight: 500;
  margin-right: .4rem;
}
.tag-get  { background: rgba(74,222,128,.12); color: var(--green); border: 1px solid rgba(74,222,128,.2); }
.tag-post { background: rgba(251,191,36,.12); color: var(--amber); border: 1px solid rgba(251,191,36,.2); }
.tag-php  { background: rgba(195,166,255,.12); color: var(--purple); border: 1px solid rgba(195,166,255,.2); }

/* definition list */
.def-list { display: flex; flex-direction: column; gap: 1.25rem; margin: 1.25rem 0; }
.def-item {}
.def-term {
  font-family: var(--mono); font-size: .83rem; color: var(--cyan);
  margin-bottom: .35rem; display: flex; align-items: center; gap: .5rem;
}
.def-body { font-size: .875rem; color: var(--text-dim); line-height: 1.65; }

/* directory tree */
.dir-tree {
  font-family: var(--mono); font-size: .8rem; color: var(--text-dim);
  line-height: 1.9; padding: 1.25rem;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 10px; overflow-x: auto; white-space: pre;
}
.dir-tree .dir { color: var(--cyan); }
.dir-tree .file { color: var(--text-dim); }
.dir-tree .comm { color: var(--text-mute); }

/* breadcrumbs top of page */
.doc-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .7rem;
  color: var(--text-mute); padding: .2rem .6rem;
  border: 1px solid var(--border); border-radius: 4px;
  margin-bottom: 1.5rem;
}

/* pagination */
.doc-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border);
  gap: 1rem; flex-wrap: wrap;
}
.doc-nav-link {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .9rem 1.25rem; border-radius: 9px;
  border: 1px solid var(--border); text-decoration: none;
  transition: border-color .15s; max-width: 240px;
}
.doc-nav-link:hover { border-color: var(--border-hi); }
.doc-nav-label { font-family: var(--mono); font-size: .65rem; color: var(--text-mute); letter-spacing: .06em; text-transform: uppercase; }
.doc-nav-title { font-size: .875rem; color: var(--text); font-weight: 500; }

/* ── MOBILE SIDEBAR TOGGLE ── */
.sidebar-toggle {
  display: none; background: none; border: none;
  color: var(--text); cursor: pointer; padding: .5rem; font-size: 1.1rem;
}
@media (max-width: 860px) {
  .sidebar-toggle { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); z-index: 150; box-shadow: 4px 0 24px rgba(0,0,0,.4); }
  .main { margin-left: 0; }
  .content { padding: 2rem 1.25rem 4rem; }
}