* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #f0f0f0;
    background-image: url('../img/onboarding.jpg');
    background-repeat: no-repeat;
    /* Фиксируем фон, чтобы он не уезжал при прокрутке */
    background-attachment: fixed;
    /* Центрируем изображение */
    background-position: center center;
    /* Запрещаем повторение (плитку) */
    background-repeat: no-repeat;
    /* МАГИЯ: растягивает картинку так, чтобы заполнить всё пространство,
       сохраняя пропорции (лишнее просто обрежется) */
    background-size: cover;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}
.text-priv {font-size:28px; text-align:center;color: #C0C0C0}
#win-pass {
    display: flex;
    justify-content: center;
    /* Ваши правки: прижать к верху и добавить отступ */
    align-items: start;
    margin-top: 6vw;
   /* height: 100vh;*/
    width: 100%;
    color: #00FFFF;
}

/* Стилизуем все select и input, чтобы они были в одном стиле */
select[name="pol"],
input[type="text"],
input[type="password"] {
    width: 100%;             /* Растягиваем на всю ширину ячейки */
    padding: 8px 12px;       /* Добавляем внутренние отступы (высота и ширина) */
    font-size: 16px;         /* Увеличиваем размер текста */
    border: 1px solid #ccc;  /* Мягкая рамка */
    border-radius: 4px;      /* Скругляем углы */
    box-sizing: border-box;  /* Чтобы отступы не распирали ширину */
    background-color: white; /* Белый фон */
    outline: none;           /* Убираем синюю рамку при клике (по желанию) */
}
#email-input {
	width: 300px; /* Или 100%, чтобы растянуть по форме */
    padding: 5px;
}
/* Специально для select, чтобы он не казался плоским */
select[name="pol"] {
    cursor: pointer;
    height: 40px;            /* Фиксированная высота для солидности */
    appearance: none;        /* Убираем стандартную системную отрисовку (опционально) */
    /* Можно добавить свою иконку стрелочки, если убрали appearance */
}

/* Немного увеличим расстояние между строками таблицы для воздуха */
.pass-text td {
    padding: 10px 5px;
}
/* Общий стиль для активного состояния всех полей ввода и селекта */
input[type="text"],
input[type="password"],
select[name="pol"] {
    transition: all 0.3s ease; /* Плавный переход цвета и тени */
    outline: none;             /* Убираем стандартную синюю обводку браузера */
    border: 1px solid #ccc;
}

/* Эффект при клике (фокусе) */
input[type="text"]:focus,
input[type="password"]:focus,
select[name="pol"]:focus {
    border-color: #007bff;     /* Цвет рамки становится синим */
    background-color: #fff;    /* Фон всегда белый (убирает серый оттенок автозаполнения) */
    /* Добавляем мягкое свечение вокруг поля */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
    /* Немного увеличиваем контраст текста */
    color: #000;
}

/* Чтобы курсор в текстовых полях был заметнее */
input:focus {
    caret-color: #007bff;      /* Цвет самой мигающей палочки курсора */
}

/* Стиль для курсора при наведении на select, чтобы понятно было, что можно кликнуть */
select[name="pol"]:hover {
    cursor: pointer;
    border-color: #999;
}
@media (max-aspect-ratio: 1/1) {
    .pass-text td {
        font-size: 10vw;
        padding: 10px 0;
    }

    input {
        width: 12ch;
        font-size: 6vw;
        padding: 3vw;
        border: 1.2vw solid #000;
        border-radius: 3vw;
        font-weight: bold;
    }

    .key-ok {
        /* Убираем жесткую ширину, ставим минимальную */
        min-width: 18vw;
        width: auto;
        height: 18vw;
        font-size: 5vw; /* Чуть уменьшил, чтобы длинные слова влезали */
        border: 1vw solid #000;
        /* Вместо 50% делаем скругление как у инпута */
        border-radius: 9vw;
        margin-left: 20px;
        padding: 0 4vw; /* Отступы по бокам для текста */
        white-space: nowrap; /* Чтобы текст не переносился */
    }
}
/* --- ВАРИАНТ ДЛЯ ПК (Ландшафт) --- */
@media (min-aspect-ratio: 1/1) {
    .pass-text td {
        font-size: 24px;
        padding: 5px 10px;
    }

    input {
        width: 160px;
        font-size: 22px;
        padding: 8px;
        border: 2px solid #000;
        border-radius: 8px;
    }

    .key-ok {
        min-width: 60px;
        width: auto;
        height: 60px;
        font-size: 14px; /* Немного меньше для длинных слов */
        border: 2px solid #000;
        border-radius: 30px; /* Овальные края */
        cursor: pointer;
        padding: 0 15px;
        white-space: nowrap;
    }
}
.row-clip-item {
  padding: 15px;
  border: 1px solid #00FF00;
  cursor: pointer;
}
.row-clip-item:hover { background: #f9f9f9;}
/* Стиль всплывашки */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
}
/* Анимация появления/исчезновения */
.fade-enter-active, .fade-leave-active { transition: opacity .5s; }
.fade-enter, .fade-leave-to { opacity: 0; }

/* Контейнер для поля и глаза */
.pass-wrapper {
	position: relative;
	display: inline-block; /* Чтобы ширина была как у input */
	width: 100%;           /* Или конкретный размер, например 200px */
	vertical-align: middle;
}
/* Само поле ввода */
#pass-input {
	width: 100%;           /* Занимает всю ширину обертки */
    box-sizing: border-box; /* Чтобы padding не раздувал ширину */
    padding-right: 35px !important; /* Место для глаза внутри рамки */
    height: 30px;          /* Фиксированная высота, чтобы не "прыгало" */
}

/* Иконка глаза */
#toggle-pass {
	position: absolute;
    right: 10px;           /* Отступ от правого края ВНУТРИ рамки */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    z-index: 10;
    line-height: 1;        /* Чтобы иконка не смещалась по вертикали */
}