/* =========================================================
   ZYRODEVV STORE V2.4.51 — CLEAN WHITE BACKGROUND
   Mengganti seluruh latar hijau menjadi putih/abu sangat muda.
   Aksen hijau-biru tetap dipakai untuk status, icon, tombol,
   progress, badge, hover, dan pilihan aktif.
   ========================================================= */
:root{
  --z51-bg:#ffffff;
  --z51-soft:#f4f7fa;
  --z51-paper:#ffffff;
  --z51-paper-alt:#f8fafc;
  --z51-ink:#111827;
  --z51-muted:#64748b;
  --z51-line:#17202b;
  --z51-green:#7ee7a8;
  --z51-green-soft:#e9fbf1;
  --z51-blue:#3b82f6;
  --z51-blue-soft:#eaf2ff;
  --z51-teal:#0f9faa;
  --z51-yellow:#ffd84a;
  --z51-accent:linear-gradient(135deg,#7ee7a8 0%,#3b82f6 100%);

  /* Override token dari V2.4.49 dan V2.4.50 */
  --nb-bg:#ffffff;
  --nb-bg-soft:#f4f7fa;
  --nb-paper:#ffffff;
  --nb-paper-2:#f8fafc;
  --nb-mint:#7ee7a8;
  --nb-blue:#3b82f6;
  --z50-bg:#ffffff;
  --z50-bg-soft:#f4f7fa;
  --z50-paper:#ffffff;
  --z50-paper-2:#f8fafc;
  --z50-mint:#7ee7a8;
}

html,
html:not([data-theme='dark']),
body.zyro-gridwave,
html:not([data-theme='dark']) body.zyro-gridwave{
  background-color:var(--z51-bg)!important;
  background-image:
    radial-gradient(circle at 8% 2%,rgba(126,231,168,.13),transparent 24%),
    radial-gradient(circle at 92% 10%,rgba(59,130,246,.10),transparent 26%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 52%,#ffffff 100%)!important;
  color:var(--z51-ink)!important;
}

/* Hilangkan panel hijau besar, tetapi biarkan aksen aktif tetap berwarna. */
body.zyro-gridwave .app-shell,
body.zyro-gridwave main,
body.zyro-gridwave .page,
body.zyro-gridwave .page-section,
body.zyro-gridwave .panel-section,
body.zyro-gridwave .vps-section,
body.zyro-gridwave .premium-section,
body.zyro-gridwave .addon-section,
body.zyro-gridwave .server-section,
body.zyro-gridwave .manual-store-page,
body.zyro-gridwave .premium-store-page,
body.zyro-gridwave .account-page,
body.zyro-gridwave .role-page{
  background:transparent!important;
}

body.zyro-gridwave .topbar,
body.zyro-gridwave .drawer-head,
body.zyro-gridwave .drawer-bottom,
body.zyro-gridwave .card,
body.zyro-gridwave .soft-card,
body.zyro-gridwave .profile,
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 .empty-state,
body.zyro-gridwave .role-card,
body.zyro-gridwave .auth-card,
body.zyro-gridwave .ticket-card,
body.zyro-gridwave .ticket-detail,
body.zyro-gridwave .ticket-form,
body.zyro-gridwave .incident-card,
body.zyro-gridwave .status-service-card,
body.zyro-gridwave .account-storage-note,
body.zyro-gridwave .panel-lifetime-card,
body.zyro-gridwave .desktop-market-hero,
body.zyro-gridwave .promo-showcase-card,
body.zyro-gridwave .desktop-panel-config-grid,
body.zyro-gridwave .panel-checkout-launch,
body.zyro-gridwave .invoice-card,
body.zyro-gridwave .order-box,
body.zyro-gridwave .buyer-box,
body.zyro-gridwave .modal-card,
body.zyro-gridwave .notice,
body.zyro-gridwave .service-switch a,
body.zyro-gridwave .manual-summary,
body.zyro-gridwave .role-summary,
body.zyro-gridwave .server-live-head,
body.zyro-gridwave .server-bars,
body.zyro-gridwave .metric-ring,
body.zyro-gridwave .infra-details,
body.zyro-gridwave .traffic-grid>div,
body.zyro-gridwave .port-item,
body.zyro-gridwave .latency-list>div,
body.zyro-gridwave .server-contact-grid>a{
  background-color:var(--z51-paper)!important;
  background-image:none!important;
}

/* Drawer putih kebiruan agar terpisah jelas dari halaman. */
body.zyro-gridwave .drawer{
  background:#f4f7fa!important;
  background-image:none!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{
  background:#ffffff!important;
}

/* Section pendukung dibuat abu sangat muda, bukan hijau. */
body.zyro-gridwave .page-hero,
body.zyro-gridwave .center-heading,
body.zyro-gridwave .contact-strip,
body.zyro-gridwave .site-footer,
body.zyro-gridwave .promo-pin-board,
body.zyro-gridwave .premium-selected-summary,
body.zyro-gridwave .addon-empty-benefits span,
body.zyro-gridwave .server-desktop-detail-grid>div{
  background-color:var(--z51-soft)!important;
  background-image:none!important;
}

/* Aksen hijau-biru tetap dipakai. */
body.zyro-gridwave .choice-card.active,
body.zyro-gridwave .package-card.active,
body.zyro-gridwave .role-card.active,
body.zyro-gridwave .nav-item.active,
body.zyro-gridwave .vps-provider-choice .choice-card.active,
body.zyro-gridwave .selected,
body.zyro-gridwave [aria-selected='true']{
  background:var(--z51-green)!important;
}
body.zyro-gridwave .primary-button,
body.zyro-gridwave button.primary-button,
body.zyro-gridwave a.primary-button,
body.zyro-gridwave .stat-icon,
body.zyro-gridwave .floating-support,
body.zyro-gridwave .drawer-account-avatar,
body.zyro-gridwave .live-status::before,
body.zyro-gridwave .progress-fill,
body.zyro-gridwave .bar-fill{
  background:var(--z51-accent)!important;
}
body.zyro-gridwave .secondary-button,
body.zyro-gridwave .badge,
body.zyro-gridwave .tag,
body.zyro-gridwave .eyebrow,
body.zyro-gridwave .profile-status,
body.zyro-gridwave .live-status{
  background:var(--z51-green-soft)!important;
}
body.zyro-gridwave .nav-icon,
body.zyro-gridwave .hero-icon,
body.zyro-gridwave .feature span,
body.zyro-gridwave .role-crown,
body.zyro-gridwave .service-switch a>span{
  background:var(--z51-blue-soft)!important;
  color:var(--z51-blue)!important;
}

/* Tabel dan detail kecil tetap terang. */
body.zyro-gridwave th{background:var(--z51-green-soft)!important}
body.zyro-gridwave td{background:#ffffff!important}
body.zyro-gridwave .input,
body.zyro-gridwave input,
body.zyro-gridwave select,
body.zyro-gridwave textarea{background:#ffffff!important}

/* Dark mode tetap gelap, bukan hijau gelap. */
html[data-theme='dark'] body.zyro-gridwave{
  background:#0b1220!important;
  background-image:
    radial-gradient(circle at 10% 5%,rgba(126,231,168,.08),transparent 28%),
    radial-gradient(circle at 90% 12%,rgba(59,130,246,.09),transparent 28%),
    linear-gradient(180deg,#0b1220,#111827)!important;
}
html[data-theme='dark'] body.zyro-gridwave .drawer{background:#111827!important}

@media (max-width:1023px){
  body.zyro-gridwave{
    background-image:
      radial-gradient(circle at 8% 1%,rgba(126,231,168,.10),transparent 22%),
      radial-gradient(circle at 95% 12%,rgba(59,130,246,.08),transparent 22%),
      linear-gradient(180deg,#ffffff 0%,#f7f9fc 54%,#ffffff 100%)!important;
  }
  body.zyro-gridwave .drawer{background:#f4f7fa!important}
}