/*
  Shared by every page on booflix.app.

  Same-origin and dependency-free on purpose: no CDN, no webfont, no
  framework. This domain exists so password-reset links point somewhere a
  stranger will trust, which means it has to load, every time, before anything
  else about it can be judged. A third-party script is one more thing that can
  be slow, blocked, or simply down at the moment somebody is trying to get
  back into their account. The marketing page on mouthbreather.com can afford
  a CDN; this cannot.
*/

:root {
  --bg: #0b0710;
  --surface: #150d1c;
  --text: #f4eef7;
  --muted: #a08fae;
  --accent: #ff6d00;
  --line: rgba(255, 255, 255, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  background-image: radial-gradient(circle at 50% -10%, #2a1140 0%, transparent 60%);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

/*
  The logo is black line art on transparency, so it is invisible on a dark
  background as shipped. The app tints it through a theme; a static page has
  no theme, so it inverts. Same bug, same reasoning — see
  lib/widgets/booflix_logo.dart.
*/
.logo {
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: invert(1);
  opacity: .92;
  margin-bottom: 28px;
}

h1 {
  margin: 0 0 12px;
  font-size: 2.5rem;
  letter-spacing: -.02em;
}

.tagline {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 32rem;
}

.accent { color: var(--accent); }

.links {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: center;
}

.links a {
  color: var(--muted);
  text-decoration: none;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 0;
}

.links a:hover,
.links a:focus-visible { color: var(--text); }

footer {
  border-top: 1px solid var(--line);
  padding: 28px 24px;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
}

@media (max-width: 480px) {
  h1 { font-size: 2rem; }
}

/* ---------------------------------------------------------------------- */
/* Forms — currently only /reset.                                          */
/* ---------------------------------------------------------------------- */

.card {
  width: 100%;
  max-width: 26rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 24px;
}

.card h1 {
  font-size: 1.5rem;
  margin-bottom: 6px;
  text-align: center;
}

.who {
  text-align: center;
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 22px;
  word-break: break-all;
}

label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0 0 6px;
}

.field { margin-bottom: 16px; }

.field-row { position: relative; }

input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 12px 44px 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0d0812;
  color: var(--text);
  font-size: 1rem;
}

input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.peek {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 8px;
}

.peek:hover { color: var(--text); }

button.primary {
  width: 100%;
  margin-top: 4px;
  padding: 13px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #1a0d00;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

button.primary:disabled {
  opacity: .5;
  cursor: default;
}

.hint {
  color: var(--muted);
  font-size: .8rem;
  margin: 10px 0 0;
}

.msg {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .9rem;
  line-height: 1.5;
}

.msg.error {
  background: rgba(255, 90, 90, .1);
  border: 1px solid rgba(255, 90, 90, .35);
  color: #ffb4b4;
}

.msg.ok {
  background: rgba(80, 220, 130, .1);
  border: 1px solid rgba(80, 220, 130, .35);
  color: #a8f0c4;
}

[hidden] { display: none !important; }