/* ==========================================================
   Pangeanic MTQE v2
   ========================================================== */

body{
    background:#f5f7fa;
}

/* Main container */

.gradio-container{

    max-width:1100px !important;

    margin:auto !important;

    padding:35px !important;

    background:#f5f7fa !important;
}

/* Hide footer */

footer{
    display:none !important;
}

/* ==========================================================
   Typography
   ========================================================== */

h1{

    font-size:2.8rem !important;

    font-weight:700 !important;

    color:#202939 !important;

    margin-bottom:10px !important;
}

h2{

    font-size:1.8rem !important;

    font-weight:600 !important;

    color:#202939 !important;

    margin-top:35px !important;

    margin-bottom:15px !important;
}

h3{

    color:#202939 !important;

    font-weight:600 !important;
}

p{

    color:#5b6574 !important;

    line-height:1.7 !important;

    font-size:16px !important;
}

/* ==========================================================
   Cards
   ========================================================== */

.block{

    background:white !important;

    border-radius:18px !important;

    border:1px solid #e8ebef !important;

    box-shadow:0 6px 18px rgba(0,0,0,.05) !important;

    padding:18px !important;
}

/* ==========================================================
   Labels
   ========================================================== */

label{

    font-weight:600 !important;

    color:#344054 !important;

    font-size:15px !important;
}

/* ==========================================================
   Inputs
   ========================================================== */

textarea,
input,
select{

    border-radius:12px !important;

    border:1px solid #d0d5dd !important;

    background:white !important;

    font-size:15px !important;

    transition:.2s;
}

textarea{

    min-height:110px !important;

    line-height:1.6 !important;

    font-size:16px !important;
}

textarea:focus,
input:focus,
select:focus{

    border-color:#ff7a00 !important;

    box-shadow:0 0 0 3px rgba(255,122,0,.15) !important;
}

/* ==========================================================
   Dropdowns
   ========================================================== */

.wrap{

    border-radius:12px !important;
}

/* ==========================================================
   Buttons
   ========================================================== */

button{

    border-radius:12px !important;

    transition:.2s !important;

    font-weight:600 !important;
}

button:hover{

    transform:translateY(-1px);
}

button.primary{

    background:#ff7a00 !important;

    color:white !important;

    border:none !important;

    font-size:17px !important;

    height:54px !important;
}

button.primary:hover{

    background:#ef7000 !important;
}

/* ==========================================================
   Results
   ========================================================== */

.score-card{

    background:#fff6eb;

    border:2px solid #ffd2a6;

    border-radius:18px;

    padding:25px;

    text-align:center;

    margin-bottom:20px;
}

.score-title{

    font-size:18px;

    color:#555;
}

.score{

    font-size:60px;

    color:#ff7a00;

    font-weight:700;

    margin-top:10px;
}

.explanation{

    background:#fafafa;

    border:1px solid #e6e6e6;

    border-radius:14px;

    padding:18px;
}

/* ==========================================================
   Hero
   ========================================================== */

.hero{

    margin-bottom:35px;
}

.hero p{

    max-width:850px;
}

/* ==========================================================
   Feature cards
   ========================================================== */

.features{

    display:flex;

    gap:18px;

    margin-top:30px;

    margin-bottom:35px;
}

.feature{

    flex:1;

    background:white;

    border-radius:16px;

    border:1px solid #ececec;

    padding:22px;

    transition:.2s;
}

.feature:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(0,0,0,.06);
}

.feature h3{

    margin-bottom:8px;

    color:#ff7a00 !important;
}

/* ==========================================================
   Benchmark section
   ========================================================== */

.benchmark{

    margin-top:45px;

    background:white;

    border-radius:18px;

    padding:30px;

    border:1px solid #e8ebef;
}

/* ==========================================================
   Tables
   ========================================================== */

table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;
}

th{

    background:#ff7a00;

    color:white;

    padding:12px;

    text-align:left;
}

td{

    padding:12px;

    border-bottom:1px solid #ececec;
}

/* ==========================================================
   Lists
   ========================================================== */

ul{

    padding-left:22px;
}

li{

    margin-bottom:8px;

    color:#475467;
}

/* ==========================================================
   API badge
   ========================================================== */

.api-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    background:white;

    border:1px solid #d6d6d6;

    border-radius:999px;

    float:right;

    font-size:14px;
}

.api-badge::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#19b66a;
}

/* ==========================================================
   Horizontal divider
   ========================================================== */

hr{

    border:none;

    border-top:1px solid #ececec;

    margin:35px 0;
}

/* ==========================================================
   Links
   ========================================================== */

a{

    color:#ff7a00;

    text-decoration:none;
}

a:hover{

    text-decoration:underline;
}

/* ==========================================================
   Mobile
   ========================================================== */

@media(max-width:900px){

    .gradio-container{

        padding:18px !important;
    }

    h1{

        font-size:2rem !important;
    }

    h2{

        font-size:1.5rem !important;
    }

    .features{

        flex-direction:column;
    }

    .score{

        font-size:42px;
    }

    textarea{

        min-height:90px !important;
    }
}