.local-network-page {
    width: 1200px;
    margin: 24px auto 40px;
    color: #dfe2eb;
}

.local-network-card {
    padding: 24px 28px;
    border: 1px solid #303146;
    border-radius: 8px;
    background: #0b0d12;
}

.local-network-card + .local-network-card {
    margin-top: 24px;
}

.local-network-heading {
    display: flex;
    align-items: baseline;
}

.local-network-heading h1,
.local-network-heading h2,
.network-leak-title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.8em;
}

.local-network-heading span {
    color: #8d91a3;
}

.network-box,
.network-row {
    width: 100%;
}

.network-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #252735;
    color: #aeb3c3;
    line-height: 2em;
}

.network-row:last-child {
    border-bottom: 0;
}

.network-overview-row {
    padding-bottom: 0;
}

.network-row > div,
.network-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.network-row [class$="_ip"] {
    color: #39dcfd;
}

.network-provider,
.network-status-wrap {
    display: flex;
    align-items: center;
}

.provider-logo {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1em;
    background: #fff;
}

.provider-ct { background: #3479b0; }
.provider-cu { background: #d81e06; }
.provider-cm { background: #0071b7; }
.provider-hk { background: #e83426; }
.provider-google { background: #4285f4; }

.network-badge {
    padding: 2px 10px;
    border: 1px solid #303146;
    border-radius: 4px;
    background: #171a23;
    color: #c3c7d5;
    white-space: nowrap;
}

.network-status {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid rgba(0, 184, 88, .3);
    border-radius: 4px;
    background: rgba(0, 184, 88, .12);
    color: #47d989;
    font-size: 15px;
    line-height: 2em;
}

.network-status-icon {
    margin-right: 6px;
    font-weight: 700;
}

.network-loading {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #3d4153;
    border-top-color: #39dcfd;
    border-radius: 50%;
    vertical-align: -2px;
    animation: network-loading 1s linear infinite;
}

.network-leak-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.network-leak-grid .local-network-card {
    margin-top: 0;
}

.network-reveal {
    display: flex;
    gap: 20px;
    margin-top: 14px;
    color: #8d91a3;
    line-height: 2em;
}

.network-reveal span:first-child {
    min-width: 140px;
    color: #39dcfd;
    overflow-wrap: anywhere;
}

@keyframes network-loading {
    to { transform: rotate(360deg); }
}

@media screen and (max-width: 1280px) {
    .local-network-page {
        width: auto;
        margin-right: 24px;
        margin-left: 24px;
    }
}

@media screen and (max-width: 767px) {
    .local-network-page {
        margin: .16rem .12rem .32rem;
        font-size: .12rem;
    }

    .local-network-card {
        padding: .16rem .12rem;
        border-radius: .08rem;
    }

    .local-network-card + .local-network-card,
    .network-leak-grid {
        margin-top: .12rem;
    }

    .local-network-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: .06rem;
    }

    .local-network-heading h1,
    .local-network-heading h2,
    .network-leak-title {
        font-size: .16rem;
    }

    .network-row {
        grid-template-columns: minmax(0, 1fr);
        gap: .08rem;
        padding: .12rem 0;
    }

    .network-leak-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: .12rem;
    }

    .network-status {
        width: 100%;
        font-size: .13rem;
    }

    .network-reveal {
        flex-direction: column;
        gap: 0;
        margin-top: .08rem;
    }

    .network-reveal span:first-child {
        min-width: 0;
    }
}