/* =========================================================
   БАЗА (исходные стили из вашего файла)
   ========================================================= */

/* Основной стиль страницы */
body {
  font-family: 'Arial', sans-serif;
  background: none;         /* больше не используем /static/background.jpg */
  background-color: #ffffff; /* белый лист */
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}



/* Основной контейнер */
.container {
    background: rgba(255, 255, 255, 0.9); /* Прозрачный белый фон */
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Мягкая тень */
    max-width: 400px;
    width: 100%;
    text-align: center;
}

/* Заголовки */
h1 {
    color: #333;
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* Обычный текст */
p {
    color: #666;
    font-size: 16px;
    margin-bottom: 30px;
}

/* Стили для форм */
input[type="password"], input[type="text"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
    outline: none;
}

input[type="password"]:focus, input[type="text"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.button-group {
    display: flex; /* Используем flexbox для выравнивания */
    justify-content: space-between; /* Распределяем кнопки по обе стороны */
    margin-top: 20px; /* Отступ сверху */
}

.button-group .btn {
    flex: 1; /* Задаем ширину кнопок */
    margin: 0 10px; /* Отступ между кнопками */
}

.button-group .btn:first-child {
    margin-left: 0; /* Убираем отступ у первой кнопки */
}

.button-group .btn:last-child {
    margin-right: 0; /* Убираем отступ у последней кнопки */
}

/* Стили для разных кнопок */
button, .btn {
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    width: 100%;
    margin: 10px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Синяя кнопка для основных действий */
.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
}

/* Зеленая кнопка для положительных действий */
.btn-success {
    background-color: #28a745;
    color: white;
}

.btn-success:hover {
    background-color: #218838;
}

/* Стили для кнопки "Назад" */
.btn-secondary {
    background-color: #6c757d; /* Серый фон */
    color: white; /* Белый текст */
    border: none; /* Убираем рамку */
    padding: 12px 20px; /* Отступы */
    border-radius: 8px; /* Скругление углов */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s ease; /* Плавный переход при наведении */
}

.btn-secondary:hover {
    background-color: #5a6268; /* Цвет при наведении */
}


/* Голубая кнопка для информационных действий */
.btn-info {
    background-color: #17a2b8;
    color: white;
}

.btn-info:hover {
    background-color: #138496;
}

/* Флеш-сообщения */
.alert {
    padding: 15px;
    background-color: #f44336;
    color: white;
    border-radius: 5px;
    margin-bottom: 20px;
}

.alert-success {
    background-color: #4CAF50;
}

/* Стили для футера */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333; /* Однородный темный фон */
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-family: 'Arial', sans-serif;
}

.footer a {
    color: #00d1b2; /* Акцентный цвет для ссылок */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #00ffcc; /* Цвет при наведении */
}

.footer p {
    margin: 5px 0;
    font-size: 14px;
}

/* Минимальные иконки для контактов */
.footer .fa {
    margin: 0 10px;
    font-size: 18px;
    color: #00d1b2;
    transition: color 0.3s ease;
}

.footer .fa:hover {
    color: #00ffcc; /* Цвет при наведении на иконки */
}

.footer .fa-envelope {
    background: #007bff;
    color: white;
}

.footer .fa-phone {
    background: #28a745;
    color: white;
}

.toast {
    position: fixed;
    top: 20px;
    right: -400px; /* За пределами экрана */
    width: 300px;
    background-color: #f44336; /* Красный цвет для ошибок */
    color: white;
    padding: 16px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: right 0.5s ease, opacity 0.5s ease;
}

.toast.show {
    right: 20px; /* Позиция справа */
    opacity: 1;
}

.toast.hide {
    right: -400px; /* Скрываем сообщение */
    opacity: 0;
}

/* Стиль для успешных всплывающих сообщений */
#success-toast {
    position: fixed;
    top: 20px;
    right: 20px; /* Позиция справа */
    width: 300px;
    background-color: #4CAF50; /* Зеленый фон */
    color: white;
    padding: 16px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: right 0.5s ease, opacity 0.5s ease;
}

#success-toast.show {
    opacity: 1;
    right: 20px; /* Позиция при показе */
}

#success-toast.hide {
    right: -400px; /* За границей экрана */
    opacity: 0;
}

