/* Login page. Kept in a file rather than a <style> block so the Content
   Security Policy can forbid inline styles outright. */

body { display: grid; place-items: center; min-height: 100vh; background: var(--teal-deep); }

/* Faint repeating mark in the background — echoes the pattern work on
   stemforbugs.com without competing with the card. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
  background-size: 28px 28px;
}

.login-card {
  position: relative; width: min(400px, calc(100vw - 2.5rem));
  background: var(--paper); border-radius: var(--r-lg);
  padding: 2.25rem 2rem; box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.brand-mark {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center; margin: 0 auto 1.25rem;
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  letter-spacing: .06em; border: 2px solid var(--mint);
}
.login-card h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: -.01em; text-align: center;
  line-height: 1.1; margin-bottom: .35rem;
}
.login-card h1 em { font-style: normal; color: var(--mint); display: block; }
.login-sub { text-align: center; color: var(--text2); font-size: .82rem; margin-bottom: 1.75rem; }

.field { margin-bottom: .9rem; }
.field label {
  display: block; font-family: var(--font-mono); font-size: .6rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--text3); margin-bottom: .35rem;
}
.field input {
  width: 100%; padding: .7rem .85rem; border: 1.5px solid var(--border);
  border-radius: var(--r-sm); font-family: var(--font-body); font-size: .92rem;
  background: var(--bg); color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none; border-color: var(--mint); background: var(--paper);
  box-shadow: 0 0 0 3px rgba(64,193,172,.2);
}
.login-err {
  display: none; background: rgba(187,51,79,.08); border: 1px solid rgba(187,51,79,.25);
  color: var(--red); font-size: .8rem; padding: .55rem .75rem;
  border-radius: var(--r-sm); margin-bottom: .9rem;
}
.login-err.show { display: block; }
.foot { text-align: center; margin-top: 1.5rem; font-size: .68rem; color: var(--text3); }