/* VRAdmin docs (vradmin.ru/docs) — shares the dark theme tokens used across
   landing.html and main-admin.html so the docs site feels like part of the
   same product, not a bolted-on wiki. */
:root {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #252525;
  --bg-card: #1e1e1e;
  --bg-hover: #2a2a2a;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --accent-primary: #6366f1;
  --accent-primary-hover: #818cf8;
  --accent-secondary: #22c55e;
  --accent-danger: #ef4444;
  --accent-warning: #f59e0b;
  --border-color: #333333;
  --border-light: #404040;
  --radius-md: 8px;
  --radius-lg: 16px;
  --container-width: 1100px;
  --header-height: 64px;
  --transition: all 0.2s ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-height);
  display: flex; align-items: center;
  background: rgba(15,15,15,0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
}
.header-inner { display: flex; align-items: center; gap: 28px; width: 100%; }
.header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo-icon { width: 36px; height: 36px; border-radius: 9px; overflow: hidden; flex-shrink: 0; }
.logo-icon img { width: 100%; height: 100%; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.logo-title { font-size: 18px; font-weight: 700; }
.logo-subtitle { font-size: 11px; color: var(--text-muted); }
@media (max-width: 768px) { .logo-subtitle { display: none; } }

.doc-topnav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.doc-nav__link {
  white-space: nowrap; padding: 8px 12px; border-radius: var(--radius-md);
  color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: var(--transition);
}
.doc-nav__link:hover { color: var(--text-primary); background: var(--bg-hover); }
.doc-nav__link--active { color: var(--text-primary); background: rgba(99,102,241,0.14); }

.btn-nav-login {
  flex-shrink: 0; padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
  color: var(--text-primary); text-decoration: none; border: 1px solid var(--border-light);
  transition: var(--transition);
}
.btn-nav-login:hover { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary); }

/* header nav is the source of truth on desktop; sidebar repeats it for
   in-page reachability once you've scrolled past the header on long pages */
.doc-sidebar__nav { display: none; }

/* ---------- layout ---------- */
.doc-layout {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr) 220px;
  gap: 48px;
  padding-top: 44px;
  padding-bottom: 88px;
  align-items: start;
}
.doc-sidebar, .doc-toc-rail { position: sticky; top: calc(var(--header-height) + 32px); }
.doc-sidebar__title, .doc-toc__title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); font-weight: 600; margin-bottom: 12px;
}
.doc-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.doc-sidebar .doc-nav__link { padding: 7px 10px; font-size: 14px; }
.doc-sidebar .doc-nav__link--active { border-left: 2px solid var(--accent-primary); padding-left: 8px; }

.doc-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--border-color); }
.doc-toc li { padding-left: 14px; }
.doc-toc a { color: var(--text-secondary); text-decoration: none; font-size: 13px; line-height: 1.4; }
.doc-toc a:hover { color: var(--accent-primary); }

@media (max-width: 1180px) {
  .doc-layout { grid-template-columns: 220px minmax(0,1fr); }
  .doc-toc-rail { display: none; }
}
@media (max-width: 860px) {
  .doc-layout { grid-template-columns: 1fr; padding-top: 24px; }
  .doc-sidebar { position: static; display: none; }
  .doc-sidebar__nav { display: flex; }
}

/* ---------- content typography ---------- */
.doc-content { min-width: 0; max-width: 760px; }
.doc-content h1 {
  font-size: 38px; font-weight: 800; letter-spacing: -1px; margin: 0 0 14px;
  background: linear-gradient(120deg, #ffffff 40%, #c4b5fd 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.doc-content > blockquote:first-of-type {
  border: none; padding: 0; margin: 0 0 36px; font-size: 18px; color: var(--text-secondary); font-style: normal;
}
/* scroll-margin-top keeps the sticky header (--header-height) from
   covering the target heading when jumping to a #anchor - without it the
   browser scrolls the heading flush to the very top of the viewport,
   right under the header, so it (and the start of that section's text)
   render hidden behind it. Applies to direct link loads and in-page TOC
   clicks alike, since both are native fragment navigation. */
.doc-content h2, .doc-content h3, .doc-content h4 {
  scroll-margin-top: calc(var(--header-height) + 24px);
  position: relative;
}
.doc-content h2 {
  font-size: 25px; font-weight: 700; letter-spacing: -0.4px;
  margin: 52px 0 16px; padding-top: 4px;
}
.doc-content h3 { font-size: 19px; font-weight: 700; margin: 32px 0 12px; }
.doc-content h4 { font-size: 16px; font-weight: 700; margin: 24px 0 10px; color: var(--text-primary); }
.doc-anchor {
  position: absolute; left: -22px; top: 4px; color: var(--text-muted); text-decoration: none;
  opacity: 0; transition: var(--transition); font-weight: 400; font-size: 0.85em;
}
h2:hover .doc-anchor, h3:hover .doc-anchor, h4:hover .doc-anchor { opacity: 1; }
.doc-content p { color: var(--text-secondary); line-height: 1.75; margin: 0 0 16px; font-size: 15.5px; }
.doc-content strong { color: var(--text-primary); font-weight: 600; }
.doc-content a { color: var(--accent-primary-hover); text-decoration: underline; text-decoration-color: rgba(129,140,248,0.35); text-underline-offset: 2px; }
.doc-content a:hover { color: var(--accent-primary-hover); text-decoration-color: currentColor; }
.doc-content ul, .doc-content ol { color: var(--text-secondary); line-height: 1.75; font-size: 15.5px; padding-left: 22px; margin: 0 0 16px; }
.doc-content li { margin-bottom: 6px; }
.doc-content li > ul, .doc-content li > ol { margin-top: 6px; }
.doc-content hr { border: none; border-top: 1px solid var(--border-color); margin: 40px 0; }

.doc-content code {
  font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 0.86em;
  background: var(--bg-tertiary); border: 1px solid var(--border-color);
  border-radius: 5px; padding: 2px 6px; color: #c4b5fd;
}
.doc-content pre {
  background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 16px 18px; overflow-x: auto; margin: 0 0 20px;
}
.doc-content pre code { background: none; border: none; padding: 0; color: var(--text-primary); font-size: 13px; line-height: 1.6; }

.doc-content table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 14px; }
.doc-content th {
  text-align: left; background: var(--bg-tertiary); color: var(--text-muted);
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; font-weight: 600;
  padding: 10px 12px; border-bottom: 1px solid var(--border-color);
}
.doc-content td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); vertical-align: top; }
.doc-content tr:last-child td { border-bottom: none; }

.doc-figure { margin: 20px 0 28px; }
.doc-figure img {
  width: 100%; display: block; border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.doc-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--text-muted); text-align: center; }

.doc-callout {
  border: 1px solid var(--border-color); border-left: 3px solid var(--accent-primary);
  background: var(--bg-card); border-radius: var(--radius-md);
  padding: 14px 18px 6px; margin: 0 0 24px;
}
.doc-callout p:last-child { margin-bottom: 10px; }
.doc-callout__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-primary-hover); margin-bottom: 6px; }
.doc-callout--note { border-left-color: #60a5fa; }
.doc-callout--note .doc-callout__label { color: #93c5fd; }
.doc-callout--warning { border-left-color: var(--accent-warning); }
.doc-callout--warning .doc-callout__label { color: #fcd34d; }

/* ---------- footer ---------- */
.site-footer { padding: 40px 0; border-top: 1px solid var(--border-color); margin-top: 40px; }
.site-footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--text-muted); font-size: 14px; text-decoration: none; }
.footer-links a:hover { color: var(--accent-primary); }
.footer-copy { font-size: 13px; color: var(--text-muted); }