/* Адаптивные стили для мобильных устройств */
@media only screen and (max-width: 1200px) {
    .container {
        max-width: 700px;
        padding: 35px;
    }

    h1 {
        font-size: 26px;
    }

    p {
        font-size: 15px;
    }

    .footer {
        font-size: 13px;
    }

    button, .btn {
        font-size: 15px;
        padding: 10px;
    }
}

@media only screen and (max-width: 992px) {
    .container {
        max-width: 550px;
        padding: 30px;
    }

    h1 {
        font-size: 24px;
    }

    p {
        font-size: 14px;
    }

    .footer {
        font-size: 12px;
    }

    button, .btn {
        font-size: 14px;
        padding: 9px;
    }
}

@media only screen and (max-width: 768px) {
    .container {
        max-width: 450px;
        padding: 25px;
    }

    h1 {
        font-size: 22px;
    }

    p {
        font-size: 13px;
    }

    .footer {
        font-size: 11px;
    }

    button, .btn {
        font-size: 13px;
        padding: 8px;
    }
}

@media only screen and (max-width: 576px) {
    .container {
        max-width: 350px;
        padding: 20px;
    }

    h1 {
        font-size: 20px;
    }

    p {
        font-size: 12px;
    }

    .footer {
        font-size: 10px;
    }

    button, .btn {
        font-size: 12px;
        padding: 7px;
    }
}

@media only screen and (max-width: 400px) {
    .container {
        max-width: 300px;
        padding: 15px;
    }

    h1 {
        font-size: 18px;
    }

    p {
        font-size: 11px;
    }

    .footer {
        font-size: 9px;
    }

    button, .btn {
        font-size: 11px;
        padding: 6px;
    }
}

.btn-back {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
    transition: background-color 0.3s ease;
    display: inline-block;
}

.btn-back:hover {
    background-color: #0056b3;
}

/* =========================================================
   ДОБАВЛЕННАЯ МАКСИМАЛЬНАЯ АДАПТИВНОСТЬ (НЕ ЛОМАЕТ СТАРОЕ)
   ========================================================= */

/* Универсальная коробочная модель и масштаб шрифта в iOS */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Вместо "жёсткого" 100vh используем динамический вьюпорт и запас по высоте */
body {
    min-height: 100dvh;
    height: 100dvh; /* фоллбек для старых браузеров */
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
    padding-top: max(0px, env(safe-area-inset-top));
    /* чтобы контент не перекрывался фикс-футером на маленьких экранах */
    padding-bottom: max(0px, calc(env(safe-area-inset-bottom) + 60px));
    background-attachment: fixed;
}

/* Гладкая ширина контейнера + адаптивные внутренние отступы без изменения вашей сетки */
.container {
    width: min(100% - 32px, 400px); /* визуально держим поля по бокам */
    padding: clamp(16px, 3vw, 40px);
    border-radius: 15px; /* сохранили ваш радиус */
}

/* Флюидная типографика с сохранением верхних границ ваших размеров */
h1 {
    font-size: clamp(18px, 2.2vw + 1rem, 28px);
}

p {
    font-size: clamp(12px, 1vw + 0.5rem, 16px);
    line-height: 1.5;
}

/* Кнопки и элементы форм: лучшее поведение на узких экранах и для тача */
button, .btn {
    font-size: clamp(12px, 1.1vw + 0.5rem, 16px);
    padding: clamp(10px, 1.2vw + 0.3rem, 12px);
    touch-action: manipulation;
}

input[type="password"], input[type="text"] {
    font-size: clamp(14px, 1vw + 0.5rem, 16px);
    padding: clamp(10px, 1vw + 0.3rem, 12px);
}

/* Группа кнопок: аккуратный перенос, отсутствие «ломающихся» межкнопочных отступов */
.button-group {
    gap: 12px;
    flex-wrap: wrap;
}
.button-group .btn {
    margin: 0;          /* переходим с margin на gap, чтобы не ломался перенос */
    min-width: 0;       /* избегаем переполнения */
}

/* На очень узких экранах складываем кнопки в столбец для удобного тапа */
@media (max-width: 480px) {
    .button-group { flex-direction: column; }
    .button-group .btn { width: 100%; }
}

/* Медиа-шаг для сверхмалых экранов (старые 320px устройства) */
@media (max-width: 360px) {
    .container { width: min(100% - 20px, 320px); }
}

