:root{
    --code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --code-lh: 1.5;

    /* левый отступ цифр в гаттере; при желании JS может переопределить */
    --gutter-hpad: .75rem;
}

/* Общие метрики для код-полей и гаттеров */
#input.form-control,
#output.form-control,
#gutterOut.form-control,
.json-gutter.form-control{
    font-family: var(--code-font);
    line-height: var(--code-lh);
    letter-spacing: 0;
    box-sizing: border-box;
}

/* Приводим padding у всех textarea к единому виду (как в Bootstrap) */
#input.form-control,
#output.form-control,
#gutterOut.form-control{
    padding: .375rem .75rem;
}

/* Левый гаттер: ширина/скролл/скругления как у input-group */
.json-gutter.form-control{
    max-width: 4rem; min-width: 4rem;
    margin: 0;
    overflow: auto;
    white-space: pre;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    /* совпадение по вертикали с textarea */
    padding-top: .375rem;
    padding-bottom: .375rem;

    /* горизонтальные отступы задаём на .ln, чтобы цифры совпадали с padding-left textarea */
    padding-left: 0;
    padding-right: 0;
}

/* Само поле ввода — без левого скругления */
#input.form-control{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Строки в гаттере — слева и с тем же левым отступом, что у textarea */
.json-gutter .ln{
    display: flex;
    align-items: center;
    justify-content: flex-start;               /* влево */
    padding: 0 var(--gutter-hpad);             /* горизонтальный отступ цифры */
    user-select: none;
    height: calc(1em * var(--code-lh));        /* стабильная высота строки */
}

/* Подсветка ошибок в гаттере */
.json-gutter .ln.err{ font-weight: 600; color: #dc3545; }
.json-gutter .ln.err .ic{ font-size: .9em; margin-left: .35rem; line-height: 1; }

/* Карточки ошибок */
#errorsScroller .err-card{ cursor: pointer; }