body { font-family: Arial, sans-serif; max-width: 800px; margin: 20px auto; padding: 20px; }

        .result-box { background: #f4f4f9; padding: 15px; border-radius: 8px; margin-top: 20px; }

        .number { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; 

                  background: #005bff; color: white; border-radius: 50%; margin: 5px; font-weight: bold; }

        .bonus-number { background: #ff5722; }

        button { padding: 10px 20px; font-size: 16px; cursor: pointer; background: #28a745; color: white; border: none; border-radius: 5px; }

        button:disabled { background: #ccc; }

        #status { color: #666; font-style: italic; margin-top: 10px; }

        .error { color: red; font-weight: bold; }

		

		.probability-bar-container {

            margin: 8px 0;

            display: flex;

            align-items: center;

            gap: 10px;

        }



        .probability-number {

        font-weight: bold;

        min-width: 30px;

        text-align: center;

        }



        .probability-bar-bg {

            flex: 1;

            height: 25px;

            background: #e0e0e0;

            border-radius: 4px;

            overflow: hidden;

            position: relative;

        }



        .probability-bar-fill {

            height: 100%;

            background: linear-gradient(90deg, #005bff 0%, #00c6ff 100%);

            border-radius: 4px;

            transition: width 0.5s ease;

            display: flex;

            align-items: center;

            justify-content: flex-end;

            padding-right: 8px;

            color: white;

            font-size: 12px;

            font-weight: bold;

            min-width: 40px;

        }



        .probability-bar-fill.hot {

            background: linear-gradient(90deg, #ff5722 0%, #ff9100 100%);

        }



        .probability-bar-fill.medium {

            background: linear-gradient(90deg, #00c6ff 0%, #00ff88 100%);

        }



        .probability-percent {

            min-width: 50px;

            text-align: right;

            font-size: 13px;

            color: #333;

        }

		

		/* === FOOTER === */

.site-footer {

    margin-top: 40px;

    padding: 30px 20px;

    background: linear-gradient(135deg, #6eea66 0%, #764ba2 100%);

    color: white;

    text-align: center;

    border-radius: 8px 8px 0 0;

}



.footer-content a {

    color: #fff3cd;

    text-decoration: none;

    font-weight: bold;

    transition: color 0.3s;

}



.footer-content a:hover {

    color: #ffd700;

    text-decoration: underline;

}



/* === МОДАЛЬНОЕ ОКНО (переименованные классы) === */

.disclaimer-window {

    display: none;

    position: fixed;

    z-index: 1000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0, 0, 0, 0.7);

    animation: fadeIn 0.3s;

}



@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



.disclaimer-content {

    background-color: #fefefe;

    margin: 5% auto;

    padding: 30px;

    border: 1px solid #888;

    width: 90%;

    max-width: 800px;

    border-radius: 10px;

    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);

    animation: slideDown 0.4s;

    max-height: 85vh;

    overflow-y: auto;

}



@keyframes slideDown {

    from {

        transform: translateY(-50px);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}



.close-modal {

    color: #aaa;

    float: right;

    font-size: 32px;

    font-weight: bold;

    cursor: pointer;

    transition: color 0.3s;

    line-height: 20px;

}



.close-modal:hover,

.close-modal:focus {

    color: #000;

    text-decoration: none;

}



.disclaimer-content h2 {

    color: #667eea;

    margin-bottom: 20px;

    border-bottom: 2px solid #667eea;

    padding-bottom: 10px;

}



.disclaimer-content h3 {

    color: #764ba2;

    margin-top: 25px;

    margin-bottom: 10px;

}



.disclaimer-content p {

    line-height: 1.6;

    color: #333;

    margin-bottom: 10px;

}



.disclaimer-content ul {

    margin-left: 20px;

    line-height: 1.8;

}



.disclaimer-content li {

    margin-bottom: 5px;

}



/* === АДАПТИВНОСТЬ === */



/* Планшеты и маленькие десктопы */

@media screen and (max-width: 1024px) {

    body {

        padding: 15px;

    }

    

    .result-box {

        padding: 12px;

    }

}



/* Мобильные устройства */

@media screen and (max-width: 768px) {

    body {

        padding: 10px;

        font-size: 14px;

    }

    

    h2 {

        font-size: 1.5em;

    }

    

    .number {

        width: 35px;

        height: 35px;

        line-height: 35px;

        font-size: 14px;

        margin: 3px;

    }

    

    button {

        width: 100%;

        padding: 12px;

        font-size: 15px;

    }

    

    .probability-bar-container {

        flex-direction: column;

        align-items: stretch;

        gap: 5px;

    }

    

    .probability-number {

        text-align: left;

        font-size: 14px;

    }

    

    .probability-percent {

        text-align: left;

        font-size: 12px;

    }

    

    .probability-bar-bg {

        height: 30px;

    }

    

    .probability-bar-fill {

        font-size: 11px;

        padding-right: 5px;

    }

    

    .disclaimer-content {

        width: 95%;

        margin: 10% auto;

        padding: 20px;

    }

    

    .disclaimer-content h2 {

        font-size: 1.3em;

    }

    

    .disclaimer-content h3 {

        font-size: 1.1em;

    }

    

    .site-footer {

        padding: 20px 15px;

        font-size: 13px;

    }

}



/* Очень маленькие экраны (старые телефоны) */

@media screen and (max-width: 480px) {

    .number {

        width: 30px;

        height: 30px;

        line-height: 30px;

        font-size: 12px;

    }

    

    .result-box {

        padding: 10px;

        font-size: 13px;

    }

    

    .disclaimer-content {

        padding: 15px;

    }

    

    .disclaimer-content h2 {

        font-size: 1.2em;

    }

}

/* Кнопка доната */

.donate-button {

  background-color: #ffdd00;

  color: #000;

  padding: 0.6em 1em;

  font-weight: bold;

  border-radius: 8px;

  text-decoration: none;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  transition: transform 0.2s;

}

.donate-button:hover {

  transform: scale(1.05);

}



/* === ИСТОРИЯ ПРОГНОЗОВ === */

.history-item {

    padding: 12px;

    margin: 10px 0;

    background: #f8f9fa;

    border-left: 4px solid #667eea;

    border-radius: 5px;

    transition: transform 0.2s;

}



.history-item:hover {

    transform: translateX(5px);

    background: #eef1f8;

}



.history-item-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;

    font-size: 13px;

    color: #666;

}



.history-item-numbers {

    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    align-items: center;

}



.history-number {

    display: inline-block;

    width: 32px;

    height: 32px;

    line-height: 32px;

    text-align: center;

    background: #005bff;

    color: white;

    border-radius: 50%;

    font-weight: bold;

    font-size: 13px;

}



.history-bonus {

    background: #ff5722;

    margin-left: 8px;

}



.history-separator {

    color: #999;

    margin: 0 5px;

    font-size: 18px;

}



.history-empty {

    text-align: center;

    color: #999;

    padding: 20px;

    font-style: italic;

}



/* Адаптивность для истории */

@media screen and (max-width: 768px) {

    .history-item {

        padding: 10px;

    }

    

    .history-number {

        width: 28px;

        height: 28px;

        line-height: 28px;

        font-size: 12px;

    }

    

    .history-item-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 5px;

    }

}



/* === УПРАВЛЕНИЕ ТЕМПЕРАТУРОЙ === */

.control-group {

    margin: 20px 0;

    padding: 15px;

    background: #f8f9fa;

    border-radius: 8px;

}



.control-group label {

    display: block;

    margin-bottom: 10px;

    font-size: 15px;

}



input[type="range"] {

    width: 100%;

    height: 8px;

    border-radius: 5px;

    background: #ddd;

    outline: none;

    -webkit-appearance: none;

    appearance: none;

    cursor: pointer;

}



input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    cursor: pointer;

    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

    transition: transform 0.2s;

}



input[type="range"]::-webkit-slider-thumb:hover {

    transform: scale(1.2);

}



input[type="range"]::-moz-range-thumb {

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    cursor: pointer;

    border: none;

    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}



.temperature-scale {

    display: flex;

    justify-content: space-between;

    margin-top: 8px;

    font-size: 12px;

    color: #888;

}



/* Адаптивность */

@media screen and (max-width: 768px) {

    .control-group {

        padding: 12px;

    }

    

    .control-group label {

        font-size: 14px;

    }

    

    #temperature-value, #history-depth-value {

        font-size: 16px;

    }

}



/* Базовый стиль для ссылки */

.disclaimer-link {

    color: #2a522d;          /* Зелёный цвет (можно также написать просто "green" или "#00ff00") */

    text-decoration: none;   /* Убираем стандартное подчёркивание ссылки */

    font-weight: bold;       /* Делаем текст жирным (по желанию) */

    transition: color 0.3s;  /* Плавное изменение цвета при наведении */

}



/* Стиль при наведении курсора мыши (hover) */

.disclaimer-link:hover {

    color: #1e7e34;          /* Более тёмный зелёный при наведении */

    text-decoration: underline; /* Возвращаем подчёркивание при наведении для удобства */

}



/* Стиль для уже посещённой ссылки (опционально, чтобы она не становилась фиолетовой) */

.disclaimer-link:visited {

    color: #2a522d;

}