*
{
    box-sizing:border-box;
    font-family:Arial,sans-serif
}
    
body{
    margin:0;
    background:#f1f5f9;
    color:#0f172a
}
/*
.site-header{
    background:#0f2f57;
    color:#fff;
    padding:16px 24px
}

.navbar{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between
}
*/
.logo{
    font-weight:800;
    font-size:20px
}
/*
.nav-links{
    display:flex;
    gap:18px;
    align-items:center
}

.nav-links a,.nav-menu-button{
    color:#fff;
    text-decoration:none;
    font-weight:700;
    background:transparent;
    border:0;cursor:pointer;
    font-size:15px
}
*/
.mega-wrapper{
    position:relative
}

.mega-panel{
    display:none;
    position:absolute;
    right:0;
    top:34px;
    min-width:280px;
    background:#fff;
    color:#0f172a;
    border-radius:14px;
    box-shadow:0 14px 30px rgba(15,23,42,.25);
    padding:12px;
    z-index:50
}

.mega-wrapper.open .mega-panel{
    display:block
}

.mega-panel a{
    display:block;
    color:#0f172a;
    padding:12px;
    border-radius:10px;
    text-decoration:none
}

.mega-panel a:hover{
    background:#e0f2fe
}

.mega-panel span{
    color:#64748b;
    font-size:13px
}

.container{
    width:min(94%,980px);
    margin:30px auto
}

.card{
    background:#fff;
    border-radius:18px;
    padding:24px;
    box-shadow:0 10px 24px rgba(15,23,42,.10);
    margin-bottom:20px
}

h1{
    margin-top:0;
    color:#0f2f57
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:12px;
    align-items:end
}

label{
    display:block;
    font-weight:700;
    margin-bottom:6px
}

input{
    width:100%;
    padding:12px;
    border:1px solid #cbd5e1;
    border-radius:10px;
    font-size:15px
}

button.primary-btn{
    padding:12px 18px;
    border:0;
    border-radius:10px;
    background:#2563eb;
    color:#fff;
    font-weight:800;
    cursor:pointer
}

.error-box{
    width:min(94%,980px);
    margin:0 auto 20px;
    background:#fee2e2;
    color:#991b1b;
    padding:14px;
    border-radius:12px;
    font-weight:700
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px
}

.info-item{
    background:#f8fafc;
    padding:14px;
    border-radius:12px
}

.info-item strong{
    display:block;
    color:#475569;
    margin-bottom:4px
}

.result-card{
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:18px;
    margin-top:16px
}

.result-title{
    font-size:20px;
    font-weight:800;
    color:#0f2f57;
    margin-bottom:12px
}

.result-table{
    width:100%;
    border-collapse:collapse
}

.result-table th,.result-table td{
    padding:12px;
    border-bottom:1px solid #e2e8f0;
    text-align:left
}

.result-table th{
    width:34%;
    background:#f8fafc
}

.correct{
    color:#15803d;
    font-weight:800
}

.incorrect{
    color:#b91c1c;
    font-weight:800
}

.qualified-box{
    margin-top:14px;
    padding:14px;
    background:#dcfce7;
    color:#166534;
    border-radius:12px;
    font-weight:800
}

.not-qualified-box{
    margin-top:14px;
    padding:14px;
    background:#fef3c7;
    color:#92400e;
    border-radius:12px;
    font-weight:700
}

.note{
    color:#64748b;
    font-size:14px;
    line-height:1.6
}

.table-wrapper{
    overflow-x:auto
}

table{
    width:100%;
    border-collapse:collapse
}

th,td{
    padding:12px;
    border-bottom:1px solid #e2e8f0;
    text-align:left
}

th{
    background:#f8fafc
}

@media(max-width:720px){
    .navbar{
        align-items:flex-start;
        gap:14px;
        flex-direction:column
    }
    
    .nav-links{
        flex-wrap:wrap
    }
    
    .mega-panel{
        left:0;
        right:auto
    }
    
    .form-grid{
        grid-template-columns:1fr
    }
    
    .result-table th,.result-table td{
        display:block;
        width:100%
    }
    
    .result-table th{
        border-bottom:0;
        padding-bottom:4px
    }
    
    .result-table td{
        padding-top:4px
    }
}