/* Display Area Styles */
.display {
    background: linear-gradient(135deg, #0A0A14 0%, #12121E 100%);
    color: var(--text);
    padding: 28px;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Consolas', monospace;
    position: relative;
    border-bottom: 2px solid var(--border);
    box-shadow: inset 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--primary) 20%,
        var(--secondary) 50%,
        var(--accent) 80%,
        transparent 100%);
    animation: scan 4s linear infinite;
    filter: blur(1px);
}

.display::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(79, 70, 229, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.expression {
    font-size: 17px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    min-height: 26px;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    animation: fadeIn 0.3s ease;
}

.result {
    font-size: 40px;
    font-weight: 300;
    letter-spacing: 2px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, var(--text) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 20px var(--primary-glow)) drop-shadow(0 0 40px var(--primary-glow));
    animation: fadeIn 0.3s ease;
}

.result:not(:empty) {
    animation: pulse 2s ease-in-out infinite;
}