:root{

    /* Fundo */

    --bg:#050505;

    /* Superfícies */

    --surface:#101010;
    --surface-hover:#151515;

    /* Bordas */

    --border:#242424;

    /* Textos */

    --text:#ffffff;
    --secondary:#9CA3AF;

    /* Destaque */

    --accent:#64748B;
    --accent-soft:rgba(100,116,139,.15);

    /* Estados */

    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;
    --info:#38bdf8;

    /* Layout */

    --radius:18px;
    --radius-sm:14px;
    --radius-lg:22px;

    /* Sombras */

    --shadow-sm:0 4px 12px rgba(0,0,0,.20);
    --shadow:0 10px 30px rgba(0,0,0,.30);
    --shadow-lg:0 20px 50px rgba(0,0,0,.40);

    /* Animações */

    --transition:.3s ease;

    /* Container */

    --container:950px;

}



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


html{
    scroll-behavior:smooth;
}


body{

    background:var(--bg);

    color:var(--text);

    font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

    min-height:100vh;

}


a{

    color:inherit;
    text-decoration:none;

}


hr{

    border:0;

    height:1px;

    background:var(--border);

    margin:40px 0;

}



/* CARDS */

.card,
.card2{


    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:20px;

    transition:var(--transition);

    margin-bottom: 10%;

}



.card2{


    display:inline-block;

    width:260px;

    margin:10px;

    vertical-align:top;

}



.card:hover,
.card2:hover{


    border-color:#3f3f3f;

    transform:translateY(-3px);

}




/*==========================
PLAYGROUND
==========================*/

.page-title{

    text-align:center;

    font-size:40px;

    font-weight:700;

    margin-top:60px;

    letter-spacing:-1px;

}

.page-subtitle{

    text-align:center;

    color:var(--secondary);

    margin:14px auto 40px;

    max-width:600px;

    line-height:1.7;

}

.playground{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:24px;

    margin-top:20px;

}

.t0{

    font-size:18px;

    margin-bottom:24px;

    color:var(--text);

}

.card label{

    display:block;

    margin:18px 0 8px;

    color:var(--secondary);

    font-size:14px;

    font-weight:600;

}

#endpoint,
#query{

    width:100%;

    padding:14px 16px;

    background:var(--bg);

    color:var(--text);

    border:1px solid var(--border);

    border-radius:14px;

    outline:none;

    font-size:15px;

    transition:var(--transition);

}

#endpoint:focus,
#query:focus{

    border-color:var(--accent);

    box-shadow:0 0 0 3px rgba(100,116,139,.15);

}

.buttons{

    display:flex;

    gap:12px;

    margin-top:24px;

}

#testApi,
#clearTerminal{

    flex:1;

    padding:14px;

    border-radius:14px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

}

#testApi{

    background:#fff;

    color:#000;

    border:none;

}

#testApi:hover{

    transform:translateY(-2px);

}

#clearTerminal{

    background:var(--surface);

    color:var(--text);

    border:1px solid var(--border);

}

#clearTerminal:hover{

    border-color:var(--accent);

    background:rgba(100,116,139,.08);

}

.terminal-top{

    display:flex;

    align-items:center;

    gap:8px;

    padding-bottom:14px;

    margin-bottom:18px;

    border-bottom:1px solid var(--border);

}

.terminal-dot{

    width:11px;

    height:11px;

    border-radius:50%;

}

.red{

    background:#ef4444;

}

.yellow{

    background:#f59e0b;

}

.green{

    background:#22c55e;

}

.terminal-name{

    margin-left:8px;

    color:var(--secondary);

    font-size:14px;

}

#result{

    min-height:360px;

    padding:20px;

    background:var(--bg);

    border:1px solid var(--border);

    border-radius:14px;

    color:#e5e7eb;

    font-size:14px;

    line-height:1.7;

    white-space:pre-wrap;

    word-break:break-word;

    overflow:auto;

    font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;

}

#result::-webkit-scrollbar{

    width:8px;

}

#result::-webkit-scrollbar-thumb{

    background:var(--border);

    border-radius:20px;

}

#voltar{

    display:flex;

    align-items:center;

    justify-content:center;

    width:280px;

    margin:40px auto;

    padding:15px;

    background:transparent;

    border:1px solid var(--border);

    border-radius:16px;

    color:var(--secondary);

    font-weight:600;

    transition:var(--transition);

}

#voltar:hover{

    background:rgba(100,116,139,.08);

    color:var(--text);

    border-color:var(--accent);

}

@media(max-width:768px){

.playground{

    grid-template-columns:1fr;

}

.buttons{

    flex-direction:column;

}

.page-title{

    font-size:34px;

}

}



