/* =========================================================
   ZYRODEVV STORE V2.4.50 — RESPONSIVE LAYOUT REPAIR
   Memperbaiki jarak, overflow, nested card, drawer, form,
   status server, VPS, Premium, dan Add-on di HP + desktop.
   ========================================================= */
:root{
  --z50-bg:#67dfa2;
  --z50-bg-soft:#a8f0c8;
  --z50-paper:#fffef9;
  --z50-paper-2:#f7fffb;
  --z50-ink:#111827;
  --z50-muted:#60707c;
  --z50-line:#17202b;
  --z50-soft-line:#cbd8d2;
  --z50-mint:#86edb4;
  --z50-yellow:#ffd84a;
  --z50-blue:#3478f6;
  --z50-teal:#0797a4;
  --z50-shadow:4px 5px 0 rgba(17,24,39,.92);
  --z50-radius:18px;
}

body.zyro-gridwave,
body.zyro-gridwave *{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body.zyro-gridwave{
  color:var(--z50-ink)!important;
  background:var(--z50-bg)!important;
  background-image:
    radial-gradient(circle at 8% 2%,rgba(255,255,255,.34),transparent 25%),
    radial-gradient(circle at 92% 16%,rgba(31,136,255,.08),transparent 27%)!important;
}
body.zyro-gridwave img{max-width:100%}
body.zyro-gridwave p,
body.zyro-gridwave small,
body.zyro-gridwave em{overflow-wrap:anywhere}

/* Satu bahasa visual, tetapi padding tidak ditimpa mentah-mentah. */
body.zyro-gridwave .card,
body.zyro-gridwave .soft-card,
body.zyro-gridwave .choice-card,
body.zyro-gridwave .package-card,
body.zyro-gridwave .marketplace-card,
body.zyro-gridwave .other-service-card,
body.zyro-gridwave .manual-product-card,
body.zyro-gridwave .premium-product-card,
body.zyro-gridwave .server-live-card,
body.zyro-gridwave .manual-order-form,
body.zyro-gridwave .premium-order-form,
body.zyro-gridwave .addon-panel-card,
body.zyro-gridwave .addon-empty-professional,
body.zyro-gridwave .vps-policy-card,
body.zyro-gridwave .manual-product-hero,
body.zyro-gridwave .premium-store-hero{
  min-width:0!important;
  max-width:100%!important;
  color:var(--z50-ink)!important;
  background:var(--z50-paper)!important;
  border:2px solid var(--z50-line)!important;
  border-radius:var(--z50-radius)!important;
  box-shadow:var(--z50-shadow)!important;
}
body.zyro-gridwave .card::before,
body.zyro-gridwave .soft-card::before{pointer-events:none}

/* Header dan drawer */
body.zyro-gridwave .topbar{
  background:rgba(255,254,249,.97)!important;
  border-bottom:2px solid var(--z50-line)!important;
}
body.zyro-gridwave .drawer{
  background:var(--z50-bg-soft)!important;
  border-right:2px solid var(--z50-line)!important;
  box-shadow:10px 0 0 rgba(17,24,39,.16)!important;
}
body.zyro-gridwave .drawer-head,
body.zyro-gridwave .drawer-bottom{
  background:var(--z50-paper)!important;
  border-color:var(--z50-line)!important;
  flex-shrink:0!important;
}
body.zyro-gridwave .drawer-account-box{background:transparent!important}
body.zyro-gridwave .drawer-account-guest,
body.zyro-gridwave .drawer-account-profile,
body.zyro-gridwave .drawer-nav .nav-item,
body.zyro-gridwave .drawer-bottom .outline-button{
  min-width:0!important;
  background:var(--z50-paper)!important;
  border:2px solid var(--z50-line)!important;
  border-radius:15px!important;
  box-shadow:3px 3px 0 rgba(17,24,39,.9)!important;
}
body.zyro-gridwave .drawer-nav .nav-item>*{min-width:0}
body.zyro-gridwave .drawer-nav .nav-item b,
body.zyro-gridwave .drawer-nav .nav-item small{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body.zyro-gridwave .drawer-overlay,
body.zyro-gridwave .drawer-overlay.open{
  background:rgba(17,24,39,.22)!important;
  backdrop-filter:blur(1px)!important;
}

/* Judul dan switch layanan */
body.zyro-gridwave .page-hero{
  max-width:980px!important;
  margin:0 auto 20px!important;
  padding:26px 22px 20px!important;
}
body.zyro-gridwave .page-hero h1{line-height:1.12!important;overflow-wrap:anywhere}
body.zyro-gridwave .page-hero p{line-height:1.55!important}
body.zyro-gridwave .service-switch{
  width:100%!important;
  margin:0 0 22px!important;
  padding:2px 3px 7px!important;
  gap:12px!important;
}
body.zyro-gridwave .service-switch a{
  min-width:0!important;
  min-height:72px!important;
  padding:13px 14px!important;
  background:var(--z50-paper)!important;
  border:2px solid var(--z50-line)!important;
  border-radius:16px!important;
  box-shadow:3px 3px 0 rgba(17,24,39,.9)!important;
  overflow:hidden!important;
}
body.zyro-gridwave .service-switch a div{min-width:0!important}
body.zyro-gridwave .service-switch a b,
body.zyro-gridwave .service-switch a small{white-space:normal!important;overflow-wrap:anywhere!important}

/* Form umum */
body.zyro-gridwave .form-group{min-width:0!important;margin:0 0 18px!important}
body.zyro-gridwave .form-label{display:block!important;margin:0 0 8px!important;line-height:1.35!important}
body.zyro-gridwave .input,
body.zyro-gridwave input,
body.zyro-gridwave select,
body.zyro-gridwave textarea{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:13px 15px!important;
  border:2px solid var(--z50-line)!important;
  border-radius:14px!important;
  box-shadow:2px 3px 0 rgba(17,24,39,.16)!important;
}
body.zyro-gridwave textarea{min-height:120px!important;resize:vertical}
body.zyro-gridwave .primary-button,
body.zyro-gridwave .secondary-button,
body.zyro-gridwave .outline-button{
  min-width:0!important;
  max-width:100%!important;
  padding:12px 18px!important;
  border:2px solid var(--z50-line)!important;
  box-shadow:3px 3px 0 var(--z50-line)!important;
  white-space:normal!important;
  line-height:1.25!important;
}

/* Premium detail: tidak mepet garis */
body.zyro-gridwave .premium-order-form{
  width:min(100%,900px)!important;
  margin:22px auto!important;
  padding:26px!important;
  overflow:visible!important;
}
body.zyro-gridwave .premium-order-form>.section-title{
  margin:0 0 18px!important;
  padding:0 0 15px!important;
  border-bottom:1px solid var(--z50-soft-line)!important;
}
body.zyro-gridwave .premium-selected-summary{
  width:100%!important;
  padding:16px!important;
  gap:14px!important;
  border:2px solid var(--z50-soft-line)!important;
  border-radius:16px!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
body.zyro-gridwave .premium-selected-summary>*{min-width:0!important}
body.zyro-gridwave .premium-selected-summary b,
body.zyro-gridwave .premium-selected-summary small,
body.zyro-gridwave .premium-selected-summary strong{overflow-wrap:anywhere!important}
body.zyro-gridwave .premium-order-form>.soft-card{
  margin:18px 0!important;
  padding:17px 18px!important;
  border:2px solid var(--z50-line)!important;
  box-shadow:3px 3px 0 rgba(17,24,39,.9)!important;
}
body.zyro-gridwave .premium-order-form>.soft-card b{display:block!important;margin-bottom:7px!important}
body.zyro-gridwave .premium-order-form>.soft-card p{margin:0!important;line-height:1.6!important}
body.zyro-gridwave .premium-order-form>.primary-button{width:100%!important;margin-top:2px!important}

/* Add-on empty state dan add-on aktif */
body.zyro-gridwave .addon-empty-professional{
  width:min(100%,980px)!important;
  margin:22px auto!important;
  padding:28px!important;
  gap:24px!important;
  overflow:hidden!important;
}
body.zyro-gridwave .addon-empty-professional>*{min-width:0!important}
body.zyro-gridwave .addon-empty-copy{min-width:0!important}
body.zyro-gridwave .addon-empty-copy h3{margin:7px 0 10px!important;line-height:1.22!important}
body.zyro-gridwave .addon-empty-copy p{margin:0!important;line-height:1.62!important}
body.zyro-gridwave .addon-empty-benefits{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  margin:18px 0!important;
}
body.zyro-gridwave .addon-empty-benefits span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:38px!important;
  padding:8px 11px!important;
  background:var(--z50-paper-2)!important;
  border:1.5px solid var(--z50-line)!important;
  border-radius:11px!important;
  line-height:1.3!important;
}
body.zyro-gridwave .addon-panel-card{padding:24px!important}
body.zyro-gridwave .addon-control-grid>*{min-width:0!important}

/* VPS dan Script Store */
body.zyro-gridwave .manual-product-hero,
body.zyro-gridwave .premium-store-hero{padding:24px!important;gap:18px!important;overflow:hidden!important}
body.zyro-gridwave .manual-product-hero>*{min-width:0!important}
body.zyro-gridwave .manual-product-hero p{line-height:1.6!important}
body.zyro-gridwave .vps-category-tabs,
body.zyro-gridwave .vps-tier-tabs,
body.zyro-gridwave .vps-provider-choice{
  width:100%!important;
  gap:12px!important;
}
body.zyro-gridwave .vps-category-tab,
body.zyro-gridwave .vps-tier-tab,
body.zyro-gridwave .vps-provider-choice .choice-card{
  min-width:0!important;
  padding:15px 16px!important;
  color:var(--z50-ink)!important;
  background:var(--z50-paper)!important;
  border:2px solid var(--z50-line)!important;
  border-radius:16px!important;
  box-shadow:3px 3px 0 rgba(17,24,39,.72)!important;
  overflow:hidden!important;
}
body.zyro-gridwave .vps-category-tab b,
body.zyro-gridwave .vps-category-tab small,
body.zyro-gridwave .vps-tier-tab span,
body.zyro-gridwave .vps-tier-tab b,
body.zyro-gridwave .vps-tier-tab small{display:block!important;white-space:normal!important;overflow-wrap:anywhere!important}
body.zyro-gridwave .vps-category-tab.active,
body.zyro-gridwave .vps-tier-tab.active,
body.zyro-gridwave .vps-provider-choice .choice-card.active{background:var(--z50-mint)!important}
body.zyro-gridwave .vps-policy-card{padding:20px!important;margin:18px 0!important}
body.zyro-gridwave .vps-policy-card>div{min-width:0!important;gap:13px!important}
body.zyro-gridwave .vps-policy-card small{display:block!important;line-height:1.55!important;white-space:normal!important}
body.zyro-gridwave .manual-products-grid{width:100%!important;gap:14px!important}
body.zyro-gridwave .manual-product-card{padding:17px!important;gap:13px!important;overflow:hidden!important}
body.zyro-gridwave .manual-product-card>*{min-width:0!important}
body.zyro-gridwave .manual-product-card p{line-height:1.48!important;overflow-wrap:anywhere!important}
body.zyro-gridwave .manual-order-form{padding:24px!important;overflow:visible!important}
body.zyro-gridwave .manual-summary{padding:16px!important;gap:14px!important;overflow:hidden!important}

/* Status server: semua isi memiliki ruang dan tidak saling timpa. */
body.zyro-gridwave #panelOrderForm>.server-live-card{
  width:100%!important;
  min-width:0!important;
  padding:18px!important;
  gap:14px!important;
  overflow:hidden!important;
}
body.zyro-gridwave #panelOrderForm>.server-live-card>*{min-width:0!important;max-width:100%!important}
body.zyro-gridwave .server-live-head,
body.zyro-gridwave .server-bars,
body.zyro-gridwave .server-metrics .metric-ring,
body.zyro-gridwave .server-desktop-detail-grid>div,
body.zyro-gridwave .infra-details,
body.zyro-gridwave .server-contact-grid>a{
  background:var(--z50-paper)!important;
  border:2px solid var(--z50-line)!important;
  border-radius:15px!important;
  box-shadow:none!important;
}
body.zyro-gridwave .server-live-head{padding:16px!important;gap:12px!important;overflow:hidden!important}
body.zyro-gridwave .server-live-identity{min-width:0!important}
body.zyro-gridwave .server-live-identity h2,
body.zyro-gridwave .server-live-identity p{overflow-wrap:anywhere!important}
body.zyro-gridwave .server-cpu-strip{min-width:0!important;padding:11px 13px!important;gap:10px!important}
body.zyro-gridwave .server-cpu-model{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important}
body.zyro-gridwave .server-bars{padding:15px!important;gap:13px!important}
body.zyro-gridwave .server-bar{min-width:0!important;gap:7px!important}
body.zyro-gridwave .server-bar>div{height:10px!important;border:1.5px solid var(--z50-line)!important;border-radius:999px!important}
body.zyro-gridwave .server-metrics{width:100%!important;min-width:0!important;gap:10px!important}
body.zyro-gridwave .server-metrics .metric-ring{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:92px!important;
  aspect-ratio:auto!important;
  padding:0!important;
  overflow:hidden!important;
}
body.zyro-gridwave .server-metrics .metric-ring::before{display:none!important}
body.zyro-gridwave .server-metrics .metric-ring-inner{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  padding:15px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
  background:transparent!important;
  overflow:hidden!important;
}
body.zyro-gridwave .server-metrics .metric-ring-inner::before{display:none!important}
body.zyro-gridwave .server-metrics .metric-ring-inner span,
body.zyro-gridwave .server-metrics .metric-ring-inner b,
body.zyro-gridwave .server-metrics .metric-ring-inner small{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:var(--z50-ink)!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
}
body.zyro-gridwave .server-metrics .metric-ring-inner span{font-size:.68rem!important;line-height:1.2!important;letter-spacing:.08em!important}
body.zyro-gridwave .server-metrics .metric-ring-inner b{margin-top:7px!important;font-size:1rem!important;line-height:1.2!important}
body.zyro-gridwave .server-metrics .metric-ring-inner small{margin-top:4px!important;font-size:.68rem!important;color:var(--z50-muted)!important}
body.zyro-gridwave .server-desktop-detail-grid{gap:10px!important}
body.zyro-gridwave .server-desktop-detail-grid>div{min-width:0!important;padding:13px 14px!important;overflow:hidden!important}
body.zyro-gridwave .server-desktop-detail-grid span,
body.zyro-gridwave .server-desktop-detail-grid b,
body.zyro-gridwave .server-desktop-detail-grid small{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body.zyro-gridwave .server-desktop-detail-grid b{margin-top:5px!important;line-height:1.3!important}
body.zyro-gridwave .server-desktop-detail-grid small{margin-top:4px!important;line-height:1.35!important;color:var(--z50-muted)!important}
body.zyro-gridwave .history-monitor-link{
  min-width:0!important;
  padding:13px 16px!important;
  border:2px solid var(--z50-line)!important;
  border-radius:14px!important;
  box-shadow:3px 3px 0 rgba(17,24,39,.78)!important;
  text-align:center!important;
  line-height:1.3!important;
}
body.zyro-gridwave .infra-details{min-width:0!important;overflow:hidden!important}
body.zyro-gridwave .infra-details>summary{
  min-height:56px!important;
  padding:15px 17px!important;
  gap:12px!important;
  line-height:1.3!important;
}
body.zyro-gridwave .infra-content{padding:0 16px 17px!important;overflow:hidden!important}
body.zyro-gridwave .infra-section{padding-top:16px!important;border-top:1px solid var(--z50-soft-line)!important;box-shadow:none!important}
body.zyro-gridwave .infra-section h3{margin:0 0 14px!important;line-height:1.3!important}
body.zyro-gridwave .infra-section h4{margin:20px 0 10px!important;line-height:1.3!important}
body.zyro-gridwave .traffic-grid,
body.zyro-gridwave .port-grid,
body.zyro-gridwave .latency-list{gap:10px!important}
body.zyro-gridwave .traffic-grid>div,
body.zyro-gridwave .port-item,
body.zyro-gridwave .latency-list>div{
  min-width:0!important;
  padding:13px 14px!important;
  background:var(--z50-paper-2)!important;
  border:1.5px solid var(--z50-line)!important;
  border-radius:13px!important;
  box-shadow:none!important;
}
body.zyro-gridwave .port-item span,
body.zyro-gridwave .port-item b,
body.zyro-gridwave .latency-list span,
body.zyro-gridwave .latency-list b{min-width:0!important;overflow-wrap:anywhere!important}
body.zyro-gridwave .server-contact-grid{gap:10px!important}
body.zyro-gridwave .server-contact-grid>a{
  min-width:0!important;
  padding:13px 14px!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:11px!important;
  overflow:hidden!important;
}
body.zyro-gridwave .server-contact-grid>a>div{min-width:0!important}
body.zyro-gridwave .server-contact-grid small,
body.zyro-gridwave .server-contact-grid b,
body.zyro-gridwave .server-contact-grid em{
  display:block!important;
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* Footer dan strip tidak menempel ke tepi. */
body.zyro-gridwave .site-footer{padding:22px!important}
body.zyro-gridwave .contact-strip{gap:12px!important}

@media (min-width:1024px){
  body.zyro-gridwave .app-shell,
  body.zyro-gridwave .contact-strip,
  body.zyro-gridwave .site-footer,
  body.zyro-gridwave .promo-pin-board{
    width:calc(100vw - 52px)!important;
    max-width:1660px!important;
    margin-inline:auto!important;
  }
  body.zyro-gridwave .app-shell{padding:24px 0 40px!important}
  body.zyro-gridwave .service-switch{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;overflow:visible!important}
  body.zyro-gridwave .manual-products-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.zyro-gridwave .premium-products-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.zyro-gridwave .vps-category-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.zyro-gridwave .vps-tier-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.zyro-gridwave .vps-provider-choice{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.zyro-gridwave .addon-empty-professional{display:grid!important;grid-template-columns:120px minmax(0,1fr)!important;align-items:center!important}

  body.zyro-gridwave #panelOrderForm>.server-live-card{
    display:grid!important;
    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 auto!important;
    align-items:start!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;min-height:250px!important;height:100%!important;max-height:none!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;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-desktop-detail-grid{grid-area:desktopinfo!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.history-monitor-link{grid-area:history!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.infra-details{grid-area:details!important;align-self:stretch!important;margin:0!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.infra-details[open] .infra-content{max-height:430px!important;overflow:auto!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-contact-grid{grid-area:contacts!important;display:grid!important;grid-template-columns:1fr!important;margin:0!important}
}

@media (min-width:1024px) and (max-width:1260px){
  body.zyro-gridwave #panelOrderForm>.server-live-card{grid-template-columns:minmax(310px,.78fr) minmax(0,1.22fr)!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.zyro-gridwave .manual-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:1023px){
  :root{--z50-shadow:3px 4px 0 rgba(17,24,39,.9)}
  body.zyro-gridwave .app-shell{width:100%!important;padding:16px 14px 34px!important}
  body.zyro-gridwave .topbar{min-height:88px!important;padding-inline:18px!important}
  body.zyro-gridwave .drawer{width:min(91vw,420px)!important;max-width:420px!important}
  body.zyro-gridwave .drawer-head{min-height:94px!important;padding:15px 16px!important}
  body.zyro-gridwave .drawer-account-box{padding:12px 14px 8px!important}
  body.zyro-gridwave .drawer-nav{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-content:start!important;
    gap:11px!important;
    padding:12px 14px 18px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  body.zyro-gridwave .drawer-nav .nav-item{
    width:100%!important;
    min-height:72px!important;
    margin:0!important;
    padding:11px 13px!important;
    gap:12px!important;
  }
  body.zyro-gridwave .drawer-nav .nav-item small{display:block!important;margin-top:3px!important;line-height:1.3!important}
  body.zyro-gridwave .drawer-bottom{padding:12px 14px max(13px,env(safe-area-inset-bottom))!important;gap:10px!important}

  body.zyro-gridwave .service-switch{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow:visible!important;
  }
  body.zyro-gridwave .service-switch a{min-height:82px!important;padding:12px!important}
  body.zyro-gridwave .page-hero{padding:22px 12px 17px!important;margin-bottom:18px!important}
  body.zyro-gridwave .page-hero h1{font-size:clamp(1.65rem,8vw,2.25rem)!important}

  body.zyro-gridwave .manual-product-hero,
  body.zyro-gridwave .premium-store-hero{padding:20px 18px!important;align-items:flex-start!important}
  body.zyro-gridwave .manual-product-hero h1,
  body.zyro-gridwave .premium-store-hero h1{font-size:1.75rem!important;line-height:1.12!important}
  body.zyro-gridwave .vps-category-tabs{display:grid!important;grid-template-columns:1fr!important}
  body.zyro-gridwave .vps-tier-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.zyro-gridwave .vps-provider-choice{display:grid!important;grid-template-columns:1fr!important}
  body.zyro-gridwave .manual-products-grid,
  body.zyro-gridwave .premium-products-grid{display:grid!important;grid-template-columns:1fr!important}
  body.zyro-gridwave .manual-order-form{padding:19px!important}

  body.zyro-gridwave .premium-order-form{padding:19px!important;margin:18px 0!important}
  body.zyro-gridwave .premium-selected-summary{grid-template-columns:58px minmax(0,1fr)!important;padding:14px!important}
  body.zyro-gridwave .premium-selected-summary>strong{grid-column:2!important;justify-self:start!important;margin-top:3px!important}
  body.zyro-gridwave .premium-qty-control{grid-template-columns:54px minmax(0,1fr) 54px!important;width:100%!important}

  body.zyro-gridwave .addon-empty-professional{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    text-align:center!important;
    padding:22px 18px!important;
  }
  body.zyro-gridwave .addon-empty-icon{width:92px!important;height:92px!important;margin:0 auto!important}
  body.zyro-gridwave .addon-empty-benefits{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  body.zyro-gridwave .addon-empty-benefits span{justify-content:center!important}
  body.zyro-gridwave .addon-empty-professional .primary-button{width:100%!important}
  body.zyro-gridwave .addon-control-grid{grid-template-columns:1fr!important}

  body.zyro-gridwave #panelOrderForm>.server-live-card{display:block!important;padding:14px!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>*{margin:0 0 12px!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>*:last-child{margin-bottom:0!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-metrics{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-desktop-detail-grid{display:none!important}
  body.zyro-gridwave #panelOrderForm>.server-live-card>.server-contact-grid,
  body.zyro-gridwave .server-contact-grid{display:none!important}
  body.zyro-gridwave .server-metrics .metric-ring{min-height:104px!important}
  body.zyro-gridwave .server-metrics .metric-ring-inner{padding:16px!important}
  body.zyro-gridwave .infra-details{width:100%!important;margin:0!important}
  body.zyro-gridwave .traffic-grid,
  body.zyro-gridwave .port-grid{display:grid!important;grid-template-columns:1fr!important}
  body.zyro-gridwave .latency-list>div{align-items:flex-start!important}
  body.zyro-gridwave .history-monitor-link{display:flex!important;align-items:center!important;justify-content:center!important;min-height:58px!important}
}

@media (max-width:420px){
  body.zyro-gridwave .app-shell{padding-inline:10px!important}
  body.zyro-gridwave .service-switch{gap:9px!important}
  body.zyro-gridwave .service-switch a{min-height:78px!important;padding:10px!important;gap:8px!important}
  body.zyro-gridwave .service-switch a>span{width:38px!important;height:38px!important;min-width:38px!important}
  body.zyro-gridwave .premium-order-form,
  body.zyro-gridwave .manual-order-form{padding:16px!important}
  body.zyro-gridwave .server-metrics .metric-ring{min-height:98px!important}
  body.zyro-gridwave .server-metrics .metric-ring-inner{padding:13px!important}
  body.zyro-gridwave .server-metrics .metric-ring-inner b{font-size:.92rem!important}
}

/* Tema gelap tetap terbaca tanpa merusak tata letak. */
html[data-theme='dark'] body.zyro-gridwave{background:#234a35!important}
html[data-theme='dark'] body.zyro-gridwave .card,
html[data-theme='dark'] body.zyro-gridwave .soft-card,
html[data-theme='dark'] body.zyro-gridwave .choice-card,
html[data-theme='dark'] body.zyro-gridwave .manual-product-card,
html[data-theme='dark'] body.zyro-gridwave .premium-product-card,
html[data-theme='dark'] body.zyro-gridwave .server-live-card,
html[data-theme='dark'] body.zyro-gridwave .server-live-head,
html[data-theme='dark'] body.zyro-gridwave .server-bars,
html[data-theme='dark'] body.zyro-gridwave .metric-ring,
html[data-theme='dark'] body.zyro-gridwave .infra-details,
html[data-theme='dark'] body.zyro-gridwave .traffic-grid>div,
html[data-theme='dark'] body.zyro-gridwave .port-item,
html[data-theme='dark'] body.zyro-gridwave .latency-list>div{
  color:var(--z50-ink)!important;
  background:var(--z50-paper)!important;
}