@charset "UTF-8";

.header-inner.has-server-online { grid-template-columns: minmax(0,1fr) auto auto minmax(0,1fr); gap: 18px; }
.server-online-widget { --server-online: #73c991; min-width: 116px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 11px; color: var(--text); background: rgba(17,20,18,.9); border: 1px solid var(--line); border-radius: 0; cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background .2s ease, border-color .2s ease, opacity .2s ease; }
.server-online-widget:hover { background: var(--surface-2); border-color: #465047; }
.server-online-widget:focus-visible { outline: 3px solid var(--ocean-light); outline-offset: 2px; }
.server-online-widget:disabled { cursor: wait; opacity: .72; }
.server-online-dot { width: 8px; height: 8px; flex: 0 0 8px; background: var(--server-online); box-shadow: 0 0 0 4px rgba(115,201,145,.1); }
.server-online-copy { display: grid; gap: 2px; }
.server-online-copy small { color: var(--muted); font: 750 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.server-online-copy strong { color: var(--text); font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .025em; }
.server-online-copy b { font: inherit; }
.server-online-copy em { margin-left: 4px; color: var(--muted); font: inherit; font-size: 9px; font-style: normal; }
.server-online-refresh { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .52; transform-origin: center; transform-box: fill-box; }
.server-online-widget:hover .server-online-refresh { opacity: .92; }
.server-online-widget.is-loading .server-online-refresh { opacity: .94; animation: server-online-spin .72s linear infinite; animation-play-state: running; }
.server-online-widget.is-online .server-online-dot { animation: server-online-pulse 2.4s ease-out infinite; }
.server-online-widget.is-offline { color: var(--red); border-color: rgba(255,98,90,.38); }
.server-online-widget.is-offline .server-online-dot { background: var(--red); box-shadow: 0 0 0 4px rgba(255,98,90,.08); }
.server-online-widget.is-offline .server-online-copy strong { color: var(--red); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.server-online-widget.is-stale { --server-online: var(--gold); border-color: rgba(255,202,69,.42); }
.server-online-widget.is-stale .server-online-dot { background: var(--gold); box-shadow: 0 0 0 4px rgba(255,202,69,.09); }
.menu-top .server-online-widget { margin-left: auto; }

@keyframes server-online-pulse {
  0% { box-shadow: 0 0 0 0 rgba(115,201,145,.28); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(115,201,145,0); }
}
@keyframes server-online-spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .header-inner.has-server-online { grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; }
  .server-online-widget { min-width: 94px; height: 38px; padding-inline: 9px; }
  .server-online-copy small { display: none; }
}

@media (max-width: 420px) {
  .header-inner.has-server-online { gap: 7px; }
  .server-online-widget { min-width: 61px; padding-inline: 8px; gap: 7px; }
  .server-online-copy em { display: none; }
  .server-online-refresh { width: 14px; height: 14px; flex-basis: 14px; }
  .server-online-copy strong { font-size: 11px; }
  .menu-top .brand > span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .server-online-widget.is-online .server-online-dot { animation: none; }
  .server-online-widget.is-loading .server-online-refresh { animation: none; }
}

@media print {
  .server-online-widget { display: none !important; }
}