:root{--purple:#4b144d;--yellow:#c8aa6e}.mainContainerX{text-align:center;background-color:var(--bg-base);justify-content:center;min-height:calc(100vh - 180px);padding:32px 20px;display:flex}.mainContainerX .pingContainer{width:100%;max-width:1200px}.pingHeader{text-align:left;margin-bottom:32px}.pingHeader h1{color:var(--text-primary);letter-spacing:-.02em;margin:0 0 8px;font-size:28px;font-weight:700}.pingHeader .description{color:var(--text-secondary);margin:0;font-size:15px;line-height:1.6}.pingForm{flex-direction:column;gap:32px;display:flex}.boxesContainer{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:24px;width:100%;display:flex}.boxWrapper{flex-direction:column;flex:260px;align-items:center;gap:14px;max-width:360px;display:flex}.pingBox{aspect-ratio:16/9;border:1px solid var(--border-medium);border-radius:var(--radius-md);background-color:var(--bg-surface);width:100%;position:relative;overflow:hidden}.pingBox.flash{background-color:#fff;border-color:#fff}.pingBox:hover .removeBoxBtn{opacity:1}.removeBoxBtn{color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);cursor:pointer;opacity:0;background:#080c14bf;justify-content:center;align-items:center;width:32px;height:32px;display:flex;position:absolute;top:8px;right:8px;transition:none!important}.removeBoxBtn:hover{background:var(--accent-crimson);border-color:var(--accent-crimson);color:#fff}.removeBoxBtn svg{width:16px;height:16px}.inputGroup{align-items:center;width:100%;max-width:280px;display:flex;position:relative}.pingInput{text-align:center;width:100%;color:var(--text-primary);background:var(--bg-surface-elevated);border:1px solid var(--border-medium);border-radius:var(--radius-sm);outline:none;padding:12px 16px;font-family:inherit;font-size:16px;font-weight:600;transition:none!important}.pingInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pingInput::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pingInput{appearance:textfield}.pingInput:focus,.pingInput:hover{border-color:var(--border-gold)}.pingInput::placeholder{color:var(--text-muted)}.actions{justify-content:center;align-items:center;gap:16px;display:flex}@media (max-width:480px){.actions{flex-direction:column;width:100%}.actions button{width:100%}}.addBtn,.testBtn{text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-sm);cursor:pointer;padding:12px 28px;font-family:inherit;font-size:14px;font-weight:700;transition:none!important}.addBtn{background:var(--bg-surface-elevated);border:1px dashed var(--border-medium);color:var(--text-secondary)}.addBtn:hover{background:var(--bg-hover-surface);border-color:var(--border-gold);color:var(--text-primary)}.testBtn{background:var(--accent-gold);color:#080c14;border:1px solid var(--accent-gold-hover)}.testBtn:hover{background:var(--accent-gold-hover)}.testBtn:active{background:var(--accent-gold-dark)}.testBtn:disabled{opacity:.5;cursor:not-allowed}.infoSection{text-align:left;background:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid var(--border-medium);max-width:800px;margin:48px auto 0;padding:28px}.infoSection p.intro{color:var(--text-secondary);text-align:center;margin-top:0;margin-bottom:24px;font-size:15px;line-height:1.6}.infoSection .latencyChain h3{text-transform:uppercase;letter-spacing:.06em;color:var(--text-gold);border-bottom:1px solid var(--border-subtle);margin-top:0;margin-bottom:16px;padding-bottom:8px;font-size:16px;font-weight:700}.infoSection .latencyChain ul{margin:0 0 24px;padding:0;list-style-type:none}.infoSection .latencyChain ul li{color:var(--text-secondary);border-left:2px solid var(--border-gold);margin-bottom:14px;padding-left:14px;font-size:14px;line-height:1.6}.infoSection .latencyChain ul li strong{color:var(--text-primary);margin-bottom:2px;display:block}.infoSection .latencyChain ul li code{background:var(--bg-surface-elevated);border-radius:var(--radius-sm);color:var(--text-gold);padding:2px 6px;font-size:13px}.infoSection .latencyChain p.summary{color:var(--text-gold-bright);background:var(--bg-active-gold);border-radius:var(--radius-sm);border-left:3px solid var(--accent-gold);margin:0;padding:14px 18px;font-size:14px;font-weight:500;line-height:1.5}
