.dns-stability-form {
    display: grid;
    grid-template-columns: 180px minmax(320px, 1fr) 110px 100px 120px;
    align-items: end;
    width: 100%;
    max-width: 1360px;
    overflow: visible;
}

.dns-stability-field {
    position: relative;
    min-width: 0;
    text-align: left;
}

.dns-stability-form .banner_label {
    left: 0;
}

.dns-stability-form .input-g,
.dns-stability-form .dns-stability-resolver-trigger,
.dns-stability-form .dns-stability-common-select {
    width: 100%;
    height: 50px;
}

.dns-stability-common-select dd a {
    display: block;
    padding: 0 10px;
    line-height: 32px;
}

.dns-stability-common-select dd a.on {
    color: #f8a82c;
    background: #f5f7fa;
}

.dns-stability-form select.input-g {
    padding: 0 34px 0 14px;
    border: 1px solid #dcdfe6;
    background: #fff;
}

.dns-stability-form .dns-stability-resolver-trigger {
    position: relative;
    display: block;
    padding: 0 34px 0 14px !important;
    line-height: 48px !important;
    text-align: left;
    color: #151b26;
}

.dns-stability-form .dns-stability-resolver-trigger::before {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 6px;
    height: 6px;
    content: '';
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: translateY(-70%) rotate(45deg);
}

.dns-stability-form .dns-stability-resolver-trigger.on {
    border-color: #e6a550;
}

.dns-stability-cascade {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    left: 0;
    display: none;
    width: 600px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(31, 45, 61, .1);
    font-size: 12px;
}

.dns-stability-cascade.on {
    display: block;
}

.dns-stability-cascade-path,
.dns-stability-cascade-footer {
    height: 42px;
    padding: 0 12px;
    line-height: 42px;
    text-align: left;
}

.dns-stability-cascade-body {
    display: grid;
    grid-template-columns: 130px 190px 1fr;
    height: 248px;
}

.dns-stability-cascade-list {
    overflow-y: auto;
    padding: 6px;
    border-right: 1px solid #ebeef5;
}

.dns-stability-cascade-list:last-child {
    border-right: 0;
}

.dns-stability-cascade-list button,
.dns-stability-cascade-list label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    line-height: 32px;
    height: 32px;
    font-size: 12px;
    margin-bottom: 3px;
}

.dns-stability-cascade-list button:hover,
.dns-stability-cascade-list button.on,
.dns-stability-cascade-list label:hover,
.dns-stability-cascade-list label.on {
    background: #fff9e9;
}

.dns-stability-cascade-list label {
    justify-content: flex-start;
}

.dns-stability-cascade-footer button,
.dns-stability-expected-toggle,
.dns-stability-selection-clear,
.dns-stability-selected-tag button {
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
}

.dns-stability-expected-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.dns-stability-result-summary {
    flex-wrap: wrap;
    gap: 8px 20px;
}

.dns-stability-result-group {
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background: #fff;
}

.dns-stability-result-group:last-child {
    margin-bottom: 0;
}

.dns-stability-group-head {
    min-height: 54px;
    padding: 10px 24px;
    border-bottom: 1px solid #e5e5e5;
}

.dns-stability-group-head .badge {
    display: inline-block;
}

.dns-stability-group-location {
    gap: 6px;
    white-space: nowrap;
}

.dns-stability-table-scroll {
    overflow-x: auto;
}

.dns-stability-result-table {
    table-layout: fixed;
    min-width: 760px;
}

.dns-stability-result-table th {
    background: #ffd515;
    color: #161a20;
    font-weight: 700;
}

.dns-stability-result-table th:first-child,
.dns-stability-result-table td:first-child {
    width: 76px;
}

.dns-stability-result-table td {
    height: 64px;
    vertical-align: middle;
}

.dns-stability-result-table .loading-mini {
    display: inline-block;
}

.dns-stability-single-table th:nth-child(1),
.dns-stability-single-table td:nth-child(1) {
    width: 6%;
}

.dns-stability-single-table th:nth-child(2),
.dns-stability-single-table td:nth-child(2) {
    width: 46%;
}

.dns-stability-single-table th:nth-child(n+3),
.dns-stability-single-table td:nth-child(n+3) {
    width: 16%;
}

.dns-stability-single-row-normal td {
    background: #f0f9eb;
}

.dns-stability-single-row-mismatch td {
    background: #fffbf3;
}

.dns-stability-single-row-timeout td {
    background: #fff0f0;
}

.dns-stability-single-row-empty td {
    background: #f5f7fa;
}

.dns-stability-cell-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 8px;
}

.dns-stability-cell-content > span {
    flex: none;
    font-size: 12px;
    white-space: nowrap;
}

.dns-stability-cell-meta {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.dns-stability-cell-normal {
    background: #f0f9eb;
}

.dns-stability-cell-mismatch {
    background: #fffbf3;
}

.dns-stability-cell-timeout {
    background: #fff0f0;
}

.dns-stability-status-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
}

.dns-stability-cell-empty {
    background: #f5f7fa;
    text-align: right;
    padding-right: 15px !important;
}

.dns-stability-expected-toggle .iconfont {
    transition: transform .2s;
}

.dns-stability-expected-toggle.on .iconfont {
    transform: rotate(180deg);
}

.dns-stability-expected {
    display: none;
}

.dns-stability-expected .text-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    resize: vertical;
}

.dns-stability-selection {
    display: none;
    min-height: 32px;
    text-align: left;
    font-size: 12px;
}

.dns-stability-selection.on {
    display: flex;
}

.dns-stability-selection-content,
.dns-stability-selected-tags {
    flex-wrap: wrap;
    gap: 8px;
}

.dns-stability-selection-title {
    line-height: 32px;
    white-space: nowrap;
    margin-right: 8px;
}

.dns-stability-selected-tag {
    gap: 8px;
    background: #f5f7fa;
    font-size: 12px !important;
}

.dns-stability-selected-tag button {
    color: #5c5f66;
    font-size: 16px;
    line-height: 1em;
    cursor: pointer;
}

@media screen and (max-width: 1100px) {
    .dns-stability-form {
        grid-template-columns: 180px minmax(260px, 1fr) 100px 90px;
    }
}

@media screen and (max-width: 767px) {
    .dns-stability-banner {
        padding-bottom: 32px !important;
    }

    .dns-stability-form {
        grid-template-columns: 1fr 1fr;
        gap: 44px 12px;
        margin-top: 56px !important;
    }

    .dns-stability-resolver-field,
    .dns-stability-host-field {
        grid-column: 1 / -1;
    }

    .dns-stability-cascade {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 82vh;
        overflow-y: auto;
        border-radius: 8px 8px 0 0;
    }

    .dns-stability-cascade-body {
        grid-template-columns: 100px 120px minmax(150px, 1fr);
        height: 280px;
        overflow-x: auto;
    }

    .dns-stability-selection,
    .dns-stability-selection-content {
        align-items: flex-start;
    }

    .dns-stability-selection {
        gap: 10px;
    }

    .dns-stability-selected-tags {
        width: 100%;
    }

    .dns-stability-result-summary {
        align-items: flex-start;
    }

    .dns-stability-result-summary .host_name {
        width: 100%;
    }

    .dns-stability-group-head {
        padding: 10px 12px;
    }
}