/* Футер: защита от перекрытия контента и безопасные зоны */
.footer {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    line-height: 1.3;
}

/* На телефонах делаем футер нефиксированным (если контента много) */
@media (max-width: 768px) {
    .footer {
        position: static;
        width: 100%;
        margin-top: 16px;
    }
    body {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        align-items: stretch; /* контейнер тянется по ширине */
    }
}

/* Режим «меньше анимаций» — уважаем системные настройки пользователя */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Медиа-шаг для очень больших экранов: чтобы блок не был слишком маленьким */
@media (min-width: 1600px) {
    .container {
        max-width: 520px; /* чуть крупнее на 2K мониторах */
        padding: clamp(40px, 2vw, 56px);
    }
    h1 { font-size: clamp(28px, 1.6vw + 1rem, 36px); }
    p  { font-size: clamp(16px, 0.8vw + 0.5rem, 18px); }
}

/* Медиа-шаг по высоте: когда экран низкий (горизонт телефоны/малые ноутбуки) */
@media (max-height: 600px) {
    body { align-items: flex-start; }
    .container { margin-top: 24px; margin-bottom: 24px; }
}

/* Картинки/видео не вылезают за пределы контейнеров */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* Текст не вылазит из кнопок/полей, аккуратные переносы */
:where(h1, p, button, .btn, input) { word-break: break-word; }

/* Улучшение контрастности ссылок в футере при фокусе с клавиатуры */
.footer a:focus-visible {
    outline: 2px dashed currentColor;
    outline-offset: 3px;
}

/* --- FIX: не ломаем слова и кнопки --- */
:where(h1, p) {
  word-break: normal !important;      /* отменяем break-word */
  overflow-wrap: break-word;           /* переносим только при необходимости */
  white-space: normal;                 /* обычное поведение заголовков и абзацев */
}

button, .btn {
  word-break: keep-all !important;     /* не разбиваем слова внутри кнопок */
  overflow-wrap: normal;               /* не разрываем слова в середине */
  white-space: nowrap;                 /* держим текст кнопки в одну строку */
  text-overflow: ellipsis;             /* если вдруг текст слишком длинный */
  overflow: hidden;                    /* прячем излишек, без изменения дизайна */
}

/* На совсем узких экранах позволим кнопкам переноситься по словам,
   но НЕ по буквам — чтобы не было «столбика». */
