body {margin: 0 auto;font-size:medium;line-height:1.3;max-width:550px;background-color:#000000;color:#ffffff;}
body {
  font-family: 'Roboto', sans-serif; /* Используем новый шрифт */
  font-size: 16px; /* Базовый размер шрифта */
  line-height: 1.6; /* Межстрочный интервал для лучшей читаемости */
  overflow-y: scroll;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body,input,select,textarea{font-family: 'Roboto', sans-serif;}
h1,h2,h3,h4,form,div,span,input,select,textarea,p{margin: 0;padding:0;}
h1,h2 {font-size: medium;color:#ff6600;padding:2px 0;}
h2 {font-weight:normal;}
a:link,a:active,a:visited {text-decoration:none;color:#dbbb63;}
a:hover {text-decoration:none;color:#dbbb63;}
ul{padding: 5px 0 5px 20px;margin: 0;}
input,select,textarea{border: 1px solid gray;color:#000000; background-color:#d8d8d8;}
input, textarea {width:90%;}
input {
  width: 100%;
        height: 20px; /* Увеличиваем высоту для имитации textarea */
        padding: 15px;
        font-size: 18px;
        border: 2px solid #5a666e;
        background-color: #212529;
        color: #f1f1f1;
        box-sizing: border-box; /* Это важно, чтобы padding не увеличивал общую ширину */
        resize: vertical; /* Позволяем изменять размер только по вертикали, как у textarea */
        border-radius: 5px; /* Скругление углов */
        font-family: 'Roboto', sans-serif;
}
div img,h1 img,h2 img,a img,span img,img {vertical-align:middle;}
div {margin: 0px 0px 0px 0px;}
ul,li {list-style:none; margin:0; padding:0;}
em{font-style:normal;}
hr{padding:0;margin:6px 0;height:0;color:#0B0B61;background-color:#0B0B61;border-top:none;border-bottom:#0B0B61 solid 1px;}
table {border-collapse:collapse;word-wrap: break-word;}
table.bordered td {border: 1px solid #4c4c4c;}
.body {
	overflow-x:hidden;margin: 0px 0px 0px 0px;background:rgba(0,0,0,0.7);
	/* Текущие стили */
	background-color: #2e3436;
	border-color: #f7f7f7;
	color: #f7f7f7;
	padding: 15px; /* Увеличиваем внутренние отступы */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Добавляем мягкую тень */
	/*border: 1px solid #4a5459;  Обновляем рамку, чтобы она сочеталась с тенью */
}
.body {
  flex-grow: 1;
}
.small{font-size:80%;}
.notify {color:#FFF559;}
.energy {color:#FA5858;}
.health {color:#FF9999;}
.minor {color: gray;}
.minor2 {font-size:80%;color: gray;}
.money {color:#CC9900;}
.info {color: #6FCD72;}
.admin {color: #398DFA;}
.mod {color: #00CC00;}
.level {font-size:80%;color:#7cfc00;}
a.info {color: #6FCD72;}
a.info:visited {color: #6FCD72;}
a.notify {color:#FFF559;}
a.notify:visited {color:#FFF559;}
a.minor {color: gray;}
a.minor:visited{color: gray;}
a.admin {color: #398DFA;}
a.admin:visited {color: #398DFA;}
.hr {margin: 5px;}
div.hr2 {height: 2px;border: #353535;background-color: #4a5459;
  border-radius: 2px;}
.hr3 {margin: 3px 0;vertical-align:top;}
.hr3:hover {
	background-color:#3e4448;
}
.hr4 {
  height: auto; /* Снимаем фиксированную высоту */
  padding: 10px 15px; /* Добавляем внутренние отступы сверху, снизу и по бокам */
  margin: 10px 0;
  display: block;
  align-items: center;
  background-color: #4a5459;
  border-radius: 5px;
}
div.hr4:hover {
	background-color:#3e4448;
}
div.hr4 img {
	padding: 0px 0px 0px 0px;
}
div.gray {background-color:#353535;}
img.port {float:left;margin-right:4px;margin-bottom:4px;}
.expline {margin: 0px 0px 0px 0px;height:2px;background-color:#FFF559;}
.button{
	background-color: #555555;
	color: white;
	padding: 2px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease; /* Добавляем плавный переход */
}
.button{
  height: 32px; /* Немного меньше, чем у поля, но все еще крупная */
        background-color: #555555; /* Пример цвета */
        color: white;
        font-weight: bold;
        cursor: pointer; /* Делаем курсор "рукой" */
        border: none; /* Убираем стандартную границу */
}
.button:hover {
  background-color: #777777; /* Цвет кнопки при наведении */
  transform: translateY(-2px); /* Слегка поднимаем кнопку */
}
/* Эффект при нажатии */
.button:active {
  background-color: #444444; /* Цвет кнопки при нажатии */
  transform: translateY(0); /* Возвращаем кнопку на место */
}

.input, textarea {
  /* Текущие стили */
  background-color: #2e3436;
  color: #f7f7f7;
  border: 1px solid #4a5459;
  border-radius: 5px;
  padding: 10px;
  width: 100%; /* Убедимся, что занимает всю ширину */
  box-sizing: border-box; /* Важно, чтобы padding и border не увеличивали ширину */
}

.input:focus, textarea:focus {
  outline: none; /* Убираем стандартную синюю рамку при фокусе */
  border-color: #92e624; /* Делаем рамку акцентного цвета */
}
table {
  width: 90%; /* Таблица занимает всю доступную ширину */
  border-collapse: collapse; /* Объединяем границы ячеек */
  border-radius: 8px; /* Закругляем углы */
  overflow: hidden; /* Обрезаем всё, что выходит за пределы, чтобы углы были ровными */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Добавляем тень */
}
td {
  color: #dcdcdc; /* Светло-серый текст */
}

.navbar {
  overflow: hidden;
  align-self: center;
  position: sticky; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  z-index: 1000;
  margin: 0px 0px 0px 1px;
  border-top: 2px solid  #4a5459;
	/*border: 1px solid #4a5459;  Обновляем рамку, чтобы она сочеталась с тенью */
}

.navbarDown {
  overflow: hidden;
  position: sticky; /* Set the navbar to fixed position */
  bottom: 0; /* Position the navbar at the top of the page */
  z-index: 1000;
  border-bottom: 2px solid  #4a5459;
	/*border: 1px solid #4a5459; /* Обновляем рамку, чтобы она сочеталась с тенью */
  background-color:#353535;
  margin-top: auto;
}

.downLinks {
  background-color: #2e3436;
  position: sticky;
  bottom: 82px;
  z-index: 1000;
  overflow: hidden;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0px 15px 0px 15px;
}

/* --- Стили для неблокирующего плавающего окна (Non-Modal Dialog) --- */
    #floating-notification {
        position: fixed; /* Делаем окно плавающим, оно не будет блокировать прокрутку основного контента */
        top: 10vh; /* Отступ сверху */
        left: 50%;
        transform: translateX(-50%); /* Центрируем по горизонтали */
        width: 70%; /* Ширина на мобильных устройствах */
        max-width: 300px; /* Ограничиваем максимальную ширину */
        z-index: 2000; /* Обеспечиваем отображение поверх всех элементов (например, .navbar имеет z-index: 1000) */
        padding: 15px;
        border: 2px solid #ff6600; /* Акцентная рамка (цвет заголовков из вашего CSS) */
        background-color: #150305; /* Темный фон */
        color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        text-align: center;
        line-height: 1.4;
        /* display: none; <--- Если хотите, чтобы окно было скрыто по умолчанию и показывалось по событию */
        display: block; /* Показываем его сразу для демонстрации */
    }

    #floating-notification .notify {
        display: inline-block;
        margin: 5px 5px 0 5px;
        padding: 2px 5px;
    }

    .close-btn {
        font-size: 1.2em;
        font-weight: bold;
        padding: 3px 10px 3px 10px;
        cursor: pointer;
        color: #dbbb63; /* Цвет ссылок */
        text-decoration: none;
        border: 2px solid #444240;
        border-radius: 8px;
    }