:root {
    --p: #18AACC;
    --pd: #0f87a5;
    --ps: rgba(24,170,204,.1);
    --ink: #1d2b36;
    --mut: #7a8794;
    --line: rgba(24,60,80,.09);
    --navy: #12263a
}
.offcanvas.vc {
    width: min(1180px,98vw);
    border: 0;
   
    overflow: hidden;
    box-shadow: -24px 0 70px rgba(18,38,58,.25);
    transition: transform .55s cubic-bezier(.22,1,.36,1);
    background: linear-gradient(160deg,#e3f6fb 0%,#f6fbfd 35%,#eef0fb 70%,#e2f4f8 100%)
}

.vc:before, .vc:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0
}

.vc:before {
    width: 360px;
    height: 360px;
    background: rgba(24,170,204,.28);
    top: 120px;
    right: -80px
}

.vc:after {
    width: 320px;
    height: 320px;
    background: rgba(130,110,230,.16);
    bottom: 40px;
    left: -60px
}

.vc > * {
    position: relative;
    z-index: 1
}

.offcanvas-backdrop.show {
    opacity: .3;
    backdrop-filter: blur(5px)
}

.vc-top {
    background: linear-gradient(120deg,#0e2235 0%,#16405a 55%,#0f7d99 100%);
    color: #fff;
    padding: .9rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap
}

.vc-co {
    font-size: .7rem;
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .08em;
    width: 100%;
    margin-bottom: -.5rem
}

.vno {
    font-size: 1.15rem;
    font-weight: 700
}

.meta {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    flex: 1
}

    .meta div {
        font-size: .8rem;
        color: rgba(255,255,255,.65);
        padding-left: .9rem;
        border-left: 1px solid rgba(255,255,255,.25)
    }

    .meta b {
        color: #fff;
        font-weight: 500;
        margin-left: .3rem
    }

.st {
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.35);
    color: #b6f5cf;
    border-radius: 20px;
    padding: .2rem .8rem;
    font-weight: 500;
    font-size: .78rem
}
.unSt {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.35);
    color: #b6f5cf;
}
.dlSt {
    background: rgb(255 255 255 / 55%);
    border: 1px solid rgb(231 68 68 / 68%);
    color: #ab1b1b;
}

.st:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4be08a;
    margin-right: .4rem;
    box-shadow: 0 0 8px #4be08a
}
.unSt:before {
    background: #4be08a;
}
.dlSt:before {
    background: #ab1b1b;
}
.vc-top .btn-close {
    filter: invert(1);
    opacity: .85
}

.vc .offcanvas-body {
    padding: .9rem 1.25rem
}

.sec {

    transform: translateY(14px);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 16px;
    padding: .7rem .85rem;
    margin-bottom: .7rem;
    box-shadow: 0 8px 28px rgba(18,38,58,.07),inset 0 1px 0 rgba(255,255,255,.9)
}

    .sec.in {
        opacity: 1;
        transform: none;
        transition: .5s cubic-bezier(.22,1,.36,1)
    }

.sec-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
    font-weight: 500;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--pd)
}

.pan, .tag {
    background: var(--p);
    color: #fff;
    border-radius: 8px;
    padding: .1rem .6rem;
    font-weight: 500;
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: none
}

    .tag.warn {
        background: #e8920c
    }

    .tag.ok {
        background: #1aa35b
    }

.kv {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
    gap: .5rem .9rem
}

    .kv > div {
        border-left: 2px solid var(--ps);
        padding-left: .6rem;
        transition: .25s;
        margin-bottom: 6px;
    }

        .kv > div:hover {
            border-left-color: var(--p)
        }

    .kv label {
        display: block;
        font-size: .66rem;
        color: var(--mut);
        text-transform: uppercase;
        letter-spacing: .05em;
        margin: 0
    }

    .kv span {
        font-size: .82rem;
        font-weight: 500;
        word-break: break-word
    }

.tw {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow-x: auto;
    background: rgba(255,255,255,.7)
}

.vt {
    margin: 0;
    font-size: .78rem;
    min-width: 620px;
    --bs-table-bg: transparent
}

    .vt thead th {
        background: var(--p);
        color: #fff;
        font-weight: 500;
        font-size: .7rem;
        white-space: nowrap;
        border: 0;
        padding: .4rem .6rem
    }

    .vt.dark thead th {
        background: #3f5368
    }

    .vt td {
        padding: .35rem .6rem;
        border-color: var(--line);
        vertical-align: middle
    }

    .vt tbody tr {
        transition: .2s
    }

        .vt tbody tr:hover {
            background: var(--ps)
        }

    .vt tfoot td {
        font-weight: 700;
        background: rgba(24,170,204,.07)
    }

    .vt tr.hl td {
        background: rgba(24,170,204,.12);
        box-shadow: inset 0 1px 0 var(--p),inset 0 -1px 0 var(--p)
    }

.lnk {
    color: var(--p);
    font-weight: 700;
    text-decoration: none
}

.neg {
    color: #c0392b
}

.cr-tag {
    color: #c0392b
}

.dr-tag {
    color: #13803f
}

.vc-foot {
    padding: .65rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.8);
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(20px)
}


.vt tr.hl td {
    background: rgba(24, 170, 204, .12);
    box-shadow: inset 0 1px 0 var(--p), inset 0 -1px 0 var(--p);
}