/* Tela de login: preto "piano" (laca brilhante) com a logo do canal. */
body.piano {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 18% -10%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(90% 60% at 100% 110%, rgba(255, 86, 102, 0.10) 0%, rgba(255, 86, 102, 0) 55%),
    linear-gradient(160deg, #101010 0%, #040404 46%, #0b0b0b 100%);
  background-attachment: fixed;
}
/* brilho diagonal de verniz, parado, como o reflexo num piano */
body.piano::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.045) 46%, rgba(255, 255, 255, 0) 54%);
}

.palco { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; position: relative; }

.vidro {
  width: min(400px, 100%);
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding: 30px 30px 32px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 22%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(160deg, #0c0c0c, #020202);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.75),
    0 2px 0 rgba(255, 255, 255, 0.07) inset,
    0 -1px 0 rgba(0, 0, 0, 0.9) inset,
    0 0 60px rgba(255, 40, 60, 0.06);
}

.logo { width: min(240px, 70%); height: auto; filter: drop-shadow(0 10px 28px rgba(255, 40, 60, 0.28)); }

.vidro h1 { margin: 2px 0 0; font-size: 1.35rem; font-weight: 800; letter-spacing: .02em; color: #f4f4f4; }
.vidro h1 span { color: var(--marca); }
.chamada { margin: -6px 0 4px; color: #8d8d8d; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; }

.campo { width: 100%; display: grid; gap: 6px; text-align: left; }
.campo span { font-size: .74rem; color: #9a9a9a; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.campo input {
  background: linear-gradient(180deg, #000, #0a0a0a);
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) inset;
}
.campo input:focus { border-color: var(--marca); box-shadow: 0 0 0 3px rgba(255, 86, 102, 0.20), 0 2px 6px rgba(0, 0, 0, 0.8) inset; }

.erro { width: 100%; min-height: 1.3em; color: var(--alerta); font-size: .86rem; text-align: left; }

.entrar {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ff7d8a;
  background: linear-gradient(180deg, #ff6676 0%, #d92a3c 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(217, 42, 60, 0.35), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
.entrar:hover { filter: brightness(1.08); }
.entrar:disabled { filter: grayscale(.5); opacity: .7; }

@media (max-width: 420px) { .vidro { padding: 22px 18px 24px; } }