/* =================================================================
   PROFESSIONAL CALCULATOR - CYBER-NOIR THEME
================================================================= */
:root {
    --primary-glow-color: #00aeff;
    --background-dark: #0f0c29;
    --background-gradient: linear-gradient(to right, #24243e, #302b63, #0f0c29);
    --surface-color: rgba(15, 12, 41, 0.5);
    --border-color: rgba(0, 174, 255, 0.5);
    --navbar-height: 60px;
}
/* ----- Base & Body Styles ----- */
html {
    font-size: 16px;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    margin: 0;
    padding-top: var(--navbar-height); /* Prevent content from hiding behind fixed navbar */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background: var(--background-dark);
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
    background: var(--background-gradient);
    font-family: 'Orbitron', sans-serif;
}
/* ----- Navigation Bar ----- */
.navbar {
    background: var(--surface-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 0 20px rgba(0, 174, 255, 0.2);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.navbar-brand {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 5px var(--primary-glow-color);
}
.navbar-brand:hover {
    color: #fff;
}
.nav-link {
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}
.nav-link:hover, .nav-link.active {
    color: #fff;
    text-shadow: 0 0 5px var(--primary-glow-color);
}
/* ----- Calculator Component ----- */
.calculator {
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    background: var(--surface-color);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 30px rgba(0, 174, 255, 0.25);
    overflow: hidden;
    margin-left: -10%;
    margin-top: 20%;
}
/* ----- Calculator Display ----- */
.calculator__display {
    background-color: rgba(0,0,0,0.3);
    color: #fff;
    font-size: 3.5rem;
    font-weight: 700;
    padding: 1.5rem 2rem;
    text-align: right;
    word-wrap: break-word;
    word-break: break-all;
    text-shadow: 0 0 5px var(--primary-glow-color);
}
/* ----- Calculator Keys ----- */
.calculator__keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px; /* Creates the grid lines */
    background-color: var(--border-color);
}
.calculator__keys button {
    padding: 1.5rem 0;
    font-size: 1.5rem;
    font-family: inherit;
    border: none;
    background-color: var(--surface-color);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
/* Visual feedback for keyboard presses */
.calculator__keys button.is-pressed {
    background-color: var(--primary-glow-color);
    color: var(--background-dark);
}
.calculator__keys button:hover {
    background-color: rgba(0, 174, 255, 0.2);
}
.calculator__keys button:active {
    background-color: var(--primary-glow-color);
    color: var(--background-dark);
}
.key--operator {
    color: var(--primary-glow-color);
}
.key--equal {
    grid-column: span 2;
    background-color: var(--primary-glow-color);
    color: var(--background-dark);
}
.key--equal:hover {
     background-color: rgba(0, 174, 255, 0.8);
}