/* Переопределяем цвета для темной темы */
		:root {
			--bg-color: #1a1a1a;        /* Очень темно-серый фон */
			--bg-hover-color: rgba(0, 255, 102, 0.12) !important ; /* Mail-list и Table  #333 */
			--card-bg: rgba(36, 36, 36, 0.75); /* Полупрозрачный фон для карточек */
			--card-box-shadow: rgba(0,0,0,0.5);
			--border-color: #444;       /* Темная рамка */
			--link-color: #00ff66;      /* ссылок 00ff66 */
			--link-shadow-color: rgba(255,255,102,10.3);
			--text-color: #e0e0e0;      /* Светло-серый текст (не чисто белый, чтобы не слепило) */
			--clock-text-color: #00ff66;
			--clock-shadow-color: rgba(255,255,102,10.3);
			--clock-date-color: #aaa;
			--main-list-bg: #2a2a2a;
		}
		
        body { background-color: var(--bg-color); color: var(--text-color); font-family: sans-serif; padding: 40px; }
        
        /* Карточка данных */
        .info-card {
            background: var(--card-bg); 
			border: 1px solid var(--border-color); 
			border-radius: 8px;
            padding: 20px; 
			backdrop-filter: blur(5px); 
			box-shadow: 0 4px 15px var(--card-box-shadow);
            display: inline-flex; 
			align-items: flex-start; 
			gap: 20px; 
			margin-bottom: 30px;
			margin: 0 auto;  /* Центрирует список на странице */
			margin-left: auto;
			margin-right: auto;			
        }
        .info-card-center {
			/* Меняем display на flex или block */
			display: flex; 
			/* Автоматические отступы слева и справа центрируют блок */
			margin: 0 auto;  /* Центрирует список на странице */
			margin-left: auto;
			margin-right: auto;
            background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px;
            padding: 20px; backdrop-filter: blur(5px); box-shadow: 0 4px 15px var(--card-box-shadow);
            align-items: flex; gap: 20px; margin-bottom: 30px;
        }
        .widget-card-ip-clock {
            background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px;
            padding: 20px; backdrop-filter: blur(5px); box-shadow: 0 4px 15px var(--card-box-shadow);
            display: inline-flex; align-items: flex-start; gap: 20px; margin-bottom: 30px;
        }
		.widget-card-ip-clock-label{
			color: var(--clock-date-color);
			font-size: 14px;
			vertical-align:top;
		}
		.widget-card-ip-clock-value{
			color: var(--text-color);
			font-size: 14px;
			display: inline-block;
			max-width: 150px; /* Ширина подбирается так, чтобы "Internet" ушло на новую строку */
			line-height: 1.2;
		}
        .widget-card-wether {
            background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px;
            padding: 20px; backdrop-filter: blur(5px); box-shadow: 0 4px 15px var(--card-box-shadow);
            display: inline-flex;  gap: 20px; margin-bottom: 30px;
        }
		.theme-card {
			z-index: 1000;
			position: fixed;
			top: 0.2em;    /* Отступ равен размеру шрифта (обычно 16px) */
			right: 0.2em;
            background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px;
            padding: 10px; backdrop-filter: blur(5px); box-shadow: 0 4px 15px var(--card-box-shadow);
            display: inline-flex; align-items: flex-start; gap: 20px; margin-bottom: 30px; 
        }
        .avatar01 { border-radius: 50%; width: 80px; height: 80px; flex-shrink: 0; }


        /* КРАСИВЫЙ СЕЛЕКТОР */
 
        
        /* Стилизация списка ссылок с автоматической нумерацией */
        .main-list-wan { 
            list-style: none; 
			padding: 0;  
            counter-reset: li; /* Сбрасываем счетчик */
			width: 90%;      /* Занимает 90% от ширины родительского блока */
			margin: 0 auto;  /* Центрирует список на странице */
        }
        .main-list-wan li { 
            background: var(--main-list-bg); margin-bottom: 10px; padding: 15px 20px;
            border-radius: 4px; border-left: 5px solid var(--link-color);
            transition: background 0.2s;
            counter-increment: li; /* Увеличиваем счетчик */
            position: relative;
            padding-left: 50px; /* Отступ для номера */
        }
        /* Добавляем номер перед ссылкой */
        .main-list-wan li::before {
            content: counter(li) ".";
            position: absolute; left: 15px;
            color: var(--link-color); font-weight: bold; font-size: 20px;
        }
        .main-list-wan li:hover { background: var(--bg-hover-color); }
        .main-list-wan a { color: var(--text-color); text-decoration: none; font-size: 16px; font-weight: bold; display: block; }
		
		.h2-title{
			color: var(--link-color);
			font-size: 30px;
			font-weight: bold; 
            text-align: center;
            padding: 8px;
            margin-bottom: 20px;
        }
		.h3-title{
			color: var(--link-color);
			font-size: 18px;
			font-weight: bold; 

            padding: 0px;
            margin-bottom: 0px;
        }
		/* Ссылки */
		a {
			color: var(--link-color);
			text-decoration: none;
			font-weight: bold;
			font-size: 16px;
		}
		a:hover {
			text-decoration: underline;
			font-weight: bold;
			text-shadow: 0 0 10px var(--link-shadow-color);
			font-size: 16px;
		}

        /* Часы и дата */
        .widget-date { font-size: 14px; color: var(--clock-date-color); margin-bottom: 4px; font-weight: 500; }
        .widget-clock { font-family: monospace; font-size: 32px; font-weight: bold; color: var(--clock-text-color); text-shadow: 0 0 10px var(--clock-shadow-color); }
		
		
		/*==================   З А Г О Л О В О К =======================================================*/
		
		/* Карточки данных во всю ширину*/
		.info-card-wide {
			display: flex;             /* Включаем flex */
			justify-content: space-between; /* РАЗНОСИТ элементы по краям */
			align-items: center;       /* Выравнивает всё по вертикали */
			background: var(--card-bg);
			border: 1px solid var(--border-color);
			border-radius: 8px;
			padding: 20px;
			backdrop-filter: blur(5px);
			box-shadow: 0 4px 15px var(--card-box-shadow);
			margin-bottom: 30px;
			gap: 20px;
		}

		.left-group {
			display: flex;
			align-items: center;       /* Лого и текст в строке */
			gap: 15px;
		}
		
		/* Часы нужно чуть опустить/поднять */
		.right-clock {
			display: flex;
			align-items: flex-start;   /* Часы будут сверху в правой части */
			background: var(--card-bg);
			border: 1px solid var(--border-color);
			border-radius: 8px;
			padding: 20px;
			backdrop-filter: blur(5px);
			box-shadow: 0 4px 15px var(--card-box-shadow);
			
			gap: 20px;
			margin-bottom: 30px; 
		}
		.clock-text {font-family: monospace; font-size: 32px; font-weight: bold; color: var(--clock-text-color); text-shadow: 0 0 10px var(--clock-shadow-color);}
		
		table { 
			width: 100%;
			background: var(--card-bg);
			border: 1px solid var(--border-color); 
			border-radius: 8px;
			padding: 80px; backdrop-filter: blur(5px); 
			box-shadow: 0 4px 15px var(--card-box-shadow);
			margin-bottom: 30px;
		}
		/* Слева вертикальная полоска ячейки таблицы  ЗЕЛЁНАЯ */
		.indexcolname:hover {
			border-left: 5px solid var(--link-color);
		}
		/* Строки таблицы */
		tr:hover { 
			background-color: var(--bg-hover-color);
			border-left: 5px solid var(--border-color);
			}
		/* Ячейки */
		td { padding: 1px; border-bottom: 1px solid var(--border-color); background: var(--card-bg)}
		th { text-align: left; background: var(--card-bg); padding: 1px; }