:root {
    --brand: #2051E5;
    --bg: #F0F0F0;
    --text: #141522;
    --entry: #FFFFFF;
    --progress-bg: #E5E5E5;
    --arrow: #91A4B7;

    --hover: #1B45C6;

    --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: #111;
    /* можно убрать */
    display: grid;
    place-items: center;
    font-family: var(--font);
    color: var(--text);
}

/* фиксированное "окно" */
.window {
    width: 528px;
    background: var(--bg);
    overflow: hidden;
}

/* padding внутри окна */
.container {
    height: 100%;
    padding: 25px 20px;
    background: var(--bg);
}

/* label */
.label {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.label--mt {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* строка с путем */
.row-folder {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* поля */
.entry {
    height: 30px;
    border: 0;
    outline: none;
    border-radius: 6px;
    background: var(--entry);
    padding: 0 10px;
    font-size: 12px;
    color: var(--text);
    width: 100%;
}

.entry--path {
    flex: 1 1 auto;
}

.entry--small {
    width: 57px;
    padding: 0 8px;
}

/* кнопки */
.btn {
    border: 0;
    border-radius: 6px;
    height: 30px;
    padding: 0 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
}

.btn--blue {
    background: var(--brand);
    color: #fff;
}

.btn--blue:hover {
    background: var(--hover);
}

#chooseBtn {
    width: 120px;
}

/* чекбокс */
.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    margin-bottom: 12px;
    font-size: 12px;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox__box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--brand);
    display: inline-block;
    position: relative;
}

.checkbox input:not(:checked)+.checkbox__box {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--brand);
}

.checkbox input:checked+.checkbox__box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox__text {
    font-size: 12px;
}

/* ===== FLEX GRID (вместо .grid / display: contents) ===== */
.grid-flex {
    display: flex;
    flex-direction: column;
}

.grid-row {
    display: flex;
    align-items: flex-start;
}

/* пара: label + widget */
.pair-flex {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    /* pady=(0,10) */
}

.pair-flex .pair__label {
    font-size: 12px;
    padding-right: 10px;
    /* padx=(0,10) */
    line-height: 30px;
    margin-bottom: 0;
    white-space: nowrap;
}

/* left_pad=18 для пары 1 и 2 */
.pair-flex--shift {
    margin-left: 18px;
}

/* right_pad=14 для пар 0 и 1 */
.pair-flex--mr14 {
    margin-right: 14px;
}

/* первая пара без left_pad */
.grid-row .pair-flex:first-child {
    margin-left: 0;
}

/* small entry фикс */
.pair-flex .entry--small {
    flex: 0 0 57px;
}

/* select */
.select-wrap {
    height: 30px;
    border-radius: 6px;
    background: var(--entry);
    position: relative;
    display: flex;
    align-items: center;
}

.select {
    width: 100%;
    height: 30px;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0 28px 0 10px;
    font-size: 12px;
    font-family: var(--font);
    color: var(--text);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    right: 10px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--arrow);
    border-bottom: 2px solid var(--arrow);
    transform: rotate(45deg);
    pointer-events: none;
}

/* последняя пара в строке (scale) тянется */
.grid-row .pair-flex:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.grid-row .pair-flex:last-child .select-wrap {
    width: 100%;
}

/* формат фикс 80px */
.select-wrap--w80 {
    width: 80px;
    flex: 0 0 80px;
}

.select-wrap--w80 .select {
    width: 80px;
}

/* пустая третья пара во второй строке */
.pair-flex--empty {
    flex: 1 1 auto;
}

/* старт кнопка */
.btn--start {
    height: 40px;
    border-radius: 8px;
    width: 100%;
    margin-top: 16px;
    margin-bottom: 12px;
    font-size: 12px;
}

/* прогресс вместо кнопки */
.progress-track {
    height: 40px;
    border-radius: 8px;
    width: 100%;
    background: var(--progress-bg);
    position: relative;
    overflow: hidden;
    margin-top: 16px;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: var(--brand);
    border-radius: 8px;
    width: 0%;
}