.gc-wrap {
    display: grid;
    gap: .5rem;
    max-width: 420px
}

.gc-wrap label {
    display: grid;
    gap: .25rem
}

.gc-wrap input,
.gc-wrap select,
.gc-wrap button {
    padding: .6rem;
    font: inherit
}

.gc-wrap button {
    cursor: pointer
}

.gc-result {
    margin-top: .5rem
}

.gc-result-main-txt {
    font-size: 2em;
}

.gc-note {
    font-size: .85em;
    opacity: .8
}

.gc-wrap input.gc-invalid {
    border-color: #dc2626;
    /* rosso */
    outline-color: #dc2626;
}

.gc-error {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: .25rem;
}

.gc-wrap {
    display: grid;
    gap: .5rem;
    max-width: 420px;
}

.gc-wrap label {
    display: grid;
    gap: .25rem;
}

.gc-wrap input,
.gc-wrap select,
.gc-wrap button {
    padding: .6rem;
    font: inherit;
}

.gc-wrap button {
    cursor: pointer;
}

.gc-result {
    margin-top: .5rem;
}

.gc-result-main-txt {
    font-size: 1.25rem;
}

.gc-note {
    font-size: .85em;
    opacity: .8;
}

.gc-wrap input.gc-invalid {
    border-color: #dc2626;
    outline-color: #dc2626;
}

.gc-error {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: .25rem;
}

/* opzionale: affianca metallo+grade su schermi larghi */
@media (min-width: 640px) {

    #gc-metal,
    #gc-grade {
        width: 100%;
    }
}

.gc-group[hidden] {
    display: none !important;
}