@charset "UTF-8";
:root{
    --tokens:#1c824cb1;
}
p, ul{
    margin-block: 1.1em;
    font-size: 1rem;
    line-height: 1.5em;
}
main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.formulario { margin-bottom: 20px;}
.box { padding: 10px; margin: 5px 0; width: 250px; }
.share-btn {
     background: #007BFF; color: #fff; border: none;
    padding: 10px 15px; border-radius: 6px; cursor: pointer; margin-top: 15px;
    &:hover { background: #0056b3;} 
  }
.tokenCounter{
    position: absolute; right: 20px; margin-top: 2em;
    background: var(--tokens); color: white;
    padding: 6px 12px; border-radius: 20px;
    font-size: 14px; font-weight: bold;
    }
.info{ color:#555; font-size: 14px; margin-top:8px; }
.modal{
    display: none; position: fixed; z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); justify-content: center; align-items: center;
    }
.modal-content{
    background: #fff; border-radius: 10px;
    max-width: 600px; width: 100%; padding: 20px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    animation: fadeIn 0.3s ease;
    }
@keyframes fadeIn { from {opacity:0; transform:translateY(-20px);} to {opacity:1; transform:translateY(0);} }
.close{ float: right; font-size: 22px; cursor: pointer; color: #333; }
.probabilidades{ margin-top:15px; padding:10px; background:#f4f6ff; border-radius:6px; }
.mensagem{ margin-top:15px; font-style:italic; color:#444; background:#fafafa; padding:10px; border-left:3px solid #007BFF; }
.spinner{ border: 4px solid #f3f3f3; border-top: 4px solid #333; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display:inline-block; }
@keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }