.status{margin:0 0 10px}.status::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--muted)}
.status.connected::before{background:var(--accent)}.status.reconnecting::before{background:var(--danger)}
.row .sp{flex:1}
label.inline{display:inline;margin:0}
.peers{list-style:none;margin:0;padding:0}
.peer{display:flex;flex-direction:column;gap:6px;align-items:flex-start;border-style:dashed;transition:border-color .12s}
.peer.over{border-color:var(--accent);border-style:solid}
.peer svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.peer b{overflow-wrap:anywhere}
.code{font-size:2rem;font-weight:700;letter-spacing:.2em;color:var(--accent)}
#pair-live{margin-top:12px}#pair-live input{width:min(100%,32em)}
.xfers{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.xfers progress{width:100%;height:8px;accent-color:var(--accent)}
.xfers .files{list-style:none;margin:8px 0 0;padding:0}
.xfers .files li{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;padding:4px 0;border-top:1px solid var(--line)}
.xfers .files .n{overflow-wrap:anywhere;flex:1 1 12em}
.xfers pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:14em;margin:8px 0}
.xfers .head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.xfers .head b{overflow-wrap:anywhere}
.tag{font-size:.8em;border:1px solid var(--line);border-radius:99px;padding:0 8px;color:var(--muted)}
.xfers .row{margin-top:8px}
dialog{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:var(--radius);width:min(32em,calc(100% - 28px))}
dialog::backdrop{background:rgba(0,0,0,.5)}
@media(max-width:560px){.code{font-size:1.6rem}}