/* ===============================
   BASE
================================ */
html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: inherit;
  background: radial-gradient(circle at top, #0f172a, #020617);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ===============================
 CONTAINER
================================ */
.container {
  width: 100%;
}

/* Centraliza o card */
.painel-grid {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ===============================
 CARD GLASS (LOGIN)
================================ */
.painel-grid form {
  width: 100%;
  max-width: 380px;
  padding: 38px 34px;

  /* Glassmorphism */
  background: rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.15);

  box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.55),
      inset 0 0 0 1px rgba(255,255,255,0.03);
}

/* ===============================
 INPUTS
================================ */
.field {
  margin-bottom: 18px;
}

.control {
  position: relative;
}

.control .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.input {
  width: 100%;
  padding: 14px 14px 14px 44px;
  border-radius: 14px;

  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148,163,184,0.15);

  color: #e5e7eb;
  font-size: 15px;

  transition: border .2s ease, box-shadow .2s ease;
}

.input::placeholder {
  color: #64748b;
}

.input:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
}

/* ===============================
 BOTÃO
================================ */
.button {
  margin-top: 10px;
  width: 100%;

  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #020617;

  font-weight: 700;
  font-size: 15px;
  padding: 14px;

  border: none;
  border-radius: 14px;
  cursor: pointer;

  transition: transform .2s ease, box-shadow .2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(34,197,94,0.35);
}

/* ===============================
 ERRO LOGIN
================================ */
.notification.is-danger {
  margin-top: 18px;
  padding: 12px 16px;

  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220,38,38,0.35);

  color: #fecaca;
  border-radius: 14px;
  text-align: center;
}

.notification.is-success {
  margin-top: 18px;
  padding: 12px 16px;

  background: rgba(44, 220, 38, 0.15);
  border: 1px solid rgba(44, 220, 38, 0.35);

  color: #fecaca;
  border-radius: 14px;
  text-align: center;
}

.notification.is-info {
  margin-top: 18px;
  padding: 12px 16px;

  background: rgba(220, 202, 38, 0.15);
  border: 1px solid rgba(220, 193, 38, 0.35);

  color: #fecaca;
  border-radius: 14px;
  text-align: center;
}
/* ===============================
 LINK CADASTRO
================================ */
.has-text-centered {
  color: #94a3b8;
}

.login-link {
  color: #22c55e;
  font-weight: 600;
  text-decoration: none;
}

.login-link:hover {
  text-decoration: underline;
}

/* ===============================
 RESPONSIVO
================================ */
@media (max-width: 480px) {
  .painel-grid form {
      padding: 30px 24px;
      border-radius: 16px;
  }
}


.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: bold;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}


.cadastrar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
}

/* ===== LOADER ===== */
#app-loader {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #0f172a, #020617);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeOut 0.6s ease forwards;
  animation-delay: 1.8s;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #e5e7eb;
}

.loader-content i {
  font-size: 48px;
  color: #22c55e;
}

.loader-content span {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Spinner premium */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.15);
  border-top: 3px solid #22c55e;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

/* animações */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeOut {
  to {
      opacity: 0;
      visibility: hidden;
  }
}