.post-zone {
    margin: 1.75rem 0;
}

.post-zone .post-code {
    margin: 0;
    border-color: rgba(129, 140, 248, 0.45);
    box-shadow: 0 1.5rem 3rem -1.5rem rgba(99, 102, 241, 0.55);
}

.post-zone .post-code-bar {
    background: rgba(99, 102, 241, 0.14);
    color: #c7d2fe;
    font-weight: 600;
}

.blog-content .post-zone pre.post-code-body {
    padding: 0 1.15rem;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2.1rem - 1px), rgba(255, 255, 255, 0.07) calc(2.1rem - 1px), rgba(255, 255, 255, 0.07) 2.1rem);
    font-size: 0.9rem;
    line-height: 2.1rem;
}

.blog-content .post-zone-a pre.post-code-body {
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2.1rem - 1px), rgba(255, 255, 255, 0.07) calc(2.1rem - 1px), rgba(255, 255, 255, 0.07) 2.1rem), linear-gradient(to bottom, transparent 2.1rem, rgba(99, 102, 241, 0.13) 2.1rem, rgba(99, 102, 241, 0.13) 8.4rem, transparent 8.4rem);
}

.post-zone pre.post-code-body::before {
    display: block;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
}

.post-zone-a pre.post-code-body::before {
    content: "NAME                TTL   TYPE  VALUE";
}

.post-zone-txt pre.post-code-body::before {
    content: "NAME                         TTL      TYPE VALUE";
}

.post-cname {
    gap: 1rem;
    align-items: stretch;
}

.post-cname .post-panel {
    display: flex;
    gap: 0.7rem;
    margin: 0;
}

.post-cname .post-panel > i {
    flex: none;
    font-size: 1.35rem;
    line-height: 1.7rem;
}

.post-cname .post-compare-good > i {
    color: #4ade80;
}

.post-cname .post-compare-bad > i {
    color: #f87171;
}

.post-hop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid var(--post-line);
    color: #a5b4fc;
}

.post-hop code {
    color: #e0e7ff;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.post-body td code.post-st {
    font-weight: 700;
}

.post-body td code.post-st-wait {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.post-body td code.post-st-ok {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.post-body td code.post-st-fail {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.post-body td code.post-st-idle {
    color: rgba(255, 255, 255, 0.7);
}

.blog-content .post-certs thead th code {
    color: inherit;
    font-size: 0.9em;
    text-transform: none;
}

.blog-content .post-modes tbody td:first-child {
    color: var(--post-strong);
    font-weight: 600;
}

.blog-content .post-modes th.post-modes-direct,
.blog-content .post-modes td.post-modes-direct {
    background: rgba(99, 102, 241, 0.1);
}

@media (max-width: 575.98px) {
    .blog-content .post-modes table,
    .blog-content .post-modes tbody,
    .blog-content .post-modes tr,
    .blog-content .post-modes td {
        display: block;
    }

    .blog-content .post-modes thead {
        display: none;
    }

    .blog-content .post-modes tr + tr {
        border-top: 1px solid var(--post-line);
    }

    .blog-content .post-modes td {
        border: 0;
        padding: 0.5rem 1rem;
    }

    .blog-content .post-modes td:first-child {
        padding-top: 0.85rem;
    }

    .blog-content .post-modes td.post-modes-direct {
        background: none;
    }

    .blog-content .post-modes td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
}