/* Basic styles first */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}

.app-container {
    width: 100%;
    max-width: 960px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
}

.app-header h1, .app-header p { text-align: center; margin-bottom: 0.5rem; }
h1 { font-family: 'Orbitron', sans-serif; color: #1c2a39; font-size: 2.5rem; }
.subtitle { font-size: 1.1rem; color: #6c757d; margin-bottom: 2rem; }

.calculator-body { display: flex; flex-direction: column; align-items: center; gap: 3rem; }

.calculator {
    width: 100%;
    max-width: 640px; /* Wider for the new layout */
    background: #fdfdfd;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #dbe2e8;
}

.display {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-radius: 8px;
    padding: 1.5rem 1.2rem;
    margin-bottom: 1.5rem;
    text-align: right;
    min-height: 90px;
}
.expression-display { font-family: 'Roboto Mono', monospace; color: #bdc3c7; font-size: 1.5rem; min-height: 30px; }
.result-display { font-family: 'Orbitron', sans-serif; color: #ffffff; font-size: 2.8rem; }

/* 6-COLUMN GRID FOR THE "NUMBERS ON LEFT" LAYOUT */
.buttons {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(60px, auto); /* Ensure consistent row height */
    gap: 0.8rem;
}

.btn {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* Numbers are now plain */
.btn.number, .btn.dot {
    background-color: #fff;
    color: #212529;
    font-weight: bold;
    font-size: 1.3rem;
}
.btn.number:hover, .btn.dot:hover { background-color: #f8f9fa; }

/* Functions and operators have distinct colors */
.btn.func { background-color: #e9ecef; color: #343a40; }
.btn.func:hover { background-color: #ced4da; }

.btn.operator { background-color: #3498db; color: #fff; font-size: 1.4rem; }
.btn.operator:hover { background-color: #2980b9; }

.btn.control { background-color: #e67e22; color: #fff; }
.btn.control:hover { background-color: #d35400; }

.btn.equals {
    background: #2ecc71;
    color: #fff;
    font-size: 1.5rem;
    /* The problematic style is now removed. */
}
.btn.equals:hover { background-color: #27ae60; }

.btn.zero { grid-column: span 2; } /* Let it span two columns */

/* Instructions styles */
.instructions { width: 100%; margin-top: 2rem; padding: 1.5rem; background: #f8f9fa; border-radius: 12px; }
.instructions h2 { border-bottom: 2px solid #dee2e6; padding-bottom: 0.5rem; margin-bottom: 1rem; }
.instructions p, .instructions ul { line-height: 1.7; }
footer { text-align: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #eee; }
.back-link { color: #3498db; text-decoration: none; }