/* =========================================================
   ZYRODEVV STORE V2.4.53 — CONTACTS STAY INSIDE LEFT SLOT
   Desktop: contacts fill the empty area directly below the
   graph button; Network & Port remains in the right column.
   Mobile layout remains unchanged and contacts stay hidden.
   ========================================================= */

@media (min-width:1024px){
  body.zyro-gridwave #panelOrderForm>.server-live-card{
    grid-template-columns:minmax(350px,.82fr) minmax(0,1.18fr)!important;
    grid-template-areas:
      "head bars"
      "terminal metrics"
      "terminal desktopinfo"
      "history details"
      "contacts details"!important;
    grid-template-rows:auto auto auto auto minmax(0,auto)!important;
    align-items:start!important;
    column-gap:14px!important;
    row-gap:14px!important;
    overflow:visible!important;
  }

  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-live-head{grid-area:head!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.zyro-mini-terminal{grid-area:terminal!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-bars{grid-area:bars!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-metrics{grid-area:metrics!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-desktop-detail-grid{grid-area:desktopinfo!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.history-monitor-link{
    grid-area:history!important;
    width:100%!important;
    margin:0!important;
    align-self:start!important;
  }

  body.zyro-gridwave #panelOrderForm>.server-live-card>.infra-details{
    grid-area:details!important;
    align-self:stretch!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    overflow:hidden!important;
  }
  body.zyro-gridwave #panelOrderForm>.server-live-card>.infra-details[open] .infra-content{
    max-height:620px!important;
    overflow:auto!important;
  }

  /* Contacts stay in the original empty left slot, under the graph button. */
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-contact-grid,
  body.zyro-gridwave .server-contact-grid{
    grid-area:contacts!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    align-self:start!important;
    align-content:start!important;
  }

  body.zyro-gridwave .server-contact-grid>a{
    width:100%!important;
    min-width:0!important;
    min-height:76px!important;
    height:auto!important;
    padding:12px 14px!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) 20px!important;
    gap:11px!important;
    align-items:center!important;
    background:#ffffff!important;
    border:2px solid #17202b!important;
    border-radius:16px!important;
    box-shadow:3px 4px 0 rgba(17,24,39,.10)!important;
    color:#111827!important;
    overflow:hidden!important;
    text-decoration:none!important;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
  }
  body.zyro-gridwave .server-contact-grid>a:hover{
    transform:translateY(-2px)!important;
    border-color:#2585f5!important;
    box-shadow:4px 6px 0 rgba(37,133,245,.13)!important;
  }
  body.zyro-gridwave .server-contact-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:13px!important;
    display:grid!important;
    place-items:center!important;
    color:#ffffff!important;
    background:linear-gradient(145deg,#18bfa8,#367ff4)!important;
    font-size:.95rem!important;
    font-weight:900!important;
  }
  body.zyro-gridwave .server-contact-grid>a>div{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:2px!important;
  }
  body.zyro-gridwave .server-contact-grid small{
    display:block!important;
    margin:0!important;
    color:#0b8796!important;
    font-size:.61rem!important;
    line-height:1.2!important;
    font-weight:950!important;
    letter-spacing:.09em!important;
    white-space:nowrap!important;
  }
  body.zyro-gridwave .server-contact-grid b{
    display:block!important;
    margin:0!important;
    color:#17202b!important;
    font-size:.88rem!important;
    line-height:1.22!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.zyro-gridwave .server-contact-grid em{
    display:block!important;
    margin:0!important;
    color:#6b7b8a!important;
    font-size:.68rem!important;
    line-height:1.3!important;
    font-style:normal!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.zyro-gridwave .server-contact-grid>a>i{
    width:20px!important;
    height:20px!important;
    display:grid!important;
    place-items:center!important;
    color:#0b8796!important;
    font-size:.95rem!important;
    font-style:normal!important;
    font-weight:950!important;
  }
}

@media (min-width:1024px) and (max-width:1180px){
  body.zyro-gridwave #panelOrderForm>.server-live-card{
    grid-template-columns:minmax(310px,.78fr) minmax(0,1.22fr)!important;
  }
  body.zyro-gridwave .server-contact-grid>a{
    min-height:72px!important;
    padding:11px 12px!important;
    grid-template-columns:38px minmax(0,1fr) 18px!important;
    gap:9px!important;
  }
  body.zyro-gridwave .server-contact-icon{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
  body.zyro-gridwave .server-contact-grid b{font-size:.8rem!important}
  body.zyro-gridwave .server-contact-grid em{font-size:.63rem!important}
}

@media (max-width:1023px){
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-contact-grid,
  body.zyro-gridwave .server-contact-grid{
    display:none!important;
  }
}

html[data-theme='dark'] body.zyro-gridwave .server-contact-grid>a{
  background:#111827!important;
  border-color:#334155!important;
  color:#f8fafc!important;
}
html[data-theme='dark'] body.zyro-gridwave .server-contact-grid b{color:#f8fafc!important}
html[data-theme='dark'] body.zyro-gridwave .server-contact-grid em{color:#94a3b8!important}