.support-settings {
    display: grid;
    gap: 1.25rem;
}

.support-settings__content {
    display: grid;
    gap: 1.25rem;
}

.support-settings__alert {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1rem;
    border: 1px solid rgb(254 205 211);
    border-radius: .5rem;
    color: rgb(190 18 60);
    background: rgb(255 241 242);
    font-size: .875rem;
}

.support-settings__alert svg { width: 1.25rem; height: 1.25rem; flex: none; }

.support-settings__toolbar {
    display: flex;
    align-items: end;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgb(229 231 235);
}

.support-settings__session { width: min(100%, 20rem); }
.support-settings__session > label,
.support-settings__field > label {
    display: block;
    margin-bottom: .4rem;
    color: rgb(55 65 81);
    font-size: .8125rem;
    font-weight: 600;
}

.support-settings__connection {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 2.4rem;
    margin-right: auto;
    padding: .45rem .8rem;
    border: 1px solid rgb(229 231 235);
    border-radius: .5rem;
    background: rgb(249 250 251);
}

.support-settings__connection-dot {
    width: .65rem;
    height: .65rem;
    border-radius: 999px;
    background: rgb(245 158 11);
    box-shadow: 0 0 0 4px rgb(245 158 11 / .12);
}

.support-settings__connection.is-ready .support-settings__connection-dot {
    background: rgb(16 185 129);
    box-shadow: 0 0 0 4px rgb(16 185 129 / .12);
}

.support-settings__connection small,
.support-settings__connection strong { display: block; line-height: 1.2; }
.support-settings__connection small { color: rgb(107 114 128); font-size: .68rem; }
.support-settings__connection strong { margin-top: .14rem; color: rgb(17 24 39); font-size: .82rem; }

.support-settings__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.support-settings__stat {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .9rem 1rem;
    border: 1px solid rgb(229 231 235);
    border-radius: .5rem;
    background: rgb(250 250 250);
}

.support-settings__stat--wide { grid-column: span 2; }
.support-settings__stat > svg { width: 1.25rem; height: 1.25rem; flex: none; color: rgb(107 114 128); }
.support-settings__stat span,
.support-settings__stat strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-settings__stat span { color: rgb(107 114 128); font-size: .72rem; }
.support-settings__stat strong { margin-top: .15rem; color: rgb(17 24 39); font-size: .9rem; }

.support-settings__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 1.5rem;
    align-items: start;
}

.support-settings__main { min-width: 0; }
.support-settings__group {
    padding: 1rem 0;
    border-top: 1px solid rgb(229 231 235);
}
.support-settings__group:first-child { padding-top: 0; border-top: 0; }

.support-settings__group-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.support-settings__group-heading h3,
.support-settings__qr-heading h3 { margin: 0; color: rgb(17 24 39); font-size: .9rem; font-weight: 700; letter-spacing: 0; }
.support-settings__group-heading p,
.support-settings__qr-heading p { margin: .2rem 0 0; color: rgb(107 114 128); font-size: .76rem; line-height: 1.45; }
.support-settings__queue-count {
    flex: none;
    padding: .25rem .55rem;
    border-radius: 999px;
    color: rgb(75 85 99);
    background: rgb(243 244 246);
    font-size: .7rem;
    font-weight: 600;
}
.support-settings__queue-count.is-success { color: rgb(4 120 87); background: rgb(209 250 229); }
.support-settings__queue-count.is-error { color: rgb(190 18 60); background: rgb(255 228 230); }
.support-settings__sync-result {
    margin: .75rem 0 0;
    color: rgb(75 85 99);
    font-size: .76rem;
    line-height: 1.45;
}
.support-settings__sync-result.is-error { color: rgb(190 18 60); }

.support-settings__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.support-settings__test-form {
    display: grid;
    grid-template-columns: minmax(12rem, .45fr) minmax(15rem, 1fr) auto;
    gap: .75rem;
    align-items: end;
}
.support-settings__field { min-width: 0; }
.support-settings__error { margin: .3rem 0 0; color: rgb(225 29 72); font-size: .72rem; }

