html, body {
    box-sizing: border-box;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    margin: 0;
    padding: 0;
    background: none;
}

.calculator-container {
    width: 260px;
    background: var(--calc-bg, #1e1e1e);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--calc-border, #333);
}

.calculator-content {
    padding: 15px;
}

.display {
    background: var(--display-bg, #252525);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    text-align: right;
    border: 1px solid var(--display-border, #444);
    min-height: 60px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.previous-operand {
    color: var(--prev-op-color, #a0d468);
    font-size: 14px;
    min-height: 16px;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.current-operand {
    color: var(--current-op-color, #e6e9ed);
    font-size: 28px;
    min-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

button {
    border: none;
    border-radius: 5px;
    padding: 12px 0;
    font-size: 16px;
    cursor: pointer;
    background: var(--btn-bg, #2f2f2f);
    color: var(--btn-text-color, #e6e9ed);
    box-shadow: 0 2px 0 var(--btn-shadow, #111);
}

button:active {
    transform: translateY(2px);
    box-shadow: none;
}

.digit { background: var(--digit-bg, #3a3a3a); }
.operator { background: var(--operator-bg, #4a4a4a); color: var(--operator-color, #ffcc5c); }
.clear { background: var(--clear-bg, #ed5565) !important; }
.delete { background: var(--delete-bg, #ff9900); color: var(--delete-color, #fff); }
.equals { background: var(--equals-bg, #48cfad); color: var(--equals-color, #1a1a1a); }

.span-2 { grid-column: span 2; }