/* Login for The Brain - Spotify-style reference (James, 2026-08-15, screenshot in taste log:
   plain dark page, narrow centred column, mark on top, big bold "Log in to X", labelled fields,
   pill primary button, pill outline secondary). EXTERNAL file on purpose: the Caddy CSP at the
   public URL is style-src 'self' with NO unsafe-inline and it REPLACES the app-layer CSP, so an
   inline <style> block ships unstyled raw HTML (exactly what happened to the first version). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #0b0b0d;
  color: #ece7dd;
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 24px;
}
.wrap { width: 100%; max-width: 324px; margin-top: 4vh; }
.mark {
  width: 48px; height: 48px; margin: 0 auto 22px; border-radius: 50%;
  border: 2.5px solid #ff6a13;
  display: flex; align-items: center; justify-content: center;
}
.mark::after { content: ''; width: 15px; height: 15px; border-radius: 50%; background: #ece7dd; }
h1 {
  font-size: 1.9em; font-weight: 800; text-align: center;
  letter-spacing: -.01em; margin-bottom: 34px;
}
label { display: block; font-size: .84em; font-weight: 700; margin: 0 0 7px 1px; }
.field { margin-bottom: 16px; }
input {
  width: 100%; padding: 13px 14px; font: inherit; color: #ece7dd;
  background: #121216; border: 1px solid #727272; border-radius: 6px;
  outline: none;
}
input:hover { border-color: #b3b3b3; }
input:focus { border-color: #ece7dd; box-shadow: 0 0 0 1px #ece7dd; }
.pwwrap { position: relative; }
.pwwrap input { padding-right: 46px; }
#pw-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 44px;
  background: none; border: none; cursor: pointer; color: #b3b3b3;
  font-size: 1.05em;
}
#pw-toggle:hover { color: #ece7dd; }
.btn {
  display: block; width: 100%; padding: 13px 14px; font: inherit; font-weight: 800;
  border: none; border-radius: 500px; cursor: pointer; text-align: center;
}
.btn.primary { background: #ff6a13; color: #0b0b0d; margin-top: 10px; }
.btn.primary:hover { background: #ff7d33; transform: scale(1.02); }
.btn.ghost {
  background: transparent; color: #ece7dd; border: 1px solid #727272;
  font-weight: 700; margin-top: 8px;
}
.btn.ghost:hover { border-color: #ece7dd; }
.divider { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #2a2a30; }
.err {
  background: rgba(194, 47, 40, .14); border: 1px solid rgba(194, 47, 40, .5);
  color: #ff8a80; border-radius: 6px; padding: 10px 12px; font-size: .88em; margin-bottom: 18px;
}
.foot { text-align: center; color: #6a6a72; font-size: .8em; margin-top: 34px; }