body{
    background:#f5f6fa;
}

.formula-box{

    background:white;
    border:1px solid #ddd;

    padding:25px;

    min-height:120px;

    font-size:22px;

    border-radius:10px;
}

.dropzone{

    display:inline-block;

    min-width:120px;

    min-height:40px;

    border:2px dashed #999;

    background:#fff8dc;

    margin:0 5px;

    padding:5px;

    text-align:center;
}

.choice{

    display:inline-block;

    padding:10px 15px;

    margin:5px;

    background:#0d6efd;

    color:white;

    border-radius:8px;

    cursor:grab;
}

.correct{

    background:#198754 !important;
    color:white;
}

.wrong{

    background:#dc3545 !important;
    color:white;
}


/* Excel Grid */

.excel-wrapper{

    overflow-x:auto;

    margin-bottom:20px;
}

.excel-grid{

    border-collapse:collapse;

    background:white;
}

.excel-grid th{

    background:#f1f3f4;

    border:1px solid #cfcfcf;

    min-width:70px;

    height:35px;

    text-align:center;

    font-weight:600;
}

.excel-grid td{

    border:1px solid #d9d9d9;

    min-width:140px;

    height:45px;

    padding:8px;
}

.excel-grid td .dropzone{

    margin:0;

    width:100%;
}

.app-container{
    max-width:1100px;
    margin:auto;
    padding:24px;
}

/* Mobile Friendly */
@media (max-width: 768px){

    body{
        background:#f5f6fa;
    }

    .app-container{
        padding:12px;
    }

    h2{
        font-size:22px;
    }

    h4{
        font-size:18px;
        line-height:1.5;
    }

    .formula-box{
        font-size:18px;
        padding:16px;
        overflow-x:auto;
        white-space:nowrap;
    }

    .choices-container{
        display:flex;
        gap:8px;
        overflow-x:auto;
        padding-bottom:10px;
        margin-bottom:15px;
        position:sticky;
        bottom:0;
        background:#f5f6fa;
        z-index:50;
        border-top:1px solid #ddd;
        padding-top:10px;
    }

    .choice{
        flex:0 0 auto;
        font-size:15px;
        padding:10px 14px;
        border-radius:10px;
    }

    .dropzone{
        min-width:95px;
        min-height:38px;
        font-size:14px;
        padding:6px;
    }

    .excel-wrapper{
        overflow-x:auto;
        border:1px solid #ddd;
        border-radius:10px;
        background:white;
    }

    .excel-wrapper{
        overflow-x:hidden;
        border:1px solid #ddd;
        border-radius:10px;
        background:white;
        width:100%;
    }
    
    .excel-grid{
        width:100%;
        table-layout:fixed;
    }
    
    .excel-grid th{
        min-width:unset;
        height:28px;
        font-size:11px;
        padding:3px;
    }
    
    .excel-grid td{
        min-width:unset;
        height:42px;
        font-size:11px;
        padding:4px;
        word-break:break-word;
        white-space:normal;
    }
    
    .excel-grid td .dropzone{
        min-width:100%;
        width:100%;
        min-height:34px;
        font-size:11px;
        padding:4px;
    }

    .excel-grid th{
        min-width:55px;
        height:32px;
        font-size:13px;
    }

    .excel-grid td{
        min-width:130px;
        height:45px;
        font-size:14px;
        padding:6px;
    }

    .progress{
        height:18px;
    }

    .btn{
        font-size:14px;
        padding:10px 14px;
        border-radius:10px;
    }

    .d-flex.justify-content-between.align-items-center{
        gap:10px;
    }

    .d-flex.justify-content-between.align-items-center h2{
        margin:0;
    }

    #resultBox h4{
        font-size:18px;
    }
}

.selected-choice{
    background:#ffc107 !important;
    color:#000 !important;
    outline:3px solid #333;
}

.mobile-instructions{
    display:none;
}

@media (max-width: 768px){
    .desktop-instructions{
        display:none;
    }

    .mobile-instructions{
        display:block;
    }
}