.pe1hud-vt {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border: 1px solid rgba(0,0,0,.14);
    background: var(--pe1hud-vt-bg, #e6f0f8);
    color: var(--pe1hud-vt-text, #222222);
    font: inherit;
    line-height: 1.25;
    padding: 10px;
}

.pe1hud-vt *,
.pe1hud-vt *::before,
.pe1hud-vt *::after { box-sizing: border-box; }

.pe1hud-vt__title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 1.03em;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,.12);
}

.pe1hud-vt .dashicons {
    width: 1em;
    height: 1em;
    font-size: 1em;
    line-height: 1;
    vertical-align: -0.08em;
}

.pe1hud-vt__title .dashicons { font-size: 1.12em; }
.pe1hud-vt__inline-icon { margin-right: 3px; opacity: .78; }
.pe1hud-vt__emoji { margin-right: 3px; font-size: .95em; }

.pe1hud-vt__online {
    display: grid;
    grid-template-columns: 9px 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 5px 0 8px;
    font-size: .94em;
}

.pe1hud-vt__online strong { font-size: 1.08em; }

.pe1hud-vt__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #28a745;
    box-shadow: 0 0 0 2px rgba(40,167,69,.12);
}

.pe1hud-vt__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(0,0,0,.10);
    border: 1px solid rgba(0,0,0,.08);
}

.pe1hud-vt__grid > div {
    min-width: 0;
    background: rgba(255,255,255,.54);
    padding: 6px 7px;
}

.pe1hud-vt__grid span,
.pe1hud-vt__grid strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pe1hud-vt__grid span {
    font-size: .76em;
    opacity: .75;
    white-space: nowrap;
}

.pe1hud-vt__grid span .dashicons,
.pe1hud-vt__grid span .pe1hud-vt__emoji { margin-right: 3px; }

.pe1hud-vt__grid strong {
    margin-top: 1px;
    font-size: 1em;
}

.pe1hud-vt__section { margin-top: 10px; }

.pe1hud-vt__subtitle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: .82em;
    margin-bottom: 4px;
    opacity: .82;
}

.pe1hud-vt__rows { border-top: 1px solid rgba(0,0,0,.10); }

.pe1hud-vt__row {
    display: grid;
    grid-template-columns: 28px minmax(0,1fr) auto 30px;
    align-items: center;
    gap: 4px;
    min-height: 25px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-size: .82em;
}

.pe1hud-vt__row strong { text-align: right; }
.pe1hud-vt__row small { text-align: right; opacity: .62; font-size: .88em; }

.pe1hud-vt__lang-code {
    display: inline-block;
    font-size: .75em;
    font-weight: 700;
    text-align: center;
    padding: 2px 3px;
    background: rgba(0,0,0,.07);
}

.pe1hud-vt__lang-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pe1hud-vt__row--bot {
    grid-template-columns: minmax(0,1fr) auto;
}

.pe1hud-vt__row--bot > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pe1hud-vt__bots {
    border-top: 1px solid rgba(0,0,0,.10);
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.pe1hud-vt__bot-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 0;
    cursor: pointer;
    font-size: .82em;
    font-weight: 700;
    list-style: none;
    user-select: none;
}

.pe1hud-vt__bot-summary::-webkit-details-marker { display: none; }

.pe1hud-vt__bot-summary-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.pe1hud-vt__chevron {
    transition: transform .18s ease;
    opacity: .7;
}

.pe1hud-vt__bots[open] .pe1hud-vt__chevron { transform: rotate(180deg); }

.pe1hud-vt__bot-rows {
    max-height: 260px;
    overflow-y: auto;
    border-top: 1px solid rgba(0,0,0,.10);
}

.pe1hud-vt__empty {
    padding: 5px 0;
    font-size: .8em;
    opacity: .66;
}

.pe1hud-vt__foot {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0,0,0,.09);
    font-size: .67em;
    opacity: .55;
    text-align: center;
}

.pe1hud-vt__foot .dashicons { margin-right: 3px; }

@media (max-width: 320px) {
    .pe1hud-vt { padding: 8px; }
    .pe1hud-vt__grid { grid-template-columns: 1fr; }
}