/* Top bar: visitor IP first, server IP second, always as one readable line.
   Loaded last so it overrides the older per-design topbar rules. */
.fx-ip-line { display:flex; align-items:center; gap:18px; min-width:0; white-space:nowrap; }
.fx-client-address { display:flex; align-items:center; gap:10px; white-space:nowrap; color:#78828f; font:12px/1.4 "Segoe UI",sans-serif; }
.fx-client-address code { font:12px/1.4 Consolas,monospace; color:var(--fx-text,#253242); background:var(--fx-hover,#f1f3f6); border:1px solid var(--fx-line,#e5e8ee); border-radius:6px; padding:5px 9px; }
html[data-foxy-design=studio] .foxy-ui .fx-client-address { font-size:14px; color:var(--fx-muted); gap:12px; }
html[data-foxy-design=studio] .foxy-ui .fx-client-address code { background:var(--fx-subtle); border:0; padding:8px 12px; border-radius:8px; font-size:14px; }
.fx-topbar .fx-ip-line { flex:0 1 auto; }
.fx-topbar .fx-ip-line > .fx-client-address,
.fx-topbar .fx-ip-line > .fx-server-address { flex:0 0 auto; }
html .foxy-ui .fx-topbar .fx-ip-line > .fx-client-address,
html .foxy-ui .fx-topbar .fx-ip-line > .fx-server-address { flex:0 0 auto; width:auto; min-width:0; }

/* Classic header: username, visitor IP and server IP on one row. */
@media (min-width:801px) {
  header .navigation-info { flex-direction:row !important; align-items:center; flex-wrap:wrap; gap:6px 16px !important; height:auto !important; }
  header .navigation-info > .credits { white-space:nowrap; }
}

@media (max-width:800px) {
  html[data-foxy-design=studio] .foxy-ui .fx-topbar .fx-ip-line {
    order:5; flex-basis:100%; gap:14px; padding-top:10px;
    border-top:1px solid var(--fx-line); overflow-x:auto; scrollbar-width:none;
  }
  .fx-topbar .fx-ip-line > .fx-server-address {
    order:0; flex:0 0 auto; margin:0; padding-top:0; border-top:0;
  }
  html .foxy-ui .fx-topbar .fx-ip-line > .fx-server-address {
    order:0; flex:0 0 auto; margin:0; padding-top:0; border-top:0;
  }
}
@media (max-width:520px) {
  .fx-ip-line { gap:8px; }
  .fx-client-address, .fx-server-address { gap:6px; font-size:11px; }
  .fx-client-address > span, .fx-server-address > span { display:none; }
  .fx-client-address code, .fx-server-address code { font-size:11px; padding:5px 8px; }
  html[data-foxy-design=studio] .foxy-ui .fx-ip-line .fx-client-address code,
  html[data-foxy-design=studio] .foxy-ui .fx-ip-line .fx-server-address code {
    font-size:11px; line-height:1.4; padding:5px 8px;
  }
}