.bmr-calculator {
    --bg: var(--color-bmr-bg);
    --accent: var(--color-wellio-blue);
    --accent-hover: var(--color-accent-hover);
    --text: var(--color-text-strong);
    --border: var(--color-border-light);
    --content-max-width: var(--content-max-width);

    backdrop-filter: blur(12px);
    background: var(--bg);
    border-radius: 18px;
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    margin-block: 2rem;
    margin-inline: auto;
    max-inline-size: var(--content-max-width);
    padding: 2rem;
    transition: all 0.3s ease;

    h3 {
        color: var(--accent);
        font-size: 1.6rem;
        font-weight: 700;
        margin-block-end: 0.5rem;
        text-align: center;
    }

    p {
        color: var(--color-text-muted);
        font-size: 0.95rem;
        margin-block-end: 1.5rem;
        text-align: center;
    }

    form {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        label {
            color: var(--text);
            font-size: 0.95rem;
            font-weight: 600;
        }

        input,
        select {
            background-color: var(--color-white);
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 1rem;
            padding: 0.8rem;
            transition: 0.2s ease all;

            &:focus {
                border-color: var(--accent);
                box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
                outline: none;
            }
        }

        input[type='radio'] {
            accent-color: var(--accent);
            inline-size: auto;
        }

        .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }
    }

    button {
        background: var(--color-wellio-blue);
        border: 0;
        border-radius: 8px;
        color: var(--color-white);
        cursor: pointer;
        font-size: 1rem;
        font-weight: 600;
        margin-block-start: 1rem;
        padding: 0.9rem;
        text-align: center;
        transition: background 0.3s ease, transform 0.1s ease;

        &:hover {
            transform: translateY(-2px);
        }

        &:active {
            transform: scale(0.98);
        }
    }

    .reset-btn {
        background: transparent;
        border: 2px solid var(--accent);
        border-radius: 8px;
        color: var(--accent);
        cursor: pointer;
        font-size: 1rem;
        font-weight: 600;
        margin-block-start: 0.5rem;
        padding: 0.8rem;
        text-align: center;
        transition: all 0.3s ease;
    }

    .reset-btn:hover {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
        transform: translateY(-2px);
    }

    .reset-btn:active {
        transform: scale(0.98);
    }


    .results {
        animation: fadeIn 0.5s ease forwards;
        background: var(--color-background-tertiary);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        display: none;
        margin-block-start: 1.5rem;
        padding: 1.2rem;

        p {
            color: var(--text);
            font-size: 1rem;
            margin-block: 0.3rem;
            text-align: center;
        }

        strong {
            color: var(--accent);
        }
    }

    .error-message {
        background: color-mix(in srgb, var(--accent) 10%, var(--color-background-tertiary));
        border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
        border-radius: 10px;
        color: var(--accent);
        font-weight: 600;
        margin-block: 1rem;
        padding: 1rem;
        text-align: center;
    }

}