@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =====================================================================
   ZENOVIQ GLOBAL UI THEME
   Visual-only website redesign based on index.html + products.html.
   No server controls, IDs, postback wiring or page behaviour are changed.
   ===================================================================== */

:root {
  --z-bg: #05070d;
  --z-bg-2: #0a0e1a;
  --z-bg-3: #0d1322;
  --z-card: rgba(15, 20, 34, .76);
  --z-card-solid: #0f1422;
  --z-card-strong: rgba(12, 16, 28, .94);
  --z-text: #eef2fb;
  --z-text-soft: #cdd6ec;
  --z-muted: #93a0bd;
  --z-gold: #f0be36;
  --z-gold-2: #d9a520;
  --z-gold-3: #b8860b;
  --z-blue: #2b6bff;
  --z-blue-2: #1d4ed8;
  --z-blue-3: #153ea8;
  --z-green: #2ecf8f;
  --z-red: #ff6577;
  --z-orange: #ffad4d;
  --z-border: rgba(240, 190, 54, .16);
  --z-border-strong: rgba(240, 190, 54, .34);
  --z-border-blue: rgba(43, 107, 255, .34);
  --z-gold-grad: linear-gradient(135deg, #f6cf55, #d9a520);
  --z-blue-grad: linear-gradient(135deg, #3b82f6, #1d4ed8);
  --z-brand-grad: linear-gradient(120deg, #f0be36 0%, #e9c84a 40%, #3b82f6 100%);
  --z-card-grad: linear-gradient(145deg, rgba(18, 25, 43, .94), rgba(8, 12, 23, .94));
  --z-shadow: 0 22px 64px rgba(0, 0, 0, .42);
  --z-shadow-soft: 0 14px 34px rgba(37, 99, 235, .18);
  --z-radius: 18px;
  --z-radius-sm: 13px;
  --og-bg: var(--z-bg);
  --og-bg-2: var(--z-bg-2);
  --og-bg-3: var(--z-bg-3);
  --og-surface: var(--z-card);
  --og-glass: rgba(43, 107, 255, .06);
  --og-gold: var(--z-gold);
  --og-gold-2: var(--z-gold-2);
  --og-gold-3: #f7d86f;
  --og-gold-deep: var(--z-gold-3);
  --og-gold-dark: #755b11;
  --og-text: var(--z-text);
  --og-muted: var(--z-muted);
  --og-border: var(--z-border);
  --og-gold-bd: var(--z-border-strong);
  --og-grad: var(--z-brand-grad);
  --og-grad-soft: var(--z-gold-grad);
  --og-glow: 0 14px 34px rgba(240, 190, 54, .22);
  --og-glow-soft: 0 12px 28px rgba(43, 107, 255, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--z-bg) !important;
}
body,
body.g-sidenav-show,
form#form1,
.page-body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
html, body {
  margin: 0;
  overflow-x: hidden !important;
  color: var(--z-text) !important;
  font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  background:
    radial-gradient(1000px 520px at 88% -8%, rgba(43, 107, 255, .15), transparent 60%),
    radial-gradient(1000px 620px at -10% 6%, rgba(240, 190, 54, .12), transparent 55%),
    linear-gradient(180deg, #070a12, #05070d 42%, #03050a) !important;
}
body { min-height: 100vh; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .35;
  background-image:
    linear-gradient(rgba(43, 107, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 190, 54, .03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 24%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 24%, transparent 80%);
}
::selection { background: var(--z-gold); color: #08101d; }
img, video, iframe, canvas, svg { max-width: 100%; }
a { color: var(--z-gold); text-decoration: none; transition: color .2s ease, opacity .2s ease, transform .2s ease; }
a:hover, a:focus { color: #ffd96a; }
hr { border-color: rgba(240, 190, 54, .18) !important; }
small, .small, .text-muted, .text-secondary { color: var(--z-muted) !important; }

* { scrollbar-color: rgba(43, 107, 255, .6) var(--z-bg-2); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--z-bg-2); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--z-blue), var(--z-gold-2)); border-radius: 20px; }

/* Approved branding assets only */
img[src="images/logo.png"],
img[src$="/images/logo.png"],
.navbar-brand img,
.pm-logo img,
.preload-logo img {
  content: url("images/logo.png");
  object-fit: contain !important;
}
.pm-logo img,
.navbar-brand img { height: 44px !important; width: auto !important; }
.preload-logo {
  background-image: url("images/logo.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Ambient shapes */
.bg-shape, .og-orb { filter: blur(100px) !important; opacity: .34 !important; pointer-events: none; }
.bg-shape.one, .og-orb.one { background: var(--z-blue) !important; }
.bg-shape.two, .og-orb.two { background: var(--z-gold) !important; }
.bg-shape.three, .og-orb.three { background: #7a4dff !important; opacity: .18 !important; }
.og-sparkle { background: var(--z-gold) !important; box-shadow: 0 0 18px rgba(240, 190, 54, .75) !important; }

/* =====================================================================
   APP HEADER / SIDEBAR / BOTTOM NAVIGATION
   ===================================================================== */
.pm-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 68px !important;
  padding: 0 18px !important;
  z-index: 1100 !important;
  background: rgba(5, 7, 13, .84) !important;
  border-bottom: 1px solid var(--z-border) !important;
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .32) !important;
}
.pm-header::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--z-gold), var(--z-blue), transparent) !important;
  opacity: .55;
}
.pm-header-inner { height: 100%; position: relative; }
.pm-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.pm-logo::after { display: none !important; }
.pm-logo img {
  height: 46px !important;
  max-width: 180px !important;
  filter: drop-shadow(0 0 16px rgba(43, 107, 255, .22)) drop-shadow(0 0 12px rgba(240, 190, 54, .18)) !important;
}
.pm-user { display: none !important; }
.pm-menu-btn {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--z-border-blue) !important;
  border-radius: 12px !important;
  color: #7ea2ff !important;
  background: rgba(43, 107, 255, .09) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
.pm-menu-btn:hover { color: var(--z-gold) !important; border-color: var(--z-border-strong) !important; background: rgba(240, 190, 54, .08) !important; }

.pm-sidebar {
  width: min(310px, 86vw) !important;
  padding: 86px 14px 28px !important;
  background:
    radial-gradient(500px 300px at 0 0, rgba(43, 107, 255, .16), transparent 70%),
    rgba(7, 10, 18, .97) !important;
  border-right: 1px solid var(--z-border) !important;
  box-shadow: 20px 0 60px rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(18px);
}
.pm-sidebar ul { padding: 0 !important; margin: 0 !important; }
.pm-sidebar ul li { margin: 4px 0 !important; }
.pm-sidebar ul li a {
  min-height: 46px !important;
  padding: 11px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: var(--z-text-soft) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
}
.pm-sidebar ul li a i { width: 22px !important; text-align: center !important; color: #6f94fa !important; font-size: 16px !important; }
.pm-sidebar ul li a:hover,
.pm-sidebar ul li.active a {
  padding-left: 14px !important;
  color: #fff !important;
  border-color: rgba(240, 190, 54, .22) !important;
  background: linear-gradient(105deg, rgba(240, 190, 54, .12), rgba(43, 107, 255, .10)) !important;
  transform: translateX(3px);
}
.pm-sidebar ul li a:hover i,
.pm-sidebar ul li.active a i { color: var(--z-gold) !important; }
.pm-overlay { background: rgba(2, 4, 9, .72) !important; backdrop-filter: blur(3px); }

.page-body {
  padding-top: 82px !important;
  padding-bottom: 106px !important;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.page-body > * { min-width: 0; max-width: 100%; }
.page-body > .tf-container,
.page-body > .container,
.page-body > .container-fluid,
.page-body > .wallet-page,
.page-body > .p2p-page,
.page-body > .team-tree-page,
.page-body > .pm-wrap {
  width: min(1180px, calc(100% - 28px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.pm-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  min-height: 72px !important;
  padding: 7px max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  z-index: 1050 !important;
  background: rgba(5, 7, 13, .92) !important;
  border-top: 1px solid var(--z-border) !important;
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .34) !important;
}
.pm-footer::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--z-blue), var(--z-gold), transparent) !important;
  opacity: .55;
}
.pm-nav, .pm-footer-menu {
  max-width: 720px;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
}
.pm-nav li, .pm-footer-menu li { flex: 1; list-style: none; text-align: center; }
.pm-nav a, .pm-footer-menu a {
  min-height: 54px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: var(--z-muted) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
}
.pm-nav a i, .pm-footer-menu a i { margin: 0 !important; color: #6689e8 !important; font-size: 17px !important; }
.pm-nav a:hover, .pm-footer-menu a:hover,
.pm-nav .active a, .pm-footer-menu .active a { color: var(--z-gold) !important; transform: translateY(-2px); }
.pm-nav a:hover i, .pm-footer-menu a:hover i,
.pm-nav .active i, .pm-footer-menu .active i { color: var(--z-gold) !important; }
.pm-home { top: -21px !important; }
.pm-home a {
  width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  margin: 0 auto !important;
  border: 2px solid rgba(255, 255, 255, .18) !important;
  border-radius: 50% !important;
  color: #09111f !important;
  background: var(--z-gold-grad) !important;
  box-shadow: 0 16px 38px rgba(240, 190, 54, .32), 0 0 0 7px rgba(5, 7, 13, .9) !important;
}
.pm-home a i { color: #09111f !important; font-size: 21px !important; }
.pm-home a:hover { transform: translateY(-3px) scale(1.04) !important; }

/* =====================================================================
   TYPOGRAPHY / HEADINGS / PAGE HEROES
   ===================================================================== */
h1, h2, h3, h4, h5, h6,
.page-header, .card-title, .panel-title,
.pm-page-title, .wallet-title, .p2p-page-title, .tree-heading {
  color: var(--z-text) !important;
  font-family: "Poppins", "Inter", sans-serif !important;
}
h1, h2, h3 { font-weight: 700 !important; letter-spacing: -.025em; }
h4, h5, h6 { font-weight: 600 !important; }
.text-gradient, .grad-text, .text-brand,
html body .text-info.text-gradient,
html body .text-primary.text-gradient {
  background: var(--z-brand-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.text-primary, .text-info { color: var(--z-gold) !important; }
.text-success { color: #55ddb0 !important; }
.text-danger { color: #ff8290 !important; }
.wallet-eyebrow, .p2p-eyebrow, .pm-chip, .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 12px !important;
  border: 1px solid var(--z-border) !important;
  border-radius: 999px !important;
  color: var(--z-gold) !important;
  background: rgba(240, 190, 54, .08) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.wallet-hero, .p2p-page-header, .pm-head, .tree-heading {
  margin-bottom: 20px !important;
}
.wallet-title, .p2p-page-title, .pm-page-title, .tree-heading {
  font-size: clamp(24px, 4vw, 36px) !important;
  line-height: 1.15 !important;
  margin: 9px 0 8px !important;
}
.wallet-subtitle, .p2p-page-subtitle, .pm-sub, .tree-message { color: var(--z-muted) !important; }

/* =====================================================================
   CARDS / PANELS / SURFACES
   ===================================================================== */
.card, .panel, .panel-default, .widget, .box,
.tf-container, .bg-menuDark, .pm-surface, .pm-card, .pm-section,
.wallet-card, .wallet-balance-card, .p2p-panel, .p2p-balance-card,
.p2p-help-card, .p2p-history-panel, .member-card, .profile-card,
.modal-content, .dropdown-menu, .popover, .well {
  color: var(--z-text) !important;
  background: var(--z-card-grad) !important;
  border: 1px solid var(--z-border) !important;
  border-radius: var(--z-radius) !important;
  box-shadow: var(--z-shadow) !important;
}
.card, .panel, .wallet-card, .p2p-panel, .member-card, .pm-card, .pm-surface { overflow: hidden; }
.card::before, .panel::before, .wallet-card::before, .p2p-panel::before,
.pm-card::before, .pm-surface::before, .member-card::before, .profile-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 190, 54, .65), rgba(43, 107, 255, .65), transparent);
  pointer-events: none;
}
.card, .panel, .wallet-card, .p2p-panel, .member-card, .pm-card, .pm-surface, .profile-card { position: relative; }
.card:hover, .panel:hover, .wallet-card:hover, .p2p-panel:hover, .member-card:hover {
  border-color: rgba(240, 190, 54, .28) !important;
  box-shadow: 0 22px 62px rgba(0, 0, 0, .5), 0 12px 40px rgba(43, 107, 255, .08) !important;
}
.card-header, .panel-heading, .box-header,
.wallet-card-header, .p2p-panel-head, .pm-card-head {
  padding: 17px 19px !important;
  color: var(--z-text) !important;
  background: linear-gradient(90deg, rgba(240, 190, 54, .07), rgba(43, 107, 255, .07)) !important;
  border-bottom: 1px solid rgba(240, 190, 54, .13) !important;
}
.card-body, .panel-body, .box-body,
.wallet-card-body, .p2p-panel-body, .pm-card-body { padding: 20px !important; color: var(--z-text-soft) !important; }
.card-footer, .panel-footer { background: rgba(43, 107, 255, .035) !important; border-top: 1px solid var(--z-border) !important; }
.card-title, .panel-title, .wallet-card-title, .p2p-panel-title, .pm-section-title { color: var(--z-text) !important; }
.wallet-card-caption, .p2p-panel-caption { color: var(--z-muted) !important; }
.wallet-card-icon, .p2p-panel-icon, .p2p-balance-icon, .p2p-help-icon,
.pm-refer-ic, .pm-avatar, .member-icon {
  background: linear-gradient(135deg, rgba(240, 190, 54, .2), rgba(43, 107, 255, .22)) !important;
  color: var(--z-gold) !important;
  border: 1px solid rgba(240, 190, 54, .2) !important;
  box-shadow: 0 10px 28px rgba(43, 107, 255, .12) !important;
}

/* Bootstrap background utilities */
.bg-light, .bg-gray-100, .bg-white { background: transparent !important; }
.bg-menuDark { padding: 18px !important; margin-bottom: 18px !important; }
.bg-gradient-primary, .bg-primary { background: var(--z-blue-grad) !important; }
.bg-info { background: var(--z-blue-grad) !important; }
.bg-success { background: linear-gradient(135deg, #37d7a1, #149e72) !important; }
.bg-warning { background: var(--z-gold-grad) !important; color: #09111f !important; }
.bg-danger { background: linear-gradient(135deg, #ff7887, #dc3248) !important; }

/* =====================================================================
   FORMS
   ===================================================================== */
label, .form-label, .wallet-label, .p2p-label, .pm-label { color: var(--z-text-soft) !important; font-weight: 500 !important; }
.form-control, .form-select, select, textarea,
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="time"],
input[type="url"], input[type="search"], input[type="file"] {
  min-height: 46px;
  padding: 10px 13px !important;
  color: var(--z-text) !important;
  background: rgba(8, 13, 24, .82) !important;
  border: 1px solid rgba(147, 160, 189, .22) !important;
  border-radius: 12px !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
textarea { min-height: 110px; resize: vertical; }
.form-control:hover, .form-select:hover, select:hover, textarea:hover,
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover,
input[type="number"]:hover, input[type="tel"]:hover { border-color: rgba(43, 107, 255, .38) !important; }
.form-control:focus, .form-select:focus, select:focus, textarea:focus,
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="tel"]:focus, input[type="date"]:focus,
input[type="datetime-local"]:focus, input[type="time"]:focus {
  color: var(--z-text) !important;
  background: rgba(11, 17, 31, .96) !important;
  border-color: var(--z-blue) !important;
  box-shadow: 0 0 0 3px rgba(43, 107, 255, .16), 0 0 22px rgba(43, 107, 255, .08) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #65718c !important; opacity: 1; }
select option { color: var(--z-text) !important; background: #0b1020 !important; }
.input-group, .input-group-text, .input-group-addon, .input-group-btn { border-color: rgba(147, 160, 189, .22) !important; }
.input-group-text, .input-group-addon {
  color: #7da2ff !important;
  background: rgba(43, 107, 255, .08) !important;
  border-color: rgba(43, 107, 255, .22) !important;
}
.input-box, .p2p-input-wrap, .og-input-wrap {
  background: rgba(8, 13, 24, .82) !important;
  border: 1px solid rgba(147, 160, 189, .22) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}
.input-box:focus-within, .p2p-input-wrap:focus-within, .og-input-wrap:focus-within {
  border-color: var(--z-blue) !important;
  box-shadow: 0 0 0 3px rgba(43, 107, 255, .16) !important;
}
.og-input-icon, .p2p-input-wrap > i, .input-box i { color: #759bff !important; }
.form-check-input, input[type="checkbox"], input[type="radio"] { accent-color: var(--z-blue); }
.form-check-input:checked { background-color: var(--z-blue) !important; border-color: var(--z-blue) !important; }
.og-checkbox-fake { border-color: rgba(43, 107, 255, .44) !important; background: rgba(43, 107, 255, .05) !important; }
.og-checkbox-wrap input:checked + .og-checkbox-fake,
.og-agree-row input:checked + .og-checkbox-fake { background: var(--z-blue-grad) !important; border-color: transparent !important; }
[id*="Validator"], .field-validation-error, .validation-summary-errors { color: #ff8290 !important; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn, button, input[type="submit"], input[type="button"] { font-family: inherit !important; }
.btn, .btn_theme, .gradient-btn-full,
input[type="submit"].btn, input[type="button"].btn {
  min-height: 44px;
  border-radius: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .015em !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}
.btn-primary, .btn_theme, .gradient-btn-full,
input[type="submit"].btn-primary,
html body input[type="submit"].btn_theme,
html body button.btn_theme {
  color: #09111f !important;
  background: var(--z-gold-grad) !important;
  border: 0 !important;
  box-shadow: 0 14px 32px rgba(240, 190, 54, .23), inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}
.btn-primary:hover, .btn_theme:hover, .gradient-btn-full:hover,
input[type="submit"].btn-primary:hover,
html body input[type="submit"].btn_theme:hover {
  color: #09111f !important;
  filter: brightness(1.06);
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 38px rgba(240, 190, 54, .30), inset 0 1px 0 rgba(255, 255, 255, .38) !important;
}
.btn-info, .btn-success, .btn.bg-gradient-info,
input[type="submit"].btn-info, input[type="submit"].btn-success {
  color: #fff !important;
  background: var(--z-blue-grad) !important;
  border: 0 !important;
  box-shadow: 0 14px 32px rgba(37, 99, 235, .28) !important;
}
.btn-info:hover, .btn-success:hover, .btn.bg-gradient-info:hover {
  color: #fff !important;
  filter: brightness(1.08);
  transform: translateY(-2px) !important;
}
.btn-secondary, .btn-default, .btn-light {
  color: var(--z-text-soft) !important;
  background: rgba(43, 107, 255, .07) !important;
  border: 1px solid rgba(43, 107, 255, .24) !important;
}
.btn-outline-primary, .btn-outline-info {
  color: var(--z-gold) !important;
  background: rgba(240, 190, 54, .035) !important;
  border: 1px solid var(--z-border-strong) !important;
}
.btn-outline-primary:hover, .btn-outline-info:hover { color: #09111f !important; background: var(--z-gold-grad) !important; border-color: transparent !important; }
.btn-danger { color: #fff !important; background: linear-gradient(135deg, #ff7484, #d92d45) !important; border: 0 !important; }
.btn-warning { color: #09111f !important; background: var(--z-gold-grad) !important; border: 0 !important; }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--z-blue) !important; outline-offset: 2px; }

/* =====================================================================
   TABLES / GRIDS / PAGERS
   ===================================================================== */
.table-responsive, .pm-table-scroll, .wallet-table-wrap, .p2p-history-scroll {
  width: 100%;
  overflow-x: auto !important;
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}
.table, table, .gvTheGrid, table.gridview { color: var(--z-text-soft) !important; background: transparent !important; }
.table th, table th, thead th {
  padding: 12px 13px !important;
  color: #f7d86f !important;
  background: linear-gradient(90deg, rgba(240, 190, 54, .09), rgba(43, 107, 255, .10)) !important;
  border-color: rgba(240, 190, 54, .16) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}
.table td, table td {
  padding: 12px 13px !important;
  color: var(--z-text-soft) !important;
  background: transparent !important;
  border-color: rgba(147, 160, 189, .09) !important;
  vertical-align: middle !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > *, table tr:nth-of-type(even) td { background: rgba(43, 107, 255, .018) !important; }
.table-hover > tbody > tr:hover > *, table tbody tr:hover td { background: rgba(240, 190, 54, .055) !important; color: #fff !important; }
.gridpagerstyle { padding: 14px 0 !important; text-align: center !important; background: transparent !important; color: var(--z-gold) !important; }
.gridpagerstyle a, .gridpagerstyle span {
  display: inline-flex !important;
  min-width: 34px !important;
  height: 34px !important;
  margin: 3px !important;
  padding: 0 10px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
}
.gridpagerstyle a { color: var(--z-text-soft) !important; background: rgba(43, 107, 255, .07) !important; border: 1px solid rgba(43, 107, 255, .18) !important; }
.gridpagerstyle a:hover { color: var(--z-gold) !important; border-color: var(--z-border-strong) !important; }
.gridpagerstyle span { color: #09111f !important; background: var(--z-gold-grad) !important; border: 0 !important; }

/* =====================================================================
   BADGES / STATUS / ALERTS
   ===================================================================== */
.badge, .label, .pm-badge, .wallet-user-chip, .p2p-user-chip, .p2p-secure-badge {
  padding: 5px 10px !important;
  color: #f7d86f !important;
  background: rgba(240, 190, 54, .09) !important;
  border: 1px solid rgba(240, 190, 54, .22) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.badge.bg-gradient-success, .badge-success, .label-success, .pm-badge.active {
  color: #6de4bb !important;
  background: rgba(46, 207, 143, .10) !important;
  border-color: rgba(46, 207, 143, .25) !important;
}
.badge-danger, .label-danger { color: #ff91a0 !important; background: rgba(255, 101, 119, .10) !important; border-color: rgba(255, 101, 119, .25) !important; }
.alert { color: var(--z-text-soft) !important; border-radius: 13px !important; background: rgba(43, 107, 255, .07) !important; border: 1px solid rgba(43, 107, 255, .20) !important; }
.alert-success { background: rgba(46, 207, 143, .08) !important; border-color: rgba(46, 207, 143, .22) !important; }
.alert-danger { background: rgba(255, 101, 119, .08) !important; border-color: rgba(255, 101, 119, .22) !important; }
.alert-warning { background: rgba(240, 190, 54, .08) !important; border-color: rgba(240, 190, 54, .22) !important; }

/* =====================================================================
   DASHBOARD COMPONENTS
   ===================================================================== */
.pm-user-card, .pm-refer-card {
  background: linear-gradient(135deg, rgba(240, 190, 54, .09), rgba(43, 107, 255, .10), rgba(12, 16, 28, .92)) !important;
  border-color: rgba(240, 190, 54, .22) !important;
}
.pm-avatar { color: #09111f !important; background: var(--z-gold-grad) !important; }
.pm-hello, .pm-activation, .pm-code, .pm-name, .pm-title { color: var(--z-text) !important; }
.pm-name { font-weight: 700 !important; }
.pm-code, .pm-amt, .pm-currency { color: var(--z-gold) !important; }
.pm-mini, .pm-muted, .pm-sec-sub { color: var(--z-muted) !important; }
.pm-ic-green, .pm-ic-blue, .pm-ic-purple, .pm-ic-gold, .pm-ic-cyan, .pm-ic-red,
.pm-tile-ic, .pm-downline-icon {
  border-radius: 15px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28) !important;
}
.pm-ic-green, .pm-income-tile.pm-green .pm-tile-ic { color: #071710 !important; background: linear-gradient(135deg, #5fe0b5, #1bab78) !important; }
.pm-ic-blue, .pm-income-tile.pm-cyan .pm-tile-ic { color: #fff !important; background: var(--z-blue-grad) !important; }
.pm-ic-purple, .pm-income-tile.pm-purple .pm-tile-ic { color: #fff !important; background: linear-gradient(135deg, #9f6cff, #5e35c7) !important; }
.pm-ic-gold, .pm-income-tile.pm-gold .pm-tile-ic { color: #09111f !important; background: var(--z-gold-grad) !important; }
.pm-ic-cyan { color: #07151a !important; background: linear-gradient(135deg, #67dcf5, #1b9fbd) !important; }
.pm-ic-red, .pm-income-tile.pm-red .pm-tile-ic { color: #fff !important; background: linear-gradient(135deg, #ff7f8d, #d9344b) !important; }
.pm-income-tile {
  color: var(--z-text) !important;
  background: linear-gradient(145deg, rgba(18, 25, 43, .92), rgba(8, 12, 23, .94)) !important;
  border: 1px solid rgba(43, 107, 255, .14) !important;
  border-radius: 17px !important;
}
.pm-income-tile:hover { border-color: var(--z-border-strong) !important; transform: translateY(-4px); }
.pm-glow { background: radial-gradient(circle, rgba(43, 107, 255, .25), transparent 70%) !important; }
.pm-linkbox {
  color: var(--z-text-soft) !important;
  background: rgba(8, 13, 24, .78) !important;
  border: 1px solid rgba(43, 107, 255, .20) !important;
  border-radius: 12px !important;
}
.pm-link-ic { color: #759bff !important; }
.pm-linktext { color: var(--z-text-soft) !important; }
.pm-iconbtn, .pm-btn-copy { color: #09111f !important; background: var(--z-gold-grad) !important; }
.pm-btn-wa { color: #fff !important; background: linear-gradient(135deg, #29d77d, #128c5d) !important; }
.pm-downline-header { color: var(--z-muted) !important; border-color: rgba(147, 160, 189, .12) !important; }
.pm-downline-item { border-radius: 12px !important; }
.pm-downline-item:hover { color: var(--z-text) !important; background: rgba(43, 107, 255, .06) !important; }
.pm-downline-title { color: var(--z-text-soft) !important; }
.pm-downline-count { color: var(--z-gold) !important; }
.TickerNews.default_theme_2 { color: var(--z-text-soft) !important; background: rgba(15, 20, 34, .75) !important; border: 1px solid var(--z-border) !important; border-radius: 12px !important; }
.ti_news a { color: var(--z-gold) !important; }

/* Wallet / P2P */
.wallet-balance-card, .p2p-balance-card {
  background: linear-gradient(135deg, rgba(240, 190, 54, .13), rgba(43, 107, 255, .18), rgba(12, 16, 28, .95)) !important;
  border-color: rgba(240, 190, 54, .27) !important;
}
.wallet-balance-label, .p2p-balance-label { color: var(--z-muted) !important; }
.wallet-balance-note, .p2p-security-note, .p2p-inline-note { color: var(--z-muted) !important; }
.p2p-step-no { color: #09111f !important; background: var(--z-gold-grad) !important; }
.wallet-empty, .p2p-empty-state { color: var(--z-muted) !important; }
.wallet-empty-icon, .p2p-empty-state i { color: #759bff !important; }

/* Team tree */
.team-tree-page { padding: 10px 0 28px !important; }
.member-row { gap: 12px !important; }
.member-card {
  padding: 16px !important;
  background: linear-gradient(145deg, rgba(18, 25, 43, .94), rgba(8, 12, 23, .96)) !important;
}
.member-card:hover { transform: translateY(-3px); }
.member-name { color: var(--z-text) !important; font-weight: 650 !important; }
.member-code { color: #7ea2ff !important; }
.member-amount { color: var(--z-gold) !important; }
.status-dot { box-shadow: 0 0 0 4px rgba(43, 107, 255, .10) !important; }
.tree-refresh { color: #09111f !important; background: var(--z-gold-grad) !important; border: 0 !important; }
.BTreeLink, .wrapperrow .panel, .group { border-color: rgba(43, 107, 255, .22) !important; }

/* =====================================================================
   AUTHENTICATION / STANDALONE PUBLIC FORMS
   ===================================================================== */
body > .og-signin-shell, body > .og-signup-shell {
  width: min(100%, 1080px) !important;
  min-height: 100vh;
  margin: 0 auto !important;
  padding: 42px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.og-card {
  width: min(100%, 520px) !important;
  padding: 34px clamp(22px, 5vw, 42px) !important;
  color: var(--z-text) !important;
  background: linear-gradient(145deg, rgba(16, 22, 38, .95), rgba(7, 11, 21, .96)) !important;
  border: 1px solid rgba(240, 190, 54, .20) !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .58), 0 0 50px rgba(43, 107, 255, .08) !important;
  backdrop-filter: blur(18px);
}
.og-card::before {
  background: linear-gradient(90deg, transparent, var(--z-gold), var(--z-blue), transparent) !important;
  opacity: .8;
}
.og-brand { margin-bottom: 20px !important; }
.og-brand img { width: auto !important; height: 58px !important; max-width: 210px !important; filter: none !important; }
.og-heading { color: var(--z-text) !important; font-family: "Poppins", sans-serif !important; font-size: clamp(27px, 5vw, 38px) !important; font-weight: 750 !important; letter-spacing: -.035em !important; }
.og-heading em { color: var(--z-gold) !important; font-family: inherit !important; font-style: normal !important; }
.og-sub, .og-support { color: var(--z-muted) !important; }
.og-ornament-line { background: linear-gradient(90deg, transparent, rgba(43, 107, 255, .45), rgba(240, 190, 54, .45), transparent) !important; }
.og-diamond { background: var(--z-gold-grad) !important; box-shadow: 0 0 18px rgba(240, 190, 54, .45) !important; }
.og-field label, .og-agree-row, .og-checkbox-wrap { color: var(--z-text-soft) !important; }
.og-show-pass, .og-forgot, .og-footer-row a { color: #78a0ff !important; }
.og-show-pass:hover, .og-forgot:hover, .og-footer-row a:hover { color: var(--z-gold) !important; }
.og-btn-wrap input[type="submit"], .og-btn-wrap .btn {
  width: 100% !important;
  color: #09111f !important;
  background: var(--z-gold-grad) !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: 0 15px 34px rgba(240, 190, 54, .24) !important;
}
.og-footer-row { border-color: rgba(147, 160, 189, .12) !important; color: var(--z-muted) !important; }

/* Soft-UI legacy standalone pages */
body.g-sidenav-show .navbar,
body.g-sidenav-show nav.navbar {
  color: var(--z-text) !important;
  background: rgba(10, 14, 25, .82) !important;
  border: 1px solid var(--z-border) !important;
  box-shadow: var(--z-shadow-soft) !important;
  backdrop-filter: blur(14px);
}
body.g-sidenav-show .main-content,
body.g-sidenav-show .page-header { background: transparent !important; }
body.g-sidenav-show .card,
body:not(.g-sidenav-show) .page-header .card { max-width: 620px; margin-left: auto; margin-right: auto; }
.oblique, .oblique-image { opacity: .18 !important; filter: saturate(.7) hue-rotate(175deg) !important; }
.footer { color: var(--z-muted) !important; }

/* Preloader */
.preload, .preload-container { background: var(--z-bg) !important; }
.spinner { border-color: rgba(43, 107, 255, .16) !important; border-top-color: var(--z-gold) !important; }

/* =====================================================================
   MODALS / POPUPS / AJAX TOOLKIT
   ===================================================================== */
.modal, .modalPopup { color: var(--z-text) !important; }
.modal-backdrop, .PopupBG { background: #020409 !important; opacity: .76 !important; }
.modal-content, .modalPopup-dialog, .modalPopup-content {
  color: var(--z-text) !important;
  background: linear-gradient(145deg, #11182a, #080d18) !important;
  border: 1px solid var(--z-border-strong) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .68) !important;
}
.modal-header, .modal-footer { border-color: rgba(147, 160, 189, .12) !important; }
.modal-title { color: var(--z-text) !important; }
.close, .btn-close { color: var(--z-text) !important; filter: invert(1); opacity: .75; }
.swal2-popup { color: var(--z-text) !important; background: #0d1424 !important; border: 1px solid var(--z-border) !important; border-radius: 18px !important; }
.swal2-title { color: var(--z-text) !important; }
.swal2-html-container { color: var(--z-text-soft) !important; }

/* =====================================================================
   RESPONSIVE SAFETY
   ===================================================================== */
.row { max-width: 100%; }
[class*="col-"] { min-width: 0; }
.table-responsive > table { min-width: 680px; }
@media (max-width: 991px) {
  .page-body { padding-top: 78px !important; }
  .page-body > .tf-container,
  .page-body > .container,
  .page-body > .container-fluid,
  .page-body > .wallet-page,
  .page-body > .p2p-page,
  .page-body > .team-tree-page,
  .page-body > .pm-wrap { width: min(100% - 22px, 1180px) !important; }
  .card-body, .panel-body, .box-body, .wallet-card-body, .p2p-panel-body, .pm-card-body { padding: 17px !important; }
  .p2p-main-grid, .p2p-balance-grid, .wallet-filter-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 767px) {
  .pm-header { height: 64px !important; padding: 0 12px !important; }
  .pm-logo img { height: 39px !important; max-width: 150px !important; }
  .pm-menu-btn { width: 39px !important; height: 39px !important; }
  .page-body { padding-top: 74px !important; padding-bottom: 100px !important; }
  .page-body > .tf-container,
  .page-body > .container,
  .page-body > .container-fluid,
  .page-body > .wallet-page,
  .page-body > .p2p-page,
  .page-body > .team-tree-page,
  .page-body > .pm-wrap { width: calc(100% - 18px) !important; }
  .card, .panel, .wallet-card, .p2p-panel, .member-card, .pm-card, .pm-surface { border-radius: 15px !important; }
  .card-header, .panel-heading, .box-header, .wallet-card-header, .p2p-panel-head, .pm-card-head { padding: 14px !important; }
  .card-body, .panel-body, .box-body, .wallet-card-body, .p2p-panel-body, .pm-card-body { padding: 14px !important; }
  .table-responsive > table { min-width: 620px; }
  .og-card { padding: 28px 20px !important; border-radius: 20px !important; }
  .og-grid { grid-template-columns: 1fr !important; }
  .og-field, .og-field-full { grid-column: 1 !important; }
  .pm-nav a, .pm-footer-menu a { font-size: 9.5px !important; }
  .pm-nav a i, .pm-footer-menu a i { font-size: 16px !important; }
}
@media (max-width: 420px) {
  .pm-logo img { height: 35px !important; max-width: 132px !important; }
  .pm-footer { padding-left: 2px !important; padding-right: 2px !important; }
  .pm-nav a, .pm-footer-menu a { font-size: 9px !important; }
  .pm-home a { width: 56px !important; height: 56px !important; min-height: 56px !important; }
  .wallet-title, .p2p-page-title, .pm-page-title, .tree-heading { font-size: 25px !important; }
}
@media (hover: none) {
  .card:hover, .panel:hover, .wallet-card:hover, .p2p-panel:hover, .member-card:hover,
  .pm-income-tile:hover { transform: none !important; }
}