/* =====================================
SMART MIND - Oracle Engine™
Premium Interface System V1.0
===================================== */


* {
    box-sizing: border-box;
}


body {

    margin:0;

    min-height:100vh;

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    background:
    radial-gradient(
        circle at top,
        #292929 0%,
        #111 40%,
        #050505 100%
    );

    color:#f5f5f5;

    line-height:1.6;

}



/* HERO */

.hero {

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px 20px;

}



/* BRAND */


.logo-circle {

    width:120px;

    height:120px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    font-size:48px;

    font-weight:800;


    color:#111;

    background:
    linear-gradient(
        145deg,
        #fff0a8,
        #d4af37,
        #8c6b13
    );


    box-shadow:

    0 0 40px rgba(212,175,55,.35),

    inset 0 0 20px rgba(255,255,255,.4);

}



h1 {

    font-size:3.2rem;

    letter-spacing:6px;

    margin:25px 0 5px;

    color:#d4af37;

}



.hero h2 {

    font-size:1.8rem;

    font-weight:400;

    margin:0;

    color:#ffffff;

}



.hero p {

    color:#cfcfcf;

    font-size:1.2rem;

}



/* BUTTONS */


button {

    margin-top:30px;

    padding:16px 45px;

    border:none;

    border-radius:50px;


    background:

    linear-gradient(
    135deg,
    #fff1a8,
    #d4af37,
    #8c6b13
    );


    color:#111;

    font-weight:800;

    font-size:1rem;

    letter-spacing:2px;

    cursor:pointer;


    transition:.3s;

}



button:hover {

    transform:translateY(-4px);

    box-shadow:

    0 15px 40px rgba(212,175,55,.35);

}



/* APPLICATION */


#oracleApp {

    max-width:1000px;

    margin:auto;

    padding:30px;

}



/* CARDS */


.profile-card,
.language-panel,
.result-panel {

    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(212,175,55,.25);


    backdrop-filter:blur(12px);


    border-radius:25px;


    padding:25px;


    margin:25px 0;


    box-shadow:

    0 10px 40px rgba(0,0,0,.4);

}



h3 {

    color:#d4af37;

    letter-spacing:1px;

}



select,
textarea {


    width:100%;


    margin-top:15px;


    padding:15px;


    border-radius:15px;


    border:

    1px solid rgba(212,175,55,.4);


    background:#111;


    color:white;


    font-size:1rem;


}



textarea {

    resize:vertical;

}





/* RESULT */


.result-panel {

    display:block;

}



.score-grid {


    display:grid;


    grid-template-columns:

    repeat(
    auto-fit,
    minmax(150px,1fr)
    );


    gap:20px;


}



.score-grid div {


    background:

    rgba(212,175,55,.08);


    padding:20px;


    border-radius:20px;


    text-align:center;


}



.score-grid strong {


    display:block;


    font-size:2rem;


    color:#d4af37;


}




.result-box {


    margin-top:25px;


    padding:25px;


    border-left:

    3px solid #d4af37;


    background:

    rgba(255,255,255,.04);


    border-radius:15px;


}




footer {


    text-align:center;


    padding:30px;


    color:#777;


}



/* MOBILE */


@media(max-width:700px){


h1 {

font-size:2rem;

letter-spacing:3px;

}


.hero h2 {

font-size:1.3rem;

}


#oracleApp {

padding:15px;

}


}