/* ──────────────────────────────────────────────────────────────── */
/*  ОСНОВНОЙ КОНТЕЙНЕР (теплый фон)                                 */
/* ──────────────────────────────────────────────────────────────── */
.code-box {
    background: #221E1B;        /* Тёплый тёмно-фиолетовый вместо холодного #1e1e2e */
    border: 1px solid #4a4458;  /* Тёплая обводка */
    border-radius: 10px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    overflow: hidden;
    margin: 24px 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* ──────────────────────────────────────────────────────────────── */
/*  ШАПКА ОКНА + 4-я ГОЛУБАЯ ТОЧКА                                  */
/* ──────────────────────────────────────────────────────────────── */
.code-header {
    background: #2B2521;        /* Тёплый тёмный */
    padding: 4px 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #4a4458;
}
.code-dot {
    width: 10px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.code-dot.r { background: #ed8796; }  /* Мягкий красный */
.code-dot.y { background: #eed49f; }  /* Тёплый жёлтый */
.code-dot.g { background: #a6da95; }  /* Приглушённый зелёный */
.code-dot.b { background: #7dc4e4; }  /* голубая */

.code-header span {
    margin-left: 14px;
    color: #b8b4d0;  
    font-size: 12px;
    opacity: 0.9;
    letter-spacing: 0.3px;
}

/* ──────────────────────────────────────────────────────────────── */
/*  ЗАГОЛОВОК: текст + кнопка копирования                           */
/* ──────────────────────────────────────────────────────────────── */
.code-title {
    margin-left: 14px;
    color: #C8C0B4;
    font-size: 12px;
    opacity: 0.9;
    letter-spacing: 0.3px;
    flex: 1; /* Занимает свободное место, прижимая кнопку вправо */
}

.code-copy-btn {
    background: #3A342E;
    color: #C8C0B4;
    border: 1px solid #5A524A;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.code-copy-btn:hover {
    background: #4A433C;
    border-color: #7A7268;
    color: #E0D8D0;
}
.code-copy-btn:active {
    transform: scale(0.98);
}
.code-copy-btn.copied {
    background: #a6da95;
    border-color: #a6da95;
    color: #221E1B;
    font-weight: 600;
}

/* Адаптив: на мобильных кнопка уходит вниз */
@media (max-width: 480px) {
    .code-header {
        flex-wrap: wrap;
        gap: 10px;
    }
    .code-title {
        margin-left: 0;
        width: 100%;
    }
    .code-copy-btn {
        margin-left: auto;
    }
}

/* ──────────────────────────────────────────────────────────────── */
/*  ТЕЛО: НОМЕРА СТРОК + КОНТЕНТ                                    */
/* ──────────────────────────────────────────────────────────────── */
.code-body {
    display: flex;
    background: #221E1B;
    line-height: 1.2; /* 🔥 Явно задаём базовую высоту строки для всего тела */
}
.code-numbers {
    padding: 16px 12px;
    text-align: right;
    color: #4A433C;  
    background: #221E1B;
    border-right: 1px solid #4a4458;
    user-select: none;
    min-width: 44px;
    font-variant-numeric: tabular-nums;
    
    line-height: inherit; /* 🔥  Наследует от .code-body */
    font-family: inherit;
    font-size: inherit;
}
.code-content {
    padding: 16px 16px 16px 20px;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
}




/* ──────────────────────────────────────────────────────────────── */
/*  БЛОК КОДА (PRE)                                                 */
/* ──────────────────────────────────────────────────────────────── */
.code-content pre {
    margin: 0;
    padding: 0;
    white-space: pre;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit; /* 🔥 Наследует от .code-body */
    color: #C7BEB2; 
    display: block; /* Убираем возможные отступы inline-элемента */
}

/* Кастомный скроллбар для WebKit (горизонтальная прокрутка) */
.code-content::-webkit-scrollbar {
    height: 6px; /* чуть тоньше для аккуратности */
}
.code-content::-webkit-scrollbar-track {
    background: #1A1614; /* глубокий тёплый тёмный */
    border-radius: 4px;
}
.code-content::-webkit-scrollbar-thumb {
    background: #4A433C; /* совпадает с цветом номеров строк */
    border-radius: 4px;
}
.code-content::-webkit-scrollbar-thumb:hover {
    background: #6F6985; /* мягкий акцент при наведении */
}

/* ──────────────────────────────────────────────────────────────── */
/*  ПОДСВЕТКА СИНТАКСИСА (тёплая палитра)                           */
/* ──────────────────────────────────────────────────────────────── */
.code-punct      { color: #9893b5; }          /* < > = / в тегах */
.code-tag        { color: #569CD6; }          /* имя тега: form, div */
.code-tag-close  { color: #4A8ABF; }          /* ★ закрывающий тег (чуть темнее) */
.code-attr       { color: #ebbcba; }          /* имена атрибутов */
.code-data       { color: #b8cc9a; }          /* значения в кавычках */
.code-brace      { color: #d5a6e8; }          /* { } в шаблонах */
.code-comment    { color: #787590; font-style: italic; }
.code-op         { color: #f6c177; }          /* операторы + - : ? */
.code-cmp        { color: #c4a7e7; }          /* операторы сравнения */
.code-keyword    { color: #f1d9a6; font-weight: 600; }
.code-param      { color: #e0def4; }
.code-assign     { color: #93cee9; }
.code-hash       { color: #a8c9c2; }
.code-slash      { color: #e8a6a6; }





/* ──────────────────────────────────────────────────────────────── */
/*  ИНДИКАТОР ОТСТУПОВ (точки)                                      */
/* ──────────────────────────────────────────────────────────────── */
.code-indent-dot {
    color: #6f6985;
    opacity: 0.60;
    font-size: 0.74em;
    vertical-align: middle;
    user-select: none;
    letter-spacing: 2px;
}


/* ──────────────────────────────────────────────────────────────── */
/*  СИМВОЛ ВЕРТИКАЛЬНОЙ ЛИНИИ (⎪) — только в комментариях и тексте  */
/* ──────────────────────────────────────────────────────────────── */
.code-comment .code-vline,
.code-content pre > .code-vline {
    color: #A99379;
    opacity: 0.50;
    display: inline-block;
    line-height: 1.0;
    vertical-align: top;
    font-size: 0.995em;
    user-select: none;
    pointer-events: none;
    
    font-weight: 1000;
}