/* ===== AUTH ===== */
.auth {
  padding: 140px 0;
  background: var(--bg-soft);
  text-align: center;
}

.auth__content{
  max-width: 520px;
  margin: 0 auto;
}

/* switch + form однакова ширина */
.auth__switch,
.auth__form{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* щоб 2 верхні кнопки були такої ж ширини як submit */
.auth__switch{
  display: flex;
  flex-direction: column; /* важливо: тоді вони 100% як submit */
  gap: 12px;
  margin-top: 18px;
}

/* поля теж робимо “по сітці”, щоб виглядало ідеально */
.auth__form{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.auth__form input{
  width: 100%;
  height: var(--ui-btn-h);
  padding: 0 18px;
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  box-sizing: border-box;
}

/* 2 кнопки в signin (Sign in / Create account) */
.auth__switch .btn{
  width: 100%;
  min-height: var(--ui-btn-h);
  padding: 0 18px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* submit теж такий самий */
.auth__form .btn{
  width: 100%;
  min-height: var(--ui-btn-h);
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   AUTH – FIX: inputs == buttons (same width/height everywhere)
   Paste at the VERY END of pages.css
   ========================================================= */

.auth__content{
  max-width: 520px;
  margin: 0 auto;
  padding: 0 8px;           /* однаковий “внутрішній” відступ для ВСЬОГО */
  text-align: center;
}

/* прибираємо різні paddings які робили input вужчим */
.auth__switch,
.auth__form{
  width: 100%;
  margin: 0;
  padding: 0;              /* <-- ключовий фікс */
  max-width: 100%;
}

.auth__switch{
  display: flex;
  flex-direction: column;  /* щоб 2 кнопки були 100% як submit */
  gap: 12px;
  margin-top: 18px;
}

.auth__form{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

/* inputs */
.auth__form input{
  width: 100%;
  height: var(--ui-btn-h);     /* та сама висота що й кнопки */
  padding: 0 18px;             /* такий самий горизонт padding */
  border-radius: 4px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  box-sizing: border-box;
}

/* buttons (both top switch + submit) */
.auth .btn{
  width: 100%;
  height: var(--ui-btn-h);
  padding: 0 18px;
}

/* iOS: щоб не зумило input при фокусі */
@media (max-width: 480px){
.auth__form input{ 
  font-size: 16px;
 }

.auth__content{ 
  padding: 0 6px;
 }

 /* якщо на мобілці хочеш дві верхні кнопки в стовпчик */
.auth__switch{
  flex-direction: column;
  }

.auth {
  padding: 72px 0; 
}

  /* auth form — ширше, і кнопки зручні */
.auth__form {
  max-width: 100%;
  padding: 0 2px;
}  

.auth__form input{
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
}

.auth__switch {
  flex-direction: column;
  align-items: stretch;
}

.auth__switch .btn {
  width: 100%;
}
}

@media (max-width: 768px){
.auth__switch{
  flex-direction: column;
  }

.auth h1 { 
  font-size: 34px; 
    }

.auth {
  padding: 90px 0; 
}

/* Forms: max-width + comfy paddings */
.auth__form{
  max-width: 520px;
  width: 100%;
  padding: 0 8px;
}
}

/* Auth message */
#auth-msg {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}

#auth-msg[data-kind="error"] { color: #c62828; }
#auth-msg[data-kind="ok"] { color: #2e7d32; }