.site-online { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:0 0 auto; box-sizing:border-box; min-height:22px; padding:3px 7px; border:1px solid #245b50; border-radius:6px; background:#102c29; color:#9ae5c4; font:500 11px/1 Arial,Helvetica,sans-serif; white-space:nowrap; font-variant-numeric:tabular-nums; }
.site-online::before { content:''; width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:#34d399; }
/* Arial's visible glyphs sit slightly above the line box's center. Move only
   the label, keeping the green dot and the badge itself in their places. */
.site-online-label { display:block; transform:translateY(1px); }
.site-online.is-unavailable { color:#a5b3c8; border-color:#3a4558; background:transparent; }
.site-online.is-unavailable::before { background:#8393a9; }
[data-theme="light"] .site-online { color:#176345; border-color:#abd8c3; background:#edf9f2; }
[data-theme="light"] .site-online::before { background:#15803d; }
[data-theme="light"] .site-online.is-unavailable { color:#53647b; border-color:#bec8d7; background:transparent; }
[data-theme="light"] .site-online.is-unavailable::before { background:#8393a9; }
/* Keep the original placement beside the subtitle, underneath ARCHEAGE. */
.site-brand-meta { display:flex; align-items:center; gap:7px; }
.tracker-header .site-brand-meta .logo-subtitle { margin:0; }
.tracker-header .site-online { min-height:20px; padding:2px 5px; font-size:10px; }
@media(max-width:760px) { .site-brand-meta { margin-top:3px; } }