.hud-panel {
    position: relative;

    min-height: 168px;

    padding: 18px;

    border:
        1px solid
        rgba(255, 67, 20, 0.42);

    background:
        linear-gradient(
            145deg,
            rgba(20, 5, 3, 0.72),
            rgba(3, 3, 3, 0.58)
        );

    clip-path:
        polygon(
            14px 0,
            calc(100% - 14px) 0,
            100% 14px,
            100% calc(100% - 14px),
            calc(100% - 14px) 100%,
            14px 100%,
            0 calc(100% - 14px),
            0 14px
        );

    box-shadow:
        inset 0 0 30px
        rgba(255, 37, 11, 0.025);
}

.hud-panel__corners::before,
.hud-panel__corners::after {
    content: "";

    position: absolute;

    width: 24px;
    height: 24px;

    border-color: var(--hm-red);
    border-style: solid;

    pointer-events: none;
}

.hud-panel__corners::before {
    top: 5px;
    left: 5px;

    border-width: 2px 0 0 2px;
}

.hud-panel__corners::after {
    right: 5px;
    bottom: 5px;

    border-width: 0 2px 2px 0;
}

.hud-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;

    padding-bottom: 9px;

    border-bottom:
        1px solid
        rgba(255, 57, 20, 0.17);

    color: var(--hm-red);

    font-size: 10px;
    letter-spacing: 0.13em;
}

.metric + .metric {
    margin-top: 14px;
}

.metric__label,
.data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 8px;
    letter-spacing: 0.08em;
}

.metric__label strong,
.data-row strong {
    color:
        rgba(255, 255, 255, 0.83);

    font-weight: 500;
}

.metric__track {
    height: 5px;

    margin-top: 7px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.055);
}

.metric__fill {
    display: block;

    width: 0;
    height: 100%;

    background:
        repeating-linear-gradient(
            90deg,
            var(--hm-red) 0 7px,
            transparent 7px 9px
        );

    filter:
        drop-shadow(
            0 0 4px
            rgba(255, 45, 17, 0.7)
        );
}

.stream + .stream {
    margin-top: 17px;
}

.stream > span {
    color:
        rgba(255, 255, 255, 0.55);

    font-size: 8px;
    letter-spacing: 0.08em;
}

.stream__graph {
    height: 42px;

    display: flex;
    align-items: flex-end;

    gap: 2px;

    margin-top: 8px;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(255, 55, 17, 0.14);
}

.stream__bar {
    width: 3px;

    flex: 1 1 auto;

    min-height: 2px;

    background: var(--hm-red);

    opacity: 0.7;

    box-shadow:
        0 0 4px
        rgba(255, 45, 15, 0.5);
}

.network-row + .network-row {
    margin-top: 17px;
}

.network-blocks {
    display: flex;
    gap: 3px;

    margin-top: 8px;
}

.network-blocks span {
    width: 100%;
    height: 5px;

    background: var(--hm-red);

    box-shadow:
        0 0 5px
        rgba(255, 48, 16, 0.54);
}

.network-blocks span:nth-last-child(-n + 2) {
    opacity: 0.22;
}

.threat-radar {
    position: relative;

    width: 116px;
    height: 116px;

    margin: 5px auto 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 55, 15, 0.34);
}

.threat-radar__ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 56, 16, 0.25);
}

.threat-radar__ring:nth-child(1) {
    inset: 15%;
}

.threat-radar__ring:nth-child(2) {
    inset: 30%;
}

.threat-radar__ring:nth-child(3) {
    inset: 43%;
}

.threat-radar__sweep {
    position: absolute;
    inset: 4%;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            rgba(255, 57, 15, 0.34),
            transparent 22%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 2px,
            #000 3px
        );
}

.threat-radar strong {
    position: relative;

    z-index: 4;

    color: var(--hm-orange);

    font-size: 30px;

    text-shadow: var(--hm-glow);
}