.runner_block {
    background: #1a1d2b;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    margin-bottom: 1rem;
}
#json_editor {
    width: -webkit-fill-available;
    height: 154px;
    border-radius: 0.5rem;
    resize: vertical;
    /*
    background-color: #272a34;
    border: none;
    padding: 0.8rem;
    font-family: monospace;
    color: #AAAAAA;
    */
}
.run_stop_button {
    display: flex;
    gap: 5px;
    background-color: #38a93a;  /* #1f2233; */
    color: #f4f4f4;
    padding: 0.6rem 1.2rem;
    border-radius: 0.6rem;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 0.8rem;
    padding-bottom: 0.5rem;
}
#run_button_container {
    display: flex;
    flex-direction: row-reverse;
}
button:hover {
    background-color: #2c3047;
}
#log_console {
    background: #272a34; /* #222; */
    color: #b1b1b1; /* #0f0; */
    padding: 10px;
    height: 110px; /* 200px; */
    overflow-y: auto;
    border-radius: 0.5rem;
    margin-top: 1rem;
    font-family: monospace;
    resize: vertical;
}
#output_gif {
    max-width: 100%;
    border-radius: 0.5rem;
    margin-top: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}


#progress_container {
    display: flex;
    align-items: center;
    width: 500px;
    height: 30px;
    background: #272a34; /* #222; */
    border-radius: 15px;
    overflow: hidden;
    font-family: monospace;
    color: #b1b1b1; /* #0f0; */
    max-width: 100%;
    margin-bottom: 1rem;
}

#progress_bar_parent {
    width: 100%;
    height: 100%;
    /* margin-right: 10px; */
}

#progress_bar {
    background-color: #b1b1b1;
    height: 100%;
    width: 0%;  /* будем менять через JS */
    border-radius: 15px 0 0 15px;
}

#progress_bar_data {
    flex-shrink: 0;
    /* margin-right: 10px; */
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 6px;
    padding-right: 9px;
    border-left: 5px solid #484848;
}



#console_toggle {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: flex-end;
    margin-top: 5px;
    color: #539bf5; /* #AAAAAA; */
    font-size: 10px;
    font-family: monospace;
    cursor: pointer;
}

.border_red {
  border: 1px solid #e53935;
}


.category_button {
    padding: 10px;
    background: #272a34;
    border-radius: 10px;
    cursor: pointer;
    margin: 5px 0 5px 0;
}

.category {
    padding: 10px;
    background: #272a34;
    border-radius: 10px;
    margin-bottom: 20px;
}

.sub_category {
    display: flex;
    flex-direction: row;
    padding: 10px;
    gap: 10px;
    align-items: center;
}

.hidden {
    display: none;
}

#frame_preview {
    overflow: auto;
    max-height: 200px;
}










































/* Базовый стиль для всех input */
input[type="number"],
input[type="color"] {
    background-color: #272a34;
    color: #f4f4f4;
    border: none;
    border-radius: 0.5rem;
    padding: 0.5rem 0.8rem;
    font-family: system-ui, sans-serif;
    font-size: 0.95rem;
    outline: none;
    transition: background 0.2s, box-shadow 0.2s;
}

/* Hover + focus подсветка */
input[type="number"]:hover,
input[type="color"]:hover,
input[type="number"]:focus,
input[type="color"]:focus {
    background-color: #313541;
    box-shadow: 0 0 0 2px #505050;
}

/* number-специфичные стили */
input[type="number"] {
    width: 120px;
    -moz-appearance: textfield; /* убираем стрелочки в Firefox */
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* убираем стрелочки в Chrome */
    margin: 0;
}

/* color-специфичные стили */
input[type="color"] {
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: inherit;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: inherit;
}
input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: inherit;
}


button {
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;

    background-color: #1f2233;
    color: #f4f4f4;

    border: none;
    border-radius: 0.5rem;

    cursor: pointer;
    transition: background 0.2s;
}

button:hover {
    background-color: #2c3047;
}

button:active {
    background-color: #3a3f56;
}





.ace-pastel-on-dark .ace_gutter {
    background: #313335;
    color: #606366;
} /* Номера строк */


.ace_scroller {
    background-color: #2B2B2B;
} /* Редактор */

.ace-pastel-on-dark {color: #A8B6B4;} /* Скобочки */
.ace-pastel-on-dark .ace_variable {color: #698655;} /* Строка */
.ace-pastel-on-dark .ace_string {color: #698655;} /* Строка */
/* .ace_line {color: #CC7832;} Запятые */
.ace-pastel-on-dark .ace_constant.ace_numeric {color: #5897BB;} /* Цифры */

.ace_editor .ace_punctuation {color: #CC7832 !important;} /* Запятые */

.ace_line .ace_fold {
    box-sizing: border-box;
    display: inline-block;
    height: 13px;
    margin-top: -2px;
    vertical-align: middle;
    /* background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJpJREFUeNpi/P//PwOlgAXGYGRklAVSokD8GmjwY1wasKljQpYACtpCFeADcHVQfQyMQAwzwAZI3wJKvCLkfKBaMSClBlR7BOQikCFGQEErIH0VqkabiGCAqwUadAzZJRxQr/0gwiXIal8zQQPnNVTgJ1TdawL0T5gBIP1MUJNhBv2HKoQHHjqNrA4WO4zY0glyNKLT2KIfIMAAQsdgGiXvgnYAAAAASUVORK5CYII=), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA3CAYAAADNNiA5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACJJREFUeNpi+P//fxgTAwPDBxDxD078RSX+YeEyDFMCIMAAI3INmXiwf2YAAAAASUVORK5CYII=); */
    background-repeat: no-repeat, repeat-x;
    background-position: center center, top left;
    /* color: transparent; */
    border: 0px;
    border-radius: 0px;
    cursor: pointer;
    pointer-events: auto;
    background-image: none;
    color: #808080;
}
.ace-pastel-on-dark .ace_fold {
    background-color: #3A3A3A;
    border-color: unset;
}
.ace_fold:hover {
    background-image: none;
    /* background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAJCAYAAADU6McMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJpJREFUeNpi/P//PwOlgAXGYGRklAVSokD8GmjwY1wasKljQpYACtpCFeADcHVQfQyMQAwzwAZI3wJKvCLkfKBaMSClBlR7BOQikCFGQEErIH0VqkabiGCAqwUadAzZJRxQr/0gwiXIal8zQQPnNVTgJ1TdawL0T5gBIP1MUJNhBv2HKoQHHjqNrA4WO4zY0glyNKLT2KIfIMAAQsdgGiXvgnYAAAAASUVORK5CYII=), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA3CAYAAADNNiA5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACBJREFUeNpi+P//fz4TAwPDZxDxD5X4i5fLMEwJgAADAEPVDbjNw87ZAAAAAElFTkSuQmCC); */
}