.tool-area{
    padding:60px 20px;
    display:flex;
    justify-content:center;
}

.calculator-card{
    width:340px;
    background:white;
    padding:25px;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(0,0,0,.16);
}

.calculator-card h1{
    text-align:center;
    color:#10B981;
    font-size:26px;
    margin-bottom:18px;
}

#display{
    width:100%;
    height:65px;
    font-size:26px;
    text-align:right;
    padding:12px;
    margin-bottom:18px;
    box-sizing:border-box;
    border:2px solid #d1d5db;
    border-radius:12px;
    outline:none;
}

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

.calc-btn{
    height:60px;
    font-size:20px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    background:#f1f5f9;
    transition:.2s;
}

.calc-btn:hover{
    background:#e2e8f0;
    transform:translateY(-2px);
}

.operator{
    background:#10B981;
    color:white;
}

.operator:hover{
    background:#059669;
}

.equal{
    background:#2563eb;
    color:white;
}

.equal:hover{
    background:#1d4ed8;
}

.clear{
    background:#ef4444;
    color:white;
}

.clear:hover{
    background:#dc2626;
}

.back{
    display:block;
    text-align:center;
    margin-top:20px;
    text-decoration:none;
    font-weight:bold;
    color:#10B981;
}

body.dark-mode .calculator-card{
    background:#1f2937;
    color:#e5e7eb;
}

body.dark-mode #display{
    background:#111827;
    color:#e5e7eb;
    border-color:#374151;
}

body.dark-mode .calc-btn{
    background:#374151;
    color:#e5e7eb;
}

body.dark-mode .calc-btn:hover{
    background:#4b5563;
}

body.dark-mode .operator{
    background:#10B981;
    color:white;
}

body.dark-mode .equal{
    background:#2563eb;
    color:white;
}

body.dark-mode .clear{
    background:#ef4444;
    color:white;
}
.clear-wide{
    grid-column:span 4;
}
/* =====================================================
   NUMBER IN WORDS
   ===================================================== */

.calculator-number-words {
    margin-top: 8px;
    min-height: 32px;
    padding: 8px 10px;

    border: 1px solid #dce7e3;
    border-radius: 8px;

    background: #f7fbf9;

    color: #14532d;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;

    overflow-wrap: anywhere;
}

.calculator-number-words:empty {
    display: none;
}