* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --body: #cfd2d6;

    --case-top: #4b4f54;
    --case-bottom: #25282c;

    --lcd: #b8c8a8;
    --lcd-dark: #68765f;

    --key: #555a60;
    --key-top: #696f76;
    --key-shadow: #202226;

    --scientific: #363a3f;
    --special: #72777c;

    --orange: #d07b1b;
    --green: #3f8b5c;

    --text: #f5f5f5;
    --muted: #aeb2b6;
}

body {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 30px;

    font-family: Arial, sans-serif;

    background:
        radial-gradient(
            circle at 30% 10%,
            #ffffff,
            var(--body) 55%,
            #aeb2b7
        );
}


/* =========================
   REAL CALCULATOR BODY
========================= */

.calculator {
    position: relative;

    width: 440px;
    max-width: 100%;

    padding: 22px 20px 18px;

    border-radius: 30px 30px 25px 25px;

    background:
        linear-gradient(
            145deg,
            var(--case-top),
            var(--case-bottom)
        );

    border: 2px solid #17191b;

    box-shadow:
        0 35px 60px rgba(0, 0, 0, 0.4),
        0 8px 15px rgba(0, 0, 0, 0.3),
        inset 0 2px 2px rgba(255, 255, 255, 0.18),
        inset 0 -5px 8px rgba(0, 0, 0, 0.35);

    overflow: hidden;
}


/* Realistic plastic highlight */

.calculator::before {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;

    width: 80%;
    height: 3px;

    background: rgba(255, 255, 255, 0.25);

    border-radius: 50%;
}


/* =========================
   TOP BRAND AREA
========================= */

.top-bar {
    height: 55px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 8px;

    color: #d4d6d8;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 2px;
}

.top-bar::before {
    content: "SCIENTIFIC CALCULATOR";

    position: absolute;

    left: 25px;
    top: 30px;

    color: #bfc2c5;

    font-size: 10px;

    letter-spacing: 1.5px;
}


/* =========================
   BRAND DETAILS
========================= */

.top-bar > span {
    opacity: 0;
}

.top-bar > div {
    display: flex;

    align-items: center;

    gap: 12px;
}

#angleMode {
    padding: 3px 6px;

    color: #d9a04e;

    font-size: 9px;

    border-radius: 3px;

    background: rgba(0, 0, 0, 0.25);
}

#themeToggle {
    width: 27px;
    height: 27px;

    border-radius: 50%;

    border: 1px solid #191b1e;

    background:
        linear-gradient(
            145deg,
            #60656a,
            #33373b
        );

    color: white;

    cursor: pointer;

    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.4);
}


/* =========================
   LCD SCREEN
========================= */

.display {
    position: relative;

    height: 115px;

    margin-bottom: 18px;

    padding: 14px 17px;

    border-radius: 9px;

    background: #181a1b;

    border: 3px solid #111;

    box-shadow:
        inset 0 4px 8px rgba(0, 0, 0, 0.7),
        0 2px 2px rgba(255, 255, 255, 0.08);
}


/* LCD glass */

.display::before {
    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 4px;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.15),
            transparent 30%
        );

    pointer-events: none;
}


/* LCD reflection */

.display::after {
    content: "";

    position: absolute;

    top: 8px;
    left: 10px;

    width: 35%;
    height: 12px;

    background: rgba(255,255,255,0.09);

    filter: blur(4px);

    transform: skewX(-30deg);
}


#expression {
    position: relative;

    z-index: 2;

    height: 28px;

    text-align: right;

    color: var(--lcd-dark);

    font-family: "Courier New", monospace;

    font-size: 14px;

    overflow: hidden;

    white-space: nowrap;
}


#result {
    position: relative;

    z-index: 2;

    text-align: right;

    color: #253222;

    font-family: "Courier New", monospace;

    font-size: 36px;

    font-weight: bold;

    text-shadow:
        0 1px rgba(255,255,255,0.15);

    overflow: hidden;

    white-space: nowrap;
}


.memory-indicator {
    position: absolute;

    z-index: 3;

    left: 12px;
    top: 9px;

    color: #384533;

    font-family: monospace;

    font-size: 9px;

    opacity: 0;
}

.memory-indicator.active {
    opacity: 1;
}


/* =========================
   BUTTON PANEL
========================= */

.scientific-buttons {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 7px;

    padding: 5px;
}


/* =========================
   PHYSICAL KEYS
========================= */

.scientific-buttons button {
    position: relative;

    height: 44px;

    border: 1px solid #202226;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            var(--key-top),
            var(--key)
        );

    color: var(--text);

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 4px 0 var(--key-shadow),
        0 6px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px rgba(255,255,255,0.12);

    transition:
        transform 0.06s,
        box-shadow 0.06s;
}


