:root {
    --bg-code: #111;
    --bg-text-code: rgba(203, 162, 0, 0.1);
    --border-text-code: #cba200;
    --text-code: #cba200;
    --bg-table-header: #eee;
    --text-table-header: #070707;
    --table-hover: rgba(27, 23, 6, 0.5);
    --doc-border: rgba(255, 255, 255, 0.1);

    --bg-stiky-note: #0c1c00;
    --text-stiky-note: #31b800;
    --border-stiky-note: #31b800;

    /* Палитра JSON */
    --ff-json-key: #75beff; /* Голубой для ключей */
    --ff-json-string: #ff7de9; /* Розовый для строк */
    --ff-json-number: #86de74; /* Зеленый для чисел и булевых */
    --ff-json-null: #808080; /* Серый для null */
}

.doc-layout.wrapper {
    /* Центрируем контейнер на широких экранах */
    max-width: 1260px;
    margin: 0 auto;

    /* Отступ сверху, чтобы контент не залезал под шапку */
    padding-top: calc(var(--nav-height) + 40px);
    padding-left: 20px; /* Чтобы на маленьких экранах текст не лип к краям */
    padding-right: 20px;
    padding-bottom: 80px;

    display: flex;
    align-items: flex-start;
    gap: 60px;

    /* Используем твои переменные */
    color: var(--text-header);
    font-family: var(--font-family);
    background-color: var(--bg-main);
}

.doc-content {
    flex: 1;
    min-width: 0;
}

.doc-content h1,
.doc-content h2,
.doc-content h3 {
    color: var(--text-light);
    font-weight: var(--font-weight-regular);
}

.doc-content h2 {
    font-size: 28px;
    margin: 40px 0 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--doc-border);
}

.doc-content h3 {
    font-size: 22px;
    margin: 30px 0 15px;
}

.doc-content p {
    line-height: 1.7;
    margin-bottom: 20px;
    color: var(--text-muted);
}

/* --- Блоки кода и выделение --- */
code {
    background: var(--bg-text-code);
    color: var(
        --text-code
    ); /* Цвет для инлайн-кода (можно заменить на твой любимый) */
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 16px;
}

pre {
    background: var(--bg-code);
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: var(--border-radius);
    overflow-x: auto; /* Появится скролл внутри блока, если код длинный */
    max-width: 100%;
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* --- Таблицы (как на твоем скриншоте) --- */
.table-responsive {
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Более выраженное скругление */
    overflow: hidden; /* Важно: обрезает углы внутренней таблицы */
    margin-bottom: 30px;
    background: var(--bg-nav);
    box-shadow: var(--shadow-main);
}

table {
    width: 100%;
    border-collapse: collapse;
}

.doc-content table {
    width: 100%;
    border-collapse: separate; /* Магия для работы скруглений */
    border-spacing: 0;
    font-size: 15px;
}

.doc-content th,
.doc-content td {
    padding: 15px;
    border-bottom: 1px solid var(--doc-border);
}

.doc-content th {
    background: rgba(255, 255, 255, 0.03); /* Тонкий контраст с фоном */
    color: var(--text-light);
    padding: 16px 20px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    text-align: left;
}

.doc-content td {
    padding: 16px 20px;
    color: var(--text-muted);
    transition: background var(--transition-speed);
}

.doc-content tr:last-child td {
    border-bottom: none;
}

.doc-content tr:hover td {
    background: var(--table-hover);
    color: var(--text-light);
}

.doc-content td code {
    background: var(--bg-text-code);
    color: var(--text-code);
    border: 1px solid var(--border-text-code);
}

.doc-list li {
    margin: 15px 0;
}

/* --- Правое оглавление (TOC) --- */
.doc-sidebar {
    width: 280px;
    flex-shrink: 0;
    position: fixed;
    right: 50px;
}

.toc-sticky {
    position: sticky;
    top: calc(var(--nav-height) + 40px);
    padding-left: 20px;
}

.toc-links,
.toc-sublinks {
    list-style: none;
    padding: 0;
}

.doc-note {
    padding: 10px 15px;
    margin: 10px 0;
    color: var(--text-stiky-note);
    background: var(--bg-stiky-note);
    border: 1px solid var(--border-stiky-note);
    border-radius: 10px;
}

.toc-links li {
    margin-bottom: 12px;
}

.toc-sublinks {
    padding-left: 15px;
    margin-top: 10px;
    border-left: 1px solid var(--bg-hover);
}

.toc-links a {
    text-decoration: none;
    color: var(--text-header);
    font-size: 16px;
    transition: color var(--transition-speed);
    display: block;
}

.toc-links a:hover {
    color: var(--text-light);
}

/* АКТИВНЫЙ ПУНКТ ОГЛАВЛЕНИЯ (переключается через JS) */
.toc-links a.active {
    color: var(--bg-active); /* Тот самый неоновый зеленый */
    font-weight: var(--font-weight-semibold);
}

/* Контейнер для примера ответа */
.json-container {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

/* Стилизация самого текста */
.json-code {
    font-family: var(--font-family); /* Твой Ubuntu Mono */
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-muted);
    white-space: pre-wrap; /* Перенос строк */
}

.json-key {
    color: var(--ff-json-key);
    font-weight: normal;
}
.json-string {
    color: var(--ff-json-string);
}
.json-number,
.json-boolean {
    color: var(--ff-json-number);
}
.json-null {
    color: var(--ff-json-null);
}

/* Кнопка "Copy" (опционально) */
.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--bg-hover);
    color: var(--text-header);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

@media (max-width: 1024px) {
    .doc-layout.wrapper {
        flex-direction: column; /* Сайдбар прыгает под/над контент */
        gap: 30px;
    }

    .doc-sidebar {
        width: 100%;
        order: -1; /* Выносим навигацию наверх */
    }
}