/* Shared styling for the sign-in, forgot-password and reset pages.
   External rather than inline so the Content-Security-Policy can forbid
   inline styles outright. */

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

body {
  font-family: 'Nunito', system-ui, sans-serif;
  background: linear-gradient(160deg, #fff8e1 0%, #e8f4fd 50%, #f3e8ff 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #1f2933;
}

.box {
  background: #fff;
  border: 3px solid #d8dee6;
  border-radius: 24px;
  padding: 32px 28px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.flake { font-size: 2.6rem; text-align: center; display: block; }

h1 {
  font-family: 'Baloo 2', cursive;
  font-size: 1.7rem;
  text-align: center;
  margin: 6px 0 2px;
}

.sub {
  text-align: center;
  color: #667085;
  font-size: .88rem;
  margin-bottom: 22px;
  line-height: 1.45;
}

label {
  display: block;
  font-weight: 800;
  font-size: .82rem;
  margin: 14px 0 5px;
}

input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  border: 2px solid #d8dee6;
  border-radius: 12px;
  background: #fbfcfd;
}

input:focus { outline: none; border-color: #4dabf7; background: #fff; }

.hint { font-size: .76rem; color: #667085; margin-top: 6px; line-height: 1.4; }

button {
  width: 100%;
  margin-top: 20px;
  padding: 13px;
  font-size: 1rem;
  font-family: 'Baloo 2', cursive;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #4dabf7, #cc5de8);
  border: none;
  border-radius: 14px;
  cursor: pointer;
}

button:disabled { opacity: .6; cursor: progress; }

.msg {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.45;
  display: none;
}

.msg.error   { display: block; background: #fff5f5; color: #c92a2a; border: 1px solid #ffc9c9; }
.msg.success { display: block; background: #ebfbee; color: #2b8a3e; border: 1px solid #b2f2bb; }
.msg.info    { display: block; background: #e7f5ff; color: #1864ab; border: 1px solid #a5d8ff; }

.links {
  text-align: center;
  margin-top: 18px;
  font-size: .84rem;
  color: #667085;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.links a { color: #1c7ed6; }

/* Password strength meter */
.meter { height: 6px; background: #eef1f5; border-radius: 999px; margin-top: 9px; overflow: hidden; }
.meter span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .2s, background .2s; }
.meter span.weak   { background: #ff6b6b; }
.meter span.fair   { background: #f59e0b; }
.meter span.good   { background: #4dabf7; }
.meter span.strong { background: #38d9a9; }