:root { --primary-color: #222; --accent-color: #555; --success-color: #27ae60; --error-color: #e74c3c; }
    .tz-body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; line-height: 1.6; }
    #form-anchor { height: 1px; margin-top: -120px; }
    .tz-form-container { 
        max-width: 850px; 
        margin: 0 auto; 
        padding: 0; 
        background: #fff; 
        padding: 150px 40px 40px 40px; /* Добавляем 30px сверху ВНУТРИ формы для прогресс-бара */
        border-radius: 15px; /* Закругляем всё */
        box-shadow: 0 15px 40px rgba(0,0,0,0.1); 
        position: relative; 
        min-height: 400px;
        box-sizing: border-box; /* Чтобы отступы не раздували ширину */
        
    }
    
    /* Прогресс-бар */
    .tz-progress-wrapper { margin-bottom: 40px; }
    .tz-progress-info { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; color: var(--accent-color); }
    .tz-progress-bg { background: #f0f0f0; height: 6px; border-radius: 10px; overflow: hidden; }
    .tz-progress-bar { height: 100%; background: var(--primary-color); width: 0%; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

    /* Шаги */
    .tz-step { display: none; }
    .tz-step.active { display: block; animation: fadeIn 0.4s ease-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    /* Поля и лейблы */
    .tz-section-title { font-size: 26px; font-weight: 800; margin-bottom: 30px; color: #000; letter-spacing: -0.5px; }
    .tz-group { margin-bottom: 25px; }
    .tz-label { display: block; font-weight: 700; font-size: 16px; margin-bottom: 4px; color: #111; }
    .tz-hint { display: block; font-size: 13px; color: #666; margin-bottom: 10px; line-height: 1.4; font-style: italic; }
    
    .tz-input, .tz-select, .tz-textarea { 
        width: 100%; padding: 14px 16px; border: 2px solid #e0e0e0; border-radius: 8px; 
        font-size: 15px; transition: border-color 0.2s; box-sizing: border-box; outline: none;
    }
    .tz-input:focus { border-color: var(--primary-color); }
    .tz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    /* Чекбоксы и Радио как карточки */
    .tz-option { 
        border: 2px solid #f0f0f0; padding: 12px; border-radius: 8px; cursor: pointer; 
        display: flex; align-items: center; transition: all 0.2s; font-size: 14px;
    }
    .tz-option:hover { background: #f9f9f9; border-color: #ddd; }
    .tz-option input { margin-right: 12px; transform: scale(1.2); }

    /* Кнопки */
    .tz-footer { display: flex; justify-content: space-between; margin-top: 40px; border-top: 1px solid #eee; padding-top: 25px; }
    .btn { padding: 16px 35px; border-radius: 8px; font-weight: 700; cursor: pointer; border: none; font-size: 15px; transition: 0.2s; }
    .btn-prev { background: #eee; color: #444; }
    .btn-next { background: var(--primary-color); color: #fff; }
    .btn-submit { background: var(--success-color); color: #fff; display: none; }
    .btn:hover { transform: translateY(-2px); opacity: 0.9; }

    /* Сообщение об успехе */
    #success-message { 
        display: none; text-align: center; padding: 60px 20px; 
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;
    }
    .success-icon { font-size: 60px; color: var(--success-color); margin-bottom: 20px; }

    /* Поле "Другое" (появляется при выборе "Другое") */
    .other-input-container { display: none; margin-top: 10px; }
    .other-input-container.active { display: block; }


.site-module { border-top: 1px solid #efefef; padding-top: 16px; }
.site-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.site-toolbar .tz-input { flex: 1 1 320px; }
.site-toolbar .btn { padding: 10px 14px; font-size: 14px; }
.site-toolbar-tools .btn-submit { display: inline-block; }
.site-editor-wrap { position: relative; width: 100%; height: 430px; border-radius: 10px; overflow: hidden; border: 2px solid #e8e8e8; }
#siteMap { width: 100%; height: 100%; z-index: 1; }
#siteDrawCanvas { position: absolute; inset: 0; z-index: 500; width: 100%; height: 100%; pointer-events: none; }
#siteDrawCanvas.drawing-enabled { pointer-events: auto; }
.site-tool.active { background: #222; color: #fff; }
.site-status { margin: 0; font-size: 13px; color: #555; }

@media (max-width: 760px) {
  .site-editor-wrap { height: 340px; }
  .site-toolbar { flex-direction: column; align-items: stretch; }
  .site-toolbar .btn { width: 100%; }
}

/* --- Стили для модуля карты и рисования (Обновление) --- */

/* Контейнер инструкции */
.site-instruction-box {
    background: #f0f7ff; /* Светло-голубой фон для привлечения внимания */
    border-left: 4px solid #007bff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
}

.site-instruction-box p {
    margin: 0 0 10px 0;
    font-weight: 700;
    color: #0056b3;
}

.steps-mini-guide {
    margin-top: 12px;
    font-size: 13px;
    color: #666;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid #dce9f5;
    padding-top: 10px;
}

/* Кнопка "Начать рисовать" — делаем её акцентной (Синей) */
#btn-draw-mode {
    background-color: #007bff !important;
    color: #fff !important;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

#btn-draw-mode:hover {
    background-color: #0056b3 !important;
    transform: translateY(-2px);
}

/* Кнопка "Двигать карту" — Нейтральная (Светлая) */
#btn-map-mode {
    background-color: #f8f9fa !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
}

#btn-map-mode:hover {
    background-color: #e2e6ea !important;
    transform: translateY(0); /* Не так сильно акцентируем */
}

/* Кнопка "Сохранить схему" — Финальная (Зеленая) */
#saveSiteSchemeBtn {
    background-color: var(--success-color) !important;
    color: #fff !important;
    font-weight: 800;
    margin-left: auto; /* Прижимаем вправо */
}

/* Стили инструментов рисования */
.btn-tool {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    color: #444 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
}

.btn-tool.active {
    background: var(--primary-color) !important; /* Черный из твоих переменных */
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

/* Поиск адреса */
#siteAddressBtn {
    background: var(--accent-color) !important; /* Твой серый цвет #555 */
    color: #fff !important;
}

/* Корректировка z-index для Canvas (чтобы перекрывал карту, но не тулбары) */
#siteDrawCanvas {
    z-index: 100;
}

/* Оформление статуса */
.site-status {
    background: #f9f9f9;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 10px;
    font-weight: 500;
}