/* ============================================================
   E.T. Barrr - Veldon Edit sign-in (etbar.veldon.cz/admin)
   ------------------------------------------------------------
   The markup is fixed and class-less. The mount emits:
     <main> > [img] + <h1> + [p role=alert] + <form>
              > <label>Email <input></label> ... <button>
   so everything below is element selectors against that shape.

   NO WEBFONTS HERE: the mount serves this page under
   `default-src 'none'` with no font-src, so @font-face is blocked
   (verified against the real policy). Until VE adds `font-src
   'self'` the brand faces cannot load and this leans on a system
   stack. Colours are literal because tokens.css is not loaded -
   the mount links exactly one stylesheet.
   ============================================================ */

:root {
  --night: #0F2342;
  --moon: #E9EDF5;
  --moon-soft: #A9B4C9;
  --glow: #FFC96B;
  --glow-rgb: 255, 201, 107;
  --night-rgb: 15, 35, 66;
  --moon-rgb: 233, 237, 245;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--moon);
  background:
    radial-gradient(62% 44% at 70% 22%, rgba(var(--glow-rgb), 0.10), transparent 70%),
    var(--night);
}

main {
  width: 100%;
  max-width: 25rem;
  background: rgba(var(--night-rgb), 0.72);
  border: 1px solid rgba(var(--moon-rgb), 0.14);
  border-radius: 14px;
  padding: clamp(1.6rem, 5vw, 2.4rem);
  box-shadow: 0 30px 70px -40px #000;
}

main > img { display: block; width: 3rem; height: auto; margin-bottom: 1.1rem; }

h1 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--glow);
  margin-bottom: 1.5rem;
}

/* the mount renders this above the form after a failed attempt */
p[role="alert"] {
  margin: -0.7rem 0 1.2rem;
  padding: 0.6em 0.85em;
  border-radius: 8px;
  font-size: 0.92rem;
  color: #FFD9D9;
  background: rgba(142, 59, 59, 0.35);
  border: 1px solid rgba(142, 59, 59, 0.75);
}

form { display: grid; gap: 1rem; }

/* each label WRAPS its input: "Email <input>" */
label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--moon-soft);
}

input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--moon);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(var(--moon-rgb), 0.22);
  border-radius: 9px;
  padding: 0.7em 0.85em;
}

input:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 1px;
  border-color: transparent;
}

button {
  justify-self: start;
  margin-top: 0.35rem;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--night);
  background: var(--glow);
  border: none;
  border-radius: 999px;
  padding: 0.68em 1.8em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -12px rgba(var(--glow-rgb), 0.65); }
button:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }