/* =======================================
   Scientific Calculator
======================================= */

.calculator{

    max-width:520px;

    margin:50px auto;

    padding:30px;

    background:#fff;

    border-radius:20px;

    box-shadow:0 8px 24px rgba(15,23,42,.08);

    animation:fadeUp .4s ease;

}

.calculator h1{

    margin:0 0 10px;

    text-align:center;

    color:#2563eb;

    font-size:32px;

}

.subtitle{

    margin:0 0 25px;

    text-align:center;

    color:#666;

    line-height:1.6;

}

#display{

    width:100%;

    height:70px;

    padding:15px 20px;

    margin-bottom:20px;

    border:none;

    border-radius:15px;

    background:#f8fafc;

    color:#222;

    font-size:32px;

    font-family:'Kanit',sans-serif;

    text-align:right;

    box-shadow:inset 0 2px 6px rgba(0,0,0,.08);

    overflow:hidden;

    text-overflow:ellipsis;

}

#display:focus{

    outline:none;

    box-shadow:

        inset 0 2px 6px rgba(0,0,0,.08),

        0 0 0 3px rgba(37,99,235,.18);

}

.buttons{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:12px;

}

.buttons button{

    height:65px;

    border:none;

    border-radius:14px;

    background:#fff;

    color:#222;

    font-size:20px;

    font-family:'Kanit',sans-serif;

    font-weight:600;

    cursor:pointer;

    user-select:none;

    box-shadow:0 4px 10px rgba(0,0,0,.08);

    transition:.25s;

}

.buttons button:hover{

    background:#eef4ff;

    transform:translateY(-2px);

}

.buttons button:active{

    transform:scale(.97);

}

.buttons button:focus-visible{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:2px;

}

.function{

    background:#2563eb !important;

    color:#fff;

}

.function:hover{

    background:#1d4ed8 !important;

}

.equal{

    background:#16a34a !important;

    color:#fff;

}

.equal:hover{

    background:#15803d !important;

    transform:translateY(-2px);

}

.back{

    display:block;

    margin-top:25px;

    text-align:center;

    color:#2563eb;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.back:hover{

    text-decoration:underline;

}

/* =======================================
   Tablet
======================================= */

@media (max-width:768px){

    .calculator{

        margin:25px auto;

        padding:24px;

    }

    .calculator h1{

        font-size:28px;

    }

    .subtitle{

        font-size:16px;

    }

    #display{

        height:64px;

        padding:14px 16px;

        font-size:28px;

    }

    .buttons{

        gap:10px;

    }

    .buttons button{

        height:58px;

        font-size:18px;

    }

}

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

@media (max-width:600px){

    .calculator{

        margin:20px 14px;

        padding:20px;

    }

    .calculator h1{

        font-size:26px;

    }

    .subtitle{

        font-size:15px;

    }

    #display{

        height:60px;

        padding:12px 15px;

        font-size:24px;

    }

    .buttons{

        gap:8px;

    }

    .buttons button{

        height:54px;

        font-size:17px;

    }

}

/* =======================================
   Small Phones
======================================= */

@media (max-width:400px){

    .calculator{

        margin:15px 10px;

        padding:16px;

    }

    .calculator h1{

        font-size:22px;

    }

    .subtitle{

        font-size:14px;

    }

    #display{

        height:54px;

        padding:10px 12px;

        font-size:20px;

    }

    .buttons{

        gap:6px;

    }

    .buttons button{

        height:46px;

        font-size:15px;

        border-radius:10px;

    }

}