body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #111827;
            z-index: 99999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }
        .loader-hide {
            opacity: 0;
            visibility: hidden;
        }
        .draw-path {
            fill: none;
            stroke: #ffffff;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 400;
            stroke-dashoffset: 400;
            animation: drawLine 1.5s ease-in-out forwards;
        }
        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.5s; stroke-dasharray: 600; stroke-dashoffset: 600; }
        .delay-3 { animation-delay: 0.9s; }

        @keyframes drawLine {
            to { stroke-dashoffset: 0; }
        }
        @keyframes fadeInText {
            to { opacity: 0.7; }
        }
        
        body { transition: background-color 0.5s ease; }
        
        body.blueprint-mode {
            /* Классический цвет чертежей Cyanotype */
            background-color: #0b2e59 !important;
            /* Текстура миллиметровки */
            background-image: 
                linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px),
                linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
            background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
            color: #e0f2fe !important; /* Светло-голубой текст по умолчанию */
        }

        /* Перекрашиваем навигацию и карточки */
        .blueprint-mode #main-nav { background-color: #071f3f !important; border-bottom-color: #1e3a8a !important; }
        .blueprint-mode #logo-text { color: #ffffff !important; }
        .blueprint-mode #nav-desc { color: #93c5fd !important; }
        .blueprint-mode #blueprint-btn { background-color: #1e3a8a !important; border-color: #3b82f6 !important; color: #ffffff !important; }

        .blueprint-mode .bg-white { background-color: rgba(11, 46, 89, 0.8) !important; border-color: #1e40af !important; backdrop-filter: blur(4px); }
        .blueprint-mode .bg-gray-50 { background-color: rgba(7, 31, 63, 0.6) !important; border-color: #1e40af !important; }
        
        /* Тексты, заголовки, инпуты */
        .blueprint-mode p, .blueprint-mode span, .blueprint-mode div, .blueprint-mode label { color: #e0f2fe !important; }
        .blueprint-mode .text-gray-500, .blueprint-mode .text-gray-400, .blueprint-mode .text-gray-700 { color: #93c5fd !important; }
        .blueprint-mode .text-black, .blueprint-mode h1, .blueprint-mode h2, .blueprint-mode h3 { color: #ffffff !important; }
        
        .blueprint-mode input, .blueprint-mode select { 
            background-color: transparent !important; 
            border-color: #3b82f6 !important; 
            color: #ffffff !important; 
        }
        .blueprint-mode input:focus, .blueprint-mode select:focus { border-color: #60a5fa !important; }

        /* Кнопки навигации по секциям */
        .blueprint-mode .nav-btn.active { border-bottom-color: #ffffff !important; color: #ffffff !important; }
        .blueprint-mode .nav-btn:not(.active) { color: #60a5fa !important; }

        /* ИНВЕРСИЯ ВСЕХ SVG-ЧЕРТЕЖЕЙ */
        .blueprint-mode svg {
            /* Это магическое свойство делает черные линии белыми, а серые заливки - прозрачно-синими */
            filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(150%) contrast(100%);
            mix-blend-mode: screen;
        }
        /* Не инвертируем иконку в кнопке синьки и загрузчик */
        .blueprint-mode #blueprint-btn svg, .blueprint-mode #loader-wrapper svg { filter: none !important; mix-blend-mode: normal; }
        
        /* Стили для PDF печати (чтобы не потерялись) */
        @media print {
            button, select, .nav-btn, header, nav, .border-b-2 { display: none !important; }
            input[type="number"], input[type="text"] { border: none !important; background: transparent !important; padding: 0 !important; font-weight: bold; -webkit-appearance: none; }
            body { background-color: #fff !important; }
            .bg-white { border: none !important; padding: 0 !important; margin-bottom: 20px !important; }
            .shadow-sm { box-shadow: none !important; }
            #section-floor, #section-roof, #section-foundation { page-break-before: always; padding-top: 20px; }
            svg, .overflow-hidden { page-break-inside: avoid; }
        }
        /* ==================== ПЛАВНОЕ ОБНОВЛЕНИЕ КАРТОЧЕК ==================== */
        @keyframes subtleFade {
            from { opacity: 0.4; }
            to { opacity: 1; }
        }
        
        /* Убрали изменение высоты (max-height), оставили только мягкое проявление */
        .p-6.border-t {
            animation: subtleFade 0.3s ease-out forwards;
        }

        /* Жестко фиксируем минимальную высоту для чертежей стен, чтобы они не моргали */
        .overflow-x-auto svg {
            min-height: 250px;
            display: block;
        }
                /* ==================== ФИКС ДЕРГАНИЯ ЭКРАНА ==================== */
        /* Жестко фиксируем минимальную высоту блоков с чертежами и результатами, 
           чтобы они не схлопывались в момент перерисовки */
        [id$="-viz"] { 
            min-height: 320px; 
            display: flex; 
            align-items: center; 
        }
        [id$="-result"] { 
            min-height: 180px; 
        }

        /* ==================== ПЛАВНЫЕ ВКЛАДКИ ==================== */
        @keyframes fadeInTab {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .tab-animated {
            animation: fadeInTab 1s ease-out forwards;
        }