:root {
    --bg-top: #0f2231;
    --bg-bottom: #08121a;
    --card-bg: rgba(10, 30, 42, 0.85);
    --card-stroke: rgba(141, 215, 235, 0.24);
    --title: #f2fbff;
    --text: #b4d5de;
    --input-bg: #0d2736;
    --input-stroke: #2f5868;
    --accent: #f3a631;
    --accent-2: #ffd591;
    --result-bg: rgba(19, 53, 69, 0.72);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Manrope", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 213, 145, 0.2), transparent 35%),
        radial-gradient(circle at 85% 5%, rgba(80, 167, 198, 0.3), transparent 35%),
        linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

.page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 16px;
}

.calculator-card {
    width: min(760px, 100%);
    border: 1px solid var(--card-stroke);
    background: var(--card-bg);
    border-radius: 24px;
    padding: 24px;
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 80px rgba(1, 7, 13, 0.55);
    animation: rise-in 500ms ease-out;
}

.eyebrow {
    margin: 0;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--accent-2);
}

h1 {
    margin: 10px 0 8px;
    font-family: "Orbitron", sans-serif;
    font-size: clamp(1.65rem, 3.5vw, 2.4rem);
    color: var(--title);
}

.subtitle {
    margin: 0 0 18px;
    line-height: 1.5;
}

.controls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-bottom: 18px;
}

label {
    font-weight: 600;
    color: #c3e9f4;
    align-self: end;
}

select,
input[type="button"] {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--input-stroke);
    background: var(--input-bg);
    color: #e4f6ff;
    padding: 10px 12px;
    font-size: 0.98rem;
}

select:focus,
input[type="button"]:focus {
    outline: 2px solid var(--accent-2);
    outline-offset: 1px;
}

.result-block {
    background: var(--result-bg);
    border: 1px solid rgba(99, 165, 187, 0.25);
    border-radius: 16px;
    padding: 14px;
    margin-top: 12px;
}

h3 {
    margin: 0 0 10px;
    color: #f4fbff;
    font-size: 1rem;
}

input[type="button"] {
    cursor: pointer;
    font-weight: 700;
    border: none;
    background: linear-gradient(135deg, var(--accent), #ec7a1e);
    color: #11202b;
    transition: transform 160ms ease, filter 160ms ease;
}

input[type="button"]:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

input[type="button"]:active {
    transform: translateY(0);
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    .calculator-card {
        padding: 18px;
        border-radius: 18px;
    }

    .controls-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}