body{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    background:#f2f2f2;
    font-family:Arial;
}

.calculator{
    background:white;
    padding:20px;
    border-radius:15px;
    width:260px;
}

.top{
    display:flex;
    gap:5px;
}

#display{
    flex:1;
    height:50px;
    font-size:22px;
    text-align:right;
    margin-bottom:10px;
}

.theme-btn{
    width:50px;
}

.buttons{
    display:grid;
    grid-template-columns: repeat(4,1fr);
}

button{
    height:55px;
    margin:4px;
    font-size:18px;
    cursor:pointer;
}
.equal-btn{
    background: green;
    color: white;
}

/* 🌙 DARK MODE */
.dark{
    background:#1e1e1e;
    color:white;
}

.dark .calculator{
    background:#2b2b2b;
}

.dark button{
    background:#444;
    color:white;
}

.dark input{
    background:#111;
    color:white;
}