* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  /* defaults – will be overridden by JS from config.js */
  --brand-primary: #0b5fff;
  --brand-accent:  #1ec8a5;
  --brand-text:    #0f172a;
  --brand-bg:      #f2f2f2;
  --card-bg:       #9e9e9e;
  --button-bg:     #f8e437;
  --button-text:   #1d2008;
  --button-radius: 4px;
  --label-muted:   rgba(220, 220, 220, 0.849);
  --error:         rgba(255, 0, 0, 0.479);
  --error-focus:   rgba(255, 0, 0, 0.774);
  --input-border:  #ccc;
  --shadow-1:      0 0 10px rgba(0,0,0,0.15);
  --shadow-2:      0px 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-2h:     0px 4px 12px rgba(0, 0, 0, 0.3);
}

html, body {
  height: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  background-color: var(--brand-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-text);
}

.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 24px;
}

/* Card styling shared by all auth forms */
#signin-form,
#forgot-form,
#reset-form{
  width: 498px;
  background-color: var(--card-bg);
  padding: 48px 28px;
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.logo-container { text-align: center; margin-bottom: 6px; }
.logo-container img { width: 200px; max-width: 100%; }

.auth-title{
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  text-align: left;
}

.auth-subtitle{
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 12px;
}

.field-wrapper { position: relative; margin-bottom: 18px; }

input[type="email"],
input[type="password"]{
  width: 100%;
  padding: 12px 10px 12px 40px;
  border: none;
  border-bottom: 1px solid var(--input-border);
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  outline: none;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: 10px center;
}

/* SVG icons inline */
.email-wrapper input {
  background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></svg>');
}
.password-wrapper input {
  background-image: url('data:image/svg+xml;utf8,<svg fill="white" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M12 17c.55 0 1-.45 1-1s-.45-1-1-1 -1 .45-1 1 .45 1 1 1zm6-6V9c0-3.31-2.69-6-6-6S6 5.69 6 9v2H5c-.55 0-1 .45-1 1v9c.55 0 1-.45 1-1h14c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1h-1zm-8 0V9c0-2.21 1.79-4 4-4s4 1.79 4 4v2H10z"/></svg>');
}

/* Floating label */
.floating-label{
  position: absolute;
  pointer-events: none;
  left: 40px;
  top: 14px;
  transition: 0.2s ease all;
  color: var(--label-muted);
  font-size: 14px;
}
input:focus + .floating-label,
input:not(:placeholder-shown) + .floating-label {
  top: -6px; left: 12px; font-size: 12px;
}

/* Messages */
.form-message{
  min-height: 18px;
  font-size: 13px;
  line-height: 1.2;
}
.form-message.success{
  background: rgba(30,200,165,0.12);
  border: 1px solid var(--brand-accent);
  color: #eafff8;
  padding: 8px 10px;
  border-radius: 6px;
}
.form-message.error{
  background: rgba(255,0,0,0.10);
  border: 1px solid var(--error-focus);
  color: #ffe9e9;
  padding: 8px 10px;
  border-radius: 6px;
}

/* Field errors */
.error-message{
  height: 14px;
  color: var(--error);
  font-size: 12px;
  margin-top: 5px;
  visibility: hidden;
}
input:invalid:focus { border-bottom: 1px solid var(--error-focus); }
input:invalid:focus ~ .error-message { visibility: visible; }

/* Links below the form */
.link-row{
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
}
.back-link{
  font-size: 13px;
  color: #fff;
  text-decoration: underline;
}
.back-link:hover{ opacity: 0.9; }

/* Forgot-password link on sign-in (kept for parity) */
.forgot-password{
  text-align: right; margin-top: -15px; margin-bottom: 15px; font-weight: bold;
}
.forgot-password a{
  font-size: 12px; color: #fff; text-decoration: none; padding: 10px; border-radius: 4px; margin-top: 10px;
}
.forgot-password a:hover{ background-color: #cccccc56; }

/* Button */
button[type="submit"]{
  width: 100%;
  padding: 12px;
  font-weight: 700;
  background-color: var(--button-bg);
  color: var(--button-text);
  font-size: 14px;
  border: none;
  border-radius: var(--button-radius);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform .02s ease;
}
button[type="submit"]:hover{ box-shadow: var(--shadow-2h); }
button[type="submit"]:active{ transform: translateY(1px); }

/* “Don’t have an account?” row (kept) */
.login-link-container{
  text-align: left; margin-top: 20px; font-size: 13px; color: rgba(230, 230, 230, 0.849);
}
.login-link-container a{ color: white; font-weight: bold; text-decoration: none; }
.login-link-container a:hover{ text-decoration: underline; }

/* Autofill fixes */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--card-bg) inset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
  caret-color: white;
  transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px var(--card-bg) inset !important;
  -webkit-text-fill-color: white !important;
}
input:-moz-autofill { background-color: var(--card-bg) !important; color: white !important; }

.email-wrapper input:-webkit-autofill,
.password-wrapper input:-webkit-autofill{
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

/* Responsive */
@media (max-width: 480px) {
  #signin-form, #forgot-form, #reset-form { width: 92%; border-radius: 0; padding: 24px 16px; }
}

/* Hide ONLY the password label when the input has any value or is autofilled */
.password-wrapper input:not(:placeholder-shown) + .floating-label,
.password-wrapper input:valid + .floating-label,
.password-wrapper input:-webkit-autofill + .floating-label {
  opacity: 0;
  visibility: hidden;
  transform: none;
}
.password-wrapper input:focus + .floating-label {
  opacity: 0;
  visibility: hidden;
  transform: none;
}