.contact-tools {
    display: grid;
    gap: .9rem;
    margin-top: 1.25rem;
    max-width: 34rem;
}

#button-VYvKj903aI,
#button-lhGJ0rrWR1 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

#button-VYvKj903aI > .cbutton-VYvKj903aI,
#button-lhGJ0rrWR1 > .cbutton-lhGJ0rrWR1 { margin: 0; }

.contact-tool-group,
.contact-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
}

.contact-tool-label {
    flex-basis: 100%;
    font-size: .9rem;
    font-weight: 700;
    margin: 0;
}

.contact-tool-button {
    align-items: center;
    background: #f7f8f2;
    border: 2px solid #174f3a;
    border-radius: .4rem;
    color: #174f3a;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    height: 1.9rem;
    justify-content: center;
    min-height: 1.9rem;
    padding: .3rem;
    width: 1.9rem;
}

.contact-tool-button:hover { background: #dff0e3; }
.contact-tool-button:focus-visible { outline: 3px solid #e6df76; outline-offset: 3px; }
.contact-tool-button svg { fill: none; height: .85rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: .85rem; }
.contact-tool-status { min-height: 1.5em; margin: 0; }

.contact-qr-dialog {
    border: 0;
    border-radius: .75rem;
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 35%);
    color: #20231e;
    max-width: min(90vw, 25rem);
    padding: 1.25rem;
    text-align: center;
}

.contact-qr-dialog::backdrop { background: rgb(15 23 42 / 70%); }
.contact-qr-dialog h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
.contact-qr-dialog p { line-height: 1.5; margin: 0 0 1rem; }
.contact-qr-image { display: block; height: 280px; margin: 1rem auto; max-width: 100%; width: 280px; }
.contact-qr-fallback { color: #7b1e1e; font-weight: 700; }

:root[data-theme="dark"] .contact-tool-button {
    background: #bce8c8;
    border-color: #bce8c8;
    color: #111611;
}

:root[data-theme="dark"] .contact-tool-button:hover { background: #d5f3dd; }
:root[data-theme="dark"] .contact-qr-dialog { background: #171c17; color: #f7f8f2; }
:root[data-theme="dark"] .contact-qr-dialog h2 { color: #bce8c8; }

@media (max-width: 480px) {
    .contact-tool-group,
    .contact-card-actions { gap: .3rem; }
}