/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* BODY */
body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#1f1f1f,#3a3a3a);
    font-family:Arial;
}

/* BACKGROUND LIGHT */
body.light-bg{
    background:linear-gradient(135deg,#ffffff,#dcdcdc);
}

/* CALCULATOR */
.calculator{
    background:#000;
    padding:20px;
    width:350px;
    border-radius:15px;
    box-shadow:0 0 25px rgba(0,0,0,0.5);
}

/* CALCULATOR LIGHT */
.calculator.light{
    background:#f5f5f5;
}

/* DISPLAY */
#display{
    width:100%;
    height:100px;
    background:#111;
    color:#0f0;
    font-size:32px;
    border:none;
    border-radius:10px;
    text-align:right;
    padding:15px;
    margin-bottom:15px;
}

/* DISPLAY LIGHT */
.calculator.light #display{
    background:#fff;
    color:#000;
}

/* GRID */
.buttons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.equal {
    grid-row: span 2;
}


/* BUTTON */
button{
    height:55px;
    font-size:20px;
    border-radius:10px;
    border:none;
    cursor:pointer;
    background:#333;
    color:white;
}

button:hover{background:#555;}
button:active{transform:scale(0.95);}

/* BUTTON LIGHT */
.calculator.light button{
    background:#e0e0e0;
    color:#000;
}

/* COLORS */
.operator{background:#ff9500;}
.clear{background:#ff3b30;grid-column:span 2;}
.equal{background:#007aff;}
.zero{grid-column:span 2;}

/* SWITCHES */
.switch-container{
    margin-top:20px;
    display:flex;
    gap:15px;
}

.switch{
    background:#34c759;
    width:160px;
    height:45px;
    border-radius:12px;
    font-size:14px;
    color:white;
}

/* FOOTER */
footer{
    margin-top:15px;
    color:#ccc;
}

/* FOOTER LIGHT */
body.light-bg footer{
    color:#000;
}


/* ================= ANIMATIONS ================= */

/* Calculator entrance animation */
.calculator {
    animation: popIn 0.6s ease-out;
}

/* Button hover glow */
button:hover {
    box-shadow: 0 0 10px rgba(255,255,255,0.4);
}

/* Button click ripple */
button:active {
    animation: press 0.15s ease;
}

/* Display typing blink */
#display {
    animation: blink 1.2s infinite;
}

/* Theme switch animation */
.calculator.light,
body.light-bg {
    transition: background 0.4s ease;
}

/* ================= KEYFRAMES ================= */

@keyframes popIn {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    80% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes press {
    0% { transform: scale(1); }
    50% { transform: scale(0.92); }
    100% { transform: scale(1); }
}

@keyframes blink {
    0%, 100% { box-shadow: 0 0 8px #0f0; }
    50% { box-shadow: 0 0 2px #0f0; }
}