* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    background: #222;
}

/* =========================================
   ОСНОВНОЙ ИНТЕРФЕЙС
========================================= */

.sawline {
    position: relative;

    width: 1648px;
    height: 894px;

    margin: 0 auto;

    overflow: hidden;
}

/* Фоновая картинка */
.sawline__background {
    position: absolute;

    left: 0;
    top: 0;

    width: 1648px;
    height: 894px;

    display: block;

    user-select: none;
    pointer-events: none;
}

/* =========================================
   КЛИКАБЕЛЬНЫЕ ОБЛАСТИ (остаются как есть)
========================================= */

.click-area {
    position: absolute;

    display: block;

    cursor: pointer;

    border: 2px solid red;           /* временная рамка */
    background: rgba(255, 0, 0, 0.10); /* полупрозрачный фон */

    z-index: 10;
}

.click-area:hover {
    background: rgba(0, 150, 255, 0.25);
    border-color: #0096ff;
}

/* =========================================
   ВЕРХНИЕ КНОПКИ
========================================= */

.area-report {
    left: 120px;
    top: 15px;

    width: 37px;
    height: 28px;
}

.area-end-shift {
    left: 307px;
    top: 35px;

    width: 448px;
    height: 228px;
}

.area-machines {
    left: 925px;
    top: 35px;

    width: 340px;
    height: 225px;
}

/* =========================================
   СТАНКИ СЛЕВА
========================================= */

.area-machine-1 {
    left: 313px;
    top: 585px;

    width: 50px;
    height: 50px;
}

.area-machine-2 {
    left: 433px;
    top: 585px;

    width: 50px;
    height: 50px;
}

/* =========================================
   СТАНКИ СПРАВА
========================================= */

.area-machine-3 {
    left: 1125px;
    top: 585px;

    width: 50px;
    height: 50px;
}

.area-machine-4 {
    left: 1221px;
    top: 585px;

    width: 50px;
    height: 50px;
}

/* =========================================
   ПОДПИСИ (НОВЫЙ БЛОК)
========================================= */

.label {
    position: absolute;

    color: #000;                /* чёрный текст */
    font-weight: bold;          /* жирный */
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;

    /* Рамка и фон для читаемости */
    border: 1px solid #000;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 4px;
    border-radius: 3px;

    pointer-events: none;       /* чтобы клик проходил сквозь */
    z-index: 5;
}

/* Позиционирование подписей (под соответствующими зонами) */

.label-report {
    left: 65px;
    top: 48px;      /* 15 (top зоны) + 28 (height) + 5px отступа */
    width: 157px;    /* чтобы текст не разъезжался */
}

.label-end-shift {
    left: 307px;
    top: 268px;     /* 35 + 228 + 5 */
    width: 448px;
}

.label-machines {
    left: 925px;
    top: 265px;     /* 35 + 225 + 5 */
    width: 340px;
}

.label-machine-1 {
    left: 313px;
    top: 640px;     /* 585 + 50 + 5 */
    width: 50px;
}

.label-machine-2 {
    left: 433px;
    top: 640px;
    width: 50px;
}

.label-machine-3 {
    left: 1125px;
    top: 640px;
    width: 50px;
}

.label-machine-4 {
    left: 1199px;
    top: 640px;
    width: 100px;
}