.rift-metrics { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; color: inherit; font-size: 14px; font-weight: 400; line-height: 20px; }
.rift-online-details { position: relative; }
.rift-online-details summary { cursor: pointer; list-style: none; white-space: nowrap; }
.rift-online-details summary::-webkit-details-marker { display: none; }
.rift-ip-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: flex; flex-direction: column; gap: 5px; min-width: 180px; max-width: min(340px, 75vw); padding: 8px 12px; border: 1px solid rgba(128,128,128,.2); border-radius: 6px; background: var(--n-color, Canvas); box-shadow: 0 4px 16px rgba(0,0,0,.1); overflow-wrap: anywhere; font-size: 13px; }
.rift-ip-list code { font-family: ui-monospace, Consolas, monospace; }
.rift-refresh { appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; box-shadow: none; color: inherit; font: inherit; cursor: pointer; }
.rift-refresh:hover { color: var(--primary-color, #347982); }
.rift-refresh:disabled { opacity: .5; cursor: wait; }
.rift-refresh:focus-visible, .rift-online-details summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.rift-refresh-icon { display: block; }
.rift-refresh-icon.is-refreshing { animation: rift-refresh-spin .8s linear infinite; }
@keyframes rift-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rift-refresh-icon.is-refreshing { animation: none; } }