:root {
    --bg-color: #f0f0f0;
    --calculator-bg: #ffffff;
    --display-bg: #e9e9e9;
    --text-color: #333333;
    --button-bg: #fafafa;
    --button-hover-bg: #f5f5f5;
    --operator-bg: #ff9f43;
    --operator-text-color: #ffffff;
    --function-bg: #d4d4d2;
    --segment-off-color: #ddd;
    --segment-on-color: #333;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
}

.calculator-wrapper {
    width: 100%;
    max-width: 450px;
    padding: 15px;
}

.calculator {
    width: 100%;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    background-color: var(--calculator-bg);
}

.display-section {
    background-color: var(--display-bg);
    padding: 10px 15px;
    border-radius: 15px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    min-height: 70px;
}

.display {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 50px;
}

.display-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    width: 100%;
}

seven-segment-digit {
    height: 50px;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 26px; /* SVG original width */
}

.gt-indicator, .memory-indicator, .error-indicator {
    position: absolute;
    top: 8px;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    opacity: 0;
    transition: opacity 0.2s;
}

.gt-indicator { left: 15px; }
.memory-indicator { left: 45px; }
.error-indicator { left: 75px; }

.button-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 12px;
}

button {
    height: 60px;
    border: none;
    border-radius: 15px;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    background-color: var(--button-bg);
    color: var(--text-color);
    -webkit-tap-highlight-color: transparent;
}

button:hover { background-color: var(--button-hover-bg); }
button:active { transform: scale(0.96); }

.function-btn { background-color: var(--function-bg); }
.operator-btn { background-color: var(--operator-bg); color: var(--operator-text-color); font-size: 24px; }
.plus-btn { grid-row: span 2; height: auto; }
.zero-btn { grid-column: span 2; }
.equal-btn { background-color: var(--operator-bg); color: var(--operator-text-color); }
button:disabled { background-color: #e0e0e0; cursor: not-allowed; opacity: 0.5; }


@media (max-width: 480px) {
    html, body { height: 100%; overflow: hidden; }
    .calculator-wrapper { padding: 0; }
    .calculator {
        height: 100vh;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 20px;
    }
    .display-section { flex-shrink: 0; }
    .button-section {
        flex-grow: 1;
        display: flex;
        align-items: center;
    }
    .button-grid {
        width: 100%;
        gap: 10px;
    }
    button { height: 60px; font-size: 20px; }
}