/* 1. تنظیمات عمومی صفحه و فونت */
body {
    display: flex; /* برای قرار دادن ماشین حساب در مرکز صفحه */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* حداقل ارتفاع صفحه */
    margin: 0;
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4; /* رنگ پس‌زمینه روشن */
}

/* 2. کانتینر اصلی ماشین حساب */
.calculator {
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    width: 300px; /* عرض ثابت برای ماشین حساب */
    background-color: #ffffff; /* رنگ تیره برای بدنه ماشین حساب */
    padding: 20px;
}

/* 3. صفحه نمایش */
.calculator-screen {
    width: 100%;
    height: 60px;
    background-color: #9b9a9a;
    color: #fff;
    text-align: right; /* متن از راست شروع شود */
    font-size: 2.5em; /* سایز بزرگ برای نمایش اعداد */
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 15px;
    box-sizing: border-box; /* اطمینان از اینکه padding و border به عرض اضافه نشوند */
}

/* 4. بخش دکمه‌ها */
.calculator-keys {
    display: grid;
    /* تعریف شبکه 4 ستونه با عرض مساوی */
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px; /* فاصله بین دکمه‌ها */
}

/* 5. استایل دکمه‌های عمومی */
.calculator-keys button {
    height: 60px;
    border: none;
    border-radius: 50px; /* دکمه‌های گرد */
    font-size: 1.5em;
    cursor: pointer;
    transition: background-color 0.1s;
}

/* استایل دکمه‌های اعداد */
.calculator-keys button[value]:not(.operator):not(.all-clear) {
    background-color: #4e4e4e; /* رنگ خاکستری تیره برای اعداد */
    color: #fff;
}

/* 6. استایل دکمه‌های عملگر (+, -, *, /) */
.operator {
    background-color: #ff9500 !important; /* رنگ نارنجی برای عملگرها */
    color: #fff !important;
}

/* 7. استایل دکمه پاک کردن (AC) */
.all-clear {
    background-color: #d8d8d8; /* رنگ خاکستری روشن */
    color: #333;
    /* این دکمه دو ستون از Grid را اشغال می‌کند */
    grid-column: span 2; 
    border-radius: 30px; /* کمی تغییر در گردی به دلیل عرض بیشتر */
}

/* 8. استایل دکمه مساوی (=) */
.equal-sign {
    background-color: #0505f8 !important; /* رنگ آبی برای دکمه مساوی */
    color: #fff;
    /* این دکمه معمولاً در ستون آخر قرار می‌گیرد، اما اینجا رنگ خاصی دارد */
}

/* 9. جلوه Hover (وقتی ماوس روی دکمه می‌رود) */
.calculator-keys button:hover {
    opacity: 0.8; /* کمی شفاف شود */
}
https://unpkg.com/sweetalert/dist/sweetalert.min.js