/* style.css */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono&display=swap");

body {
    background-color: #f4f7f6; /* Светло-серый фон */
    color: #334E68; /* Темно-сине-серый текст для лучшей читаемости */
    font-family: "Roboto", sans-serif; /* Более универсальный шрифт для основного текста */
}

.generator {
    background-color: #ffffff;
    width: 90%; /* Адаптивная ширина */
    max-width: 350px; /* Увеличенная максимальная ширина для лучшей компоновки */
    margin: 5% auto; /* Более адаптивное вертикальное расстояние */
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Более заметная тень для создания глубины */
}

div.password {
    display: grid;
    grid-template-columns: 1fr auto; /* Улучшенная компоновка колонок */
    gap: 12px; /* Увеличенное расстояние между элементами */
    border-radius: 12px;
    overflow: hidden;
}

div.password input {
    padding: 8px 12px;
    background-color: #eef1f4; /* Светлее фон для ввода */
    border: 2px solid #dfe3e8; /* Тонкая граница */
    color: #334E68;
    border-radius: 6px; /* Скругленные углы для полей ввода */
}

button {
    background-color: #4caf50;
    color: #ffffff;
    text-transform: uppercase;
    padding: 6px 18px;
    border: 0;
    border-radius: 8px; /* Слегка больший радиус для кнопок */
    transition: background-color 0.3s, transform 0.2s; /* Добавление трансформации при переходе */
}

button:hover, button:focus {
    background-color: #367c39;
    transform: translateY(-2px); /* Небольшой эффект подъема при наведении */
}

div.password button {
    border-radius: 0 6px 6px 0; /* Скругленность только с правой стороны */
}

div.range {
    margin: 12px 0;
    display: grid;
    grid-template-columns: 1fr auto;
}

div.range span {
    background-color: #eef1f4;
    padding: 12px;
    margin-left: 20px;
    min-width: 40px; /* Немного больше для лучшей видимости */
    text-align: center;
    border-radius: 12px; /* Согласованное скругление */
}

div.options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Улучшенная адаптивная сетка */
    gap: 12px;
}

div.options label {
    display: block;
    background-color: #eef1f4;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    font-family: "Roboto Mono", monospace; /* Моноширинный шрифт для опций для дифференциации */
}

button.generate {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
}

h1 {
    text-align: center;
    color: #4caf50;
    font-family: "Roboto", sans-serif; /* Согласованный шрифт */
    margin-bottom: 20px; /* Добавлено пространство под заголовок */
}