/* VoIP page */
.ph-split { display: grid; gap: 1.5rem 3rem; align-items: start; }
@media (min-width: 900px) { .ph-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.ph-split .checks { margin: 0; }
.vo { padding: clamp(1rem, 2.5vw, 1.5rem); background: rgba(30,30,30,.82); border: 1px solid var(--line); border-radius: var(--radius-lg); backdrop-filter: blur(6px); }
.vo__head { display: flex; align-items: center; gap: .55rem; margin: 0 0 .5rem; font-size: .85rem; color: var(--ink-2); }
.vo__dot { width: 8px; height: 8px; border-radius: 50%; background: #4fd18b; animation: vo-pulse 1.4s ease-in-out infinite; }
.vo__note { margin-left: auto; font-size: .75rem; color: #7d7d84; }
.vo__svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.vo-edge { stroke: #34343a; stroke-width: 2; stroke-linecap: round; transition: stroke .35s; }
.vo-edge.is-on { stroke: rgba(69,232,255,.6); }
.vo-node__bg { fill: var(--bg); stroke: #4a4a52; stroke-width: 1.8; transition: stroke .35s, fill .35s; }
.vo-icon { fill: none; stroke: #b4b4ba; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .35s; }
.vo-node text { fill: #8d8d94; font-size: 12px; font-weight: 500; transition: fill .35s; paint-order: stroke; stroke: #1b1b1e; stroke-width: 3px; }
.vo-node.is-on .vo-node__bg { stroke: var(--accent); fill: #10262b; }
.vo-node.is-on .vo-icon { stroke: #fff; }
.vo-node.is-on text { fill: #fff; }
.vo-node.is-done .vo-node__bg { stroke: #4fd18b; fill: #12271b; }
.vo-node.is-miss .vo-node__bg { stroke: #ffb347; fill: #2a2214; }
.vo-ring { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.vo-node.is-ring .vo-ring { animation: vo-ring .9s ease-out infinite; }
.vo-pkt { fill: var(--accent); opacity: 0; transition: opacity .2s; }
.vo-pkt.is-on { opacity: 1; }
.vo__card { margin-top: .6rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(20,20,22,.6); min-height: 4.9rem; }
.vo__card p { margin: 0; }
.vo__line { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.vo__line strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.vo__badge { padding: .15rem .55rem; border-radius: var(--radius-sm); font-size: .75rem; font-weight: 500; color: var(--accent); background: #10262b; border: 1px solid rgba(69,232,255,.45); }
.vo__badge.is-done { color: #4fd18b; background: #12271b; border-color: rgba(79,209,139,.5); }
.vo__badge.is-vm { color: var(--violet); background: #241a2b; border-color: rgba(212,132,255,.5); }
.vo__status { margin-top: .35rem !important; font-size: .9rem; color: var(--ink-2); }
@keyframes vo-pulse { 50% { opacity: .35; } }
@keyframes vo-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@media (max-width: 560px) { .vo-node text { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .vo__dot, .vo-node.is-ring .vo-ring { animation: none; } .vo * { transition: none !important; } }