:root{
  --mx-red: #A93C40;
  --mx-red-700: #8E3235;
  --mx-red-50: #FFF3F3;
  --mx-ink: #1f1f1f;
  --mx-muted: #666;
  --mx-border: #e6e6e6;
  --mx-surface: #ffffff;
  --mx-focus: #1a73e8;
  --mx-radius: 12px;
  --mx-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
}

* { box-sizing: border-box }
html { font-size: 16px }
body {
  margin: 0; padding: 1.25rem;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--mx-ink);
  background: #fafafa;
}

/* Layout wrapper */
body > h1,
body > form,
body > div,
body > ul,
body > p,
body > hr,
body > h2 {
  max-width: 560px; margin: 0 auto 1rem; padding: 0 0.25rem;
}

/* Title */
h1 {
  font-size: 1.8rem; margin: .25rem auto 1rem;
}

/* “Menu” block (login/signup links) */
body > div:first-of-type {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius);
  box-shadow: var(--mx-shadow);
  padding: .75rem 1rem; margin-bottom: 1rem;
}
body > div:first-of-type strong { color: var(--mx-muted) }
body > div:first-of-type ul { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; gap: .75rem }
body > div:first-of-type a { color: var(--mx-red); text-decoration: none; font-weight: 600 }
body > div:first-of-type a:hover { text-decoration: underline }

/* Card around the form */
form[action$="/accounts/login/"] {
  background: var(--mx-surface);
  border: 1px solid var(--mx-border);
  border-radius: var(--mx-radius);
  box-shadow: var(--mx-shadow);
  padding: 1rem;
}
form p { margin: .75rem 0 }

/* Labels & help text */
label { display: inline-block; font-weight: 700; margin-bottom: .25rem }
.helptext a { color: var(--mx-red); text-decoration: none }
.helptext a:hover { text-decoration: underline }
.helptext { color: var(--mx-muted); font-size: .9rem }

/* Inputs */
input[type="text"],
input[type="password"],
input[type="email"]{
  width: 100%;
  border: 1px solid var(--mx-border);
  border-radius: 10px;
  padding: .6rem .75rem;
  font: inherit; color: inherit; background: #fff;
}
input:focus {
  outline: 2px solid var(--mx-focus);
  outline-offset: 2px;
}

/* Remember-me checkbox */
input[type="checkbox"] {
  width: 1rem; height: 1rem; vertical-align: middle; margin-left: .25rem;
}

/* Primary button */
button[type="submit"]{
  appearance: none; border: 0; cursor: pointer;
  background: var(--mx-red); color: #fff;
  padding: .6rem 1rem; border-radius: 999px; font-weight: 700;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  transition: background .15s ease, transform .02s ease;
}
button[type="submit"]:hover{ background: var(--mx-red-700) }
button[type="submit"]:active{ transform: translateY(1px) }
button[type="submit"]:focus-visible{
  outline: 2px solid var(--mx-focus); outline-offset: 2px;
}

/* Separator */
hr { border: 0; border-top: 1px solid var(--mx-border); margin: 1.25rem auto }

/* Social section */
h2 { font-size: 1.1rem; color: var(--mx-muted); margin: .25rem 0 1rem }
ul { list-style: none; padding: 0; margin: 0 }
ul li { margin-bottom: .5rem }

ul li a[title], /* provider links */
ul li a[href*="/accounts/"][href*="/login/"]{
  display: inline-block;
  background: var(--mx-red-50);
  color: var(--mx-red);
  border: 1px solid #f2c6c6;
  border-radius: 999px;
  padding: .5rem .9rem;
  text-decoration: none; font-weight: 700;
}
ul li a[title]:hover { filter: brightness(.98) }

/* Links in body */
a { color: var(--mx-red) }
a:hover { text-decoration: underline }

/* Small screens */
@media (max-width: 600px){
  body { padding: .75rem }
  body > h1, body > form, body > div, body > ul, body > p, body > hr, body > h2 { margin-bottom: .85rem }
}