/* Базовые стили */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Courier New', monospace;
            min-height: 100vh;
            padding: 20px;
            transition: all 0.3s ease;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* Стили для темы 1 (digi3.php) */
        .theme-1 {
            background: #0a0a0a;
            color: #00ff00;
        }
        
        .theme-1 .header {
            border-bottom: 2px solid #00ff00;
            padding-bottom: 20px;
        }
        
        .theme-1 .header h1 {
            color: #00ff00;
            text-shadow: 0 0 10px #00ff00;
        }
        
        .theme-1 .header p {
            color: #00ff00;
        }
        
        .theme-1 .sensor-card {
            background: #111;
            border: 2px solid #00ff00;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
        }
        
        .theme-1 .sensor-title {
            color: #00ff00;
        }
        
        .theme-1 .digital-display {
            background: #000;
            border: 1px solid #333;
        }
        
        .theme-1 .info-panel {
            background: #111;
            border: 2px solid #00ff00;
        }
        
        .theme-1 .info-item {
            color: #00ff00;
        }
        
        .theme-1 .wind-direction {
            background: #00ff00;
            color: #000;
        }
        
        /* Стили для темы 2 (digi21.php) - ТЕМА ПО УМОЛЧАНИЮ */
        .theme-2 {
            background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 100%);
            color: white;
        }
        
        .theme-2 .header {
            border-bottom: none;
            padding-bottom: 20px;
        }
        
        .theme-2 .header h1 {
            color: #00b4db;
            text-shadow: 0 0 20px #00b4db;
        }
        
        .theme-2 .sensor-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 180, 219, 0.3);
            border-color: rgba(0, 180, 219, 0.8);
            box-shadow: 0 0 20px rgba(0, 180, 219, 0.4);
            transition: all 0.3s ease;
        }
        
        .theme-2 .sensor-card:hover {
            border-color: rgba(0, 180, 219, 0.8);
            box-shadow: 0 0 20px rgba(0, 180, 219, 0.4);
        }
        
        .theme-2 .sensor-title {
            color: #00b4db;
        }
        
        .theme-2 .digital-display {
            background: transparent;
            border: none;
        }
        
        .theme-2 .info-panel {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 180, 219, 0.3);
            transition: all 0.3s ease;
            border-color: rgba(0, 180, 219, 0.8);
            box-shadow: 0 0 20px rgba(0, 180, 219, 0.4);
        }
        
        .theme-2 .info-panel:hover {
            border-color: rgba(0, 180, 219, 0.8);
            box-shadow: 0 0 20px rgba(0, 180, 219, 0.4);
        }
        
        .theme-2 .wind-direction {
            background: #00b4db;
            color: white;
            box-shadow: 0 0 15px #00b4db;
        }
        
        /* Стили для темы 3 (index-old.php) - КЛАССИЧЕСКАЯ ТЕМА */
        .theme-3 {
            background: #c7b39b url(fon2.jpg);
            color: #333;
        }
        
        .theme-3 .header {
            border-bottom: none;
            padding-bottom: 20px;
        }
        
        .theme-3 .header h1 {
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            font-size: 2.2em;
        }
        
        .theme-3 .sensor-card {
            background: #FFFFFF;
            border: 1px solid black;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
        }
        
        .theme-3 .sensor-title {
            color: #333;
            font-size: 1.3em;
        }
        
        .theme-3 .digital-display {
            background: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        
        .theme-3 .info-panel {
            background: #FFFFFF;
            border: 1px solid black;
            border-radius: 10px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .theme-3 .info-item {
            color: #333;
            margin: 10px 0;
        }
        
        .theme-3 .wind-direction {
            background: #4a86e8;
            color: white;
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
        }
        
        /* Общие стили для всех тем */
        .header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            font-size: 1.2em;
        }
        
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .sensor-card {
            border-radius: 10px;
            padding: 20px;
        }
        
        .sensor-title {
            font-size: 1.4em;
            margin-bottom: 20px;
            text-align: center;
            font-weight: bold;
            text-transform: uppercase;
        }
        
        .digital-display {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            height: 120px;
            border-radius: 5px;
            padding: 10px;
        }
        
        .digit-container {
            display: flex;
            gap: 1px;
            align-items: center;
        }
        
        .digit {
            width: 70px;
            height: 110px;
            position: relative;
            background: #000;
        }
        
        .segment {
            position: absolute;
            border-radius: 4px;
            transition: all 0.3s ease;
            opacity: 0.2;
        }
        
        .segment.active {
            opacity: 1;
        }
        
        .segment.dimmed {
            opacity: 0.1;
        }
        
        /* Горизонтальные сегменты */
        .segment-a { top: 8px; left: 12px; width: 46px; height: 10px; }
        .segment-b { top: 10px; right: 8px; width: 10px; height: 46px; }
        .segment-c { bottom: 10px; right: 8px; width: 10px; height: 46px; }
        .segment-d { bottom: 8px; left: 12px; width: 46px; height: 10px; }
        .segment-e { bottom: 10px; left: 8px; width: 10px; height: 46px; }
        .segment-f { top: 10px; left: 8px; width: 10px; height: 46px; }
        .segment-g { top: 54px; left: 12px; width: 46px; height: 10px; }
        
        .decimal-point {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin: 0 5px;
            opacity: 0;
            transition: opacity 0.3s ease;
            align-self: flex-start;
            margin-top: 95px;
        }
        
        .decimal-point.active {
            opacity: 1;
        }
        
        .sensor-info {
            text-align: center;
            font-size: 1em;
            margin-top: 10px;
        }
        
        .info-panel {
            border-radius: 10px;
            padding: 25px;
            text-align: center;
            margin-top: 20px;
        }
        
        .info-item {
            margin: 15px 0;
            font-size: 1.2em;
        }
        
        .wind-direction {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
            margin: 0 10px;
            font-size: 1.1em;
        }
        
        .last-update {
            font-size: 1em;
            margin-top: 20px;
            opacity: 0.8;
        }

        /* Переключатель тем */
        .theme-switcher {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            gap: 10px;
        }
        
        .theme-btn {
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: 1px solid #00b4db;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            transition: all 0.3s ease;
        }
        
        .theme-1 .theme-btn {
            border-color: #00ff00;
        }
        
        .theme-3 .theme-btn {
            border-color: #8B4513;
            background: rgba(139, 69, 19, 0.8);
        }
        
        .theme-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px currentColor;
        }

        /* Кнопка автоозвучки */
        .auto-speech-btn {
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: 1px solid #ff6b6b;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            transition: all 0.3s ease;
        }
        
        .theme-1 .auto-speech-btn {
            border-color: #ff6b6b;
            background: rgba(255, 107, 107, 0.2);
        }
        
        .theme-2 .auto-speech-btn {
            border-color: #ff6b6b;
            background: rgba(255, 107, 107, 0.2);
        }
        
        .theme-3 .auto-speech-btn {
            border-color: #8B4513;
            background: rgba(139, 69, 19, 0.8);
        }
        
        .auto-speech-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 10px #ff6b6b;
        }
        
        .auto-speech-btn.active {
            background: rgba(255, 107, 107, 0.5);
            border-color: #ff4757;
            box-shadow: 0 0 15px #ff4757;
        }

        /* Кнопка озвучки - НОВЫЙ СТИЛЬ */
        .speech-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            z-index: 1000;
        }
        
        .theme-1 .speech-btn {
            background: linear-gradient(135deg, #00ff00, #00cc00);
            color: #000;
            border: 2px solid #00ff00;
        }
        
        .theme-2 .speech-btn {
            background: linear-gradient(135deg, #00b4db, #0083b0);
            color: white;
            border: 2px solid #00b4db;
        }
        
        .theme-3 .speech-btn {
            background: linear-gradient(135deg, #8B4513, #654321);
            color: white;
            border: 2px solid #8B4513;
        }
        
        .speech-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }
        
        .speech-btn.playing {
            animation: pulse 1.5s infinite;
        }
        
        .speech-btn.muted {
            opacity: 0.6;
            transform: scale(0.9);
        }
        
        .speech-btn.muted:hover {
            transform: scale(1);
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .speech-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Цвета сегментов для темы 1 */
        .theme-1 .temp .segment { background: #ff0000; }
        .theme-1 .temp .segment.active { box-shadow: 0 0 15px #ff0000; }
        .theme-1 .temp .decimal-point { background: #ff0000; }
        
        .theme-1 .temp.positive .segment { background: #00ff00; }
        .theme-1 .temp.positive .segment.active { box-shadow: 0 0 15px #00ff00; }
        .theme-1 .temp.positive .decimal-point { background: #00ff00; }
        
        .theme-1 .wind .segment { background: #ffd700; }
        .theme-1 .wind .segment.active { box-shadow: 0 0 15px #ffd700; }
        .theme-1 .wind .decimal-point { background: #ffd700; }
        
        .theme-1 .pressure .segment { background: #0088ff; }
        .theme-1 .pressure .segment.active { box-shadow: 0 0 15px #0088ff; }
        .theme-1 .pressure .decimal-point { background: #0088ff; }

        /* Цвета сегментов для темы 2 */
        .theme-2 .temp.positive .segment { 
            background: #00ff00; 
            color: #00ff00;
        }
        .theme-2 .temp.positive .segment.active { 
            box-shadow: 0 0 20px #00ff00;
        }
        .theme-2 .temp.positive .decimal-point { 
            background: #00ff00; 
            color: #00ff00;
        }
        
        .theme-2 .temp.negative .segment { 
            background: #ff4444; 
            color: #ff4444;
        }
        .theme-2 .temp.negative .segment.active { 
            box-shadow: 0 0 20px #ff4444;
        }
        .theme-2 .temp.negative .decimal-point { 
            background: #ff4444; 
            color: #ff4444;
        }
        
        .theme-2 .wind .segment { 
            background: #ffd700; 
            color: #ffd700;
        }
        .theme-2 .wind .segment.active { 
            box-shadow: 0 0 20px #ffd700;
        }
        .theme-2 .wind .decimal-point { 
            background: #ffd700; 
            color: #ffd700;
        }
        
        .theme-2 .pressure .segment { 
            background: #4444ff; 
            color: #4444ff;
        }
        .theme-2 .pressure .segment.active { 
            box-shadow: 0 0 20px #4444ff;
        }
        .theme-2 .pressure .decimal-point { 
            background: #4444ff; 
            color: #4444ff;
        }

        /* Цвета сегментов для темы 3 */
        .theme-3 .temp .segment { 
            background: #e74c3c; 
        }
        .theme-3 .temp .segment.active { 
            box-shadow: 0 0 10px #e74c3c;
        }
        .theme-3 .temp .decimal-point { 
            background: #e74c3c; 
        }
        
        .theme-3 .wind .segment { 
            background: #f39c12; 
        }
        .theme-3 .wind .segment.active { 
            box-shadow: 0 0 10px #f39c12;
        }
        .theme-3 .wind .decimal-point { 
            background: #f39c12; 
        }
        
        .theme-3 .pressure .segment { 
            background: #3498db; 
        }
        .theme-3 .pressure .segment.active { 
            box-shadow: 0 0 10px #3498db;
        }
        .theme-3 .pressure .decimal-point { 
            background: #3498db; 
        }

        /* Разворачивающаяся панель для графиков */
        .chart-panel {
            margin-top: 30px;
            border-radius: 10px;
            overflow: hidden;
            max-height: 0;
            transition: max-height 0.5s ease-out;
        }
        
        .theme-1 .chart-panel {
            background: #111;
            border: 2px solid #00ff00;
        }
        
        .theme-2 .chart-panel {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 180, 219, 0.3);
        }
        
        .theme-3 .chart-panel {
            background: #FFFFFF;
            border: 1px solid black;
            border-radius: 10px;
        }
        
        .chart-panel.expanded {
            max-height: 800px;
        }
        
        .chart-toggle {
            background: rgba(0, 180, 219, 0.2);
            border: 1px solid rgba(0, 180, 219, 0.5);
            color: #00b4db;
            padding: 12px 20px;
            border-radius: 10px;
            cursor: pointer;
            font-family: 'Courier New', monospace;
            font-size: 1.1em;
            font-weight: bold;
            text-align: center;
            display: block;
            width: 100%;
            margin-top: 20px;
            transition: all 0.3s ease;
        }
        
        /* Стили кнопки для темы 1 */
        .theme-1 .chart-toggle {
            background: rgba(0, 255, 0, 0.1);
            border: 2px solid #00ff00;
            color: #00ff00;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
            text-shadow: 0 0 5px #00ff00;
        }
        
        .theme-1 .chart-toggle:hover {
            background: rgba(0, 255, 0, 0.2);
            border-color: #00ff00;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
            transform: translateY(-2px);
        }
        
        /* Стили кнопки для темы 2 */
        .theme-2 .chart-toggle:hover {
            background: rgba(0, 180, 219, 0.3);
            border-color: rgba(0, 180, 219, 0.8);
            transform: translateY(-2px);
        }
        
        /* Стили кнопки для темы 3 */
        .theme-3 .chart-toggle {
            background: #8B4513;
            border: 2px solid #654321;
            color: white;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }
        
        .theme-3 .chart-toggle:hover {
            background: #A0522D;
            border-color: #8B4513;
            transform: translateY(-2px);
            box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
        }
        
        .chart-content {
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s ease 0.2s;
        }
        
        .chart-panel.expanded .chart-content {
            opacity: 1;
        }

        /* Стили для приборов темы 3 */
        .gauges-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .gauge-item {
            text-align: center;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            padding: 15px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .gauge-title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        @media (max-width: 768px) {
            .theme-switcher {
                position: relative;
                top: auto;
                right: auto;
                text-align: center;
                margin-bottom: 20px;
                flex-direction: column;
                align-items: center;
            }
            
            .speech-btn {
                bottom: 10px;
                right: 10px;
                width: 50px;
                height: 50px;
                font-size: 20px;
            }
            
            .chart-panel.expanded {
                max-height: 1200px;
            }
            
            .gauges-container {
                grid-template-columns: 1fr;
            }
        }
		
		.refresh-btn {
			background: rgba(0, 0, 0, 0.7);
			color: white;
			border: 1px solid #4CAF50;
			padding: 8px 15px;
			border-radius: 20px;
			cursor: pointer;
			font-family: 'Courier New', monospace;
			font-size: 0.9em;
			transition: all 0.3s ease;
		}

		.theme-1 .refresh-btn {
			border-color: #00ff00;
			background: rgba(0, 255, 0, 0.2);
		}

		.theme-2 .refresh-btn {
			border-color: #4CAF50;
			background: rgba(76, 175, 80, 0.2);
		}

		.theme-3 .refresh-btn {
			border-color: #8B4513;
			background: rgba(139, 69, 19, 0.8);
		}

		.refresh-btn:hover {
			transform: scale(1.05);
			box-shadow: 0 0 10px #4CAF50;
		}

		.refresh-btn:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}


		/* Стиль для невидимой кнопки активации */
		.activation-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: transparent;
			border: none;
			cursor: pointer;
			z-index: 9999;
			opacity: 0.01;
		}

		.activation-overlay:hover {
			opacity: 0.02;
		}

		/* Обновленные стили для кнопки обновления */
		.refresh-btn {
			background: rgba(0, 0, 0, 0.7);
			color: white;
			border: 1px solid #4CAF50;
			padding: 8px 15px;
			border-radius: 20px;
			cursor: pointer;
			font-family: 'Courier New', monospace;
			font-size: 0.9em;
			transition: all 0.3s ease;
		}

		.theme-1 .refresh-btn {
			border-color: #00ff00;
			background: rgba(0, 255, 0, 0.2);
			color: #00ff00;
		}

		.theme-2 .refresh-btn {
			border-color: #00b4db;
			background: rgba(0, 180, 219, 0.2);
			color: #00b4db;
		}

		.theme-3 .refresh-btn {
			border-color: #8B4513;
			background: rgba(139, 69, 19, 0.8);
			color: white;
		}

		.refresh-btn:hover {
			transform: scale(1.05);
			box-shadow: 0 0 15px currentColor;
		}

		.theme-1 .refresh-btn:hover {
			box-shadow: 0 0 15px #00ff00;
		}

		.theme-2 .refresh-btn:hover {
			box-shadow: 0 0 15px #00b4db;
		}

		.theme-3 .refresh-btn:hover {
			box-shadow: 0 0 15px #8B4513;
		}

		.refresh-btn:disabled {
			opacity: 0.6;
			cursor: not-allowed;
			transform: scale(1);
		}

		.refresh-btn.loading {
			animation: pulse 1.5s infinite;
		}

		@keyframes pulse {
			0% { opacity: 1; }
			50% { opacity: 0.7; }
			100% { opacity: 1; }
		}


		/* Стиль для невидимой кнопки активации */
		.activation-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: transparent;
			border: none;
			cursor: pointer;
			z-index: 9999;
			opacity: 0.01;
		}

		.activation-overlay:hover {
			opacity: 0.02;
		}

		/* Обновленные стили для кнопки обновления */
		.refresh-btn {
			background: rgba(0, 0, 0, 0.7);
			color: white;
			border: 1px solid #4CAF50;
			padding: 8px 15px;
			border-radius: 20px;
			cursor: pointer;
			font-family: 'Courier New', monospace;
			font-size: 0.9em;
			transition: all 0.3s ease;
		}

		.theme-1 .refresh-btn {
			border-color: #00ff00;
			background: rgba(0, 255, 0, 0.2);
			color: #00ff00;
		}

		.theme-2 .refresh-btn {
			border-color: #00b4db;
			background: rgba(0, 180, 219, 0.2);
			color: #00b4db;
		}

		.theme-3 .refresh-btn {
			border-color: #8B4513;
			background: rgba(139, 69, 19, 0.8);
			color: white;
		}

		.refresh-btn:hover {
			transform: scale(1.05);
			box-shadow: 0 0 15px currentColor;
		}

		.theme-1 .refresh-btn:hover {
			box-shadow: 0 0 15px #00ff00;
		}

		.theme-2 .refresh-btn:hover {
			box-shadow: 0 0 15px #00b4db;
		}

		.theme-3 .refresh-btn:hover {
			box-shadow: 0 0 15px #8B4513;
		}

		.refresh-btn:disabled {
			opacity: 0.6;
			cursor: not-allowed;
			transform: scale(1);
		}

		.refresh-btn.loading {
			animation: pulse 1.5s infinite;
		}

		/* Стили для кнопки уведомлений */
		.speech-btn.muted {
			opacity: 0.6;
			background: linear-gradient(135deg, #666, #888) !important;
			border-color: #999 !important;
		}

		.theme-1 .speech-btn.muted {
			background: linear-gradient(135deg, #333, #555) !important;
			border-color: #666 !important;
		}

		.theme-2 .speech-btn.muted {
			background: linear-gradient(135deg, #333, #555) !important;
			border-color: #666 !important;
		}

		.theme-3 .speech-btn.muted {
			background: linear-gradient(135deg, #666, #888) !important;
			border-color: #999 !important;
		}

		@keyframes pulse {
			0% { opacity: 1; }
			50% { opacity: 0.7; }
			100% { opacity: 1; }
		}