/* ==========================================================
   CENTRALIZAR PWA NO NAVEGADOR (modo não-instalado)
   ========================================================== */

/* Layout centralizado quando NÃO estiver em modo standalone */
@media (min-width: 480px) {
  body:not(.standalone) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    min-height: 100vh;
    overflow-x: hidden;

    background-color: #0f172a; /* bg-slate-900 */
  }

  /* Container central */
  body:not(.standalone) > header,
  body:not(.standalone) > main,
  body:not(.standalone) > footer {
    width: 480px;
    max-width: 100%;

    background-color: #0f172a;

    border-left: 1px solid #334155;
    border-right: 1px solid #334155;

    box-shadow: 0 0 30px rgba(0,0,0,0.5);

    margin: 0 auto;
    animation: fadeInUp 0.6s ease both;
  }

  /* Footer fixo dentro do container */
  body:not(.standalone) > footer {
    position: fixed;
    bottom: 0;
  }
}

/* ==========================================================
   CARD DE RISCO — CORES OKLAB + FALLBACK
   ========================================================== */

#result-card.bg-risk-low {
  /* Fallback */
  background-color: rgba(16, 185, 129, 0.25) !important;
  border-color: rgba(16, 185, 129, 0.60) !important;

  /* color-mix se suportado */
  background-color: color-mix(in oklab, var(--color-emerald-300) 55%, black);
  border-color: color-mix(in oklab, var(--color-emerald-300) 90%, black);
}

#result-card.bg-risk-high {
  /* Fallback */
  background-color: rgba(244, 63, 94, 0.25) !important;
  border-color: rgba(244, 63, 94, 0.60) !important;

  /* color-mix se suportado */
  background-color: color-mix(in oklab, var(--color-rose-300) 55%, black);
  border-color: color-mix(in oklab, var(--color-rose-300) 90%, black);
}

/* ==========================================================
   ANIMAÇÃO
   ========================================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}