.svg{
    width:20px;
    height:20px;
    color:white;
}



/* ==========================
   TERMINAL EXPERIENCE
========================== */


.terminal-card{

    overflow:hidden;

}


/* Entrada de texto no terminal */

#result{

    animation: terminalOpen .45s ease;

    scrollbar-width:thin;

    scroll-behavior:smooth;

}


@keyframes terminalOpen{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* Novo resultado chegando */

#result.active{

    animation: terminalPulse .35s ease;

}


@keyframes terminalPulse{

    0%{

        opacity:.5;

    }


    100%{

        opacity:1;

    }

}



/* Cursor estilo terminal */


#result::after{

    content:"|";

    animation:cursorBlink 1.2s infinite;

    color:var(--secondary);

}



@keyframes cursorBlink{


    0%,
    50%{

        opacity:1;

    }


    51%,
    100%{

        opacity:0;

    }

}



/* Estados do terminal */


#result.success{

    color:#d1fae5;

}



#result.error{

    color:#fecaca;

    border-color:rgba(239,68,68,.35);

}



#result.warning{

    color:#fde68a;

}



#result.info{

    color:#bae6fd;

}



/* Pequena animação quando erro aparece */


#result.error{

    animation:errorShake .25s ease;

}



@keyframes errorShake{


    0%{

        transform:translateX(0);

    }


    25%{

        transform:translateX(-4px);

    }


    50%{

        transform:translateX(4px);

    }


    100%{

        transform:translateX(0);

    }

}



/* Loading do terminal */


#result.loading::before{


    content:"Executando";

    display:block;

    color:var(--secondary);

    margin-bottom:10px;

    animation:loadingDots 1.5s infinite;

}



@keyframes loadingDots{


    0%{

        content:"Executando.";

    }


    33%{

        content:"Executando..";

    }


    66%{

        content:"Executando...";

    }



80%{

        content:"Agrupando resultados...";

    }


90%{

        content:"Finalizando a pesquisa...";

    }

 
92%{

        content:"Verificando a melhor resposta.";

    }
  

93%{

        content:"Verificando a melhor resposta..";

    }


94%{

        content:"Verificando a melhor resposta...";

    }


95%{

        content:"Verificando a melhor resposta.";

    }



96%{

        content:"Verificando a melhor resposta..";

    }


98%{

        content:"Verificando a melhor resposta...";

    }

99%{

        content:"Alguns segundos...";

    }
 
100%{

        content:"Prontos!";

    }

}


/*
.music-card{

    min-height:220px;

    border-radius:16px;

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:end;

    overflow:hidden;

    border:1px solid var(--border);

    margin-bottom:15px;

    transition:.3s ease;

}

*/


.music-card:hover{

    transform:translateY(-3px);

}


.music-info{

    padding:20px;

}


.music-info h2{

    font-size:20px;

    margin-bottom:8px;

}


.music-info p{

    color:var(--secondary);

}


.music-info small{

    color:#777;

}


.song-card{

    height:230px;

    border-radius:18px;

    background-size:cover;

    background-position:center;

    overflow:hidden;

    border:1px solid var(--border);

    display:flex;

    align-items:end;

    animation:terminalOpen .4s ease;

}





.song-content h2{

    font-size:26px;

    margin-bottom:8px;

}



.song-content p{

    color:var(--secondary);

    font-size:16px;

}



.song-content small{

    display:block;

    margin-top:5px;

    color:#777;

}



.song-content audio{

    width:100%;

    margin-top:20px;

}



.song-card:hover{

    border-color:#3f3f3f;

}






.song-card audio{

    width:100%;

    margin-top:15px;

    height:35px;

}


.music-card{

    min-height:200px;

    border-radius:16px;

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:end;

    overflow:hidden;

    border:1px solid var(--border);

    transition:.3s ease;

}







.svg-preta{
    width:10px;
    height:10px;
    color:black;
}
svg{

    vertical-align:middle;

}

button svg{

    width:24px;

/*    height:14px;*/

    flex-shrink:0;
}


span {
 color: var(--accent);
}

.page-title svg {

    width:30px;

    height:30px;

    flex-shrink:0;
}

h2 {

    display:flex;

    justify-content:center;

    align-items:center;

/*    width:280px;*/

    margin:30px auto;

    padding:14px;

    background:transparent;

/*    border:1px solid var(--border);*/

    border-radius:14px;

    color:var(--secondary);

    transition:var(--transition);
}



button{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;
    
}

.download-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-weight: 600;
    text-decoration: none;
}