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

        body {
            font-family: Arial, sans-serif;
            background: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 10px;
        }

        .calculator {
            background: #2d2d2d;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            width: 100%;
            max-width: 320px;
        }

        @media (max-width: 480px) {
            .calculator {
                padding: 15px;
            }

            .display {
                font-size: 1.5rem;
                padding: 15px;
            }

            button {
                padding: 18px;
                font-size: 1.1rem;
            }
        }

        @media (max-width: 360px) {
            button {
                padding: 15px;
                font-size: 1rem;
            }
        }

        .display {
            background: #1a1a1a;
            color: #fff;
            font-size: 2rem;
            padding: 20px;
            text-align: right;
            border-radius: 10px;
            margin-bottom: 20px;
            min-height: 60px;
            word-wrap: break-word;
            border: 2px solid #3a3a3a;
        }

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

        button {
            padding: 20px;
            font-size: 1.2rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: bold;
        }

        button:hover {
            transform: scale(1.05);
        }

        button:active {
            transform: scale(0.95);
        }

        .number, .decimal {
            background: #4a4a4a;
            color: #fff;
        }

        .number:hover, .decimal:hover {
            background: #5a5a5a;
        }

        .operator {
            background: #ff9500;
            color: #fff;
        }

        .operator:hover {
            background: #ffaa33;
        }

        .clear {
            background: #d4d4d2;
            color: #1a1a1a;
        }

        .clear:hover {
            background: #e4e4e2;
        }

        .equals {
            background: #ff9500;
            color: #fff;
        }

        .equals:hover {
            background: #ffaa33;
        }