/* Sign-in / 2FA pages (ported from xairau4 static/css/login.css, trimmed:
   no normalize.css and no font-awesome — this app ships neither, and the
   two pages needed only a card, two inputs and a button). */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f5f7;
  color: #24292f;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

.wrapper { width: 100%; max-width: 360px; padding: 24px; }

form.login {
  background: #fff;
  border: 1px solid #d8dce1;
  border-radius: 4px;
  padding: 28px 24px 24px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 18px;
  overflow: hidden;
}
.title .brand { float: right; height: 26px; margin-top: -2px; }

.alert { color: #b42318; min-height: 20px; font-size: 13px; }
.alert .success { color: #067647; }

form.login input[type="email"],
form.login input[type="password"],
form.login input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  margin: 8px 0;
  border: 1px solid #d8dce1;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  color: inherit;
}
form.login input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

form.login input.code {
  text-align: center;
  font-size: 20px;
  letter-spacing: 6px;
}

form.login label {
  display: inline-block;
  margin: 8px 0;
  font-size: 13px;
  color: #57606a;
}

.aside { float: right; margin: 8px 0; font-size: 13px; }
a { color: #0969da; text-decoration: none; }
a:hover { text-decoration: underline; }

.hint { color: #57606a; font-size: 13px; text-align: center; margin: 14px 0; }

form.login button {
  width: 100%;
  margin-top: 16px;
  padding: 10px 14px;
  border: 0;
  border-radius: 4px;
  background: #1f6feb;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
form.login button:hover { background: #1a5fd0; }
form.login button:disabled { opacity: 0.7; cursor: default; }

.back { display: block; text-align: center; margin-top: 14px; font-size: 13px; }

/* the button's busy state */
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

footer {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: #6e7781;
}

@media (prefers-color-scheme: dark) {
  body { background: #0d1117; color: #e6edf3; }
  form.login { background: #161b22; border-color: #30363d; }
  form.login input[type="email"],
  form.login input[type="password"],
  form.login input[type="text"] {
    background: #0d1117;
    border-color: #30363d;
    color: #e6edf3;
  }
  .alert { color: #ff7b72; }
  .hint, form.login label, footer { color: #8b949e; }
}