/* Key highlight */

.scientific-buttons button::before {
    content: "";

    position: absolute;

    top: 2px;
    left: 10%;

    width: 80%;
    height: 2px;

    border-radius: 50%;

    background: rgba(255,255,255,0.12);
}


/* Hover */

.scientific-buttons button:hover {
    filter: brightness(1.12);
}


/* Pressed key */

.scientific-buttons button:active {
    transform: translateY(4px);

    box-shadow:
        0 0 0 var(--key-shadow),
        0 2px 3px rgba(0,0,0,0.3);
}


/* =========================
   SCIENTIFIC KEYS
========================= */

.scientific-buttons button[data-function] {
    background:
        linear-gradient(
            145deg,
            #41464c,
            #292d31
        );

    font-size: 12px;
}


/* =========================
   SPECIAL KEYS
========================= */

.scientific-buttons .special {
    background:
        linear-gradient(
            145deg,
            #7b8085,
            #555a5f
        );

    font-size: 10px;

    letter-spacing: 0.5px;
}


/* =========================
   FUNCTION KEYS
========================= */

.scientific-buttons .function {
    background:
        linear-gradient(
            145deg,
            #777c82,
            #555a60
        );

    font-size: 12px;
}


/* =========================
   OPERATORS
========================= */

.scientific-buttons .operator {
    background:
        linear-gradient(
            145deg,
            #e0922d,
            var(--orange)
        );

    font-size: 20px;

    box-shadow:
        0 4px 0 #7c490c,
        0 6px 8px rgba(0,0,0,0.25);
}


/* =========================
   EQUAL
========================= */

.scientific-buttons .equals {
    height: 95px;

    grid-row: span 2;

    background:
        linear-gradient(
            145deg,
            #55a96f,
            var(--green)
        );

    font-size: 23px;

    box-shadow:
        0 4px 0 #255837,
        0 6px 8px rgba(0,0,0,0.3);
}


/* =========================
   ZERO
========================= */

.scientific-buttons .zero {
    grid-column: span 2;
}


/* =========================
   SHIFT / ALPHA ACTIVE
========================= */

.scientific-buttons button.shift-active {
    outline: 2px solid #d8a04c;

    box-shadow:
        0 0 8px rgba(216,160,76,0.5);
}

.scientific-buttons button.alpha-active {
    outline: 2px solid #62a0d2;

    box-shadow:
        0 0 8px rgba(98,160,210,0.5);
}


/* =========================
   HISTORY
========================= */

.history-section {
    margin-top: 15px;

    padding: 10px;

    border-radius: 8px;

    background: rgba(0,0,0,0.15);

    border: 1px solid rgba(255,255,255,0.05);
}

.history-header {
    display: flex;

    justify-content: space-between;

    margin-bottom: 5px;

    color: var(--muted);

    font-size: 10px;
}

#clearHistory {
    border: none;

    background: transparent;

    color: var(--muted);

    cursor: pointer;

    font-size: 10px;
}

#history {
    max-height: 85px;

    overflow-y: auto;

    color: var(--muted);

    font-family: monospace;

    font-size: 11px;
}

.history-item {
    padding: 4px;

    border-bottom:
        1px solid rgba(255,255,255,0.04);

    cursor: pointer;
}

.history-item:hover {
    color: white;
}


/* =========================
   FOOTER
========================= */

footer {
    margin-top: 12px;

    text-align: center;

    color: #8f9498;

    font-size: 9px;

    line-height: 1.7;
}

footer strong {
    color: #c4c7ca;
}

.links {
    display: flex;

    justify-content: center;

    gap: 15px;
}

.links a {
    color: #8f9498;

    text-decoration: none;
}

.links a:hover {
    color: white;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 500px) {

    body {
        padding: 10px;
    }

    .calculator {
        width: 100%;

        padding: 15px;

        border-radius: 25px;
    }

    .display {
        height: 100px;
    }

    #result {
        font-size: 30px;
    }

    .scientific-buttons {
        gap: 5px;
    }

    .scientific-buttons button {
        height: 40px;

        font-size: 12px;
    }

    .scientific-buttons .equals {
        height: 85px;
    }
}


@media (max-width: 360px) {

    .calculator {
        padding: 11px;
    }

    .scientific-buttons {
        gap: 4px;
    }

    .scientific-buttons button {
        height: 37px;

        font-size: 10px;
    }

    .scientific-buttons .equals {
        height: 78px;
    }
}