@media (max-width: 360px) {
  button, .btn {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* --- FIX #1: на десктопе возвращаем исходные размеры шрифтов/отступов --- */
@media (min-width: 1024px) {
  h1 {
    font-size: 28px !important;   /* как в исходнике */
    line-height: 1.2;
  }
  p { font-size: 16px !important; }
  button, .btn {
    font-size: 16px !important;
    padding: 12px !important;
  }
  input[type="text"], input[type="password"] {
    font-size: 16px !important;
    padding: 12px !important;
  }
}

/* --- FIX #2: отменяем «укрупнение» для >1600px, чтобы не ломало переносы --- */
@media (min-width: 1600px) {
  .container { max-width: 400px !important; padding: 40px !important; }
  /* если хочется, можно чуть больше, но не менять шрифты */
  h1 { font-size: 28px !important; }
  p  { font-size: 16px !important; }
}

/* --- FIX #3: аккуратные переносы (чтобы не было «столбика») --- */
:where(h1, p) {
  word-break: normal !important;
  overflow-wrap: break-word;
  white-space: normal;
}
button, .btn {
  word-break: keep-all !important;
  overflow-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* На очень узких экранах позволим кнопкам переноситься по словам (не по буквам) */
@media (max-width: 360px) {
  button, .btn { white-space: normal; overflow-wrap: break-word; }
}

/* =========================================================
   ТЕТРАДНЫЙ ФОН — ПРО ВЕРСИЯ (всё без HTML)
   ========================================================= */

/* Цвета/параметры — легко настраивать в одном месте */
:root{
  --line-gap: 28px;             /* шаг голубых линий */
  --line-c: rgba(0,148,255,.22);
  --margin-c: rgba(255,64,128,.35);
  --watermark-c: rgba(0,0,0,.06);
  --diag-gap: 360px;            /* расстояние между диагоналями */
  --diag-angle: 75deg;          /* угол диагоналей */
  --margin-x: 82vw;             /* позиция красной линии */
  --paper: #fff;
  --diag-shift: 0px;            /* будет слегка анимироваться */
}

/* Базовый лист: линии, диагонали, красное поле, перфорация, зерно */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-3;
  background:
    /* 1) Лёгкое бумажное «зерно» (SVG шум) */
    url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.035'/></feComponentTransfer></filter>\<rect width='100%' height='100%' filter='url(#n)' fill='black'/></svg>") repeat,/* 2) Перфорация слева (повторяющаяся SVG-дырочка) */url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='16' height='44'>\<circle cx='8' cy='8' r='4' fill='rgba(0,0,0,0.06)'/>\</svg>")repeat-y left 18px top,
    /* 3) Голубые горизонтальные строки */
    repeating-linear-gradient(
      to bottom,
      var(--line-c) 0, var(--line-c) 1px,
      transparent 1px, transparent var(--line-gap)
    ),
    /* 4) Диагонали (мягкие широкие) — с лёгким «дыханием» */
    repeating-linear-gradient(
      var(--diag-angle),
      var(--line-c) 0, var(--line-c) 2px,
      transparent 2px, transparent var(--diag-gap)
    ),
    /* 5) Красная вертикальная линия — поле */
    linear-gradient(
      to right,
      transparent var(--margin-x),
      var(--margin-c) var(--margin-x),
      var(--margin-c) calc(var(--margin-x) + 2px),
      transparent calc(var(--margin-x) + 2px)
    ),
    var(--paper);
  background-size:
    200px 200px,          /* зерно */
    16px 44px,            /* перфорация */
    auto auto,            /* строки */
    auto auto,            /* диагонали */
    auto auto,            /* поле */
    auto;
  /* Позиционируем слои; диагонали слегка смещаем через переменную */
  background-position:
    left top,                         /* зерно */
    left 18px top,                    /* перфорация */
    left top,                         /* строки */
    calc(var(--diag-shift)) top,      /* диагонали (аним.) */
    left top,                         /* поле */
    left top;
  background-attachment: fixed;
}

/* Водяной знак «ЭпиШкола» (крупный, мягкий) */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='1480' height='320'>\
<rect width='100%' height='100%' fill='transparent'/>\
<g font-family='Arial, sans-serif' font-size='220' fill='rgba(0,0,0,0.06)'>\
<text x='140' y='240'>ЭпиШкола</text>\
</g>\
</svg>");
  background-repeat:repeat;
  background-size:1480px 320px;
  background-position:0 10px;
  pointer-events:none;
}

/* Логотип (сверху слева) — без HTML */
html::before{
  content:"";
  position:fixed;
  top:18px; left:24px;
  width:clamp(120px,14vw,200px);
  aspect-ratio:670/208;
  background:url("/static/img/logo.png") no-repeat center/contain;
  z-index:10; pointer-events:none; user-select:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.15));
}

/* Скрепка (внизу справа) — без HTML */
html::after{
  content:"";
  position:fixed;
  right:24px; bottom:24px;
  width:clamp(68px,8vw,120px);
  aspect-ratio:255/237;
  background:url("/static/img/Group.png") no-repeat center/contain;
  z-index:10; pointer-events:none; user-select:none;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.20));
  transform:rotate(6deg);
}

/* Небольшая «жизнь»: очень медленное дыхание диагоналей */
@keyframes diagBreath{
  0%{   --diag-shift: 0px; }
  50%{  --diag-shift: 30px; }
  100%{ --diag-shift: 0px; }
}
body::before{ animation: diagBreath 40s linear infinite; }

/* Учитываем системные настройки на уменьшение анимаций */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}

/* Контент читабельнее на новом фоне */
.container{
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(1.2px);
  border-radius: 15px;
}

/* Футер на мобильных не перекрывает контент */
@media (max-width: 768px){
  .footer{ position: static; }
}


.toast-container{
  position:fixed; right:18px; top:18px;
  display:flex; flex-direction:column; gap:10px;
  z-index:9999;
}
.toast-item{
  padding:12px 14px;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  background:#222; color:#fff;
  max-width:320px;
  opacity:0; transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease;
  font-size:14px;
}
.toast-item.show{ opacity:1; transform:translateY(0); }
.toast-item.hide{ opacity:0; transform:translateY(-8px); }

.toast-error{ background:#e53935; }
.toast-success{ background:#2e7d32; }
.toast-info{ background:#1976d2; }