.connection-panel {
  max-width: 600px;
  margin: 1.5rem auto .5rem;
  padding: 1rem 1.25rem;
  border: 1px solid #38505f;
  border-radius: 8px;
  background: var(--dark-bg-color);
  text-align: left;
  font-size: .95rem;
  line-height: 1.6;
}
.connection-visitor, .connection-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1rem;
}
.connection-visitor { overflow-wrap: anywhere; }
.connection-country { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--light-text-color); }
.connection-country:empty { display: none; }
.connection-country img { object-fit: contain; flex-shrink: 0; border-radius: 2px; }
.connection-actions { justify-content: space-between; margin-top: .75rem; }
.connection-actions button { border: 1px solid #6a8090; border-radius: 5px; padding: .45rem .8rem; background: #263f4f; color: #fff; font: inherit; cursor: pointer; }
.connection-actions button:hover { background: #355367; }
.connection-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.connection-actions button:disabled { opacity: .55; cursor: wait; }
.connection-note, [data-check-progress] { color: var(--light-text-color); font-size: .8rem; }
.connection-note { margin: .65rem 0 0; }
.connection-status { display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; white-space: nowrap; }
.connection-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.connection-status[data-state=checking] { color: var(--neutral); }
.connection-status[data-state=online] { color: var(--green); }
.connection-status[data-state=offline] { color: var(--red); }
.styles_grid__pBLxg { max-width: 100%; gap: .6em 2em; }
@media (max-width: 520px) {
  main { width: 100%; padding: 2rem 1rem; }
  h1 { font-size: 1.65rem; }
  .styles_grid__pBLxg { width: 100%; padding: .75rem 0; gap: .8em .5em; font-size: 1rem; grid-template-columns: minmax(0, 1fr) auto; }
  .styles_grid__pBLxg a { overflow-wrap: anywhere; }
  .connection-status { font-size: .85rem; gap: .3rem; }
  .connection-country { font-size: .7rem; gap: 2px; }
  .connection-country img { width: 20px; height: 14px; }
}

/* Preserve the original typography while using descriptive headings. */
.directory-intro{font-size:1.25rem;font-weight:700;margin:1em 0}
.mirror-info-title{font-size:1.25rem;margin:1em 0}