.support-settings__technical {
    border-top: 1px solid rgb(229 231 235);
    padding-top: 1rem;
}
.support-settings__technical summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: rgb(75 85 99);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.support-settings__technical summary::-webkit-details-marker { display: none; }
.support-settings__technical summary svg { width: 1rem; height: 1rem; transition: transform .18s ease; }
.support-settings__technical[open] summary svg { transform: rotate(180deg); }
.support-settings__technical dl { display: grid; gap: .6rem; margin: .9rem 0 0; }
.support-settings__technical dl div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; font-size: .76rem; }
.support-settings__technical dt { color: rgb(107 114 128); }
.support-settings__technical dd { margin: 0; overflow-wrap: anywhere; color: rgb(31 41 55); font-weight: 500; }

.support-settings__qr {
    overflow: hidden;
    border: 1px solid rgb(229 231 235);
    border-radius: .6rem;
    background: rgb(255 255 255);
}
.support-settings__qr-heading {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid rgb(229 231 235);
}
.support-settings__qr-heading > svg { width: 1.25rem; height: 1.25rem; color: rgb(107 114 128); }
.support-settings__qr-body {
    display: grid;
    min-height: 15rem;
    place-items: center;
    padding: 1.25rem;
    background: rgb(249 250 251);
}
.support-settings__qr-body img { display: block; width: min(100%, 14rem); height: auto; }
.support-settings__qr-status { display: grid; justify-items: center; gap: .35rem; text-align: center; color: rgb(107 114 128); }
.support-settings__qr-status svg { width: 2.4rem; height: 2.4rem; }
.support-settings__qr-status strong { color: rgb(55 65 81); font-size: .85rem; }
.support-settings__qr-status span { font-size: .72rem; }
.support-settings__qr-status.is-ready svg { color: rgb(16 185 129); }
.support-settings__qr-date { margin: 0; padding: .65rem 1rem; border-top: 1px solid rgb(229 231 235); color: rgb(107 114 128); text-align: center; font-size: .68rem; }
.support-settings__cleanup { min-width: 0; }

.dark .support-settings__toolbar,
.dark .support-settings__group,
.dark .support-settings__technical { border-color: rgb(255 255 255 / .1); }
.dark .support-settings__connection,
.dark .support-settings__stat,
.dark .support-settings__qr { border-color: rgb(255 255 255 / .1); background: rgb(255 255 255 / .04); }
.dark .support-settings__qr-heading { border-color: rgb(255 255 255 / .1); }
.dark .support-settings__qr-body { background: rgb(255 255 255 / .025); }
.dark .support-settings__session > label,
.dark .support-settings__field > label,
.dark .support-settings__connection strong,
.dark .support-settings__stat strong,
.dark .support-settings__group-heading h3,
.dark .support-settings__qr-heading h3,
.dark .support-settings__qr-status strong,
.dark .support-settings__technical dd { color: rgb(243 244 246); }
.dark .support-settings__connection small,
.dark .support-settings__stat span,
.dark .support-settings__group-heading p,
.dark .support-settings__qr-heading p,
.dark .support-settings__technical summary,
.dark .support-settings__technical dt { color: rgb(156 163 175); }
.dark .support-settings__sync-result { color: rgb(209 213 219); }
.dark .support-settings__sync-result.is-error { color: rgb(253 164 175); }

@media (max-width: 1023px) {
    .support-settings__workspace { grid-template-columns: 1fr; }
    .support-settings__qr { order: -1; }
    .support-settings__qr-body { min-height: 11rem; }
    .support-settings__qr-status { padding: 1rem; }
}

@media (max-width: 767px) {
    .support-settings__toolbar { align-items: stretch; flex-direction: column; }
    .support-settings__session { width: 100%; }
    .support-settings__connection { margin-right: 0; }
    .support-settings__stats { grid-template-columns: 1fr 1fr; }
    .support-settings__stat--wide { grid-column: span 2; }
    .support-settings__test-form { grid-template-columns: 1fr; }
    .support-settings__test-form > .fi-btn { justify-self: start; }
}

@media (max-width: 479px) {
    .support-settings__stats { grid-template-columns: 1fr; }
    .support-settings__stat--wide { grid-column: auto; }
    .support-settings__group-heading--inline { display: block; }
    .support-settings__queue-count { display: inline-block; margin-top: .65rem; }
    .support-settings__technical dl div { grid-template-columns: 1fr; gap: .2rem; }
}